Web开发技术——HTML、CSS、JavaScript(txt+pdf+epub+mobi电子书下载)

作者：赵振

出版社：机械工业出版社

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

Web开发技术——HTML、CSS、JavaScript试读：

前言

本书主要讲解了Web前端开发的相关知识，包括HTML、CSS和JavaScript等内容。

在讲解理论知识的基础上，本书更加重视应用实践，分3个层次来强化学生的实际动手能力：（1）每个知识点后都附有详细的示例demo小程序，以讲解知识点的实际应用；（2）每章结尾的实验要求学生综合应用本章知识点，完成一个较为复杂的任务。（3）以一个实际案例项目一以贯之。全书分为3部分（HTML、CSS及JavaScript）进行讲解。书中提供一个实际案例项目，在每一部分完成后，综合使用讲解的相关内容，对网站进行相应设计与优化；通过深入实践，让读者能够熟练掌握所学知识，并将它们应用到实际工作中；通过逐步的深入，学生可以深入理解每一部分相关知识在网页设计中的作用、技术进化和优势等，将Web前端开发技术串联成一个整体。

本书对各相关知识点进行了独到的讲解，尤其对一些重要的知识，例如，网页设计不仅要关注基本知识，还要考虑搜索引擎友好的相关知识介绍；对frame布局、table布局、CSS布局的纵向比较与分析；Ajax的相关知识及案例应用的讲解等。请读者在文中仔细品读，这里不再详述。

本书对章节名称（尤其是小节标题）、示例demo名称及示例demo中运行结果的描述力求目标明确、示意清晰，使读者也可以将本书当作一本工具书。读者在需要时，可按照相关章节、demo的名称迅速、方便地查到相关内容；并且在查看相关demo后，即可进行借鉴使用，甚至无需再看书中的知识介绍。

参加本书编写、设计工作的团队成员包括赵振、郝生武、王海红、高杨、周生昌、袁铭壕、李仲浩、解同磊、安仲辉、张鑫、王康、赵杰、范明勇、李福鑫、都姜帆、季金一、崔舒娅、杨红光、李泽、曹美。他们在梳理本书框架、方向的前提下，花费了大量的时间和精力，关注模糊、晦涩的细节，查阅了大量资料，做了大量实验，最终完成了本书的撰写。感动于团队所有人不畏困难、努力付出的精神，在此一并感谢！

本书配套提供所有的源代码。

由于时间仓促，书中难免存在不妥之处，敬请广大读者原谅，并提出宝贵意见。编者

第1章 HTML基础

在Internet上畅游时，通过浏览器所看到的网站是由HTML语言构成的。HTML语言可以将文字、图像、声音及表格等内容，按照一定规则在网络上进行展示。本章将主要介绍HTML的概念、特点、发展及常用开发工具等基础知识，在此基础上概要介绍如何构建第一张HTML网页。

1.1 HTML简介

HTML（Hyper Text Marked Language，超文本标记语言）是一种基于SGML（Standard Generalized Markup Language，标准通用标记语言）的，用来制作超文本文档的简单标记语言。简单来讲，HTML就是构建一套标记符号和语法规则，将所要显示的文字、图像和声音等要素按照一定的标准要求排放，形成一定的标题、段落和列表等单元。

HTML由Web的发明者Tim Berners-Lee和同事Daniel W.Connolly于1990年创立。自1990年以来，一直被用作WWW（World Wide Web，万维网）的信息表示语言，使用HTML语言描述的文件需要通过WWW浏览器显示出效果。2.HTML的特点

1）HTML不是一种编程语言，而是一种标记语言（Markup Language），由一套标记标签（Markup tag）组成并描述网页。

2）HTML文档非常容易创建，只需一个文本编辑器就可以完成。

3）通过HTML描述的文档，可包含出版在线的文档，其中包含标题、文本、表格、列表、超链接、图片、视频和音频等内容。

4）HTML文件存储量小，能够尽可能快地在网络环境下传输与显示。

5）HTML独立于操作系统平台，它能对多平台兼容，只需要一个浏览器，就能够在操作系统中浏览网页文件。

1.2 HTML开发工具简介

