HTML5新增标签，表单及属性

（一）语义化标签

• . section元素 表示页面中的一个区块
  . article元素 表示一块与上下文无关的独立的内容
  . aside元素 在article之外的，与article内容相关的辅助信息 
  . header元素 表示页面中一个内容区块或整个页面的标题
  . footer元素 表示页面中一个内容区块或整个页面的脚注
  . nav元素 表示页面中导航链接部分
  . figure元素 表示一段独立的内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)
  . main元素 表示页面中的主要的内容(ie不兼容)
  . hgroup标题的一个分组
  . mark定义高亮显示的文本(span)
  . time 时间
  . dialog标记定义一个对话框(会话框)类似微信

(二)多媒体标签

<video src=""></video> 
    <audio src=""></audio>

• 属性

  . controls属性：如果出现该属性，则向用户显示控件，比如播放按钮。
  . autoplay属性：如果出现该属性，则视频在就绪后马上播放。
  . loop属性：重复播放属性。
  . muted属性：静音属性。
  . poster属性：规定视频正在下载时显示的图像，直到用户点击播放按钮。

• source

  <source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
  <source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
    			Type属性值：
    				用于视频：video/ogg   video/mp4     video/webm
    				用于音频：audio/ogg   audio/mpeg

（三）HTML5新增表单

• 新增type类型

  Type=“email”   限制用户必须输入email类型
     	Type=“url”        限制用户必须输入url类型
     	Type=“range”   产生一个滑动条表单
     	Type=“number”  显示用户必须输入数字
     	Type=“search”   产生一个搜索意义的表单
     	Type=“color”     生成一个颜色选择的表单
     	Type=“time”      限制用户必须输入时间类型
     	Type=“month”        限制用户必须输入月类型
     	Type=“week”        限制用户必须输入周类型
     	Type=“datetime-local”        选取本地时间
     	type=”date”

• 新增表单属性

  required     监测是否为空。
    	min      最小
    	max      最大
    	step     步幅  确定一个法定值。 -3 0 3 6 9
    	list     必须结合datalist标签，绑定datalist  id名称。
    	autocomplete    是否自动提示信息    属性值   on    off，类似于历史记录
    	placeholder    文本框的提示信息
    	autofocus      自动聚焦。一个页面只能由一个。
    	pattern    后面的属性值是一个正则表达式。
    	novalidate     取消验证
    	 multiple     选择（上传）多个

• 新增表单标签

  • outpu：结果输出显示

  <form action="" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  	<input id="a" type="range" min="0" max="100">100+
  	<input id="b" type="text" value="50">=
  	<output name="x" for="a b"></output>
  </form>

  • datalist 必须和list属性结合使用。做提示信息。

  <input type="url"     list="url_list"    name="link" />
  <datalist id="url_list"> 
      <option label="W3School" value="http://www.W3School.com.cn" /> 
      <option label="Google" value="http://www.google.com" /> 
      <option label="Microsoft" value="http://www.microsoft.com" /> 
  </datalist>