网页设计第2章

1、HTML基础与文字版面设计 本章知识技能要点：本章知识技能要点： HTML标签与浏览器显示效果的基本对应关系 HTML的基本结构组成 简单页面的编排 在HTML中颜色的使用 掌握文字版面编辑的基本要领以及,和标签的基本用法 掌握标题标签，特殊文字和特殊符号的使用方法 熟练掌握利用标签设置各种字体样式的方法 掌握各类列表的编排方法2.1 HTML基础基础2.1.1 HTML概述 HTML英语意思是：英语意思是：Hypertext Marked Language，即超文本标签语言，即超文本标签语言,是一种用来制作是一种用来制作超文本文档的简单标签语言。超文本文档的简单标签语言。 用用HTML编写的

2、超文本文档称为编写的超文本文档称为HTML文档，它能文档，它能独立于各种操作系统平台（如独立于各种操作系统平台（如Unix，Windows等）。等）。 自自1990年以来年以来HTML就一直被用作就一直被用作World Wide Web 的信息表示语言，用于描述的信息表示语言，用于描述HOMEPAGE的的格式设计和它与格式设计和它与WWW上其它上其它HOMEPAGE 的连的连结信息。使用结信息。使用HTML语言描述的文件，需要通过语言描述的文件，需要通过WWW浏览器显示出效果。浏览器显示出效果。 HTML的普遍应用就是带来了的普遍应用就是带来了超文超文本的技术本的技术-通过单击鼠标从一个通过单

3、击鼠标从一个主题跳转到另一个主题，从一个页主题跳转到另一个主题，从一个页面跳转到另一个页面与世界各地主面跳转到另一个页面与世界各地主机的文件链接，直接获取相关的主机的文件链接，直接获取相关的主题。题。 编辑编辑HTML超文本文件时需要用到的一些超文本文件时需要用到的一些标签标签。 在在HTML中每个用来作标签的符号都是一条命令，中每个用来作标签的符号都是一条命令，它告诉浏览器如何显示文本。它告诉浏览器如何显示文本。 这些标签均由这些标签均由“”符号符号以及一个字符串组以及一个字符串组成。而浏览器的功能是对这些标签进行解释，显成。而浏览器的功能是对这些标签进行解释，显示出文字、图像、动画、播放声

4、音。这些标签符示出文字、图像、动画、播放声音。这些标签符号用号用“”来表示。来表示。2.1 HTML基础基础 HTML只是一个纯文本文件。只是一个纯文本文件。 创建一个创建一个HTML文档只需要两个工具文档只需要两个工具，一，一个是个是HTML编辑器，一个编辑器，一个WEB浏览器。浏览器。 HTML编辑器是用于生成和保存编辑器是用于生成和保存HTML文档文档的应用程序。的应用程序。WEB浏览器是用来打开浏览器是用来打开WEB网页文件，提供查看网页文件，提供查看WEB资源的客户端程资源的客户端程序。序。 2.1.2 超文本中的标签2.1 HTML基础基础 HTML的标签分单标签和成对标签两种。的

5、标签分单标签和成对标签两种。成成对标签是由首标签对标签是由首标签 和尾标签和尾标签组成的组成的.成对标签的作用域只作用于这对成对标签的作用域只作用于这对标签中的文档。标签中的文档。 单独标签的格式单独标签的格式，只需单独放在相，只需单独放在相应的位置插入元素就可以了。应的位置插入元素就可以了。 大多数标签都有自己的一些属性大多数标签都有自己的一些属性, 属性要写在始属性要写在始标签内，标签内，属性用于进一步改变显示的效果属性用于进一步改变显示的效果, 各属各属性之间无先后次序，属性是可选的，属性也可以性之间无先后次序，属性是可选的，属性也可以省略而采用默认值省略而采用默认值;其格式如下：其格式

6、如下： 内容内容2.1.4 HTML的基本结构2.1 HTML基础基础一个一个HTMLHTML文档是由一系列的元素和标签组成文档是由一系列的元素和标签组成. .元素元素名不区分大小写名不区分大小写.HTML.HTML用标签来规定元素的属性和用标签来规定元素的属性和它在文件中的位置。它在文件中的位置。超文本文档分超文本文档分文档头文档头和和文档体文档体两部分，两部分，在文档头里，对这个文档进行了一些必要的定义，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。文档体中才是要显示的各种文档信息。头头 部部 信信 息息文文 档档 主主 体，体， 正正 文文 部部 分分 其

