1 a 标签

1.1 属性

1.1.1 href：指定网址，取值：

href值为空时，点击a标签页面会刷新；

值为 # 时，会跳转到页面顶部；

网址：

google.com;
google.com;
//google.com（无协议网址，一般用这个，会自动跳转为http 或 https）;

路径：

/a/b/c 以及 a/b/c（使用http服务时，根目录不是指硬盘的根目录，而是开启服务的那个文件夹）；

index.html 以及 ./index.html（因为开启服务的文件夹为根目录，所以此时的相对路径也可以看成是绝对路径）；

伪协议：

javascript:代码; 一般代码为空，只保留冒号和分号，作用是点击标签时页面不刷新、不跳转；

mailto:邮箱

tel:手机号

id: href="#id",点击后会跳转到指定标签；

1.1.2 target：指定在哪个窗口打开超链接，内置值：

target="_blank" 在空白页打开；

"_top":在当前页面最顶层的窗口打开；

_parent：在当前链接所在的页面的上一层页面打开；

_self: 在当前页面打开，默认值为self；

当几个a标签的target值都为xxx时，即可用同一个窗口打开不同的页面；

a标签的name: target的值为iframe的name时，点击链接即可在iframe中打开页面；

1.1.3 download

下载网页，不是所有浏览器都支持，尤其是手机浏览器可能不支持；

1.1.4 rel=noopener

1.2 作用

 跳转外部页面

 跳转内部锚点

 跳转到邮箱或电话

2 table

2.1 标签

<table>
  <thead>
    <tr>
      table row(列)
      <th>
        table head
      </th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>
        table data
      </td>
    </tr>
  </tbody>
  <tfoot></tfoot>
</table>

2.2 样式

table-layout

border-collapse

border-spacing

3 img

3.1 作用

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

3.2 属性：

alt(alternative)：图片加载失败时显示提示信息；

height：图片高度，单位：px;

width：图片宽度，宽、高只写一个时，另一个会自适应；

src：图片地址；

事件：监听图片是否加载成功；

onload：加载成功；

onerror：加载失败；

响应式： max-width: 100%；

可替换元素

src可以是相对路径、绝对路径、网络地址

4 form

4.1 作用

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

4.2 属性

action：请求到那个页面的地址；

method：get、post，控制请求方式；

autocomplete：自动填充；

target：提交到哪个页面，哪个页面应该刷新，与 a 标签的target 用法一样；

4.3 事件

onsubmit：用户点提交的时候，会触发此事件；

input 和 button 的区别：

input 标签中只能放纯文本；button标签中可以放其他标签或图片；

form 表单中必须有一个含有 type="submit"的 input 标签或 button 标签，否则表单不能提交。如果input 或 button 没有设置 type 的值，会默认 type="submit" ；

5 input

5.1 作用

让用户输入内容，单行文本；

5.2 属性

5.2.1 type的值

button

checkbox：多选框，在几个type="checkout"的 input 标签中，设置相同的name 值，则这几个多选框即为同一组多选框；

radio：单选框，在两个type="radio"的 input 标签中，设置相同的name 值，则这两个radio 只能二选一；

password

submit

file：在type="file"后，加multiple，则可以选中多个文件；

hidden

number

tel

text

5.2.2 name的值

autofocus

checked

disabled

maxlength

pattern

value

placeholder

5.2.3 事件

onchange：输入内容改变时触发；

onfocus：用户鼠标聚焦在该标签时触发；

onblur：鼠标从输入框中移出时触发；

验证器（H5新增功能）：required，该项必须填；

6 textarea

6.1 作用

输入多行文本；

6.2 属性

style的值

resize：控制文本区域能否拖动，resize="none" 时，文本输入框大小不能改变；

width

height

7 select + option

作用：选择框

<select>
  <option value="">请选择</option>
  <option value="1">星期一</option>
  <option value="2">星期二</option>
</select>

HTML常用标签