静态网页制作第1章

1、第 1 1 页节第 2 2 页第第1 1章章 第第2 2章章 第第3 3章章 第第4 4章章 第第5 5章章 第第6 6章章 课件下载第 3 3 页 第 4 4 页 如今，公司、企业和个人都在建设自己的如今，公司、企业和个人都在建设自己的Web站点，编写自己的站点，编写自己的Web网网页，页，HTML正是创建网页的基础语言。正是创建网页的基础语言。 HTML是英文是英文Hyper Text Markup Language的缩写，意为超文的缩写，意为超文本标记语言，是一种用来编写超文本文档的简单标记语言。用本标记语言，是一种用来编写超文本文档的简单标记语言。用HTML编写超编写超文本文档称为文本

2、文档称为HTML文档，它用于描述网页内容的排版、显示方式，最后要文档，它用于描述网页内容的排版、显示方式，最后要通过通过WWW浏览器显示出来，就是我们看到的网页。所谓超文本是指文档中浏览器显示出来，就是我们看到的网页。所谓超文本是指文档中还可以有图片、声音、动画、影视等内容。还可以有图片、声音、动画、影视等内容。 HTML带来了超链接的技术，即浏览网页时通过单击鼠标可以从一个主带来了超链接的技术，即浏览网页时通过单击鼠标可以从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，从而可以与世界各地题跳转到另一个主题，从一个页面跳转到另一个页面，从而可以与世界各地主机文件链接，直接获取相关主题。

3、主机文件链接，直接获取相关主题。HTML的具体功能：的具体功能：1格式化文本。格式化文本。如设置文本的对齐方式、字体、颜色等。如设置文本的对齐方式、字体、颜色等。2建立超链接。建立超链接。鼠标点击获得指定的目标；设置超链接样式等。鼠标点击获得指定的目标；设置超链接样式等。3建立列表。建立列表。以列表方式显示信息，方便阅读。以列表方式显示信息，方便阅读。4插入图形。插入图形。如设置图像的样式（如大小、边框、布局等）。如设置图像的样式（如大小、边框、布局等）。5建立表格。建立表格。 6加入表单、控键等。加入表单、控键等。这是客户与网页交互的主要渠道。这是客户与网页交互的主要渠道。7加入多媒体。加入

4、多媒体。如声音、视频、动画。如声音、视频、动画。 第 5 5 页 创建创建HTML文档可以使用熟悉的文本编辑器文档可以使用熟悉的文本编辑器(如记事本或写字如记事本或写字板板)，浏览，浏览HTML页面需要使用页面需要使用Web浏览器，如浏览器，如IE (Internet Explorer)、Firefox等。等。 【例【例1-1】创建一个简单网页，网页文件名为创建一个简单网页，网页文件名为Cha1-1.htm。(1) 用记事本编辑用记事本编辑HTML文档文档 单击单击“开始开始”“所有程序所有程序” “附件附件”“记事本记事本”， 在其中输入在其中输入HTML文档内容，文档内容， 如右图所示。如

5、右图所示。 保存保存HTML页面文件：在记事本菜单栏页面文件：在记事本菜单栏中单击中单击“文件文件”“保存保存”，在弹出的，在弹出的“另另存为存为”对话框中选择存放的文件夹对话框中选择存放的文件夹“第第1章章”，文件名栏中输入，文件名栏中输入“Cha1-1.htm”，选，选择保存类型为择保存类型为“所有文件所有文件”，如下图所示。，如下图所示。 第 6 6 页 最后单击【保存】，则一个文最后单击【保存】，则一个文件名为件名为“Cha1-1.htm”的的HTML网网页文件创建完毕。下图所示就是保页文件创建完毕。下图所示就是保存在第存在第1章文件夹下的章文件夹下的HTML网页网页文件文件“Cha1

