HTML+CSS+DIV网页设计与布局(第2版)(微课版)(txt+pdf+epub+mobi电子书下载)

作者：聂斌 张明遥

出版社：人民邮电出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

HTML+CSS+DIV网页设计与布局(第2版)(微课版)试读：

前言

随着计算机网络的飞速发展和日益普及，越来越多的人已经不满足于仅仅在Internet上浏览和查找信息，而是希望更深入地参与到其中。现在，无论是企业还是个人，拥有自己的网站已经成为一种潮流，因此网页设计与网站建设作为一项知识技能越来越受到重视。HTML（超文本标记语言）是构成网页最基本的元素。虽然目前不断产生了许多新技术（如移动网页、APP等），但是它们无一例外都是建立在HTML基础上的，因此深入学习网页设计当然应从HTML入手。随着Web 2.0的发展，使用HTML和CSS进行网页设计和布局越来越重要，而且这也会是未来发展的趋势。

本书以HTML为基础，紧紧围绕最新的CSS技术精髓深入展开讲解，以清晰的思路、精练的实例使读者快速入门，并逐步掌握网页设计的知识。本书注重基础理论与实际应用开发相结合，突出应用网页开发方法的介绍，所选实例都具有较强的概括性和实际应用价值。

本书是作者根据多年从事网络程序设计工作和讲授计算机专业相关课程的教学实践，在已编写的多部讲义和教材的基础上编写而成的；内容充实，循序渐进，选材上注重系统性、先进性和实用性；注重实践性，精选大量例题，所有例题均已在Dreamweaver CS6上调试通过，可直接引用，读者也可按照书中提示步骤自己动手完成。

Web的发展日新月异，我们的第1版也慢慢变老了，第2版基于第1版的技术细节，在内容和形式上进行了更新，突出了几个当下流行的学习模式：（1）配套视频讲解，让读者可以直观地看到网页的实际效果。（2）代码添加行号，标注关键语句，老师讲解时可以更详细地指出网页的关键点所在。（3）内容上去掉过时的素材，替换为当下流行的内容。

本书分为4篇。第一篇（第1章）为网站和网页基础知识，让读者认识什么是网站开发；第二篇（第2～7章）为HTML学习篇，内容包括网页文字和图片，超链接，表格，多媒体、滚动字幕和列表，表单，框架；第三篇（第8～12章）为CSS学习篇，内容包括认识CSS，设置文字和文本样式，设置背景、边框、边距和补白，设置表格、列表和滚动条样式以及CSS滤镜；第四篇（第13～15章）为布局学习篇，内容包括控制元素布局、网页布局与设计技巧、网页布局综合案例。

由于编者水平有限，加之时间仓促，书中难免存在错误和疏漏之处，希望广大读者批评指正。编者2018年7月第一篇网站和网页第1章认识网站开发

上过网、浏览过网页的人很多，但并不是所有人都知道什么是网络、网页、网站。从现在开始，让我们步入这个网络世界，了解什么是Internet、Web、URL、HTML，以及如何开发网站。本章先了解什么是网站开发。1.1 网站开发概述

网站是按照一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。而网页是指在浏览器上登录一个网站后，看到的浏览器上的页面。网页是由文字、图片、声音等多媒体通过超链接的方式有机地组合起来的。因此，学习网站开发的基础就是学习网页制作。1.1.1 网页概述

网页是用HTML编写的一种文件，将这种文件放在Web服务器上可以让在互联网上的其他用户浏览。比如访问百度网站，看到的就是百度网站的网页。网页也是通过HTTP来传递给浏览者的。网站是网页的集合，多个网页可以共同组成一个网站。网站显示的第一个网页称为首页。1.1.2 网页构成元素

网页的构成元素很丰富，可以是文字，也可以是图片，甚至可以将一些多媒体文件（如音频、视频等）插入网页里。网页构成元素如下。1. 文本

网页信息主要以文本为主，这里指的文本是文本字，而非图片中的文字。在网页中可以通过字体、大小、颜色、底纹、边框等选项来设置文本的属性。中文文字常用宋体、9磅或12像素大小、黑色即可，颜色不要太杂乱。大段文本文字的排列，建议参考一些优秀杂志或报纸的样式。2. 图像

