第三篇 html5 - 新特性【语义化标签 + 增强型表单 + 音频视频】

语义化标签

语义化标签概述

1、清晰易读

2、有利于SEO，方便搜索引擎识别页面结构

3、方便设备解析、比如盲人阅读

figure

  figcaption 用来定义 figure 的标题, 放在 figure 的子元素 第一个 或者 最后一个
  
  <figure>
    <figcaption></figcaption>
    <img src=””/>
  </figure>

语义化标签使用示例

<div class="header">Header</div>
  <div class="nav">Nav</div>
  <div class="body">
    <div class="article">
      Article
      <div class="section">
        Section
      </div>
    </div>
    <div class="aside">
      Aside
    </div>
  </div>
<div class="footer">Footer</div>

<header>Header</header>
  <nav>Nav</nav>
  <div class="body">
    <article>
      Article
      <section>Section</section>
    </article>
    <aside>Aside</aside>
  </div>
<footer>Footer</footer>

增强型表单

新增多个 input 表单输入类型 type

<form action="" method="get">

    <p>邮箱标签: <input type="email"></p>
    
    <p>数字标签: <input type="number"></p>
    
    <p>滑动条标签: <input type="range"></p>
    
    <p>搜索框标签: <input type="search"></p>
    
    <p>日期框: <input type="date"></p>
    
    <p>星期框: <input type="week"></p>
    
    <p>月份框: <input type="month"></p>
    
    <p>颜色框: <input type="color"></p>
    
    <p>网址框: <input type="url"></p>
    
    <div>
      <input type="submit">
      <input type="reset">
    </div>
</form>

新增多个 input 表单属性

<form action="" method="get">

    <p> placehoder 提示文本: <input type="text" placehoder="请输入"></p>
    
    <p> autofocus 自定获取焦点: <input type="text" autofocus></p>
    
    <p> autofocus 关闭焦点: <input type="text" autocomplete="off"></p>
    
    <p> required 必须输入: <input type="text" required></p>
    
    <p> 添加正则表达式验证: <input type="tel" pattern="^(\+86)?1/d{10}$"></p>
    
    <p> 可以上传多个文件: <input type="file" multiple></p>
    
    <p> 输入多个邮箱地址: <input type="email" multiple></p>
    
    <p> 设置元素最小值: <input type="number" min></p>
    
    <p> 设置元素最大值: <input type="number" max></p>
    
    <p> 输入规定合法的数字间隔: <input type="number" step></p>
    
    <div>
      <input type="submit">
      <input type="reset">
    </div>
</form>

form 标签属性 

autocomplete

novalidate

指定表单的 id，那么在将来指定 id 号的表单进行数据提交的时候，也会将当前表单元素的数据提交

<form action="http://www.baidu.com" id="from1">
	<input type="text">
</form>
<input type="text" form="from1">

新增的表单元素 datalist

datalist

  文本框输入关键字显示备用选项 list 属性对应 datalist 的 id 值
  
  1、普通文本
  
  请填写你的性别：<input type="text"  list="lis">
  <datalist id="lis">
    <option value="英语" label="不会"></option>
    <option value="前端" label="so简单"></option>
    <option value="Java" label="使用人数多"></option>
  </datalist>
  
  2、网址
  
  网址：<input type="url" list="urls">
  <datalist id="urls">
   <option value="http://www.baidu.com" label="百度">
   <option value="http://www.sohu.com" label="百度">
   <option value="http://www.163.com" label="百度">
  </datalist>
  
  其中 option 可以使单标签也可以是 双标签
  
  label会显示在value后面

新增的表单事件 oninput 和 oninvalid

1、oninput

监听当前指定内容的改变，只要内容改变，就会触发这个事件

【 添加内容，删除内容 】，就会触发这个事件

和 onkeup 的区别：每一个键抬起都会触发一次

oInp.oninput = function () {
	// 内容部分...
}

2、oninvalid

当验证没有通过时触发的事件，通常可以与 input 中的 pattern 验证搭配使用。

<form action="http://www.baidu.com">
	请输入手机号码：
	<input type="text" pattern="^1\d{10}$">
	<button>提交</button>
</form>

var oInp = document.querySelector("input");

oInp.oninvalid = function () {
	/* 设置默认的提示信息 */
	this.setCustomValidity("请输入1开头的十一位电话号码！")
}

音频/视频

音频/视频 概述

1、常见的视频格式

  1、视频的组成部分：画面、音频、编码格式

  2、视频编码：H.264、Theora、VP8(google开源)

2、常见的音频格式

  音频编码：ACC、MP3、Vorbis
  
3、HTML5 支持的视频格式

  1、Ogg = 带有Theora视频编码 +Vorbis 音频编码的 Ogg 文件，支持的浏览器: F、C、O

  2、MEPG4 = 带有H.264视频编码 +AAC 音频编码的 MPEG4 文件，支持的浏览器: S、C

  3、WebM = 带有 VP8 视频编码 +Vorbis 音频编码的 WebM 格式，支持的浏览器: I、F、C、O

video 标签

HTML5 规定了一种通过 video 元素来包含视频的标准方法

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 Video 标签。
</video>

1、control 提供了 播放、暂停和音量控件来控制视频。也可以使用dom操作来控制视频的播放暂停，如 play() 和 pause() 方法

2、同时 video 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变

3、标签之间插入的内容是提供给不支持 video 元素的浏览器显示的

  video 元素支持多个 source 元素 元素可以链接不同的视频文件
  
  浏览器将使用第一个可识别的格式（ MP4, WebM, 和 Ogg）

audio 标签

HTML5 提供了播放音频文件的标准，即使用 元素

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

1、control 属性供添加播放、暂停和音量控件

2、在 与 之间你需要插入浏览器不支持的元素的提示文本 

  元素允许使用多个 source 元素. 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件
  
　audio 标签三种音频格式文件: MP3, Wav, 和 Ogg