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

语义化标签

语义化标签概述

1、清晰易读
 
2、有利于SEO，方便搜索引擎识别页面结构
 
3、方便设备解析、比如盲人阅读

标签	特性
header	定义文档头部区域，一般用在头部
section	定义文档中的一块区域,替代 div 布局
nav	定义导航栏
aside	定义侧边栏、广告、nav 元素组，以及其他类似的内容部分 .aside 的内容应该与 article 的内容相关。一般与正文无关的。
footer	定义文档底部区域内容，一般以 footer 结尾
article	定义外部的内容。外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者是来自论坛的文本
figure	定义一块独立的内容（图像，图标，代码等等），通常用来展示图片及其描述

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