【知识梳理】_HTML5+CSS3移动Web开发实战（第2版）-QQ阅读男生武侠网

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

【知识梳理】

1. HTML5印象

HTML5是万维网的核心语言，它的第一份正式草案公布于2008年1月22日。2012年12月17日，万维网联盟（World Wide Web Consortium，W3C）宣布凝结了大量网络工作者心血的HTML5规范正式定稿。W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”

2013年5月6日，HTML 5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（Hyper Text Markup Language，HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的开发者努力提高新元素的交互操作性。

支持HTML5的浏览器包括Chrome（谷歌浏览器）、Firefox（火狐浏览器）、IE9及其更高版本、Safari、Opera等。傲游浏览器（Maxthon）以及基于IE或Chromium（Chrome的工程版或称实验版）推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。

2. CSS3印象

CSS（Cascading Style Sheet）可译为层叠样式表或级联样式表，是一组格式设置规则，用于控制Web页面的外观。

在制作网页时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现精确控制。这时，只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者不同网页的外观和格式。CSS3是CSS技术的升级版本。CSS3语言开发是朝着模块化方向发展的。CSS3将完全向后兼容，网络浏览器也将继续支持CSS2。CSS3可以使用新的可用的选择器和属性，可实现新的设计效果（例如渐变、交互和分栏）。

3. HTML5的主要特性

（1）语义特性（Class ：Semantic）

HTML5赋予网页更好的意义和结构，更加丰富的标签将随着对RDFa、微数据与微格式等方面的支持，构建对程序、用户都更有价值的数据驱动的Web。

（2）本地存储特性（Class ：Offline & Storage）

基于HTML5开发的网页App拥有更短的启动时间和更快的联网速度。这得益于HTML5的App Cache及本地存储功能。

（3）设备兼容特性（Class ：Device Access）

自带有Geolocation（地理定位）功能的API（Application Programming Interface，应用程序编程接口）文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择。HTML5提供了前所未有的数据与应用接入开放接口，使外部应用可以直接与浏览器内部的数据相连，如视频影音可直接与麦克风及摄像头相连。

（4）连接特性（Class ：Connectivity）

更有效的连接使得基于页面的实时聊天、更快速的网页游戏体验、更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性。这两个特性能够帮助我们实现从服务器将数据“推送”到客户端的功能。

（5）多媒体特性（Class ：Multimedia）

支持网页端的Audio、Video等多媒体功能，与各种APPS（Application Service，应用服务）相得益彰。

（6）三维、图形及特效特性（Class ：3D, Graphics & Effects）

基于SVG、Canvas、WebGL及CSS3的3D功能，让用户惊叹于HTML5在浏览器中所能呈现的惊人视觉效果。

（7）性能与集成特性（Class ：Performance & Integration）

没有用户会永远等待你的Loading（加载）——HTML5会通过XMLHttpRequest2等技术，解决以前的跨域等问题，帮助你的Web应用和网站在多样化的环境中更快速地工作。

（8）CSS3特性（Class ：CSS3）

在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（Web Open Font Format，WOFF）也提供了更高的灵活性和控制性。

4. HTML5的主要变化

HTML5提供了一些新的元素和属性，如<nav>（网站导航块）和<footer>。这种标签将有利于搜索引擎的索引整理，同时更好地帮助小屏幕装置和视障人士使用。除此之外，HTML5还为其他浏览要素提供了新的功能，如<audio>和<video>标签。

（1）取消了一些过时的标签

取消的标签包括纯粹显示效果的标签，如<font>和<center>，它们已经被CSS取代。HTML5吸取了XHTML2的一些建议，包括一些用来改善文档结构的功能，例如，新的HTML标签<header>、<footer>、<dialog>、<aside>、<figure>等的使用使内容创作者能更加简便地创建文档，而之前的开发者在实现这些功能时一般都是使用<div>。

（2）将内容和展示分离

<b>和<i>标签依然保留，但它们的意义已经和之前有所不同。这些标签的意义只是为了将一段文字标识出来，而不是为了为它们设置粗体或斜体式样。<u>、<font>、<center>、<strike>这些标签则被完全去掉了。

（3）一些全新的表单输入对象

其他的对象包括日期、URL、E-mail地址，增加了对非拉丁字符的支持。HTML5还引入了微数据。这种使用机器可以识别的标签标注内容的方法，使语义Web的处理更为简单。总体来说，这些与结构有关的改进使内容创建者可以创建更干净、更容易管理的网页，而这样的网页对搜索引擎、读屏软件等更为友好。

（4）全新的、更合理的标签

多媒体对象将不再全部绑定在object或embed标签中，而是视频有视频的标签，音频有音频的标签。

（5）本地数据库

这个功能将内嵌一个本地的SQL数据库，以优化交互式搜索、缓存及索引功能。同时，那些离线Web程序也将因此获益匪浅。

（6）Canvas对象

Canvas对象将给浏览器带来直接绘制矢量图的能力。这意味着用户可以脱离Flash和Silverlight，直接在浏览器中显示图形或动画。

