1、第三章第三章 HTML语言语言主要内容主要内容3.1 基本概念基本概念HyperText Markup Language，即，即超文本标记语言超文本标记语言。由万维网联盟负。由万维网联盟负责制订和更新。责制订和更新。HTML是一种描述语言，对是一种描述语言，对WEB页面中显示内容的属性以页面中显示内容的属性以标签标签Tag的形的形式进行描述。使用该语言可将式进行描述。使用该语言可将文本文本、图像图像、声音声音等结合在一张网页文等结合在一张网页文件中。件中。客户机上的客户机上的浏览器浏览器(browser)对这些描述进行对这些描述进行解释解释将相应页面内容正将相应页面内容正确显示在显示器上。确显
2、示在显示器上。一个一个WEB页面就是一个页面就是一个HTML文档文档。HTML是一种解释语言，可以直接运行；是一种解释语言，可以直接运行；C、Basic、Java等都是编译等都是编译语言，需要经过编译才能运行。语言，需要经过编译才能运行。网页实例：网页实例：我的主页我的主页我的第一张网页我的第一张网页第三章实例第三章实例文件头部文件头部文件主体文件主体标签，表示网页的开始标签，表示网页的开始属性，进一属性，进一步控制标签步控制标签作用的内容作用的内容属性值属性值几点说明几点说明1、HTML的标签：识别网上元素、描述元素的样式、指向其的标签：识别网上元素、描述元素的样式、指向其它资源，不分大小写
3、。不同的标签可它资源，不分大小写。不同的标签可嵌套使用嵌套使用，但不可交叉。，但不可交叉。2、标签的属性：要放在、标签的属性：要放在开始标签开始标签的尖括号中，可以有多个属的尖括号中，可以有多个属性，用空格分隔，通常不分大小写。性，用空格分隔，通常不分大小写。3、属性值：前后要加双引号，某些情况下可省略、属性值：前后要加双引号，某些情况下可省略P16。值值应在预先定义的范围内选取，不能自己定义。应在预先定义的范围内选取，不能自己定义。4、和和标签：网页文档的开始和结束标签。告标签：网页文档的开始和结束标签。告诉浏览器是网页文档。诉浏览器是网页文档。5、和和标签：设置标签：设置web页的一些特定
4、信息。页的一些特定信息。6、和和标签：设置标签：设置web页的主体信息。页的主体信息。7、可以采用存文本文件编辑、可以采用存文本文件编辑HTML文件。例如记事本。文件。例如记事本。3.3 HTML的各个标签介绍的各个标签介绍3.3.1 文件标签文件标签3.3.2 排版标签排版标签3.3.3 字体标签字体标签3.3.4 表格和清单表格和清单3.3.5 在网页中建立超链接在网页中建立超链接3.3.6 多媒体标签多媒体标签3.3.7 框架标签框架标签3.3.8 表单标签表单标签3.3.9 其它标签其它标签3.3.1 文件标签文件标签文件标签共四种：文件标签共四种：类型声明标签类型声明标签文件头标签文
5、件头标签标题标签标题标签正体标签正体标签注：作为完整的注：作为完整的html文件，文件标签不可缺少。文件，文件标签不可缺少。3.3.1 文件标签文件标签1.标签标签类型声明标签：用于告诉浏览器这个文件是类型声明标签：用于告诉浏览器这个文件是HTML文件。文件。如果将如果将标签删去，不会影响标签删去，不会影响html文件在浏览器中的显文件在浏览器中的显示效果。示效果。浏览器的容错功能浏览器的容错功能3.3.1 文件标签文件标签2.标签标签放在放在标签之后，用以描述标签之后，用以描述html文件整体的一些信息。文件整体的一些信息。标签对中的内容不会显示在浏览器页面上。只为标签对中的内容不会显示在浏
6、览器页面上。只为html的解释器服务。的解释器服务。与与构成了构成了HTML文件的两大主要部分。文件的两大主要部分。文件头的文件头的()相关标记应用相关标记应用1.标识网页主体的标记标识网页主体的标记2.标记标记3.注释标记注释标记1.标识网页主体的标记标识网页主体的标记标识网页的主题，其中的内容将在浏览器的标题栏中显示，不出标识网页的主题，其中的内容将在浏览器的标题栏中显示，不出现在页面内！现在页面内！例如：例如：欢迎光临欢迎光临网站网站2.标记标记是一个辅助性标记，且没有结束标记。主要用于设置网页的一些是一个辅助性标记，且没有结束标记。主要用于设置网页的一些属性。属性。标记共有两个重要的属
7、性，分别为：标记共有两个重要的属性，分别为：name：用于描述网页，对应的参数值则用用于描述网页，对应的参数值则用content标示。标示。一大应用：告诉搜索引擎改网页的关键字一大应用：告诉搜索引擎改网页的关键字http-equiv：相当于相当于HTTP的文件头的作用，可以向浏览器的文件头的作用，可以向浏览器传回一些有用的信息，以帮助正确显示网页内容。与传回一些有用的信息，以帮助正确显示网页内容。与“name”属性一样，其参数值用属性一样，其参数值用content标示。标示。一大应用，设置自动刷新并指向新页面。一大应用，设置自动刷新并指向新页面。例如：例如：3.3.1 文件标签文件标签3.标签
8、标签标签对中的内容将显示在网页文件上。所以网页文件标签对中的内容将显示在网页文件上。所以网页文件的大部分信息内容都位于的大部分信息内容都位于标签的包围之中。标签的包围之中。与与这些文件标签不同，这些文件标签不同，body标签支持属性。标签支持属性。3.3.1 文件标签文件标签3.标签标签(1)text属性属性设定网页上的文字颜色设定网页上的文字颜色COLOR的值的值可以是可以是以十六进制表示以十六进制表示的颜色，或者是的颜色，或者是16种颜色种颜色中的一种。中的一种。名称名称|颜色颜色|名称名称|颜色颜色 black|黑色黑色|Red|红色红色 Line|石灰色石灰色|Maroon|栗色栗色
9、Gray|灰色灰色|Silver|银白色银白色 Navy|海军蓝海军蓝|Olive|橄榄绿橄榄绿 Purple|紫色紫色|Yellow|黄色黄色 Aqua|浅绿色浅绿色|Blue|蓝色蓝色 Green|绿色绿色|Fuchsia|紫红色紫红色 White|白色白色|Teal|暗蓝绿暗蓝绿3.3.1 文件标签文件标签3.标签标签(2)bgcolor属性属性设定网页上的背景色设定网页上的背景色3.3.1 文件标签文件标签3.标签标签(3)link、alink、vlink属性属性设定超级链接不同状态的颜色设定超级链接不同状态的颜色：3.3.1 文件标签文件标签3.标签标签(4)background属性
10、属性设定背景图片设定背景图片选择图片选择图片保存图片保存图片编写编写html代码代码(5)scroll属性属性设定隐藏浏览器的滚动条设定隐藏浏览器的滚动条常用于弹出性页面（广告弹出窗口、弹出最新通知等）常用于弹出性页面（广告弹出窗口、弹出最新通知等）scroll=“no”即可隐藏滚动条。即可隐藏滚动条。3.3.2 排版标签排版标签排版标签主要为以下几种：排版标签主要为以下几种：注释：注释：段落：段落：换行：换行：水平线：水平线：预设格式：预设格式：区段：区段：不折行：不折行：建议折行：建议折行1.注释标记注释标记用于在用于在HTML文档中书写说明性的文字，内容在浏览器中不显示。文档中书写说明性
11、的文字，内容在浏览器中不显示。格式：格式：2、段落、换行编辑、段落、换行编辑分段标签分段标签 和和 强制换行标签强制换行标签分段标签用于将文档分段标签用于将文档划分为段落划分为段落，标签为，标签为，效果相效果相当于在段间插入一个硬回车，段间当于在段间插入一个硬回车，段间有空行有空行。要将文字要将文字强制换行强制换行，而不是另起段落，可以用换行标签，而不是另起段落，可以用换行标签实现该功能。换行后，实现该功能。换行后，与前一行间无空行与前一行间无空行。2、段落、换行编辑、段落、换行编辑续续段落对齐的方法段落对齐的方法align属性：用于设置段落的对齐方式，其常见取值有属性：用于设置段落的对齐方式
12、，其常见取值有4种：种：right（右对齐）（右对齐）left（左对齐）（左对齐）center（居中对齐）（居中对齐）justify（两端对齐）（两端对齐）例如：例如：center标签：标签：.用以居中用以居中3、水平线、水平线（hrhorizon）用于在标签所在位置用于在标签所在位置插入一条水平线插入一条水平线，可以美化网页。，可以美化网页。与与类似，类似，也无结束标签。也无结束标签。属性属性size（粗细）（粗细）像素，值应为整数，默认为像素，值应为整数，默认为2。width（宽度）（宽度）值可用百分比和像素两种方式表示。值可用百分比和像素两种方式表示。color（颜色）（颜色）值为颜色值
13、为颜色align（对齐方式）（对齐方式）left/right/centernoshade（无阴影）（无阴影）无需值，用以指定没有阴影的水无需值，用以指定没有阴影的水平线平线title（标题）（标题）设定标题，当鼠标移至水平线时才显示。设定标题，当鼠标移至水平线时才显示。3 hr.htm4.预设格式和区段标签预设格式和区段标签（1）预格式化文本预格式化文本html源代码中书写的空格、回车等字符在版式输出时均无源代码中书写的空格、回车等字符在版式输出时均无效，必须用特殊的字符串来代替。如空格效，必须用特殊的字符串来代替。如空格 。采用采用标签可使源文件中的标签可使源文件中的等版式符等版式
14、符号正常地在浏览器中显示。号正常地在浏览器中显示。3 pre.htm4.预设格式和区段标签预设格式和区段标签（2）设置区段设置区段 P32主要用于主要用于文件分节文件分节，位于，位于标签对标签对内的多段文本内的多段文本被认为一节，可设置一致的对齐方式。被认为一节，可设置一致的对齐方式。应与应与align联用。联用。在在Dreamweaver中，用该标签对设置中，用该标签对设置层层。5.不折行和不折行和建议折行建议折行详见详见P33自学自学3.3.3 字体标签字体标签均为均为围堵标签围堵标签（即有开始标签和结束标签），有（即有开始标签和结束标签），有实体标签实体标签（显示效果绝对）（显示效果绝对
15、）和和逻辑标签逻辑标签（浏览器是否支持）之分。（浏览器是否支持）之分。用于设置字符的风格。详见表用于设置字符的风格。详见表2-1(P37)和和：加粗字体：加粗字体/：倾斜字体：倾斜字体：标题标签：标题标签：字体设置：字体设置：字体设置：字体设置/：设置字符串宽度等宽：设置字符串宽度等宽和和：下划线和删除线：下划线和删除线和和：字体变大和变小：字体变大和变小和和：下标和上标：下标和上标3 font.html3.3.3 字体标签字体标签font标签：标签：.size属性：属性：控制文字的大小控制文字的大小（17，默认，默认3）；或）；或用用”+”、”-”前缀，表示相对于前缀，表示相对于标签所设定的
16、字标签所设定的字体大小。体大小。color属性：属性：控制文字的颜色控制文字的颜色（#rrggbb 16 进制数码，或者进制数码，或者是下列预定义色彩：是下列预定义色彩：black,olive,teal,red,blue,maroon,navy,gray,lime,fuchsia,white,green,purple,silver,yellow,aqua）face属性：属性：指定字体样式指定字体样式，可指定多种，用逗号分隔，哪种，可指定多种，用逗号分隔，哪种字体被安装，即以哪种字体显示。字体被安装，即以哪种字体显示。颜色的英文单词颜色的英文单词 名称名称|颜色颜色|名称名称|颜色颜色 blac
17、k|黑色黑色|Red|红色红色 Line|石灰色石灰色|Maroon|栗色栗色 Gray|灰色灰色|Silver|银白色银白色 Navy|海军蓝海军蓝|Olive|橄榄绿橄榄绿 Purple|紫色紫色|Yellow|黄色黄色 Aqua|浅绿色浅绿色|Blue|蓝色蓝色 Green|绿色绿色|Fuchsia|紫红色紫红色 White|白色白色|Teal|暗蓝绿暗蓝绿3.3.3 字体标签字体标签basefont标签：标签：.。若某段文字未被。若某段文字未被标签标签包含，则其输出风格为包含，则其输出风格为所设定的风格。所设定的风格。其属性设置基本与其属性设置基本与标签相同，但标签相同，但size属性
18、属性必须设定一必须设定一个绝对的个绝对的size大小。大小。不能用不能用“”和和“”前缀前缀。size属性：属性：color属性：属性：face属性：属性：3.3.4、表格与清单、表格与清单1、清单、清单、标签标签（1）有序清单定义：）有序清单定义：定义有序清单那需要使用有序清单标签定义有序清单那需要使用有序清单标签和列表和列表项（项（list item）标签）标签，语法如下：语法如下：3 ul.html3.3.4、表格与清单、表格与清单（2）无序清单定义）无序清单定义要使用无序清单标签要使用无序清单标签和列表项标签和列表项标签语法如下：语法如下：2、表格标签、表格标签、（1）标签标签声明表格
19、声明表格，其他表格标签应在该标签范围内容，其他表格标签应在该标签范围内容使用。使用。属性属性 P43bordercellpaddingcellspacingcolswidthheight3.3.4、表格与清单、表格与清单nalignnvalignnbgcolornbordercolornborderColorLight和和borderColorDarknbackground（2）标签和标签和标签标签（P43，最后一行错误修正），最后一行错误修正）：表示表格的行；：表示表格的行；：表示表格的单元格：表示表格的单元格常用属性：常用属性：widthheightalign：文字水平对齐（：文字水平对齐
20、（left、center、right）valign：文字垂直对齐（：文字垂直对齐（top、middle、bottom）bgcolorbordercolorborderColorLight和和borderColorDarkbackground3.3.4、表格与清单、表格与清单（3）表格的应用表格的应用 页面显示表格的需要页面显示表格的需要嵌入表格嵌入表格 排版排版排版布局、对齐某些文字。排版布局、对齐某些文字。3.3.4、表格与清单、表格与清单3.3.5 在网页中建立超链接在网页中建立超链接 P50超链接标签超链接标签（围堵标签）（围堵标签）a是是anchor的首字母，的首字母，标签的标签的最基
21、本属性最基本属性是是href和和name。href：值为一个有效的值为一个有效的URL，表明标签围堵的字符串是一个，表明标签围堵的字符串是一个超链接。超链接。若用户单击该超链接，则会转向若用户单击该超链接，则会转向href属性所指定的属性所指定的URL地址。地址。3.3.5 在网页中建立超链接在网页中建立超链接 P50href属性值的常用的几种形式属性值的常用的几种形式1指向指向本地网页本地网页的链接：的链接：若链接至相同文件夹的文件：指定文件名即可若链接至相同文件夹的文件：指定文件名即可若链接至不同文件夹的文件：指定文件的具体路径若链接至不同文件夹的文件：指定文件的具体路径2链接至链接至WW
22、W服务器上的某文件：服务器上的某文件：3链接至链接至URL指定的指定的FTP站点：站点：4链接至链接至E-mail地址：地址：3.3.5 在网页中建立超链接在网页中建立超链接 P50name属性属性建立指向页面特定部分的链接建立指向页面特定部分的链接若网页的内容众多，需要多屏来显示（拖动滚动条），可利若网页的内容众多，需要多屏来显示（拖动滚动条），可利用用name属性对同一页面的不同部分进行链接。属性对同一页面的不同部分进行链接。步骤：步骤：(1)用用name属性在特定部分做标记属性在特定部分做标记(类似书签的作用类似书签的作用)。例如：例如：(2)在长文档顶部以超链接的方式显示一个目录，将内
23、在长文档顶部以超链接的方式显示一个目录，将内容链接至本页的具体内容中去。容链接至本页的具体内容中去。例如：例如：第一章第一章3.3.6 多媒体标签多媒体标签1、插入图像、插入图像 P54用用标签在标签在html文件中插入图片，文件中插入图片，标签常用的属性标签常用的属性srcwidth、heightaltalignbordernhspace、vspacennamenusemapnlongdescnlowsrc例如：例如：2、嵌入其他媒体、嵌入其他媒体 P54背景音乐背景音乐：标记（支持标记（支持midi、wav、au格式的文件）格式的文件）#=WAV 文件的文件的 URL#=循环数循环数 插入
24、视频剪辑插入视频剪辑：src：视频的封面的：视频的封面的URL(在浏览器尚未完全读入视频在浏览器尚未完全读入视频 文件时显示的文件时显示的内容内容)dynsrc：视频文件的：视频文件的URL；start：何时播放：何时播放(fileopen/mouseover)controls:是否使用控制条是否使用控制条(无属性值无属性值)loop：循环次数：循环次数(数值数值;infinite 无限循环无限循环)loopdelay：延时（毫秒数）：延时（毫秒数）标签：嵌入文件（显示文件的控制板）。标签：嵌入文件（显示文件的控制板）。3.3.6 多媒体标签多媒体标签3.3.7 框架设计框架设计(P34)允许
25、设计者在多个视图内放置页面。允许设计者在多个视图内放置页面。框架标签主要包括：框架标签主要包括：、标签。标签。1、：围堵标签，所有其他框架标签应包含在该标签对内。：围堵标签，所有其他框架标签应包含在该标签对内。常用属性：常用属性：rows：横行排列多个窗口，指定每个窗口的高度：横行排列多个窗口，指定每个窗口的高度cols：纵向排列多个窗口，指定每个窗口的宽度：纵向排列多个窗口，指定每个窗口的宽度border：设定窗口边界值，单位为像素：设定窗口边界值，单位为像素bordercolor：窗口边界颜色：窗口边界颜色3.3.7 框架设计框架设计(P34)2、：具体定义每个窗口，包括窗口显示的网页文件
26、。：具体定义每个窗口，包括窗口显示的网页文件。常用属性：常用属性：src：设定该窗口显示的页面。设定该窗口显示的页面。src=“url”。name：设定窗口的唯一的名字，用作标识。设定窗口的唯一的名字，用作标识。scrolling：是否显示滚动条（：是否显示滚动条（yes,no,auto）noresize：设定窗口大小禁止被改变。无属性值。：设定窗口大小禁止被改变。无属性值。3.3.8 表单设计表单设计(P45)用于实现与服务器端的交互。用于实现与服务器端的交互。如上网注册时用于填写个人资料，而后按如上网注册时用于填写个人资料，而后按递交递交按钮，这样，服按钮，这样，服务器即可处理递交的信息，
27、这个页面即为表单。务器即可处理递交的信息，这个页面即为表单。主要包括：主要包括：、等标签。等标签。3.3.8 表单设计表单设计(P45)1、标签标签围堵标签，所有其他的表单标签应写作围堵标签，所有其他的表单标签应写作标签包含的范标签包含的范围内。围内。主要属性：主要属性：action：值为：值为URL，指向处理表单的程序。，指向处理表单的程序。method：设定数据的传送方式。：设定数据的传送方式。get或或post。name：设定表单的名字，在处理表单时可能会用到。：设定表单的名字，在处理表单时可能会用到。3.3.8 表单设计表单设计(P45)2、标签标签用于制作各种表单输入元素、如文本框、
28、单选框、复选框等。用于制作各种表单输入元素、如文本框、单选框、复选框等。主要属性：主要属性：type：设置输出形式。属性值详见：设置输出形式。属性值详见P45value：设定表单元素的初始值，显示在页面上。：设定表单元素的初始值，显示在页面上。disabled：用于设定表单元素不被输入和修改。无属性：用于设定表单元素不被输入和修改。无属性值。值。readonly：只读。无属性值。：只读。无属性值。3.3.8 表单设计表单设计(P45)3、标签和标签和标签标签用于形成下拉列表，必须与用于形成下拉列表，必须与标签结合使用。标签结合使用。标签是围堵标签，被标签是围堵标签，被标签包围，用于设置标签包围
29、，用于设置下拉列表每个选项的内容。下拉列表每个选项的内容。主要属性：主要属性：selected：用于设定下拉列表的初始选择状况。：用于设定下拉列表的初始选择状况。value：若设置了：若设置了value属性，则表单提交的内容即为属性，则表单提交的内容即为value属性中设定的内容，而非下拉列表中显示的内容。属性中设定的内容，而非下拉列表中显示的内容。3.3.8 表单设计表单设计(P45)4、标签标签围堵标签，是多行文本输入框标签。围堵标签，是多行文本输入框标签。主要属性：主要属性：rows：用于设定多行文本输入框的最大行数。：用于设定多行文本输入框的最大行数。cols：用于设定多行文本输入框的
30、最大列数。：用于设定多行文本输入框的最大列数。wrap：用于设定是否转行方式。：用于设定是否转行方式。off/virtual/physicalaccesskey：用于设定一个激活文本框的快捷键，激活：用于设定一个激活文本框的快捷键，激活时要按住时要按住Alt键，再按设定的键即可。键，再按设定的键即可。3.3.9 其他标签：会移动的文字其他标签：会移动的文字(Marquee)基本语法基本语法：.文字移动属性的设置：文字移动属性的设置：方向方向#=left,right方式方式#=scroll,slide,alternate循环循环#=次数；若未指定则循环不止次数；若未指定则循环不止速度速度：值越大越快：值越大越快 延时延时：值越大时延越长：值越大时延越长外观外观(Layout)设置设置 对齐方式对齐方式(Align)#=top,middle,bottom 底色底色 面积面积
