1、v本章重点：1）HTML标记的用法和功能；2）HTML网页的基本结构；3）利用HTML标记符编写简单网页。1.1 HTML简介1.2 HTML常用标记1.3 CSS概述1.4 加载CSS样式的三种方式1.5 CSS与标记对应的三种方式vHTML（HyperTextMark-upLanguage）即超文本标记语言，是一种用来在WWW（World Wide Web）上表示信息的描述性的标记语言。vHTML文本是由HTML标记组成的描述性文本，HTML标记可以说明文字、图形、动画、声音、表格、链接等。v生成一个HTML文本通常可以通过以下四种方法：（1）利用各种文本编辑器（如Windows记事本）直
2、接使用HTML语言编写。（2）借助一些HTML的编辑工具，如FrontPage、HotDog等。（3）其他格式的文档（如WORD文档）转换成HTML文本。（4）由Web服务器端实时动态地生成。v【例1-1】创建一个简单的网页，步骤如下：（1）选择“开始”“程序”“附件”“记事本”命令，打开记事本程序。输入以下HTML代码：HTML实例 这是一个简单的HTML实例 （2）选择“文件”菜单下的“保存”命令，打开“保存”对话框，在“文件名”框中输入文件名和文件扩展名（1-1.htm），选择合适的目录，然后单击“保存”按钮。（3）在浏览器中打开运行该文件（1-1.htm），运行结果如图1-1所示。v标
3、记符是HTML语言中一些定义网页内容格式和显示的指令，而标记符的属性用于进一步控制网页内容的显示效果。1.2.1页面基本属性标记 不管网页的内容多么丰富、版式多么复杂，网页的基本结构却都是一样的。1网页的基本结构 文档标题 这是HTML文档的主要部分 从本例中我们看到：HTML的结构包括头部（HEAD）、主体（BODY）两大部分，其中头部描述浏览器所需的信息，而主体则包含页面的具体内容及格式说明。2语言字符集(Charsets)的信息 可在 HTML 文件中设置 MIME 字符集信息。您在浏览主页时，最好自己在浏览器的选项菜单内选择相应的语言(language encoding)。但是如果 H
4、TML 文件里写明了设置，浏览器就会自动设置语言选项。尤其是主页里用到了字符实体(entities)，则该主页就应该写明字符集信息。否则，您在浏览该主页时，若未正确设置语言选项，显示将可能混乱。3背景色彩和文字色彩 设置网页的背景色彩和文字色彩可通过设置BODY标记的属性来实现，具体格式如下：BODY标记各参数的含义见表1-1。4添加注释 由于Web站点需要经常更新，而且制作时往往是几个人合作，所以创建的页面必须易于维护，而添加注释是增强文件可读性的重要手段。HTML中的注释是由开始标记符组成的。这两个标记符中间的内容就是注释的内容，它们不会在浏览器中显示。5画线在网页中产生分隔线可用标记来实
5、现，其用法为：属性说明：（1）width用于指定分隔线的宽度，宽度值的指定方式有两种，一是用像素点来指定，例如，若要产生宽度为500像素的直线，则实现代码为：另一种方法是用百分比表达，例如，若要产生宽度是网页宽度的75分隔线，则实现代码如下：（2）size用于指定直线的高度。例如，要绘制宽度为80，高度为1的直线，则实现代码如下：（3）align指定直线的对齐方式，取值有Left、Center、Right。（4）noshade指定直线是否有阴影。带有该参数，则直线无阴影。标记一般用于产生水平分隔线，若要产生竖直线，可将width设置为1，size设置为竖直线的高度值。例如：1.2.2 文字属性
6、标记 文字是网页中最主要的页面元素，HTML语言提供了一些用来修饰文字的标记符，可以用它们来设置文字的字体、颜色、大小和样式等属性。1字体控制主要用于控制文字的字体、大小和颜色，通过标记符来实现。其语法格式为：文本例如，若要以绿色，宋体号字输出“HTML实例”，则实现代码为：HTML实例2标题字号语法格式为：说明：是16的数字，表示最大的标题，表示最小的标题。在默认状态下，标记符中的文字在浏览器中显示时都是黑体，而且文字将自动在标记符后换行。【例1-2】在网页中分别用六级标题标记符输出一个测试效果的文本。代码如下：标题字体演示这是第一级标题这是第二级标题这是第三级标题这是第四级标题这是第五级标
7、题这是第六级标题 运行结果如下：3字体效果语法格式为：说明：使用这些标记符可以设置字体的样式，常用的字体样式标记符见表1-3所示 4分段和换行控制要实现分段或换行，需要通过相应的标记符来实现。（1）分段标记：对段落的分段使用标记来实现。定义段落的开始，定义段落的结束，通常可以省略不写。单独的一个标记可产生一个空行。（2）换行和禁止换行：换行用标记来实现，没有对应的结束标记，它指示浏览器在标记处执行一个换行动作。是使当前行强行中断而另起一行，新的行与原来的行保持相同的属性，换句话说，新行与原来的行在同一个段落中，而P标记符则是另起一个新的段落。5预格式化文本语法格式为：文本说明：浏览器按照编缉文
8、档时和标记符之间字符的位置将内容毫无变动的显示出来。换句话说，在HTML文档中写的时候是什么样，浏览器中显示的就是什么样。6文本的对齐方式语法格式为：#=left、right、center例如：左对齐 右对齐7文本的分区显示语法格式为：文本内容例如：此段文本左对齐显示 此段文本居中显示 此段文本右对齐显示1.2.3 超级链接标记 具备超级链接能力是HTML的最大优势，利用超级链接可实现由一个页面切换到另一个页面，由一个网站跳转到另一个网站；或跳转到同一网页的某一个指定位置；或跳转进入指定的电子邮箱。1定义超链接语法格式为：说明：超级链接标记符A主要有以下几个属性：（1）href：定义超级链接所
9、指向的文档的URL。如果指定的文件格式是浏览器支持的格式，例如是网页文件.html格式或者图像文件.jpg格式，那么浏览器将在窗口中显示相应的文件内容。如果指定的文件格式不是浏览器支持的格式，如zip压缩文件格式，那么浏览器将自动弹出文件下载对话框。（2）target：目标窗口的打开方式，有四个：_top,_blank,_parent,_self。（3）name：锚名称。该属性一般在创建页面内超链接时使用。页面上的文字和图像都可以添加超链接。在默认状态下，文字被添加了超链接后会变成蓝色，而且文字下方自动添加下划线；如果是图像添加了超链接，则图像会添加蓝色边框。当鼠标移动到添加了超链接的页面元素
10、上方时，鼠标指针会变成小手的形状。2创建页面间的超链接语法格式为说明：在创建页面超链接时，既可以使用相对路径（指向同一网站内的文件），也可以使用绝对路径（指向本站点以外的文件）。在当前网页创建超链接，链接到“新浪”网站首页。在当前需要设置超级链接的地方，加入以下代码即可，其实现代码为：新浪链接另外，也可用图像作为超链接的标志。例如当前网页用于链接到新浪网站的图片logo.gif存放在Images目录中，则用图像作为超链接的实现方法为：利用超链接还可切换到同一网站的另一个网页，例如在当前网页中有一个名为“关于站长”的菜单项，现要定义一个超链接，以实现当前用户单击时，切换到站长的页面，假设介绍站长
11、的页面文件名为intro.htm，则该超链接的实现方法为：关于站长3创建页面内的超链接语法格式为：说明：创建页面内超链接分两步：首先定义锚点，如：，然后再创建指向锚点的超链接，。这两部分在网页中没有先后顺序，但应注意锚点名应惟一，不要重复。若要链接到页面外的锚点处，则链接方法为：文本4指向电子信箱的链接语法格式为：链接文字说明：创建指向电子信箱的超链接时，属性Herf中使用的mailto协议。该协议后面直接跟一个具体的电子信箱地址。1.2.4 图片格式在网页中插入图像使用标记来实现，没有对应的结束标记。其用法为：说明：（1）如若在网页的当前位置插入images/flower.jpg图形，边框宽
12、度设置为1，则实现代码为：（2）Align属性用于设置图像的对齐与布局方式。图像的对齐方式分为两种情况，一种是水平方向的对齐，另一种是垂直方向的对齐。1.2.5 列表标记 列表是一种常用的组织信息的方式，HTML也提供了用于实现列表的标记符。HTML语言可以实现以下常用列表：有序列表、无序列表、定义列表。1有序列表语法：说明：有序列表符OL 包含两个属性：TYPE 和START。使用TYPE属性可以设置列表编号的样式。HTML中有序列表的编号样式有以下几种：1：表示是十进制数，如1，2，3等，该样式是默认样式；a：表示是小写字母，如a,b,c等；A：表示是大写字母，如A,B,C 等；i:表示是
13、小写罗马数字，如，等；I：表示是大写罗马字母，如，等。使用START属性可设置列表的起始编号，它定义有序列表的起始数字，通常不必设置。有序列表中的列表项标记符LI也有两个属性：TYPE和VALUE。TYPE意义与OL标记符中的TYPE属性相同；VALUE属性使用指定一个新的数字序列起始值，使用该属性可以创建一个非连续性的数字序列。【例1-4】一个有序列表的例子，其源代码如下所示：智力问答把一头大象装进冰箱里总共分几步？把冰箱门打开把大象装进去把冰箱门关上运行结果如图：2无序列表语法：说明：无序列表的标记符UL只有一个属性TYPE(项目符号样式)，它有三种取值：disc（实心圆）、circle（
14、空心圆）和square（方框）。无序列表中的列表项标记符LI也只有一个属性值TYPE，它的取值与UL标记符中的取值一样，用于控制当前列表项的项目符号样式。【例1-5】一个无序列表的例子，其源代码如下所示：学生处分 在藉学生的处分有几种？通报批评警告记过开除学籍，留校查看勒令退学 运行结果如图：3定义列表语法：说明：DL是英文“definition list(定义列表)”的缩写。开始标记符和结束标记符之间的内容就是定义列表的内容。定义列表中的条目是通过术语使用标记符DT和术语定义标记符DD来创建的。【例1-6】一个定义列表的例子，其源代码如下所示：世说新语 放弃把握的反面是放弃，选择了一个机会，
15、就等于放弃了其他所有的可能失恋不是不在乎，是在乎不起。离婚不是不在乎，是一切还来得及。幼稚不要怕人说我们幼稚，这正说明你还年轻，还充满活力。谣言这是一种传染病，沉默是最好的疫苗。运行结果如图：1.2.6 表格标记 表格是HTML网页的一个非常重要的元素，除了规范数据的输出外，在网页设计中，常常用它来进行版面布局的设计和定位。1表格的组成表格由表格标题（可省略）、表头和若干表行构成，每一表行又由若干单元格组成。表格的各组成元素如图所示。此处为表格标题表头表行 单元格列标题1列标题2列标题3内容1内容2内容32定义表格的标记符表格是由多个部分构成的，因此定义表格时，将用到多种标记符，这些标记符是：
16、定义表格的开始和结束定义表格标题的开始和结束（可省略）定义表行的开始和结束，一组和产生一个表行定义单元格的开始和结束，一组和产生一个单元格定义表头单元格的开始和结束，一组和产生一个表头单元格在和之间的部分，即为该单元格显示的数据，若该单元格无数据，显示为空，则应表达为 ，其中 在HTML中代表空格。和之间的部分，即为表头单元格所显示的数据，该数据以加粗居中方式显示。表头也可以不用而直接用来表示。【例1-7】用HTML标记符产生一个宽度为500像素的2行、列的表格，单元格内容自定。其代码如下：123456运行结果如图：3表格标记符的属性对表格的更详细控制，可通过表格标记符的相
17、关属性来实现。（）标记的属性标记的属性用于从整体上控制表格的外观和形状，常用的属性主要有：1）Width、Height属性：该组属性用于设置表格的宽度和高度。其宽度或高度值可用像素表示，也可用百分数表示。例如，若要产生宽度为700，高度为400像素的表格，则定义方法为：若要产生一个宽度为网页宽度的85的表格，则定义方法为：2）Border属性：定义表格的边线的宽度。若要设置为0或不设置，则为无边框的表格。若要产生一个宽度为700，边线宽度为1的表格，则定义方法为：3）Bgcolor、Bordercolor属性：Bgcolor用于设置整个表格的背景颜色；Bgcolor属性对于和标记都有效，作用于
18、标记时，用于设置该行的背景色；作用于标记，则仅设置该单元格的背景颜色。Bordercolor用于设置表格的边线颜色，只有在Border属性设置为非0时有效。4）Background属性：用于设置表格的背景图形。设置表格的背景图形后，表格的背景颜色失效。例如，若要设置表格的背景图形为images/bg.jpg，则设置方法为：5）Cellpadding、Cellspacing属性：Cellpadding属性用于设置单元格中的文本与表格边线的间距；Cellspacing用于设置表格的各单元格之间的间距。例如，若要设置单元格间距为1，单元格文本与表格边线的间距为2，则设置方法为：6）Align属性：用
19、于设置表格在网页中的对齐方式，取值有Left、Center、Right。例如，若要设置表格在网页中居中，则设置方法为：（2）标记的属性：标记常用的属性主要有bgcolor和align，分别用于设置该行的背景颜色和文本的对齐方式。利用的bgcolor属性，可以实现不同行显示不同的背景颜色。（3）标记的属性：标记常用的属性主要有bgcolor、bordercolor、width、height、align和valign，分别用于设置该单元格的背景颜色、单元格的边框颜色、宽度、高度、单元格文本在水平方向的对齐方式和在垂直方向的对齐方式【例1-8】试用HTML标记符产生图1-8所示的表格，表格宽度为40
20、0，各行的行高为24，表格在网页中居中对齐；表头背景颜色为#0000CC，表头文本颜色为#FFFFFF，表格边框宽度为1边框颜色为#0099CC；各数据项均居中对齐，第1列的宽度为53，第2 列的宽度为116，第3列宽度为134，第4列宽度为87。实现的HTML代码为：学号姓名出生日期住址 001 王小明 19820206 沈阳 002 赵爽 19831206 大连运行结果如图：4单元格的合并利用单元格的合并，可以形成不规则的表格。合并的方式有跨列合并和跨行合并两种。（1）跨列合并：跨列合并即是将多列合并成一个单元格，可通过标记的colspan属性来实现，其用法为：文本【例1-9】试产生一个2
21、行3列，宽度为400，边线宽度为1的表格，然后将第1行的第2和3两个单元格合并。实现的HTML代码为：第1行1列这是合并后的单元格 第2行1列第2行2列第2行3列v运行结果如图：（2）跨行合并：行合并通过标记的Rowspan属性来实现，其用法为：合并形成的单元格的内容【例1-10】产生一个3行3列，宽度为400，边线宽度为1的表格，然后将第1列的第1行和第2行的两个单元格合并。其实现的HTML代码为：第1行、第2行合并后的单元格第1行第2列第1行第3列 第2行第2列第2行第3列 运行结果如图：1.2.7 表单标记 为了提高网页的交互性，收集用户在网页中输入的信
22、息，HTML专门提供了表单，在表单中可以添加使用命令按钮、文本框、密码输入框、复选框、单选框、列表框、组合框等界面对象，以便接收用户输入的数据。利用表单可以集中管理这些界面对象，并提供提交数据和重置数据的方法。1表单的定义（1）表单的定义方法 在HTML中，表单利用和标记定义，其用法格式为：和标记间用于定义表单中的界面对象。（2）表单的属性 1）Name属性：用于定义表单对象的名称。定义表单对象名后，可方便程序中引用表单中的对象，为可选项。若将表单的对象名定义为thisform，在程序中就可通过以下方式来访问或设置表单中界面对象的值：document.thisform.界面对象名.value
23、表单中界面对象的值由value属性来设置或返回。Document是浏览器提供的一个对象，代表当前页面，可直接访问。2）Method属性：用于设置表单提交数据的方法，其取值为Post或Get。在后面的章节中会讲到。3）Enctype属性：该属性用于指定表单提交数据时所采用的编码方式，默认的编码方式是“application/x-www-form-urlencoded”，即采用URL编码方式。通常情况下都应采用这种编码方式，所以Enctype属性通常可以不指定。4）Action属性：该属性用于设置一个接收和处理表单提交数据的脚本程序。即设置将表单数据提交给谁。在ASP应用中，通常设置为某一个ASP
24、页面，另外，也可将表单数据提交给某个指定的电子邮件信箱。（3）表单的方法 表单对象提供有submit和reset方法，分别用于实现表单数据的提交和重置操作。1）submit方法：该方法用于将表单数据提交给action属性指定的脚本程序。功能与表单中的提交命令按钮(submit)等效。例如，若要提交login表单中的数据，则实现的代码为：document.login.submit();2）reset方法：该方法用于将表单中各个界面对象的值重置为空，或重置为初始状态。在用户填写表单数据时，若需要全部重新填写，则可调用该方法来使表单数据复位。例如，若要使名为login的表单数据复位，则实现的代码为：
25、document.login.reset()；2表单的界面对象表单相当于一个载体，必须在表单中添加界面对象，才能实现传送数据的目的，表单界面对象，通常也称为表单域对象。下面分别介绍表单中可使用的界面对象，以及这些对象的用法和功能。(1)单行文本域：单行文本域用于产生一个文本输入框，以实现单行数据的输入。定义方法为：其中，Type和Name属性是必须设置的，其他属性均为可选项。Type属性决定所产生的界面对象的类型；Name属性用于定义该文本域的名称；Size属性设置文本域的显示宽度是多少个字符宽；MaxLength设置文本域最多可以接收多少个字符；Value属性用于给文本域指定一个初始值。例如
26、，若要定义一个名为info的表单，在表单中定义一个用于接收用户名的输入框username,输入框的宽度为15，最多可接收12个字符，表单数据提交给userconfirm.asp，则定义方法为：用户名 表单中各界面对象的值，均是通过Value属性来存储的，通过访问该属性，可获得或设置界面对象的值。访问表单中各界面对象的属性的格式为：document.表单名.界面对象名.属性名 因此，若要获得info表单中名为username的文本域的值，则获取方法为：document.info.username.value 若要设置表单中该文本域的值为trainingguest,则设置方法为：document.
27、info.username.value=trainingguset(2)口令输入框：口令输入框是单行文本域的一种特例，外观上与单行文本域一样，但当用户输入数据时，数据会用“*”替代显示，可防止他人看到用户所输入的真实数据，常用于密码输入。其定义方法为：(3)隐藏表单域：隐藏表单域不会显示出来，用户当然也无法更改其数据。通过隐藏表单域，可悄悄向服务器发送一些用户不知道的信息。其定义方法为：(4)多行文本域：多行文本域常用于接收大数据量的场合，可同时显示多行文本，定义方法为：文本readonly为可选项，若选用，则多行文本域变为只读。例如，若要产生一个6行40列的多行文本域，则定义方法为：(5)列
28、表框：利用列表框可以提供一些候选项供用户选择，列表框用标记符定义，其定义方法为：列表项文本1 列表项文本2 列表项文本n说明：1）Size属性用于定义列表框的高度，即一次能看到的列表项的数目。若设置为1或不设置,则为下拉式列表框；若要设置为大于或等于2的值，则为滚动式列表框。2）Mutiple为可选项，若选用该参数项，则允许多项选择。3）标记用于定义具体的列表项，Value属性用于设置该列表项代表的值，即当用户选中该列表项后，表单所提交的值。Selected为可选项，用于指定默认的候选项，只能有一个列表项可选用该参数。【例1-11】试分别用下拉式列表框和滚动式列表框显示供用户选择的籍贯。下拉式
29、列表框滚动式列表框 籍贯:北京 上海 重庆 四川 籍贯:北京 上海 重庆 四川运行结果如图：(6)复选框与单选框：复选框和单选框也是提供候选项的一种方法，复选框允许多选，常用于多项选择；单选框常成组使用，在同一组中只能任选其一，常用于单项选择。1）复选框：复选框用标记进行定义，其定义方法为：选项文本 一个标记产生一个复选项，有多个候选项，就用多少个标记。Value用于设置当用户选中该项后，表单所提交的值。Checked为可选项，若选用该参数项，则该复选项呈选中状态。【例1-12】用复选框的方式提供预设定的爱好，供用户选择。可供选择的爱好有：旅游、玩游戏、阅读、体育、唱歌、听音乐。代码为：爱好：
30、旅游玩游戏阅读体育运动唱歌、听音乐运行结果如图：2）单选框定义方法：选项文本单选按钮常成组使用，为了将多个单选钮定义成一组，需要将各选项的Name属性值设置为相同。【例1-13】试用单选钮为用户提供一组职业选项，以供用户选择。代码如下：您的职业是：教师学生工人工程师程序员运行结果如图：（7）命令按钮：表单中可使用的命令按钮有提交命令按钮、复位命令按钮、普通命令按钮三种，提交命令按钮具有内建的表单提交功能，复位命令按钮内建有重置表单数据的功能，普通命令按钮不具有内建的行为，需要指定OnClick事件处理函数，才能实现具体的操作。1）提交命令按钮：提交命令按钮用于实现表单数据的提交，功能上与表单对
31、象的submit方法相同。提交命令按钮的定义方法为：例如，若要在表单中定义一个标题为“登录”的提交命令按钮，其定义方法为：2）复位命令按钮:复位命令按钮的功能与表单对象的reset方法相同。其定义方法为：例如，若要在表单中定义一个标题为“重新填写”的命令按钮，其定义方法为：3）普通命令按钮：普通命令按钮不具有内建的行为，但可通过指定事件处理函数，来为命令按钮指定具体的操作，因此通用性更强，另外，普通命令按钮可用在表单中，也可脱离表单而直接使用。其定义方法为：命令按钮常用的主要是鼠标单击事件（click），可能过Onclick来为其指定事件处理函数或语句，当单击命令按钮时，系统就会自动调用执行所
32、指定的事件处理函数或语句。【例1-14】试在当前页面中设计一名为userinfo的表单，用以收集注册用户的资料，并将其提交给login.asp页面处理。需收集的信息和界面如图所示实现的HTML代码为：用户注册用户注册 用户名:密码 重复密码 性别:男 女 教育水平 硕士以上 大学本科 大专 中专以下 电子邮箱 运行结果如图：1.2.8 框架标记 框架是一种特殊的网页技术,它能够将一个浏览器窗口分割若干区域,使浏览者可以同时看到多个网页的内容。含有框架的网页被称为“框架集网页”，它被框架分隔为多个区域，每个区域单独显示一个网页。通过使用框架，可以将站点中的网页合理地组织起来，并且为浏览者提供更友
33、好的访问界面。1框架的定义框架通过以下的标记来实现：*说明：*中的内容显示在不支持框架的浏览器窗口中，因此这里指向一个普通版本的html文件，以便使用不支持框架浏览器的用户阅读。标记符的作用是将窗口分割为若干个子窗口，子窗口的数目取决于嵌套在该标记符中的标记的数目。标记符有两个属性，rows表示横向分框；cols表示纵向分框。可以将窗口横向分成几个部分，也可以分成纵向几个部分，还可以混和分框。标记的属性 src和 name分别表示该框内要显示的html文件的文件名和该框的名称。2横向分框横向分框用指定，#可以是一个百分数或一个整数。前者规定各框占窗口宽度的百分比，后者指定各框宽度的绝对大小。如
34、果对前者指定了宽度，那么可以将后者指定为“*”，表示剩下的所有宽度都赋予最后一个框。【例1-15】横向分框实例。上面框架的高度是窗口的10，下面框架的高度是60像素，而中间框架的高度为剩下的可以显示的高度。源代码如下：运行结果如图：3纵向分框纵向分框用指定。【例1-16】纵向分框实例。中间框架的宽度是300像素，而左边框架的高度为剩余空间的1/5，右边框架的高度为剩余空间的4/5。构造这个框架的源代码如下：运行结果如图：4框架间的关联通常使用框架的目的是在框架间建立这样的联系，将某一框架内的链接对象显示在另一个框中。这样就可以把其中一个框作为输出框，另一个框为选择框。首先，在分框的frame文
35、件中标记各个框，标记的方法是在中加入name属性，例如定义左边的框为输出，右边框为索引。其次，在index.htm文件中指定输出到哪个框方法是在index.html文件的超级链接中加入target属性，属性值设置为main。就会使得当鼠标单击index.htm中的链接指针，它的输出会显示在左边的框中。CSS是Cascading Style Sheets的简称，一般称为级联式样式表或层叠式样式表。CSS是一种格式化网页元素的标准方法，它通过大量CSS属性扩展了HTML的功能，使Web创作者可以将这些属性应用到整个页面，甚至是整个网站。虽然HTML为网页设计者提供了强大的格式设置功能，但是它必须在
36、每一个需要设置的位置使用格式设置标记符，而不能为具有一定逻辑含义的内容设置统一的格式，而CSS却能够做到这一点。将CSS添加到HTML中有以下三种常用方法：直接嵌入样式表（HEAD标记内引用）内联样式表（BODY内引用）链接外部样式表（文件外引用）在HTML源文件的HEAD标记符中直接使用style标记符来定义CSS，然后在HTML源文件的BODY标记符内再调用CSS。具体语法格式如下：HEAD内引用CSS样式 样式1（定义样式）样式2（定义样式）样式n（定义样式）调用样式 将STYLE属性与HTML标记符BODY中所包含的任何标记符联合使用，这个属性能够将任何数量的CSS声明作为自己的值，而
37、每个声明之间用分号隔开。BODY内引用CSS样式比其他方法更加灵活，但是如果要改变样式就比较麻烦，必须一个一个地改动。由于这种方式与传统的HTML类似，都是针对具体的每个标记符进行修饰，所以并没有发挥出样式表有利于统一设置样式的优势，因此在实际中的应用相对较少。【例1-18】以下是一个使用BODY内引用样式的例子，其源代码如下：BODY内引用CSS样式 新北京 新奥运 绿色奥运 人文奥运 科技奥运 北京成功申办2008奥运会！运行结果如图：为了整个网站能够保持一致的样式，我们可以单独创建一个样式表文件（该文件的后缀为.css），在其中定义需要用到的样式，然后在每个HTML文件中都与该样式表文件
38、建立链接，从而在每个HTML文件中都可以调用所链接样式表中的样式。建立链接的标记符是LINK，具体的用法如下所示：如何将CSS添加到HTML文件外引用 应用所链接的样式表中的样式链接标记符LINK必须放置在标记符之间,它是单独使用的标记符,LINK标记符具有以下一些主要属性:（1）rel属性:使用该属性可以设置链接文件和HTML文档之间的关系。在链接样式表文件（.CSS文件）的情况下，该属性的取值永远是“STYLESHEET”。（2）href属性:使用该属性可以设置链接文件的位置。该属性既可以是相对位置也可以是绝对位置。（3）Type属性:使用该属性可以设置链接文件的类型。CSS文件的类型是t
39、ext/css。外部样式表文件的内容由样式定义，即样式名称和属性组成。例如，一个单独由pmargin:2em组成的文件就可以用作外部样式表。一个HTML文件可以链接多个样式表，如果样式表中的样式有冲突，那么最后应用的样式优先。【例1-19】一个文件外引用链接样式的例子。源代码如下 文件外引用实例 新北京 新奥运 绿色奥运 人文奥运 科技奥运 北京已经成功申办2008年奥运会其中与网页处在同一目录下的style.css文件的内容如下所示：H1font-size:xx-large;color:red;font-weight:borderH2color:white;background-color:
40、blue;text-decoration:underlineH3text-indent:30px显示效果如图:可以使用类（class）来为单一HTML标记符创建多个样式。要想将一个类包含到网页的定义中，可以将一个句点和一个类名称添加到selector后，如下所示：selector.classnameproperty1:value1;在CSS中可以使用任何名称和名类，但是最好使用具有含义的名称。例如，如果网页中有三个地方使用H2标记符，我们希望不同位置的H2标记符使用不同的颜色，那么可以定义以下样式：H2.color_redcolor:redH2.color_greencolor:greenH2
41、.color_bluecolor:blue 然后在网页中需要使用该类的地方用class属性应用这些类，如下所示：红色标题绿色标题蓝色标题 如果使用了H2标记符，但没有指定class属性，则不应用所定义的样式，因为标记符样式仅应用于具有相应class属性的标记符。当然，标记符类样式也可以和标记符样式共同使用。【例1-20】如果仍然需要让三个H2标记符中的文本显示不同的颜色，但是又想让它们具有相同大小的文字，此时不需要将相同的字体大小属性添加到三个H2类样式定义中，而只需要添加一个样式规则来定义所有H2标记符中文字的大小，源代码如下所示：标记选择符类样式 H2font-size:16pt H2.c
42、olor_redcolor:red H2.color_greencolor:green H2.color_bluecolor:blue标题红色标题绿色标题蓝色标题在浏览器中打开该文件，效果如图1-20所示。网页中所有H2标记符中包含的文字，不管H2标记符中是否包含class属性，都将是16pt的大小；而包含了class属性的H2标记符，则需要根据属性的定义显示为不同的颜色。实际上，不仅可以为某个或某些标记符定义类，还可以定义能应用于所有标记符的类，即通用类，此时直接用句点后跟类名就可以了，格式如下：.classnameproperty:value;通用类样式定义好了以后，可以在需要应用该样式的
43、标记符内使用class属性，使其等于所定义的类名，从而使相应标记符采用所定义的样式。【例1-21】下面是一个使用通用类的例子（不同标记符应用了同一个类样式），其源代码如下所示：类选择符引用实例 .STYLEfont-style:italic 类选择符 类选择符运行结果如图 除了使用.classname的方式定义一个类样式外，还可以使用ID定义样式。要将一个ID包括在样式定义中，应该用一个井号（#）作为ID名称的前缀，如下所示：#IDname property:value;ID样式定义好了以后，可以在需要应用该样式的标记符内使用ID属性，使其等于所定义的ID名称，从而使相应类的标记符采用所定义的
44、样式。ID属性的用法与CLASS属性的用法完全一样，二者并没有什么区别，一般情况下使用其中之一即可。【例1-22】下面是一个使用ID样式的例子，其源代码如下：ID选择符引用实例 .STYLEfont-style:italic ID选择符 ID选择符运行结果如图:对于A标记符（超链接标记符），可以用类的方式设置不同类型链接的显示方式。所谓不同类型链接，是指访问过的、未访问过的、激活的、悬停的这四种状态的链接。可以通过指定下列selector之一来设置链接样式：a:link或:link:当超链接未被访问过时，超链接的显示方式；a:visited或:visited:当超链接已经被访问过时，超链接的显
45、示方式；a:active:active：当超链接当前为被选中状态时，超链接的显示方式；a:hover:hover：当鼠标指针悬停在超链接上时，超链接的显示方式 例如，可以使用以下方式更改超链接的颜色显示，而不需要使用HTML方法（在BODY标记符号中指定LINK等属性）进行设置。:linkcolor:blue :visitedcolor:purple :activecolor:gray【例1-23】以下是一个使用超链接的例子，其源代码如下所示：超链接样式实例 :linkcolor:blue:visitedcolor:purple:activecolor:gray:hovercolor:redatext-decoration:none 没有访问过的超链接为蓝色 访问过的超链接为紫色 活动的超链接为灰色 鼠标悬停在其上的超链接为红色 运行效果如图:v本章主要讲解了HTML标记的基本概念及其用法和功能；并介绍了CSS样式的概念和加载方式。HTML常用标记：v页面基本属性标记v文字属性标记v超链接标记v图片格式v列表标记v表格标记v表单标记v框架标记 CSS样式的三种方式vHEAD内引用vBODY内引用v文件外引用 CSS与标记对应的三种方式v标记选择符v类选择符vID选择符v定义超链接样式
