第三篇 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

本栏目推荐文章
• 图片特效/增强GUI程序
• Qt/C++编写视频监控系统83-自定义悬浮条信息
• 基于融合语义信息改进的内容推荐算法。Improved content recommendation algorithm integrating semantic information.
• 短视频商城系统，session和cookie实现登录
• 短视频系统源码，如何限制视频分辨率？
• RDD的五大特性
• B站视频一键下载插件
• nginx启用HTTP2特性
• c# 调用 ffmpeg 获取音频时长
• 面向对象的三大特性及派生和组合

增强型 语义 音频视频 表单 特性增强型 语义 音频视频 表单 标签 语义 布局 特性 元素 标签 语义 表单 注解 表单idataerrorinfo特性 表单 前端 表格 音频 增强型 增强型 缓存 高三 性能 增强型 高清 分辨率windows 表单 特性form 增强型 水面 指数endisi