7、中其中在最外层，在最外层， 表示这对标签间的内容是表示这对标签间的内容是HTML文文 档。档。我们还会看到一些我们还会看到一些hompage省略省略标签，因为标签，因为.HTML 或或.htm 文件被文件被web浏览器默认为是浏览器默认为是HTML文档。文档。 之间包括文档的头之间包括文档的头部信息，如文档总标题等，若不需头部信息则可省略此标签。部信息，如文档总标题等，若不需头部信息则可省略此标签。标签一般不省略，表示正文内容的开始。标签一般不省略，表示正文内容的开始。例例2-1：以下是一个最基本的超文本文档的源代码：以下是一个最基本的超文本文档的源代码文件头文件头我的第一个网页我的第一个网页

8、学习学习HTML网页制作网页制作文件体文件体HTML英语是：英语是：Hypertext Marked Language，即超文本标签语言。，即超文本标签语言。2.1 HTML基础基础图2-1 例2-1的运行效果2.2 页面的整体编排页面的整体编排2.2.1 页面的头标签 页面的头标签和构成HTML文档的开头部分，在浏览器窗口中，头部信息是不被显示在正文中的,在此标签中可以插入其它标签, 用以说明文件的标题和整个文件的一些公用属性。在此标签对之间可以使用、等标签对，这些标签对都是描述HTML文档相关信息的标签对，标签对之间的内容是不会在浏览器的框内显示出来的。两个标签必须一块使用 2.2.2 页

9、面的标题标签 页面的标题标签决定了显示在页面标题栏中的文字。使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息，那些信息一般是网页的“主题”，要将网页的主题显示到浏览器的顶部其实很简单，只要在标签对之间加入要显示的文本即可。2.2 页面的整体编排页面的整体编排 例如： 我的第一个网页 2.2 页面的整体编排页面的整体编排2.2.3 主体标签 标签是HTML文档的主体部分，其中放置的是页面中所有的内容，如图片、文字、表格、表单、超链接等设置。在此标签对之间可包含、等等众多的标签，它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标签必须一块使用。 2.2 页面的整体编排页

10、面的整体编排 标签有自己的属性，设置 标签内的属性，可控制整个页面的显示方式。表2-1 标签的主要属性 2.2 页面的整体编排页面的整体编排 例例2-22-2： HTML文档中基本标志的使用 显示在浏览器最标题栏中的文本 红色背景、蓝色文字 2.2 页面的整体编排页面的整体编排颜色值是一个关键字或一个RGB格式的数字。在网页中有许多标签都会用到颜色的设置，在此一并给予介绍。颜色是由 red green blue 三原色组合而成的，在 HTML 中对颜色的定义是用十六进制数值进行表示的，对於三原色 HTML 分别给予两个十六进制数值去定义，也就是每个原色可有 256 种彩度，故此三原色可混合成1

11、6777216种颜色。应用时常在每个 RGB 值之前加上“ # “ 符号，如：bgcolor=#336699。若用英文名字表示颜色时则可以直接写其英文名字，如 bgcolor=green RGB颜色可以有四种表达形式:： #RRGGBB (如，#00cc00) #RGB (如，#0c0) RGB(x,x,x) x是一个介乎0到255之间的整数 (如，RGB(0,204,0) RGB(y%,y%,y%) y是一个介乎0.0到100.0之间的整数 (如， RGB(0%,80%,0%)表1-2是部分颜色的RGB代码对照表。2.3 网页中颜色的设置网页中颜色的设置 2.4.1 标题标签 一般文章都有标

