初识HTML5新增（部分新增）

H5-新增语义化标签

新增布局标签

标签名	语义	单 / 双标签
header	整个页面，或部分区域的头部	双
footer	整个页面，或部分区域的底部	双
nav	导航	双
article	文章、帖子、杂志、新闻、博客、评论等	双
section	页面中的某段文字，或文章中的某段文字（里面文字通常会包含标题）	双
aside	侧边栏	双
main	文档的主要内容（几乎不用）	双
hgroup	包裹连续的标题，如文章主标题、副标题的组合（w3c将其删除）	双

关于article和section：

1. artical里面可以有多个section。
2. section强调的是分段或分块，如果你想将一块内容分成几段的时候，可使用section元素
3. article比section更强调独立性，一块内容如果比较独立，比较完善，应该使用article元素。

新增状态标签

meter标签

• 语义：定义已知范围内的标量测量。也被称为gauge（尺度），双标签，例如：电量、磁盘用量等。
• 常用属性如下：

属性	值	描述
high	数值	规定高值
low	数值	规定低值
max	数值	规定最大值
min	数值	规定最小值
optimum	数值	规定最优值
value	数值	规定当前值

注意：当设置了optimum，显示规则将会变化。

• 设置前：低于低值报黄警告，高于高值报黄警告，中间为安全，不警告
• 低于低值时报红警告，低值与高值中间报黄警告，高于高值为安全不警告

progress标签

• 语义：显示某个任务完成的进度的指示器，一般用于进度条，双标签，例如：工作完成进度等。
• 常用属性如下：

属性	值	描述
max	数值	规定目标值
value	数值	规定当前值

新增列表标签

标签名	语义	单 / 双标签
detalist	用于搜索框的关键字提示	双
details	用于展示问题和答案，或对专有名词进行解释	双
summary	写在details的里面，用于指定问题或专有名词	双

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

<details>
        <summary>
            如何一夜暴富？
        </summary>
        <p>来到《我也想早睡》博客学习</p>
    </details>

新增文本标签

1. 文本注音

标签名	语义	单 / 双标签
ruby	包裹需要注音的文字	双
rt	写注音，rt标签写在ruby的里面	双

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

2. 文本标记

标签名	语义	单 / 双标签
mark	标记	双
注意：W3C建议mark用于标记搜索结果中的关键字。

H5-表单相关的新增

表单控件新增属性

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

<form action="#">
        账号：<input type="text" name="account" placeholder="请输入账号" required autofocus autocomplete="on" pattern="\w{6}">
        <br>
        密码：<input type="password" name="pwd" placeholder="请输入账号" required>
        <br>
        性别：
            <input type="radio" value="male" name="gender" required>男
            <input type="radio" value="female" name="gender">女
        <br>
        爱好：
            <input type="checkbox" value="smoke" name="hobby">抽烟
            <input type="checkbox" value="perm" name="hobby" required>烫头
            <input type="checkbox" value="drink" name="hobby">喝酒
        <br>
        其他：<textarea name="other" id="" cols="30" rows="10" placeholder="请输入账号" required ></textarea>
        <br>
        <button>提交</button>
    </form>

input与form新增属性

input新增属性值

属性名	功能
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，则忽略该属性，1. none：不预加载视频。2. metadata：仅预先获取视频的元数据（例如长度）。3. auto：可以下载整个视频文件，即使用户不希望使用它。

音频标签

<video>标签用来定义视频，他是双标签

属性	值	描述
src	URL地址	视频地址
controls	-	向用户显示视频控件（比如播放 / 暂停按钮）
muted	-	视频静音
autoplay	-	视频自动播放
loop	-	循环播放
preload	auto / metadata / none	视频预加载，如果使用autoplay，则忽略该属性，1. none：不预加载视频。2. metadata：仅预先获取视频的元数据（例如长度）。3. auto：可以下载整个视频文件，即使用户不希望使用它。

HTML5兼容性处理

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

<!--设置IE总是使用最新的文档模式进行渲染-->
<metahttp-equiv="X-UA-Compatible"content="IE=Edge">
<!--优先使用webkit(Chromium)内核进行渲染,针对360等壳浏览器-->
<metaname="renderer"content="webkit">

• 外链 js代码 让低版本浏览器认识 h5 的语义化标签

<!--[if ltie9]>
<scriptsrc="../sources/js/html5shiv.js"></script>
<![endif]-->

点击前往下载js文件， 提取码：0622

• 扩展

lt 小于
lte 小于等于
gt 大于
gte 大于等于
! 逻辑非

• 示例：

<!--[if IE 8]>仅IE8可见<![endif]-->
<!--[if gt IE 8]>仅IE8以上可见<![endif]—>
<!--[if lt IE 8]>仅IE8以下可见<![endif]—>
<!--[if gte IE 8]>IE8及以上可见<![endif]—>
<!--[if lte IE 8]>IE8及以下可见<![endif]—>
<!--[if ! IE 8]>非IE8的IE可见<![endif]-->