1 a标签

1.1 href属性取值

网址
1. google.com
2. google.com
3. //google.com（推荐）
路径
1. /a/b/c（绝对路径，/表示当前服务的根目录）以及a/b/c（相对路径）
2. ./index.html以及index.html（含义一样）
伪协议
1. javascript:代码;
2. mailto:邮箱
3. tel:手机号
id
1. href=#xxx

注：

a标签如果href属性值为**""，那么鼠标点击后页面会刷新**；

a标签如果href属性值为**"#"，鼠标点击后页面不会刷新但是会滚到顶部**；

a标签如果href属性值为**"#xxx"，鼠标点击后页面不会刷新但是会跳转到id值为xxx的标签位置**；

a标签如果href属性值为**"javascript:;"，鼠标点击后页面会访问一个不存在的js方法，因此不会有任何反应**。

<a href="//google.com">超链接</a>
<a href="./index">相对位置</a>
<a href="javascript:alert(1);">javascript伪协议</a>
<a href="">刷新页面</a>
<a href="#">滚动到页面顶部</a>
<a href="javascript:;">什么都不做</a>
<a href="#xxx">跳到id值为xxx的标签位置</a>
<a href="mailto:937601471@qq.com">呼起邮件app</a>
<a href="tel:17621310509">手机拨号</a>

1.2 target属性取值

内置名字
1. _blank
2. _top

配合iframe使用，在iframe指向的页面里使用_top值访问新的页面会覆盖父页面（顶级页面）内容，如果是_self则是在iframe页面刷新显示新页面。

_parent

配合iframe使用，在iframe指向的页面里使用_parent值访问新的页面会覆盖父页面内容。

_self（默认值）
程序员命名
1. window的name

，如果当前没有一个叫xxx的页面则打开一个，如果有则在名叫xxx页面刷新显示新页面内容（查看页面名称方法如下图所示，在DevTools的控制台页面输入window.name）。
用处：可以写多个a标签链接到同一块页面区域，实现内容的复用。

<a href="//baidu.com" target="xxx">百度</a>
<a href="//sogou.com" target="xxx">搜狗</a>
<hr>
<iframe src="" name="xxx" style="border: none;width: 100%;height: 800px"></iframe>

2 table标签

2.1 元素组成

table标签标准写法：table>(thead>tr>th)+(tbody>tr>td)+(tfoot>tr>td)，包含表头、表主体内容和表注。

<table>
    <thead>
        <tr>
            <th></th>
            <th>小明</th>
            <th>小红</th>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td>语文</td>
        <td>80</td>
        <td>95</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>90</td>
        <td>85</td>
    </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>总分</td>
            <td>170</td>
            <td>180</td>
        </tr>
    </tfoot>
</table>

注：

当我们直接在table里面是使用tr标签时，浏览器会默认给tr标签套一层tbody标签。如果直接在table里写td，那么浏览器会给td标签套上一层tr标签，再套一层tbody标签，这是浏览器的自动纠错功能。
thead、tbody、tfoot的书写顺序不会影响显示顺序。
使用快捷键快速生成一个完整的表格结构输入：table>(thead>tr>th4)+(tbody>tr3>td4)+(tfoot>tr>td4)，然后按tab键，可以快速生成一个包含一个5行4列的表格HTML代码。

2.2 相关样式

2.2.1 table

table-layout属性取值
1. auto（默认）：自动计算表格每列显示宽度
2. fixed：尽可能平均分配表格每列显示宽度
border-collapse属性取值
1. collapse：合并表格单元格间隙
border-spacing属性取值
1. 单元格间隙宽度（默认值2px，一般取0px配合border-collapse: collapse一起使用）

2.2.2 td,th

border属性取值
1. border-width：规定单元格边框宽度
2. border-style：规定单元格边框样式
3. border-color：规定单元格边框颜色

3 img标签

图片标签
<img src="image/dog.png" alt="dog.png">

3.1 作用

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

3.2 属性

alt：图片加载失败时显示给用户的提示文字
height：设置图片高度（只设高不设宽，宽度自适应）
width：设置图片宽度（只设宽不设高，高度自适应）
src：图片地址

注：

不要同时设置图片的宽高，因为这样可能会改变图片原有的宽高比例，从而让图片变形！

3.3 事件

onload：图片加载成功事件
onerror：图片加载失败事件（用于图片加载失败后进行挽救操作，替换src路径为一种通用图片）

3.4 响应式

max-width:100%

4 form标签

表单标签

4.1 作用

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

4.2 属性

action：设置请求URL
autocomplete：让内部输入框提供可填充内容建议
method：设定请求方法类型（POST/GET）
target：设置表单提交后哪个页面应该刷新

4.3 事件

onsubmit

4.4 input标签

4.4.1 type属性取值

text（默认值）
button
checkbox
email
file
hidden
number
password
radio
search
submit
tel
text

<input type="text" name="username"/>
<input type="submit" value="上传">
<button type="submit">上传</button>
<input type="color">
<input type="password">
<input type="radio" name="gender">男
<input type="radio" name="gender">女

<input type="checkbox" name="hobby">唱
<input type="checkbox" name="hobby">跳
<input type="checkbox" name="hobby">rap
<input type="file">
<input type="file" multiple>
看不见的输入框: <input type="hidden">
<!--resize：none不允许调整宽度-->
<textarea name="" style="resize: none;width: 50%; height: 300px"></textarea>

<!--快速生成结构：select>option[value=$]{星期}*3-->
<select name="" id="">
  <option value="">- 请选择 -</option>
  <option value="1">星期一</option>
  <option value="2">星期二</option>
  <option value="3">星期三</option>
</select>

4.4.2 其他属性

name
autofocus
checked
disabled
maxlength
pattern
value
placeholder

4.4.3 事件

onchange：内容改变
onfocus：鼠标悬浮
onblur：鼠标离开

4.4.4 验证器

HTML5新增功能

required

4.4.5 其他输入标签

select+option：下拉框
textarea：大文本输入框
label：文本标签

4.4.6 FAQ

Q1：input submit和button submit有什么区别？
A1：button里面可以再包裹其他标签（比如内嵌img标签、strong标签等），但input不行。

Q2：<input .../>和<input ...>区别？
A2：显示效果一样，但<input .../>会被浏览器纠正为<input ...>。

4.4.7 注意事项

一般不监听button的click事件
form里面的input都应该有name
一个表单如果想要提交就必须在form元素中包含一个submit类型的按钮，类型为submit的input或者button标签都行。如果有一个button但类型没有设置为submit，那么那个button会自动变成submit类型。但如果已经给唯一的button元素设置了其他类型，那么浏览器不会把它识别为submit按钮，此时表单就无法提交。

5 其他标签

video
audio
canvas
svg

6 其他知识点

想看请求的所有日志信息，需要在浏览器的DevTools的Network页面，勾选中Preserve log选项。

webstorm快速生成5个数字内容递增的p标签：输入p{$}5*，然后按Tab**键。
使用webstorm快速生成代码：ul>li*5>a[name="test $"]>span{$ }，然后按tab键，最终生成代码如下：

<ul>
    <li><a href="" name="test1"><span>1</span></a></li>
    <li><a href="" name="test2"><span>2</span></a></li>
    <li><a href="" name="test3"><span>3</span></a></li>
    <li><a href="" name="test4"><span>4</span></a></li>
    <li><a href="" name="test5"><span>5</span></a></li>
</ul>

HTML常用标签