HTML5新标签-结构标签、表单元素、媒体标签

新的结构标签

HTML5新添加的结构标签本质上都是div元素，由于许多开发者都以这些单词命名且相同，所以官方统一命名，便于他人理解，同时也可方便信息抓取。

---

新的表单元素

表单元素	作用
date	年月日
time	时分秒
email	邮箱，且正确
url	网址，且正确
number	数字
range	数字范围

用法：

    <form action="http://www.baidu.com">
        <input type="text" placeholder="请输入内容">
        <br>
        <input type="date">
        <br>
        <input type="time">
        <br>
        <input type="email" name="user-email">
        <br>
        <input type="url">
        <br>
        <input type="number" value="0" min="-10" max="10">
        <br>
        <input type="range" min="-10" max="10">
        <br>
        <input type="submit">
    </form>

显示结果如图：

注意：

• 第4行代表email元素，如果输入格式不对的邮件地址，点击提交按钮时会提示错误，如：

• 第5行代表URL元素，如果输入格式不对的URL地址（包含解析协议，如http://），点击提交按钮时会提示错误
• 第6行代表number元素，可以设置最大最小值，鼠标移动到上面可以点击上下键按钮（图中未显示），不得超过指定范围
• range元素需要设置最大最小值和初始值，不会显示数字，后期可以配合JavaScript加span标签显示获取到的值

---

新的媒体标签

媒体标签主要有三个：

1、 audio 音频标签（src controls autoplay loop muted）

用法：

<audio src="C:\Users\huang\Music\周杰伦 - 晴天.mp3" controls></audio>

如图：

元素介绍：

• src ：表示媒体资源，需要注意不同的浏览器所能识别的媒体资源不同，需要不同的后缀名的文件，如音频文件格式有.mp3，.ogg，.wav，.wma，按需选择
• controls ：显示控件，也就是暂停、进度条、音量等内容
• autoplay：媒体自动播放 （注意：Chrome新版本因为一些原因屏蔽了autoplay功能，需要用js主动打开）
• loop：媒体循环播放
• muted：媒体初始化为静音模式，用户需要手动开启音量

2、video 视频标签（src controls autoplay loop muted）

用法：

<video src="vide01.mp4" controls autoplay></video>

元素介绍：同音频标签

3、source 资源 （src type）

用法：

<audio controls autoplay loop muted>
	<source src="audio1.mp3" type="audio/mp3">
    <source src="audio1.wav" type="audio/wav">
    <source src="audio1.ogg" type="audio/ogg">
</audio>

<video src="vide01.mp4" controls autoplay>
	<source src="video.mp4" type="audio/mp4">
    <source src="video.webm" type="audio/webm">
</video>

source标签用于给同一个音频/视频标签添加不同后缀名的资源，可以有多个，浏览器按顺序搜索可以识别的资源，这样就可以避免因浏览器不同而导致的兼容性问题

元素介绍：

• src ：表示媒体资源
• type：该条source标签对应的资源类型、格式