【教学课件】第二部分HTML语言.ppt

《【教学课件】第二部分HTML语言.ppt》由会员分享，可在线阅读，更多相关《【教学课件】第二部分HTML语言.ppt（93页珍藏版）》请在三一办公上搜索。

1、第2部分 HTML语言,教学要求,掌握HTML基本构成，能基本看懂一个网页的源文件；掌握样式表的构成及使用原理；了解样式表的基本属性。,2.1 HTML文档的基本构成,支持HTTP的浏览器均为图形用户界面(GUI)，HTML文档的基本结构据此而确立。GUI通常由标题栏和窗口作为其最基本的构成，对应于HTML文档中的头部分“HEAD”和文档主体部分“BODY”。HTML的基本结构如下：,基本HTML页面以标签开始，以结束。,2.2.1 文档头标记,1.HTML标记 HTML标记表示文档内容的开始和结束标记，是开始标记，是结束标记，其他所有HTML代码都位于这两个标记之间。2.首部标记：指定网页的

2、标题：定义文档内容样式表：插入脚本语言程序：描述网页信息：注释内容 这些信息首先向浏览器提供,但不作为文档内容提交。3.标题栏标记 在浏览器标题栏中显示的文本。通常，Web搜索工具用它作为索引。,2.2.1 文档头标记,4.描述标记 描述文档属性参数。常用属性 NAME=META名字(description,keyword)CONTENT=页面的内容 HTTP-EQUIV=CONTENT属性的类别说明：HTTP-EQUIV=Content-TYPE CONTENT=页面内容类型 HTTP-EQUIV=“refresh”,CONTENT=“页面刷新时”HTTP-EQUIV=“content-la

3、nguage”,CONTENT=“页面语言”HTTP-EQUIV=“PICS-Label”,CONTENT=页面内容的等级 HTTP-EQUIV=“expires”,CONTENT=页面过期的日期,2.2.1 文档头标记,【例2.2】HEAD演示页面。输入下列内容，以E2_head.HTM作为文件名保存：HAED演示页面标题 演示页面内容,JPEG图像是image/jpeg，CSS文件是text/csss和HTML一般使用text/html。,2.2.1 文档头标记,用浏览器打开文档，将显示如图所示的页面。,4.正文标记正文标记中包含了文档的内容。常用属性如下：BACKGROUND=文档背景图

4、像的URL地址 BGCOLOR=文档的背景颜色 TEXT=文档中文本的颜色 LINK=文档中链接的颜色 VLINK=文档中已被访问过的链接的颜色 ALINK=文档中正被选中的链接的颜色,2.2.1 文档头标记,颜色属性的值有3种表示方法：（1）使用颜色名称来表示。（2）使用十六进制格式数值#RRGGBB来表示，RR、GG和BB分别表示颜色中的红、绿、蓝三基色的两位十六进制数据。,（3）RGB(r,g,b)函数表示。r,g,b的数值范围为0255或者0%100%。,2.2.2 设置文本格式,1.分段标记 段落是文档的基本信息单位。文档中原有的回车和换行均被忽略，分段标记定义一个新段落，换行并插入

5、一个空行。ALIGN=段落的水平对齐方式 其值如下:Left:左对齐（默认值）center:对中 right:右对齐 justify:两边对齐 省略该属性，则取默认值。下同。2换行标记换行标记强行规定了当前行的中断，使后续内容在下一次显示的。,2.2.2 设置文本格式,【例2.3】分段标记和换行标记的演示。输入下列内容，以E2_pbr.HTM作为文件名保存：分段标记和换行标记演示 第1行演示 第2行演示 第3行演示 第4行演示,2.2.2 设置文本格式,3.标题标记 标题标记用于设置文档中的标题和副标题标记表示字体最大的标题，标记表示字体最小的标题。,ALIGN=段落的水平对齐方式 其值如下：

6、Left:左对齐（默认值）center:对中 right:右对齐 Justify:两边对齐,2.2.2 设置文本格式,【例2.4】各种标题标记大小演示。输入下列内容，以E2_h16.HTM作为文件名保存：H1-H6标题演示 下面是标题演示 H1标题演示 H2标题演示 H3标题演示 H4标题演示 H5标题演示 H6标题演示,用浏览器打开文档，将显示如图所示的页面,2.2.2 设置文本格式,4.对中标记 标记中间的内容全部对中。【例2.5】CENTER标记演示。输入下列内容，以E2_center.HTM作为文件名保存：CENTER标记演示 下面是CENTER标记演示 H1标题演示 H2标题演示 H