HTML文件可以直接使用文本编辑器（如记事本等）进行编写。编写完成后，将文本的扩展名改为.htm或.html，即成为一个HTML文件，可以使用浏览器打开该网页文件进行浏览。2.FrontPage

FrontPage是微软公司出品的一款网页制作入门级软件，“所见即所得”是其特点，该软件结合了设计、程式码和预览三种模式。2006年，微软公司宣布Microsoft Front Page将会被Microsoft Share Point Designer新产品替代。

Microsoft Office System 2007已经包含Microsoft Share Point Designer，其实现了多系统的单点访问。这些系统包括Microsoft Office System程序、商业智能和项目管理系统，以及现有的业务应用程序（包括第三方和行业专用的程序）。这不仅易于用户使用，还可以消除冗余解决方案的成本支出，可以从系统和报告中及时提取出相关的信息并加以重新利用。3.AdobeDreamweaver

Adobe Dreamweaver的中文名称为“梦想编织者”，是由美国MACROMEDIA公司开发的、集网页制作和管理网站于一身的所见即所得网页编辑器。在Dreamweaver CS4中新增的实时视图功能，可以使用户在真实的浏览器环境中设计网页，同时仍可以直接访问代码，所呈现的屏幕内容会立即反映出对代码所做的更改。4.Aptana

Aptana是一个非常强大、开源的、基于Eclipse的集成开发环境，支持HTML、JavaScript及CSS的编辑与开发。Aptana经常作为JavaScript的编辑器和调试器。其特点包括了代码语法错误提示、Aptana UI自定义和扩展、编码支持，以及跨平台等。5.其他

由于HTML编程工具可以仅仅是一个简单的文本编辑器，因此已有的大部分集成开发环境如Eclipse、.NET等都支持HTML编程开发。另外，对于本书后面将要学习的CSS和JavaScript，上述工具均适用。

1.3 第一张HTML网页

1.HTML标签

HTML标签用于定义HTML文档程序。

HTML标签由开始标签和结束标签组成。开始标签是被尖括号包围的元素名，结束标签是被尖括号包围的斜杠和元素名，如＜html＞、＜/html＞就是一对开始标签和结束标签。而某些HTML元素没有结束标签，如＜br/＞。

2.HTML元素

HTML元素是指从开始标签到结束标签内的所有内容。

如在＜p＞This is a paragraph＜/p＞这段代码中，从开始标签＜p＞到结束标签＜/p＞构成一个元素，这个元素拥有一个开始标签＜p＞，以及一个结束标签＜/p＞，元素内容是：This is a paragraph。某些HTML元素具有空内容。

大多数HTML元素可以嵌套使用。HTML文档就是由嵌套的HTML元素构成的，如下面的代码所示。

上述HTML文档由html、body、form、p及input等元素嵌套构成。

3.HTML属性

HTML标签可以拥有属性，属性提供了相关HTML元素更多的信息。

HTML属性总是在HTML元素的开始标签中设置，以名称/值对的形式出现，如元素＜a href="http：//www.baidu.com"＞baidu网站首页＜/a＞中的href属性的设置。1.3.2 HTML文档基本结构

HTML文档由标题、段落、表格和文本等各种嵌套的元素组成。下面是一个HTML文件的基本结构。

在上面的代码中，＜html＞＜/html＞标签对向浏览器标明了HTML文件开始和结束的位置，其中包括了head和body元素。HTML文档中所有的内容都应该在这两个标签之间。

＜head＞＜/head＞标签对标明了HTML文件的头部标记，在其中可以放置页面的标题、文档属性等内容，通常将这两个标签之间的内容统称为HTML的头部。

＜body＞＜/body＞标签对用来指明文档的主体区域，网页所要显示的内容都放在这个标签对内。1.3.3 创建HTML网页

在1.2节中，介绍了若干编辑HTML网页的工具，这里介绍使用记事本和Dreamweaver两种编辑HTML网页的方法。

1.使用记事本创建HTML网页

首先，创建一个记事本文件，打开后编写以下代码。【例1-1】 编写Hello World网页。

然后，在保存并关闭该文件后，将该文件的扩展名改为.htm或.html，这样网页就创建完成了。