图像可以使网页丰富多彩。网页支持的图像格式包括JPG、GIF和PNG等。常用图形如下。

· Logo标志，是代表网站形象或栏目内容的标志性图片，一般在网页左上角。

· Banner广告，用于宣传站内某个栏目或者活动的广告，一般以GIF动画形式为主。

· 图标，主要用于导航，在网页中具有重要的作用，相当于路标。

· 背景图，用来装饰和美化网页。3. 超链接

超链接是网站的“灵魂”，它是从一个网页指向另一个目的端的链接，如指向另一个网页或者相同网页上的不同位置。超链接可以指向一幅图片、一个电子邮件地址、一个文件、一个程序或者本页中的其他位置。超链接的载体可以是文本、图片或者Flash动画等。超链接广泛存在于网页的图片和文字中，提供与图片和文字相关内容的链接，在超链接上单击，即可链接到相应地址（URL）的网页。鼠标指针指向有链接的地方，默认会变成小手形状。可以说，超链接是网页的最大特色。4. 表格

表格在网页中的作用非常大，它可以用来布局网页，设计各种精美的网页效果，也可以用来组织和显示数据。5. 表单

表单主要用来收集用户信息，实现浏览者与服务器之间的信息交互。6. 导航条

导航条是一组超链接，方便用户访问网站内部各个栏目。导航条可以是文字，也可以是图片，还可以使用Flash来制作。导航条可以显示多级菜单和下拉菜单效果。7. 其他元素

除了上面几种网页基本元素外，在页面中可能还包括GIF动画、Flash动画、音频、视频、框架等。1.1.3 网站建设流程

在创建网站之前首先要了解网站建设的基本流程，这样可以明确网站的目标和方向，从而提高效率。1. 网站需求分析

在建立网站时，首先要考虑客户的各种需求，并以此为基础建设网站项目。网站的需求分析一般包括以下几点。

· 了解相关行业的市场情况，如在网上了解公司开展业务的市场情况。

· 了解主要竞争对手的情况。

· 了解网站建设的目的，是宣传商品、进行电子商务，还是建立一个行业性网站。

· 了解用户的实际情况，明确用户需求。

· 进行市场调研，分析同类网站的优劣，并在此基础上形成自己网站的大体架构。2. 网站整体规划

良好的规划是创建成功网站的开始。在制作网页前，要规划好整个站点的风格、布局、服务对象等，并选择适合的服务器、语言脚本和数据库平台。

· 规划站点结构时，一般用文件夹保存文档。要明确站点的每个文件、文件夹及其存在的逻辑关系。

· 文件夹命名要合理，要做到“见其名知其意”。

· 如果是多人合作开发，还要规划好各自的内容，并注意统一风格，协调代码。3. 收集资料与素材

网站整体规划好后，就要根据规划的情况收集网页制作中可能用到的资料和素材，通常包括文字资料、图片素材、动画素材、视频素材等，并要将其分类保存。在收集资料时，要根据用户的需求搜集建站的资料。整理好资料后，要根据这些资料搜集必要的设计素材。4. 制作网页

一个网站往往包含很多网页，具体制作过程如下。

· 创建网页框架：在整体上布局页面，根据导航栏、主题按钮等将页面划分为几个区域。

· 制作导航栏：借助导航栏可以更加方便地浏览网站。

· 添加页面对象：分别编辑各个页面，将页面对象添加到网页的各个区域，并设置好格式。

· 设置链接：为页面的相应部分设置链接，这样，整个页面就整合起来了。5. 域名和服务器空间的申请

网站制作完成后，首先要注册一个属于自己的域名。有了域名之后，在世界的任何地方只要在浏览器上输入地址，就能看到网站上的内容。一个好的域名拥有巨大的商业价值。

有了域名之后，还要有空间来存放网站的内容，因此，还要租用服务器空间。6. 测试与发布网站

网站发布前要进行细致周密的测试，以保证正常浏览和使用。主要测试内容如下。