6、-1.htm”。 HTML文件的后缀名为文件的后缀名为.htm或或.html。 (2) 浏览浏览HTML页面页面 找到找到“Cha3-1.htm”文件，文件，双击它，或右键单击后再单击双击它，或右键单击后再单击“打开打开”，显示结果如图所示。，显示结果如图所示。第 7 7 页 Cha1-1.htm文档说明文档说明到称为头部“简单网页示例”定义页面标题；“”之间的内容构成注释部分。注释可以有多行，注释的内容不会在浏览器上显示。 到是内容部分“ 进入”是定义一段文字“进入”；“”是设置一条水平线；“ Web世界! ”是以“h1”字号(最大号)定义一个标题“Web世界!”。 第 8 8 页 HTML

7、文档是纯文本文件，由如文档是纯文本文件，由如 、 这样一些标签组成这样一些标签组成。标签用来标记文档中的元素，以设置文档的标签用来标记文档中的元素，以设置文档的布局、文字的格式、图象的位置等等。布局、文字的格式、图象的位置等等。 标签结构：标签结构： 说明：说明：l 标签中的标签名字不可少，但属性可选标签中的标签名字不可少，但属性可选, 如如就是没包含属性。就是没包含属性。l 标签中的字母不区分大小写，如标签中的字母不区分大小写，如可写成可写成。l “”与标签名字之间不能有空格，标签名字中也不能加入空格与标签名字之间不能有空格，标签名字中也不能加入空格(尾标签中也，同样尾标签中也，同样)。 标

8、签有标签有双标签双标签和和单标签单标签之分。之分。 双标签双标签是由是由和和组成的组成的成对标签。成对标签。 如如 和和 是一对双标签。是一对双标签。单标签单标签就是只有始标签而就是只有始标签而没有尾标签的，控制的内容跟随其后。没有尾标签的，控制的内容跟随其后。 如如就是个单标签。就是个单标签。 第 9 9 页 1. HTML文档的基本结构文档的基本结构 头部信息 文档主体(正文)文档开始头部主体文档结束第 1010 页2. HTML文档的头部文档的头部 HTML文档的头部在文档的头部在、双标签中，但头标签对双标签中，但头标签对、可以省略。可以省略。 头部用于放置网页标题、网页基地址、元信息、

9、关联链接等信息，这些头部用于放置网页标题、网页基地址、元信息、关联链接等信息，这些信息在网页中是不显示的。信息在网页中是不显示的。 一个一个HTML文档可以没有头部。文档可以没有头部。 头部信息 在头部中可以放置下列标签：在头部中可以放置下列标签： 、 设置设置HTML网页的基地址，基地址定义其后所有链接的相对地址起网页的基地址，基地址定义其后所有链接的相对地址起点。点。 说明一些与网页有关的信息，如网页语言的编码方式。说明一些与网页有关的信息，如网页语言的编码方式。 设置网页语言的编码方式时使用设置网页语言的编码方式时使用 标签中标签中charset属性属性，纯英文网页可以不纯英文网页可以不

10、设编码，简体中文网页使用设编码，简体中文网页使用 charset=gb2312，繁体中文使用，繁体中文使用charset=big5。如简体中文。如简体中文可如下设置：可如下设置： 第 1111 页3. HTML文档的主体文档的主体 主体中放置要在网页中显示的内容，如文本、图像、表单、超链接等等。主体中放置要在网页中显示的内容，如文本、图像、表单、超链接等等。 主体中可以包含标题主体中可以包含标题、段落、段落、表格、表格、水平线水平线、层、层等标签。等标签。 和和必须成对使用。必须成对使用。 文档主体(正文) 1. HTML文档的基本结构由哪几部分组成？文档的基本结构由哪几部分组成？2. 使用记

11、事本创建网页有哪几个主要步骤？使用记事本创建网页有哪几个主要步骤？3. 按照例按照例1-1的步骤，将该例在计算机上做一遍。的步骤，将该例在计算机上做一遍。4. 编写一个编写一个HTML文档，显示结果如右图。文档，显示结果如右图。 第 1212 页 每个标签都有自己的一些属性，它们用于进一步设置该标签相关的显示每个标签都有自己的一些属性，它们用于进一步设置该标签相关的显示方式，其格式如下：方式，其格式如下： l双标签中，属性只能放在始标签中。双标签中，属性只能放在始标签中。l属性是可选的，可以按任何顺序设置。如未设置某个属性，就使其默认值。属性是可选的，可以按任何顺序设置。如未设置某个属性，就使

