HTML语言(适合新手).ppt

1、第2章 HTML语言,2.1 HTML文档的基本构成,支持HTTP的浏览器均为图形用户界面(GUI)，GUI通常由标题栏和窗口作为其最基本的构成，对应于HTML文档中的头部分“HEAD”和文档主体部分“BODY”。HTML的基本结构如下：, 文档头部分, 文档的主体部分, ,基本HTML页面从标记开始，到结束。在它们之间，就是HEAD部分和BODY部分。HEAD部分用标记界定，一般包含网页标题，文档属性参数等不在页面上显示的元素。BODY部分是网页的主体，内容均会反映在页面上，用.标记来界定，主要包括文字、图像、动画、超链接等内容。,HTML语言剖析之HTML标记一览,2.1 HTML文档的基

2、本构成,【例2-1】使用HTML设计一个简单的网页。 (1) 打开Windows的附件中的记事本功能，输入下列内容，以2_1Hello.HTM作为文件名保存到C:Tomcat 4.1webappsROOT文件夹中。本书的所有实例文件均保存在该文件夹中。, 一个Hello网页 function myp() alert(大家好!); ,2.1 HTML文档的基本构成, 学生成绩管理系统 ,(2) 在浏览器地址栏输入“:8080/2_1Hello.HTM”，其中代表本机虚拟根目录。用浏览器打开文档，将显示如图2-1所示的页面。,图2-1 简单网页显示,

3、2.2 HTML语言标记,2.2.1文档头标记 1. HTML标记 2. 首部标记, 首部标记中提供与Web页有关的各种信息。在首部标记中，一般使用下列标记：指定网页的标题 ：定义文档内容样式表 ：插入脚本语言程序 ：描述网页信息 ：注释内容 这些信息首先向浏览器提供, 但不作为文档内容提交。,3. 标题栏标记 标题栏标记中的内容是在浏览器标题栏中显示的文本。通常，Web搜索工具用它作为索引。,2.2 HTML语言标记,4. 描述标记 描述文档属性参数。 常用属性 NAME= META名字 CONTENT=页面的内容 HTTP-EQUIV = CONTENT属性的类别 说明：,HTTP-EQU

4、IV =Content-TYPE ，CONTENT=页面内容类型 HTTP-EQUIV =“refresh”, CONTENT =“页面刷新时” HTTP-EQUIV =“content-language”, CONTENT =“页面语言” HTTP-EQUIV =“PICS-Label”, CONTENT =页面内容的等级 HTTP-EQUIV =“expires”, CONTENT =页面过期的日期,【例2-2】HEAD演示。 输入下列内容，以2_2Head.HTM作为文件名保存： ,2.2 HTML语言标记, HAED演示页面标题 演示页面内容 运行文件，将显示如图2-2所示的页面。,图

5、2-2 显示页面,2.2 HTML语言标记,4. 正文标记 正文标记的格式如下： 正文标记中包含文档的内容。常用属性如下： BACKGROUND=文档背景图像的URL地址 BGCOLOR=文档的背景颜色 TEXT=文档中文本的颜色 LINK=文档中链接的颜色 VLINK=文档中已被访问过的链接的颜色 ALINK=文档中正被选中的链接的颜色 颜色属性的值有3种表示方法： (1)使用颜色名称来表示。例如红色、绿色和蓝色分别用red、green和blue表示。,(2)使用十六进制格式数值#RRGGBB来表示，RR、GG和BB分别是表示颜色中的红、绿、蓝三原色的两位十六进制数据。例如红色、绿色和蓝色分

6、别用#FF0000、#00FF00和#0000FF表示。表2-1列出了16种标准颜色。,2.2 HTML语言标记,表2-1 标准颜色的名称和十六进制值,2.2 HTML语言标记,RGB(r,g,b)函数表示。r,g,b的数值范围为0255或者0%100%。 例如, RGB(0,0,9)、RGB(100%,0%,100%) 常用事件 ONLOAD=文档首次加载时调用的事件处理程序。 ONUNLOAD=用于指定文档卸载时调用的事件处理程序。,2.2.2 设置文本格式 1. 分段标记 分段标记的格式如下： 段落是文档的基本信息单位。利用分段标记，可以忽略文档中原有的回车和换行定义一个新段落，换行并插