2.使用Dreamweaver创建HTML网页

首先，启动Dreamweaver软件，在菜单栏中选择“文件”→“新建”命令，弹出如图1-1所示的“新建文档”对话框。图1-1 Dreamweaver“新建文档”对话框

在左侧的“类别”列表框中选择“基本页”选项，并在右侧相应的“基本页”列表框中选择HTML选项，然后点击“创建”按钮。这时，可以看到如图1-2所示的编辑界面。

其中，Dreamweaver已为用户搭建好了HTML文档的基本框架。这时可以向相应的元素内（如title、body）填入【例1-1】中的相应代码，然后保存即可。

打开使用上述任何一种方式创建好的网页后，运行效果如图1-3所示。图1-2 Dreamweaver编辑界面图1-3 Hello World网页运行效果

1.4 实验与练习

根据本章所学知识，练习使用记事本、Dreamweaver或其他HTML开发工具，构建一张基本的HTML网页，运行并查看其效果。

第2章 HTML基本标签

HTML基本标签是构成HTML网页的基本结构，是HTML网页的骨架，包括定义文档头部的＜head＞标签及定义文档主体部分的＜body＞标签。本章主要介绍这两个基本标签及其相应的属性。另外，还将讲解可以嵌入在＜head＞元素中使用的，用来定义标题的＜title＞标签及声明网页元信息的＜meta＞标签。可嵌入在＜body＞元素中的标签较多，它们将在后续章节中陆续介绍。

2.1 头部标签＜head＞

＜head＞标签用于定义文档的头部，是所有头部元素的容器，用于描述文档的各种属性信息。包含于＜head＞标签中的元素，可以指定网页的标题、申明使用的脚本语言、指示浏览器在哪里找到样式表，以及提供网页的元信息等。2.语法说明

＜head＞元素包含在＜html＞元素中，位于HTML文档的开始处，如下面的代码所示。

2.2 标题标签＜title＞

＜title＞元素用于定义文档的标题。浏览器将＜title＞元素的内容放置在浏览器窗口的标题栏上。另外，当把网页加入到用户的链接列表、收藏夹或书签列表时，标题将成为该文档链接的默认名称。2.设置一个好标题的重要性

＜title＞元素不仅用来概要表示网页的内容，对于搜索引擎而言，它也是一个非常重要的标签，除非已经知道网站地址或名称。存储于拥有浩瀚资源的Internet中的网页，若想要被用户访问，主要通过搜索引擎的引导。

因此，构建网页时一定要考虑网页对搜索引擎的友好性。在SEO（Search Engine Optimization，搜索引擎优化）中，＜title＞元素是能够对网站在搜索引擎中的表现产生很大影响的一个因素。

设置＜title＞元素的概要原则是，既要考虑到搜索引擎，筛选网页内容中若干重要的关键字并放置于＜title＞标签中；又要符合用户的阅读习惯，不能盲目追求搜索引擎友好，而使用户看到标题后产生疑惑、歧义等，从而拒绝访问。3.语法说明

＜title＞元素包含在＜head＞元素中，如下面的代码所示。【例2-1】 使用＜title＞标签设置网页标题。

运行后，可以看到网页标题栏内容已被设置为“title标签设置网页标题”，如图2-1所示。图2-1 网页标题栏

2.3 元信息标签＜meta＞

1.功能介绍

＜meta＞元素中的内容一般不供用户查看，不显示于正文中。其作用是提供有关页面的元信息，包括提供与浏览器或搜索引擎相关的信息等，列举如下。

● 设置关键字和网页说明来帮助主页被各大搜索引擎发现，提高网站的访问量。

● 定义页面语言的编码方式，使浏览器可以通过相应的方式正确解读网页中的语言。

● 自动刷新并跳转到新的页面。

● 通过设置网页到期时间，控制页面缓冲，使浏览器获取新页面。

2.语法说明

在一个HTML页面中，可以有多个＜meta＞元素。

＜meta＞标签包含在＜head＞元素中，其中的内容定义了与文档相关联的名称/值对，如下面的代码所示。

＜met aname=参数名 content=参数值＞

