网页设计课件-第1章.ppt

《网页设计课件-第1章.ppt》由会员分享，可在线阅读，更多相关《网页设计课件-第1章.ppt（29页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第 1 1 页第 2 2 页目 录第第1 1章章 HTMLHTMLHTMLHTML基础基础基础基础第第2 2章章 列表、图像及超链接列表、图像及超链接列表、图像及超链接列表、图像及超链接 第第3 3章章 表格、表单及框架表格、表单及框架表格、表单及框架表格、表单及框架 第第4 4章章 CSSCSSCSSCSS 第第5 5章章 网页制作技术进阶网页制作技术进阶网页制作技术进阶网页制作技术进阶课件下载第 3 3 页第1章 HTMLHTML基础 b1.11.1 HTMLHTML 概述概述概述概述 b1.21.2 页面颜色控制页面颜色控制页面颜色控制页面颜色控制b1.31.3 文本段落控制文本段落控制

2、文本段落控制文本段落控制b1.41.4 文字格式控制文字格式控制文字格式控制文字格式控制第 4 4 页 如今，公司、企业和个人都在建设自己的如今，公司、企业和个人都在建设自己的Web站点，编写自己的站点，编写自己的Web网网页，页，HTML正是创建网页的基础语言。正是创建网页的基础语言。HTML是英文是英文Hyper Text Markup Language的缩写，意为超文的缩写，意为超文本标记语言，是一种用来编写超文本文档的简单标记语言。用本标记语言，是一种用来编写超文本文档的简单标记语言。用HTML编写超编写超文本文档称为文本文档称为HTML文档，它用于描述网页内容的排版、显示方式，最后要

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

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

5、1.1.1 HTML的功能的功能 1.1 HTML1.1 HTML概述概述概述概述 第 5 5 页1.1.2 1.1.2 创建一个简单的创建一个简单的HTMLHTML页面页面 创建创建HTML文档可以使用熟悉的文本编辑器文档可以使用熟悉的文本编辑器(如记事本或写字板如记事本或写字板)，浏览，浏览HTML页面需要使用页面需要使用Web浏览器，如浏览器，如IE(Internet Explorer)、Firefox等。等。【例【例1-1】创建一个简单网页，网页文件名为创建一个简单网页，网页文件名为Cha1-1.htm。(1)用记事本编辑用记事本编辑HTML文档文档 单击单击“开始开始”“所有程序所有

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

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

8、以“h1”字号(最大号)定义一个标题“Web世界!”。第 8 8 页1.1.3 HTML1.1.3 HTML文档中的标签文档中的标签 HTML文档是纯文本文件，由如文档是纯文本文件，由如、这样一些标签组成这样一些标签组成。标签用来标记文档中的元素，以设置文档的标签用来标记文档中的元素，以设置文档的布局、文字的格式、图象的位置等等。布局、文字的格式、图象的位置等等。标签结构：标签结构：说明：说明：l 标签中的标签名字不可少，但属性可选标签中的标签名字不可少，但属性可选,如如就是没包含属性。就是没包含属性。l 标签中的字母不区分大小写，如标签中的字母不区分大小写，如可写成可写成。l“”与标签名字之

9、间不能有空格，标签名字中也不能加入空格与标签名字之间不能有空格，标签名字中也不能加入空格(尾标签中也，同样尾标签中也，同样)。标签有标签有双标签双标签和和单标签单标签之分。之分。双标签双标签是由是由和和组成的成组成的成对标签。对标签。如如 和和 是一对双标签。是一对双标签。单标签单标签就是只有始标签而没就是只有始标签而没有尾标签的，控制的内容跟随其后。有尾标签的，控制的内容跟随其后。如如就是个单标签。就是个单标签。第 9 9 页1.1.4 HTML1.1.4 HTML文档的基本结构文档的基本结构 1.HTML文档的基本结构文档的基本结构 头部信息 文档主体(正文)文档开始头部主体文档结束第 1

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

11、一些与网页有关的信息，如网页语言的编码方式。设置网页语言的编码方式时使用设置网页语言的编码方式时使用 标签中标签中charset属性属性，纯英文网页可以不纯英文网页可以不设编码，简体中文网页使用设编码，简体中文网页使用 charset=gb2312，繁体中文使用，繁体中文使用charset=big5。如简体中文。如简体中文可如下设置：可如下设置：第 1111 页3.HTML文档的主体文档的主体 主体中放置要在网页中显示的内容，如文本、图像、表单、超链接等等。主体中放置要在网页中显示的内容，如文本、图像、表单、超链接等等。主体中可以包含标题主体中可以包含标题、段落、段落、表格、表格、水、水平线平

