HTML5常用新特性

1. HTML5新特性

HTML5的新特性主要针对以前的不足，增加了一些新的标签、新的表单和新的表单属性等。

这些新特性都有兼容性问题，基本都是IE9以上版本才支持，如果不考虑兼容性问题，才可以使用这些新特性。

1.1 HTML5 新增的语义化标签

以前布局，基本都是用div来做。但是div对于搜索引擎来说，是没有语义的。

• <header>:头部标签
• <nav>：导航标签
• <section>：定义文档某个区域的标签
• <article>：内容标签
• <aside>：侧边栏标签
• <footer>：尾部标签

注意：

• 这些语义化标签主要是针对搜索引擎的
• 这些新标签页面中可以使用多次
• 在IE9中， 需要把这些元素转换为块级元素
• 这些标签更多地使用在移动端
• HTML5 还增加了很多其他的标签，这些只是较常用的。

1.2 HTML5新增的多媒体标签：

1. 音频：<audio>：用于在文档中表示音频内容

• <audio> 元素常见属性：

  src：媒体的来源

  controls：增加控制工具栏

  autoplay：自动播放，但是存在兼容性问题

  muted：静音

  loop：循环播放

2. 视频：<video>

• <video>元素常见属性：

  controls： controls 增加控制工具栏（加上controls属性，视频才会播放）

  autoplay： autoplay 自动播放(谷歌浏览器禁用了自动播放功能，加了muted属性就可以自动播放了)

  muted： muted 静音，增加后静音并且自动播放会生效

  loop： loop 循环播放

  preload： auto（预加载） none(不预加载) 规定是否预加载视频(如果有了autoplay 就忽略该属性)

  src： url() 视频url地址

  poster： imgurl() 加载等待的画面图片

  width： px 设置播放器宽度

  height： px 设置播放器高度

  <video src="movies.mp4"
         controls 
         autoplay 
         muted 
         loop>
  </video>
  

• <source>元素：

  如果存在兼容性问题，可以将多个视频格式的数据源放到source元素中

  <video controls>
      <source src="... .mp4">
      <source src="... .avi">
      <source src="... .webm"
  </video>
  

1.3 HTML5 对 表单的扩展：

1. HTML5 新增的表单属性

   • required ：值 required 表示其内容不能为空
   • placeholder：输入框的占位文字
   • multiple：可以多选文件提交
   • autofocus：自动聚焦

2. 对于input的type值也有很多扩展

   • url： URL类型
   • date：日期类型
   • time：时间类型
   • month：月类型
   • week：周类型
   • number：数字类型
   • tel：手机号码
   • search：搜索框
   • color：会显示一个取色板，可以选择颜色
   • email：邮件类型