＜meta http-equiv=参数名 content=参数值＞

其中，name和http-equiv属性表示＜meta＞元素内容中的名称，content属性表示＜meta＞元素内容中的值。

3.＜meta＞中的属性

1）＜meta＞中的name属性主要用于描述网页，以便于搜索引擎查找和分类。

name属性常用的几个参数有author、description及keywords等，分别指定content属性中参数值内容的类型为作者、网页描述及关键字等。

2）＜meta＞中的http-equiv属性可以向浏览器传回一些有用的信息，以帮助浏览器正确显示网页内容。

http-equiv属性常用的几个参数有content-type、expires及refresh等，分别指定content属性中参数值内容的类型为字符编码方式、网页有效期及刷新后网页地址等。2.3.2 标记页面关键字

1.功能介绍

＜meta＞标签的一个很重要的功能就是设置关键字，帮助主页被各大搜索引擎登录，提高网站的访问量。首页网站关键词代表了网站主题内容，内页和栏目页的关键词一般紧扣页面主题，代表的是当前页面或者栏目内容的主题。

2.关键字设置原则

与2.2节介绍的＜title＞元素相同，关键字的设置也对网页在搜索引擎中的表现非常重要。关键字的设置原则为：选择与网站或页面主体相关的文字作为关键字；揣摩用户的搜索习惯，避免将关键词设置为生僻词汇；最好根据不同的页面，制定不同的关键字组合等。

3.语法说明

使用以下形式来设置关键字，其中将name属性值设为keywords；在content属性值中，设置网页关键字的具体内容。

＜meta name="keywords"content="关键字"＞

例如，开发一个用于上网导航的网页，可以对其关键字进行如下设置。【例2-2】 上网导航页面关键字设置。

网页运行的效果如图2-2所示，可以看到关键字的内容在网页中不显示。图2-2 标记网页关键字后的网页显示效果2.3.3 标记页面说明

1.功能介绍

页面说明是对网页内容的精练概括，这些信息可能会出现在搜索结果中。一个好的页面说明会帮助用户更方便地从搜索结果中判断网页内容是否与需求相符。因此，页面说明需要根据网页的实际情况来设计，尽量避免与网页内容不相关的“描述”。

2.页面说明设置原则

页面说明的设置原则包括以下几个原则。

● 网页描述为自然语言而不是罗列关键词。

● 尽可能准确地描述网页的核心内容，通常为网页内容的摘要信息，也就是希望搜索引擎在检索结果中展示的摘要信息。

● 网页描述中含有有效关键词。

● 网页描述内容与网页标题、网页主体内容有高度相关性等。

3.语法说明

使用以下形式来设置页面说明，其中将name属性值设为description；在content属性值中，设置网页页面说明的具体内容。

＜meta name="description"content="页面说明"＞

例如，补充2.3.2节上网导航网页的页面说明，将如下代码插入＜head＞元素中。【例2-3】 为上网导航页面添加页面说明。

＜meta name="description"content="奇葩导航作为您的上网导航第一站，为您提供门户、新闻、影视、音乐、小说、购物、游戏等分类的网址，让您即刻享受精彩的网络生活。"＞

网页运行效果同图2-2，页面说明在网页上也不显示。2.3.4 标记页面作者

1.功能介绍

设置页面作者是为了告诉搜索引擎页面的作者是谁。

2.语法说明

使用以下形式来设置页面作者，其中将name属性值设为author；在content属性值中，设置网页页面作者。

＜meta name="author"content="作者"＞

例如，补充2.3.2节上网导航网页的页面作者，将如下代码插入＜head＞元素中。【例2-4】 为上网导航页面添加作者信息。

＜meta name="author"content="ZHAO"＞

网页运行效果同图2-2，页面作者在网页上也不显示。2.3.5 标记页面解码方式

1.功能介绍

标记页面解码方式是＜meta＞元素较为常用的功能，作用是设定页面使用的字符集。当浏览者访问网页时，会根据此设定调用相应的字符集来显示网页内容。

2.语法说明

使用以下形式来设置页面解码方式，其中将http-equiv属性值设为Content-Type；在content属性值中，设置网页页面解码方式。

