大学文化基础知识第十章.ppt

第10章 HTML语言与网页设计,10.1 HTML简介 10.2 HTML基本标记 10.3 图片 10.4 超链接 10.5 表格和框架 10.6 在网页中添加多媒体 10.7 表单的应用 10.8 层叠样式表CSS和DIV标记 10.9 动态网页制作JavaScript和VBScript 10.10 网页的制作与发布,10.1 HTML简介,HTML（Hyper Text Markup Language，超文本标记语言）是一种专门用于编写网页源代码的计算机语言。使用HTML可编制出各种各样的网页文件，HTML文件的扩展名是.htm或.html。 10.1.1 概述 HTML是纯文本类型的语言，使用HTML编写的网页文件也是标准的纯文本文件。在用浏览器打开某网页时，通过相应的查看“源文件”命令，可查看该网页的HTML源代码。 对于HTML文件，通过超文本传输协议（Hyper Text Transfer Protocol，HTTP），使信息能在Internet上做动态、交互、跨平台的流通。它使用的媒体可以是文字、声音、图片、动画等等。在HTML中，声音、图片必须用其他软件进行制作，然后用HTML的相应标记编排在网页的源代码中，浏览器才能解读这些声音、图片源文件，并且在用户屏幕上展示其实际效果。,在HTML中所用的标记都是以“”一对符号来标识。在“”符号的左边一般不要直接有空格。在浏览器中，所有标记（包括“”及位于其中的文字）都不会被显示出来。 HTML的语法有三种表达方式，具体如下： 内容 内容 一个典型的元素由三部分组成：一个开始标记、内容、一个结束标记。 HTML的语法表达方式中的是该元素的开始标记，是该元素的结束标记。,通常，结束标记是由在相应的开始标记的元素名前面添加一个斜杠“/”而成。开始标记与结束标记一般是成对出现的，但也有一些元素是仅有开始标记而没有结束标记。如 、等等。另外，一些元素可以同时使用开始标记和结束标记，也可以只使用开始标记而省略结束标记，如P元素，可只使用其开始标记，省略其结束标记。 元素可能有相关的特性，叫做属性。元素的属性应出现在该元素开始标记的元素名之后及最后的“”之前，元素名与属性之间用空格分隔开。属性一般都有其属性值，通常每个属性均以“属性名”属性值形式成对出现。属性值应当被包含在英文的直双引号（“ “）内而不是在中文双引号（“ ”）中。然而，如果属性值只包含字母（AZ，az），数字（09），连字符（-），可省略直双引号。通常，在URL地址两边加上直双引号，以确保它们不会被Web服务器错误解释。 一些元素可以带有不止一个的属性，即是说，在元素开始标记中可以使用一系列的属性，元素名与属性之间、属性与属性之间均用空格分隔开。属性之间可以以任何次序出现。,10.1.2 HTML文件的基本结构 一个HTML 文件必须以标记开始，并以标记结束。 HTML文件是层次结构文件，它依次分为文件头和文件体两部分。文件头部包含与文件有关的信息，文件体部包含全部正文信息。文件头部由标记与标记所指定，文件头部是可选的，即是说，在一个HTML源文件中，文件头部可有可无。文件体部由标记与标记所指定。,和标记用于表示一个HTML文件的开始和结束。 和标记用于表示一个HTML文件头部的开始和结束。 和标记用于表示一个HTML文件标题的开始和结束。 和标记用于表示一个HTML 文件体部的开始和结束。 标记是用于段落分隔。 是注释标记的格式。 HTML语言是大小写无关的，故与或都是一样的。同理，与或也都是一样的。,10.2 HTML基本标记,10.2.1 背景与文本颜色设置 在HTML文档中，使用body元素的标记可以设置网页页面背景与文本的颜色。具体来说，在body元素的开始标记中，使用某些关系到页面全局的属性，可以控制页面的背景与文本颜色。 标记中不带任何属性时，表示全使用默认的属性值。 带有部分属性的标记的格式如下： ,表10-1 设置背景与文本颜色的常用属性,表10-2 常用的16种颜色名与颜色值,10.2.2 文本格式化设置 1. 标记 在FONT元素的开始标记中增加一些属性，可以对文本实现格式化处理。 1）face属性 此属性是用来设置文本字体名称。即是指定由FONT元素的开始标记与结束标记之间的文本，均用face的属性值“字体名”所代表的字体显示。 2）size属性 在FONT元素的开始标记中增加size属性，是设置字体大小的方法之一。 网页设计者可以根据FONT元素的开始标记后面紧接着的文本内容来选择适当的size属性的属性值（即字号）。 3）color属性 通过在FONT元素的开始标记中增加color属性，可设置文本字体的颜色。 根据FONT元素的开始标记后面紧接着的文本内容的外观需要，来选择适当的color属性的属性值（即颜色）。 设置字体颜色的标记格式如下： 其中#代表颜色，同bgcolor一样，它也可以使用颜色名或颜色值来设置。,2. 设置字体风格的标记 表10-3 常用字体风格标记格式,3. 标题字体设置标记 标题字体大小分为六级。标题字体的基本标记格式如下： 文本 其中：n = 1，2，3，4，5，6。即有h1、h2、h3、h4、h5和h6六级。 align 属性用于设置文本的对齐方式。具体如下： （1）align“left“表示文本左对齐，默认是文本内容左对齐。 （2）align“center“表示文本居中对齐。 （3）align“right“表示文本右对齐。 说明：文本标记中的文本均以粗体字形式显示，且会在所定义的文本的末尾自动插入一个空行，其中不能包含不同大小的字符。,10.2.3 其他一些基本设置 1. 段落设置 段落标记格式： 文本 align属性用于设置段落文本的对齐方式。意义与标题字体设置标记中的align属性相同。 其功能是：在标记处进行分段，相当于在该处换行的同时还接着插入一个空行，并按align的属性值，把所标记的文本内容进行对齐。当缺省align属性时，文本内容为左对齐。P元素的结束标记可有可无。 2. 换行设置 换行标记： 其功能是在标记处终止一行文本的显示并开始一个新行。,3. 不断行设置 在文件中，也许会有一些不想让它们分开的短语，那么使用NOBR元素的标记可以使它们出现在同一行上。在浏览器屏幕上某一窗口中，可能要使用水平滚动条来观看整行内容。 NOBR元素的标记格式如下： 文本 4. 居中对齐设置 在前面介绍的“标题字体设置”和“段落设置”内容里提到，在相应的开始标记中带有属性align“center“时，可使所标记的文本内容居中对齐。除此以外，居中对齐设置还可使用CENTER元素的标记来实现。 CENTER元素标记格式如下： 文本 在与标记之间的文本将水平居中显示在浏览器相应的窗口中。 5. 水平分隔线 在HTML中，标记将产生一条水平分隔线。 标记的基本格式： , （1）size属性。设置水平分隔线的粗细。省略size属性时，水平分隔线为默认粗细。 （2）width属性。设置水平分隔线的宽度。一条水平分隔线通常的宽度默认为页面宽度。具体可用下面两种方式来控制水平分隔线的宽度： （3）align属性。用于设置水平分隔线的对齐方式。意义与标题字体设置标记中的align属性相同。,7. 标记 标记作用是向搜索引擎提供有关此网页的信息。标记要放在与 标记之间，它是一个重要的标记。META标记可以用于鉴别作者、设定页面格式、标注内容提要和关键字以及刷新页面等。 标记常用基本属性说明如下： （1）http-equiv属性。主要是用于回应给浏览器一些有用的信息，以便正确地显示网页内容。其常用的属性值可选值格式如下： http-equiv“expires“：设定网页的过期期限。 http-equiv“pragma“：禁止浏览器从本地机的缓存中调阅页面内容。 http-equiv“refresh“：定时让网页自动链接到其他网页。 http-equiv“Set-Cookie“：设定Cookie。 http-equiv“Window-target“：设定页面使用的窗口。 http-equiv“Content-Type“：设定页面使用的语言。,（2）name属性。用来标识本页的一些主要内容。其值如下： name=“keywords“：用来告诉搜索引擎网页的关键字。 name=“description“：用来告诉搜索引擎网站的主要内容。 name=“robots“：机器人向导。 name=“author“：标注网页的作者。 当用name=“robots“时，content的属性值说明如下： all：页面应被索引且链接应被跟随。 none：页面不应被索引且链接不应被跟随。 index：页面应被索引。 noindex：页面不应被索引。 follow：链接应被跟随。 nofollow：链接不应被跟随。,8. 添加注释 在HTML源代码中添加上一定的注释，可提高该文档源代码的可读性。注释文本内容仅出现在HTML源代码中，它不会在浏览器上显示出来。 注释标记的两种格式如下： 9. 特殊字符实体设置 由于特殊原因，某些字符不能以其原来的样子直接写在HTML文件中。 特殊字符实体定义的格式： ）均表示空格字符。,10.2.4 列表格式设置 HTML支持多种列表。 列表类型如下： （1）无序（带段头符）的列表。 （2）有序（带编号）的列表。 （3）适合短项目的目录列表。 （4）菜单列表，其中每个项目占满一行。 （5）定义列表（也称词汇列表），每项包括一条术语和一条定义。,type属性具体有如下方式： type“disk“：显示出的段头符是实心圆。 type“circle“：显示出的段头符是空心圆。 type“square“：显示出的段头符是实心方框。 2）无序列表可以嵌套 当省略type属性时，默认段头符按嵌套次序依次为disk（实心圆）、circle（空心圆）和square（实心方框）。,2. 有序列表 有序列表即是带有序号的列表。序号可以是数字，可以是大写英文字母，可以是小写英文字母，可以是大写罗马数字，还可以是小写罗马数字等。 1）有序列表定义的基本格式 . . . type属性的属性值#用以指定序号类型。type属性具体有如下方式： （1）type“A“：表示编号设置为大写字母。 （2）type“a“：表示编号设置为小写字母。 （3）type“I“：表示编号设置为大写罗马数字。 （4）type“i“：表示编号设置为小写罗马数字。 （5）type“1“：表示编号设置为数字。,2）有序列表可以嵌套 其基本标记格式如下： ,3. 定义列表 定义列表适合于术语及其定义所构成的列表。每一列表项包含两部分：术语和术语的定义。定义列表最常用于词汇表，包含单词及单词的解释。 整个定义列表由DL元素的标记（即与）标明。 术语由DT元素的标记（即与）标明，结束标记可以省略。 术语的定义由DD元素的标记（即与）标明，结束标记可以省略。浏览器通常在术语之下的新行中以缩进（即左边留有一些空白）形式显示该术语的定义。 与这两个标记一般成对出现。 定义列表的基本格式： . . . . . ,10.3 图片,在Web页面中插入一些图片，有利于增强页面的效果。使用 标记可在页面中插入图片。标记的基本格式如下： 1. src属性 本属性用于指定图片文件的URL，image_URL代表某一幅图片的位置和文件名。必须注意，在Web上的图片一般以图片互换格式（.gif）或联合摄影专家JPEG格式（.jpg）图片文件提供。 2. alt属性 本属性用于指定当浏览器不下载图片时才显示的替代文字（推荐使用）。,3. align属性 本属性用于指定图片与其左右边内容的对齐关系或用于指定图片在网页上横向位置。align属性具体有如下方式： （1）align=“top“：表示图片的顶部与当前行的顶部对齐。 （2）align=“middle“：表示图片的正中与当前行的基线（baseline）对齐。 （3）align=“absmiddle“：表示图片的正中与当前行中最大项目的正中对齐。 （4）align=“bottom“：表示图片的底部与当前行的基线（baseline）对齐。 （5）align=“absbottom“：表示图片的底部与当前行中最大项目的底部对齐。 （6）align=“left“：表示图片在网页上左对齐，即置该图片于窗口左边。 （7）align=“right“：表示图片在网页上右对齐，即置该图片于窗口右边。,4. height属性 本属性用于指定图片显示的高度（其单位为像素）。如：height=“120“。 5. width属性 本属性用于指定图片显示的宽度（其单位为像素）如：width=“180“。 6. border属性 本属性用于指定边框宽度值（其单位为像素）。当省略border属性或border“0“时，表示该图片不带边框。,10.4 超链接,1. 超链接基本格式 超链接是通过在 Web 文档中添加A元素的开始标记及结束标记来建立的。 超链接标记的基本格式如下： 链接标签文本或图片 （1）href属性。 （2）target属性。 2. 以图片作为链接标签 以图片作为链接标签的基本格式： 其中： href属性指定由其属性值URL所标明的链接目的；指定以img_URL所标明的图片作为链接标签。 另外，链接标签可以是文本和一幅图片两者，其标记为： 链接标签文本,3. 链接到指定的锚点 1）创建锚点 在网页中创建锚点的基本格式： name属性指定在网页中创建一个以anchor_name为名称的锚点。 2）在链接中引用本网页上一个锚点 格式： 文本或图片 它表示链接到同一个页面中名为anchor_name的锚点的地方。也即是说，链接到同一个页面中有标记的地方。 3）在链接中引用其他网页上一个锚点 格式： 文本或图片 它表示链接到由another_URL所指定的页面中的名为anchor_name的锚点的地方。也即是说，链接到由another_URL所指定的页面中有标记的地方。,4. 设置发送电子邮件链接 发送电子邮件链接的基本格式： 链接标签文本或图片 当访问者单击某个发送邮件的链接标签时，浏览器会切换到一个邮件客户程序中并新建一个邮件信息窗口，供用户去编辑、发送邮件。,10.5 表格和框架,10.5.1 表格设置 许多文本内容用表格显示将有一目了然的特别效果。通常，一个表格由若干行若干列的单元格组成。 1. 表格有关的基本标记 .：定义表格。 .：定义表格标题，结束标记可以省略。 .：定义行，结束标记可以省略。 .：定义标题单元格，结束标记可以省略。 .：定义数据项单元格，结束标记可以省略。,2. TABLE 标记 使用TABLE元素的标记及可在网页上定义一个表格。 标记的基本格式： 属性说明如下： （1）border属性。指定表格边框的边框宽度值（单位为像素）。当省略此属性的值时，即仅写border时，边框默认宽度值是2。当省略border属性时，表示不显示表格边框。如：border，border=“1“，border=“4“等等。 （2）width属性。指定表格的宽度（单位为像素）。如：width=“300“。 （3）height属性。指定表格的高度（单位为像素）。如：height=“500“。 （4）cellspacing属性。指定表格单元格之间的间距（单位为像素）。如：cellspacing=“5“。 （5）cellpadding属性。指定表格单元格内容与单元格边线之间的间距（单位为像素）。如：cellpadding=“3“。,6）align属性。指定整个表格在网页窗口中横向对齐方式，具体方式如下： align=“left“：整个表格向网页窗口左边线对齐。 align=“center“：整个表格在网页窗口上居中对齐。 align=“right“：整个表格向网页窗口右边线对齐。 3. 表格标题 表格标题的基本标记格式： 标题文本 其中：align属性的属性值#可取值left、center或right。,4. 跨栏 一些表格需要跨行或跨列。HTML能提供这些功能。 1）跨列 要使标题单元格跨若干列，可以在TH元素的开始标记中使用colspan=“#“属性来实现。 标题单元格跨若干列的基本格式： 其中：colspan属性的属性值#为要跨列的列数，默认为1。 2）跨行 要使标题单元格跨若干行，可以在TH元素的开始标记中使用rowspan=“#“属性来实现。 标题单元格跨若干行的基本格式： 其中：rowspan属性的属性值#为要跨行的行数，默认为1。,5. 表格单元格中的文本对齐 在表格有关元素（如：tr、th、td）的开始标记中，使用align=“#“属性或valign=“#“属性可以实现表格单元格中文本的横向对齐或纵向对齐。 1）单元格中的文本横向对齐 表格单元格中的文本横向对齐的基本格式： 其中：align属性的属性值#可取值left、center或right。 2）单元格中的文本纵向对齐 表格单元格中的文本纵向对齐的基本格式： 其中：valign属性的属性值#可取值 top、middle、bottom或 aseline。,valign“top“：表示上对齐。 valign“middle“：表示中间对齐（默认中间对齐）。 valign“bottom“：表示下对齐。 valign“baseline“：表示以基线对齐。,10.5.2 框架设置 1. 框架FRAME标记 标记的基本格式： 标记的属性说明如下： （1）bordercolor属性。用于指定框架边界的颜色。 （2）frameborder属性。用于指定框架边界是否可见。它有如下两种表示方式： frameborder“1“：表示框架边界可见。默认为1。 frameborder“0“：表示框架边界不可见。,（3）marginheight属性。用于指定框架的上下边界和框架的内容之间保留空白区的高度，#3为该高度的数值，单位为像素。 （4）marginwidth属性。用于指定框架的左右边界和框架的内容之间保留空白区的宽度，#4为该宽度的数值，单位为像素。 （5）name属性。用于指定框架的名称。framename 由用户自己命名给出。 （6）scrolling属性。用于指定该框架的滚动条是否可用。它有如下表示方式： scrolling“auto“：表示当该框架窗口需要时自动提供滚动条。 scrolling“yes“：表示已经为该框架窗口提供了滚动条。 scrolling“no“：表示对该框架窗口不提供滚动条。 （7）noresize属性。该属性没有属性值。若有此属性，表示用户不能调整该框架窗口的大小；若没有此属性（即不写上noresize），表示用户可以调整该框架窗口的大小。 （8）src属性。用于指定该框架要显示Web文档的URL。,2. NOFRAMES 标记 NOFRAMES元素的标记格式如下： 3. 框架集 FRAMESET标记 框架集FRAMESET标记包含框架集定义，指定框架间距、尺寸及属性等。 和与标记都是在FRAMESET标记中使用的。FRAMESET标记的基本格式： ,标记的属性说明如下： （1）rows属性。用于指定每个框架占用的高度，rowHeightList框架高度列表中的各值之间要用逗号分隔开。框架高度值可以为像素数值、百分数（占窗口高度的百分比）或 *。 （2）cols属性。用于指定每个框架占用的宽度，columnWidthList框架度列表中的各值之间要用逗号分隔开。框架宽度值可以为像素数值、百分数（占窗口宽度的百分比）或 *。 （3）border属性。用于指定该框架边界的宽度值。框架边界的宽度值单位为像素。 （4）bordercolor属性。用于指定框架边界的颜色值。 （5）frameborder属性。用于指定框架边界是否可见。它有如下两种表示方式： frameborder“1“：表示框架边界可见。默认为1。 frameborder“0“：表示框架边界不可见。,4. 框架应用实例 编制出如下图所示的框架页面。 1）具体要求 2）文档的源代码,10.6 在网页中添加多媒体,1. 标记 在网页内嵌入声音或视频可以使用EMBED元素的标记来实现。 EMBED元素标记的基本格式： ,属性说明： （1）src属性。指定声音或视频文件的URL，注意要给出声音或视频文件完整的文件名和扩展名。 （2）controls属性。指定声音或视频控件出现的方式。#1可选用的方式值有：console、smallconsole、playbutton、pausebutton、stopbutton、volumelever。 （3）width属性。指定声音或视频控件的宽度值。 （4）height属性。指定声音或视频控件的高度值。 （5）loop属性。用以设置自动重复声音或视频的次数。#4有如下两种赋值形式： loop=“n“（n是正整数）设置自动重复声音或视频n次。 （6）align属性。该声音或视频控件在网页上与文本对齐。,#5是可选用的值，具体属性值格式如下： align=“top“：表示控件的顶部与当前行的顶部对齐。 align=“middle“：表示控件的正中与当前行的基线（baseline）对齐。 align=“absmiddle“：表示控件的正中与当前行中最大项目的正中对齐。 align=“bottom“：表示控件的底部与当前行的基线（baseline）对齐。 align=“absbottom“：表示控件的底部与当前行中最大项目的底部对齐。 align=“left“：表示控件在网页上左对齐，即置该图片于窗口左边。 align=“right“：表示控件在网页上右对齐，即置该图片于窗口右边。,（7）autostart属性。设置当访问者进入网页时会自动播放该声音或视频。#6 可选用的值是true和false。具体如下： autostart“true“：当访问者进入网页时会自动播放。 autostart“false“：当访问者进入网页时不会自动播放。,2. 网页内嵌入声音 使用EMBED元素的标记，在网页内嵌入声音，即是播放该声音文件。 3. 网页内嵌入视频 使用EMBED元素的标记，在网页内嵌入视频，即是播放该视频文件。 4. 为浏览器添加背景声音 为浏览器添加背景声音可以使用BGSOUND元素的标记来实现。 BGSOUND标记的基本格式： （1）src属性。是指定声音文件的URL，其中要给出声音文件完整的文件名和扩展名。 （2）loop属性。用以设置自动重复播放声音的次数。它有如下两种给值形式： loop=“n“（n 是正整数）表示自动重复播放声音n次。 loop=“-1“ 表示反复地播放该声音。,5. 创建滚动字幕 滚动字幕（也常称为“跑马灯”）实质上是浏览器窗口中的一块矩形区域，在其中所放置的文本或图片会实现滚动。创建滚动字幕可以使用MARQUEE元素的标记来实现。 MARQUEE标记的基本格式： 字幕文本 （1）width属性。指定滚动字幕的宽度。如：width=“200“。 （2）height属性。指定滚动字幕的高度。如：height=“30“。 （3）behavior属性。用以设置字幕滚动的方式。有三个可选值，具体表示如下： behavior=“scroll“：表示文本在字幕的一侧开始滚动，在另一侧消失。 behavior=“slide“：表示文本在字幕的一侧开始滚动，当它到达另一侧时停止。 behavior=“alternate“：表示文本在字幕的一侧开始滚动，当它到达另一侧是弹回，即是左右滚动。,（4）direction属性。用以设置文本滚动开始的方向。有四个可选值，具体表示如下： direction=“left“：表示字幕中的文本自右向左滚动。 direction=“right“：表示字幕中的文本自左向右滚动。 direction=“up“：表示字幕中的文本自下向上滚动。 direction=“down“：表示字幕中的文本自上向下滚动。 （5）bgcolor属性。用以设置字幕背景的颜色。请参看表10-2常用的16种颜色名与颜色值。,10.7 表单的应用,表单（Form）是实现交互式功能的主要方式。 10.7.1 FORM标记 FORM标记的基本格式： . （1）action属性。指定用于处理表单提交的信息的CGI程序的URL。 （2）method属性。指定提交表单信息的方式。有两个可选值： method=“get“：将表单信息作为URL一部分传送。较为适合传送少量的数据。 method=“post“：表单信息不作为URL一部分传送。可向服务器提交大量的数据。 （3）name属性。指定表单的名称。 （4）target属性。指定CGI程序处理后返回的信息在哪个窗口显示。,10.7.2 input标记 1. 标记在表单上定义一个按钮 在表单上定义一个按钮格式： （1）type属性。type=“button“表示在表单上定义一个按钮。 （2）name属性。指定该按钮的名称button_name。 （3）value属性。指定显示在该按钮上的文本button_text。,2. 标记在表单上定义一个文本输入框 在表单上的一个文本输入框中，输入的字符以真值回显在文本输入框中。在表单上定义文本输入框格式： （1）type属性。type=“text“表示在表单上定义一个文本输入框。 （2）name属性。指定该文本输入框的名称text_name。 （3）maxlength属性。指定该文本输入框能接受的字符串的最大长度（ASCII码字符数）MaxChars。 （4）size属性。指定该文本输入框的宽度（ASCII码字符数）CharLength。 （5）value属性。指定该文本输入框的初始值text_value。,3. 标记在表单上定义一个口令输入框 在表单上的口令输入框中，输入的字符不以真值回显在口令输入框。这对口令的保密很有用。在表单上定义口令输入框格式： （1）type属性。type=“password“表示在表单上定义一个口令输入框。 （2）name属性。指定该口令输入框的名称pass_name。 （3）maxlength属性。指定该口令输入框能接受的字符串的最大长度（ASCII码字符数）MaxChars。 （4）size属性。指定该口令输入框的宽度（ASCII码字符数）CharLength。,4. 标记在表单上定义一个复选框 格式： （1）type属性。type=“checkbox“表示在表单上定义一个复选框。 （2）name属性。指定该复选框的名称ckb_name。同一组的每个复选框的名称应相同。 （3）checked属性。指定该复选框预先选中。省略checked时表示该复选框没有预先选中。 （4）value属性。指定该复选框选中时要返回的值。,5. 标记在表单上定义一个单选框 格式： （1）type属性。type=“radio“表示在表单上定义一个单选框。 （2）name属性。指定该单选框的名称radio_name。同一组的每个单选框的名称应相同。 （3）checked属性。指定该单选框预先选中。省略checked时表示该单选框没有预先选中。同一组的所有单选框中只能允许一个单选框可以被预先选中。 （4）value属性。指定该单选框选中时要返回值。,6. 在表单上定义一个下拉列表框 下拉列表框定义的基本格式： 第1列表项文本 第2列表项文本 . 第N列表项文本 其中： .标记表示在表单上定义一个下拉列表框。 列表项文本标记表示在下拉列表框中定义一个列表项。结束标记可以省略。 .中由列表项文本所定义的全部列表项文本都将会按其定义的顺序在该下拉列表框中列出。,1）标记的基本格式 （1）name属性。指定该下拉列表框的名称select_name。 （2）size属性。指定该下拉列表框的宽度（ASCII码字符数）。 （3）multiple属性。表示该下拉列表框允许同时选中多项。当省略multiple时，只能选一项。 2）标记的基本格式 列表项文本 （1）value属性。指定该列表项的值。 （2）selected属性。指定该列表项预先选中。省略selected时表示该列表项没有预先选中。,7. 在表单上定义一个多行文本输入框 多行文本输入框定义的基本格式： （1）name属性。指定该多行文本输入框的名称ta_name。 （2）rows属性。指定该多行文本输入框的行数ta_rows。 （3）cols属性。指定该多行文本输入框每行的列数（即ASCII码字符数）ta_columns。 8. 表单应用实例,10.8 层叠样式表CSS和DIV标记,10.8.1 层叠样式表CSS概述 CSS（Cascading Style Sheets，层叠样式表）是用于控制（增强）网页样式并允许将样式信息与网页内容分离的一种标记性语言，现在已经为大多数的浏览器所支持。 应用样式表有三种方法：局部、内部和外部。在这些方法中，可以只使用一种，也可以同时使用这三种。一般来说，局部样式将覆盖任何内部样式，内部样式将覆盖外部样式 内部样式表实际上是在网页HTML文档头部定义CSS。它们允许用户在网页HTML文档头部（即由与所标记）设置整个HTML文档中使用的样式。内部样式表特别适合于含有大量文本的单页。 外部样式表实际上是在网页HTML文档外部定义CSS，即是在一个其扩展名为.css的文件中定义CSS。外部样式表适用于让站点上的若干网页具有相同的外观。,1. CSS的基本结构格式 对于内部样式表和外部样式表来说，样式表的声明分为选择符和块 ，块 里包含属性和属性的取值（即属性值）。由于局部样式表声明是在某个元素的开始标记内，故其格式不属下列格式。 1）CSS的基本格式 选择符 属性1:属性值1; 属性2:属性值; ; 属性K:属性值K 当该选择符需要有多个属性时，必须在两个属性之间用分号“;”来分隔开；当某个属性又需要有多个属性值时，必须在两个属性值之间用逗号“,”来分隔开。 2）选择符编组的CSS格式 选择符1, 选择符2, 选择符N属性1:属性值1; 属性2 ; 属性K:属性值K 当多个选择符将使用相同的设置时，就可把这些选择符一起放置在块 的前面，并在两个选择符之间用逗号“,”来分隔开，这就是选择符编组。使用选择符编组方法可以减少 CSS多余的冗余部分，并可减少文本编辑工作量。,3）上下文关联选择符的CSS格式 选择符1 选择符2 属性1:属性值1; 属性2:属性值2; ; 属性K:属性值K 其中“选择符1 选择符2”格式中的选择符叫做上下文关联选择符。上下文关联选择符的CSS格式与选择符编组的CSS格式非常相似，只是在选择符之间少加了逗号“,”，但其作用却大不相同。上下文关联选择符的CSS格式表示如果选择符2包括的内容同时包括在选择符1里时，所设置的样式规则才起作用。 使用上下文关联的选择符的CSS格式，可以将HTML中的元素放在选择符里面来建立更多的指定样式。,2. 用CLASS和ID作为选择符 1）CLASS选择符 CLASS 选择符（即“类”选择符）的定义方法是以一个圆点号“.”开头，紧接着是CLASS（即“类”）的名称，再把标准的属性和值定义写在大括号中。通用类定义样式的基本格式如下： .class_name 属性:属性值1; 属性2:属性值2; ; 属性K:属性值K 当定义了包含有 CLASS 的样式表单作用于一个HTML文档时，就可以把CLASS加入文档的任何一个 HTML 标记中。就是说，class 属性是用于在HTML中以指明元素的类。 2）ID选择符 ID选择符的定义方法及用法与CLASS选择符差不多，只不过它是以“#”号开头而不是以圆点号“.”开头。 ID选择符的定义方法是以一个“#”开头，紧接着是ID的名称，再把标准的属性和值定义写在大括号中。其定义的基本格式如下： #id_name 属性:属性值1; 属性2:属性值2; ; 属性K:属性值K 当定义了包含有ID的样式表作用于一个HTML文档时，就可以把ID加入文档的任何一个HTML标记中。,3. 伪类和伪元素 伪类和伪元素是特殊的类和元素，伪类和伪元素可以用在CSS选择符里，但是它不能存在于HTML的源代码中，它们能自动地被支持CSS的浏览器所识别。 CSS仅支持两个伪元素，它们分别用于文本块的首行和首字。 伪类或伪元素定义的格式的基本形式如下： 选择符:伪类 属性: 属性值 选择符:伪元素 属性: 属性值 注意，伪类和伪元素前一定要有冒号“:”。 伪类和伪元素不应用HTML的class属性来指定。 1）锚伪类（Anchor pseudo-classes） 平时浏览Web页面时，大多数的链接是这样定义颜色的：未浏览的为蓝色；已浏览的为紫色，鼠标悬挂或激活为红色。可是，有些站点链接的颜色并不是这样的，这就要用到锚伪类来定义这种样式。,3. 伪类和伪元素 伪类和伪元素是特殊的类和元素，伪类和伪元素可以用在CSS选择符里，但是它不能存在于HTML的源代码中，它们能自动地被支持CSS的浏览器所识别。 CSS仅支持两个伪元素，它们分别用于文本块的首行和首字。 伪类或伪元素定义的格式的基本形式如下： 选择符:伪类 属性: 属性值 选择符:伪元素 属性: 属性值 注意，伪类和伪元素前一定要有冒号“:”。 伪类和伪元素不应用HTML的class属性来指定。 1）锚伪类（Anchor pseudo-classes） 平时浏览Web页面时，大多数的链接是这样定义颜色的：未浏览的为蓝色；已浏览的为紫色，鼠标悬挂或激活为红色。可是，有些站点链接的颜色并不是这样的，这就要用到锚伪类来定义这种样式。 2）“首行”伪元素 CSS仅支持两个伪元素，它们分别用于文本块的首行和首字。同伪类选择符一样，伪元素选择符前也加以冒号，如“:first-line“。 “首行”伪元素“:first-line”选择块单元中的文本的第一行。“首行”是一个相对的概念，如果浏览器的窗口足够大，那么可能整段文字都是“首行”，如果窗口小一些，那么“首行”就仅仅包括一部分的文字。因此，“首行”并不硬性地规定到哪个词为止，而是根据“画布（canvas）”的大小来确定“首行”的长度。 3）“首字”伪元素 “首字”伪元素“:first-letter”选择块单元中的文本的第一个字母，被设计以支持诸如首字下沉等格式特点。,10.8.2 CSS 属性简介 1. 字体属性 CSS 中与字体有关的属性如下： 1）font-family 格式： font-family: font_name1,font_name2,font_name3, 2）font-size 格式： font-size: absolute-size | relative-size | length | percentage 3）font-style 格式： font-style: normal | italic | oblique 4）font-weight 格式： font-weight: normal | bold | bolder | lighter | number 5）font-variant 格式： font-variant: normal | small-caps 6）font 格式： font: font-style | font-variant | font-weight | font-size/line-height | font-family,2. 文本属性 1）word-spacing 格式： word-spacing: normal | 说明：用于设置对象中各个单词之间的间距。该属性必须以长度为单位，且允许正、负值。 其属性值含义如下： （1）normal：默认间距。 （2）length：由浮点数字和单位标识符组成的长度值，允许为负值。 2）letter-spacing 格式： letter-spacing: normal | 说明：用于设置对象中各个字符之间的间距。该属性必须以长度为单位，且允许正、负值。 其属性值含义如下： （1）normal：默认间距，此时浏览器将根据最佳的状态调整字符之间的间距。 （2）length：由浮点数字和单位标识符组成的长度值，允许为负值。,3）text-decoration 格式： text-decoration: none | underline | blink | overline | line-through 说明：用于设置元素中文字的“装饰”样式，这些样式共有五种。 其属性值如下： （1）nono：无装饰，对于多数元素来说是默认值。 （2）underline：下划线。 （3）blink：闪烁。 （4）overline：上划线。 （5）line-through：贯穿线（删除线）。 4）vertical-align 格式： vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | length,其属性值如下： （1）baseline：将元素的基线与上级元素的基线对齐。如果该元素没有基线，那么就将该元素的底端与上级元素的基线对齐。 （2）middle：将元素的垂直中点与上级元素的垂直中点对齐。 （3）sub：元素下标。 （4）super：元素上标。 （5）text-top：将元素的顶端与上级元素文字的顶端对齐。 （6）text-bottom：将元素的底端与上级元素文字的底端对齐。 （7）top：将元素的顶端与该行最高的元素对齐。 （8）bottom：将元素的底端与该行最低的元素对齐。,5）text-align 格式： text-align: left | right | scenter | justify 其属性值如下： （1）left：左对齐。 （2）right：右对齐。 （3）center：居中。 （4）justify：两端对齐。 6）text-transform 格式： text-transform: none | capitalize | uppercase | lowercase 说明：设置对象中文本的大小写。 其属性值如下： （1）none：无转换发生。 （2）capitalize：将每个单词的第一个字母转换成大写，其余无转换发生。 （3）uppercase：转换成大写。 （4）lowercase：转换成小写。,7）text-indent 格式： text-indent: | 说明：设置对象中文本首行的缩进方式，称为“首行缩进”。 其属性值含义如下： （1）length：由浮点数字和单位标识符组成的长度值，允许为负值。当其值为正数时，是设置首行缩进；当其值为负数时，是设置悬挂缩进。 （2）percentage：百分比值。浏览器处理百分比值时参考上级元素的宽度。 8）line-height 格式： line-height: normal | | | 其属性值含义如下： （1）normal：默认行高。 （2）number：浮点数，不允许为负值。 （3）length：由浮点数和单位标识符组成的长度值，不允许为负值。 （4）percentage：百分比值。浏览器处理时将参考元素本身的字体大小。不允许为负值。,3. 颜色和背景属性 在CSS属性中，通常color特指前景的颜色。而background可以是背景颜色或者是背景图案。 1）color 格式： color: | color的属性值含义如下： （1）颜色名：使用英文颜色名。例如：p color: green 。 （2）颜色值：颜色值=#rrggbb，其中rrggbb为十六进制的RGB数码。 2）background-color 格式： background-color: | | transparent background-color 的属性值含义如下： （1）颜色名：例如：body background-color: yellow。 （2）颜色值：颜色值=#rrggbb，其中rrggbb为十六进制的RGB数码。 （3）transparent初始值，背景颜色是透明的。 3）background-image 格式： background-image: | none 说明：设置一个元素的背景图案。 background- image的属性值含义如下： （1）image-URL：代表某一幅图片的位置和名称。 （2）none：初始值，没有背景图案。,4. 边界边距大小属性 1）margin-top 格式： margin-top: | | auto 说明：设置一个元素顶端的边距，这个边距可以是相对于浏览器窗口边框来说，也可以是相对于上级元素来说。 margin-top 的属性值含义如下： （1）length：由浮点数和单位标识符组成的长度值，可为正、负值。 （2）percentage：百分比值。浏览器处理时将参考上级元素的宽度。 （3）auto：值被自动设置为相对边的值。,2）margin-right 格式： margin-right: | | auto 说明：设置一个元素右侧的边距，这个边距可以是相对于浏览器窗口边框来说，也可以是相对于上级元素来说。 margin-right 的属性值含义如下： （1）length：由浮点数和单位标识符组成的长度值，可为正、负值。 （2）percentage：百分比值。浏览器处理时将参考上级元素的宽度。 （3）auto：值被自动设置为相对边的值。 3）margin-bottom 格式： margin-bottom: | | auto 说明：设置一个元素底部的边距，这个边距可以是相对于浏览器窗口边框来说，也可以是相对于上级元素来说。 margin-bottom 的属性值含义如下： （1）length：由浮点数和单位标识符组成的长度值，可为正、负值。 （2）percentage：百分比值。浏览器处理时将参考上级元素的宽度。 （3）auto：值被自动设置为相对边的值。,4）margin-left 格式： margin-left: | | auto 说明：设置一个元素左侧的边距，这个边距可以是相对于浏览器窗口边框来说，也可以是相对于上级元素来说。 margin-left 的属性值含义如下： （1）length：由浮点数和单位标识符组成的长度值，可为正、负值。 （2）percentage：百分比值。浏览器处理时将参考上级元素的宽度。 （3）auto：值被自动设置为相对边的值。 5）margin 格式： margin: | | auto 1, 4 margin-right 的属性值含义如下