H5 新增标签

1. 什么是 HTML5

• 定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML

• 概念：

  • 是一个新版本的 HTML 语言，定义了新的标签、特性和属性
  • 拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript，这也是广义上的 HTML5

• HTML5 拓展的内容

  • 语义化标签
  • 本地存储
  • 兼容特性
  • 2D、3D
  • 动画、过渡
  • CSS3 特性
  • 性能与集成

---

2. HTML5 新增标签

• 新增语义化标签

  • 头部标签：header
  • 导航标签：nav
  • 内容标签：article
  • 块级标签：section
  • 侧边栏标签：aside
  • 尾部标签：footer

• 使用语义化标签的注意

  • 语义化标签在移动端支持比较友好
  • 语义化标签主要针对搜索引擎
  • 新标签可以使用一次或者多次
  • 在 IE9 浏览器中，需要把语义化标签都转换为块级元素

---

3. 音频标签 audio

语法：<audio src="URL"> </audio>

属性	值	描述
autoplay	autoplay	音频立即播放
controls	controls	显示浏览器的播放控件
loop	loop	音频循环播放

格式	IE9	Firefox3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg		√	√	√
MP3	√			√	√
Wav		√	√		√

<audio src="media/snow.mp3" controls></audio>
	<!-- 设置两种格式兼容播放 -->
<audio controls>
	<source src="media/snow.mp3" type="audio/mpeg" />
    <source src="media/snow.ogg" type="audio/ogg" />
    您的浏览器不支持播放声音
</audio>

注意：在 chrome 浏览器中默认禁用了 autoplay 自动播放属性

---

4. 视频标签 video

语法：<video src="URL"> </video>

属性	值	描述
controls	controls	显示浏览器的播放控件
autoplay	autoplay	视频自动播放
loop	loop	视频循环播放
muted	muted	视频静音播放
width	像素	设置播放窗口的宽度
height	像素	设置播放窗口的高度
poster	imgurl	加载等待的画面图片
preload	auto / none	是否预加载视频（有了autoplay 则被忽略）

格式	IE9	Firefox3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg		√	√	√
MP3	√			√	√
Wav		√	√	√

<video src="media/video.mp4" controls="controls"></video>
    <!-- 设置两种格式兼容播放 -->
<video controls width="200px" muted poster="media/pig.jpg">
	<source src="media/video.mp4" type="video/mp4"/ >
	<source src="media/video.ogg" type="video/ogg"/>
	您的浏览器太low了，不支持播放此视频
</video>

注意：在 chrome 浏览器中默认禁用了自动播放属性，设置静音播放后可使用自动播放

---

5. 新增 input 标签

type 属性值	说明
email	输入Email类型
url	输入URL类型
date	输入日期类型
time	输入时间类型
month	输入月类型
week	输入周类型
number	输入数字类型
tel	输入手机号码
search	用于搜索框
color	颜色选择表单

---

6. 新增表单属性

属性	值	说明
required	required	内容不能为空，必填
placeholder	文本	提示信息，输入时隐藏
autofocus	autofocus	光标自动聚焦
autocomplete	off / on	默认保留提交历史输入，off 关闭
multiple	multiple	当 type="file" 可多选文件提交

---

7. 获得焦点表单元素 (:focus)

用于选取获得光标焦点的表单元素

语法：input:focus { }

---

8. CSS3 属性选择器

权重：同类选择器为 10

选择器（例）	说明
div[class]	选择 div 中有 class 属性的元素
div[class="icon"]	选择 div 中有 class 属性并且值**等于 ** icon的元素
div[class^="icon"]	选择 div 中有 class 属性并且值开头是 icon 的元素
div[class$="icon"]	选择 div 中有 class 属性并且值结尾是 icon 的元素
div[class*="icon"]	选择 div 中有 class 属性并且值含有 icon 的元素

---

9. 结构伪类选择器

权重：同类选择器为 10

选择符（例）	说明
div :first-child	选择 div 中第一个子元素
div :last-child	选择 div 中最后一个子元素
div :nth-child(n)	选择 div 中第 n 个元素
div p:first-of-type	选择 div 中 指定 p 标签中第一个子元素
div p:last-of-type	选择 div 中 指定 p 标签中最后一个子元素
div p:nth-of-type	选择 div 中 指定 p 标签中第 n 个元素

总结：父元素中的子元素标签相同用前三种，子元素标签有不同用后三种

---

10. nth-child(n) 参数详解

nt-of-type(n) 与 nth-child(n) 中的 n 用法相同，本质上是选第 n 个子元素

• 当 n 是数字时，数字是几就选第几个
• 当 n 是关键字时，odd 为奇数，even 为偶数
• 当 n 是公式时，n 代表从 0 开始递增 +1（0, 1, 2 , 3，...）

公式	取值
2n	偶数
2n + 1	奇数
5n	5 10 15 ...
n + 5	从第 5 个开始到最后
-n + 5	前 5 个

注意：第 0 个元素或者超出了现有元素的个数会被忽略

  /* 奇数 */
  ul li:nth-child(2n + 1) {
    background-color: blue;
  }
  /* 前五个 */
  ul li:nt-of-type(-n + 5) {
    background-color: tan;
  }

---

11. 伪元素选择器

选择符	描述
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

• before 和 after 必须有 content 属性
• before 和 after 创建的是一个行内元素
• 伪元素在控制台中是查看不到的
• 权重：同标签选择器为 1

例：div::before { content:"欢迎" }

---

12. 伪元素添加字体图标

p {
	position: relative;
	width: 200px;
	height: 30px;
	border: 1px solid #000;
}
p::before {
	position: absolute;
	top: 8px;
	right: 10px;
	font-family: 'iconfont';
	content: '\e6f8';	
/* icon在before中用反斜杠转义，仅保留4位编码 */
}

---