＜meta name="Content-Type"content="解码方式"＞

例如，补充2.3.2节上网导航网页的页面解码方式，将如下代码插入＜head＞元素中。【例2-5】 为上网导航页面添加解码方式。

＜meta http-equiv="Content-Type"content="text/html；charset=UTF-8"＞

该＜meta＞标签定义了当前文档类型为text/html，页面所使用的字符集为UTF-8。其中，文档类型还可以为text/xml、image/gif等，字符集还可以为 gb2312、ISO-8859-1等。

网页运行效果同图2-2，页面解码方式在网页上也不显示。2.3.6 设置页面自动跳转

1.功能介绍

页面自动跳转是指可在指定的时间内跳转到指定的网页。

2.语法说明

使用以下形式来设置页面自动跳转，其中将http-equiv属性值设为refresh；在content属性值中，可以设置网页自动跳转的时间。

＜meta http-equiv="refresh"content="5"＞

上述代码中，实现了5秒（s）后自动刷新网页。如果要自动跳转到其他网页，可进行如下设置。【例2-6】 为上网导航页面添加自动跳转。

＜meta http-equiv="refresh"content="5；url=www.baidu.com"＞

上述代码的功能为5秒后自动跳转到百度页面，加入到导航页面中，运行效果如图2-3和图2-4所示。图2-3 网页运行之初图2-4 打开网页5秒后

2.4 主体标签＜body＞

1.功能介绍

通过＜body＞元素中的bgcolor属性来设定网页的背景颜色。

2.语法说明

其语法格式如下。

＜body bgcolor="value"＞

3.颜色的设置方法

颜色的属性值有三种设置方法。

● 颜色名称。规定颜色值为颜色名称的颜色，如bgcolor="orange"。

● 十六进制。规定颜色值为6位十六进制值的颜色，如bgcolor="#CCFFCC"。

● rgb值，如bgcolor="rgb（255，0，0）"。

其中，十六进制、rgb值方法分别是十六进制和十进制颜色设置的不同表现方式。

颜色的设置，遵照了三原色的成色原理：RGB色彩模式。其中，R代表红色，G代表绿色，B代表蓝色，3种色彩叠加形成了其他的色彩。由于使用红、绿、蓝相叠加产生了其他颜色，因此该模式也称加色模式。显示器、投影设备及电视机等许多设备都是依赖于这种加色模式实现的。设置颜色时，可以使用一个6位十六进制数来对不同颜色进行表示，如#FF00FF等。这6位分别由红色、绿色和蓝色的值组成，每种颜色的最小值是#00，最大值是#FF。通过计算，从#00到#FF的红色、绿色和蓝色的值，一共可以组合出1600多万种不同的颜色。

下面的【例2-7】，使用十六进制的方法对网页背景颜色进行设置。图2-5所示为网页运行后的效果。【例2-7】 网页背景颜色设置。

＜html＞

＜head＞

＜title＞网页背景颜色设置＜/title＞

＜/head＞

＜body bgcolor-”#E6E6FA”＞

＜hl＞网页背景颜色设置效果＜/hl＞

＜/body＞

＜/html＞图2-5 网页背景颜色设置效果2.4.2 背景图片属性background

1.功能介绍

通过＜body＞元素中的background属性来设定网页的背景图片。

2.语法说明

其语法格式如下。

＜body background="URL"＞

background属性的取值为URL（Uniform Resource Locator）地址，是对可以从互联网上得到的资源的位置和访问方法的一种简洁表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL。因此，可以通过background属性值指定的URL地址，找到将被设置为网页背景的图片。

下面的【例2-8】中，background属性值被设定为一个相对URL地址值。图2-6所示为网页运行后的效果。URL的相对路径与绝对路径的概念将在第4章中进行介绍，这里不再详述。【例2-8】 网页背景图片设置。

＜html＞

＜head＞

＜title＞设置背景图片＜/title＞

＜/head＞

＜body background="res/bgimage.jpg"＞

＜hl＞设置背景图片效果＜/hl＞

＜/body＞

＜/html＞图2-6 背景图片设置效果2.4.3 背景图片水印效果属性bgproperties

