第2章 HTML 5快速上手_HTML5从入门到项目实践（超值版）-QQ阅读男生历史网

上QQ阅读APP看书，第一时间看更新

第2章　HTML 5快速上手

◎　本章教学微视频：22个　28分钟

学习指引

HTML 5作为最新的标记语言，它与旧版本的HTML标记语言相比变化很大，在未来的网站开发与移动Web开发中，它将作为最常用的标记语言。除此之外，HTML 5的许多新功能还使其增加了更多的适用范围，所以在使用之前需要真正认识HTML 5。

重点导读

熟悉HTML 5的语法结构。
掌握HTML 5的新技术改进。
了解HTML 5给移动Web开发带来的优势。

2.1　HTML 5的语法结构

HTML 5不是一种编程语言，而是一种描述性的标记语言，用于描述超文本中的内容和结构。HTML 5最基本的语法是<标记符></标记符>。标记符通常都是成对使用，有一个开头标记和一个结束标记。结束标记只是在开头标记的前面加一个斜杠“/”。当浏览器收到HTML 5文件后，就会解释里面的标记符，然后把标记符相对应的功能表达出来。

如在HTML 5中用标记符来定义一个段落，用 来定义一个换行符。当浏览器遇到标记符时，会把该标记中的内容自动形成一个段落。当遇到 标记符时，会自动换行，并且该标记符后的内容会从一个新行开始。这里的 标记符是单标记，没有结束标记，标记后的“/”符号可以省略，为了规范代码，一般建议加上。

一个完整的HTML 5文件包括文档类型说明、标题、段落、列表、表格、绘制的图形及各种嵌入对象，这些对象统称为HTML元素。HTML 5文件的语法结构如下：

     <!DOCTYPE html>文档类型说明
     <html >文件开始的标记
     <head>文档头部开始的标记
     文件头的内容
     </head>文档头部结束的标记
     <body>文件主体开始的标记
     文档主体内容
     </body>文件主体结束的标记
     </html>文件结束的标记

从上面的代码可以看出，在HTML 5文件中，所有的标记都是相对应的，开头标记为< >，结束标记为</>，在这两个标记中间添加内容。

2.1.1　文档类型说明

HTML 5设计准则中的第3条——化繁为简，使得Web页面的文档类型说明（DOCTYPE）被极大地简化了。细心的读者会发现，在使用Dreamweaver CS 6创建的HTML文档时，文档头部的类型说明代码如下：

上面为XHTML文档类型说明，读者可以看到这段代码既麻烦又难记，HTML 5对文档类型进行了简化，简单到15个字符就可以了，代码如下：

     <!DOCTYPE html>

注意：doctype的申明需要出现在html文件的第一行。

2.1.2　HTML标记

HTML标记代表文档的开始，由于HTML语言语法的松散特性，该标记可以省略，但是为了使之符合Web标准和文档的完整性，养成良好的编写习惯，建议不要省略该标记。

HTML标记以<html>开头，以</html>结尾，文档的所有内容书写在开头和结尾的中间部分，语法格式如下：

2.1.3　头标记head

头标记head用于说明文档头部相关信息，一般包括标题信息、元信息、定义CSS样式和脚本代码等。HTML的头部信息是以<head>开始，以</head>结束，语法格式如下：

说明：<head>元素的作用范围是整篇文档，定义在HTML语言头部的内容往往不会在网页上直接显示。在head标记中一般可以设置title和meta等标记的内容。

2.1.4　标题标记title

HTML页面的标题一般用来说明页面的用途，它显示在浏览器的标题栏中。在HTML文档中，标题信息设置在<head>与</head>之间。标题标记以<title>开始，以</title>结束，语法格式如下：

     <title>
     .
     .
     .
     </title>

图2-1　标题标记

标记中间的“”就是标题的内容，它可以帮助用户更好地识别页面。预览网页时，设置的标题在浏览器的左上方标题栏中显示，如图2-1所示。

此外，在Windows任务栏中显示的也是这个标题，页面的标题只有一个，它们位于HTML文档的头部，即<head>和</head>之间。

2.1.5　元信息标记meta

表2-1　<meta>标签提供的属性及取值

1. 字符集charset属性

