HTML常用标签

a标签

作用

用户通过点击<a>标签链接后，浏览器会跳转到指定的网址。 跳转外部页面、跳转内部锚点、跳转到邮箱或电话等。

属性

• href：超链接，留空会自动刷新；#会自动滚动顶部，
  • 网址：https、http、//google.com 无协议链接
  • id href=#xxx //跳转到id
  • 路径：/a/b/c & a/b/c ； index.html & ./index.html
  • 伪协议：JavaScript代码；mailto:邮箱；tel:手机号；
• target：规定在何处打开链接文档，默认是self
  • _blank：打开一个空白页
  • _top：在顶层页面打开
  • _parent：在父类页面打开
  • _self：在当前页面打开
• download：下载，但是不靠谱下载，但是不靠谱 程序员命名：
• window：name（在xxx页面打开）
• iframe的name（iframe现在已经很少使用了，是指内嵌窗口）

table标签

table标签是一个块级容器标签，所有表格内容都要放在这个标签里面

子元素标签

 <table>
  <thead> // 表头
      <tr> // table row 行 
            <th></th> // 标题
      </tr>
  </thead>
  <tbody> // 身体
      <tr> 
            <td></td> // 数据
      </tr>
  </tbody>
  <tfoot>……</tfoot> // 表尾
 </table>

相关样式

• table-layout：auto；自动计算每一行的宽高
• table-layout：fixed；通过列表的宽度来决定平均宽度
• border-collapse：collapse； 合并边框(默认边框与边框之间不合并)
• border-spacing：0；边框为0.(边框与边框之间的距离)。

img标签

作用

会发出get请求，展示一张图片

属性

• alt 提示语，在你图片加载失败的时候才执行
• src 图片路径
• height 指定图片高度，单位默认像素为px
• width 指定图片高度，单位默认像素为px 底线：需要注意，不可让图片变形

事件

• onload图片加载成功调用
• onerror图片加载失败调用

响应式

max-width: 100%; // 自适应宽度，宽度最大为100%

可替换属性

mdn查看

form 标签

作用

发送get或post请求，然后刷新页面

属性

• action 是服务器接收数据的 URL，用来控制使用哪个页面。
• method 请求方式，默认为get
• target 表示在哪个窗口展示服务器返回的数据。
• autocomplete自动填充（off或on）

input 标签

作用

让用户输入内容

属性

• type: | 类型 | 说明 | | | --- | --- | --- | | text | 文本 | | radio | 单选 | 设置相同name | | checkBox | 多选 | 设置相同name | | color | 颜色选择器 | | password | 密码 | | file | 上传文件 | multiple（选择多个文件） | | hidden | 隐藏 | 用于id、字符串之类 |

事件

• onchange：当用户改变内容
• onfocus：当用户聚焦内容
• onblur：当用户失去聚焦的内容

其他文本标签

• textarea：多行文本
• select： 下拉框，option子元素，value：值

其他标签

• video：视频
• audio：音频
• canvas：画板
• svg：图片、文件

注意事项

1. 一般不会监听input的click事件
2. form里面的input要有name属性
3. form必须要用一个type=submit，才能提交数据
4. input与button的区别在于，input里面不能再放其他标签、元素，button可放任意标签、元素
5. form标签和a标签的最大区别在于，form能post提交