12、线、层、层等标签。等标签。和和必须成对使用。必须成对使用。文档主体(正文)1.1.5 1.1.5 习题习题 1.HTML文档的基本结构由哪几部分组成？文档的基本结构由哪几部分组成？2.使用记事本创建网页有哪几个主要步骤？使用记事本创建网页有哪几个主要步骤？3.按照例按照例1-1的步骤，将该例在计算机上做一遍。的步骤，将该例在计算机上做一遍。4.编写一个编写一个HTML文档，显示结果如右图。文档，显示结果如右图。第 1212 页1.2 1.2 页面颜色控制页面颜色控制页面颜色控制页面颜色控制 1.2.1 1.2.1 标签的属性标签的属性 每个标签都有自己的一些属性，它们用于进一步设置该标签相关的

13、显示每个标签都有自己的一些属性，它们用于进一步设置该标签相关的显示方式，其格式如下：方式，其格式如下：l双标签中，属性只能放在始标签中。双标签中，属性只能放在始标签中。l属性是可选的，可以按任何顺序设置。如未设置某个属性，就使其默认值。属性是可选的，可以按任何顺序设置。如未设置某个属性，就使其默认值。l标签名、属性名、等号、属性值之间允许有空格和换行符，很多属性值的标签名、属性名、等号、属性值之间允许有空格和换行符，很多属性值的双引号也可以省略，但建议不要省略，更规范一些。双引号也可以省略，但建议不要省略，更规范一些。主体标签主体标签有有多个属性，它们是控制多个属性，它们是控制整个页面显示方式

14、的。整个页面显示方式的。控制颜色的属性如右控制颜色的属性如右（表（表1-1）。）。属 性作 用示 例bgcolor设置背景颜色background设置背景图像bgproperties固定背景图像，不随页面的滚动而滚动text设置文字颜色link设置超链接颜色vlink设置已使用的超链接的颜色alink设置正被击中的超链接的颜色第 1313 页1.2.2 1.2.2 设置页面的背景色和前景色设置页面的背景色和前景色 默认情况下，网页的背景色为白色，前景色为黑色。默认情况下，网页的背景色为白色，前景色为黑色。利用利用 标标签中的签中的 bgclcor 属性和属性和 text 属性可分别设置网页的背

15、景颜色和文字颜色。属性可分别设置网页的背景颜色和文字颜色。【例【例1-2】创建一个简单网页，设置其背景色为黄色，文字为红色。网页文创建一个简单网页，设置其背景色为黄色，文字为红色。网页文件名为件名为Cha2-1.htm。步骤：（步骤：（1）利用修改）利用修改Cha1-1.htm建立文档，建立文档，以减少编辑工作量。以减少编辑工作量。在打开在打开Cha1-1.htm文档文档后，将文档内容修改为后，将文档内容修改为如右图所示。如右图所示。（2）保存。利用）保存。利用“另存为另存为”命令文件将保存为：命令文件将保存为：“Cha1-2.htm”。显示效果：显示效果：第 1414 页1.2.3 1.2.

16、3 颜色值颜色值 HTML文档中的颜色是由三原色文档中的颜色是由三原色“red”、“green”和和“blue”组组合而成的合而成的RGB格式数字，每个原色都有格式数字，每个原色都有256个色度，即可取值个色度，即可取值0255，具体是，具体是用十六进制数来代表，所以只需要用十六进制数来代表，所以只需要2位即可表示。由于每个原色有位即可表示。由于每个原色有256种，故种，故三种原色一共可组合成三种原色一共可组合成1677721种颜色。种颜色。颜色值表示：颜色值表示：“#RRGGBB”格式格式 其中的每个字母代表一个十六进制数，其中的每个字母代表一个十六进制数，RR、GG、BB分别分别设置红、绿

17、、蓝三色的彩度。设置红、绿、蓝三色的彩度。例例.bgcolor=“#00ff00”，表示将背景颜色设置为绿色。，表示将背景颜色设置为绿色。“RGB(r,g,b)”格式格式 其中的其中的r、g、b是个是个0255之间的整数。之间的整数。例例.bgcolor=“RGB(0,255,0)”，表示将背景色设为绿色。，表示将背景色设为绿色。“RGB(r%,g%,b%)”格式格式 其中的其中的r、g、b是个是个0100之间的实数，也就是将之间的实数，也就是将格式格式中的中的0255数字转换为百分比表示。数字转换为百分比表示。例例.bgcolor=“RGB(100%,0%,0%)”，表示将背景颜色设置为红色