7、3标题演示 H4标题演示 H5标题演示 H6标题演示,2.2.2 设置文本格式,5.块标记 定义文档块。常用属性如下：ALIGN=段落的水平对齐方式 其值如下：Left:左对齐（默认值）center:对中 right:右对齐,【例2.6】DIV标记演示。输入下列内容，以E2_div.HTM作为文件名保存：DIV标记演示下面是DIV标记演示 H1标题演示 H2标题演示 H3标题演示H4标题演示H5标题演示 H6标题演示,2.2.2 设置文本格式,6.水平线标记 HR标记在文档中添加一条水平线，用来分隔文档。常用属性如下：ALIGN=段落的水平对齐方式其值如下：Left:左对齐（默认值）cente

8、r:对中 right:右对齐COLOR=线的颜色NOSHADE=显示一条无阴影的实线SIZE=线的宽度(以像素为单位)WIDTH=线的长度(像素或百分比(占页面宽度的百分数)。,2.2.2 设置文本格式,【例2.7】各种水平线的演示。输入下列内容，以E2_hr.HTM作为文件名保存；各种水平线的演示 用浏览器打开文档，将显示如图所示的页面。,2.2.2 设置文本格式,7.字体标记 使用字体标记FONT来设置文本的字符格式，主要包括字体、字号和的颜色等。常用属性如下：FACE=“字体名表”(字体名之间用“,”分隔)浏览器首先使用字体名表中的第1种字体来显示标记内的文本。如果在运行浏览器的计算机上

9、没有安装第1种字体，则会尝试字体名表中的第2种字体，直至找到匹配字体。如果到达列表结束，仍然找不到匹配字体，浏览器将使用默认字体。SIZE=“字号值”SIZE属性指定字体的大小（字号），其值从17，默认值为3。SIZE值越大，显示的字号就越大。也可以使用+或号来指定相对字号，相对于基本字体（BASEFONT）的大小。COLOR=“颜色值”,2.2.2 设置文本格式,【例2.8】使用字体标记来设置文本的字体、字号和颜色。输入下列内容，以E2_font.HTM作为文件名保存：设置字体、字号和颜色 设置字体、字号和颜色 设置的中文字体 English FONT Demo.Good night!晚安！

10、,2.2.2 设置文本格式,用浏览器打开文档，将显示如图所示的页面。,8.固定字体标记粗体斜体大字体小字体固定宽度字体9.样式标记上标下标下划线删除线删除线,2.2.2 设置文本格式,10.原样显示标记 将包含其中的内容(包括回车和空格)原样显示出来。,2.2.2 设置文本格式,【例2.9】特殊符号样式。输入下列内容，以E2_schar.HTM作为文件名保存：设置字符样式 Microsoft 解二元一次方程 aX2+bX+c=0 解不等式 x+y 2 x-y,2.2.3 列表标记,列表格式包括有序列表格式和无序列表格式。1.有序列表标记 列表项1 列表项2 列表项n 有序列表是在各列表项前面显

11、示数字或字母的缩排列表，可以使用有序列表标记OL和列表项记LI来创建。(1)OL标记 OL标记控制有序列表样式和起始值。有两个常用属性：START=数字序列的起始值(自动取整数值)TYPE=数字序列样式 其取值如下：1：表示阿拉伯数字1、2、3等，此为默认值。A：表示大写字母A、B、C等 a：表示小写字母a、b、c等 I：表示大写罗马数字I、II、III、IV等 i：表示小写罗马数字i、ii、iii、iv等,2.2.3 列表标记,(2)LI标记 LI标记定义列表项。位于和标记之间。LI标记有两个常用属性：TYPE=数字样式(其取值与OL标记的TYPE属性相同)VALUE=新的数字序列起始值以获

12、得非连续性的数字序列【例2.10】创建有序列表。输入下列内容，以E2_olli.HTM作为文件名保存：有序列表示例 用数字表示的列表 电子管 晶体管 小规模集成电路 中规模集成电路 大规模集成电路,2.2.3 列表标记,2.创建无序列表 无序列表是一种在各列表项前面显示特殊项目符号的缩排列表，可以使用无序列表标记UL和列表项标记LI来创建。列表项1 列表项2 列表项n UL标记控制列表项前面显示的项目符号。常用属性如下：TYPE=列表项前面显示的项目符号 其取值如下：disc：使用实心圆作为项目符号（默认值）circle：使用空心圆作为项目符号 square：使用方块作为项目符号注意：在IE浏

13、览器中，TYPE属性的值是区分大小写的。,2.2.3 列表标记,用浏览器打开文档，将显示如图所示的页面。,【例2.11】创建无序列表。输入下列内容，以E2_ulli.HTM作为文件名保存：无序列表计算机课程计算机导论操作系统计算机原理数据结构,2.2.3 列表标记,3.目录列表:列表项1 列表项2 列表项n 4.菜单列表 列表项1 列表项2 列表项n 5.描述性列表 列表描述项 列表项 列表项 列表描述项,【例2.12】创建描述性列表。输入下列内容，以E2_dldt.HTM作为文件名保存：描述性列表描述性列表江苏省 镇江市 常州市 扬州市山东省 济南市 青岛市,2.2.4 多媒体标记,1.图像

14、标记 在网页中插入图像、在网页中播放视频文件。SRC=图像文件的URL地址 图像可以是JPEG文件、GIF文件或PNG文件。ALT=图像的简单文本说明 在浏览器下不能显示图像或图像加载时间过长时显示该文本。HEIGHT=显示图像的高度(像素或百分比)WIDTH=显示图像的宽度(像素或百分比)HSPACE=与左右相邻对象的间隔(像素)VSPACE=与上下相邻对象的间隔(像素)ALIGN=图像不到显示区域大小时的对齐方式 ALIGN属性的取值如下：top：图像与文本顶部对齐。middle：图像与文本中央对齐。bottom：图像与文本底部对齐也可以在图像的左右绕排文本，此时ALIGN属性的取值如下：

15、left：图像居左文本居右right：图像居右文本居左,2.2.4 多媒体标记,BORDER=图像边框点数。CONTROLS：指定该选项后，若有多媒体文件，则显示一套视频控件。DYNSRC=指定要播放的多媒体文件的URL。在IMG标记中，dynSRC属性优先于SRC属性。START=何时开始播放多媒体文件 其取值可以是fileopen或mouseover。LOOP=多媒体文件的播放次数(整数)如果不限播放次数，则应将该属性设置为关键字infinite。LOOPDELAY=两次播放之间的延迟。,2.2.4 多媒体标记,【例2.13】网页中的多媒体。输入下列内容，以E2_img.HTM作为文件名保

16、存：在网页中的多媒体,2.2.4 多媒体标记,用浏览器打开文档，将显示如图所示的页面。,2.2.4 多媒体标记,2.插入字幕标记 滚动显示的文本信息，用于水平或垂直滚动显示文本信息。主要属性如下：ALIGN=字幕与周围文本的对齐方式，其取值如下：top：对顶middle：对中bottom：对底BEHAVIOR=文本动画的类型，其取值如下：scroll：滚动slide：滑行alternate：交替BGCOLOR=字幕的背景颜色DIRECTION=文本的移动方向，其取值如下：down：向下left：向左(默认)right：向右up：向上,2.2.4 多媒体标记,【例2.14】网页中插入一个字幕。输

17、入下列内容，以E2_marquee.HTM作为文件名保存：字幕演示网页在网页中插入一个自下而上移动的字幕2008年北京奥运会全世界将看到一个无比美丽的北京,2.2.4 多媒体标记,浏览器打开文档，将显示如图所示的页面。,2.2.4 多媒体标记,3.插入背景音乐标记主要属性如下：BALANCE=如何将声音分成左声道和右声道。取值为-10 000+10 000，默认值为0。LOOP=声音播放的次数。0：播放一次；大于0的整数：播放指定的次数；-1：则声音反复播放，直到页面卸载。SRC=播放的声音文件的URL。常用的声音文件类型：波形文件（.wav）MIDI文件（.mid）AIFF文件（.aif）A

18、U文件(.au)MP3文件（*.mp3）VOLUME=音量高低。其取值为-10 0000，默认值为0。,2.2.4 多媒体标记,【例2.15】在网页中插入背景音乐。输入下列内容，以E2_bgsound.HTM作为文件名保存：在网页中插入背景音乐当前网页正在演奏黄河大合唱！,2.2.5 使用表格,通过TABLE标记来定义表格；表格中的每一行通过TR标记来表示；行中的单元格通过TD或TH标记来定义，其中TH标记定义表格的列标题单元格；表格的标题说明通过CAPTION标记来定义。,表格标题文字第1列表头第2列表头第n列表头第1列数据第2列数据第n列数据第1列数据第2列数据第n列数据,2.2.5 使用

19、表格,用浏览器打开文档，将显示如图所示的页面。,2.2.5 使用表格,1.设置表格的属性 TABLE标记创建表格时，可以设置下列属性：ALIGN=表格的对齐方式，取值如下：left：对左（默认值），center：对中，right：对右 BACKGROUND=表格背景图片的URL地址 BGCOLOR=表格的背景颜色 BORDER=表格边框的宽度(像素)，默认值为0。BORDERCOLOR=表格边框颜色，BORDER0时起作用。BORDERCOLORDARK=3D边框的阴影颜色，BORDER0时起作用。BORDERCOLORLIGHT=3D边框的高亮显示颜色，BORDER0时起作用。CELLPAD

20、DING=单元格内数据与单元格边框之间的间距(像素)CELLSPACING=单元格之间的间距(像素)WIDTH=表格的宽度(像素或百分比),2.2.5 使用表格,2.设置行的属性 表格中的每一行是用TR标记来定义的，可以设置下列属性：ALIGN=行中单元格的水平对齐方式。取值为left（默认值）、center或right。BACKGROUND=作为行的背景图像文件的URL BGCOLOR=行的背景颜色 BORDERCOLOR=行的边框颜色。只有当TABLE标记的BORDER0起作用。BORDERCOLORDARK=行的3D边框的阴影颜色。只有当TABLE标记的BORDER0起作用。BORDER

21、COLORLIGH=行的3D边框的高亮颜色。只有当TABLE标记的BORDER0起作用。VALIGN=行中单元格内容的垂直对齐方式 其取值如下：top：顶端对齐，middle：居中对齐，bottom：底端对齐，baseline：基线对齐。,2.2.5 使用表格,3.设置单元格的属性 表格的单元格通过TD标记来定义，标题单元格也可以通过TH标记来定义。TD标记和TH标记可以设置下列属性：ALIGN=行中单元格的水平对齐方式。取值为left（默认值）、center或right。BACKGROUND=单元格的背景的图像的URL BGCOLOR=单元格的背景颜色。BORDERCOLOR=单元格的边框颜

22、色。只有当TABLE标记的BORDER0起作用。BORDERCOLORDARK=单元格的3D边框的阴影颜色。只有当TABLE标记的BORDER0起作用。BORDERCOLORLIGHT=单元格的3D边框的高亮颜色。只有当TABLE标记的BORDER0起作用。COLSPAN=合并单元格时一个单元格跨越的表格列数。ROWSPAN=合并单元格时一个单元格跨越的表格行数。VALIGN=单元格中文本的垂直对方方式。取值可以是top、middle（默认值）、bottom或baseline。NOWRAP：若指定该属性，则避免Web浏览器将单元格里的文本换行。,2.2.6 使用超链接,按照目标端点的不同，超链

23、接分为以下几种形式：1.创建文件链接 使用A标记来创建超链接，常用属性如下：HREF=目标端点的URL地址（可以包含一个或多个参数）在浏览器中，如果要链接到的文件是一个HTML文档，则在当前窗口或其他目标窗口中装载该文档。TARGET=窗口或框架的名称 目标文档将在指定的窗口或框架中打开。如果省略该属性，则目标文档当前窗口打开。TARGET属性的取值既可以是窗口或框架的名称，也可以是如下保留字：_blank：未命名的新浏览器窗口 _parent：父框架页或窗门中。如果包含链接的框架不是嵌套的，则链接的目标文件加载到整个浏览器窗口中。_self：所在的同一框架或窗口中 _top：整个浏览器窗口中

24、，并删除所有框架。TITLE=指向超链接时所显示的标题文字,2.2.6 使用超链接,【例2.17】使用A标记创建超链接。输入下列内容，以E2_a.HTM作为文件名保存：创建超链接创建超链接下面是超链接示例南京大学 东南大学,2.2.6 使用超链接,用浏览器打开文档，将显示如图所示的页面。,2.2.6 使用超链接,2.创建锚点链接 锚点链接的目标端点是网页中的一个位置。创建锚点链接时，要在页面的某处设置一个位置标记（锚点），并给该位置指定一个名称，以便在同一页面或其他页面中引用。,3.创建邮件链接 通过邮件链接(E-mail链接)可以启动电子邮件客户端程序（如Outlook或FoxMail等），

25、并允许访问者向指定的地址发送邮件。,该标记的HREF属性应由3个部分组成：第1部分是电子邮件协议名称mailto。第2部分是电子邮件地址。第3部分是可选的邮件主题，其形式为“subject=主题”。第1部分与第2部分之间用冒号(:)分隔，第2部分与第3部分之间用问号(?)分隔。,2.1.7 表单及其控件标记,1.表单标记 在HTML语言中，表单通过FORM标记来定义。FORM标记具有以下属性：NAME=表单的名称。命名表单后，可以使用脚本语言来引用或控制该表单。METHOD=表单数据传输到服务器的方法，其取值如下：post：在HTTP请求中嵌入表单数据，get：将表单数据附加到请求该页的URL

26、中。ACTION=接收表单数据的服务器端程序或动态网页的URL地址。TARGET=目标窗口，其取值如下：_Blank：在未命名的新窗口中打开目标文档。_parent：在显示当前文档的窗口的父窗口中打开目标文档。_self：在提交表单所使用的窗口中打开目标文档。_top：在当前窗口内打开目标文档，确保目标文档占用整个窗门。FORM标记具有以下事件：ONSUBMIT=提交表单时调用的事件处理程序 ONRESET=重置表单时调用的事件处理程序,2.1.7 表单及其控件标记,(1)单行文本框创建单行文本框方法如下：属性NAME=单行文本框的名称，通过它可以在脚本中引用该文本框控件。VALUE=文本框的

27、值DEFAULTVALUE=文本框的初始值SIZE=文本框的宽度(字符数)MAXLENGTH=允许在文本框内输入的最大字符数。FORM=所属的表单（只读）方法Click()：单击该文本框；Focus()：得到焦点；Blue()：失去焦点；Select()：选择文本框的内容。事件ONCLICK=单击该文本框执行的代码；ONBLUR=失去焦点执行的代码；ONCHANGE=内容变化执行的代码；ONFOCUS=得到焦点执行的代码；ONSELECT=选择内容执行的代码。,2.1.7 表单及其控件标记,(2)密码文本框（没有onclick事件）密码文本框也是一个单行文本框。当站点访问者在这个框中键入数据时

28、，大部分的Web浏览器都会以星号显示密码以不让别人看到输入内容。Type=password,(3)隐藏域 表单中添加隐藏域站点访问者不能看见隐藏域的信息，每一个隐藏域都要有自己的名称和值。当提交表单时，隐藏域的名称和值就会与可见表单域的名称和值一起包含在表单结果中。Type=hidden,(4)复选框 表单中添加复选框可以让站点访问者去选择一个或多个选项或不选项。创建复选框方法如下：选项文本,2.1.7 表单及其控件标记,属性 NAME=复选框的名称 VALUE=选中时提交的值 CHECKED：当第一次打开表单时该复选框处于选中状态。该复选框被选中，值为true，否则为false。该属性是可选

29、的。DEFAULTCHECKED：复选框是否定义了CHECKED属性。定义了CHECKED属性，DEFAULTCHECKED为true，否则为false。方法 Focus()：得到焦点；Blur()：失去焦点；Click()：单击该复选框。事件 ONFOCUS=得到焦点执行的代码 ONBLUE=失去焦点执行的代码 ONCLICK=单击该复选框执行的代码当提交表单时，假如复选框被选中，它的内部名称和值都会包含在表单结果中。否则，只有名称会被纳入表单结果中，但值为空白。,2.1.7 表单及其控件标记,(5)单选按钮表单中添加单选按钮可以让站点访问者从一组选项中选择其中之一创建单选按钮方法如下：选项

30、文本其中：NAME=单选按钮的名称，若干个名称相同的单选按钮构成一个控件组，在该组中只能选中一个选项。VALUE=提交时的值CHECKED：当第一次打开表单时该单选按钮处于选中状态。该属性是可选的。单选按钮的方法和事件与复选框相同。例如:,性别 男 女,2.1.7 表单及其控件标记,(6)按钮 使用INPUT标记可以在表单中添加3种类型的按钮：提交按钮、重置按钮和自定义按钮。创建按钮的方法如下：属性TYPE=submit：创建一个提交按钮。在表单中添加提交按钮后，站点访问者就可以在提交表单时，表单数据（包括提交按钮的名称和值）以ASCII文本形式传送到由表单的ACTION属性指定的表单处理程序

31、。TYPE=reset：创建一个重置按钮。单击该按钮时，将删除任何已经输入到域中的文本并清除所做的任何选择。TYPE=button：创建一个自定义按钮。在表单中添加自定义按钮时，为了赋予按钮某种操作，必须为按钮编写脚本。NAME=按钮的名称VALUE=显示在按钮上的标题文本 事件ONCLICK=单击按钮执行的脚本代码,2.1.7 表单及其控件标记,【例2.18】创建一个登录表单，其中包含有文本框、密码框、自定义按钮。输入下列内容，以E2_input.HTM作为文件名保存：创建登录表单Sub myOK()alert(单击确定按钮!)End Sub登录名：密码：,2.1.7 表单及其控件标记,【例

32、2.19】创建一个登录表单，其中包含有文本框、密码框、提交按钮和重置按钮。如右图所示，以E2_input1.HTM作为文件名保存：,用浏览器打开文档，将显示如左图所示的页面。,2.1.7 表单及其控件标记,(7)文件域 文件域由一个文本框和一个“浏览”按钮组成，用户既可以在文本框中输入文件的路径和文件名，也可以通过单击“浏览”按钮从磁盘上查找和选择所需文件。创建文件域方法如下：其中：NAME=文件域的名称；VALUE=初始文件名；SIZE=文件名输入框的宽度,【例2.20】创建一个表单，其中包含文件域、提交按钮和重置按钮。输入下列内容，以E2_input2.HTM作为文件名保存：文件域示例,2

33、.1.7 表单及其控件标记,文件域请选择文件：,【例2.20】创建一个表单，其中包含文件域、提交按钮和重置按钮。输入下列内容，以E2_input2.HTM作为文件名保存：,2.1.7 表单及其控件标记,用浏览器打开文档，将显示如图所示的页面。,(8)图像提交按钮 图像提交按钮与提交按钮在表单中的区别仅仅是提交按钮上用图像代替按钮文本标题。图像提交按钮使用INPUT标记来创建方法如下：其中：SRC=所用图像的URL地址；VALUE=提供图像的替换文本；其他同提交按钮。,2.1.7 表单及其控件标记,3.其他表单控件(1)滚动文本框 表单中添加滚动文本框可以接受站点访问者输入多于一行的文本。创建滚

34、动文本框方法如下：初始值其中：NAME=滚动文本框控件的名称 ROWS=控件的高度（以行为单位）COLS=控件的宽度（以字符为单位）READONLY：滚动文本框的内容不被用户修改 创建滚动文本框时，在和标记之间输入的文本将作为该控件的初始值。,(2)选项选单 表单中选项选单让站点访问者从列表或选单中选择选项。选单中可以选择一个选项，也可以设置为容许作多重选择。创建选项选单方法如下：选项1 选项2,2.1.7 表单及其控件标记,其中：NAME=选项选单控件的名称SIZE=在列表中一次可以看到的选项数目（默认为1）MULTIPLE：允许作多项选择SELECTED=该选项的初始状态为选中。当提交表单

35、时，选单的名称会被包含至表单结果中，其后并有一份所有选项值的列表。例如:,研究生 大 学 大 专 高 中 初 中 小 学,2.1.7 表单及其控件标记,用浏览器打开文档，将显示如图所示的页面。,2.1.8 多框架文档,1.框架集框架网页通过一个FRMAESET(框架集)标记和多个FRAME(框架)标记来定义。框架网页的基本结构表示如下：框架网页的基本结构,(3)对表单控件分组创建表单控件分组方法如下：控件组标题组内表单控件,2.1.8 多框架文档,COLS=创建纵向分隔框架时指定各个框架的列宽。取值有3种形式：即像素、百分比（%）和相对尺寸（*）。COLS=“*,*,*”：表示将窗口划分成3个

36、等宽的框架；COLS=“30%,200,*”：表示将浏览器窗口划分为3列框架，其中第1列占窗口宽度的30%，第2列为200像素，第3列为窗口的剩余部分；COLS=“*，3*，2*”：表示左边的框架占窗口宽度的1/6，中间的框架占窗口宽度的1/2，右边的框架占窗口宽度的1/3。ROWS=横向分隔框架时各个框架的行高。取值有3种形式：即像素、百分比（%）和相对尺寸（*）。FRAMEBORDER=框架周围是否显示三维边框。取值为1(默认值)，显示三维边框；取值为0（显示平面边框）。FRAMESPACING=框架之间的间隔(以像素为单位，默认值为0)。,1.框架集 框架集包括如何组织各个框架的信息，可

37、以通过FRMAESET标记来定义。框架是按照行和列来组织的。,2.1.8 多框架文档,2.框架 使用FRAME标记可以设置框架的属性，包括框架的名称、框架是否可以滚动以及在框架中显示什么文件等。FRAME标记具有下列属性：NAME=框架的名称 FRAMEBODER=框架周围是否显示三维边框。取值为1（默认值），显示三维边框；取值为0，显示平面边框。MARGINHEIGHT=框架的高度(以像素为单位)MARGINWIDTH=框架的宽度(以像素为单位)NORISIZE=不能调整框架的大小 SCROLLING=指定框架是否可以滚动 Yes：框架可以滚动 No：框架不能滚动 Auto：框架在需要时添加

38、滚动条 SRC=在框架中显示的HTML文件,2.1.8 多框架文档,【例2.23】创建框架网页并在各个框架中分别显示一个网页。框架主网页E2_frame.HTM 在框架中显示网页,E2_frame_top.HTM 学生成绩管理系统,2.1.8 多框架文档,E2_frame_content.HTM content网页 这里是content网页。E2_frame_left.HTM left网页 学生系统登录 输入学生信息 学生信息显示 返回开始页面,2.1.8 多框架文档,用浏览器打开文档，将显示如图所示的页面。,2.2.1 样式表定义及引用,1.内联样式在标记中直接使用style属性可以对于该标

39、记括起的内容的显示样式。55页示2.CSS样式表定义单独CSS样式表定义的格式如下：选择符 规则表 其中：选择符可以是要引用样式的标记、类选择符、ID选择符或上下文选择符等。样式定义中可以加入注解，格式为：/*说明文字*/,(1)在HTML文档中定义,(2)独立的CSS样式文件中定义 样式表定义的内容一般放在一个独立的CSS样式文件中，注意CSS样式文件不包含标记，因标记是HTML标记，而不是CSS样式。,样式表定义的内容可以放在HTML文档中嵌入样式表，这种方式利用标记将样式表括起，放在标记范围内。,2.2.1 样式表定义及引用,3CSS样式表的引用(1)链接CSS样式文件引用样式文件的HT

40、ML文档在头部用标记链接CSS样式文件标记的属性主要有REL，HREF，TYPE，MEDIA。,【例2.25】HTML文档链接样式文件E2_style1.css。输入下列内容，以E2_ CSS2.HTM作为文件名保存：链接外部CSS文件内容H1样式显示内容H2样式显示内容id1样式显示H4内容默认样式显示内容P样式显示内容heti样式显示,E2_style1.css,P font-family:宋体;color:green;background-color:yellow;font-size:12pt;H1,H2 font-family:隶书,宋体;color:#FF8800.heti font

41、-family:黑体;font-size:20pt;color:#000000;#id1 color:blue;,2.2.1 样式表定义及引用,(2)导入CSS样式表文件格式为：import URL(“外部样式文件名”);,【例2.26】HTML文档导入样式文件E2_style1.css。输入下列内容，以E2_ CSS3.HTM作为文件名保存：导入外部CSS文件 import URL(“E2_style1.css”);内容H1样式显示内容H2样式显示内容H3以id1样式显示H4内容默认样式显示内容P样式显示内容heti样式显示,2.2.2 样式表选择符,1.标记符标记符可以是一个或多个，各标记

42、之间用逗号分开，属性和取值用冒号分开。2.类选择符和CLASS属性利用类选择符和标记的class属性可以使相同的标记使用不同的样式，也可以不同的标记使用相同的样式。将标记的class属性的值设置为样式表中定义的类选择符。标记名.类名规则1；规则2；或类名规则1；规则2；标记的class属性设为类名，就可显示对应样式。,2.2.2 样式表选择符,【例2.27】CSS示例。输入下列内容，以E2_ CSS4.HTM作为文件名保存：CSS示例P font-family:宋体;color:green;background-color:yellow;font-size:12pt;P.backfont-fa

43、mily:隶书,宋体;color:#FF8800.heti font-family:黑体;font-size:20pt;color:#000000;该内容以heti样式显示该内容以heti样式显示该内容默认H4样式显示该内容P样式显示该内容P.back样式显示,2.2.2 样式表选择符和HTML标记属性,用浏览器打开文档，将显示如图所示的页面。,2.2.2 样式表选择符和HTML标记属性,3.ID选择符和ID属性 ID选择符用于定义一个元素的独有的样式，它与类选择符的区别在于ID选择符在一个HTML文件中只能引用一次，而类选择符可以多次引用。ID选择符的定义的格式为：#ID名规则1;规则2;,

44、2.2.2 样式表选择符和HTML标记属性,【例2.28】CSS示例。输入下列内容，以E2_ CSS5.HTM作为文件名保存：CSS示例#id1 color:blue;内容id1样式显示内容H4默认样式显示内容默认样式显示内容id1样式显示,2.2.2 样式表选择符和HTML标记属性,用浏览器打开文档，将显示如图所示的页面。,随CSS的产生标记被新加入到HTML中的，增加该标记的目的是允许我们给出样式而不必将样式附加在一个HTML的原有标记上。标记可以 带有CLASS、ID、STYLE等与CSS样式有关的属性。是一个块级元素，它将其中包含的内容形成一个独立段落。,2.2.2 样式表选择符和HT

45、ML标记属性,【例2.29】CSS的DIV示例。输入下列内容，以E2_ CSS6.HTM作为文件名保存：CSS示例#id1 color:blue;内容id1样式显示内容id1样式显示内容id1样式显示,2.2.2 样式表选择符和HTML标记属性,用浏览器打开文档，将显示如图所示的页面。,2.2.2 样式表选择符和HTML标记属性,4.伪类 伪类是特殊的类，能自动地被支持CSS的浏览器所识别。伪类不用HTML的CLASS属性来指定。伪类定义格式为：选择符:伪类属性:值 伪类的一个最常见的应用是指定超链接()以不同的方式显示：连接(links)已访问连接(visited links)可激活连接(a

46、ctive links)。,2.2.2 样式表选择符和HTML标记属性,【例2.30】CSS伪类应用示例。E2_style2.css a:visitedcolor:#0000FF;text-decoration:none a:linkfont-family:宋体;font-size:9Pt;color:#0000FF;text-decoration:none a:hoverfont-family:宋体;fora-size:12pt;color:#008000；background-color:#FF0088;text-decoration:none E2_CSS7.HTM文件CSS伪类应用示例