1.功能介绍

bgproperties是控制＜body＞元素背景的一个属性，当属性值为fixed时，它将把背景图片冻结在浏览窗口，背景图不会随着其他窗口内容而滚动，即形成水印效果。需要注意的是，这个属性必须跟background属性扩展一起使用才有效。

2.语法说明

其语法格式如下。

＜body background="res/bgimage1.jpg"bgproperties="fixed"＞

bgproperties属性值可为fixed或空字符串。如果为fixed，那么背景图片就会作为水印不随网页其他内容的滚动而移动；如果为空字符串，背景图片就会随着网页其他内容的滚动而移动。其中，空字符串为该属性的默认值，即如果不设置该属性时，默认该属性的值为空字符串。

下面给出【例2-9】运行后的效果如图2-7所示。滚动鼠标滑轮时，可以看到网页上的文字也随之滚动，背景图片并不会滚动；同样，可以将bgproporties的值设为空字符串，或直接删除bgproperties的赋值语句，对比效果。【例2-9】 网页背景图片设置水印效果。

＜html＞

＜head＞

＜title＞设置背景图片水印效果＜/title＞

＜/head＞

＜body background:-"res/bgimagel.jpg"bgproperties="fixed"＞

＜hl＞设置背景图片水印效果＜/hl＞

...

＜/body＞

＜/html＞图2-7 设置背景图片水印效果的网页运行界面2.4.4 文本颜色属性text

1.功能介绍

通过＜body＞元素中的text属性来设定网页文档的文本颜色。

2.语法说明

其语法格式如下。

＜body text=”value”＞

颜色的属性值同2.4.1节的设置方法。在下面的【例2-10】中，使用颜色名称对网页背景进行设置。图2-8所示为网页运行后的效果，这里网页中的文字被设置为绿色。【例2-10】 网页文本颜色设置。

＜html＞

＜head＞

＜title＞网页文本颜色设置＜/title＞

＜/head＞

＜body text="green"＞

＜h1＞网页文本颜色设置效果＜/h1＞

＜h1＞网页文本颜色设置效果＜/h1＞

＜h1＞网页文本颜色设置效果＜/h1＞

＜h1＞网页文本颜色设置效果＜/h1＞

＜h1＞网页文本颜色设置效果＜/h1＞

＜h1＞网页文本颜色设置效果＜/h1＞

＜/body＞

＜/html＞图2-8 设置网页文本颜色2.4.5 边距属性margin

1.功能介绍

通过＜body＞元素中的topmargin、leftmargin、rightmargin和bottommargin属性设置页面边距，调整页面显示内容与浏览器边框的距离，使内容显示更加美观。

2.语法说明

其语法格式如下。

＜body topmargin="value"leftmargin="value"rightmargin="value"bottommargin="value"＞

通过设置topmargin/leftmargin/rightmargin/bottommargin不同的属性值来设置显示内容与浏览器的距离。

● topmargin：设置到页面顶端的距离。

● leftmargin：设置到页面左边的距离。

● rightmargin：设置到页面右边的距离。

● bottommargin：设置到页面底边的距离。

3.距离单位介绍

有下列两种常用的距离单位。

● 百分比：定义了相对的距离，即基于父对象总高度或总宽度的百分比的距离。

● 长度值：定义了绝对的距离，即一个固定的距离，单位可以为px（像素）或pt（磅）等。

如【例2-11】所示，将页面上边距设置为页面正文高度的10%。【例2-11】 网页边距设置。

＜html＞

＜head＞

＜title＞设置网页边距＜/title＞

＜/head＞

＜body bgcOlOF"#CCFFCC"topmargin="10%"＞

＜div align=center＞

＜hl＞春夜喜雨＜/hl＞

＜p＞杜甫＜/p＞

＜p＞＜b＞好雨知时节，当春乃发生。＜/b＞＜/p＞

＜p＞＜b＞随风潜入夜，润物细无声。＜/b＞＜/p＞

＜p＞＜b＞野径云俱黑，江船火独明。＜/b＞＜/p＞

＜p＞＜b＞晓看红湿处，花重锦官城。＜/b＞＜/p＞