· 服务器的稳定性、安全性。

· 程序及数据库测试、网页兼容性测试，如浏览器、显示器。

· 检查文字、图片、链接是否有错误。7. 后期维护与网站推广

上传站点后，要定期对站点的内容进行更新与维护，更新与维护的内容如下。

· 服务器及相关软硬件的维护，评估可能出现的问题，制订响应时间。

· 数据库维护，有效利用数据是网站维护的重要内容，因此要重视数据库的维护。

· 内容的更新、调整等。

· 制订网站维护的相关规定，将网站维护制度化、规范化。1.1.4 网站开发软件

用于网页设计的工具软件很多，本书将以Adobe公司的Dreamweaver CS6为开发工具进行讲解，它也是最便于新手学习的软件之一。下面讲述Dreamweaver的使用方法。

打开Dreamweaver软件，会出现一个程序启动界面，如图1.1所示。页面分为3栏，第一栏为“打开最近的项目”，这里将呈现出之前打开过的历史页面。最下面的“打开…”用于打开文件夹，选择要打开的页面。第二栏为创建新项目，用于选择新建页面的语言环境。因为本书讲述的是HTML方面的内容，所以应该选择第一个HTML。第三栏为“主要功能”，用于介绍Dreamweaver软件自带的功能。图1.1　Dreamweaver程序启动界面

在“新建”选项栏中选择HTML并单击打开，进入程序工作页面，如图1.2所示。在这个页面中可以采用4种视图方式：代码视图、拆分视图、设计视图、实时视图。设计师通常会选择代码视图来编写代码，然后用设计视图来查看代码效果，而不是直接选择设计视图，用自带的插件来完成页面的制作。因为使用设计视图设计的页面，往往会产生很多的废代码和不符合Web标准的代码。图1.2　程序工作页面

打开程序工作页面后，就可以在页面中编写HTML代码了。1.2 HTML基本概念

通过浏览器访问的网站，通常是基于HTML形成的。因此要想学习网站开发，首先需要了解什么是HTML以及HTML的基本结构。1.2.1 HTML简介

超文本标记语言（Hypertext Marked Language，HTML）是一种用来制作超文本文件的简单标记语言。用HTML编写的超文本文件称为HTML文件，它能独立于各种操作系统平台。自1990年以来，HTML就被全球广域网用作其信息表示语言。

超文本文件中可以包含图片、声音、动画、影视等内容，而不仅仅是文本信息。另外，超文本文件还可以通过超链接从一个页面跳转到另外一个页面，从而实现与世界各地的主机相连接。1.2.2 HTML基本结构

HTML文件包括文件头和文件体两部分。文件头中主要是对这个HTML文件进行一些必要的定义，文件体中的内容才是真正要显示的各种文件信息。一个HTML文件包含各种HTML元素，如图片、段落、表格等。这些HTML元素在页面中需要使用标记来分隔，因此也可以说HTML文件就是由各种HTML元素和标记组成的。

一般情况下，HTML文件的结构如下。01 HTML 文件的开始标记，表示这是一个 HTML 文件02 文件头的开始标记，这对标记之间的是头部信息 03 头部信息 文件头的内容，也叫作文件的头部信息 04 文件头的结束标记 05 文件体开始标记 06 文件主体，正文部分 文件的主体部分，是文件真正要显示的文件信息 07 文件体结束标记 08 HTML 文件的结束标记

由这段HTML结构代码可以看出，标记在最外层，在这对标记之内的就是HTML文件的全部内容。注意有些页面中会省略标记，这是因为HTML或HTM文件被Web浏览器默认意 为是HTML文件。另外，当HTML文件中不需要头部信息时，可以省略文件头标记。而标记一般不能省略，它表示正文内容的开始。1.3 一个简单的HTML实例

前面简单介绍了HTML文件的概念和基本结构，下面通过一个简单的HTML实例来引导读者学习HTML标记，了解HTML文件的创建和运行方式。1.3.1 编写HTML代码