47、 import URL(E2_style2.css);超链接应用CSS伪类样式东南大学南京师范大学,2.2.2 样式表选择符和HTML标记属性,用浏览器打开文档，将显示如图所示的页面。,2.2.2 样式表选择符和HTML标记属性,5.上下文选择符 上下文选择符定义嵌套标记的样式。例如：H2 emcolor:darkred 该定义指明HTML文件中出现嵌套标记之处将引用该样式。上下文选择符由于应用场合十分特殊，故用得很少。,2.2.3 样式的继承和作用顺序,1.样式继承将包含其他标记的标记称作父标记，则被包含的标记就是子标记。子标记将继承父标记的样式，这就是样式的继承。2.样式的作用顺序 对一个

48、标记来说可能有多个样式都符合生效条件，对一个标记究竟哪个样式起作用。样式表的作用优先顺序遵循以下原则：内联样式中所定义的样式的优先级最高；其他的样式表按其在HTML文件中出现或被引用的顺序，越在后出现，优先级越高；选择符的作用级从低到高优先顺序为：上下文选择符、类选择符、ID选择符；未在任何文件中定义的样式，将遵循浏览器的默认样式。,样式表中的权重 css优先权,1、特殊性 首先来看一下这个例子将会发生的情形：.grape color:Blue;H1 color:Red;Meerkat CentralH1和.grape都匹配上面的H1元素，那么到底应该使用哪一个呢？实践证明.grape是正确答