12、题、副标题、章和节等结构，HTML中也提供了相应的标题标签,标签用于设置网页中的标题文字，被设置的文字将以黑体或粗体的方式显示在网页中。其中n为标题的等级。HTML总共提供六个等级的标题，n越小，标题字号就越大。 标题标签的格式：hn align=参数标题内容说明：标签是成对出现的，标签共分为六级，在.之间的文字就是第一级标题，是最大最粗的标题；.之间的文字是最后一级，是最小最细的标题文字。align属性用于设置标题的对齐方式，其参数为 left（靠左对齐），enter（居中对齐)，right (靠右对齐）。标签本身具有换行的作用，标题总是从新的一行开始。2.4 文字版面的编辑 例例2-32-

13、3：设定各级标题这是一行普通文字一级标题文字二级标题文字三级标题文字四级标题文字靠右对齐的五级标题文字靠左对齐的六级标题文字 2.4 文字版面的编辑 图2-2 例2-3的运行效果2.4.2 段落标签 标签对是用来创建一个段落，在此标签对之间加入的文本将按照段落的格式显示在浏览器上。文件段落的开始由来标签，段落的结束由来标签，是可以省略的，因为下一个的开始就意味着上一个的结束。2.4 文字版面的编辑 段落标签是HTML标签符中最常见的一种符号，它位于各段落起始部位，使用该标签符后，每块文本段落之间都会空出一行。 标签还有一个属性align，它用来指名对象显示时的对齐方式，一般值有center、l

14、eft、right三种。这三个参数设置段落文字的左,中,右位置的对齐方式。 格式： 例例2-4:2-4:测试分段控制标签花儿什么也没有。它们只有凋谢在风中的轻微、凄楚而又无奈的吟怨，就像那受到了致命伤害的秋雁，悲哀无助地发出一声声垂死的鸣叫。或许，这便是花儿那短暂一生最凄凉、最伤感的归宿。而美丽苦短的花期却是那最后悲伤的秋风挽歌中的瞬间插曲。2.4 文字版面的编辑 2.4.3 换行标签 在编写HTML文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会被浏览器切掉。因为，在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。所以，编写者对于自己需要断行的地方

15、，应加上标签。换行标签是个单标签，也叫空标签，不包含任和内容，在HTML文件中的任何位置只要使用了标签，当文件显示在浏览器中时，该标签之后的内容将显示在下一行。 大多数情况下，段落标签符是分隔文本的最佳符号，但有时可能会希望重起一行，但在新行与上一行之间并不空出一行间距，在这种情况下，最好使用分行标签符。2.4 文字版面的编辑 2.4.4 水平线段标签 标签是单独使用的标签，是水平线标签。这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分，使文档结构清晰明朗，使文字的编排更整齐。通过设置标签的属性值，可以控制水平分隔线的样式。的属性见表2-3：2.4 文字版面的编辑 属性属性参数参数

16、功能功能单位单位默认值默认值size设置水平线的粗细pixel2width设置水平线的宽度pixel100%alignleft、center、right设置水平线的对齐方式centercolor设置水平线的颜色blacknoshade取消水平线的3d阴影例2-7说明了水平线的各种用法：例例2-72-7：水平线的设定以下是第一条线段，使用默认的属性来显示以下是第二条线段，设置了粗细=5 颜色为红色的水平线以下是第三条线段，设置了水平线宽度width=50%(百分比方式)以下是第四条线段，设置了水平线对齐方式align=left(向左对齐) 2.4 文字版面的编辑 2.4 文字版面的编辑 例例2-

17、7的运行效果的运行效果 2.4.5 原样显示文字标签 要保留原始文字排版的格式,就可以通过标签来实现,方法是把制作好的文字排版内容前后分别加上始标签和尾标签。2.4 文字版面的编辑 2.4.6 居中对齐标签 文本在页面中使用标签进行居中显示,是成对标签,在需要居中的内容部分开头处加,结尾处加2.4.7 注释标签 在HTML文档中可以加入相关的注释标签，便于查找和记忆有关的文件内容和标识，但是这些注释内容不会在浏览器中显示出来。这是因为凡是在注释标签内的文字都是隐性的，你可以利用这个空间做为备忘录。但有一点要注意，那就是如果别人查看你的源代码，那么你的这些注释信息就会一览无余了。2.4 文字版面

18、的编辑 2.4.8 文字格式控制标签 是一对很有用的标签，它可以对网页中文字的字体、大小、颜色进行随意地改变，这些改变主要是通过对它的三个属性的控制来实现的，参见表2-4。 格式如下： 文字2.4 文字版面的编辑 例例2-11：文字的属性设置设置文字的字体、颜色、大小欢迎光临我的网站（字号size=5）欢迎光临我的网站（字号size=3）欢迎光临我的网站（字号size=+2） 欢迎光临我的网站（字号size=-1）welcom my homepage.welcom my homepage. 2.4 文字版面的编辑 2.4 文字版面的编辑 例例2-11的运行效果的运行效果 2.4.9 特殊文字样

19、式标签 在有关文字的显示中，常常会使用一些特殊的字形或字体来强调、突出、区别以达到提示的效果。为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果，现将常用的标签列举如表2-5所示。2.4 文字版面的编辑 标签标签效果效果被定义的文字以粗体显示被定义的文字以斜体显示被定义的文字以下划线显示被定义的文字以打字机显示被定义的文字以大型字体显示被定义的文字以小型字体显示被定义的文字以闪烁显示强调字体 一般以斜体出现特别强调 斜体出现上标字体下标字体现在用一个实例来看看效果： 例例2-12： 特殊字体样式 黑体字 斜体字 加下划线 大型字体 小型字体 闪烁效果42=16（即

20、4的平方=16）uin=uout(即输入=输出)2.4 文字版面的编辑 2.4.10 特殊符号的使用 在HTML文档中，有些字符没办法直接显示出来，例如问号“?”；有些字符时键盘上没有的，例如“”；还有些字符在HTML里有特别的含义，比如小于号“”就表示HTML标签的开始，这个小于号是不显示在最终看到的网页里的。那么如果希望在网页中显示这类符号就必须用一些代码来表示它们。2.4 文字版面的编辑 在HTML文档中表示一个特殊符号分成三部分：第一部分是一个&符号；第二部分是字符名字或者是#加上字符编号；第三部分是一个分号。比如，要显示小于号： 例如<或者<。2

21、.4 文字版面的编辑 例例2-13：特殊字符<赋得古原草送别>离离原上草，一岁一枯荣。野火烧不尽，春风吹又生。白居易 ©2.4 文字版面的编辑 在HTML页面中，使用列表标签可以起到编排提纲和格式排序文件的作用。对于强化文档的条理性有很大的帮助。 HTML有三种列表形式：无序列表(ul)；有序列表(ol)；定义列表(dl)。 无序列表就是项目各条列间并无顺序关系，纯粹只是利用条列来呈现资料而已，此种无序标签，在各条列前面均有一符号以示区隔； 而有序条列就是指各条列之间是有顺序的，比如从1、2、3一直延伸下去； 定义列表则用于对一系列给定的术语给出解

22、释和说明。表2-7给出了创建列表时经常用到的主要标签。2.5.1无序列表 无序列表使用标签，每一个列表项前使用标签。无序列表不用数字标记每个列表项，而采用一个符号来标记每个列表项，比如圆黑点。 在和中可使用属性type。type有三个取值： type=disc表示使用实心园作为列表的符号（此为type的默认值） type=circle表示使用空心园作为列表的符号 type=square表示使用小方块作为列表的符号无序列表的基本格式如下: 第一项 第二项 第N项 例例2-14：这是一个默认的无序列表：这是一个默认的无序列表：国际互联网提供的服务有：国际互联网提供的服务有：WWW服务服务文件传输服

23、务文件传输服务电子邮件服务电子邮件服务使用空心园作为列表符号的列表使用空心园作为列表符号的列表国际互联网提供的服务有：国际互联网提供的服务有：WWW服务服务文件传输服务文件传输服务电子邮件服务电子邮件服务使用各种符号作为列表符号的列表使用各种符号作为列表符号的列表国际互联网提供的服务有：国际互联网提供的服务有：WWW服务服务文件传输服务文件传输服务电子邮件服务电子邮件服务例例2-14运行效果运行效果 2.5.2 有序列表 有序列表和无序列表的使用格式基本相同，它使用标签，每一个列表项前使用标签。各个列表项用带有前后顺序之分的编号来标记。如果插入和删除一个列表项，编号会自动调整。 顺序编号的设置

24、是由的两个属性type和start来完成的。 type=用于编号的数字,字母等的类型，如type=a，则编号用小写英文字母排序。 start=编号开始的数字，如start=2则编号从2开始。 也可以在标签中设定valuen改变列表行项目的特定编号，例如，则表示该列表项的序号为7。标签的基本格式如下：标签的基本格式如下：第第1项项第第2项项第第3项项例例2-15：有序列表有序列表默认的有序列表默认的有序列表国际互联网提供的服务有：国际互联网提供的服务有：www服务服务文件传输服务文件传输服务电子邮件服务电子邮件服务用小写英文字母标记序号，序号从用小写英文字母标记序号，序号从c起始起始国际互联网提供的服务有：国际互联网提供的服务有： www服务服务 文件传输服务文件传输服务 电子邮件服务电子邮件服务 远程登录服务远程登录服务用大写罗马字母标记序号，用大写罗马字母标记序号，其中改变了序号的列表其中改变了序号的列表 国际互联网提供的服务有：国际互联网提供的服务有：www服务服务