＜/div＞

＜/body＞

图2-9所示为未设置上边距的效果，图2-10所示为设置上边距为页面正文高度10%的效果。【例2-11】中，由于使用相对距离设置页面上边距，因此，页面上边距将随着网页正文的高度而改变。图2-9 未设置上边距效果图2-10 设置上边距后的效果

2.5 注释标签

注释标签用于在HTML文档中插入注释，对代码进行解释和说明。2.语法说明

其语法格式如下。

＜！-- 注释内容 --＞

注释内容对用户是不可见的，如【例2-12】所示，网页运行后的效果如图2-11所示，注释标签中的内容没有显示在网页正文中。【例2-12】 使用注释标签。

＜html＞

＜head＞

＜title＞使用注释标签＜/title＞

＜/head＞

＜body＞

＜h1＞使用注释标签效果＜/h1＞＜！--此为一级标题--＞

＜/body＞

＜/html＞图2-11 使用注释标签网页

2.6 实验与练习

根据本章所学知识，实现如图2-12和图2-13所示的两个网页，注意页面的标题、页面背景、页面背景色、正文文字颜色及正文文字所在的位置等，并实现由第一张网页显示3秒后自动跳转到第二张网页的效果。图2-12 第一张网页的效果图2-13 第二张网页的效果

第3章 HTML文本格式标签

文字不仅是网页信息传达的一种常用方式，也是视觉传达最直接的方式。文字可以通过不同的排版方式、不同的设计风格排列在网页上，从而突出主题内容、彰显个性品质等。本章通过对文字标签、标题标签、文本格式标签、段落控制标签及列表标签的介绍，帮助读者掌握如何在网页中根据需要设置不同的文本显示效果。

3.1 文字标签＜font＞

文字标签＜font＞规定了网页中文本的字体、字号和颜色。

其中，使用face属性来设定网页中的字体。face属性的取值可以是“宋体”“黑体”、Helvetica、Times New Roman及verdana等字体。如下面的代码所示，使用face属性将HTML文本内容设置成不同的字体。【例3-1】 使用face属性设置不同字体。

＜p＞＜font face="宋体"＞这是“宋体”字体。＜/font＞＜/p＞

＜p＞＜font face="黑体"＞这是“黑体”字体。＜/font＞＜/p＞

＜p＞＜font face="Helvetica"＞这是“Helvetica”字体。＜/font＞＜/p＞

＜p＞＜font face="TimesNewRoman"＞这是“Times New Roman”字体。＜/font＞＜/p＞

＜p＞＜font face="verdana"＞这是“verdana”字体。＜/font＞＜/p＞

运行效果如图3-1所示。图3-1 不同字体的效果3.1.2 文字颜色属性color

使用＜font＞标签的color属性，可以设置文本的颜色。可以根据2.4.1节说明的三种颜色设置方法，对color属性进行设置。表3-1列举了若干颜色名称与十六进制数的对应关系。表3-1 颜色名称与十六进制数的对应关系

下面的【例3-2】为使用color属性来设置网页文本颜色的示例。【例3-2】 使用color属性来设置颜色。

＜p＞＜font color="#FF0000"＞这是使用十六进制数“#FF0000”设置的红色文本。＜/font＞＜/p＞

＜p＞＜font color="red"＞这是使用颜色名称“red”设置的红色文本。＜/font＞＜/p＞

＜p＞＜font color="#00FF00"＞这是使用十六进制数“#00FF00”设置的绿色文本。＜/font＞＜/p＞

＜p＞＜font color="lime"＞这是使用颜色名称“lime”设置的绿色文本。＜/font＞＜/p＞

＜p＞＜font color="#008000"＞这是使用十六进制数“#008000”设置的绿色文本。＜/font＞＜/p＞

＜p＞＜font color="green"＞这是使用颜色名称“green”设置的绿色文本。＜/font＞＜/p＞

＜p＞＜font color="#0000FF"＞这是使用十六进制数“#0000FF”设置的蓝色文本。＜/font＞＜/p＞

＜p＞＜font color="blue"＞这是使用颜色名称“blue”设置的蓝色文本。＜/font＞＜/p＞