HTML文件对编写工具的要求并不高，可以在Dreamweaver中实现，也可以在最简单的文本编辑工具中实现。下面使用记事本编写第一个HTML文件，具体的步骤如下。（1）单击“开始”|“程序”|“附件”|“记事本”菜单命令，打开记事本，如图1.3所示。图1.3　空白的记事本（2）在记事本中直接输入如下内容。01 02 03 04 05 06

第一个 HTML 文件

下面跟我进入 HTML 的领域

来领略这个奇妙而多彩的世界！！

第6行用

标记设置字号显示文字“第一个HTML文件”并居中；第7行显示一条水平线，宽度为页面宽度的70％；第8行与第9行显示相应的文字。（3）输入代码以后，单击“文件”|“保存”菜单命令，打开“另存为”对话框，如图1.4所示。图1.4　保存代码（4）在“另存为”对话框右侧设置文件保存的位置，这里设置为F:/HTML+CSS/源文件/01目录（读者也可以设置在其他路径）。（5）在“保存类型”下拉列表中设置文件的类型为“所有文件”，在“文件名”文本框中设置文件的名称为1.1.html，然后单击“保存”按钮保存文件。（6）关闭记事本程序，回到文件保存的目录下，可以看到保存的文件图标，如图1.5所示。图1.5　保存的HTML文件1.3.2 运行HTML文件查看效果

编写好文件的源代码并保存后，就可以通过IE浏览器来查看HTML文件的页面效果了。双击文件的图标打开该文件，其效果如图1.6所示。图1.6　实例运行结果

在这段代码中包括如下几个元素。

· HTML的基本标记：包括文件类型标记、文件头标记和文件主体标记。

· HTML的标题：一般通过页面标题来区分不同的页面，这里设置为“一个简单的HTML实例”，需要使用

· HTML的页面内容：在页面中插入了3种HTML元素，分别是一个二级标题、一条水平线以及两段文字。这3种元素使用的标记不同，显示的效果也不同，这在后面的章节中还将详细介绍，这里不再赘述。1.4 HTML基本标记

学习HTML的标记要从最基本的标记开始。HTML文件包含的基本标记主要包括文件类型标记（也称为HTML标记）、HTML头标记、页面标题以及HTML主体标记。1.4.1 文件类型标记

文件类型标记是双标记，用来标识该文件是HTML类型的文件，位于HTML文件代码的最外层，也就是说，这一对标记必须放置在代码的开头和结尾，其语法如下。01 02

HTML标记是最基本的标记，它标识这段代码是用HTML描述的。1.4.2 HTML头标记

HTML头标记是以为开始标记，以为结束标记的双标记。它用于包含当前文件的相关信息，一般包括标题、基底信息、元信息等。一般情况下，CSS样式也定义在头元素中。

通常文件头标记之间的内容被称为HTML的头部。定义在HTML头部的内容一般不会在网页上直接显示，而是通过另外的方式起作用。例如，定义在HTML头部的标题不会显示在页面中，但是会在页面的标题栏中出现。

文件的头部通常包含表1.1所示的部分或全部标记。当然，这些标记也可以省略。表1.1　HTML头部包含的标记

表1-1的这些标记中，

HTML主体标记是以为开始标记、以为结束标记的双标记。它用于包含当前文件的页面内容。也就是说，在该标记之间的内容是页面中真正要显示的内容，包括文字、图片、表格等。

在标记中可以包含多种属性，用于设置页面的背景、字体等属性。这些属性在后面的章节会详细介绍，这里不多说明。1.4.4 页面标题

页面标题标记是一个特殊的标记，它设置的内容并不显示在页面中，而是显示在浏览器的标题栏中，用来说明文件的用途。因此，在设置该标记时，要使其能够体现整个页面的主题。一般情况下，每个HTML页面都应该有标题。

在HTML文件中，标题信息设置在页面的头部，也就是位于与标记之间。标题标记以结束，是一个双标记，成对出现，其语法如下。

在HTML文件中，页面的标题只能有一个，用于帮助浏览者更好地识别页面。下面通过代码1.2.html显示页面标题的效果。01 02 03 04 05 06 07