18、，表示将背景颜色设置为红色。对于一些常用的基本颜色，还有对于一些常用的基本颜色，还有相应的英文词对应，以方便使用，如相应的英文词对应，以方便使用，如cha1-2.htm文档中的用法：文档中的用法：bgcolor=“yellow”。颜色名颜色十六进制三原色值white白色ffffffred红色ff0000green绿色00ff00blue蓝色0000ffblack黑色000000yellow黄色ffff00第 1515 页1.2.4 1.2.4 设置页面的背景图案设置页面的背景图案利用利用标签中的标签中的background属性可将网页的背景设置为一个图片。属性可将网页的背景设置为一个图片。【例

19、【例1-3】创建一个简单网页】创建一个简单网页，将其背景设置为一个图片。将其背景设置为一个图片。（1）编写文档）编写文档 打开打开Cha1-2.htm文档，做如下修改：文档，做如下修改：修改为：修改为：“现在网页的背景是黄色现在网页的背景是黄色”修改为：修改为：“现在网页的背景是现在网页的背景是图片图片”注意：注意：“BaiYun.jpg”是个图象文件，要放在是个图象文件，要放在Cha1-3.htm文档一起。如果图象文件在其它文文档一起。如果图象文件在其它文件夹中，如在件夹中，如在D盘根目录下，则该句应改为：盘根目录下，则该句应改为：（2 2）保存文档。文档另存为）保存文档。文档另存为Cha1

20、-3.htmCha1-3.htm。显示结果：显示结果：第 1616 页1.2.5 1.2.5 习题习题 1.回答下列问题回答下列问题：控制整个页面显示方式的属性应该放在哪里？控制整个页面显示方式的属性应该放在哪里？设置文字颜色的属性名怎样拼写？设置文字颜色的属性名怎样拼写？设置背景颜色的属性名怎样拼写？设置背景颜色的属性名怎样拼写？怎样设置页面的背景图案？怎样设置页面的背景图案？2.写出颜色的三种表示方法。写出颜色的三种表示方法。3.重新制作重新制作1.1.51.1.5中习题中习题4 4的网页，使背景颜色变为黄色。的网页，使背景颜色变为黄色。4.4.到计算机中搜索一幅图片，将该图片作为背景图案

21、加入到到计算机中搜索一幅图片，将该图片作为背景图案加入到1.1.51.1.5中习中习题题4 4的网页中。的网页中。第 1717 页1.3 1.3 文本段落控制文本段落控制文本段落控制文本段落控制 1.3.1 1.3.1 标题标签标题标签、分段标签和换行标签、分段标签和换行标签 文本是网页的基本内容，文本是网页的基本内容，标题标签标题标签、分段标签、分段标签和换行标签和换行标签是控制文本格式的标签。是控制文本格式的标签。1.标题标签标题标签 文本按内容分为不同层次，标题是不同层次的文本内容的概述。文本按内容分为不同层次，标题是不同层次的文本内容的概述。标题由双标签标题由双标签、控制，格式如下：控

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

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

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

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

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

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

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

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

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

31、符及过多的空格。但是，但是，p标签和标签和div标签都控制着整个行，控制的区域形成一个矩标签都控制着整个行，控制的区域形成一个矩形块。形块。而而span标签仅仅控制行中的一部分，标签仅仅控制行中的一部分，所以叫做短行标签。所以叫做短行标签。span标签也能够嵌套，它往往嵌入标签也能够嵌套，它往往嵌入p、div等标签中，控制行中一部等标签中，控制行中一部分的内容。分的内容。第 2424 页1.3.4 习题 1.回答下列问题：回答下列问题：本节的七个标签的名称怎样拼写？哪些是单标签？本节的七个标签的名称怎样拼写？哪些是单标签？段标签的文本中，换行及其多于一个的空格起作用吗？段标签的文本中，换行及其

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

