1、1,第3章 HTML简介,2,3.1 HTML概述3.1.1 HTML的发展历程1HTML的诞生2HTML的版本发展3HTML的未来4学习HTML的意义,3,3.1.2 一个简单的HTML实例【例3-1】 用HTML 制作一个简单的网页。3.1.3 HTML的基本概念要了解HTML语言，先来熟悉一下HTML中的一些基本概念。1标记在HTML中用于描述功能的符号称为“标记”，它是用来控制文字、图像等显示方式的符号。标记在使用时必须用“” 括起来，标记有单标记和双标记之分。 1）单标记所谓“单标记”是指只需单独使用就能完整地表达意思的标记。这类标记的语法是：。2）双标记所谓“双标记”是指由“始标记
2、”和“尾标记”两部分构成，必须成对使用的标记。其中始标记告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标记告诉Web浏览器到这里结束该功能。始标记前加一个斜杠（/）即成为尾标记。双标记的语法是： 内 容，其中“内容”是指要被这对标记施加作用的部分。,4,2标记属性许多单标记和双标记的始标记内可以包含一些属性。语法是：说明：各属性之间无先后次序，属性也可省略（即取默认值）。例如：单标记表示在文档当前位置画一条水平线，一般是从窗口中当前行的最左端一直画到最右端，它可以带这么一些属性：,5,。 size属性：定义线的粗细，属性值取整数，缺省值为1； align属性：表示对齐方式，可取LEFT
3、（左对齐，默认值），CENTER（居中），RIGHT（右对齐）； width属性：定义线的长度，可取相对值（由一对“ “号括起来的百分数，表示相对于整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的个数，如width=“300“），默认值是100%。,6,3注释语句和其他计算机语言一样，HTML语言也提供了注释语句。注释语句的格式为：“”表示注释结束，中间的所有内容表示注释文。注释语句可以放在任何地方，注释内容不在浏览器中显示出来，仅供设计人员阅读方便。,7,3.1.4 HTML的基本结构HTML网页文件主要由文件头和文件体两部分内容构成。其中，文件头是对文件进行一些必要的定义，文件体
4、是HTML网页的主要部分，它包括文件所有的实际内容。下面是HTML网页的基本结构。HTML文件开始文件头开始文件头文件头结束文件体开始文件体文体结束HTML文件结束,8,在HTML网页文件的基本结构中主要包含以下几种标记。1HTML文件标记和标记放在网页文档的最外层，表示这对标记间的内容是HTML文档。放在文件开头， 放在文件结尾，中间嵌套其他标记。2HEAD文件头部标记文件头用和标记，该标记出现在文件的起始部分，标记内的内容不在浏览器中显示，主要用来说明文件的有关信息，如文件标题、作者、编写时间、搜索引擎可用的关键词等。在HEAD标记内最常用的标记是网页主题标记TITLE标记格式为：网页标题
5、网页标题是提示网页内容和功能的文字，它将出现在浏览器的标题栏中，一个网页只能有一个标题，并且只能出现在文件的头部。,9,3BODY文件主体标记文件主体用和标记，它是HTML文档的主体部分，网页正文中的所有内容包括文字、表格、图像、声音和动画等都包含在这对标记对之间格式为：。,10,3.1.5 HTML的语法规则HTML语言应遵循以下的语法规则。（1）HTML文件以纯文本形式存放，扩展名为“*.HTM”或“*.HTML”。（2）HTML标记不区分大小写。（3）多数HTML标记可以嵌套，但不可以交叉。（4）HTML文件一行可以写多个标记，一个标记也可以分多行书写，不用任何续行符号。,11,（5）H
6、TML源文件中的换行、回车符和空格在显示效果中是无效的。显示内容如果要换行必须用标记，换段用标记，表示段落开始，表示段落结束。页面中的空格是通过代码控制的，一个半角空格使用一个表示，多个空格只需使用多次即可。与空格的表示方法有些相似，一些特殊符号是凭借特殊的符号码来表现。通常由“&”前缀，加上字符对应的名称，再加上后缀“；”而组成。如书中表3-1所示列出了一些常见的HTML特殊符号的表示方法。（6）网页中所有的显示内容都应该受限于一个或多个标记，不应有游离于标记之外的文字或图像等，以免产生错误。,12,3.2 HTML的文本格式标记在“”标记对之间直接输入文字就可以显示在浏览器窗口中，但是要制
7、作出真正实用的网页，还必须对输入的文字进行适当的修饰。3.2.1 标题格式标记功能：用于定义文章内章节标题的显示格式。格式：标题内容。属性：n ：表示标题字号的级别，可以是16之间的任意整数，数字越小，字号越大。align：表示水平对齐方式，取值可以为LEFT（左对齐）、RIGHT（右对齐）、CENTER（居中对齐）、BOTTOM（位于底端）和TOP（位于顶部）。说明：用该标记实现文章标题的效果有限，通常用FONT标记实现文章标题丰富多彩的效果。【例3-2】 标题格式标记的应用。,13,3.2.2 文字格式标记功能：设置网页中普通文字的显示效果。格式：文字。属性：face 表示文字的字体，如“
8、黑体”表示黑体，“宋体”表示宋体。size表示字号，用来设定文字的大小，其值为17的整数，值越大，字越大；若数字前面加上“+”或“”号，则表示相对基准字号的大小，如基准字号为3号，则+3表示6号字。基准字号用如下标记定义：其中“基准字号”也是17之间的整数。color用来设定文字的颜色，颜色的取值是十六进制RGB颜色码或HTML语言给定的颜色常量名。【例3-3】 文字格式标记的应用。,14,3.2.3 字型设置标记功能：设置文字的风格，如黑体、斜体、带下划线等，这是一组标记，它们可以单独使用，也可以混合使用产生复合修饰效果。常用的标记有以下一些： ：文字以粗体显示。 ：文字显示为斜体。 ：显示
9、下划线。 ：删除线。 ：使文字大小相对于前面的文字增大一级。 ：使文字大小相对于前面的文字减小一级。 ：使文字成为前一个字符的上标。 ：使文字成为前一个字符的下标。 ：使文字显示为闪烁效果。 ：以等宽体显示西文字符。 ：输出引用方式的字体，通常是斜体。 ：强调文字，通常用斜体加黑体。 ：特别强调的文字，通常也是斜体加黑体。注：有些标记的效果必须在动态环境下才能显示，例如标记。【例3-4】 字型设置标记的应用。,15,3.2.4 段落标记功能：设置文章段落的开始和结束。浏览器在解释HTML文档时，会自动忽略文档中的回车、空格以及其他一些符号，所以在文档中输入回车，并不意味着在浏览器内将看到一个不
10、同的段落，当需要在网页中插入新的段落时，可以使用段落标记，它可以将标记后面的内容另起一段。格式：。属性：align是水平对齐方式，取值可以为LEFT（左对齐）、RIGHT（右对齐）和CENTER（居中对齐）。,16,3.2.5 强制换行标记功能：另起一行显示文字。格式：说明：这是一个单标记，与段落标记在显示效果上都是另起一行书写，但它们的不同之处是：段落标记的行距要宽。在使用上还有一定的技巧，如果把加在标记对的外边，将创建一个大的回车换行，即前边和后边文本的行与行之间的距离比较大，若放在的里边则前边和后边文本的行与行之间的距离将比较小。【例3-5】 段落标记和强制换行标记的应用。,17,3.2
11、.6 预排格式标记功能：保留文字在纯文字编辑器中的格式，原样显示，不受前面的文字格式和段落格式的影响。格式：预排格式的文本。说明：若用其他文本编辑器编好了一段文本，如果把它放进网页文件，常常需要加许多标记才能达到原来的显示效果，否则浏览器会自动忽略文档中的回车、空格以及其他一些符号。如果在文本开头加上，在末尾加上，那么中间就不用加其他标记了，这时中间的回车换行符等就起作用了，可以原样显示。【例3-6】 预排格式标记的应用。,18,3.2.7 插入水平线标记功能：在页面上画横线，可用于页面上内容的分割。格式：。属性：width用来设置水平线的宽度长度，value1可以是点数，如50、100、20
12、0等，窗口改变时，横线宽度不变；也可以是相对窗口的百分比，如50%、100%,默认是100%。size 用来设置水平线的厚度，value2的值可以是绝对点数，也可以是（相对长度的）百分比，默认高度为1。align用来设置水平线的对齐方式，value3的值可以是LEFT（居左）、RIGHT(居右)、CENTER（居中），默认是居中。color用来设置水平线的颜色，颜色的取值是十六进制RGB颜色码或HTML语言给定的颜色常量名。noshade属性不用赋值，而是直接加入标记即可使用，它表示加入一条没有阴影的水平线(不加入此属性水平线将有阴影)。,19,3.2.8 文本缩排标记功能：使用缩排标记，可以
13、实现页面文字的段落缩排，实现多次缩排可以使用多次缩排标记。格式：文本。【例3-7】文本缩排标记的应用。,20,3.2.9 列表标记分段排列出一组级别相同的项目称为列表。如果在每段前面加上一个相同的符号，则称为无序列表；如果每段前面加上一个序号，则称为有序列表。1无序列表功能：设置无序列表。格式：列表项目1列表项目2。属性：在无序列表的开始和结束处，分别是和标记，每一项列表条目之前必须加上标记。type 属性表示在每个项目前显示加重符号的类型，共有三种选择：type=“disc”时，列表符号为“”（实信圆），type=“circle”时，列表符号为“”（空心圆），type=“square”时，列
14、表符号为“”（实心方块）。和标记都可以定义type参数，使得在一个列表中，不同的列表项目可以用不同的列表符号，但一般情况下不要这样设置。【例3-8】 无序列表标记的应用。,21,2有序列表功能：设置有序列表。格式：列表项目1列表项目2。属性：在有序列表的开始和结束处，分别是和标记，每一项列表条目之前必须加上标记。type 属性表示在每个项目前显示的序号类型，其值可以为1（阿拉伯数字）、A（大写英文字母）、a（小写英文字母）、I（大写罗马字母）、i（小写罗马字母）。start 用于设置编号的开始值，默认值为1，标记设定该条目的编号，其后的条目将以此作起始数目逐渐递增。说明：无序列表和有序列表可以
15、嵌套，产生缩进的、有层次的列表项目。【例3-9】 有序列表标记的应用。 【例3-10】 无序列表和有序列表标记的应用对比。,22,3定义列表功能：用于需要对列表条目进行简短说明的场合。格式：列表条目1条目1的说明列表条目2条目2的说明。属性：在定义列表的开始和结束处，分别是和标记，每一项列表条目之前必须加上标记，用标记定义的条目说明文字自动向右缩进。【例3-11】 定义列表标记的应用。,23,3.2.10 文字滚动标记功能：在页面中制作文字滚动的效果。格式：滚动文字。属性如下。（1） behavior ：设置文字滚动方式。共有三种滚动方式供选择：behavior =“alternate”时，文
16、字将交替进行滚动；behavior =“scroll”时，文字将循环往复滚动；behavior =“slide”时，文字将只进行一次滚动。（2）bgcolor ：为滚动文字添加背景颜色。（3）direction ：设置文字滚动的方向，value的取值可以为up、down、left和right四种，分别表示滚动文字的方向向上、向下、向左和向右。（4）height和width：设置文字滚动的区域，取值为点数或相对于窗口的百分比。（5）loop ：设置文字滚动的循环次数。默认值为-1，-1表示无限次循环次数。（6）scrollamount ：调整文字滚动的速度，数值越大速度越快。（7）scrolld
17、elay ：设置在每一次滚动的间隔产生一段时间的延迟，数值越大延迟越长。（8）hspace和vspace ：设置文字滚动的水平垂直空间。【例3-12】 文字滚动标记的应用。,24,3.3 HTML的表格标记表格可以将文本和图像按一定的行和列规则进行排列，以便更好地表示长信息，有利于快速查找信息。表格内的格子称为单元格。表格标记对于制作网页是很重要的，现在很多网页都使用多重表格，主要是因为表格不但可以固定文本或图像的输出，而且还可以任意的进行背景和前景颜色的设置，使页面有很多意想不到的效果，使页面更加整齐美观。表格标记的构成如下：功能：建立基本表格。格式：表题（表格说明）表头1表头2.表头n表项
18、1表项2.表项n表项1表项2.表项n。,25,属性如下。（1）标记对用来创建一个表格。 summary：对表格格式或内容的简要说明，它不在网页上显示，相当于表格的注释。 bgcolor：设置表格的背景颜色，取值同BODY标记中的颜色属性。 background：设置表格的背景图像，取值为图像的URL地址。 border：设置表格线的宽度（粗细），n取整数，单位为像素数，n=0表示无线。 bordercolor：设置表格线的颜色，取值同BODY标记中的颜色属性。 width：设置表格宽度，取值为点数或相对于窗口的百分比。 height：设置表格高度，取值为点数或相对于宽度的百分比。 align：
19、设置表格在页面中的相对位置，取值为LEFT、RIGHT或CENTER，分别表示居左、居右或居中。（2）表示对表格标题的说明，如“奥运会男子足球比赛时间表”等。align表示标题相对表格的位置，取值为LEFT、RIGHT、CENTER、TOP或BOTTOM分别表示标题在表格上部左边、表格上部右边、表格上部居中、表格上面或表格底部。（3）定义行，该标记中的内容显示在一行，此标记对只能放在标记对之间使用，而在此标记对之间加入文本将是无用的，因为在之间只能紧跟标记对才是有效的语法；标记对用来创建表格中一行中的每一个格子，此标记对也只有放在标记对之间才是有效的，输入的文本也只有放在标记对中才有效。（4）
20、 用来设置表格头，表头的每一列需用一个标记，通常是黑体居中文字。（5）用来定义表格内容的一列，与的区别是内容不加黑显示。,26,说明：（1）中bgcolor、background、align、height、width等属性可以放在TD标记中，作为单元格的属性。（2）一行的开始表示前一行的结束，一列的开始表示前一列的结束，所以、均可以作单标记使用。（3）标记还可以用于每行的第一列，设置列标题。（4）、标记之间可以嵌套其他格式标记，如、等。（5）单元格内容可以是文字，也可以是图像。（6）表格可以嵌套，通过表格嵌套可以产生复杂的表格。（7）还有align和valign属性。align是水平对齐方式，
21、取值为LEFT(左对齐)、CENTER(居中)、RIGHT(右对齐)；而valign是垂直对齐方式，取值为TOP(靠顶端对齐)、MIDDLE(居中间对齐)或BOTTOM(靠底部对齐)。还有width和nowrap属性，width是单元格的宽度，单位用绝对像素值或总宽度的百分比；nowrap表示禁止表格单元格内的内容自动换行。另、中还可以使用rowspan和colspan属性实现单元格的合并，rowspan设置一个表格单元格跨占的行数(缺省值为1)，rowspan=n表示将n行作为一行；colspan设置一个表格单元格跨占的列数(缺省值为1)，colspan=n表示将n列作为一列。【例3-13】
22、 表格标记单元格合并属性的应用。【例3-14】 表格标记的简单应用。【例3-15】 表格标记的复杂应用。,27,3.4 HTML的图像与多媒体标记在网页中加入图像和多媒体元素可以使网页更加生动活泼。3.4.1 图像标记再简单朴素的网页如果只有文字而没有图像将失去许多活力，图像在网页制作中是非常重要的元素，HTML语言提供了标记来处理图像的输出，当然用标记还可以播放视频，下面也顺便介绍一下。1的图像标记功能功能：在当前位置插入图像。格式：。,28,属性如下。（1）src：设置要加入的图像文件的URL地址，通常图像格式为gif或jpg。（2）alt：设置图像文件的替代说明，当图像无法显示时，显示“
23、简单说明”。（3）longdesc：设置图像的详细说明。（4）width：设置图像的宽度，可以为点数或相对窗口宽度的百分比。（5）height：设置图像的高度，可以为点数或相对窗口高度的百分比。（6）border：设置图像外围边框宽度，其值为正整数。（7）hspace：设置水平方向空白（图像左右留多少空白）。（8）vspace：设置垂直方向空白（图像上下留多少空白）。（9）align：设置在页面中的位置，可以为LEFT，RIGHT或CENTER。,29,说明：图像的宽度和高度指图像显示时的大小，与图像的真实大小无关。标记并不是真正地把图像加入到HTML文档中，而是给标记对的src属性赋值，这个
24、值是图像文件的文件名，当然包括路径，这个路径可以是相对路径，也可以是网址。实际上就是通过路径将图像文件嵌入到HTML文档中。设置图像文件地址时用到的路径一般建议使用相对路径，所谓相对路径是指所要链接或嵌入到当前HTML文档的文件与当前文件的相对位置所形成的路径。假如HTML文件与图像文件(文件名假设是logo.gif)在同一个目录下，则可以将代码写成；假如图像文件放在当前的HTML文档所在目录的一个子目录(子目录名假设是images)下，则代码应为；假如图像文件放在当前的HTML文档所在目录的上层目录(目录名假设是home)下，则相对路径就必须是准网址了，即用“/”表示网站，然后在后边紧跟文件
25、在网站中的路径，假设home是网站下的一个目录，则代码应为，若home是网站下的目录king下的一个子目录，则代码应该变为了。【例3-16】 图像标记的应用。,30,2的视频标记功能利用还可以变相的插入视频，下面简单介绍一下该功能。功能：在网页中加入视频信息，格式一般为*.AVI。格式：。属性如下。（1）scr：设置一幅静态图像的URL地址，在未载入.AVI文件时，先在.AVI的播放区域显示该图像。（2）dynsrc：设置视频文件存放的路径和文件名。（3）loop：设置视频文件播放的次数，如果其值为INFINITE，则表示反复播放直到浏览者离开该网页。（4）start： 设置何时开始播放视频文
26、件，它有两个属性值fileopen和mouseover。fileopen 是指在链接到含本标记的页面时开始播放，mouseover 是指将鼠标移动到.AVI播放区时开始播放，默认值为fileopen。另外，当鼠标在AVI播放区单击时，也可使浏览器开始播放。（5）controls：在视频窗口下附加Windows的AVI文件播放控制条。（6）loopdelay：设置两次播放的间隔时间，单位是毫秒。 此外，还有IMG的常见属性，如width、height、align等，也可以使用。,31,3.4.2 背景音乐标记功能：在网页中加入声音，声音文件格式可以为*.wav或*.mid。格式：。 属性：src
27、指明声音文件的 URL地址。 loop控制播放次数，取 -1或INFINITE时，声音将一直播放到浏览者离开该网页为止。,32,3.4.3 多媒体标记功能：在页面中放置如SWF动画（即Flash动画）、MP3音乐、电影等多种多媒体内容。格式：属性如下。（1）src ：指明多媒体文件所在的路径，可以插入的常见的多媒体文件包括SWF动画、MP3音乐、MPEG格式的视频和AVI格式的视频。（2）height和width ：设置多媒体播放的区域，取值为点数或相对于窗口的百分比。（3）hidden ：用于控制播放面板的显示和隐藏。当hidden=“True”时，隐藏面板；当hidden=“False”时
28、，显示面板。（4）autostart ：用于控制多媒体内容是否自动播放。当auto=“True”时，自动播放；当auto=“False”时，不自动播放。（5）loop ：用于控制多媒体内容是否循环播放。当loop=“True”时，无限次循环次数；当loop=“False”时，仅播放一次。,33,3.5 HTML的超链接标记超链接是网页页面中最重要的元素之一，是一个网站的灵魂。一个网站是由多个页面组成的，页面之间依靠超链接确定相互的导航关系，超链接使得网页的浏览非常方便。功能：建立超链接。格式：显示的文本或图像。属性如下。（1）href：设置要链接到的目标的URL地址。（2）target：指定打
29、开链接的目标窗口。当target=“self”时，表示在原窗口显示链接页面；当target=“blank”时，表示在新开窗口显示链接页面；target=“parent”时，表示在上一级窗口中打开，一般使用分帧的框架会经常使用；当target=“top”时，表示在浏览器的整个窗口中打开，忽略任何框架。默认时指在原窗口中打开链接。【例3-17】 超链接标记的应用。,34,3.6 HTML的表单标记表单是实现动态网页的一种主要的外在形式，是HTML页面与浏览器端实现交互的重要手段。表单的主要功能是收集信息，具体说是收集浏览者的信息。例如在网上要申请一个电子信箱，就必须按要求填写完成网站提供的表单页面
30、，其主要内容是姓名、年龄、联系方式等个人信息。表单信息处理的过程为：当单击表单中的提交按纽时，输入在表单中的信息就会从客户端的浏览器上传到服务器中，然后由服务器中的有关表单处理程序（ASP、CGI等程序）进行处理，处理后或者将用户提交的信息储存在服务器端的数据库中，或者将有关的信息返回到客户端浏览器中，这样网页就具有了交互性。这里只介绍如何使用HTML的表单标记来设计表单。,35,1表单标记表单是网页上的一个特定区域，这个区域由标记对来定义，这一步有两方面的作用。第一，限定表单的范围。其他的表单对象，都要插入到表单标记对之中才有效。单击提交按钮时，提交的也是表单范围之内的内容。第二，携带表单的
31、相关信息，例如处理表单的脚本程序的位置、提交表单的方法等。这些信息对于浏览者是不可见的，但对于处理表单却有着决定性的作用。格式：。属性如下。（1）name ：设置表单的名称。（2）method ：定义处理程序从表单中获得信息的方式，其取值为 GET 或 POST。GET方式表示处理程序从当前HTML文档中获取数据，但通过这种方式传送的数据量是有所限制的，一般限制在1KB以下。POST方式与GET方式相反，它表示当前的HTML文档把数据传送给处理程序，传送的数据量要比使用GET方式的大的多。（3）action ：用来定义表单处理程序（ASP、CGI等程序）的位置（相对地址或绝对地址）。如：，当用
32、户提交表单时，服务器将执行网址http:/ ：设置表单资料的编码方式。（5）target ：设置返回信息的显示窗口。,36,2输入标记输入标记是表单中最常用的标记之一。该标记用来定义一个输入区，可在其中输入信息，此标记必须放在标记对之间。格式：。属性如下。（1）name ：设置输入区域的名称。服务器就是通过调用某一输入区域名字来获得该区域数据的。（2）type ：设置输入区域的类型。常用的type属性值有10种，下面分别介绍。 文本域TextText用来设定单行的输入文本区域。格式： 其中：maxlength为文本域的最大输入字符数；size为文本域的宽度（以字符为单位）；value设置文本域
33、的初始默认值。 密码域Password在表单中还有一种文本域的形式为密码域，输入到文本域中的文字均以星号“*”或圆点显示。格式：其中：maxlength为密码域的最大输入字符数；size为密码域的宽度。,37, 文件域File文件域可以让用户在域的内部填写自己硬盘中的文件路径，然后通过表单上传，这是文件域的基本功能。如在线发送E-mail时常见的附件功能。文件域的外观是一个文本框加一个浏览按钮，用户既可以直接将要上传给网站的文件的路径写在文本框内，也可以单击浏览按钮，在自己的电脑中找到要上传的文件。格式： 复选框Checkbox复选框能够让浏览者进行项目的多项选择，一般以一个方框表示。格式：其
34、中：checked表示此项被默认选中；value表示选中项目后传送到服务器端的值。 单选框Radio单选框能够让浏览者进行项目的单项选择，以一个圆框选择。格式：其中：checked表示此项被默认选中；value表示选中项目后传送到服务器端的值。 普通按钮Button普通按钮主要是用来配合程序（如JavaScript脚本）的需要来进行表单处理的。格式：其中：value值代表显示在按钮上面的文字。 提交按钮Submit单击提交按钮后，可以实现表单内容的提交。格式：,38, 重置按钮Reset单击重置按钮后,可以清除表单的内容,恢复默认的表单内容设定。格式：其中：value值代表显示在按钮上面的文字
35、。 图像域IMAGE图像域是指可以用在提交按钮上的图片，这幅图片具有按钮的功能。如果网页使用了较为丰富的色彩，或稍微复杂的设计，再使用表单默认的按钮形式往往会让人觉得单调，甚至会破坏整体的美感。这时，就可以使用图像域来创建和网页整体效果相统一的图像提交按钮。格式：其中：src设置图片的路径。 隐藏域Hidden隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到浏览器。格式： 【例3-18】 表单输入标记的综合应用。,39,3菜单和列表标记和假设现在要在表单中添加这样一项内容：浏
36、览所在的城市。这里不说全国的城市，只说省会以上的城市，就有几十个。如果按上面讲过的单选按钮的形式，将这些城市全部罗列在网页上，将是一件不堪设想的事情。于是，在表单的对象中出现了菜单和列表。说到底，菜单和列表主要是为了节省网页的空间而产生的。菜单是一种最节省空间的方式，正常状态下只能看到一个选项，单击按钮打开菜单后才能看到全部的选项；列表可以显示一定数量的选项，如果超出了这个数量，会自动出现滚动条，浏览者可以通过拖动滚动条来观看各选项。通过和标记可以设计页面中的菜单和列表效果，此标记对必须放在标记对之间。格式：选项一选项二。,40,标记用来定义菜单和列表，属性如下。（1）name ：设置菜单和列
37、表的名称。（2）size ：设置显示的选项数目。（3）multiple ：该属性不用赋值可直接加入到标记中，加入此属性后列表框就成了可多选的了。若没有加入multiple属性，显示的将是一个弹出式的列表框。标记用来指定菜单和列表中的一个选项，它放在标记对之间。属性如下。（1）value ：该属性用来给指定的那一个选项赋值，这个值是要传送到服务器上的，服务器正是通过调用区域名字的value属性来获得该区域选中的数据项。（2）selected ：指定初始默认的选项。【例3-19】 表单菜单和列表标记的应用。,41,4文本框标记表示创建一个可以输入多行的文本框，可以在其中输入更多的文本，此标记对放在
38、标记对之间。格式：。属性如下。 （1）name ：设置文本框的名称。 （2）rows ：设置文本框的行数，以字符数为单位。 （3）cols ：设置文本框的列数，以字符数为单位。【例3-20】 表单文本框标记的应用。,42,3.7 HTML的框架标记框架的运用就是把浏览器窗口划分成几个子窗口，每个子窗口可以调入各自的HTML文档形成不同的页面，也可以按照一定的方式组合在一起完成特殊的效果。框架通常的使用方法是在一个框架中放置目录并设置链接，点击链接，内容显示在另一个框架中；或者有时一个网页的不同部分由不同的人员制作，可以每人完成一个子窗口，然后利用框架技术将它们合并在一起形成一个完整的页面。1框
39、架集标记框架主要包括两个部分，一个是框架集，另一个就是框架。框架集是在一个文档内定义的一组框架结构的HTML网页。框架集定义了在一个窗口中显示的框架数、框架的尺寸、载入到框架的网页等。而框架则是指在网页上定义的一个显示区域。在使用了框架集的页面中，页面的标记被标记所取代，然后通过标记定义每一个框架。功能：定义分割窗口，用来定义主文档中有几个框架并且各个框架是如何排列的。格式：。,43,属性如下。（1）cols：左右分割窗口（用“，”分割，value为定义各个框架的宽度值，单位可以是百分数、绝对像素值或星号(“*”)，其中星号表示剩余部分）。（2）rows：上下分割窗口（用“，”分割，value
40、为定义各个框架的宽度值，单位可以是百分数、绝对像素值或星号(“*”)，其中星号表示剩余部分）。（3）framespacing：设定框架集的边框宽度。（4）bordercolor：设定框架集边框颜色。框架集标记应用如书上的表3-2所示。,44,2框架标记每一个框架都有一个显示的页面，这个页面文件称为框架页面。通过标记可以定义框架页面的内容，标记放在之间。功能：定义某一个具体的框架。格式：。属性如下。（1）src ：设置框架显示的文件路径。（2）name ：定义此框架的名字，这个名字是供超文本链接标记中的target属性用来指定链接的目标HTML文件将显示在哪一个框架中。框架的命名有一定的规则，框
41、架名称必须是单个单词，可以使用下划线（），但不允许使用连字符（-）、句号（。）和空格。框架名称必须以字母开始。框架名称区分大小写。（3）scrolling ：设定滚动条是否显示，值可以是yes(显示)、no(不显示)或auto(若需要则会自动显示,不需要则自动不显示)。（4）noresize ：禁止改变框架的尺寸大小。,45,3不支持框架标记格式：功能：标记对放在标记对之间，用来在那些不支持框架的浏览器中显示文本或图像信息。【例3-21】 框架标记的综合应用。,46,3.8 CSS3.8.1 CSS概述CSS是英文Cascading Style Sheet的缩写，称为“层叠样式表”或“级联样式
42、表”，它是用来控制一个文档中某一文本区域外观的一组格式属性。CSS样式可以定义在HTML文档中的标记里，也可以在外部附加文档作为外加文档。这样，一个样式表就可以用于多个页面，甚至整个站点，当CSS样式有所更新或被修改之后，所有应用了该样式表的文档都会被自动更新，所以CSS具有更好的易用性和扩展性。概括一下，CSS有以下特点： （1）可以将格式和结构分离； （2）可以以前所未有的能力控制页面布局； （3）可以制作体积更小、下载更快的网页； （4）可以将许多网页同时更新，比以前更快更容易； （5）浏览器的界面更友好。,47,3.8.2 CSS的基本语法CSS样式表的基本语法为：HTML标志标志属性
43、：属性值；标志属性：属性值；标志属性：属性值；。在编写CSS样式表时要注意以下问题：（1）在使用样式表的过程中，经常会有几个标志用到同一属性，例如规定HTML页面中凡是粗体字、斜体字、1号标题字均显示为红色，按照语法方式应书写为： B color：red I color：red H1 color：red 显然这样书写十分麻烦，可以采用一种简洁明了的方式写成：B I H1color：red 用逗号分隔各个HTML标志，把三行代码合并成一行。,48,（2）同一个HTML标志，可以定义多种属性，例如把从H1H6各级标题定义为红色黑体字，带下划线，则应写为： H1 H2 H3 H4 H5 H6 col
44、or：red textdecoration：underline fontfamily：黑体 （3）一种样式在一个页面中需要出现很多次，这种情况会经常发生，例如网页中需要经常出现红色的文本，而又不希望每次给文本加上一个样式，可以定义如下样式：.red color:red;。在页面设计中，一旦需要出现红色文本，只需要通过名称的指派就可以使当前对象中的文本应用样式，例如。（4）在CSS中，注释以“/*”开始，以“*/”结束，注释里面的内容对于浏览器来说是没有意义的。,49,3.8.3 CSS的实现方式CSS的实现方式有3种。1.在HEAD内实现用这种实现方式的CSS也叫内部样式表(Internal
45、Style Sheet)，它是写在HTML的里面的，只对所在的网页有效。内部样式表要用到Style这个标记，写法如下：例如：H1 font-family: “黑体“; color:red 其中，和之间的是样式的内容。type一项表示使用的是text中的层叠样式表书写的代码。 前面的是样式类型和名称， 中的是样式的属性。上述代码定义了标记使用的字体和颜色。【例3-22】 内部样式表的应用。,50,2. 在BODY内实现用这种实现方式的CSS也叫内嵌样式(Inline Style)，它是在BODY中实现，主要是在标记中引用，只对所在的标记有效。例如要让H3标记的字体的大小为10pt，可以使用下面的
46、语法：，这样的写法虽然直观，但是无法体现出CSS的优势，因此并不推荐使用。【例3-23】 内嵌样式的应用。,51,3. 在文件外实现用这种实现方式的CSS也叫外部样式表(External Style Sheet)，如果很多网页需要用到同样的样式，可以将样式写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式的网页里引用这个CSS文件。外部样式表调用格式是：。【例3-24】 外部样式表的应用。,52,43种CSS的实现方式的比较样式的优先级依次是内嵌样式、内部样式表、外部样式表。使用外部样式表，相对于内嵌样式和内部样式表，有以下优点：（1）样式代码可以复用。一个外部CSS文件，可以被多个网页共用。 （2）便于修改。如果要修改样式，只需要修改CSS文件，而不需要修改每个网页。 （3）提高网页显示的速度。如果样式写在网页里，会降低网页显示的速度，如果网页引用一个CSS文件，这个CSS文件一般已经在缓存区(其它网页早已经引用过它)，网页显示的速度就比较快。,53,3.9 HTML综合实例【例3-25】 用HTML语言编写如图3-25所示的一个简单网站的首页。,54,3.10 其他网页设计语言简介除了HTML，与网页设计相关的程序语言主要有以下几种。1XML语言2VRML语言3CSS语言4浏览器Script脚本语言5服务器端的Script脚本语言6DHTML语言,
