本节书摘来自异步社区《Windows 8 开发权威指南:HTML5 和JavaScript卷》一书中的第2章,第2.1节,作者:尹成 , 李亚男 , 王腾 , 丁宽帅 , 尹子磊著,更多章节内容可以访问云栖社区“异步社区”公众号查看
第2章 HTML5 JavaScript概述以及新特性
2.1 HTML5概述
HTML5已经推出,Web也不会是一成不变的。
以前你一定听说过这句话或类似的内容。 我想,当你听到这句话时,可能会变得很激动,转动眼珠、皱着眉头一脸疑问。 也可能这三种反应你都有。有这些反应,我非常能理解。 HTML5 十分令人称道,正如我们所知,它可能会改变 Web,但它的作用也被夸大了。 而且,它的真正意义还难以琢磨。 在使用 HTML5 构建应用程序时,我自己也有过上面所说的每一种反应。 HTML5 是一个宽泛的话题,要掌握它很困难,更不用说知道从哪里开始使用这套激动人心的新技术了。
2.1.1 什么是HTML5
到现在为止,你可能会发现HTML5对不同的人有着不同的意义。 对有些人来说,它只意味着诸如和之类的新标记以及可用在标记中的一些新属性。 对另一些人来说,它意味着Web上一切崭新和有趣的功能,包括在单个浏览器中实现的技术或未正式包含在HTML5中的其他规范。 当然,了解HTML5的真正意义通常是很多人面临的第一个障碍。
坦率地讲,存在各种各样的定义是有道理的。 HTML5十分庞大! HTML5由国际标准团体万维网联盟(W3C)正式定义,包含与下一代Web技术相关的100多项规范。 将所有这100多项规范统称为HTML5,您可能会认为W3C过度简化了这些规范的定义。HTML5涉及的内容非常广泛,很难为它下一个合适的明确定义。我认为 W3C 是通过引入HTML5作为Web变化的统一概念,从而界定这种变化的范围。
实际上,HTML5是描述一组HTML、CSS和JavaScript规范的泛称,这些规范旨在帮助开发人员构建下一代网站和应用程序。 这个定义主要由3部分组成:HTML、CSS 和 JavaScript。这3部分规定开发人员如何使用改进的标记、更丰富的样式功能以及新的JavaScript API以充分利用新Web开发功能。
简单地说,HTML5 = HTML + CSS + JavaScript。
就是这样。HTML5是关于对HTML、CSS和JavaScript的更改的。这3个术语描述了HTML5的广度和范围,你不必担心所有这100多条规范。还是认为这有点简略? 可能是这样,但你很快会明白,全面的HTML5定义并不像你选择采用的技术那样重要,因为这些技术值得你花费时间和精力。
以下几小节我们将介绍HTML5的重要新特性。
2.1.2 新的文档类型
目前很多网页还在使用XHTML1.0,并且要在第一行像这样声明文档类型:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd">
在HTML5中,上面的声明方式将失效。HTML5的声明方式为:
<!DOCTYPE html>
HTML4.01中的DOCTYPE需要对DTD进行引用,因为HTML4.01基于SGML。而HTML5不基于SGML,因此不需要对DTD进行引用,但是需要DOCTYPE来规范浏览器的行为。需要注意的是DOCTYPE对大小写很敏感,请书写时注意大小写。
2.1.3 脚本和链接无需添加type属性
在HTML4或XHTML中,你需要用下面的两行代码来给你的网页添加CSS和JavaScript文件。
<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>
而在HTML5中,你不再需要指定类型属性。因此,代码可以简化如下:
<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>
2.1.4 用于绘画的画布(canvas元素)
HTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域,你可以控制其每一个像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
2.1.5 用于媒介播放的video和audio元素
我们无需再依赖第三方插件区渲染音频。HTML5提供了
<audio autoplay="autoplay" controls="controls">
<source src="file.ogg" />
<source src="file.mp3" />
<a href="file.mp3">Download this file.</a>
</audio>
Mozilla和WebKit还没有完全相处,当涉及音频格式时,Firefox会希望看到一个.ogg文件,而WebKit的浏览器支持.mp3扩展。这意味着,至少在现在,你应该创建两个版本的音频。当Safari加载页面时,它不会承认.ogg格式,将会跳过它并转移到MP3版本。
2.1.6 新的特殊内容元素
< article>< /article>
用于定义独立的内容,比如,论坛帖子、报纸文章、博客条目、用户评论。标签的内容独立于文档的其余部分。
< footer>< /footer>
用于定义section或document的页脚。在典型情况下,该元素会包含创作者的姓名、文档的创作日期以及联系信息。假如,你使用footer来插入联系信息,应该在footer元素内使用< address>元素。
< header>< /header>
用于定义文档的页眉(介绍信息)。
< nav>< /nav>
定义导航链接的部分。如果文档中有“前后”按钮,则应该把它放到< nav>元素中。
< section>< /section>
用于定义文档中的节,比如,章节、页眉、页脚或文档中的其他部分。
2.1.7 新的表单控件
HTML5拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
数据检出器
HTML5拥有多个可供选取日期和时间的新输入类型,date、month、week、time、datetime、datetime-local。
email
用于应该包含E-mail地址的输入域。在提交表单时,会自动验证email域的值。例如:
E-mail:< input type=”email” name=”user_email”>
url
用于应该包含URL地址的输入域。在提交表单时,会自动验证URL域的值。
search
用于搜索域,比如站点搜索或Google搜索。search域显示为常规文本域。