4.4.3 HTML5简介
1.HTML5
HTML5是用于取代1999年制定的HTML4.01和XHTML1.0标准的HTML标准版本,现在仍处于完善阶段,但大部分浏览器已经支持某些HTML5特性。
HTML5提供了新的元素、属性以及API,包括表单控件、布局元素、画布、音视频元素等,以强化Web页面的表现性能,为Web应用引进新的功能,如支持地理定位、离线存储、拖放等,从而减少浏览器对于插件的需求。HTML5是跨平台的,它的设计面向不同类型的设备,包括手机、平板计算机、个人计算机、电视等。它的新特性是建立在HTML、CSS、DOM以及JavaScript基础之上的,因此广义的HTML5实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。
2.HTML5新内容
(1)HTML5新元素
①提供了新的语义/结构元素以构建更好的文档结构
在旧版的HTML中,开发人员可以使用如div之类的元素结合其属性来设置页面布局,实现网站中的导航、页眉、页脚等功能,如div id=“nav”、div id=“header”、div id=“footer”等,这些元素可以通过CSS定位,再对显示外观做进一步修饰。但仅通过div标签的识别,浏览器无法正确理解页面的内容。而通过HTML5的新元素,如nav、header、footer、section、article则可以很好地解决此问题。
②提供了新的表单元素和输入类型,以提供更好的输入控制和验证
例如datalist为input元素规定预定义选项列表,keygen提供了密钥对生成器,为验证用户提供可靠的方法。output用于不同类型的输出,如计算或脚本输出。此外,新增的输入类型有email、url、date、color、range等,为用户的表单输入提供了更多的选择。
③新增的多媒体元素,更好地支持音视频的输出以及复杂的图像生成
目前,大多数网站采用插件,如用Flash来播放音视频文件。然而,并非所有浏览器都具备同样的插件。在HTML5中,audio、video元素分别为在页面中插入音频、视频片段提供了标准方法,减少了浏览器对插件的依赖。此外,以前页面中的图像都是静态的,浏览器根据URL下载到本地进行显示,而HTML5的canvas元素即画布元素可以通过JavaScript在Web页面上绘制图像,使动态生成复杂的图像成为可能。
(2)HTML5 API
①地理定位
以前的Web应用,仅能获得用户的IP地址,其在客观世界中的地理位置难以获悉,HTML5 Geolocation API则可以实现这一功能。与设备中的全球定位系统(GPS,Global Positioning System)相结合,可以提供更加精确的经纬度信息。
②拖放
通过HTML5中的拖放API,任何元素可以设为可拖放的,这样开发者不需要撰写大量JavaScript代码即可非常方便地在页面中实现各种拖放功能。这一特性也将改变用户与文档之间的交互方式。
③Web存储
在HTML5以前,Web应用的本地数据只能存在cookie中。但cookie的数据容量比较小,而且每次请求时cookie都会发送至服务器端。HTML5提供了本地存储,存储容量大大提高,并且信息不会发送到服务器。这样Web应用能够在浏览器端对数据进行更安全的存储和处理。
以上仅对HTML5的部分新内容和功能进行了简要介绍,详细描述可以参考本书所列文献[26]。
3.HTML5代码规范
HTML5相比之前的版本有更为严格的规范。为方便其他程序、设备更容易理解和使用HTML文档,建议开发者编写格式良好的HTML代码。一些代码约定如下。
·在文档首行声明文档类型:!doctype html。
·文档根元素为html。
·使用head、body元素。
·在head元素中指定正确的字符编码,如meta charset=“utf-8”。
·在head元素中包含title元素。
·推荐使用小写元素名、属性名。
·属性值建议加引号。
·关闭所有HTML元素。
·添加元素的必要属性,如img元素需要包含alt属性。
HTML5采用了统一的JavaScript语言、统一的数据模型(XML和文档对象模型DOM)以及统一的表现规则CSS,其新特性增强了Web应用的功能,提升了页面的表现以及安全性能,简化了Web开发,提供了更好的设备兼容性。随着技术标准的不断完善,HTML5将推动Web进入新的时代。