49、案，把句子显示为蓝色。根据规范，一般的HTML元素选择符(H1,P 等)具有特殊性1，类选择符具有特殊性10，ID选择符具有特殊性100，值越大权重就越大，就优先选用。,样式表中的权重 css优先权,H1 color:Red;/*特殊性=1*/P EM color:Blue;/*特殊性=2*/.grape color:Fuchsia;/*特殊性=1 0*/P.bright color:Yellow;/*特殊性=11*/P.bright EM.dark color:Gray;/*特殊性=12*/#ID01 color:Red;/*特殊性=100*/,样式表中的权重 css优先权,2、继承 在特殊

50、性的框架下，被继承的值具有特殊性0，也就是说任何显式声明的规则将会覆盖其继承样式，即便这条规则具有多高的权重。H1#ID01 color:Red;/*特殊性=101*/EM color:Gray;/*特殊性=1*/Meerkat 虽然ID选择符特殊性最高，但由于在特殊性的框架下，继承值只有特殊性0，因些Central会显示为Gray颜色。,样式表中的权重 css优先权,3、STYLE元素还有sytle元素在CSS下权值定义为100，尽管ID选择也一样，实际上style元素比ID具有更高的特殊性。#ID01 EM color:Gray;Meerkat Central!会显示为red颜色。,样式表