# 前端查漏补缺—HTML4

# 新增语义化标签

# 新增布局标签

header：整个页面，或部分区域的头部
footer：整个页面，或部分区域的底部
nav：导航
article：文章、帖子
section：页面中的某段文字，或文章中的某段文字（里面文字通常会包含标题）
aside：侧边栏

关于article和section

article里面可以有多个section

section强调的是分段或分块，如果想将一段内容分为几段的时候，可以使用section，如小说中的一章

article比section更强调独立性，一块内容如果比较独立、比较完整，应该使用article元素

相对于普通的div只是多了语义

# 新增状态标签

meter标签
- 语义：定义已知范围内的标量，也被称为gauge（尺度），例如：电量、温度
- 常用属性：high、low、max、min、optimum、value
注意：
1. max、min指定量程范围, high、low将量程分为三段，默认中间为最佳值，两侧为异常值
2. optimum指定最佳值，可指定两侧，用来正序或逆序排列
3. value是当前值
progress标签
- 语义：显示某个任务完成的进度的指示器，一般用于进度条
- 常用属性：max、value

# 新增列表标签

datalist：用于搜索框的关键字提示
details：用于展示问题和答案，或对专有名词进行解释
- summary：写在details里面，用于指定问题或专有名词

代码示例：

<input type="text" list="mydata">
<button>搜索</button>
<datalist id="mydata">
    <option value="周杰伦">周杰伦</option>
    <option value="周冬雨">周冬雨</option>
    <option value="马冬梅">马冬梅</option>
    <option value="温兆伦">温兆伦</option>
</datalist>

<details>
    <summary>如何成为技术大牛？</summary>
    <p>脚踏实地、仰望星空</p>
</details>

# 新增文本标签

ruby标签：用于包裹需要注音的文字

    <ruby>
        <span>魑魅魍魉</span>
        <rt>chī mèi wǎng liǎng </rt>
    </ruby>

mark标签：用于在一段文字中做标记

 <p>Lorem ipsum <mark>dolor</mark> sit amet, consectetur adipisicing elit</p>

# 新增表单控件标签

# 表单控件新增属性

属性名	功能
`placeholder`	提示文字，适用于文字输入类的控件
`required`	表示该输入项必填，适用于除按钮外的其他表单控件
`autofocus`	自动获取焦点，适用于所有表单控件
`autocomplete`	自动完成，可以设置为`on`或`off`，适用于文字输入类的表单控件。注意：密码输入框、多行输入框不可用。
`pattern`	正则表达式，适用于文本输入表单控件。注意：多行输入不可用，空的输入框不会验证，往往与`required`配合

# input标签的新增type属性

属性名	功能
`email`	邮箱类型输入框，表单提交时会验证，输入为空不验证
`url`	`url`类型输入框，表单提交时会验证，输入为空不验证
`number`	数字类型输入框，表单提交时会验证，输入为空不验证
`search`	搜索类型输入框，表单提交时不会验证
`tel`	电话类型输入框，表单提交时不会验证
`range`	范围选择框，默认值为50，表单提交时不会验证
`color`	颜色选择框，表单提交时不会验证
`date`	日期选择框，表单提交时不会验证
`month`	月份选择框，表单提交时不会验证
`week`	周选择框，表单提交时不会验证
`time`	时间选择框，表单提交时不会验证
`datetime-local`	日期+时间选择框，表单提交时不会验证

# form标签新增属性

属性名	功能
`novalidate`	如果给form设置了该属性，表单提交的时候不再验证

# 新增媒体标签

# 视频标签

video标签用于定义视频

属性	值	描述
`src`	URL地址	视频地址
`width`	像素值	播放器宽度
`height`	像素值	播放器高度
`controls`	-	显示播放器控件
`muted`	-	视频静音
`autoplay`	-	视频自动播放
`loop`	-	循环播放
`poster`	URL地址	视频封面
`preload`	`auto/metadata/none`	视频预加载，如果使用`autoplay`，则忽略改属性。`none`表示不预加载视频，`metadata`表示仅预先获取视频的元数据，`auto`表示下载整个视频文件

注意：浏览器会记录某个网页的媒体参与度，参与度很高时，不设置muted，仍然可以自动播放

# 音频标签

audio标签用于定义音频

属性	值	描述
`src`	URL地址	音频地址
`controls`	-	显示音频控件
`muted`	-	音频静音
`autoplay`	-	音频自动播放
`loop`	-	循环播放
`preload`	`auto/metadata/none`	音频预加载，如果使用`autoplay`，则忽略改属性。`none`表示不预加载音频，`metadata`表示仅预先获取音频的元数据，`auto`表示下载整个音频文件

注意：

音频不能再静音的状态自动播放，需要JS实现

不能设置width、height、poster

音频和视频的区别，其实相当于少了画面，播放控件类似

# 新增全局属性

contenteditable：内容可编辑性
draggable：可拖动，配合JS使用可以获取拖动位置
hidden：隐藏元素，不占位
spellcheck：拼写检查，浏览器需要打开相关设置
contextmenu：网页鼠标右键菜单
data-*：用于存储页面的私有定制数据，添加前缀，便于JS获取数据

# 兼容性问题

添加元信息，让浏览器处于最优渲染模式

<!-- 让IE浏览器处于最优渲染模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- 针对一些国产双核浏览器，让浏览器优先使用webkit内核去渲染网页 -->
<meta name="render" content="webkit">

使用html5shiv让低版本浏览器认识H5的语义化标签

<!-- [if lt ie 9]>
<script src="./html5shiv.js"></script>
<![endif]-->

扩展

lt 小于

lte 小于等于

gt 大于

gte 大于等于

! 逻辑非

← 前端查漏补缺—HTML4 HTTP面试题 →