7、入一个空行。 单独使用标记时会空一行，使后续内容隔一行显示。同时使用和，则将段落包围起来，表示一个分段的块。常用属性如下：,ALIGN=段落的水平对齐方式 其值如下： Left: 左对齐（默认值） center: 对中 right: 右对齐 justify: 两边对齐 若省略该属性，系统取该属性的默认值。下面介绍的属性也遵循这一规则。,2.2 HTML语言标记,2换行标记 换行标记的格式如下： 换行标记强行中断当前行，使后续内容在下一行显示。 【例2-3】分段标记和换行标记的演示。 输入下列内容，以2_3Pbr.HTM作为文件名保存： 分段标记和换行标记演示 第1行演示 第2行演示 第3行演示

8、 第4行演示 ,2.2 HTML语言标记,运行文件，将显示如图2-3所示的页面。,图2-3 显示页面,2.2 HTML语言标记,3. 标题标记 标题标记的格式如下： 标题标记用于设置文档中的标题和副标题，标记表示字体最大的标题，标记表示字体最小的标题。常用属性如下： ALIGN=段落的水平对齐方式 其值如下： Left: 左对齐（默认值） center: 对中 right: 右对齐 justify: 两边对齐,2.2 HTML语言标记,【例2-4】应用各种标题标记。 输入下列内容，以2_4H16.HTM作为文件名保存： H1-H6标题演示 下面是标题演示 H1标题演示 H2标题演示 H3标题演

9、示 H4标题演示 H5标题演示 H6标题演示 ,2.2 HTML语言标记,运行文件，将显示如图2-4所示的页面。,图2-4 显示页面,2.2 HTML语言标记,4. 对中标记 对中标记的格式如下： 标记中间的内容全部对中。 【例2-5】应用CENTER标记。 输入下列内容，以2_5Center.HTM作为文件名保存： CENTER标记演示 下面是CENTER标记演示 H1标题演示 H2标题演示 H3标题演示,H4标题演示 H5标题演示 H6标题演示 ,2.2 HTML语言标记,运行文件，将显示如图2-5所示的页面。,图2-5 显示页面,2.2 HTML语言标记,5. 块标记 块标记的作用是，其

10、格式如下： 常用属性如下： ALIGN=段落的水平对齐方式 其值如下： Left: 左对齐（默认值） center: 对中 right: 右对齐 【例2-6】应用DIV标记。 输入下列内容，以2_6Div.HTM作为文件名保存： DIV标记演示 ,2.2 HTML语言标记,下面是DIV标记演示 H1标题演示 H2标题演示 H3标题演示 H4标题演示 H5标题演示 H6标题演示 ,2.2 HTML语言标记,运行文件，将显示如图2-6所示的页面。,图2-6 显示页面,2.2 HTML语言标记,6. 水平线标记 HR标记在文档中添加一条水平线，用来分隔文档。该标记的格式如下： 常用属性如下： ALI