在HTML 5中，有一个新的charset属性，它使字符集的定义更加容易。例如，下列代码告诉浏览器，网页使用ISO-8859-1字符集显示：

     <meta charset="ISO-8859-1">

2. 搜索引擎的关键词

在早期，Meta Keywords关键词对搜索引擎的排名算法起到了一定的作用，也是很多人进行网页优化的基础。关键词在浏览时是看不到的，使用格式如下：

     <meta name="keywords" content="关键字,keywords" />

说明：

（1）不同的关键词之间，应用半角逗号隔开（英文输入状态下），不要使用“空格”或“|”间隔；

（2）是keywords，不是keyword；

（3）关键词标签中的内容应该是一个个的短语，而不是一段话。

例如，定义针对搜索引擎的关键词，代码如下：

     <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />

关键词标签Keywords，曾经是搜索引擎排名中很重要的因素，但现在已经被很多搜索引擎完全忽略。如果我们加上这个标签，对网页的综合表现没有坏处；但是，如果使用不当，那么对网页非但没有好处，还有欺诈的嫌疑。因此，在使用关键词标签Keywords时，要注意以下几点：

（1）关键词标签中的内容要与网页核心内容相关，确信使用的关键词出现在网页文本中。

（2）使用用户易于通过搜索引擎检索的关键词，过于生僻的词汇不太适合做META标签中的关键词。

（3）不要重复使用关键词，否则可能会被搜索引擎惩罚。

（4）一个网页的关键词标签里最多包含3~5个最重要的关键词，不要超过5个。

（5）每个网页的关键词应该不一样。

注意：由于设计者或SEO优化者以前对Meta Keywords关键词的滥用，导致目前它在搜索引擎排名中的作用很小。

3. 页面描述

Meta Description是一种HTML元标签，用来简略描述网页的主要内容，通常被搜索引擎用在搜索结果页上展示给最终用户看的文字片段。页面描述在网页中是不显示出来的，页面描述的使用格式如下：

     <meta name="description" content="网页的介绍" />

例如，定义对页面的描述，代码如下：

     <meta name="description" content="专业的技术教程" />

4. 页面定时跳转

使用<meta>标记可以使网页经过一定时间后自动刷新，这可通过将http-equiv属性值设置为refresh来实现。Content属性值可以设置为更新时间。

在浏览网页时经常会看到一些欢迎信息的页面，在经过一段时间后，这些页面会自动转到其他页面，这就是网页的跳转。页面定时刷新跳转的语法格式如下：

     <meta http-equiv="refresh" content="秒;[url=网址]" />

说明：上面的[url=网址]部分是可选项，如果有这部分，页面定时刷新并跳转，如果省略该部分，页面只定时刷新，不进行跳转。

例如，实现每10s刷新一次页面。将下述代码放入head标记部分即可。

     <meta http-equiv="refresh" content="10" />

2.1.6　网页的主体标记

网页所要显示的内容都放在网页的主体标记内，它是HTML文件的重点所在。在后面章节所介绍的HTML标记都将放在这个标记内。然而它并不仅仅是一个形式上的标记，它本身也可以控制网页的背景颜色或背景图像，这将在后面进行介绍。主体标记是以<body>开始，以</body>标记结束，语法格式如下：

     <body>
     .
     .
     .
     </body>

注意，在构建HTML结构时，标记不允许交错出现，否则会造成错误。

例如，在下列代码中，<body>开始标记出现在<head>标记内。

     <html>
     <head>
     <title>html标记</title>
     <body>
     </head>
     </body>
     </html>

代码中的第4行<body>开始标记和第5行的</head>结束标记出现了交叉，这是错误的。HTML 5中的所有代码都是不允许交叉出现的。

2.1.7　页面注释标记

注释是在HTML 5代码中插入的描述性文本，用来解释该代码或提示其他信息。注释只出现在代码中，浏览器对注释代码不进行解释，并且在浏览器的页面中不显示。在HTML 5源代码中适当地插入注释语句是一种非常好的习惯。对于设计者日后的代码修改、维护工作很有好处。另外，如果将代码交给其他设计者，其也能很快读懂前者所撰写的内容。语法格式如下：

     <!--注释的内容-->

