HTML常用标签

一、 a 标签的用法

1. a 标签的属性

（1） href 属性：写一个网址
helf 的取值

• 网址
  https: //baidu.com
  http: //baidu.com
  //baidu.com
• 路径
  /a/b/c 以及 a/b/c
  index.html 以及 ./index.html
• 伪协议
  javascript: 代码;
  如<a href="javascript:alert(1);">点击</a>
  点击不会刷新的超链接
  *javascript : ; 空的伪协议：
  *#
#xxx 跳转到对应 id 的标签
  mailto : 邮箱地 发邮件
  tel : 手机号 打电话

（2）target 属性：指定页面在哪个窗口打开

• _blank 在空白页面打开
• _top 在最顶层打开
• _parent 在上一级窗口打开
• _self 在当前窗口打开
• xxx 在 xxx 窗口打开，如果没有 xxx 窗口则会建一个 xxx 窗口

---

二、img 标签的用法

1. img 的属性

• src ：source，图片路径，可以是相对路径也可以是绝对路径，作用发送 get 请求，展示一张图片
• alt : 加载失败是，展示文字提示用户
• width，height 设置图片宽高，只设置 width，height 会自动适应，只设置 height，width 会自动适应，两个都设置，图片会变形。
• 图片响应式

<style>
  img {
     box-sizing : border-box;
     max-width : 100%;
}
</style>

2. img 事件

• onload 加载成功时执行
• onerror 加载失败时执行

---

三、table 标签的用法

1. 表格标签

• table 表格
• thead 表头，tbody 表格主体，tfoot 表格页脚
• tr 表格的一行， th 表头， td 单元格
• 直接写 tr、td 会自动放入 tbody

2. 表格属性

• table-layout = auto 表格宽度会根据内容自动适应
• table-layout = fixed 表格宽度会根据内容自动平均
• border-spacing = 10 表格间隙
• border-collapse = collapse 表格合并

---

四、form 表单的用法

• form 表单会发 get 请求或者 post 请求

1. form 表单属性

• action 请求页面的地址
• method 请求方式
• autocomplete 自动填充
• target 把哪个页面变成 yyy 刷新
• value 设置按钮名称

2. form 表单的 type 类型

• text 文本
• color 颜色
• password 密码
• radio 单选框，需要加上同一个 name
• checkbox 多选框，同一组，需要加上同一个 name
• file 选择单个文件
• file mutiple 选择多个文件
• hidden 隐藏的表单，用来给机器输入的

3. form 表单事件

• onchange 事件：表单内容发生改变

• onfocus 事件：表单获得焦点

• onblur 事件： 表单失去焦点

• 表单一般不监听 click 点击事件

• form 里面放 type=submit 才能触发提交事件

4. input type=submit 和 button type=submit 的区别

• input type=submit 不能有其它除了文字之外的内容
• button type=submit 可以有任何内容，包括标签

五、其它输入标签

• select option 标签 选项菜单
• textarea 标签 多行文本

六、其他标签

• video 视频标签
• audio 音频标签
• canvas 绘制图像标签
• svg 绘制矢量图标签

---

资料来源：饥人谷