多媒体技术15HTML.doc

25 第15章 HTML第15章 HTMLHTML（HyperText Markup Language，超文本标记语言）是一套书写Web文档（网页）的语法规范，是传统万维网的基础之一，也是新万维网的（基于XML的）网页描述语言XHTML（1.0版）的原型。本章介绍HTML的基本技术内容，主要是各种常用元素和标签的定义和使用。包括HTML的基础、常用元素和其他元素三个部分。15.1 基础本节先介绍HTML的一些基本概念，包括元素、标签、属性、DTD类型、文档结构等；然后给出HTML所使用的转义字符和白空符；最后讨论HTML的元素分类和通用属性分组。15.1.1 元素与标签元素是标记语言的基本单元，用标签来表示和界定。在HTML中，元素可以用来描述文档的各种成分和格式。1. 元素与标签元素（element）指文档的各种成分（如头、标题、段落、表格、列表、斜体、上标等）。元素的类型、属性和范围用标签（tag）来标识、设置和界定。元素之间可以嵌套（形成文档的树状结构），但不能交叉。嵌套的诸元素构成父子关系，称外层的为父元素，内层的为子元素。多级嵌套则形成祖父、父、子、孙等多重辈分的层次等级关系。文档中的元素为自由书写格式（似C/C+/Java/C#语言），建议按嵌套层次进行缩进。标签(tag，标记/标识/标注)是用来描述文档内容的类型、组成与格式化信息的（ASCII可打印）文本字符串，用一对尖括号“”括起。标签可用于标识元素的类型、设置元素的属性，并界定元素内容的开始与结束。元素可按有无元素内容分为非空元素和空元素两类，对应的标签为非空标签与空标签。2. 非空元素与标签非空元素指含有内容的元素，非空标签指标识非空元素的标签，包括开始和结束两个标签。l 格式：非空元素 = 开始标签 元素内容 结束标签n 开始标签 = ，标识元素的开始n 结束标签 = ，标识元素的结束即：非空元素 = 元素内容其中： 表示可选；元素名=元素名，其字母一般全大写；属性值可为数字、符号常量和字符串等，一般用ASCII码的单/双引号括起来。l 例子：n 标题：Testn 锚(anchor)：中山大学n 字体：这是一段采用三号字的蓝色黑体文字n 表格：3. 空元素与标签空元素指不含内容的元素，空标签指标识空元素的标签。一个空元素只有一个标签。l 格式：空元素 = 空标签 = l 例子：n 图像(image)： 或 n 换行(break)： 或 n 水平标线(horizontal rule)： 或 4. 说明在HTML中，元素（标签）名与属性名都不区分字母的大小写（似DOS/Fortran/Basic），但属性值中的字符串区分大小写。按惯例，在HTML中，元素名一般全大写、属性名一般全小写（也可以全大写）、属性值中的符号常量一般全小写。但在XML和XHTML中，是区分字母大小写的，而且在XHTML中元素名与属性名都是全小写的。为了与XHTML兼容，本书采用全小写的元素名和属性名。一个非空元素的开始标签与结束标签总是成对出现的，但在HTML中也有一些标签的结束标签可省略（如、等），而由下一个同类元素的开始标签来判断上个元素的结束。但这是一个坏习惯，容易产生歧义，同时也给浏览器和分析程序增加了不必要的麻烦。建议为每个非空元素写上配对的结束标签，以便与XHTML兼容。另外，在HTML中，空元素标签一般没有尾部的斜杠“/”，如、。但为了明确表明元素为空元素，后面没有结束标签，并且与XHTML兼容，最好还是在空标签中加上尾斜杠“/”，如、。开始标签中的多个属性用空格分隔，出现的顺序是无关紧要的，如与和等都是等价的。在HTML文档中，属性值一般用单引号或双引号括起来，也可以省略引号。但为了与XHTML兼容，最好用引号把属性值括起来。单引号括起来的属性值中可以包含双引号，而双引号括起来的属性值中可以包含单引号。属性值中还可以包含字符实体的引用（如"）和字符编码的引用（如）。15.1.2 DTD类型与文档结构1. DTD类型HTML是SGML的一种应用和简化，其文档结构和元素标签都由SGML的DTD（Document Type Definition/Declaration文档类型定义/声明）来定义。HTML 4.0有三种不同的文档类型定义(DTD)：l 严格DTD(strict.dtd)不包含被反对的和框架集中的元素；l 宽松DTD(loose.dtd)包含被反对的元素，但不包含框架集元素；l 框架集DTD(frameset.dtd)包含被反对的和框架集中的元素。其中，宽松DTD又叫过渡(transitional)DTD。另外：l 被反对的(deprecated)元素有：applet、basefont、center、dir、font、isindex、menu、s（即strike）和u，它们大多与外观表现有关；l 框架集中的元素有：frame、frameset和noframes。严格DTD的限制最多，很多传统的HTML元素它都不支持；框架集DTD则最宽松，支持所有传统的HTML元素。2. 文档结构HTML的普通文档结构见表15-1。其中， 表示可选；标题内容被显示在浏览器的标题条上。除了用于显示网页内容的普通HTML文档外，还有专门用来定义文档框架的框架HTML文档。在框架HTML文档中，普通HTML文档中的文档体元素body，被框架集元素frameset所代替，参见后面的15.2.9小节。HTML文档所对应的文件扩展名一般为html或htm，如Test.html。表15-1 HTML普通文档结构 类型声明版本信息html元素(文档/根元素)头元素标题元素标题内容其他头内元素元元素meta（文档说明）脚本元素script（脚本语言函数定义）体元素 文档内容（各种体内元素及其嵌套的子元素）例如：标题内容可简写为： 标题内容 15.1.3 转义字符与白空符1. 转义字符为了避免与在HTML文档中有特殊含义的字符（如标签与字符串的分隔符及实体引用符：、&等）弄混，可以用实体引用的方法来转义字符，从而达到在HTML文档中按原样（无HTML的语法和语义含义）来使用这些字符的目的。转义字符的使用格式为：&实体名; 或 或 。注意，其中的分号“;”都为ASCII字符，不要采用中文的分号“；”。HTML文档中，常用的转义字符见表15-2。表15-2 HTML常用转义字符表字符含义实体引用十进制编码十六进制编码引号quotation"&与号ampersand&大于greater than>空格非断行空白no-break space 2. 白空符HTML文档的白空符(white space characters)包括：空格space ()、制表tab ()、回车carriage return ()、换行line feed ()、换页form feed ()和零宽空格Zero-width space ()。浏览器一般会自动将HTML文档中的连续多个白空符用单个空格符代替，除非你使用pre元素来保留原文本串中的白空符。如果你想让文档显示出多个空格，则需要使用若干实体引用 。例如：绪   论。15.1.4 元素分类HTML4.0中共有91个元素，其中有13个空元素、10个被反对元素和3个框架集元素。下面是HTML 4.0中部分元素的分类：l 流(flow)元素：块元素、行内元素；l 块(block)元素（块级元素）：p、标头元素、列表元素、pre、dl、div、noscript、blockquote、form、hr、table、fieldset、address，块元素是从新的一行开始，而且结束后会自动换行的元素；l 行内(inline)元素（文本级元素）：字符串、字体样式元素、短语元素、特殊元素、表单控件元素，行内元素是不需从新的一行开始，而且结束后也不会自动换行的元素；l 标头(heading)元素：h1h6；l 列表(list)元素：ul、ol、dl、li；l 字体样式(font style)元素：tt、i、b、u、s、strike、big、small；l 短语(phrase)元素： em、strong、dfn、code、samp、kbd、var、cite、abbr、acronym；l 特殊(special)元素：a、img、applet、object、font、basefont、br、script、map、q、sub、sup、span、bdo、iframe；l 表单控件(form control)元素：input、select、textarea、label、button。15.1.5 通用属性分组下面是HTML 4.0的通用属性分组：l 常用属性组attrs：核心属性组、语言方向属性组、内部事件属性组n 核心属性组coreattrs：id (identifiers), class (document-wide identifiers), style (inline style information) , title (element title)u 标识符：id = name，名称必须在整个文档中唯一，可用于：样单的选择符（单一元素）、超链的目标锚、从脚本对特定元素的引用、已经被声明的OBJECT元素名、用户代理的通用处理。u 类：class = class-name list，类名表（以空格分隔），可用于：样单的选择符（元素集）和用户代理的通用处理。u 样式：style = style，指定当前元素的样式信息，属性值由缺省的样单语言确定，例如：Arent style sheets wonderful?u 标题：title = text，提供元素的咨询信息（可在鼠标停留时显示）n 语言方向属性组i18n：lang (language information), dir (text direction)u 语言信息：lang = language-code，其中，语言编码=主码(-子码)*l 主码如：fr (French法语), de (German德语), it (Italian意大利语), nl (Dutch荷兰语), el (Greek希腊语), es (Spanish西班牙语), pt (Portuguese葡萄牙语), ar (Arabic阿拉伯语), he (Hebrew希伯来语), ru (Russian俄语), zh (Chinese汉语), ja (Japanese日语), hi (Hindi印地语), ur (Urdu乌尔都语)和sa (Sanskrit梵语)；l 子码如：en-GB (Great Britain大不列颠/英国)、en-US (United States美国)、en-cockney（伦敦东区）、zh-guoyu (国语/普通话)、zh-yue (粤语/广东话)、zh-hakka (客家话)、zh-min (闽语/福建话/台湾话)、zh-min-nan (闽南话)、zh-wuu (吴语/上海话/江浙话)。注意，语言编码的大小写敏感。u 文本方向：dir = ltr | rtl，其中：ltr = left-to-right从左到右、rtl = right-to-left从右到左。u 例子：希伯来语文本n 内部事件属性组intrinsic events：onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyupn 单元对齐属性组：单元垂直对齐属性(valign)、单元水平对齐属性组(align、char、charoff)（参见15.2.7中行组元素的属性说明）15.2 常用元素下面的各小节，用于介绍HTML4.0中，常用的各组元素与标签及其属性。这些是本章的主要和重点的内容。15.2.1 文档结构元素HTML的文档结构元素，用来描述HTML文档的顶层结构，包括文档（根）元素html、头元素head、标题元素title和体元素body。本小节先讨论这些文档结构元素与标签，最后介绍HTML文档的注释格式。1. 文档元素htmll 格式：文档内容l 语法： (head, body) | (head, frameset) 其中，( )表示元素分组、逗号表示严格按先后顺序、| 表示或者（可选）。即HTML文档的内容，可以是头元素head后跟体元素body或框架集元素frameset。l 说明：html为文档的根元素，在HTML文档中不可少，而且必须位于文档的最前面（文档类型声明和版本信息之后）。浏览器从开始解析，遇到结束解释，即后的任何内容都会被浏览器丢掉。l 属性：语言方向属性组l 子元素：n (所有三种DTD：strict.dtd, loose.dtd & frameset.dtd)：head, bodyn (仅框架集DTD：frameset.dtd)：head, frameset2. 头元素headl 格式：头内容l 语法： (title & isindex? & BASE?) +(script | style | meta | link | object) 其中，与号“&”表示与、问号“?”表示可选、元素（组）前面的加号“+”表示可添加（若干次）。l 说明：可选，若有必须位于之后、和之前。头部内容一般只有标题元素title，也可以有若干对文档进行说明的元元素META（如作者、公司、时间等）及若干定义脚本语言的函数的脚本元素script（供在文档体中的脚本调用）。但只有title是必须的且唯一，其他都是可选的。l 属性： n 档次：profile=uri用于指定元数据的位置n 其他属性：语言方向属性组3. 标题元素titlel 格式：标题内容l 语法：字符串l 说明：是head元素的必须子元素，必须唯一，且必须位于头元素内。标题内容被显示在浏览器的标题条上。无子元素。l 属性：语言方向属性组4. 体元素bodyl 格式：文档体内容l 语法： (块元素 | script)+ +(ins | del) 其中，元素（组）后面的加号“+”表示至少出现1次，可以重复出现任意多次，即1nl 说明：可选，若有则必须位于html元素内、head元素之后。文档体中的内容被显示在浏览器的客户区之中，文档体=网页。l 属性：n 背景色：bgcolor = color，颜色color = 颜色名 | RGB值，其中：颜色名不区分大小写（一般全小写）、RGB值 = # rrggbb十六进制（也不区分大小写），如bgcolor=red或bgcolor=#ff0000。缺省背景色为白色。参见图15-1。黑色：black = #000000绿色：green = #008000银灰：silver = #C0C0C0浅绿：lime = #00FF00灰色：gray = #808080橄榄色：olive = #808000白色：white = #FFFFFF黄色：yellow = #FFFF00栗色：maroon = #800000深蓝：navy = #000080红色：red = #FF0000蓝色：blue = #0000FF紫色：purple = #800080蓝绿：teal = #008080紫红：fuchsia = #FF00FF浅绿：aqua = #00FFFF图15-1 颜色名与RGB值n 背景图：background=uri，uri为位图文件的地址路径，如background=zsu.jpg，浏览器会将指定位图平铺在网页窗口中，缺省无背景图。n 文本色：text = color，缺省为黑色。n 未访问过的超链色：link = color，缺省为蓝色。n 正在访问的超链色：alink = color，缺省为红色。n 已访问过的超链色：vlink = color，缺省为红色。n 响应装入：onload = script（脚本），在浏览器完成窗口或所有框架的装入后调用，可用于body和frameset元素。n 响应卸载：onunload = script（脚本），在浏览器从窗口或框架中清除文档后调用，可用于body和frameset元素。n 其他可用属性：常用属性组5. 注释l 格式：l 说明：注释内容中不能包含连续两个以上的连字符“-”；注释可以放在HTML文档的任何地方、也可以跨行，但不能位于标签内。注释中的元素、标签、转移字符等实体引用等等，都不会被浏览器解释，而只当作注释的普通说明字符串处理，而且在浏览器分析文档时被丢弃。15.2.2 段落与文字元素段落与文字元素，是描述HTML文档之文本格式的主要元素，包括常用的6级标题元素hi（i = 16）、段落元素p和断行元素br，以及相对使用较少但却有独特作用的预排文本元素pre、分区元素div和水平标线元素hr，最后还有重要的字体元素font。1. hi（heading标题/标头）l 格式：标头内容l 语法： (行内元素)* 其中，元素（组）后面的星号“*”，表示可选且可重复出现任意次（即0n次）。l 说明：i = 16对应于1级6级标头（标题），对应字体从大小。与显示在浏览器标题条上的title元素不同，标头的内容被显示在网页中。标头一般用于章节、段落的标题，以醒目。浏览器会在标头后换行，并且会在后面插入一个空行。l 例子：第一级标题第二级标题第三级标题第四级标题第五级标题第六级标题图15-2 6级标头h1h6显示结果见图15-2。l 属性：n 对齐：align = left | center | right | justify（调整/撑满/两端对齐），缺省为左对齐。n 其他属性：常用属性组2. p（paragraph段落）l 格式：段落内容l 语法： (行内元素)* l 说明：p元素的功能是开始新的段落=中断现在行、并空一行、然后再开始新的行= 。结束标签可省。另外，p元素内不能包含块级(block-level)元素（如p、hi、ul、ol、li、table等），而只能包含行内即文本级元素（如br、font、i、sup、em、a、img等）l 属性：align、常用属性组3. br（break line断行）l 格式：或l 说明：br元素为空元素，其功能为强制断行(forcing a line break)。因为HTML文档为自由书写格式，浏览器会将元素内容中的多个白空符（包括回车和换行符）用一个空格代替，所以为了在显示的文本中换行，必须用br元素。l 属性：n 对齐与浮动对象：clear = none | left | right | all，参见图15-3- - 图像 - - - 图像 - - - - 图像 - - - 图像 - - - 图像 - - - 图像 - - - 图像 - - 图像 -clear = noneclear = leftclear = rightclear = all图15-3 br元素的clear属性u none：下一行正常开始，为缺省值u left：下一行从左边浮动对象（如图像）的下边开始u right：下一行从右边浮动对象的下边开始u all：下一行从任意浮动对象的下边开始n 其他属性：核心属性组。4. pre（preformatted text预排文本）l 格式：预排文本l 语法： (行内元素)*- (img | object | big | small | sub | sup) l 说明：可保留文本中的所有白空符（包括空格和换行）、可渲染固定间距的字体、可禁止自动转行、但不能禁止双向处理。l 属性：常用属性组。l 例子：床前明月光疑是地上霜举头望明月低头思故乡床前明月光      疑是地上霜举头望明月      低头思故乡床前明月光疑是地上霜举头望明月低头思故乡A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. A very long line. 显示结果见图15-4。5. div（division分区）l 格式：块级元素组l 语法： (流元素)* l 说明：div元素一般用于统一设置分区内的所有块级元素的lang、align等公用属性。浏览器通常会在div元素前后断行。l 属性：align、常用属性组。6. hr（horizontal rule水平标线）图15-4 段落元素p与预排文本元素prel 格式：或l 说明：空元素，生成一条起分隔和美观作用的水平标线。l 属性：n 对齐：align = left | center | right，缺省为center。n 无阴影：noshade，无属性值，缺省有阴影。n 粗细：size = pixels像素数，缺省值与浏览器有关，IE为2。n 宽度：width = length，长度可为像素数n和可用空间的百分比r%，缺省为100%。n 其他属性：常用属性组。l 例子：显示结果见图15-5。图15-5 水平标线元素HR7. font（字体）l 格式：文本内容l 语法为： (行内元素)* l 说明：设置文本所用的字型、大小和颜色等属性。l 属性：n 字型：face = 字型名列表（用逗号分隔），由浏览器按序匹配。n 大小：size = 17 | +1 +6 | -1 -6，i为字号、+i表示增大i-1号、-i表示减小i号，但最后所得的字号必须在17之间。n 颜色：color = 颜色值。n 其他属性：语言方向属性组、核心属性组。l 例子：下面是字体元素font的字型、字号和颜色属性的例子。（1）字型宋体仿宋黑体楷体隶书幼圆新宋体方正舒体方正姚体华文宋体华文仿宋华文细黑华文楷体华文隶书华文中宋华文行楷华文新魏华文琥珀华文彩云Times New RomanArialCourial New结果见图15-6。图15-6 字体元素font的face属性（2）字号1号字 2号字 3号字4号字 5号字 6号字7号字 -3号字 -2号字 -1号字缺省字号 +1号字 +2号字+3号字 +4号字显示结果见图15-7。图15-7 字体元素font的size属性（3）颜色黑色灰色银灰!-乳白白色-红色栗色深红紫红粉红绿色橄榄色浅绿黄绿蓝绿蓝色水蓝深蓝紫色淡紫黄色桔色棕色青色显示结果见图15-8。图15-8 字体元素font的color属性15.2.3 文字样式元素文字样式元素刻画文字的形状、特性和含义，可以分成两类：直接描述文字具体样式的物理样式元素和指定文字含义由浏览器确定显式样式的逻辑样式元素。它们具有相似的元素格式、语法和属性。l 格式：文字l 语法： (行内元素)* l 属性：常用属性组1. 物理样式标元素物理样式元素直接描述文字具体样式，主要用于排版和显示，不利于文本含义的确定和信息内容的检索，有些已经被HTML4.0所反对。l 大字体(big font)：bigl 小字体(small font)：smalll 粗体(bold)：bl 斜体(italic)：il 下划线(underlined)：ul 删除线(strike-through)：s或strikel 电传打字(teletype)：tt（等宽）l 上标(superscript)：supl 下标(subscript)：sub2. 逻辑样式元素名逻辑样式元素只指定文字的含义，具体显式样式则由浏览器来确定，适合文本含义的确定和信息内容的检索，是XML和将来XHTML的发展方向。l 强调(emphasis)：em（斜体，在IE中，下同）l 重点强调(stronger emphasis)：strong（黑体）l 引用(cite)：cite（原文）（斜体）l 定义(defining)：dfn（定义词汇）（斜体）l 代码(code)：code（源代码）（等宽）l 样本(sample)：samp（程序或脚本）（等宽）l 键入(keybord)：kbd（用户输入）（无格式等宽）l 变量(variable)：var（程序变量）（斜体）l 缩写(abbreviation)：abbr（如Dec、mass.）l 首字母缩写词(acronym)：acronym（如USA、radar）各种文字样式元素在IE中的显示效果，可参见图15-9。图15-9 IE显示的文字样式元素效果15.2.4 列表列表元素用于罗列多个并行的表项，在文档中经常被使用。在HTML中，列表元素的种类丰富，使用也很方便。1. 分类l 无序列表ull 有序列表oll 菜单列表menu（已过时/被反对的）l 定义列表dl各种列表可以（相互）多层嵌套。由于菜单列表已经过时，这里就不讲了。下面依次介绍其他三种列表元素，以及它们共同的表项子元素li。2. ul（unordered list无序列表）l 格式：表项序列l 语法为： (li)+ l 说明：为表项集合，与上下段之间各有一空行。每个表项前有项目符，表项后换行；同级表项左对齐、嵌套的次级表项右缩进。l 属性（可用于ul和li）： n 项目符类型：type = disc（缺省1级）| circle（2级）| square或（3级）n 紧凑：compact，效果由浏览器定，在IE中不变。n 其他属性：常用属性组。3. li（list item表项）l 格式：表项内容l 语法为： (流元素)* l 说明：表项内容可以为任何块元素和行内元素，结束标签可省。l 属性：n 序号值：value = 数值（只能用于ol）n 其他：同ul。4. ol（ordered list有序列表）格式、语法、说明等都似ul，只是项目符为数字或字母所组成的序号符。其属性有：type序号符例子1阿拉伯数字（缺省）123 a小写字母abc A大写字母ABC i小写罗马数字iiiiii I大写罗马数字IIIIII 表15-3 有序列表元素ol的类型属性typel 序号符类型：type = 1 | a | A | i | I，含义参见表15-3。l 紧凑：compact，效果由浏览器定，IE中不变。l 开始序号：start = 数值（对应于序号符）。l 其他属性同ul。下面是一个无序列表和有序列表的例子：无序列表标题标题级别标题对齐段落字体字体大小英文字体中文字体字体种类字体颜色有序列表标题标题级别标题对齐段落字体字体大小英文字体中文字体字体种类字体颜色有序列表标题标题级别标题对齐段落字体字体大小英文字体中文字体字体种类字体颜色显示结果如图15-10所示。图15-10 无序列表和有序列表例5. dl（definition list定义列表）l 元素：n dl(definition list定义列表)：定义项与定义描述系列n dt(Definition Term定义项/术语)：定义项内容n dd(Definition Description定义描述/解释)：定义描述内容l 语法：n (dt | dd)+ n (行内元素)* n (流元素)* l 说明：dt与dd元素的结束标签可省，定义项与定义描述一般成对出现。l 属性：常用属性组。l 例子：定义列表DL Definition ListDT Definition TermDD Definition Description图15-11 定义列表例显示结果如图15-11所示。 15.2.5 图片图片(image)在网页中可用作网页背景图、嵌入式插图和超链接的热点等。浏览器一般支持GIF/JPEG/PNG等图片格式。1. 背景图背景图只能在体元素body的属性中设置。l 格式：文档体内容l 说明：图片会像瓷砖一样重复排列，铺满整个网页窗口。2. 插图插图在HTML中用图像元素img（image图像）来定义，它是一种空行内元素。l 格式：l 说明：img元素将资源指定的图片嵌入文档中定义该元素的位置处。img为空元素标签。l 必须属性：n 图片资源：src = uri，图片文件的网络或本地地址。n 替代文本：alt = alternate-text，图片的描述文字说明（鼠标停留时会浮动显示），在下载慢速时或不支持图像的浏览器中显示l 常用属性：n 图片宽：width = length，