注释语句元素由前半部分和后半部分组成，前半部分一个左尖括号、一个半角感叹号和两个连字符，后半部分由两个连字符和一个右尖括号组成。具体代码实例如下：

     <html>
     <head>
     <title>html标记</title>
     </head>
     <body>
     <!-- 这里是标题-->
     <h1>HTML 5标记测试</h1>
     </body>
     </html>

页面注释不但可以对HTML 5中一行或多行代码进行解释说明，而且可能注释掉这些代码。如果希望某些HTML 5代码在浏览器中不显示，那么可以将这部分内容放在之间。例如，修改上述代码，语法格式如下：

     <html>
     <head>
     <title>html标记</title>
     </head>
     <body>
     <!—
     <h1>HTML 5标记测试</h1>
     -->
     </body>
     </html>

修改后的代码，将<h1>标记作为注释内容处理，在浏览器中将不会显示这部分内容。

2.2　HTML 5的新技术改进

HTML 5在新技术方面做了很大的改进，下面就来进行具体介绍。

2.2.1　新增多个元素

自1999年以后HTML 4.01已经改变了很多，为了更好地处理今天的互联网应用，HTML 5添加了很多新元素及功能，比如，图形的绘制、多媒体内容、更好的页面结构、更好的形式处理、移动定位、网页应用程序缓存、存储等。

2.2.2　新增多条属性

HTML 5为不同的元素增加了许多有用的属性，这让网站制作开发变得更加简单。下面就来进行具体介绍。

1. 新增与链接相关的属性

（1）为a与area元素增加media属性。该属性有效的前提是href属性必须存在。media属性定义了目标URL是针对哪种类型的媒介设备进行优化的。

（2）为area元素增加hreflang属性与rel属性。这可以使其保持与a和link元素的一致性。

（3）为link元素增加sizes属性。该属性可以指定关联图标（icon）的大小，所以通常与icon元素一起使用。

（4）为base元素增加traget属性，仍然是为了与a元素保持一致。

2. 新增与表单相关的属性

（1）为input（type=text）、button、select和textarea元素增加autofocus属性。该属性表示在打开页面时使元素自动获得焦点。

（2）为input（type=text）和textarea元素增加placeholder属性。该属性可以在用户输入时进行提示。

（3）为input、output、button、select、textarea和fieldset增加form属性。该属性用于声明元素属于哪个表单，而并不关心元素具体在页面的哪个位置，甚至是表单之外都可以。

（4）为input（type=text）和textarea元素增加required属性。该属性表示元素为必填项，当用户提交表单时系统会自动检查元素中是否有内容。

（5）为input元素增加了多个新属性：autocomplete、min、max、multiple、pattern与step。同时还新增了list和datalist两个元素，可以与input配合使用。

（6）为input和button元素增加了多个新属性：formaction、formenctype、formmethod、formnovalidate与formtarget。它们可以重载早期HTML版本中form元素的action、enctype、method、novalidate和target属性。

（7）为input、button和form元素增加novalidate属性。该属性可以取消用户提交表单时需要进行的相关检查。

（8）为fieldset元素增加disabled属性。该属性可以将其子元素设为无效状态。

3. 新增的其他属性

（1）为ol元素增加reversed属性，用于指定列表倒序显示。

（2）为meta元素增加charset属性，用于指定文档的字符编码，实际上该属性已经在之前的版本中被广泛应用了。

（3）为menu元素增加type与label两个属性。label属性用于为菜单定义一个可见的标注，type属性定义菜单的3种显示形式，即上下文菜单、工具条菜单、列表菜单。

（4）为style元素增加scoped属性，用于规定样式的作用域。

（5）为script元素增加async属性，用来定义脚本是否异步执行。

（6）为html元素增加manifest属性，在开发离线Web应用程序时，它与API结合使用，定义一个URL，在这个URL上描述文档的缓存信息。

（7）为iframe元素增加了多个新属性，如sandbox、seamless和srcdoc，主要用来提升页面安全性，防止不被信任的Web页面执行某些操作。

2.2.3　Video和Audio

HTML 5中的Video和Audio是HTML 5中专门用来播放视频和音频资源的标签。Video标签和Audio标签也提供了很实用的JavaScript API，允许创建自定义的控件。

Video标签默认为一个300×150的inline-block。Audio标签默认为一个300×30并且Display为None的Inline-block（除非有Controls属性）。但手机iOS系统中的Safari浏览器不支持这个标签，其余的都支持。

