页面结构状态-列表-表单-音视频-全局兼容
1 HTML5 新增语义化标签
1.1 新增页面结构标签
标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
---|---|---|---|
header | 表示页面或section中的页眉 | 双 | |
footer | 表示页面或section中的页脚 | 双 | |
article | 表示文章、博客、新闻、帖子、评论等 | 双 | |
aside | 表示侧边栏 | 双 | |
nav | 表示导航 | 双 | |
section | 表示页面中的一节或文章中的一段 | 双 |
总结: HTML5新增的这些结构标签就是具有语义的 div。
1.2 新增状态标签
标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
---|---|---|---|
meter | 表示静态的度量,如用量、磁盘容量、温度等 | max、min、value、high、low 等 | 双 |
progress | 表示进度,如完成多少、进行多少等 | max、value | 双 |
meter 和 progress 什么区别?
meter 表示静态的度量,如用量、磁盘容量、温度等; progress 表示进度,如完成多少、进行多少等
1.3 新增列表标签
标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
---|---|---|---|
datalist | 定义输入框的输入提示列表 | 双 | |
details | 定义对某个问题的详细说明 | 双 | |
summary | 嵌套在 details 里面,表示要解释的问题 | 双 |
① datalist 的用法
<input type="text" list="inputData">
<datalist id="inputData">
<option value="abc"></option>
<option value="ab"></option>
<option value="aaab"></option>
<option value="abcd"></option>
<option value="bcd"></option>
<option value="ddd"></option>
</datalist>
② details 的用法
<details>
<summary>如何一夜暴富?</summary>
<p>我们大家要学习他毫无自私自利之心的精神。从这点出发,就可以变为大有利于人民的人。一个人能力有大小,但只要有这点精神,就是一个高尚的人,一个纯粹的人,一个有道德的人,一个脱离了低级趣味的人,一个有益于人民的人。</p>
<p>我们大家要学习他毫无自私自利之心的精神。从这点出发,就可以变为大有利于人民的人。一个人能力有大小,但只要有这点精神,就是一个高尚的人,一个纯粹的人,一个有道德的人,一个脱离了低级趣味的人,一个有益于人民的人。</p>
</details>
1.4 新增注释标签(注音标签)
标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
---|---|---|---|
ruby | 注音标签 | 双 | |
rt | 嵌套在ruby的里面,定义注音 | 双 |
<p>
今天学了一个成语
<ruby>魑<rt>chi</rt></ruby>
<ruby>魅<rt>mei</rt></ruby>
<ruby>魍<rt>wang</rt></ruby>
<ruby>魉<rt>liang</rt></ruby>
</p>
1.5 新增文本标签
标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
---|---|---|---|
mark | 定义标记 | 双 |
注意: mark 推荐用于在搜索结果中标记关键字。
2 HTML5 表单新增功能
2.1 表单控件新增属性
placeholder: 给可以输入的表单控件指定文字提示。 用于文本框、密码框、文本域等。
required: 设置该表单控件必填,否则表单无法提交; 该属性使用的时候无需给值; 适用于所有的表单控件。
autofocus: 设置该表单控件自动获取焦点; 该属性使用的时候无需给值;适用于所有的表单控件。
autocomplete: 设置浏览器是否记录输入框的历史输入; 属性的值可以设置为 on(默认值) 或者 off(不记录)。
pattern: 设置该表单控件的验证规则,值要指定正则表达式,适用于可以输入的表单控件。
2.2 input 标签的 type 属性新增的值
之前学过的 type 属性的值: text、password、radio、checkbox、submit、reset、button 。
HTML 5 新增的 type 属性的值: email、url、number、search、tel、range、color、date、month、week、time、datetime-local
① 文本输入类
<!-- 邮箱输入框 -->
<input type="email" placeholder="请输入邮箱">
<br>
<br>
<!-- URL 输入框 -->
<input type="url" placeholder="请输入网址">
<br>
<br>
<!-- 数字输入框 -->
<input type="number">
<br>
<input type="number" min="10" max="40">
<br>
<input type="number" min="0" max="100" step=".1">
<br>
<br>
<!-- 搜索框 重要的是语义,表现形式与 text 相同-->
<input type="search" placeholder="请输入关键字">
<br>
<br>
<!-- 电话号码输入框 不会进行验证,在移动端会自动弹出数字键盘-->
<input type="tel" placeholder="请输入电话号码">
② 范围选择框
<!--范围选择框 使用 max、min 属性指定最大最小值, value 指定默认值-->
<input type="range" value="0">
<input type="range" max="100" min="0" value="20">
③ 颜色选择框
<input type="color">
④ 时间日期选择类
<!-- 日期选择器(年月日) -->
<input type="date">
<br>
<!-- 月选择框(年月) -->
<input type="month">
<br>
<!-- 星期选择框(选择哪一年的第几周) -->
<input type="week">
<br>
<!-- 时间选择器(几点几分) -->
<input type="time">
<br>
<!-- 日期时间选择器(年月日 时分) -->
<input type="datetime-local">
2.3 form 标签新增属性
novalidate: 用于设置表单不需要验证;该属性无需给值。
3 HTML5 音视频
3.1 音视频标签
标签名 | 功能和语义 | 属性 | 单标签还是双标签 |
---|---|---|---|
video | 视频 | src: 指定视频文件地址。 controls: 显示控制条,无需给值 muted: 设置静音,无需给值 autoplay: 设置自动播放,无需给值。 loop: 设置循环播放,无需给值。 preload: 设置视频预先加载,无需给值。 poster: 设置视频封面,指定一个图片的地址。 width: 设置视频宽。 height: 设置视频高。 | 双标签 |
audio | 音频 | src: 指定音频频文件地址。 controls: 显示控制条,无需给值 muted: 设置静音,无需给值 autoplay: 设置自动播放,无需给值。 loop: 设置循环播放,无需给值。 preload: 设置视频预先加载,无需给值。 | 双标签 |
source | 加载音频或视频 嵌套在audio或者video的里面 | src: 指定音频或视频文件的地址 type: 指定视频或视频的类型 | 单标签 |
注意:
- 视频或音频能够自动播放的前提是,设置静音;这是浏览器做出的规定。
- 默认情况下,点击播放按钮的时候,才会下载视频或音频文件,如果设置了 preload 属性,页面一打开就开始下载视频或音频文件。
3.2 浏览器支持的音视频格式
① 视频格式
mp4 所有浏览器都支持,推荐
webm
ogg
② 音频格式
mp3 所有的浏览器都支持,推荐
wav
ogg
4 HTML5 新增全局属性
contenteditable 属性: 设置元素中文本内容可以编辑;值:yes 或者 no。
hidden 属性: 隐藏元素,无需给值。
5 HTML5 兼容性方案
5.1 设置元信息
<!--设置IE总是使用最新的文档模式进行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--优先使用 webkit ( Chromium ) 内核进行渲染, 针对360等壳浏览器-->
<meta name="renderer" content="webkit">
5.2 html5shiv.js 让IE8以及以下的浏览器支持H5新标签
<!-- 导入js文件,让IE8以下以下的浏览器支持H5新标签 -->
<!--[if lt ie 9]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->