其中，第3行位于标记之间的内容就是页面的标题，即本页面的标题就是“HTML基本标记”。将这段代码保存后，在IE浏览器中打开，其运行效果如图1.7所示。图1.7　设置页面标题

可以看出，设置在文件头部的标题没有出现在页面中，而是出现在了浏览器的标题栏中。1.5 HTML页面的元信息META

通过上一节的学习，读者已经知道了HTML的基本标记。除此之外，HTML页面的元信息也十分有用。META元素提供的信息对于浏览用户是不可见的，一般用于定义页面信息的名称、关键字、作者等。在HTML页面中，一个META的标签内就是一个META元素的内容，而在一个HTML头页面中可以有多个META元素。1.5.1 页面的关键字

KEYWORDS的中文意思是“关键字”，用于说明网页包含的关键字等信息，提高被搜索引擎搜索到的概率。其语法格式如下。

CONTENT属性的值为用户设置的具体关键字。注意一般可设置多个关键字，它们之间用英文半角逗号分开。由于很多搜索引擎限制关键字的数量，所以关键字要简洁精炼。1.5.2 页面的对外说明

DESCRIPTION的中文意思是“描述”，用于描述网页的主要内容、主题等，合理设置也可以提高被搜索引擎搜索到的概率。其语法格式如下。

CONTENT属性的值为用户设置的页面具体描述的内容。CONTENT属性的值最多可以包括1 024个字符，但因为搜索引擎一般只显示大约前175个字符，所以描述内容还是短小、简洁为好。1.5.3 网页的作者信息

AUTHOR的中文意思是“作者”，用于设置网站作者的名称，在比较专业的网站页面上经常用到。其语法格式如下。

CONTENT属性的值为用户设置的作者名称。1.5.4 网页的开发语言

CONTENT-TYPE的中文意思为“内容类别”，用于设置页面的类别和语言字符集。其语法格式如下。

CONTENT属性的值代表页面采用HTML代码输出，字符集为GB2312（简体中文）。这也是制作网页最常用的值，不过在日趋国际化的网站开发领域，为了字符集统一，建议CHARSET值采用UTF-8。说明字符集是比较复杂的知识领域，读者初学时，CHARSET设置为GB2312即可。1.5.5 网页的定时跳转

REFRESH的中文意思为“刷新”，用于设置多长时间网页自己刷新一次，或者过一段时间自动跳转到其他页面，其语法格式如下。

以上代码中，CONTENT属性的值代表页面自动刷新的时间间隔为5s。

另一种编写格式如下。

CONTENT属性的值代表30s后，页面跳转到www.google.com网站。1.6 小结

本章主要介绍了网站开发以及HTML的基本概念，让读者对网站开发有总体的了解；然后通过一个实例展现了HTML文件包含的基本内容，以及不同标记显示效果，让读者对HTML有直观的认识。本章还介绍了HTML文件的基本标记，包括文件类型标记、HTML头标记、HTML主体标记和页面标题。可以说，这些标记是HTML文件不可缺少的。本章习题

1. 网站构成的基本要素有_____、_____、_____、_____、_____、_____6种。

2. 网站建设流程有_____、_____、_____、_____、_____、_____、_____7步。

3. 文件类型标记正确的是_____。A. B. C.

4. 下面不属于文件头标记的是_____。A.

5. HTML的基本结构是什么？上机指导

本章带领读者了解了网站开发、HTML基本概念、HTML基本标记以及元信息META等。这些内容是下一步学习复杂的HTML的基础。本节将通过上机操作，巩固本章所学的知识点。实验一实验内容

在浏览器中查看一个网页的源代码。实验目的

巩固知识点——查看HTML的基本结构，了解其中的HTML标记内容。实现思路

打开浏览器，在地址栏中输入百度首页的地址http://www.baidu.com，进入页面后，在页面中单击鼠标右键，选择“查看源文件”命令，即可查看百度首页的源代码。实验二实验内容

使用记事本或者其他文本编辑工具，手动输入一个简单的网页，编写一个包含头、标题、主体三部分的网页的HTML代码。实验目的

巩固知识点——了解一个普通HTML文件包含的头、标题、主体三部分内容。实现思路

