一、h5新增结构性标签(有意义的div)
1.header 定义网页的头部
2.nav 定义网页的导航部分
3.section 定义网页的某个区域
4.footer 定义网页的底部
5.article 定义网页的一篇文章
6.aside 定义网页的侧边栏
7.hgroup 将网页的标题进行组合
8.figure 将网页的元素进行组合
9.figcaption 给figure组合添加一个标题
10.dialog 类似于会话框
eg:
<dialog open></dialog>
注:会话框默认是关闭状态,需要添加open属性
二、h5新增其他标签
1.定义带有记号的文本
语法:<mark>带有记号的文本</mark>
2.定义已知范围内的标量或测量
语法:<meter value="10" min="0" max="100"></meter>
3.标识任务的进度或进程
语法:<progress value="10" min="0" max="100"></progress>
扩展:
a) canvas 画布或绘制图像
b) embed 定义外部的可交互的内容或插件,比如flash
c) main 定义主体内容部分
三、h5音频和视频
1.音频
语法:
<audio controls autoplay loop>
<source src="1.mp3" type="audio/mp3"/>
<source src="2.ogg" type="audio/ogg"/>
<source src="3.wav" type="audio/wav"/>
您的浏览器版本太低,请升级浏览器!
</audio>
注:
a) controls 添加音频控制条
b) autoplay 设置音频自动播放(高版本屏蔽了autoplay自动播放功能)
c) loop 循环播放
注:audio支持的音频格式:mp3,wav,ogg
2.视频
语法:
<video controls autoplay loop width="数值" height="数值" poster="图片路径">
<source src="1.mp4" type="video/mp4"/>
<source src="2.ogg" type="video/ogg"/>
<source src="3.webm" type="video/webm"/>
您的浏览器版本太低,请升级浏览器!
</video>
注:
a) width和height 定义视频区域的宽度和高度
b) poster 在视频播放前加载一张图片
c) controls,autoplay,loop同audio中的这些属性
注:video支持的视频格式:mp4(MPEG4),ogg,webm
四、h5新增表单type属性值
1.type=“email”
限制用户输入为邮箱类型(即输入内容必须含有@符号,并且@前后内容不能为空)
2.type=“url”
限制用户输入为网址,即输入内容必须含有"http:",并且后面内容不能为空
3.type=“number”
限制用户输入为数字类型
eg: <input type="number" value="1" min="1" max="30" step="2"/>
注:value设置默认值,min设置最小值,max设置最大值,step设置每次递增递减的数值,默认为1
4.type=“range”
产生一个滑动条的表单
eg: <input type="range" value="10" min="0" max="100"/>
5.type=“color”
产生一个选择颜色的面板
6.type=“date”
产生一个选择日期的面板
7.type=“time”
产生一个选择时间的面板
8.type=“month”
产生一个选择年月的面板
9.type=“week”
选择某一日期是这一年的第几周
10.type=“search”
产生一个搜索意义的表单
五、h5新增表单新属性
1.required 限制用户输入为必填项,不能为空
eg: <input type="text" required/>
2.placeholder=“默认提示信息” 给input输入框添加默认提示信息
eg: <input type="text" placeholder="请输入用户名"/>
3.autofocus 页面加载完成后光标自动聚焦到某个输入框
eg:<input type="text" autofocus/>
4.pattern=“正则表达式” 输入的内容要匹配指定的正则表达式
eg: <input type="text" pattern="^[a-zA-Z0-9]{6,16}$"/>
5.min 设置最小值 max设置最大值 step 设置递增递减的数量
6.list 指定一个datalist作为下拉提示单
eg:
<input type="search" list="data"/>
<datalist id="data">
<option>a</option>
...
</datalist>
扩展:autocomplete=“on|off” 自动完成,显示历史记录
eg:
<input type="text" autocomplete="off" name="username"/>
<form autocomplete="on|off"></form>
7.取消h5的表单验证
语法:<form novalidate></form>