2.2.4　2D/3D制图特性

图2-2　贝济埃曲线

HTML 5新增了<canvas></canvas>标签，该标签像所有的DOM对象一样具有自己本身的属性、方法和事件，其中就有制图的方法，结合JavaScript，就可以调用它来绘制图形，如正方形、长方形、圆形和贝塞尔曲线等，如图2-2所示为使用<canvas></canvas>标签绘制的贝济埃曲线。

2.2.5　浏览器支持特性

图2-3　IE浏览器版本信息

目前，几乎所有的主流浏览器都能很好地支持HTML 5的特性，下面具体介绍几种支持情况。

（1）Chrome，Firefox：支持HTML 5很多年，而且有自动升级，支持相对比较好。

（2）Safari，Opera：支持HTML 5多年，支持也很好。

（3）IE浏览器：相对之前的版本，自IE10起支持效果比较好。在IE浏览器界面中选择“帮助”→“关于Internet Explorer”菜单命令，即可在打开的对话框中查看浏览器版本信息，如图2-3所示。

2.2.6　本地存储特性

HTML 5 Storage提供了一种方式让网站能够把信息存储到你本地的计算机上，并在以后需要的时候进行获取。这个概念和Cookie相似，区别是它是为了更大容量存储设计的。HTML 5提供的WebStorage技术共有两个对象，分别为window.sessionStorage和window.localStorage。

（1）window.sessionStorage——会话级存储。

存储一个数据：sessionStorage['key']=value;

/sessionStorage.setItem('key',value);

读取一个数据：var data = sessionStorage['key'];

/var data = sessionStorage.getItem('key');

获取数据的个数：sessionStorage.length

清除所有的数据：sessionStorage.clear();

清除一个数据：sessionStorage.removeItem('key');

（2）window.localStorage——本地存储。

存储一个数据：localStorage['key']=value;

/localStorage.setItem('key',value);

读取一个数据：var data = localStorage['key'];

/var data = localStorage.getItem('key');

获取数据的个数：localStorage.length

清除所有的数据：localStorage.clear();

清除一个数据：localStorage.removeItem('key');

2.2.7　本地SQL数据

本地SQL数据是HTML 5新增加的功能，这个功能可以把原本要保存在服务端的数据转换为保存在客户端，这样大大提高了Web应用程序的性能，减轻了服务器的负担，这其中就包含Web SQL Database等，也就是本地SQL数据。

2.2.8　WebSocket技术

WebSocket是HTML 5新加的一个协议，该协议的主要作用就是为了解决Http协议的Request、Response的——对应和它自身的被动性，以及ajax轮询等问题。使用该协议可以发送多条信息，连接不中断，永久连接。不过，这也导致了服务器连接的客户端数量有限。

下面介绍客户端的使用，具体代码如下：

2.2.9　Web Worker技术

由于JavaScript是单线程的，所以HTML 5添加了Web Worker的功能，它允许JavaScript创建多个线程，但是子线程完全受主线程控制，且不能操作DOM，从而来处理一些比较耗时的操作。

那么，如何创建一个子线程呢？一般情况下需要一个构造函数var worker = new Worker('worker.js')来创建，下面给出与Web Worker一起工作的常用API。具体介绍如下：

postMessage()：用来在主线程和子线程间传递数据。
terminate()：终止子线程，无法再调用，除非另外重新创建。
message：消息发送时触发，通过事件的data属性获得传递的数据。
error：当出错时触发，通过事件的message属性获得错误信息。

2.2.10　SVG新特性

相对于Canvas绘图，SVG是一种使用XML描述2D图形的技术，全称为Scalable Vector Graphics，可缩放的矢量图，在2000年就已经存在，HTML 5把它纳入了标准标签库，并进行了一些修改。需要注意的是，SVG图形的属性不属于HTML DOM标准，需要用DOM的方法来操作；SVG的样式可以用CSS，但是只能用其专有的属性；如果要使用JavaScript动态生成SVG中的元素，创建方法为document.createElementNS()。此外，SVG元素的nodeName都是纯小写形式。

2.2.11　地理地位特性

地理地位特性就是，使用JavaScript获取浏览器当前所在的地理坐标，实现LBS（Location Based Service，基于定位的服务）。下面就是它的基本调用代码：

