HTML（五）

HTML5新结构标签

h5新增的主要语义化标签以下：

一、header 页面头部、页眉
二、nav 页面导航
三、article 一篇文章
四、section 文章中的章节
五、aside 侧边栏
六、footer 页面底部、页脚

页面使用标签布局示意图：

PC端兼容h5的新标签的方法，在页面中引入如下js文件:

<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>

HTML5 新增表单控件

新增类型：网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索

<label>网址:</label><input type="url" name="" required><br><br> 
<label>邮箱:</label><input type="email" name="" required><br><br> 
<label>日期:</label><input type="date" name=""><br><br> 
<label>时间:</label><input type="time" name=""><br><br> 
<label>星期:</label><input type="week" name=""><br><br> 
<label>数量:</label><input type="number" name=""> <br><br>
<label>范围:</label><input type="range" name=""><br><br> 
<label>电话:</label><input type="tel" name=""><br><br> 
<label>颜色:</label><input type="color" name=""><br><br> 
<label>搜索:</label><input type="search" name=""><br><br>

新增经常使用表单控件属性：
一、placeholder 设置文本框默认提示文字
二、autofocus 自动得到焦点
三、autocomplete 联想关键词

HTML5 音频和视频

html5增长了audio和video标签，提供了在页面上插入音频和视频的标准方法。

audio标签 
支持格式：ogg、wav、mp3

对应属性：
一、autoplay 自动播放
二、controls 显示播放器
三、loop 循环播放
四、preload 预加载
五、muted 静音

举例：

<audio src="source/audio.mp3" autoplay controls loop preload></audio>

<!-- 或者用以下方式：  -->

<audio  autoplay controls loop preload>
    <source src="source/audio.mp3" type="">
    <source src="source/audio02.wav" type="">
</audio>

source标签的做用是提供多个媒体文件地址，若是一个地址的文件不兼容，就使用下一个地址。

video标签 
支持格式：ogg、mp四、webM

属性：
一、width
二、height
三、Poster

可选第三方播放器：一、cyberplayer二、tencentPlayer三、youkuplayer