13-H5新特性

H5新特性

H5媒体标签

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

• 音频 audio
• 视频 video

音频标签

<audio src="file/music.mp3" controls loop >audio>

<audio controls>
    
    <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：文件格式

视频标签

<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">

时间控件

 
<input type="date">
<input type="month">
<input type="week">

文件上传

        <input type="file" multiple>

• multiple:允许上传多个文件

选项列表 datalist

可以在输入框中提示

<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：https://dev.opera.com/blog/presentation-html5-and-accessibility-sitting-in-a-tree-4/idlist-url.htm

class：https://dev.opera.com/blog/presentation-html5-and-accessibility-sitting-in-a-tree-4/classlist-url.htm

语义化：

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

语义化的好处

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;
}