h5新增标签和表单属性

一、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>