图3-2所示为运行效果。要注意lime和green，以及其各自对应的十六进制数值的区别。图3-2 使用color属性设置不同的文本颜色3.1.3 文字大小属性size

使用size属性，可以设置文字的尺寸大小。其取值范围为1～7的整数。浏览器默认size属性的值是3。下面的【例3-3】为使用size对文字尺寸大小进行设置的示例。【例3-3】 使用size属性来设置文字尺寸大小。

＜p＞＜font＞文字大小为浏览器默认值，即“size”属性为3，文字的大小。＜/font＞＜/p＞

＜p＞＜font size="1"＞“size”属性为1时，文字的大小。＜/font＞＜/p＞

＜p＞＜font size="2"＞“size”属性为2时，文字的大小。＜/font＞＜/p＞

＜p＞＜font size="3"＞“size”属性为3时，文字的大小。＜/font＞＜/p＞

＜p＞＜font size="4"＞“size”属性为4时，文字的大小。＜/font＞＜/p＞

＜p＞＜font size="5"＞“size”属性为5时，文字的大小。＜/font＞＜/p＞

＜p＞＜font size="6"＞“size”属性为6时，文字的大小。＜/font＞＜/p＞

＜p＞＜font size="7"＞“size”属性为7时，文字的大小。＜/font＞＜/p＞

运行效果如图3-3所示。图3-3 通过size属性设置文字尺寸大小

3.2 标题标签＜h1＞～＜h6＞

使用＜h1＞～＜h6＞标题标签可定义标题。通过标题标签，可以对网页的内容进行着重强调，便于搜索引擎获取。以标签＜h1＞、＜h2＞…＜h6＞的顺序依次显示重要性的递减。一般来说，＜h1＞用来修饰网页的主标题，＜h2＞表示一个段落的标题，＜h3＞表示段落的小节标题。2.如何设置标题标签

标题＜h1＞～＜h6＞标签是采用关键词的重要地方，应该包括文本中最重要的关键词，以提高对搜索引擎的友好性。在网站的SEO中，＜h1＞标签的作用仅次于＜title＞标签。优化设置包括＜h1＞、＜h2＞和＜h3＞标题标签，对网站进行SEO，会有事半功倍的效果。

在对标题标签进行设置的过程中，要遵守以下几个原则。

● 使用关键词时，不要让题头失去可读性，要考虑读者的感受。

● ＜h1＞代表最重要的，＜h6＞代表相对最不重要的，因此应根据重要性适当安排关键词。如＜h1＞中使用的关键词往往是在网页标题中使用的。

● 标题标签需要出现在＜body＞＜/body＞标签对之间。其中，＜h1＞尽量靠近在HTML中的＜body＞标签，不得出现在＜h2＞…＜h6＞之后，以便让搜索引擎最快地领略主题。

● 每个网页最好只设置一个＜h1＞标签，一般应包含网页的关键字。多个＜h1＞标签将造成搜索引擎不知道页面的哪个标题内容最重要，会淡化页面的标题和关键词的重要性。

● 由于标题标签对搜索引擎的重要作用，所以不要试图利用标题标签来改变字体的外观样式，而应选择其他方式。3.标题对齐属性align

使用align属性规定标题中文本的排列方式。其取值包括left（居左）、center（居中）、right（居右）和justify（两端对齐）。4.语法说明

将需要着重强调的标题内容放置于标题标签对内即可，并通过align属性对标题的排列方式进行设置，如下面的代码所示。【例3-4】 使用标题标签来设置各级标题。

＜h1 align="center"＞这是h1级标题的内容，居中显示。＜/h1＞

＜h2 align="left"＞这是h2级标题的内容，居左显示。＜/h2＞

＜h3 align="right"＞这是h3级标题的内容，居右显示。＜/h3＞

＜h4＞这是h4级标题的内容。＜/h4＞

＜h5＞这是h5级标题的内容。＜/h5＞

＜h6＞这是h6级标题的内容。＜/h6＞

＜p＞这是一般网页内容。＜/p＞

运行效果如图3-4所示。图3-4 使用标题标签来设置各级标题

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

下载完整电子书