（7）浏览器中的真正程序

此功能将提供API实现浏览器内的编辑与拖放，以及各种图形用户界面的能力。内容修饰标签将被剔除，而使用CSS。

另外，HTML5取代Flash在移动设备中的地位，强化了Web页的表现性，增加了本地数据库。

5. HTML5新增的标签和废除的标签

HTML5中，新增加了多个标签元素，同时也废除了多个标签元素。

（1）HTML5新增的标签

HTML5新增的标签及其功能说明如表1-9所示。

表1-9　HTML5新增的标签及其功能说明

（2）HTML5废除的标签

HTML5废除的标签如表1-10所示。

表1-10　HTML5废除的标签

6. HTML5新增和废除的标签属性

HTML5中，在新增和废除很多标签元素的同时，也增加和废除了很多属性。

（1）HTML5新增的属性

HTML5新增的属性列表如表1-11所示。

表1-11　HTML5新增的属性列表

（2）HTML5废除的属性

HTML4中的一些属性在HTML5中不再被使用，这些属性被其他属性或其他方式替代，如表1-12所示。

表1-12　HTML5废除的属性列表

7. HTML5语义和结构标签实例代码探析

新建example01.html网页文件，该网页的浏览效果如图1-2所示。

图1-2　example01.html网页的浏览效果

网页example01.html对应的HTML代码如表1-13所示。

表1-13　网页example01.html对应的HTML代码

下面对表1-13中的HTML代码的结构及组成进行解析。

（1）HTML5的文档声明

创建example01.html网页文件，如果使用的网页编写工具支持HTML5文件类型，那么，应该生成如下的HTML5模板：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
</body>
</html>

58178-00-028-a 说明

第一行<!doctype html>是HTML5对文档类型的简化描述。文档类型的作用是：为验证器提供其采用何种规则去验证代码的依据；强制浏览器以标准模式渲染页面。

（2）头部

网页example01.html的头部代码由<header>标签实现，如表1-13中的18～20行所示。

<header>标签不能和h1、h2、h3这些标题混为一谈。<header>元素可以是从公司Logo到搜索框在内的各式各样的内容。同一个页面可以包含多个<header>元素，每个独立的区块或文章都可以含有自己的<header>。

（3）尾部

网页example01.html的尾部由<footer>标签实现，如表1-13中的39～41行所示。

<footer>元素位于页面或者区块的尾部，用法和<header>基本一样，也会包含其他元素。

（4）导航

网页example01.html的导航由<nav>标签实现，如表1-13中的22～29行所示。

网页导航对于一个网页来说至关重要。快速、方便的导航是留住访客所必需的。导航可以被包含在<header>、<footer>或者其他区块中，一个页面可以有多个导航。

（5）区块和文章

网页example01.html的区块和文章由<section>和<article>标签实现，如表1-13中的21～38行所示。

<section>元素将页面的内容合理归类与布局，可以看到<article>元素还可以包含很多元素。

（6）旁白和侧边栏

网页example01.html的侧边栏由<aside>实现，如表1-13中的34～36行所示。

<aside>标签可实现旁白，一般加在<article>中使用。<aside>元素是主内容的附加信息，通常显示成侧边栏或一些补充内容。侧边栏不一定是旁白，可以看作是右面的一个区域，包含链接，可用<section>和<nav>实现。

8. HTML5中典型的标记方法

（1）内容类型

HTML5文件的扩展名仍然为“.html”或者“.htm”，内容类型（ContentType）仍然为“text/html”。

（2）doctype声明

在HTML5中，使用<!doctype html>声明。该声明方式适用于所有版本的HTML。HTML5中不可以使用版本声明。

（3）指定字符编码

HTML5中的字符编码推荐使用UTF-8。HTML5中可以使用<meta>元素直接追加charset属性的方式来指定字符编码：<meta charset="utf-8">。

在HTML4中使用的<meta http-equiv="Content-Type" content="text/html;charset=utf-8">继续有效，但不能同时混合使用两种方式。

（4）具有boolean值的属性

当只写属性而不指定属性值时表示属性为true，也可以将其他的属性名设定为属性值或将空字符串设定为属性值。如果想要将属性值设置为false，则可以不使用该属性。

（5）引号

指定属性时属性值两边既可以用双引号，也可以用单引号。当属性值不包括空字符串、小于号、大于号、等号、单引号、双引号等字符时，属性两边的引号可以省略。例如<input type="text">、<input type='text'>、<input type=text>。

9. HTML5主要的语义和结构标签说明

HTML5提供新的元素来创建更好的页面结构。

（1）<header>标签

<header>标签用于定义文档的头部区域，表示页面中一个内容区块或整个页面的标题。

（2）<section>标签

<section>标签用于定义文档中的节（section、区段），表示页面中的一个内容区块，如章节、页眉、页脚或页面的其他部分，可以和<h1>、<h2>等元素结合起来使用，表示文档结构。