11、GN=段落的水平对齐方式 其值如下： Left: 左对齐（默认值） center: 对中 right: 右对齐 COLOR=线的颜色 NOSHADE=显示一条无阴影的实线 SIZE=线的宽度(以像素为单位) WIDTH=线的长度(像素或百分比(占页面宽度的百分数),2.2 HTML语言标记,【例2-7】各种水平线的演示。 输入下列内容，以2_7Hr.HTM作为文件名保存： 各种水平线的演示 ,2.2 HTML语言标记,运行文件，将显示如图2-7所示的页面。,图2-7 显示页面,2.2 HTML语言标记,7. 字体标记 字体标记的格式如下： 字体标记FONT用来设置文本的字符格式，主要包括字体、

12、字号和的颜色等。常用属性如下： FACE=“字体名表” 浏览器首先使用字体名表中的第1种字体来显示标记内的文本。如果在运行浏览器的计算机上没有安装第1种字体，则会尝试字体名表中的第2种字体，直至找到匹配字体。如果到达列表结束，仍然找不到匹配字体，浏览器将使用默认字体。字体名之间用“,”分隔。 SIZE=“字号值” SIZE属性指定字体的大小（字号），其值从17，默认值为3。SIZE值越大，显示的字号就越大。也可以使用+或号来指定相对字号，相对于基本字体（BASEFONT）的大小。 COLOR=“颜色值”,2.2 HTML语言标记,【例2-8】使用字体标记来设置文本的字体、字号和颜色。 输入下列

13、内容，以2_8Font.HTM作为文件名保存： 设置字体、字号和颜色 设置字体、字号和颜色 设置的中文字体 English FONT Demo. Good night! 晚安！ ,2.2 HTML语言标记,运行文件，将显示如图2-8所示的页面。,图2-8 显示页面,2.2 HTML语言标记,8. 固体字体标记 固定字体标记的格式如下： 粗体 斜体 大字体 小字体 固定宽度字体 9. 样式标记 样式标记的格式如下： 上标 下标 下划线 删除线 删除线,10. 原样显示标记 原样显示标记的格式如下： 该标记的作用是将包含其中的内容(包括回车和空格)原样显示出来。,2.2 HTML语言标记,文档中文

14、本之间经常要有一些空格，在输入文本时按了多次空格键，但在浏览器中打开网页时却只能看到一个空格。另外，可能要插入一些特殊符号，如版权符号和注册符号等。在网页中，这些符号不能直接输入，可以使用使用字符实体名称或数字表示方式。例如，若要在网页中输入一个空格，可以输入“”分隔。 由于这种方式是在HTML标记内部使用样式，故称为“内联样式”。注意，若要在一个HTML文件中使用内联样式，必须在该文件的头部对整个文档进行单独的样式表语言声明。即 内联样式因为它将样式和要展示的内容混在一起，自然会失去一些样式表的优点，表现在样式定义和内容不能分离，所以这种方式应尽量少用。 2. CSS样式表定义 单独CSS样

15、式表定义的格式如下： 选择符 规则表 ,2.3 样式表(CSS),其中：选择符可以是要引用样式的标记、类选择符、ID选择符或上下文选择符等。规则表是由一个或多个样式属性组成的样式规则，各个样式属性间由分号隔开，每个样式属性的定义格式为“样式名: 值”。样式定义中可以加入注解，格式为：/*说明文字*/ 例如： P font-family: 宋体; color: green; background-color: yellow; font-size: 9pt; H1,H2 font-family: 隶书, 宋体; color:#ff8800 .heti font-family: 黑体; color:

16、 #000000; #id1 color: blue; (1) 在HTML文档中定义 样式表定义的内容可以利用标记括起，放在标记范围内。标记内定义的前后可以加上注释符，它的作用是使不支持CSS的浏览器忽略样式表定义。标记的属性TYPE指明样式的类别，因为对显示样式的定义标准除了有CSS外，还有Netscape的JSS(JavaSciptStyleSheets)，其样式类别为type=text/javascript。type的默认值为text/css。 嵌入在HTML文档中样式表的样式当然只会影响当前的HTML文档。,2.3 样式表(CSS),【例2-24】CSS示例。 输入下列内容，以2_24

17、Css1.HTM作为文件名保存： CSS示例 P font-family: 宋体; color: green; background-color: yellow; font-size: 12pt; H1,H2 font-family: 隶书, 宋体; color:#FF8800 .heti font-family: 黑体; font-size: 20pt; color: #000000; #id1 color: blue; 内容H1样式显示 内容H2样式显示 内容id1样式显示 H4内容默认样式显示 内容P样式显示 内容heti样式显示 ,2.3 样式表(CSS),运行文件，将显示如图2-24

18、所示的页面。,图2-24 显示页面,2.3 样式表(CSS),(2) 独立的CSS样式文件中定义 样式表定义的内容一般放在一个独立的CSS样式文件中，注意CSS样式文件不包含标记，因标记是HTML标记，而不是CSS样式。 例如，定义样式表的内容放在2_1Style1.css文件中。 P font-family: 宋体; color: green; background-color: yellow; font-size: 12pt; H1,H2 font-family: 隶书, 宋体; color:#FF8800 .heti font-family: 黑体; font-size: 20pt; c

19、olor: #000000; #id1 color: blue; 3CSS样式表的引用 (1) 链接CSS样式文件 引用样式文件的HTML文档在头部用标记链接CSS样式文件标记的属性主要有REL，HREF，TYPE，MEDIA。REL属性用于定义链接的文件和HTML文档之间的关系，通常取值为stylesheet。HREF属性指出CSS样式文件的位置和文件名。TYPE属性指出样式的类别通常取值为text/css。MEDIA属性用于指定接受样式表的介质，默认值为screen(显示器)，还可以是print(打印机)、projection(投影机)等。,2.3 样式表(CSS),【例2-25】HTML

20、文档链接样式文件2_1Style1.css。 输入下列内容，以2_25Css2.HTM作为文件名保存： 链接外部CSS文件 内容H1样式显示 内容H2样式显示 内容id1样式显示 H4内容默认样式显示 内容P样式显示 内容heti样式显示 用浏览器打开文档，将显示如图2-24所示的页面。,2.3 样式表(CSS),(2) 导入CSS样式表文件 引用样式文件的HTML文档也可以利用CSS import声明导入外部样式表。格式为： import URL(“外部样式文件名”); 【例2-26】HTML文档导入样式文件2_1Style1.css。 输入下列内容，以2_26Css3.HTM作为文件名保存

21、： 导入外部CSS文件 import URL(2_1Style1.css); 内容H1样式显示 内容H2样式显示 内容H3以id1样式显示 H4内容默认样式显示,2.3 样式表(CSS),内容P样式显示 内容heti样式显示 运行文件，将显示如图2-25所示的页面。,图2-25 显示页面,2.3 样式表(CSS),2.3.2样式表选择符 定义样式表的符号就是样式表选择符。选择符可分为以下几种情况： 1. 标记符 标记符规则表 标记符可以是一个或多个，各个标记之间以逗号分开。 例如： P font-family: 宋体; color: green; background-color: yello

22、w; font-size: 9pt; H1,H2 font-family: 隶书, 宋体; font-size: 20pt; color:#ff8800 2. 类选择符和CLASS属性 利用类选择符和标记的CLASS属性可以使相同的标记使用不同的样式。也可以不同的标记使用同样的样式。因为只要使标记的CLASS属性的值为样式表中定义的类选择符即可。 类选择符在样式表中定义具有样式值的类，有两种定义格式： 标记名.类名规则1; 规则2; 类名规则l; 规则2; 前者为特定的标记定义的类，该标记的CLASS属性设置为该类名，使用该标记的内容才会采用这个样式，后者为一般定义的类，只要标记使用该类名都可

23、采用这个样式。,2.3 样式表(CSS),【例2-27】CSS的CLASS示例。 输入下列内容，以2_27Css4.HTM作为文件名保存： CSS示例 P font-family: 宋体; color: green; background-color: yellow; font-size: 12pt; P.backfont-family: 隶书, 宋体; color:#FF8800 .heti font-family: 黑体; font-size: 20pt; color: #000000; 该内容以heti样式显示 该内容以heti样式显示 该内容默认H4样式显示 该内容P样式显示 该内容P

24、.back样式显示 ,2.3 样式表(CSS),运行文件，将显示如图2-26所示的页面。,图2-26 显示页面,2.3 样式表(CSS),3. ID选择符和ID属性 ID选择符用于定义一个元素的独有的样式，它与类选择符的区别在于ID选择符在一个HTML文件中只能引用一次，而类选择符可以多次引用。ID选择符的定义的格式为： #ID名规则1; 规则2; 【例2-28】CSS的ID选择符示例。 输入下列内容，以2_28Css5.HTM作为文件名保存： CSS示例 #id1 color: blue; 内容id1样式显示 内容H4默认样式显示 内容默认样式显示 内容id1样式显示 ,2.3 样式表(CS

25、S),运行文件，将显示如图2-27所示的页面。,图2-27 显示页面,2.3 样式表(CSS),是一个块级元素，它将其中包含的内容形成一个独立段落。在HTML3.2中只有属性ALIGN。HTML4.0新增了CLASS、ID和STYLE属性。与的功能基本相同，区别在于是块级元素，而是行元素。可包含，反之则不行。 【例2-29】CSS的DIV示例。 输入下列内容，以2_29Css6.HTM作为文件名保存： CSS示例 #id1 color: blue; 内容id1样式显示 内容id1样式显示 内容id1样式显示 ,2.3 样式表(CSS),运行文件，将显示如图2-28所示的页面。,图2-28 显示