12、其默认值。l标签名、属性名、等号、属性值之间允许有空格和换行符，很多属性值的标签名、属性名、等号、属性值之间允许有空格和换行符，很多属性值的双引号也可以省略，但建议不要省略，更规范一些。双引号也可以省略，但建议不要省略，更规范一些。 主体标签主体标签有有多个属性，它们是控制多个属性，它们是控制整个页面显示方式的。整个页面显示方式的。控制颜色的属性如右控制颜色的属性如右（表（表1-1）。）。 属 性作 用示 例bgcolor设置背景颜色background设置背景图像bgproperties固定背景图像，不随页面的滚动而滚动text设置文字颜色link设置超链接颜色vlink设置已使用的超链接的

13、颜色alink设置正被击中的超链接的颜色第 1313 页 默认情况下，网页的背景色为白色，前景色为黑色。默认情况下，网页的背景色为白色，前景色为黑色。 利用利用 标标签中的签中的 bgclcor 属性和属性和 text 属性可分别设置网页的背景颜色和文字颜色。属性可分别设置网页的背景颜色和文字颜色。【例【例1-2】 创建一个简单网页，设置其背景色为黄色，文字为红色。网页文创建一个简单网页，设置其背景色为黄色，文字为红色。网页文件名为件名为Cha2-1.htm。步骤：（步骤：（1）利用修改）利用修改Cha1-1.htm建立文档，建立文档，以减少编辑工作量。以减少编辑工作量。在打开在打开Cha1-

14、1.htm文档文档后，将文档内容修改为后，将文档内容修改为如右图所示。如右图所示。（2）保存。利用）保存。利用“另存为另存为”命令文件将保存为：命令文件将保存为：“Cha1-2.htm”。 显示效果：显示效果：第 1414 页 HTML文档中的颜色是由三原色文档中的颜色是由三原色“red”、“green”和和“blue”组合而组合而成的成的RGB格式数字，每个原色都有格式数字，每个原色都有256个色度，即可取值个色度，即可取值0255，具体是用十，具体是用十六进制数来代表，所以只需要六进制数来代表，所以只需要2位即可表示。由于每个原色有位即可表示。由于每个原色有256种，故三种种，故三种原色一

15、共可组合成原色一共可组合成1677721种颜色。种颜色。 颜色值表示：颜色值表示： “#RRGGBB”格式格式 其中的每个字母代表一个十六进制数，其中的每个字母代表一个十六进制数，RR、GG、BB分分别别设置红、绿、蓝三色的彩度。设置红、绿、蓝三色的彩度。 例例. bgcolor=“#00ff00”，表示将背景颜色设置为绿色。，表示将背景颜色设置为绿色。 “RGB(r,g,b)”格式格式 其中的其中的r、g、b是个是个0255之间的整数。之间的整数。 例例. bgcolor=“RGB(0,255,0)”，表示将背景色设为绿色。，表示将背景色设为绿色。 “RGB(r%,g%,b%)”格式格式 其

16、中的其中的r、g、b是个是个0100之间的实数，也就是将之间的实数，也就是将格式格式中的中的0255数字转换为百分比表示。数字转换为百分比表示。 例例. bgcolor=“RGB(100%,0%,0%)”，表示将背景颜色设置为红色，表示将背景颜色设置为红色 。 对于一些常用的基本颜色，还有对于一些常用的基本颜色，还有相应的英文词对应，以方便使用，如相应的英文词对应，以方便使用，如cha1-2.htm文档中的用法：文档中的用法：bgcolor=“yellow”。颜色名颜色十六进制三原色值white白色ffffffred红色ff0000green绿色00ff00blue蓝色0000ffblack黑

17、色000000yellow黄色ffff00第 1515 页利用利用标签中的标签中的background属性可将网页的背景设置为一个图片。属性可将网页的背景设置为一个图片。【例【例1-3】创建一个简单网页】创建一个简单网页，将其背景设置为一个图片。将其背景设置为一个图片。 （1）编写文档）编写文档 打开打开Cha1-2.htm文档，做如下修改：文档，做如下修改： 修改为：修改为： “现在网页的背景是黄色现在网页的背景是黄色”修改为：修改为：“现在网页的背景是现在网页的背景是图片图片” 注意：注意：“BaiYun.jpg”是个图象文件，要放在是个图象文件，要放在Cha1-3.htm文档一起。如果图