（3）<footer>标签

<footer>标签用于定义文档或节的页脚部分，表示整个页面或页面中一个内容区块的脚注，通常包含文档的作者、版权信息、使用条款链接、联系信息等。可以在一个文档中使用多个<footer>元素，<footer>元素内的联系信息应该位于<address>标签中。

（4）<article>标签

<article>标签用于定义页面中一块与上下文不相关的独立内容，如一篇文章。<article>元素的潜在来源可能有论坛帖子、报纸文章、博客条目、用户评论等。

（5）<aside>标签

<aside>标签用于定义页面内容之外的内容，表示article元素内容之外的与article元素内容相关的辅助信息。

（6）<hgroup>标签

<hgroup>标签用于对整个页面或页面中的一个内容区块的标题进行组合。

10. <!doctype>声明的用法

<!doctype>声明必须是HTML文档的第一行，位于<html>标签之前。<!doctype>声明不是HTML标签，它是指示Web浏览器关于页面应使用哪个HTML版本进行编写的指令。

在HTML 4.01中，<!doctype>声明引用DTD（Document Type Definition，文档类型定义），因为HTML 4.01基于SGML。DTD规定了标签语言的规则，这样浏览器才能正确地呈现内容。HTML5不基于SGML，所以不需要引用DTD。在HTML 4.01中有3种<!doctype>声明。在HTML5中只有一种——<!doctype html>。

<!doctype>声明没有结束标记，并且对大小写不敏感。应始终向HTML文档添加<!doctype>声明，这样浏览器才能获知文档类型。

11. HTML的注释标签的用法

网页中HTML的注释标签使用实例如下：

<!--这是一段注释，注释不会在浏览器中显示-->

所有浏览器都支持注释标签，注释标签用于在源代码中插入注释，注释不会显示在浏览器中。使用注释对代码进行解释有助于以后对代码的编辑。这在编写了大量代码时尤其有用。

使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯，这样就不会把脚本显示为纯文本。观察以下JavaScript代码：

<script type="text/javascript">
<!--    function displayMsg()
    {
      alert("Hello World!")
    }
//-->
</script>

注释行结尾处的两条斜杠（//）是JavaScript注释符号，这样可以避免JavaScript执行“-->”标签。

12. 如何插入样式表

浏览网页时，当浏览器读到一个样式表时，浏览器会根据它来格式化HTML文档。插入样式表的方法有以下3种。

（1）外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。

<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

浏览器会从文件外部样式表mystyle.css中读到样式声明，并根据它来格式文档。外部样式表可以在任何文本编辑器中进行编辑，样式表应该以.css扩展名进行保存。外部样式表文件不能包含任何的HTML标签，下面是一个样式表文件的实例：

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

58178-00-030-a 注意

不要在属性值与单位之间留有空格。假如使用“margin-left: 20 px”而不是“margin-left: 20px”，则它仅在IE6中有效，但是在Mozilla/Firefox或Netscape中却无法正常工作。

（2）内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用<style>标签在文档头部定义内部样式表，示例代码如下所示：

<head>
  <style type="text/css">
       hr {color: sienna;}
       p {margin-left: 20px;}
       body {background-image: url("images/back40.gif");}
  </style>
</head>

（3）内联样式

由于内联样式要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势，所以应慎用这种方法，当样式仅需要在一个元素上应用一次时可以使用内联样式。

要使用内联样式，需要在相关的标签内使用样式（style）属性。style属性可以包含任何CSS属性。以下代码展示了如何改变段落的颜色和左外边距：

<p style="color: sienna; margin-left:20px">
    This is a paragraph
</p>

13. 网页中的多重样式

如果网页中的某些属性在不同的样式表中被同样的选择器定义，那么属性值将被继承过来。

例如，外部样式表拥有针对h3选择器的3个属性，代码如下：

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

而内部样式表拥有针对h3选择器的两个属性，代码如下：

h3 {
  text-align: right;
  font-size: 20pt;
  }

假如拥有内部样式表的这个页面同时与外部样式表链接，那么h3得到的样式是：

color: red; text-align: right; font-size: 20pt;

即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

14. 标记-moz-、-webkit-、-o-和-ms-的解释

（1）-moz- ：以-moz-开头的样式代表Firefox浏览器特有的属性，只有WebKit浏览器可以解析。moz是Mozilla的缩写。

（2）-webkit- ：以-webkit-开头的样式代表WebKit浏览器特有的属性，只有WebKit浏览器可以解析。WebKit是一个开源的浏览器引擎，Chrome、Safari浏览器即采用WebKit内核。

（3）-o- ：以-o-开头的样式代表Opera浏览器特有的属性，只有Opera浏览器可以解析。

（4）-ms- ：以-ms-开头的样式代表IE浏览器特有的属性，只有IE浏览器可以解析。

本周热推：

药物制剂设备正文包装概论（高职）构建中小型企业网络数字电子技术基础（第2版）电动汽车结构原理与维修