HTML标签

web前端

一、什么是HTML

1. HTML：超文本标记语言，用来显示web信息的，浏览器负责解析。
2. 超文本：除了文本外，可以显示超链接、图片、视频等等。
3. 标记语言：使用标签来显示信息，而不是编程语言

• 标签的合适，以及什么是元素

1. 格式
   单标签：<标签名/>
   双标签：<标签名>内容</标签名>

2. 属性
   <标签名 属性名=”属性值” 属性名=”属性值”>内容</标签名>

3. 元素
   一个完整的标签成为元素，标签名 属性 内容

常用的HTML标签

1. 标题标签：h1-h6
   特点：文字加粗，加大，占一行。
2. 段落标签：p
3. 实体字符：

• &nbsp： 空格字符
• %gt ： >大于号
• &lt ： <小于号

4. 换行和水平线标签

• < br >
• < hr >

5. 文本修饰标签

• 斜体标签：i,em
• 粗体标签：n,strong
• 下划线：u
• 删除线：del

6. div和span标签

• div:是盒子模型里的一个元素，频繁的使用在网页中
• span:无默认的样式的文本标签，如果需要样式，可以配合css添加

7. 图片标签

• 图片标签:img
  • 属性
    src:图片的路径资源
    alt:图片加载失败后的提示
    title:鼠标放上去显示的文字
    height：设置高度
    weight：设置宽度

8. 链接标签

• 链接标签: a 单击可以跳转到目标地址，href目标地址
• 属性：target:打开方式
  _blank:打开一个新的网页
  _self：修改当前页面
  锚点：定义位置，使用id属性，id表示唯一的属性，一个网页的id必须唯一。使用a标签的href=“#id”

9. 列表标签

• 无序列表：ul
  • 属性：disc实心圆,circle空圆心,square正方形
• 有序列表：ol
  • 属性：a小写英文，A大写英文，i罗马数字，1阿拉伯数字
• 自定义列表:dl
  标题：dt
  列：dd

10. 表格标签

• 表格标签: table
  • 属性：
  • cellspacing: 单元格之间的距离
  • cellpadding: 单元格内部填充的距离
  • width: 设置宽度
  • height：设置高度
  • border: 边框
• 行：tr
• 列：td
  • 属性：
  • align：内容水平方向
  • valign: 内容垂直方向
  • colspan: 合并列单元格
  • rowspan: 合并行单元格

小技巧:
1.写内容，行和列是完整的
2.确定colspan和rowspan以及数量
3.删除多余的

11. 表单标签

• 表单标签：form

  • 属性：
  • action：提价的目标地址
  • method：提交的方式
    • get：默认值,不安全
    • post:一般敏感数据选post，文件上传选择post
  • enctype: 数据类型
    • application/x-www-formurlencoded：默认值，普通数据类型
    • multipart/form-data：文件上传使用这个，多功能数据表单

• 输入标签：input

  • type属性：
  • text: 文本框
  • password：密码框
  • checkbox：复选框
  • file：文件框
  • hidden：隐藏域
  • submit：提交按钮
  • button: 按钮
  • reset：重置

• name:是给表单控件加名字，目的是让参数发送成功，并可以让服务器获取,必须要设置的

• 下拉框：select

  • select设置name, option设置value

• 文本域：textarea

• placeholder: 输入框显示的文字

• checked：确认选中一个框

• disabled：失效