打开记事本，在其中输入以下代码。01 02 03 04 05 06 文件主体，正文部分 07 08

单击“文件”|“另存为”命令，在保存时，文件类型选择“所有类型”，然后输入文件名，注意扩展名为htm或者html。实验三实验内容

熟练使用元信息，根据不同要求为页面设置相应的元信息，设置实验二的网页语言为中文。实验目的

巩固知识点——充分发挥标签的功能，为页面设置语言。实现思路

打开实验二的源代码，在其中的头部，即与之间加入以下内容。

然后保存源代码，即可将该网页的语言设置为中文。第二篇HTML学习篇第2章网页文字和图片

文字是设计网页的基础，而图片则使网页的内容更加丰富。使用HTML代码编辑网页文字和图片可以达到Word软件中的设计文档几乎一样的效果。当然，与Word软件比较起来，使用标签设计网页文字和图片不如使用菜单设计Word文档方便，但正是网页的这种标签属性，使网页具有跨平台的特性，可以在任何一种平台上显示。2.1 文字格式

文字格式主要是用一些HTML元素来标记文本的方式，用来更改文字的大小、字体、颜色等属性，还能为文本增加如粗体、斜体、上标、下标等修饰效果。2.1.1 设置文字大小

在HTML中，元素可以用来显示文字的属性，包括文字的大小、颜色、字体等。其中设置文字大小的属性为SIZE，其语法格式如下。文字

其中n的有效范围是数字1～7。【示例2-1】请看下面的例子，注意加粗的代码。01 02 03 04 05 06 这是默认的文字大小
07 1号字体大小
08 2号字体大小
09 3号字体大小
10 4号字体大小
11 5号字体大小
12 6号字体大小
13 7号字体大小
14 15

第7～13行分别为文字内容设置字号为1～7号。

示例2-1运行效果如图2.1所示。从图2.1中可以看出，SIZE属性的值越大，在浏览器中显示出来的文字就越大。当然，SIZE属性的值不可能无限大，其有限范围为1～7。如果大于7，则显示的文字大小与SIZE等于7的文字大小相同；如果小于1，则显示的文字大小与SIZE等于1的文字大小相同。图2.1　设置文字大小运行效果2.1.2 设置字体

文字可以设置多种字体，中文的有宋体、仿宋、黑体等，英文字体有Arial、Times New Roman等，为了保证网页的通用性，HTML的早期版本是不允许为文字指定字体的，从HTML 3.2版本开始，可以为网页中的文字指定不同的字体，使网页的表现形式更为丰富。1. 设置网页字体

设置文字字体使用标签的FACE属性，其语法格式如下。文字

其中FACE属性值为字体的名称。要想知道自己计算机中安装了什么字体，可以在操作系统所在盘的Windows\Fonts目录下看到，如图2.2所示，在“预览、删除或者显示和隐藏计算机上安装的字体”栏下的都是可用的字体。图2.2　计算机上安装的字体【示例2-2】设置字体，注意加粗的代码。01 02 03 04 05 06 这是默认的字体
07 这是字体名为“宋体”的文字
08 这是字体名为“黑体”的文字
09 这是字体名为“仿宋”的文字
10 这是字体名为“楷体”的文字
11 这是字体名为“隶书”的文字
12 这是字体名为“华文行楷”的文字
13 Arial
14 Freestyle Script
15 Harlow Solid Italic
16 下面是一些好玩的字体：
17 Wingdings 1
18 Wingdings 2
19 Wingdings 3
20 21

第6～19行，使用标记的FACE属性来为文字设置不同的字体，其中第6行为默认字体，其他各行分别采用不同的字体来显示文字内容。

示例2-2运行效果如图2.3所示。从图2.3中可以看出，为FONT元素指定不同的FACE属性值之后，在浏览器中可以显示不同的字体。图2.3　设置字体运行效果2. 设置浏览器默认字体

需要注意的是，在示例2-2中显示的字体在设计者的计算机上可以正常浏览，但是换成在用户的计算机上就不一定可以正常浏览了。例如，在该文件中指定了“华文行楷”字体，如果读者的计算机中没有安装这种字体，浏览器就会用默认的字体来显示这种字体。