26、页面,2.3 样式表(CSS),4. 伪类 伪类是特殊的类，能自动地被支持CSS的浏览器所识别。伪类可区别标记的不同状态。伪类不用HTML的CLASS属性来指定。伪类定义格式为： 选择符: 伪类属性: 值 伪类的一个最常见的应用是指定超链接()以不同的方式显示链接(links)、已访问链接(visited links)和可激活链接(active links)。 【例2-30】CSS伪类应用示例。 采用2_2Style2.css文件定义样式，2_30Css7.htm文件应用定义样式。 2_2Style2.css a:visitedcolor: #0000FF; text-decoration:

27、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 2_30Css7.HTM文件 CSS伪类应用示例 ,2.3 样式表(CSS),import URL(2_2Style2.css ); 超链接应用CSS伪类样式 东南大学 南京师范大学 运行文件，将显示如图2-29所示的页面。,图2-29 显示页面,2.3 样式表(CSS),这里的visited、link或active都不能为CLASS属性赋值，故称伪类。 5. 上下文选择符 上下文选择符定义嵌套标记的样式。例如： H2 emcolor: darkred 该定义指明HTML文件中出现嵌套标记之处将引用该样式。上下文选择符由于应用场合十分特殊，故用得很少。 2.3.3样式的继承和作用顺序 1. 样式继承 我们将包含其他标记的标记称作父标记，则被包含的标记就是子标记。子标记将继承父标记的样式，这就是样式的继承。 2. 样式的作用顺序 对一个标记来说，可能有多个样式都