18、象文件在其它文文档一起。如果图象文件在其它文件夹中，如在件夹中，如在D盘根目录下，则该句应改为：盘根目录下，则该句应改为： （2 2）保存文档。文档另存为）保存文档。文档另存为Cha1-3.htmCha1-3.htm。 显示结果：显示结果： 第 1616 页 1. 回答下列问题回答下列问题： 控制整个页面显示方式的属性应该放在哪里？控制整个页面显示方式的属性应该放在哪里？ 设置文字颜色的属性名怎样拼写？设置文字颜色的属性名怎样拼写？ 设置背景颜色的属性名怎样拼写？设置背景颜色的属性名怎样拼写？ 怎样设置页面的背景图案？怎样设置页面的背景图案？2. 写出颜色的三种表示方法。写出颜色的三种表示方法

19、。 3. 重新制作重新制作.5中习题中习题4 4的网页，使背景颜色变为黄色。的网页，使背景颜色变为黄色。4.4.到计算机中搜索一幅图片，将该图片作为背景图案加入到到计算机中搜索一幅图片，将该图片作为背景图案加入到.5中习中习题题4 4的网页中。的网页中。第 1717 页 文本是网页的基本内容，文本是网页的基本内容，标题标签标题标签、分段标签、分段标签和换行标签和换行标签是控制文本格式的标签。是控制文本格式的标签。1. 标题标签标题标签 文本按内容分为不同层次，标题是不同层次的文本内容的概述。文本按内容分为不同层次，标题是不同层次的文本内容的概述。 标题由双标签标

20、题由双标签、控制，格式如下：控制，格式如下： 标题内容标题内容 其中的其中的n是标题的级别，分为是标题的级别，分为6级：级：h1、h2、h3、h4、h5和和h6。每一级在浏览器。每一级在浏览器中的显示样式都不同中的显示样式都不同, n越小越小, 级别越高级别越高,即字号越大。即字号越大。 标签有个标签有个“align”属性，取值有属性，取值有left、center、right，它们控制它们控制标题的三种对齐方式：左、中、右，默认是靠左。标题的三种对齐方式：左、中、右，默认是靠左。 第 1818 页 使用标题使用标题 这是一级标题这是一级标题 这是二级标题这是二级标题 这是这是 三级标题三级标题

21、 这是这是 四级标题四级标题 这是五级标题这是五级标题 这是六级标题这是六级标题 这里不是标题这里不是标题 【例【例1-4】创建一网页，在其中设置】创建一网页，在其中设置6个级别的文本标题。个级别的文本标题。文档的代码：文档的代码：第 1919 页2. 分段标签分段标签和换行标签和换行标签 HTMLHTML中中使用双标签使用双标签、对文本进行分段，尾标签对文本进行分段，尾标签可以省略。可以省略。 标签也有标签也有“align”属性，取值和意义与标题标签相同。属性，取值和意义与标题标签相同。 、之间可以包含文本等内容，也可以包含后面章节介绍的内联标之间可以包含文本等内容，也可以包含后面章节介绍的

22、内联标签，如签，如、等标签，但不可以包含标题标签。等标签，但不可以包含标题标签。 浏览器显示一个浏览器显示一个标签分段时，前后自动换行，并空出一行。内容默认标签分段时，前后自动换行，并空出一行。内容默认左对齐，首行不退格。每对分段标签之间的文本中原有的换行及其多于一个左对齐，首行不退格。每对分段标签之间的文本中原有的换行及其多于一个的空格将被忽略。的空格将被忽略。 用用标签控制文本段落时，两个段落之间会空出一行。如果不希望中标签控制文本段落时，两个段落之间会空出一行。如果不希望中间有空行，则可使用间有空行，则可使用换行标签换行标签，这是个很简单的单标签，其作用就是，这是个很简单的单标签，其作用