在Internet Explorer浏览器中设置默认字体的方法如下。（1）启动Internet Explorer浏览器，单击菜单栏中的“工具”|“Internet选项”命令，弹出图2.4所示的“Internet选项”对话框。图2.4　“Internet选项”对话框（2）选择“常规”选项卡，然后单击“字体”按钮。（3）弹出图2.5所示的“字体”对话框，在该对话框中可以设置浏览器的默认字体。图2.5　“字体”对话框注意因为无法确认访问网页的浏览者的计算机里都会安装什么字体，所以在设计网页时，最好不要使用不常用的字体，尽量指定宋体、楷体等一般计算机都会默认安装的字体。2.1.3 设置字体颜色

如果没有设置网页文字字体的颜色，那么这个网页就是黑白的，失去了其缤纷的色彩。使用元素的COLOR属性可以为文字设置不同的颜色，其语法格式如下。文字

颜色可以有两种表示方法：颜色名称与RGB颜色数值。颜色名称就是类似RED、BLUE等颜色的英文名。RGB颜色是由红色、绿色、蓝色的组合来指定的一种颜色，任何一种颜色都可以用0～255的一个数值表示，但必须使用十六进制的数字来表示这些组合。例如，一种颜色的RGB代码为“#FFC0CB”，就代表是用强度为FF（也就是255）的红色、强度为C0的绿色与强度为CB的蓝色混合成的颜色，也就是粉红色。注意使用RGB颜色，必须在十六进制组合前加上“#”字符。

几乎所有浏览器都能识别以下16种预定义的颜色：Red（红色）、Yellow（黄色）、Blue（蓝色）、Navy（深蓝色）、Green（绿色）、Lime（浅绿色）、Aqua（碧绿色）、Olive（橄榄绿）、Black（黑色）、Gray（灰色）、Silver（银色）、Maroon（栗色）、Purple（紫色）、Fuchsia（紫红色）、Teal（深青色）和White（白色）。而Internet Explorer浏览器可以识别更多的颜色单词，表2.1列出了Internet Explorer浏览器能识别的颜色单词。表2.1　Internet Explorer浏览器能识别的颜色单词【示例2-3】设置文字字体颜色。01 02 03 04 05 06 以下是预定义的十六种颜色：
07

第7～39行在表格中显示不同颜色的文字内容，其中使用了3FONT标记的COLOR属性。示例2-3运行结果如图2.6所示。图2.6　设置字体颜色运行结果注意虽然可以用颜色名称来代替RGB颜色，但是并不是所有的浏览器都可以识别这些英文名称，因此还是建议使用RGB颜色值。2.1.4 加粗与斜体

通常在处理文字时，都会对比较重要的内容使用加粗、斜体来引起读者的注意。在网页上同样可以使用加粗与斜体来达到相同的效果。

在HTML元素中，可以用元素来加粗文字，用元素来使文字倾斜。除了元素与元素之外，还可以使用元素来加粗文字，使用元素来使文字倾斜。设置加粗与斜体的语法格式如下。加粗的文字 倾斜的文字 加粗的文字 倾斜的文字 【示例2-4】设置文字为加粗和斜体。01 02 03 04 05 06 07 这是四号文字大小
08 这是使用B 元素加粗的四号文字
09 这是使用I 元素倾斜的四号文字
10 这是使用STRONG 元素加粗的四号文字
11 这是使用EM元素倾斜的四号文字
12 这是加大的四号文字
13 14 15

第8～12行分别采用特殊标记来使字体显示相应的特殊效果，如加粗、斜体等。示例2-4的运行效果如图2.7所示。从图2.7中可以看出，使用元素与元素加粗文字没有什么区别，使用元素与元素使文字倾斜也没有什么区别。图2.7　加粗与斜体运行结果注意B元素与BIG元素的区别是：BIG元素是将文字加大，并不变粗；而B元素只是让文字变粗，并不加大。2.1.5 下画线与删除线

