H5在普通的HTML标签的基础上增加了许多新特性

语义化标签

1. 这种语法重要针对搜索引擎
2. 这些新标签可以使用多次
3. 在IE9中，需要将这些标签转换成块级元素

header标签（头部）

<header></header>

nav标签（导航）

<nav></nav>

article标签（内容）

<artice></artice>

section标签（文档）

<section></section>

aside标签（侧边栏）

<aside></aside>

footer标签（尾部）

<footer></footer>

---

多媒体标签

可以方便的添加视频和音频，不在需要依赖 flash 或者 其它浏览器插件

video标签（视频）

video标签目前只支持三种视频格式：mp4、WebM、Ogg

尽量使用 mp4格式的视频

浏览器	MP4	WebM	Ogg
IE	Yes	No	No
Chrome	Yes	Yes	Yes
Firefox	Yes（21版之后才开始支持，Linux版的则是30版才开始支持）	Yes	Yes
Safari	Yes	No	No
Opera	Yes（25版之后才开始支持）	Yes	Yes

---

<video src="movie.mp4" controls="controls" autoplay="autoplay" muted="muted"
        loop="loop"></video>

常用属性

属性	值属性	描述
autoplay	autoplay	自动播放（谷歌浏览器需要添加 muted 来解决自动播放的问题）
controls	controls	显示播放控件（视频控件一般是使用js完成的，所以该选项一般不写）
width	像素值、百分比	设置视频宽度
height	像素值、百分比	设置视频高度
loop	loop	视频循环播放
preload	auto（预加载视频）/none（不预加载视频）	规定是否预加载视频
src	视频地址	视频地址
poster	图片	等待视频加载时所显示的图片
muted	muted	静音播放视频

因为低版本的浏览器不支持h5标签，所以通过下面这个写法来解决低版本浏览器的兼容性问题

<!-- 这样写为了解决低版本浏览器的兼容问题 -->
<video>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    你的浏览器不支持video标签
</video>

音频

当前音频标签只支持三种格式的音频

浏览器	MP3	Wav	Ogg
IE	Yes	No	No
Chrome	Yes	Yes	Yes
Firefox	Yes	Yes	Yes
Safari	Yes	Yes	No
Opera	Yes	Yes	Yes

---

<audio src="music.mp3"></audio>

常用属性

属性	值	描述
autoplay	autoplay	自动播放（谷歌浏览器需要通过js才能实现自动播放，默认是静用的）
controls	controls	显示播放控件（视频控件一般是使用js完成的，所以该选项一般不写）
loop	loop	视频循环播放
src	视频地址	视频地址

因为低版本的浏览器不支持h5标签，所以通过下面这个写法来解决低版本浏览器的兼容性问题

<!-- 这样写为了解决低版本浏览器的兼容问题 -->
<audio>
    <source src="music.mp3" type="music/mp4">
    <source src="music.ogg" type="music/ogg">
    你的浏览器不支持audio标签
</audio>

---

input标签

相较于普通标签，新增了许多语义化的input类型

input类型

属性值	说明
email	输入的内容必须是电子邮件
url	输入的内容必须是**url链接**
date	输入的内容必须是日期
time	输入的内容必须是时间
month	输入的内容必须是月份
week	输入的内容必须是周
number	输入的内容必须是数字
tel	输入的内容必须是电话号码
search	搜索框
color	生成一个颜色选择表单

<input type="color">

属性

属性	值	说明
required	required	表示内容不能为空
placeholder	提示文本	提示文本，当输入内容时会自动消失
autofocus	autofocus	当页面刷新时，光标自动聚焦到输入框中
autocomplete	off/on	记录之前输入的内容，在下次再次输入是会显示上次输入的内容，该属性默认打开，显示上次输入的前提是：要有name属性，并且还要提交成功
multiple	multiple	上传文件（使用file）时可以上传多个文件

<form>
    <input type="text"  name="a" required="required">
    <input type="submit">
</form>

.a1::placeholder {
    color: #009000;
}

 <form>
     <input type="text" class="a1" placeholder="我是提示" name="a">
     <input type="submit">
</form>