23、就是回车换行。回车换行。 【例【例1-5】 使用分段标签和换行标签显示文本。使用分段标签和换行标签显示文本。 分段标签、换行标签示例分段标签、换行标签示例 1.3.1 标题、分段和换行标签标题、分段和换行标签 第 2020 页 分段标签之间可以包含文本等内容，也可以包含后面分段标签之间可以包含文本等内容，也可以包含后面 章节介绍的内联标签，但不可以包含标题标签。章节介绍的内联标签，但不可以包含标题标签。 浏览器显示一个分段时，前后自动换行，并空出一行。浏览器显示一个分段时，前后自动换行，并空出一行。 每对分段标签之间的每对分段标签之间的 文本中原有的换行文本中原有的换行 及其多于一个的空格将及

24、其多于一个的空格将 被忽略，内容被忽略，内容 默认默认 左对齐。左对齐。 首行首行不退格。不退格。 第 2121 页 居中对齐标签居中对齐标签是双标签，是双标签，用于控制段落用于控制段落居中对齐。居中对齐。 原样显示标签原样显示标签也是双标签，在也是双标签，在中的文本将呈原样显示，包中的文本将呈原样显示，包括空格、换行等。括空格、换行等。【例【例1-6】居中对齐标签和原样显示标签示例。】居中对齐标签和原样显示标签示例。 居中对齐标签和原样显示标签示例居中对齐标签和原样显示标签示例 现在是标题，居中对齐现在是标题，居中对齐 现在是段落，居中对齐现在是段落，居中对齐 现在文本呈原样显示（现字前有现

25、在文本呈原样显示（现字前有4个空格）个空格） 比上一行再多空比上一行再多空4格（格（2个中文字）个中文字） 前面有前面有12个空格个空格 h3级标题，级标题，h前有前有2个空格个空格 第 2222 页 1. 层标签层标签 层标签层标签是双标签，作用和段标签是双标签，作用和段标签类似，使控制的内容连续地显类似，使控制的内容连续地显示，忽略文本中的换行符及过多的空格。但示，忽略文本中的换行符及过多的空格。但p标签使控制的内容与前后其它标签使控制的内容与前后其它元素间自动保持一个空行，而元素间自动保持一个空行，而div标签控制的内容结束时不空行。标签控制的内容结束时不空行。 另外，另外，div标签可

26、以嵌套，可以与自己嵌套，也可以嵌入标签可以嵌套，可以与自己嵌套，也可以嵌入p标签中，而标签中，而p标标签是无法嵌套的。签是无法嵌套的。【例【例1-71-7】层标签示例。】层标签示例。 p标签使控制的内容连续地显示，忽略文本中的换行符及过多的空格。现在是标签使控制的内容连续地显示，忽略文本中的换行符及过多的空格。现在是p的的显示样式。显示样式。 p标签使控制的内容与前后其它元素间自动保持一个空行。现在是标签使控制的内容与前后其它元素间自动保持一个空行。现在是p的显示样式。的显示样式。 div标签使控制的内容连续地显示，忽略文本中的换行符及过多的空格。现在是标签使控制的内容连续地显示，忽略文本中的

27、换行符及过多的空格。现在是div的显示样式。的显示样式。 div标签控制的内容结束时不空行。现在是标签控制的内容结束时不空行。现在是div的显示样式。的显示样式。 p标签不能嵌套，而标签不能嵌套，而div标签能嵌套。本段正是嵌套在标签能嵌套。本段正是嵌套在 内层的内层的div标签控制的内容。标签控制的内容。 现在外层结束。现在外层结束。第 2323 页2. 短行标签短行标签 短行标签短行标签是双标签，与是双标签，与标签、标签、标签类似，也是使控制的内容连续标签类似，也是使控制的内容连续地显示，忽略文本中的换行符及过多的空格。但是，地显示，忽略文本中的换行符及过多的空格。但是，p标签和标签和di