有些时候希望文字带下画线显示，例如可以使用下画线元素突出显示某些说明文字。删除线一般在修改文章时常常用到，表示原来的这部分文字被删除了。1. 被反对使用的元素

在HTML的早期版本中，使用元素来标注带有删除线的文字，使用元素来标注带有下画线的文字。不过元素与元素都是在HTML 4以上版本中被反对的元素。所谓“被反对”，是指不希望再使用的元素，被反对的原因在后继章节里还会介绍。

虽然元素与元素是被反对的元素，但是大多浏览器还是支持该元素，而且笔者相信在将来很长一段时间里，浏览器也不会取消对这些反对元素的支持，因此读者可以放心地使用这些元素。2. 被赞成使用的元素

从HTML 4.0版本开始，正式使用了两个新元素：元素（删除线）和元素（插入线），用来替代元素与元素，不过它们在浏览器中的显示效果都是一样的。

删除线与下画线元素的语法格式如下。删除线 下画线 删除线 插入线【示例2-5】设置删除线和下画线，注意加粗的代码。01 02 03 04 05 06 删除线
07 下画线
08 删除线
09 插入线
10 11

第6～9行分别演示了两种不同的下画线与删除线标记的使用。示例2-5的运行效果如图2.8所示。图2.8　使用删除线和下画线运行效果注意标记可以简写为。2.1.6 上标与下标

在描述一些复杂的表达式，特别是一些数学公式时，经常会用到2上标和下标，如3的平方（3）。在HTML页面中，上标采用_{元素，下标采用^{元素。其语法格式如下。作为上标的文字作为下标的文字【示例2-6】设置上标和下标，注意加粗代码。01 02 03 04 05 06 07 水的分子式是：H2O
08 32等于9 09 10 11}}

第7行使用_{标记显示下标效果，第8行使用^{标记显示上标效果。示例2-6的运行效果如图2.9所示。图2.9　使用上标和下标的运行效果2.1.7 等宽字}}

等宽字体一般针对的是英文字体，所谓等宽，就是像打字机文本一样的字体，在默认情况下，这种字体是Courier字体。通常只有在显示计算机代码等情况下，才会使用等宽字体。HTML中的元素可以用来设置等宽字体。使用标记表明标注的文字为类似打印机文本（typewriter text）使用的等宽字体。TT元素的语法格式如下。英文文字

由于该内容比较简单，使用也很少，在此就不举例了。2.2 与文字排版相关的元素

与文字排版相关的元素包括文本缩进、段落、换行、段落居中等。一个好的网页，文字段落的设置是必不可少的，它可以使网页更加简洁和美观。2.2.1 文本缩进

文本缩进元素

主要用于设置文本的缩进效果，从而使页面的文字布局更加错落有致。文本缩进元素的语法格式如下。

需要进行缩排的文字

需要注意的是，文本缩进元素

可以嵌套使用，每使用一次，文本就缩进一次。【示例2-7】不同次数的缩进。01 02 03 04 05 06 在一个山区里，有一座大山，叫顶天山。山脚下有个小村子，村里的人家都是靠打猎过生活的。有一天，不知道是谁，在一块光滑的岩石上画了一只狐狸。 07

第一个人看到了，就说：“哈！这上面画的根本不像狐狸，倒像一只狼。”

08

这句话一传两传，传到另外一个人的嘴里，就变成这样说了：“有人说，顶天山上有一只狐狸，一下子变狼了。”

09

别人听了都问：“是真的吗？”

10

“是真的，好多人都在这样说。”

11 12

第6～10行演示了使用

来实现文本的缩行。示例2-7运行效果如图2.10所示，可以看出，使用文本缩进时，段落左右两侧都被缩进了。文本缩进元素可以嵌套使用，使用的元素越多，缩进的程度也越大。图2.10　文本缩进运行结果2.2.2 换行

HTML中的换行元素在前面的章节已经多次提到并使用过了。
元素就是用来对文字进行换行的。
元素没有结束标签，也就是说，一个
元素就是换一次行。

试读结束[说明：试读内容隐藏了图片]

下载完整电子书