在上述代码中，errorFn就是获取地理位置信息失败后的回调函数，输出一些错误信息；successFn是成功获取后的回调函数，可以结合一些框架实现地理定位，比如百度地图、Google Map API等。

2.2.12　拖放API新特性

拖放API是HTML 5专门为了鼠标拖放新增的7个事件，可以分成以下3个部分。

（1）拖动的源对象（source）可以触发的事件，如表2-2所示。

表2-2　源对象（source）可以触发的事件

（2）拖动的目标对象（target）可以触发的事件，如表2-3所示。

表2-3　目标对象（target）可以触发的事件

特别需要注意的一点是，如果想触发drop事件，必须阻止dragover的默认行为。

（3）源对象和目标对象间的数据传递。源对象和目标对象间的数据传递可以使用全局变量来完成，不过，这里介绍一个更好的方法，就是使用拖放事件的dataTransfer属性。具体代码如下。

源对象保存数据如下：

     source.onxxx=function(e){
         e.dataTransfer.setData('key','value');
     };

目标对象接收数据如下：

     target.onxxx=function(e){
     e.dataTransfer.getData('key');
     }

2.3　HTML 5给移动Web开发带来的优势

HTML 5并非适用于每一款移动设备及移动Web浏览器，比如，许多旧式设备、非智能手机及平板计算机都无法很好地支持HTML 5。但是，对于未来，我们有充分的理由来为那些支持HTML 5的移动设备开发应用程序。

2.3.1　HTML 5包含了性能优良的API

HTML 5拥有与视频、音频、Web应用程序、编辑页面内容、拖动以及展示浏览器历史等功能相关的API。它们在移动设备上表现良好，因为移动设备浏览器不需要为这些功能特别使用插件或附加组件。只要主要浏览器支持HTML 5，它便能支持API。

另外，HTML 5及开放Web标准还提供了用于地理定位、Web存储及离线Web应用程序的API，它们都非常适合在移动设备上使用。大部分智能手机和平板计算机都带有GPS或其他地理定位功能。Web存储可将一个标准的Web页面变成应用程序，并将数据保存在移动设备上。离线应用程序在手机无法连接网络时可发挥巨大作用。事实上，移动设备对离线功能的需求比一般的桌面计算机更大。

2.3.2　HTML 5便捷的开发环境

移动设备应用程序的开发是一条漫长的道路，对于大部分Web应用开发者来说，Objective-C比较难懂。不过，这些开发者已经具备了HTML4、CSS及JavaScript的相关知识。掌握了这3种语言，就可以使用HTML 5及开放Web标准来构建优秀的移动应用程序了。

这就意味着对于以前做过Web开发的人员来说，由于已经具备了语言基础，他们就可以在很短的时间内开始移动应用的开发了。

2.3.3　备受青睐的Web应用程序

目前，移动应用程序的受欢迎程度与日俱增，但Web应用却结合了应用程序与浏览器两者的优点。HTML 5 Web应用通过移动设备运行，这样用户既可以将其加入书签并使用其熟悉的工具，又可以享受到与典型应用一样的特征和功能。

为移动设备开发的HTML 5 Web应用可以在非移动设备的HTML 5浏览器中运行，其主要功能由该应用的编码确定，开发人员只要为标准Web浏览器及移动设备创建不同的样式表即可。与为每个新平台开发一个独立的应用相比，维护成本显然低得多。

2.4　就业面试技巧与解析

2.4.1　面试技巧与解析（一）

面试官：请问你在开发中经常用到哪些HTML 5新特性？

应聘者：我经常用到的HTML 5新特性有以下几个：

用于绘画的canvas元素。
用于媒介回放的video和audio元素。
对本地离线存储的更好的支持。
新的特殊内容元素，如article、footer、header、nav、section。
新的表单控件，如calendar、date、time、email、url、search。

2.4.2　面试技巧与解析（二）

面试官：请谈谈对HTML 5的理解。

应聘者：HTML 5从广义上可以说是前端开发中各种最新技术的总称，包含了HTML 5、CSS 3、JavaScript、ES 6和各种开源框架等最新前端开发技术的总和。HTML 5广泛而深入地吸收了移动互联网时代的技术要点，再加上自身跨平台、免安装、更新快等优势，使其逐渐成为现代互联网和移动互联网开发的核心技术。