HTML5——语义化表单多媒体DOM扩展

HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。
HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，甚至结合Canvas我们可开发网页版游戏。
广义概念：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，它包括：HTML5，CSS3，Javascript，API在内的一套技术组合。
HTML5 是html4.0 升级版。

语义化标签

语义标签对于我们并不陌生，如p表示一个段落、ul表示一个无序列表等，在此基础上HTML5增加了大量更有意义的语义标签，更有利于搜索引擎或辅助设备理解HTML页面内容。
传统的做法我们或许通过增加类名如class=”header”、class=”footer”，使HTML页面具有语义性，但是不具有通用性。
HTML5则是通过新增语义标签的形式来解决这个问题，例如
<header></header>、<footer></footer>等，这样就可以使其具有通用性。

常用新语义标签

< nav > 表示导航
< header > 表示页眉
< footer > 表示页脚
< section > 表示区块
< article > 表示文章 如文章、评论、帖子、博客
< aside > 表示侧边栏 如文章的侧栏
< figure > 表示媒介内容分组
< mark > 表示标记
< progress > 表示进度
< time > 表示日期

尽量避免全局使用header、footer、aside等语义标签。

兼容处理
在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用，但是在IE9版本以下，并不能正常解析这些新标签，但是却可以识别通过document.createElement(‘tagName’)创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过document.createElement(‘tagName’)来创建一遍，这样IE低版本也能正常解析HTML5新标签了，在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题。

表单

输入类型
email：智能验证
color：取色器
url：只能输入url格式网址
number ：只能输入数字（可以加step属性）
range：范围 滑动条
tel：手机号码
search：搜索框
time：时间
部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。

表单元素（标签）
datalist：数据列表 与input配合使用

<input type=”text” list=”data”>
 <datalist id=”data”>
 <option>男</option>
 <option>女</option>
 <option>不详</option>
</datalist>

output：不可当作数据提交，展示用

keygen：密钥，生成加密字符串。 keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键， 一个是私钥，一个公钥。 私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

meter：度量器

progress：进度条

表单属性
placeholder ：占位符
autofocus： 获取焦点
multiple 文件上传多选或多个邮箱地址
autocomplete ：自动完成填充，用于表单元素，也可用于表单自身，默认on，off关闭
form： 指定表单项属于哪个form，处理复杂表单时会需要
novalidate ：关闭默认的验证功能，用于form标签
required ：必填项
pattern ：正则表达式 验证表单

表单事件
oninput 用户输入内容时触发，可用于移动端输入字数统计。
oninvalid：当验证不通过时触发设置提示文字。

多媒体

在HTML5之前，在网页上播放音频/视频的通用方法是利用Flash来播放，但是大多情况下，并非所有用户的浏览器都安装了Flash插件，由此使得处理音频/视频播放变的非常复杂，并且移动设备的浏览器并不支持Flash插件。
音频
HTML5通过< audio >标签来解决音频播放的问题。
并且可以通过附加属性可以更友好控制音频的播放，如：
autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放
preload 预加载 同时设置autoplay时些属性失效。

视频
HTML5通过< video >标签来解决音频播放的问题。
同样，通过附加属性可以更友好的控制视频的播放
autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
preload 预加载，同时设置了autoplay，此属性将失效
width 设置播放窗口宽度
height 设置播放窗口的高度

DOM扩展

获取元素
1、document.getElementsByClassName (‘class’) 通过类名获取元素，以类数组形式存在。
2、document.querySelector(‘div’) 通过CSS选择器获取元素，符合匹配条件的第1个元素。
3、document.querySelectorAll(‘selector’) 通过CSS选择器获取元素，以类数组形式存在。

类名操作
1、Node.classList.add(‘class’) 添加class
2、Node.classList.remove(‘class’) 移除class
3、Node.classList.toggle(‘class’) 切换class，有则移除，无则添加
4、Node.classList.contains(‘class’) 检测是否存在class
Node指一个有效的DOM节点，是一个通称。

自定义属性
在HTML5中我们可以自定义属性，其格式如下data-*=”“，例如

data-info="我是自定义属性";

通过Node.dataset[‘info’] 我们便可以获取到自定义的属性值。
Node.dataset是以类对象形式存在的
当我们如下格式设置时，则需要以驼峰格式才能正确获取

data-my-name="itcast"，获取Node.dataset['myName'];