H5简介

• HTML5，万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）
  的第五次重大修改；设计目的是为了在移动设备上支持多媒体
• 增加了新特性：语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效特性，性能与集成特性，CSS3特性
• 废弃一些元素和属性比如 font 、center 等…
• 优势、劣势
  • 优势
    • 提高可用性和改进用户的友好体验
    • 更好的语义化标签
    • 可以给站点带来更多的多媒体元素(视频和音频)
    • 可以很好的替代FLASH和Silverlight
    • 当涉及到网站的抓取和索引的时候，对于SEO很友好；
    • 将被大量应用于移动应用程序和游戏
    • 可移植性好
  • 劣势
    • 该标准并未能很好的被PC端浏览器所支持
    • IE9以下的浏览器几乎都不兼容

标签语义化

• <header>：头部标签、<nav>：导航标签、<main>: 主体标签、<article>：独立的内容标签、<section>：区段标签、<aside>：侧边栏标签、<footer>：尾部标签
• 注意
  • 这种语义化标准主要针对搜索引擎的
  • 这些新标签页面中可以使用多次的
  • 在IE9中，需要把这些元素转换为块级元素
  • 其实，我们移动端更喜欢使用这些标签
  • HTML5 还增加了很多其他标签，我们后面再慢慢学
  • HTML5

多媒体标签

• <audio> 音频标签

   <audio src="文件地址" controls="controls"></audio>
  
  <!--兼容写法-->
  <audio controls="controls">
      <source src="1.mp3" type="audio/mpeg"> 
      <source src="1.ogg" type="audio/ogg"> 
      <source src="1.wav" type="audio/wav"> 
      您的浏览器暂不支持audio标签
  </audio>
  

  属性	值	描述
  autoplay	autoplay	音频就绪后马上播放（谷歌浏览器禁止）
  controls	controls	显示控件，比如播放按钮
  loop	loop	音频结束重新开始播放
  preload	preload	在页面加载是进行加载并预备播放，如果使用autoplay则忽略该属性
  src	url	文件地址

• <video> 视频标签

  <video src="文件地址" controls="controls"></video>
  
  <!--兼容写法-->
  <video controls="controls">
      <source src="1.ogg" type="audio/ogg"> 
      <source src="1.mp4" type="audio/mp4"> 
      <source src="1.webm" type="audio/webm"> 
      您的浏览器暂不支持video 播放视频标签
  </video>
  

  属性	值	描述
  autoplay	autoplay	视频就绪后马上播放（谷歌浏览器可以通过muted解决）
  controls	controls	显示控件，比如播放按钮
  loop	loop	循环播放
  preload	auto预加载 none 不加载	在页面加载是否预加载，如果使用autoplay则忽略该属性
  src	url	文件地址
  poster	imhurl	加载等待的画面图片
  muted	muted	静音播放

• 总结
  • 音频标签和视频标签使用基本一致
  • 浏览器支持情况不同
  • 我们可以给视频标签添加 muted 属性进行自动静音播放视频，音频不可以
  • 视频标签是重点，我们经常设置自动播放，循环和设置大小属性，不使用 controls 控件（兼容问题）。

表单标签

• 输入标签
  • h5 新增<input>表单类型

    type属性值	描述
    email	限制用户输入必须为Email类型
    url	限制用户输入必须为URL类型
    date	限制用户输入必须为日期类型
    time	限制用户输入必须为Email类型
    month	限制用户输入必须为月类型
    week	限制用户输入必须为周类型
    number	限制用户输入必须为数字类型
    range	滑动条
    tel	手机号码
    search	搜索框
    color	生成一个颜色选择表单

     <form action="">
        姓名:<input type="text"><br>
        邮箱:<input type="emai"><br>
        网站:<input type="url"><br>
        生日:<input type="date"><br>
        时间:<input type="time"><br>
        月份:<input type="month"><br>
        周:<input type="week"><br>
        年龄:<input type="number" max="100" min="0" step="2" value="20"><br>
        年龄范围:<input type="range" max="100" min="0" step="2" value="20"><br>
        手机:<input type="tel"><br>
        搜索框:<input type="search">
        <input type="submit" value="提交">
      </form>
    

  • <datalist> 标签
    • <datalist> 标签规定了 <input> 元素可能的选项列表。
    • <datalist>元素包含了一组<option>元素，这些元素表示预定义可选值，在<input>元素输入过程中，会自动响应<option>元素的值。
    • 绑定的<input>标签必须设置 list 属性，属性值等于<datalist>标签的 id 属性值。

      <input type="text" list="city">
      <datalist id=city>
          <option value="广州">gz</option>
          <option value="上海">sh</option>
          <option value="北京">bj</option>
      </datalist>
    

• 表单属性

  • 属性	值	描述
    required	required	表单拥有该属性表示其内容不能为空，必填
    placeholder	提示文本	表单的提示信息，存在默认值将不显示
    autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单，一般页面中放1个
    autocomplete	off / on 关闭/打开	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开；1.需要放在表单内同时加上name属性;2.同时成功提交
    multiple	multiple	可以多选文件提交