H5新特性

H5媒体标签

h5新增音频和视频的技术，早期是通过flash技术。目前h5新增了视频和音频技术，让网页实现视频和音频播放更加方便。

• 音频 audio

• 视频 video

音频标签

<!-- 音频标签  src指定音频文件路径  controls音频控件 -->
<!-- loop 循环播放  muted静音播放 autoplay 自动播放-->
<audio src="file/music.mp3" controls loop ></audio>

<audio controls>
    <!-- source引入多个文件格式的音频文件，一首歌曲有不同的文件个数，浏览器对音频文件的格式不统一 -->
    <source src="file/music.mp3" type="audio/mp3"> 
    <source src="file/music.ogg" type="audio/ogg"> 
</audio>
<!-- 老版本音频及视频标签  扩展  （不推荐使用）-->
<embed src="">

• src：链接音频文件

• controls：音频的控件

• loop：循环播放

• muted：静音播放

• autoplay：自动播放

• type：文件格式

视频标签

<!-- 视频标签：默认不会播放，需要添加控制按钮才能点击播放 -->
<!-- 学js的时候，我们会通过js来控制视频播放，暂停，快进，弹幕等等操作 -->
<video src="file/play.mp4" controls loop autoplay></video>
<video controls>
    <source src="file/play.mp4"> 
</video>

• src：链接音频文件

• controls：音频的控件

• loop：循环播放

• muted：静音播放

• autoplay：自动播放

• type：文件格式

• width:宽度，如果只设置宽度，视频会等比例缩放

• height：高度

H5表单标签

回顾之前的表单标签：

form、input（text）、input（password）、input（radio）、input（checkbox）、select、textarea、button、input（button） input(submit) input(reset) input(date) input(file)

邮箱输入框

可以进行邮箱格式的验证，但是不能精准验证，以后通过js来验证

<input type="email">

数字输入框

只能输入数字的输入框

<input type="number">

网址输入框

可以验证网址是否正确，必须是完整的网址，包含http或者https

<input type="url"> 

搜索框

输入内容后，提供清空的操作

<input type="search">

选择范围

<input type="range" max="200" value="20">

max="200" 最大范围 value="20"默认值

选择颜色

<input type="color">

时间控件

 <!-- 时间控件  date选择年月日 month选择年月  week选择某年第几周-->
<input type="date">
<input type="month">
<input type="week">

文件上传

<!-- 文件上传：默认只能选择一个，multiple可以上传多个文件 -->
        <input type="file" multiple>

• multiple:允许上传多个文件

选项列表 datalist

可以在输入框中提示

<!-- 给datalist的id进行命名，通过input输入框的list属性进行和datalist的id绑定 -->
<input type="text" list="mylist">
<datalist id="mylist">
    <option>小猪佩奇</option>
    <option>小米</option>
    <option>大米先生</option>
</datalist>

• 注意：

  • input通过list属性和datalist的id进行绑定

  • datalist里面的option不添加value

语义化标签

在开发过程中，我们经常使用一些约定俗成的一些名字来命名div的class或者id。class=“header” class="nav" class="footer"

opera浏览去统计了运行在本浏览器的网页使用的id名和class名

id：ID attribute list

class：CLASS attribute list

语义化：

合理、正确的标签来展示内容，比如h1~h6定义标题，平时我们常用的一些命名进行提取，作为一种标签。可以通过标签名就能知道标准的功能或者作用。<nav>

语义化的好处

1. 易于用户阅读，让页面结构更加清晰明了

2. 有利于SEO优化，搜索引擎能更好的识别语义化标签

3. 方便其他设备的解析

4. 有利于开发和维护，语义化更具有可读性，代码更好维护。

根据平时使用比较频繁的词汇来设计了语义化标签，语义化标签一般用于布局

标签名	描述
header	代表网页的头部
footer	代表网页的尾部
main	代表网页的主体部分，内容区域，有且仅有一个
nav	代表导航区域
aside	代表网页中的侧边栏
article	代表网页中一块独立的区域，一般用于内容，相当于div
section	代码网页中一个模块，相当于一个小部分内容
thead	代表表格的头部
tbody	代表表格的内容区域
tfoot	代表表格的底部
audio	音频标签
video	视频标签
source	资源标签，定义多媒体资源

• section：表示文档中一个区域，作用类似于div，如果内容分为几个部分，每个部分都可以用一个section。

• aside：侧边栏，广告、推荐信息。

• article：表示网页中的比较独立的一个，而这个模块区域里面可以分为很多内容

网页中标签的选择

• 最外层尽量使用HTML5的语义化标签，比如header、nav 、footer

• 标题尽量使用标题标签h系列，主要目的为了SEO优化

• 对于网页内容板块，如果重复出现的小板块article，功能性或者带标题用section来表示，其他区域就用div

• 具体内容该用什么标签就用标签，比如，图片img，输入框input

h5兼容性问题

兼容：IE浏览器对同一个网页解析出来的结果不一样，导致用户体验不一样。

解决方案：将main标签转成块级，标签在IE浏览器就可以支持

main{
    display:block;
}