33、.1 1.4.1 文字格式控制标签文字格式控制标签 网页中的文字可以通过文字格式控制标签网页中的文字可以通过文字格式控制标签(双标签双标签)控制格式，控制格式，它有以下三个属性：它有以下三个属性：face 设置文字的字体。设置文字的字体。face的取值有多种。如宋体的取值有多种。如宋体(默认值默认值)、黑体、隶书、黑体、隶书、楷体楷体_gb2312、Times New Roman、Arial等；等；size 设置文字的字号。设置文字的字号。size的取值为的取值为17，默认值为，默认值为3，数字越大文字就越大。，数字越大文字就越大。还可用还可用+、-来设定字号的相对值来设定字号的相对值(相对于

34、默认值相对于默认值3的值的值)；color 设置文字的颜色。设置文字的颜色。color的取值就是的取值就是1.2 节所介绍的颜色取值方法。节所介绍的颜色取值方法。【例【例1-91-9】文字格式控制示例。】文字格式控制示例。文字格式控制文字格式控制 默认格式的文字默认格式的文字 黑体黑体 3号字号字 红色红色 隶书隶书 6号字号字 绿色绿色 Arial 黄色黄色 6号字号字 Times New Roman 1号字号字 第 2626 页1.4.2 1.4.2 HTMLHTML的专用字符的专用字符 有些字符在有些字符在HTML语言中有特殊意义，例如语言中有特殊意义，例如“”，称为专用字符。，称为专用

35、字符。在网页文本中显示专用字符时，必须使用对应的特殊编码或对应的字符代在网页文本中显示专用字符时，必须使用对应的特殊编码或对应的字符代码码(称为预定义实体或转义码称为预定义实体或转义码)，否则有可能会出现不正确的显示结果。，否则有可能会出现不正确的显示结果。HTML的预定义实体由字符的预定义实体由字符&、实体名称或、实体名称或“#”加编码、分号（加编码、分号（;）三部）三部分组成，分号可省略。分组成，分号可省略。部分特殊字符部分特殊字符特殊字符特殊字符转义码转义码字符编码字符编码>>&&""空格空格  （版权号（版权号）©©第

36、 2727 页1.4.3 1.4.3 文字样式标签文字样式标签 HTMLHTML中还有一套专门控制文字样式的标签，利用这些标签可以得到中还有一套专门控制文字样式的标签，利用这些标签可以得到特别风格的文字特别风格的文字。文字样式标签文字样式标签标 签效 果 粗体 斜体 带下划线 大型字体 小型字体 上标 下标【例【例1-10】文字样式控制示例。】文字样式控制示例。粗体显示小于号粗体显示小于号< 斜体斜体 上标上标26 下标下标34 多种效果：多种效果：粗斜体且带下划线粗斜体且带下划线 第 2828 页1.4.4 1.4.4 水平线标签水平线标签 水平线标签水平线标签是个单标签，它用于分割页面

37、。是个单标签，它用于分割页面。有下列属性用于控制样式：有下列属性用于控制样式：width:设定水平线宽度。设定水平线宽度。可以取绝对长度值可以取绝对长度值(像素像素)或相对长度值，默认值为打开页面窗口长度的或相对长度值，默认值为打开页面窗口长度的100%；size：设定线条的粗细：设定线条的粗细(以像素作单位，默认值为以像素作单位，默认值为 2)；align：对齐方式。：对齐方式。取值有：取值有：left(靠左靠左)、center(居中居中,默认值默认值)、right(靠右靠右)；color：设定线条的颜色：设定线条的颜色(默认黑色默认黑色)。【例【例1-111-11】使用水平线标签示例。】使

38、用水平线标签示例。下面线段属性：宽下面线段属性：宽100，粗，粗6，居中，绿色，居中，绿色 下面线段属性：宽下面线段属性：宽50%，粗，粗4，靠左，红色，靠左，红色 下面线段属性使用默认值下面线段属性使用默认值 第 2929 页1.4.5 习题 1.1.关于下面代码片断的说法中，关于下面代码片断的说法中，()()是正确的是正确的:a.sizea.size是指水平线的长度是指水平线的长度 b.size b.size是指水平线的宽度是指水平线的宽度 c.width c.width是指水平线的宽度是指水平线的宽度 d.width d.width 是指水平线的高度是指水平线的高度2.2.关于下面代码片断的说法中，关于下面代码片断的说法中，()()是正确的是正确的:a.水平线的长度为水平线的长度为200 b.水平线的宽度为水平线的宽度为200 c.这是一条水平方向的线这是一条水平方向的线 d.这是一条垂直方向的线这是一条垂直方向的线 3.3.编写一个编写一个HTMLHTML文档，页面如右图所示。文档，页面如右图所示。4.4.尝试使用文字控制相关标签编写一个尝试使用文字控制相关标签编写一个HTMLHTML文档，实现如下图所示页面文档，实现如下图所示页面。