HTML5

HTML5

• 语义化

• 表单

• 多媒体

• DOM扩展

• 新增API

  • 网络状态

  • 全屏

  • 文件读取

  • 拖拽

  • 地理定位

  • Web存储

  • 应用缓存

1、认识HTML5

HTML5并不仅仅只是作为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。

HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一系列Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用，甚至结合Canvas我们可开发网页版游戏，同时结合CSS3的过渡、转换、动画等特性，可以极大的增强用户体验，提升开发功能的可应用性。

我们日常讨论的H5其实是一个泛称，它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台。

语法规范

随着Web技术的更新，HTML也先后经历了HTML 4.01、XHTML 1.0、HTML5几个重要的版本，在版本的演变过程中新增或废弃了一些属性，同时对语法规范也做了一些调整，为了能够保证浏览器可以兼容不同版本语法规范的，我们可以使用指示浏览器应该如何处理我们的HTML。

2、语义化

所谓语义化是要使HTML标签具备很好的可读性，可以清晰传达每个标签所要表达的意义，以方便其被友好的处理和解析。

2.1 语义化标签

对于语义化标签我们并不陌生，如

表示一个段落、

表示一个无序列表

~

表示一系列标题等，在此基础上HTML5增加了大量更有意义的语义标签，更有利于搜索引擎或辅助设备来理解HTML页面内容。

传统的做法我们通过添加类名如class="header"、class="footer"，使HTML页面具有语义性的，但是不具有通用性（如class="header"也可能被写成class="head"）。

HTML5则是通过增加语义化标签的形式来解决这个问题，例如

、

等，这样就可以保证其具有通用性。

2.2 常用语义标签

标签	语义
	导航
	页眉
	页脚
	区块
	文章
	侧边栏
	进度条
	主体

本质上新语义标签与

、没有区别，只是其具有语义性，使用时除了在HTML结构上需要注意外，其它和普通标签的使用无任何差别，可以理解成

相当于

。不要好奇，它只是一个标签！

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

2.3 兼容处理

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

image

3、表单

伴随着互联网富应用以及移动开发的兴起，传统的Web表单已经越来越不能满足开发的需求，所以HTML5在Web表单方向也做了很大的改进，如拾色器、日期/时间组件等，使表单处理变的更加高效。

输入类型

类型	使用示例	含义
email		输入邮箱格式
tel		输入手机号码格式
number		输入数字格式
search		搜索框（体现语义化）
range		自由拖动滑块
color		拾色器
date		日期
datetime		日期时间

表单属性

属性	用法	含义
placeholder		占位符
autofocus		自动获得焦点
novalidate		关闭验证
required		必填项

4、多媒体

在HTML5之前，在网页上播放音频/视频的通用方法是利用Flash来播放，但是大多情况下，并非所有用户的浏览器都安装了Flash插件，由此使得处理音频/视频播放变的非常复杂，并且移动设备的浏览器并不支持Flash插件。

音频

HTML5通过

使用相当简单，并且可以通过附加属性可以更友好控制音频的播放，如：autoplay 自动播放 controls 是否显不默认播放控件 loop 循环播放

视频

HTML5通过

同音频播放一样，

autoplay 自动播放

controls 是否显示默认播放控件

loop 循环播放

width 设置播放窗口宽度

height 设置播放窗口的高度