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="">
1
2
3
4
5
6
7
8
9
10
11

• src：链接音频文件

• controls：音频的控件

• loop：循环播放

• muted：静音播放

• autoplay：自动播放

• type：文件格式

视频标签

<video src="file/play.mp4" controls loop autoplay>video>
<video controls>
    <source src="file/play.mp4"> 
video>
1
2
3
4
5
6

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

数字输入框

只能输入数字的输入框

<input type="number">
1

网址输入框

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

<input type="url"> 
1

搜索框

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

<input type="search">
1

选择范围

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

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

选择范围

<input type="color">
1

时间控件

 
<input type="date">
<input type="month">
<input type="week">
1
2
3
4

文件上传

        <input type="file" multiple>
1
2

• multiple:允许上传多个文件

选项列表 datalist

可以在输入框中提示

<input type="text" list="mylist">
<datalist id="mylist">
    <option>小猪佩奇option>
    <option>小米option>
    <option>大米先生option>
datalist>
1
2
3
4
5
6
7

• 注意：
  • 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定义标题，平时我们常用的一些命名进行提取，作为一种标签。可以通过标签名就能知道标准的功能或者作用。