《网页设计第2章HTML基础与文字版面设计高教书苑》由会员分享，可在线阅读，更多相关《网页设计第2章HTML基础与文字版面设计高教书苑（47页珍藏版）》请在金锄头文库上搜索。
1、第2章HTML基础与文字版面设计1 1高级教育高级教育本章知识技能要点：本章知识技能要点： HTMLHTML标签与浏览器显示效果的基本对应关系标签与浏览器显示效果的基本对应关系 HTMLHTML的基本结构组成的基本结构组成 简单页面的编排简单页面的编排 在在HTMLHTML中颜色的使用中颜色的使用 掌握文字版面编辑的基本要领以及掌握文字版面编辑的基本要领以及,和和标签的基本用法标签的基本用法 掌握标题标签掌握标题标签，特殊文字和特殊符号的使用方法，特殊文字和特殊符号的使用方法 熟练掌握利用熟练掌握利用标签设置各种字体样式的方法标签设置各种字体样式的方法 掌握各类列表的编排方法掌握各类列表的编排
2、方法2 2高级教育高级教育2.1HTML基础基础2.1.1HTML概述 HTMLHTML英英英英语语语语意意意意思思思思是是是是：HypertextHypertextMarkedMarkedLanguageLanguage，即即即即超超超超文文文文本本本本标标标标签签签签语语语语言言言言, ,是是是是一一一一种种种种用用用用来来来来制制制制作作作作超超超超文文文文本本本本文文文文档档档档的的的的简简简简单单单单标标标标签签签签语语语语言言言言。用用用用HTMLHTML编编编编写写写写的的的的超超超超文文文文本本本本文文文文档档档档称称称称为为为为HTMLHTML文文文文档档档档，它它它它能能能
3、能独独独独立立立立于于于于各各各各种种种种操操操操作作作作系系系系统统统统平平平平台台台台（如如如如UnixUnix，WindowsWindows等等等等）。自自自自19901990年年年年以以以以来来来来HTMLHTML就就就就一一一一直直直直被被被被用用用用作作作作WorldWorldWideWideWebWeb的的的的信信信信息息息息表表表表示示示示语语语语言言言言，用用用用于于于于描描描描述述述述HOMEPAGEHOMEPAGE的的的的格格格格式式式式设设设设计计计计和和和和它它它它与与与与WWWWWW上上上上其其其其它它它它HOMEPAGEHOMEPAGE的的的的连连连连结结结结信信
4、信信息息息息。使使使使用用用用HTMLHTML语语语语言言言言描描描描述述述述的的的的文文文文件件件件，需要通过需要通过需要通过需要通过WWWWWW浏览器显示出效果。浏览器显示出效果。浏览器显示出效果。浏览器显示出效果。 HTMLHTML的的的的普普普普遍遍遍遍应应应应用用用用就就就就是是是是带带带带来来来来了了了了超超超超文文文文本本本本的的的的技技技技术术术术-通通通通过过过过单单单单击击击击鼠鼠鼠鼠标标标标从从从从一一一一个个个个主主主主题题题题跳跳跳跳转转转转到到到到另另另另一一一一个个个个主主主主题题题题，从从从从一一一一个个个个页页页页面面面面跳跳跳跳转转转转到到到到另另另另一一一
5、一个页面与世界各地主机的文件链接，直接获取相关的主题。个页面与世界各地主机的文件链接，直接获取相关的主题。个页面与世界各地主机的文件链接，直接获取相关的主题。个页面与世界各地主机的文件链接，直接获取相关的主题。3 3高级教育高级教育编编编编辑辑辑辑HTMLHTML超超超超文文文文本本本本文文文文件件件件时时时时需需需需要要要要用用用用到到到到的的的的一一一一些些些些标标标标签签签签。在在在在HTMLHTML中中中中每每每每个个个个用用用用来来来来作作作作标标标标签签签签的的的的符符符符号号号号都都都都是是是是一一一一条条条条命命命命令令令令，它它它它告告告告诉诉诉诉浏浏浏浏览览览览器器器器如如
6、如如何何何何显显显显示示示示文文文文本本本本。这这这这些些些些标标标标签签签签均均均均由由由由“ “”符符符符号号号号以以以以及及及及一一一一个个个个字字字字符符符符串串串串组组组组成成成成。而而而而浏浏浏浏览览览览器器器器的的的的功功功功能能能能是是是是对对对对这这这这些些些些标标标标签签签签进进进进行行行行解解解解释释释释，显显显显示示示示出出出出文文文文字字字字、图图图图像像像像、动动动动画画画画、播播播播放放放放声声声声音音音音。这这这这些些些些标标标标签签签签符符符符号号号号用用用用“ “ ”来来来来表示。表示。表示。表示。HTMLHTML只只只只是是是是一一一一个个个个纯纯纯纯文文
7、文文本本本本文文文文件件件件。创创创创建建建建一一一一个个个个HTMLHTML文文文文档档档档只只只只需需需需要要要要两两两两个个个个工工工工具具具具，一一一一个个个个是是是是HTMLHTML编编编编辑辑辑辑器器器器，一一一一个个个个WEBWEB浏浏浏浏览览览览器器器器。HTMLHTML编编编编辑辑辑辑器器器器是是是是用用用用于于于于生生生生成成成成和和和和保保保保存存存存HTMLHTML文文文文档档档档的的的的应应应应用用用用程程程程序序序序。WEBWEB浏浏浏浏览览览览器器器器是是是是用用用用来来来来打打打打开开开开WEBWEB网网网网页页页页文文文文件，提供查看件，提供查看件，提供查看件
8、，提供查看WEBWEB资源的客户端程序。资源的客户端程序。资源的客户端程序。资源的客户端程序。 2.1HTML基础基础4 4高级教育高级教育2.1.2超文本中的标签2.1HTML基础基础HTMLHTML的的的的标标标标签签签签分分分分单单单单标标标标签签签签和和和和成成成成对对对对标标标标签签签签两两两两种种种种。成成成成对对对对标标标标签签签签是是是是由由由由首首首首标标标标签签签签 和和和和尾尾尾尾标标标标签签签签/ 组组组组成成成成的的的的，成成成成对对对对标标标标签签签签的的的的作作作作用用用用域域域域只只只只作作作作用用用用于于于于这这这这对对对对标标标标签签签签中中中中的的的的文文
9、文文档档档档。单单单单独独独独标标标标签签签签的的的的格格格格式式式式 ，只只只只需需需需单单单单独独独独放放放放在在在在相相相相应应应应的的的的位位位位置置置置插入元素就可以了。插入元素就可以了。插入元素就可以了。插入元素就可以了。大大大大多多多多数数数数标标标标签签签签都都都都有有有有自自自自己己己己的的的的一一一一些些些些属属属属性性性性, ,属属属属性性性性要要要要写写写写在在在在始始始始标标标标签签签签内内内内，属属属属性性性性用用用用于于于于进进进进一一一一步步步步改改改改变变变变显显显显示示示示的的的的效效效效果果果果, ,各各各各属属属属性性性性之之之之间间间间无无无无先先先先
10、后后后后次次次次序序序序，属属属属性性性性是是是是可可可可选选选选的的的的，属属属属性性性性也也也也可可可可以以以以省省省省略略略略而而而而采用默认值采用默认值采用默认值采用默认值; ;其格式如下：其格式如下：其格式如下：其格式如下： 3内容内容内容内容/ 5 5高级教育高级教育2.1.2.1单标签2.1HTML基础基础某些标签称为某些标签称为“单标签单标签”，因为它只需单独使用，因为它只需单独使用就能完整地表达意思，这类标签的语法是：就能完整地表达意思，这类标签的语法是：内容内容最常用的单标签是最常用的单标签是,它表示换行。它表示换行。6 6高级教育高级教育2.1.2.22.1.2.2双标签
11、双标签双标签双标签另一类标签称为另一类标签称为另一类标签称为另一类标签称为“ “双标签双标签双标签双标签” ”，它由，它由，它由，它由“ “始标签始标签始标签始标签” ”和和和和“ “尾标签尾标签尾标签尾标签” ”两部分构成，必须成对使用。其中始两部分构成，必须成对使用。其中始两部分构成，必须成对使用。其中始两部分构成，必须成对使用。其中始标签告诉标签告诉标签告诉标签告诉webweb浏览器从此处开始执行该标签所表示浏览器从此处开始执行该标签所表示浏览器从此处开始执行该标签所表示浏览器从此处开始执行该标签所表示的功能，而尾标签告诉的功能，而尾标签告诉的功能，而尾标签告诉的功能，而尾标签告诉web
12、web浏览器在这里结束该功浏览器在这里结束该功浏览器在这里结束该功浏览器在这里结束该功能。始标签前加一个斜杠（能。始标签前加一个斜杠（能。始标签前加一个斜杠（能。始标签前加一个斜杠（/ /）即成为尾标签。这类）即成为尾标签。这类）即成为尾标签。这类）即成为尾标签。这类标签的语法是：标签的语法是：标签的语法是：标签的语法是： 内内内内 容容容容/其中其中其中其中“ “内容内容内容内容”部分就是要被这对标签施加作用部分就是要被这对标签施加作用部分就是要被这对标签施加作用部分就是要被这对标签施加作用的部分。例如你想突出对某段文字的显示，就将此的部分。例如你想突出对某段文字的显示，就将此的部分。例如你
13、想突出对某段文字的显示，就将此的部分。例如你想突出对某段文字的显示，就将此段文字放在一段文字放在一段文字放在一段文字放在一标签中，标签中，标签中，标签中，例如：例如：例如：例如：第一：第一：第一：第一：2.1HTML基础基础7 7高级教育高级教育2.1.3标签属性2.1HTML基础基础许多单标签和双标签的始标签内可以包含一些属性，许多单标签和双标签的始标签内可以包含一些属性，其语法是：其语法是：各属性之间无先后次序，有些属性也可省略（即取默认值）。各属性之间无先后次序，有些属性也可省略（即取默认值）。8 8高级教育高级教育2.1.4HTML的基本结构2.1HTML基础基础一一个个HTML文文档
14、档是是由由一一系系列列的的元元素素和和标标签签组组成成.元元素素名名不不区区分分大大小小写写.HTML用用标标签签来规定元素的属性和它在文件中的位置。来规定元素的属性和它在文件中的位置。超超文文本本文文档档分分文文档档头头和和文文档档体体两两部部分分，在在文文档档头头里里，对对这这个个文文档档进进行行了了一一些些必必要要的定义，文档体中才是要显示的各种文档信息。的定义，文档体中才是要显示的各种文档信息。头头部部信信息息文文档档主主体，体，正正文文部部分分其其中中在在最最外外层层，表表示示这这对对标标签签间间的的内内容容是是HTML文文档档。我我们们还还会会看看到到一一些些hompage省省略略
15、标标签签，因因为为.HTML或或.htm文文件件被被web浏浏览览器器默默认认为为是是HTML文文档档。之之间间包包括括文文档档的的头头部部信信息息，如如文文档档总总标标题题等等，若若不不需头部信息则可省略此标签。需头部信息则可省略此标签。标签一般不省略，表示正文内容的开始。标签一般不省略，表示正文内容的开始。9 9高级教育高级教育 例例例例2-12-1：以下是一个最基本的超文本文档的源代码：以下是一个最基本的超文本文档的源代码：以下是一个最基本的超文本文档的源代码：以下是一个最基本的超文本文档的源代码 文件头文件头文件头文件头 我的第一个网页我的第一个网页我的第一个网页我的第一个网页 学习学
16、习学习学习HTMLHTML网页制作网页制作网页制作网页制作 文件体文件体文件体文件体 HTMLHTML英语是：英语是：英语是：英语是：HypertextMarkedLanguageHypertextMarkedLanguage，即超文本标签语言。，即超文本标签语言。，即超文本标签语言。，即超文本标签语言。 2.1HTML基础基础图图2-12-1例例2-12-1的运行效果的运行效果1010高级教育高级教育2.2页面的整体编排页面的整体编排2.2.12.2.1页面的头标签页面的头标签页面的头标签页面的头标签和和构成构成HTMLHTML文档的文档的开头部分，在浏览器窗口中，头部信息是不被显示开头部分
17、，在浏览器窗口中，头部信息是不被显示在正文中的在正文中的, ,在此标签中可以插入其它标签在此标签中可以插入其它标签, ,用以说用以说明文件的标题和整个文件的一些公用属性。在此标明文件的标题和整个文件的一些公用属性。在此标签对之间可以使用签对之间可以使用、等等标签对，这些标签对都是描述等等标签对，这些标签对都是描述HTMLHTML文档相关文档相关信息的标签对，信息的标签对，标签对之间的内容标签对之间的内容是不会在浏览器的框内显示出来的。两个标签必须是不会在浏览器的框内显示出来的。两个标签必须一块使用一块使用 1111高级教育高级教育2.2.2页面的标题标签页面的标题标签决定了显示在页面标题栏中的
18、文字。使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息，那些信息一般是网页的“主题”，要将网页的主题显示到浏览器的顶部其实很简单，只要在标签对之间加入要显示的文本即可。2.2页面的整体编排页面的整体编排1212高级教育高级教育例如：例如： 我的第一个网页我的第一个网页2.2页面的整体编排页面的整体编排1313高级教育高级教育2.2.32.2.3主体标签主体标签标签是标签是HTMLHTML文档的主体部分，其文档的主体部分，其中放置的是页面中所有的内容，如图片、文字、表中放置的是页面中所有的内容，如图片、文字、表格、表单、超链接等设置。在此标签对之间可包含格、表单、超链接等设置
19、。在此标签对之间可包含、等等众多等等众多的标签，它们所定义的文本、图像等将会在浏览器的标签，它们所定义的文本、图像等将会在浏览器的框内显示出来。的框内显示出来。两个标签必须一两个标签必须一块使用。块使用。标签有自己的属性，设置标签有自己的属性，设置 标签内的标签内的属性，可控制整个页面的显示方式。属性，可控制整个页面的显示方式。其主要属性如表其主要属性如表2-12-1。 2.2页面的整体编排页面的整体编排1414高级教育高级教育表2-1标签的主要属性2.2页面的整体编排页面的整体编排1515高级教育高级教育 下面是一个综合的例子，仔细阅读，便可以了解以上各个标下面是一个综合的例子，仔细阅读，便
20、可以了解以上各个标志对在一个志对在一个HTMLHTML文档中的布局或所使用的位置。文档中的布局或所使用的位置。 例例例例2-22-2： HTMLHTML文档中基本标志的使用文档中基本标志的使用 显示在浏览器最标题栏中的文本显示在浏览器最标题栏中的文本 bodybgcolor=redtext=bluetext=#000000link=#000000alink=#000000vlink=#000000 红色背景、蓝色文字红色背景、蓝色文字 2.2页面的整体编排页面的整体编排1616高级教育高级教育 颜颜色色值值是是一一个个关关键键字字或或一一个个RGBRGB格格式式的的数数字字。在在网网页页中中有
21、有许许多多标签都会用到颜色的设置，在此一并给予介绍。标签都会用到颜色的设置，在此一并给予介绍。 颜颜色色是是由由 redredgreengreenblueblue 三三原原色色组组合合而而成成的的，在在 HTMLHTML中中对对颜颜色色的的定定义义是是用用十十六六进进制制数数值值进进行行表表示示的的，对对於於三三原原色色 HTMLHTML分分别别给给予予两两个个十十六六进进制制数数值值去去定定义义，也也就就是是每每个个原原色色可可有有 256256种种彩彩度度，故故此此三三原原色色可可混混合合成成1677721616777216种种颜颜色色。应应用用时时 常常 在在 每每 个个 RGBRGB
22、值值 之之 前前 加加 上上 “ “ # “ “ 符符 号号 ， 如如 ：bgcolor=#336699bgcolor=#336699。若若用用英英文文名名字字表表示示颜颜色色时时则则可可以以直直接接写写其英文名字，如其英文名字，如 bgcolor=greenbgcolor=green RGBRGB颜色可以有四种表达形式颜色可以有四种表达形式: :： #RRGGBB(#RRGGBB(如，如，#00cc00)#00cc00) #RGB(#RGB(如，如，#0c0)#0c0) RGB(x,x,x)RGB(x,x,x) x x是是 一一 个个 介介 乎乎 0 0到到 255255之之 间间 的的 整
23、整 数数 ( (如如 ，RGB(0,204,0)RGB(0,204,0) RGB(y%,y%,y%)RGB(y%,y%,y%)y y是是一一个个介介乎乎0.00.0到到100.0100.0之之间间的的整整数数 ( (如如， RGB(0%,80%,0%)RGB(0%,80%,0%) 表表1-21-2是部分颜色的是部分颜色的RGBRGB代码对照表。代码对照表。2.3网页中颜色的设置网页中颜色的设置1717高级教育高级教育 2.4.12.4.1标题标签标题标签 一般文章都有标题、副标题、章和节等结构，一般文章都有标题、副标题、章和节等结构，HTMLHTML中中也提供了相应的标题标签也提供了相应的标题
24、标签,标签用于设置网页中的标签用于设置网页中的标题文字，被设置的文字将以黑体或粗体的方式显示在网页标题文字，被设置的文字将以黑体或粗体的方式显示在网页中。其中中。其中n n为标题的等级。为标题的等级。HTMLHTML总共提供六个等级的标题，总共提供六个等级的标题，n n越小，标题字号就越大。越小，标题字号就越大。 标题标签的格式：标题标签的格式：hnalign=hnalign=参数参数标题内容标题内容 说明：说明：标签是成对出现的，标签是成对出现的，标签共分为六级，在标签共分为六级，在.之间的文字就是第一级标题，是最大最粗的标之间的文字就是第一级标题，是最大最粗的标题；题；.之间的文字是最后一
25、级，是最小最细的标之间的文字是最后一级，是最小最细的标题文字。题文字。alignalign属性用于设置标题的对齐方式，其参数为属性用于设置标题的对齐方式，其参数为 leftleft（靠左对齐），（靠左对齐），enterenter（居中对齐（居中对齐) )，right(right(靠右对齐）。靠右对齐）。标签本身具有换行的作用，标题总是从新的一行开始。标签本身具有换行的作用，标题总是从新的一行开始。2.4文字版面的编辑1818高级教育高级教育 例例例例2-32-3： 设定各级标题设定各级标题 这是一行普通文字这是一行普通文字 一级标题文字一级标题文字 二级标题文字二级标题文字 三级标题文字三级标
26、题文字 四级标题文字四级标题文字 靠右对齐的五级标题文字靠右对齐的五级标题文字 靠左对齐的六级标题文字靠左对齐的六级标题文字 2.4文字版面的编辑图2-2例2-3的运行效果1919高级教育高级教育2.4.22.4.2段落标签段落标签 标签对是用来创建一个段落，在此标签对之间加入标签对是用来创建一个段落，在此标签对之间加入的文本将按照段落的格式显示在浏览器上。文件段落的开始的文本将按照段落的格式显示在浏览器上。文件段落的开始由由来标签，段落的结束由来标签，段落的结束由来标签，来标签，是可以省略是可以省略的，因为下一个的，因为下一个的开始就意味着上一个的开始就意味着上一个的结束。的结束。 段落标签
27、是段落标签是HTMLHTML标签符中最常见的一种符号，它位于各段标签符中最常见的一种符号，它位于各段落起始部位，使用该标签符后，每块文本段落之间都会空出落起始部位，使用该标签符后，每块文本段落之间都会空出一行。一行。 标签还有一个属性标签还有一个属性alingaling，它用来指名对象显示时的对齐，它用来指名对象显示时的对齐方式，一般值有方式，一般值有centercenter、leftleft、rightright三种。这三个参数设置段三种。这三个参数设置段落文字的左落文字的左, ,中中, ,右位置的对齐方式。右位置的对齐方式。 格式：格式： palign= 2.4文字版面的编辑2020高级教
28、育高级教育例例例例2-4:2-4: 测试分段控制标签测试分段控制标签 花儿什么也没有。它们只有凋谢在风中的轻微、凄楚而又无奈的吟花儿什么也没有。它们只有凋谢在风中的轻微、凄楚而又无奈的吟怨，怨， 就像那受到了致命伤害的秋雁，悲哀无助地发出一声声垂死的鸣叫。就像那受到了致命伤害的秋雁，悲哀无助地发出一声声垂死的鸣叫。 或许，这便是花儿那短暂一生最凄凉、最伤感的归宿。或许，这便是花儿那短暂一生最凄凉、最伤感的归宿。 而美丽苦短的花期而美丽苦短的花期 却是那最后悲伤的秋风挽歌中的瞬间插曲。却是那最后悲伤的秋风挽歌中的瞬间插曲。 2.4文字版面的编辑2121高级教育高级教育2.4.32.4.3换行标签
29、换行标签 在编写在编写HTMLHTML文件时，我们不必考虑太细的设置，也不必理文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会被浏览器切掉。因为，在会段落过长的部分会被浏览器切掉。因为，在HTMLHTML语言规语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。所以，编写者对于自己需要断行的地方，字转折至下一行。所以，编写者对于自己需要断行的地方，应加上应加上标签。换行标签是个单标签，也叫空标签，不包标签。换行标签是个单标签，也叫空标签，不包含任和内容，在含任和内容，在HTMLHTML文件中的任何位置只要使用了
30、文件中的任何位置只要使用了标标签，当文件显示在浏览器中时，该标签之后的内容将显示在签，当文件显示在浏览器中时，该标签之后的内容将显示在下一行。下一行。 大多数情况下，段落标签符大多数情况下，段落标签符是分隔文本的最佳符号，但是分隔文本的最佳符号，但有时可能会希望重起一行，但在新行与上一行之间并不空出有时可能会希望重起一行，但在新行与上一行之间并不空出一行间距，在这种情况下，最好使用分行标签符一行间距，在这种情况下，最好使用分行标签符。2.4文字版面的编辑2222高级教育高级教育2.4.4水平线段标签标签是单独使用的标签，是水平线标签。这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分
31、，使文档结构清晰明朗，使文字的编排更整齐。通过设置标签的属性值，可以控制水平分隔线的样式。的属性见表2-3：2.4文字版面的编辑2323高级教育高级教育例例2-72-7说明了水平线的各种用法：说明了水平线的各种用法：例例例例2-72-7： 水平线的设定水平线的设定 以下是第一条线段，使用默认的属性来显示以下是第一条线段，使用默认的属性来显示 以下是第二条线段，设置了粗细以下是第二条线段，设置了粗细=5=5颜色为红色的水平线颜色为红色的水平线 以下是第三条线段，设置了水平线宽度以下是第三条线段，设置了水平线宽度width=50%(width=50%(百分比方式百分比方式) 以下是第四条线段，设置
32、了水平线对齐方式以下是第四条线段，设置了水平线对齐方式align=left(align=left(向左对齐向左对齐) ) 2.4文字版面的编辑2424高级教育高级教育2.4文字版面的编辑例例2-7的运行效果的运行效果2525高级教育高级教育2.4.5原样显示文字标签要保留原始文字排版的格式,就可以通过标签来实现,方法是把制作好的文字排版内容前后分别加上始标签和尾标签。2.4.6居中对齐标签文本在页面中使用标签进行居中显示,是成对标签,在需要居中的内容部分开头处加,结尾处加2.4文字版面的编辑2626高级教育高级教育2.4.7注释标签在HTML文档中可以加入相关的注释标签，便于查找和记忆有关的文
33、件内容和标识，但是这些注释内容不会在浏览器中显示出来。这是因为凡是在注释标签内的文字都是隐性的，你可以利用这个空间做为备忘录。但有一点要注意，那就是如果别人查看你的源代码，那么你的这些注释信息就会一览无余了。2.4文字版面的编辑2727高级教育高级教育2.4.82.4.8文字格式控制标签文字格式控制标签是一对很有用的标签，它可以对网页是一对很有用的标签，它可以对网页中文字的字体、大小、颜色进行随意地改变，这些中文字的字体、大小、颜色进行随意地改变，这些改变主要是通过对它的三个属性的控制来实现的，改变主要是通过对它的三个属性的控制来实现的，参见表参见表2-42-4。 格式如下：格式如下： fon
34、tface=3文字文字2.4文字版面的编辑2828高级教育高级教育例例例例2-112-11： 文字的属性设置文字的属性设置 设置文字的字体、颜色、大小设置文字的字体、颜色、大小 fontface=_gb2312color=redsize=5欢迎光临我的网站（字号欢迎光临我的网站（字号size=5size=5） fontface=color=#00ffffsize=3欢迎光临我的网站（字号欢迎光临我的网站（字号size=3size=3） fontface=color=#ff00ffsize=+2欢迎光临我的网站（字号欢迎光临我的网站（字号size=+2size=+2） fontface=colo
35、r=#00ff00size=-1欢迎光临我的网站（字号欢迎光临我的网站（字号size=-size=-1 1） welcommyhomepage.welcommyhomepage. welcommyhomepage.welcommyhomepage. 2.4文字版面的编辑2929高级教育高级教育2.4文字版面的编辑例例2-11的运行效果的运行效果3030高级教育高级教育2.4.9特殊文字样式标签在有关文字的显示中，常常会使用一些特殊的字形或字体来强调、突出、区别以达到提示的效果。为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果，现将常用的标签列举如表2-5所示。2
36、.4文字版面的编辑3131高级教育高级教育现在用一个实例来看看效果：现在用一个实例来看看效果： 例例例例2-122-12： 特殊字体样式特殊字体样式 黑体字黑体字 斜体字斜体字 加下划线加下划线 大型字体大型字体 小型字体小型字体 闪烁效果闪烁效果 42=1642=16（即（即4 4的平方的平方=16=16） uin=fontuin=uout(size=5uout(即输入即输入= =输出输出) 2.4文字版面的编辑3232高级教育高级教育2.4.102.4.10特殊符号的使用特殊符号的使用在在HTMLHTML文档中，有些字符没办法直接显示出来，文档中，有些字符没办法直接显示出来，例如问号例如问
37、号“ “?”?”；有些字符时键盘上没有的，例如；有些字符时键盘上没有的，例如“ “”；还有些字符在；还有些字符在HTMLHTML里有特别的含义，比里有特别的含义，比如小于号如小于号“ “”就表示就表示HTMLHTML标签的开始，这个小于标签的开始，这个小于号是不显示在最终看到的网页里的。那么如果希望号是不显示在最终看到的网页里的。那么如果希望在网页中显示这类符号就必须用一些代码来表示它在网页中显示这类符号就必须用一些代码来表示它们。们。在在HTMLHTML文档中表示一个特殊符号分成三部分：第文档中表示一个特殊符号分成三部分：第一部分是一个一部分是一个& &符号；第二部分是字符名字或者是符号；第
38、二部分是字符名字或者是# #加上字符编号；第三部分是一个分号。比如，要显加上字符编号；第三部分是一个分号。比如，要显示小于号，就可以写示小于号，就可以写<<或者或者<<。2.4文字版面的编辑3333高级教育高级教育2.4文字版面的编辑3434高级教育高级教育例例例例2-132-13： 特殊字符特殊字符 <<赋得古原草送别赋得古原草送别>> 离离原上草，离离原上草， 一岁一枯荣。一岁一枯荣。 野火烧不尽，野火烧不尽， 春风吹又生。春风吹又生。 hrwidth=49%size=5align=centernoshade白居易白居易 ©&c
39、opy; 2.4文字版面的编辑3535高级教育高级教育 在在HTMLHTML页页面面中中，使使用用列列表表标标签签可可以以起起到到编编排排提提纲纲和和格格式式排排序文件的作用。对于强化文档的条理性有很大的帮助。序文件的作用。对于强化文档的条理性有很大的帮助。 HTMLHTML有有三三种种列列表表形形式式：无无序序列列表表(ul)(ul)；有有序序列列表表(ol)(ol)；定定义义列表列表(dl)(dl)。 无无序序列列表表就就是是项项目目各各条条列列间间并并无无顺顺序序关关系系，纯纯粹粹只只是是利利用用条条列列来来呈呈现现资资料料而而已已，此此种种无无序序标标签签，在在各各条条列列前前面面均均
40、有有一一符符号号以以示示区区隔隔；而而有有序序条条列列就就是是指指各各条条列列之之间间是是有有顺顺序序的的，比比如如从从1 1、2 2、33一一直直延延伸伸下下去去；定定义义列列表表则则用用于于对对一一系系列列给给定定的的术术语语给给出出解解释释和和说说明明。表表2-72-7给给出出了了创创建建列列表表时时经经常常用用到的主要标签。到的主要标签。2.5列表标签3636高级教育高级教育2.5.12.5.1无序列表无序列表无序列表使用无序列表使用标签，每一个列表项前使用标签，每一个列表项前使用标签。无序列表不用数字标记每个列表项，而标签。无序列表不用数字标记每个列表项，而采用一个符号来标记每个列表
41、项，比如圆黑点。采用一个符号来标记每个列表项，比如圆黑点。在在和和中可使用属性中可使用属性typetype。typetype有三个取值：有三个取值：type=disctype=disc表示使用实心园作为列表的符号（此为表示使用实心园作为列表的符号（此为typetype的默认值）的默认值）type=circletype=circle表示使用空心园作为列表的符号表示使用空心园作为列表的符号type=squaretype=square表示使用小方块作为列表的符号表示使用小方块作为列表的符号2.5列表标签3737高级教育高级教育无序列表的基本格式如下无序列表的基本格式如下: :第一项第一项第二项第二项
42、第第N N项项2.5列表标签3838高级教育高级教育2.5列表标签例例2-14：这是一个默认的无序列表：这是一个默认的无序列表：国际互联网提供的服务有：国际互联网提供的服务有：WWW服务服务文件传输服务文件传输服务电子邮件服务电子邮件服务使用空心园作为列表符号的列表使用空心园作为列表符号的列表国际互联网提供的服务有：国际互联网提供的服务有：WWW服务服务文件传输服务文件传输服务电子邮件服务电子邮件服务使用各种符号作为列表符号的列表使用各种符号作为列表符号的列表国际互联网提供的服务有：国际互联网提供的服务有：WWW服务服务文件传输服务文件传输服务电子邮件服务电子邮件服务例例2-14运行效果运行效
43、果3939高级教育高级教育 2.5.22.5.2有序列表有序列表 有序列表和无序列表的使用格式基本相同，它使用标签有序列表和无序列表的使用格式基本相同，它使用标签，每一个列表项前使用，每一个列表项前使用标签。各个列表项用带标签。各个列表项用带有前后顺序之分的编号来标记。如果插入和删除一个列表项，有前后顺序之分的编号来标记。如果插入和删除一个列表项，编号会自动调整。编号会自动调整。 顺序编号的设置是由顺序编号的设置是由的两个属性的两个属性typetype和和startstart来完成的。来完成的。type=type=用于编号的数字用于编号的数字, ,字母等的类型，如字母等的类型，如type=at
44、ype=a，则编号用，则编号用小写英文字母排序。小写英文字母排序。start=start=编号开始的数字，如编号开始的数字，如start=2start=2则编则编号从号从2 2开始。开始。 也可以在也可以在标签中设定标签中设定valuevaluenn改变列表行项目的特定编改变列表行项目的特定编号，例如号，例如，则表示该列表项的序号为，则表示该列表项的序号为7 7。 有序列表的有序列表的typetype属性如表属性如表2-82-8所示。所示。2.5列表标签4040高级教育高级教育2.5列表标签标签的基本格式如下：标签的基本格式如下：第第1项项第第2项项第第3项项4141高级教育高级教育例例例例2
45、-152-15： 有序列表有序列表有序列表有序列表 默认的有序列表默认的有序列表默认的有序列表默认的有序列表 国际互联网提供的服务有：国际互联网提供的服务有：国际互联网提供的服务有：国际互联网提供的服务有： wwwwww服务服务服务服务 文件传输服务文件传输服务文件传输服务文件传输服务 电子邮件服务电子邮件服务电子邮件服务电子邮件服务 用小写英文字母标记序号，序号从用小写英文字母标记序号，序号从用小写英文字母标记序号，序号从用小写英文字母标记序号，序号从c c起始起始起始起始 国际互联网提供的服务有：国际互联网提供的服务有：国际互联网提供的服务有：国际互联网提供的服务有： wwwwww服务服务
46、服务服务 文件传输服务文件传输服务文件传输服务文件传输服务 电子邮件服务电子邮件服务电子邮件服务电子邮件服务 远程登录服务远程登录服务远程登录服务远程登录服务 用大写罗马字母标记序号，用大写罗马字母标记序号，用大写罗马字母标记序号，用大写罗马字母标记序号， 其中改变了序号的列表其中改变了序号的列表其中改变了序号的列表其中改变了序号的列表 国际互联网提供的服务有：国际互联网提供的服务有：国际互联网提供的服务有：国际互联网提供的服务有： wwwwww服务服务服务服务 文件传输服务文件传输服务文件传输服务文件传输服务 电子邮件服务电子邮件服务电子邮件服务电子邮件服务 远程登录服务远程登录服务远程登录
47、服务远程登录服务 2.5列表标签例例2-15的运行效果的运行效果4242高级教育高级教育2.5.3嵌套列表将一个列表嵌入到另一个列表中，作为另一个列表的一部分，叫嵌套列表。无论是有序列表和无序列表的嵌套，浏览器都可以自动地分别排列。2.5列表标签4343高级教育高级教育例例2-16：嵌套列表嵌套列表目录目录动物肉类食物动物肉类食物水产品水产品带鱼带鱼螃蟹螃蟹北极虾北极虾家禽家禽三黄鸡三黄鸡湖鸭湖鸭乌鸡乌鸡2.5列表标签植物类食物植物类食物蔬菜蔬菜番茄番茄青菜青菜黄瓜黄瓜水果水果苹果苹果葡萄葡萄香蕉香蕉谷物谷物大米大米高梁高梁玉米玉米人工合成类食物人工合成类食物例例2-16的运行效果的运行效果4
48、444高级教育高级教育2.5.42.5.4定义列表标签定义列表标签/ 定义列表的标签也叫描述性列表，可以用来给每一个列表项定义列表的标签也叫描述性列表，可以用来给每一个列表项再加上一段说明性文字，通常用于术语的定义。再加上一段说明性文字，通常用于术语的定义。 定义列表由定义列表由开始。术语由开始。术语由开始，术语的解释说明由开始，术语的解释说明由开始，开始，里的文字缩进显示。里的文字缩进显示。 定义列表默认为两个层次，第一层为列表项标签定义列表默认为两个层次，第一层为列表项标签，第二，第二层为注释项标签层为注释项标签。和和标签通常是成对使用的。标签通常是成对使用的。也可以一个列表项对应于几个解
49、释项，这种方式很少用。也可以一个列表项对应于几个解释项，这种方式很少用。 默认的注释是显示在另一行中默认的注释是显示在另一行中, ,当使用当使用dlcompact=compact后后, ,注释项和列表项将显示在同一行。注释项和列表项将显示在同一行。 其格式为：其格式为： 第第1 1项项 注释内容注释内容1 1 第第2 2项项 注释内容注释内容2 2 第第3 3项项 注释内容注释内容3 3 2.5列表标签4545高级教育高级教育例例例例2-17:2-17: 定义列表的应用：定义列表的应用： 野生动物：野生动物： 所有非经人工饲养而生活于自然环境下的各种动物。所有非经人工饲养而生活于自然环境下的各
50、种动物。 宠物：宠物： 指猫、狗以及其它供玩赏、陪伴、领养、饲养的动物，指猫、狗以及其它供玩赏、陪伴、领养、饲养的动物，又称作同伴动物。又称作同伴动物。 2.5列表标签4646高级教育高级教育2.6练习题练习题一、思考题：一、思考题：一、思考题：一、思考题：HTMLHTML的含义是什么？的含义是什么？HTMLHTML文档的基本结构是怎样的？文档的基本结构是怎样的？在在HTMLHTML中有哪些使用颜色的方式？它们是怎样表中有哪些使用颜色的方式？它们是怎样表示的？示的？二、操作题：二、操作题：二、操作题：二、操作题：用用HTMLHTML代码编排一个网页，要求对其中的文字使代码编排一个网页，要求对其中的文字使用各种显示效果，（例如修饰字体、字号、颜色等）用各种显示效果，（例如修饰字体、字号、颜色等），并且对其版面的布置应当整洁、美观。，并且对其版面的布置应当整洁、美观。使用列表标签编排一个混合嵌套的列表。要求嵌套使用列表标签编排一个混合嵌套的列表。要求嵌套的层数在三层以上，每层的项数也至少有三项。的层数在三层以上，每层的项数也至少有三项。4747高级教育高级教育