28、v标签都控制着整个行，标签都控制着整个行，控制的区域形成一个矩形块，而控制的区域形成一个矩形块，而span标签仅仅控制行中的一部分，所以叫做短行标签。标签仅仅控制行中的一部分，所以叫做短行标签。span标签也能够嵌套，它往往嵌入标签也能够嵌套，它往往嵌入p、div等标签中，控制行中一部分的内容等标签中，控制行中一部分的内容 。 【例【例1-8】短行标短行标签示例。签示例。 p标签、标签、div标签、标签、span标签都使控制的内容连续地显示，标签都使控制的内容连续地显示，忽略文本中的换行符及过多的空格。忽略文本中的换行符及过多的空格。 但是，但是，p标签和标签和div标签都控制着整个行，控制的

29、区域形成一个矩标签都控制着整个行，控制的区域形成一个矩形块。形块。而而span标签仅仅控制行中的一部分，标签仅仅控制行中的一部分，所以叫做短行标签。所以叫做短行标签。 span标签也能够嵌套，它往往嵌入标签也能够嵌套，它往往嵌入p、div等标签中，控制行中一部等标签中，控制行中一部分的内容。分的内容。 第 2424 页 1. 回答下列问题：回答下列问题： 本节的七个标签的名称怎样拼写？哪些是单标签？本节的七个标签的名称怎样拼写？哪些是单标签？ 段标签的文本中，换行及其多于一个的空格起作用吗？段标签的文本中，换行及其多于一个的空格起作用吗？ 如果希望多段文本都居中对齐，用什么方法最简便？如果希望

30、多段文本都居中对齐，用什么方法最简便？ 原样显示标签中的换行及多个空格起作用吗？原样显示标签中的换行及多个空格起作用吗？2. 利用利用 、 设计如右上图所示的页面。设计如右上图所示的页面。 3. 利用利用、设计如右图所示网页。设计如右图所示网页。4. 利用居中标签中嵌套原样显示标签设计如下图所利用居中标签中嵌套原样显示标签设计如下图所示网页，要求所有文字都始终相对居中，例如窗口示网页，要求所有文字都始终相对居中，例如窗口变宽时的效果如下面右图所示。变宽时的效果如下面右图所示。 第 2525 页 网页中的文字可以通过文字格式控制标签网页中的文字可以通过文字格式控制标签 (双标签双标签)控制格式，

31、控制格式，它有以下三个属性：它有以下三个属性： face 设置文字的字体。设置文字的字体。 face的取值有多种。如宋体的取值有多种。如宋体(默认值默认值)、黑体、隶书、黑体、隶书、 楷体楷体_gb2312、Times New Roman、Arial等；等； size 设置文字的字号。设置文字的字号。 size的取值为的取值为17，默认值为，默认值为3，数字越大文字就越大。，数字越大文字就越大。 还可用还可用+、-来设定字号的相对值来设定字号的相对值(相对于默认值相对于默认值3的值的值)； color 设置文字的颜色。设置文字的颜色。 color的取值就是的取值就是1.2 节所介绍的颜色取值方

32、法。节所介绍的颜色取值方法。【例【例1-91-9】文字格式控制示例。】文字格式控制示例。 文字格式控制文字格式控制 默认格式的文字默认格式的文字 黑体黑体 3号字号字 红色红色 隶书隶书 6号字号字 绿色绿色 Arial 黄色黄色 6号字号字 Times New Roman 1号字号字 第 2626 页 有些字符在有些字符在HTML语言中有特殊意义，例如语言中有特殊意义，例如“”，称为专用字符。，称为专用字符。 在网页文本中显示专用字符时，必须使用对应的特殊编码或对应的字符代在网页文本中显示专用字符时，必须使用对应的特殊编码或对应的字符代码码(称为预定义实体或转义码称为预定义实体或转义码)，否则有可能会出现不正确的显示结果。，否则有可能会出现不正确的显示结果。 HTML的预定义实体由字符的预定义实体由字符&、实体名称或、实体名称或“#”加编码、分号（加编码、分号（;）三部分）三部分组成，分号可省略。组成，分号可省略。 部分特殊字符部分特殊字符特殊字符特殊字符转义码转义码字符编码字符编码&gt &#62&amp &#38&quot &#34空格空格&nbsp &#160（版权号（版权号）&copy &#169第 2727 页 HTMLHTML中还有一套