HTML语言简介.doc

7.1 HTML语言简介HTML（Hyper Text Markup Language 超文本标记语言）是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作World Wide Web上的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage的连结信息。HTML文档（即Homepage的源文件）是一个放置了标记的ASCII文本文件，通常它带有.html或.htm的文件扩展名。生成一个HTML文档主要有以下三种途径： 1.手工直接编写（例如用你所喜爱的ASCII文本编辑器或其它HTML的编辑工具）。 2.通过某些格式转换工具将现有的其它格式文档（如WORD文档）转换成HTML文档。 3.由Web服务器（或称HTTP 服务器）一方实时动态地生成。HTML语言是通过利用各种标记（tags）来标识文档的结构以及标识超链（Hyperlink）的信息。虽然HTML语言描述了文档的结构格式，但并不能精确地定义文档信息必须如何显示和排列，而只是建议Web浏览器（如Mosiac，Netscape等）应该如何显示和排列这些信息，最终在用户面前的显示结果取决于Web浏览器本身的显示风格及其对标记的解释能力。这就是为什么同一文档在不同的浏览器中展示的效果会不一样。目前HTML语言的版本是2.0，它是基于SGML（Standard Generalized Markup Language，标准广义置标语言，是一套用来描述数字化文档的结构并管理其内容的复杂的规范）中的一个子集演变而来的。虽然下一版本的标准HTML3.0（也称为HTML+）正在制订之中，但其中某些部分的实验性标准草案已被广泛采用，大多优秀的Web浏览器（如Netscape等）都能解释HTML3.0中的部分新标记，因此在本章中介绍的一些HTML3.0新标记均已被多数浏览器所接受。7.1.1 标记语法和文档结构HTML的标记总是封装在由小于号（）构成的一对尖括号之中。1.单标记某些标记称为“单标记”，因为它只需单独使用就能完整地表达意思，这类标记的语法是：最常用的单标记是,它表示一个段落（Paragraph）的结束，并在段落后面加一空行。2.双标记另一类标记称为“双标记”，它由“始标记”和“尾标记”两部分构成，必须成对使用，其中始标记告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标记告诉Web浏览器在这里结束该功能。始标记前加一个斜杠（/）即成为尾标记。这类标记的语法是：内容其中“内容”部分就是要被这对标记施加作用的部分。例如你想突出对某段文字的显示，就将此段文字放在一对 标记中：text to emphasize3.标记属性许多单标记和双标记的始标记内可以包含一些属性，其语法是：各属性之间无先后次序，属性也可省略（即取默认值），例如单标记表示在文档当前位置画一条水平线（horizontal line），一般是从窗口中当前行的最左端一直画到最右端。在HTML3.0中此标记允许带一些属性：其中SIZE属性定义线的粗细，属性值取整数，缺省为1；ALIGN属性表示对齐方式，可取LEFT（左对齐，缺省值），CENTER（居中），RIGHT（右对齐）；WIDTH属性定义线的长度，可取相对值（由一对 号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的个数，如WIDTH=300），缺省值是100%。4.文档结构除了一些个别的标记外，HTML文档的标记都可嵌套使用。通常由三对标记来构成一个HTML文档的骨架，它们是：头部信息文档主体，正文部分 其中在最外层，表示这对标记间的内容是HTML文档。之间包括文档的头部信息，如文档总标题等，若不需头部信息则可省略此标记。我们还会看到一些Hompage省略标记，因为.html或.htm文件被Web浏览器默认为是HTML文档。标记一般不省略，表示正文内容的开始。7.1.2 一个简单例子的剖析下面我们来观察一个简单的Homepage源文件： Sample HTML Document A Sample HTML DocumentTo demostrate HTML styleThis document is writtenby HTML. At here to brake line.Here is bold text.Here is the next paragraph.在图71中是这一Hompage在Netscape中显示出来的样子：图71 一个简单例子在Netscape中的显示让我们先来看一下上面出现的新标记 ：1.标题文本一对标记表明了一个Homepage文件的总标题，它一般出现在标记中。通常Web浏览器把总标题显示在一个特殊的区域内（例如Netscape把总标题显示在窗口顶端的标题栏内）。当用户把这一文件加到他的“热表”（hotlist）或称“书签”（bookmark）的系统中以备后用时，总标题也就成为热表中标识这一文件的名字。虽然总标题可以省略，但我们还是建议能给每个HTML文档加一个总标题。2.用于书写文档源文件的注释，是一个单标记，注释内容在浏览器中不显示。3.文本一对标记表明正文中的第一层标题（Heading）。一共有六层（H1至H6），随着层次数的增加，正文标题的字体依次减小。一个正文标题就象一个独立段落，其自动与标题前后的内容进行段落换行。4.是一个单标记，表示在正文段落的当前位置换行（break line）。在HTML中，段落是它的一个基本元素，由于Web浏览器总是根据当前窗口的尺寸将一个段落信息象流水一样，从左至右，从上至下逐个排列（一行排列不下，则自动绕转到下一行）。因此，当Web浏览器的窗口尺寸改变时，段落中各行文字的换行位置就会相应地改变。若你要确定在哪个词后换行就必须加上标记。对照上述源文件和图71，就会发现Web浏览器是完全按照源文件中的标记来安排文档的显示，而与源文件本身的书写格式无关，Web浏览器忽略源文件中的所有换行符和多余的空格符。并且HTML标记及其属性的大小写也不区分，如等同于。7.1.3 字体与颜色HTML中有不少用于字体的标记，如上例中的 表示用粗体（Bold）显示。其它还有 斜体（Italic）， 定长宽度字体（Teletype）。这类标记属于物理意义上的标记，它们明确指定了用哪一类型的字体。另外还有一类属于逻辑意义上的标记。如 突出显示（Emphasize），它并不指明怎样的突出法，而让Web浏览器自行决定，大多浏览器就把它处理为斜体（等效于 ）。类似的逻辑型标记还有： 重点突出显示（Strong emphasize） 按地址类型显示 按代码类型显示等等。上述标记只是定义字体的形状（粗体或斜体），而并不能改变字体的大小。若想改变字体的大小可利用正文标题标记至，其中至比一般正文字体大，而至比一般正文字体小。由于标题标记具有段落属性，这使得一个段落内不能使用两种Heading标记，请看下例 ：In one paragraph use bold text and italic text and fixed_with text and also bold+italic text, or other strong emphasize text etc.But Heading level 1 and italic Heading level 2cant be in one paragraph.图72是上述源代码在Netscape中 的显示。图72 HTML2.0 的字体样式为了解决不同大小的字体能在一段内显示，HTML3.0 新推出 标记。它带有SIZE属性，属性值可取相对值，如：SIZE = +2 表示比当前字体大两号，反之 SIZE = -1 则比当前字体小一号。另外SIZE也可取绝对值（默认值为3），如：SIZE=4，则代表4号字体。同时HTML3.0还提供了上标字体标记 等，请看下例 ：This is HTML+ font:Bigger level 1 and Bigger level 3 and Smaller level 1 and The NO.5 font(TM)in one paragraph.其效果如图73所示。另外，HTML3.0还可定义整个文档的背景和字体的颜色。它通过在标记中增加属性BGCOLOR和TEXT来定义，属性值为带#号的十六进制RGB值。如要使背景为白色，文本为黑色，可这样定义： 文档正文部分 如果要将文档正文部分中的某些词组定义为其它颜色，可以在标记中加上COLOR属性，属性值同样为带#号的十六进制RGB值。图73 HTML+的新字体样式7.1.4 超链和URL创建一个超链（Hyperlink）是HTML语言中的一个重要部分。一个超链又称作锚（Anchor），它唯一地指向另一个Web信息页，超链如同把Gopher中可触发的菜单项融于正文之中，因此超链更具有上下文的含义。1.URL格式我们已经知道，一个Web信息页是用URL（Universal Resource Location，统一资源定位器）来唯一标识的，URL的一般格式为：访问方式 : /服务器域名/路径及文件名其中访问方式可有HTTP、FTP、TELNET、GOPHER、WAIS、NEWS、MAILTO、FILE等等。随着访问方式的不同，冒号后面的参数格式也会不同，下面是一些URL的例子：/coliege/science/computer/computer.htm/pub/mailto:file:/c|/html/sample.htm2.锚（Anchor）标记HTML中的一个超链由两部分组成：一部分是可被显示在Web浏览器中的超链文本及图像，当用户在它上面点击鼠标时，就触发了此超链；另一部分就是用以描述当超链被触发后要链结到何处的URL信息。因而超链标记（即锚标记）的格式为： 超链文本及图像 其中超链文本被浏览器用一种特殊颜色并带下划线的字体醒目地显示出来，并且用户鼠标进入其区域时会变成手的形状，表示此处可以被触发。属性HREF表明了超链被触发后所指向的URL。例如：next page在HTML中还可使用相对URL来代替绝对URL。例如要指向的另一HTML文件在同一目录下，只需简单地写为：next page如要指向上两级目录下的文件，可以这样写：Return to topic3.指向文件中的某一处通常超链只指向一个文件的头部，若要指向一个文件内的某一特定位置，就要用到超链标记的另一个属性NAME，其格式如下： 超链文本及图像 这里的超链文本并不被浏览器特殊显示，也不能被触发，它仅仅表示一个被指向的目的地，而超链名就是这一目的地的名字。当要引用这一目的地时，只需把#超链名添加到HREF中就可以了。例如，在一个文件中有一部分内容是附录，可以先在附录标题上定义一个超链名：Appendix A这样，你就可以在同一文件的其它处创建一个超链来指向附录部分：Details are in Appendix A.如图74所示，当用户一旦触发超链，就显示附录部分的内容。当然，如果想在其它文件里引用此附录，只需加上适当的URL信息就可以了。如：Details are in Appendix A.图74 用超链指向文件中的特定位置7.1.5 图像、声音、视像和动画HTML文档的另一个重要特性就是能把多种媒体的信息综合在一起，使显示的信息更加多姿多彩。1.图像HTML支持内嵌式的图像显示，一幅图在HTML文档中就如同一个单词，与其它单词一起在一个段落中如流水般的依次排列。HTML的图标记是一个单标记，它的格式为：其中属性SRC表示图的源（Source）文件，因此这里的URL信息必须对应一个图像文件。目前有以下几种图像的格式能被Web浏览器直接解释：GIF格式（.GIF文件，支持256色）；X位图格式（.XBM文件，黑白图像）；JPEG格式（.JPG、.JPEG文件，支持RGB色）。对于段落中的图像，你还可以利用ALIGN属性定义图与文本行的对齐方式，其属性值可取TOP（与文本行顶部对齐）、MIDDLE（中间对齐）、BOTTOM（底部对齐，默认值）、LEFT（将此图显示在窗口左方）、RIGHT（将此图显示在窗口右方）。例如： This text line is middle-align.如果让图像单独占一块区域，不要忘了在图标记的前后加上或标记： This image is stand alone with the text.图像同样也可以作为一个超链，如： Click the image to see the full-size picture and detail of this building.Web浏览器在超链图的四周画一个边框，以示可被触发。若想去掉这个框只需在中加上属性BORDER=0就可以了。图75是上述例子的显示效果。如果你满意图像的原始尺寸，可以用属性WIDTH和HEIGHT分别重新定义图像的宽度和高度，属性值为用整数表示的屏幕像素点的个数。图75 Hompage的内嵌式图像2.声音和视像Web浏览器自身不能解释声音和视像文件，但它能通过其它辅助工具的帮助来播放声音和视像文件。一般声音文件带有.WAV、.AU、.SND等文件扩展名，而视像文件带有.AVI、.MPG等文件扩展名。要播放这些文件，就必须把这些文件作为一个超链中的URL信息。当用户触发这一超链时，Web浏览器发现自己无法解释这类文件，就在辅助工具表中启动相应的程序来播放它们。请看下例：Here is the audio demo.Here is the video demo.图76是用户触发video demo的超链后，Web浏览器立即启动mplayer程序来播放demo.avi视像文件。（若事先未设置好辅助工具表，Web浏览器第一次会询问用户选用哪种辅助工具来播放此类文件。）图76 Web浏览器调用mplayer来播放.avi视像文件3.动画SUN公司开发了一套称为Java的通用程序设计语言，利用它制作的Homepage可支持内嵌式的动画和内嵌式的声音。你可以用SUN公司的Web浏览器HotJava来观看带有Java标记的Homepage（Netscape 2.0也能解释部分的Java标记）。对Java感兴趣的读者可将你的Web浏览器指向： /7.1.6 列表结构和预编排结构列表（list）结构和预编排（Preformatted）结构都是一种具有段落性质的独立块状结构，也就是说，它们象标题（Heading）结构一样，能自成一段，仿佛在这些结构的尾部加上了一个标记。1.列表（list）结构列表（list）结构也是HTML文档中的一个基本结构。一共有三种类型的列表，它们是：（1）无次序列表（Unordered list）： 列表项 （2）有次序列表（