第3章 HTML 语言基本结构

第3章 HTML语言基本结构 3.1 基本结构标记 3.2 文本格式标记 3.3 列表标记 3.4 超链接标记 3.5 加入音频、视频和图像 3.6 表格标记 3.7 地址标记 3.8 其他标记 3.9 框架标记 3.10 表单标记 3.11 地图标记习题

3.1 基本结构标记 3.1.1 开始和结束标记 • HTML文档的开始标记是<html>，它告诉浏览器下面的内容是HTML文档，在HTML文档结束处要有对应的</html>标记，它告诉浏览器HTML文档结束了。 • 它的语法格式为 <html> HTML文件的所有内容 </html>

3.1.2 头部标记 • HTML文档的头部标记是<head>，它告诉浏览器下面的内容是HTML文档的头部，显示在文本之前，而</head>标记告诉浏览器头部内容结束了。头部里面一般包括注释、Meta和标题。 • 它的语法格式为： <head> HTML文档的头部内容 </head>

3.1.3 标题标记 • <title>和</title>标记中间所包含的文字将成为这个Web页面的标题，一般写在头部标记之中。标题文字会显示在Web浏览器最上面的title(标题)栏上。浏览器用户可以把标题加入收藏夹中。标题文字最好使用中文并且有明确的意义。 • 它的语法格式为 <title>Web页面的标题</title> 下面用一个例子来看看用HTML语言是如何编写Web页面的，虽然有点麻烦，可是能帮助你弄清Web页面的真正面目。还要说明的是，文件3.1.htm是一个文本文件，可用任何编辑器编写。

[例3.1]头部标记和标题标记的使用。 <html> <head> <title> Web页面的标题</title> Web页面的标题和头部标记练习 </head> </html> 将上述语句保存为3\1.htm文件，在IE浏览器菜单“文件”（File）的下拉菜单中选择“打开”，通过选择可打开3.1.htm文件。头部标记在IE浏览器里的运行结果如图3.1所示。

图3.1

3.1.4 主体标记 • <body>标记是Web页面主体标记的开始，并对应结束符</body>。Web页面的主要内容都出现在<body>和</body>标记之中。 • 它的语法格式为 <body> 主体内容 </body>

[例3.2]HTML语言的主体标记。 <html> <head> <title> Web页面的标题</title> </head> <body> 这是使用HTML语言编写的Web页面文件 </body> </html> • 例3\2在IE浏览器里的运行结果如图3.2所示。

图3.2 • 说明：从这四个标记可以看到HTML语言的标记是成对使用的，开始为<标记>,结束为</标记>，这一点在写HTML语言时一定要牢记。不过，也有个别的标记是单独出现的。标记里的英文字母大小写都可以，本书统一使用小写。

3.1.5 设定Web页面背景 • <body>标记还具有一些可以设定Web页面背景色的属性，可使用图片/图像作背景，确定链接的颜色，设置文字的颜色等。 • 它的语法格式为 <body [bgcolor=#text=#link=#alink=#vlink=#background=图像文件名]> 文档内容 </body>

其中，bgcolor指定HTML的背景颜色；text指定HTML文件中文字色彩属性；link指定HTML文件中待连接超链接对象的色彩属性；alink指定HTML文件中连接超链接对象的色彩属性；vlink指定HTML文件中已连接超链接对象的色彩属性；background指定HTML背景为平铺图像（这个功能最好不用，因为它会大大降低显示速度）。其中，bgcolor指定HTML的背景颜色；text指定HTML文件中文字色彩属性；link指定HTML文件中待连接超链接对象的色彩属性；alink指定HTML文件中连接超链接对象的色彩属性；vlink指定HTML文件中已连接超链接对象的色彩属性；background指定HTML背景为平铺图像（这个功能最好不用，因为它会大大降低显示速度）。 • 各属性的参数值可以是用英文描述的颜色，如“red”、“blue”、“yellow”等，也可以是#与6位十六进制数,每种颜色使用两位十六进制数，从00到FF，前两位设置红色的深浅，中间两位设置绿色的深浅，后两位设置蓝色的深浅。如红色可以表示为“#FF0000”，蓝色可以表示为“#0000FF”等。各属性可选择使用。 • 注意： “[ ]”中的属性可选可不选，“”表示可同时选的属性。根据需要可以选择其中的一个、部分和全部。

[例3.3]改变文字的颜色和背景的颜色。 <html> <head> <title> Web页面的标题</title> 这是头部里的文字 </head> <body Bgcolor=″red″ text=″#000000″> 这是主体里的文字并加入文字和背景颜色编写的Web页面文件 </body> </html>

例3-3在Web浏览器里的运行结果如图3.3所示。不过，颜色从本书上是看不出来的，可以亲手试一试。例3-3在Web浏览器里的运行结果如图3.3所示。不过，颜色从本书上是看不出来的，可以亲手试一试。图3.3

注意： 在编写HTML文件时要采用“编写—存盘—浏览”三步曲，以此循环工作，否则会耽误时间的，千万要记住！ 3.1.6 说明信息标记 • meta可以用来说明语言字符集的信息，例如：<meta httpequvi=“ContentType” content=“text/html;charset=#”>，属性httpequvi描述特征名，属性content描述特征值。 • 常用的有#=xmacroman、gb2312、gb-231280、big5等。 • Meta也用来描述文档的自身信息，如作者信息、过期时间、关键词列表等。例如：

<meta httpequvi=″ 作者″ content=″张驰″> <meta httpequvi=″ 文档期限″ content=″2001/9/25″> meta一般放在头部内。 3.1.7 注释标记 • 为了使程序清楚、容易理解，可以添加注释标记“<!”与“>”（也可写为“”），在这对注释标记符号之间的内容将不会被浏览器显示出来。

3.2 文本格式标记 3.2.1标题字体 • 标题字体是通过<h>与</h>标记实现的。夹在<h1>和</h1>中间的文字，是文章里的大号标题字体。依次可以标注出六个层级的子标题，从<h1>、<h2>到<h6>。差别在于标题数字小的文字会比数字大的标题的文字大些、粗些、更显眼。在下面的例子里可以看出它们之间的差别。每遇到一个标题时，当前段落就会被终止，标题前后各留出一定的空白。文本自动从下一行开始。

它的语法格式为 <hi>标题文字</hi> (i=1,2,…,6) [例3.4]不同的标题字体。 <html> <body><h1>这是h1标题字体！！</h1> <h2>这是h2标题字体!!</h2><h4>这是h4标题字体!!</h4> <h5>这是h5标题字体!!</h5><h6>这是h6标题字体!!</h6> </body> </html> • 图3.4是例3.4在浏览器里的显示结果。

图3.4

<h>的属性有color、align,分别标识标题的颜色和位置(左、右、中间)。<h>的属性有color、align,分别标识标题的颜色和位置(左、右、中间)。 • 它的语法格式为 <hi color=# align=＃>标题</hi> （i=1,2,…,6）

[例3.5]标题字体加入属性后的变化。 <html> <body>不同的标题字体 <h3>这是H3标题字体!!</h3> <h4 color=#ff0000 align= right >这是H4标题字体!!</h4> <h5 align=center>这是H5标题字体!!</h5> <h6 align= left >这是H6标题字体!!</h6> </body> </html> • 图3.5是例3.5在浏览器里的显示结果。

图3.5

3.2.2 字体大小标记 • 字体大小标记<font>与</font>能够改变包含的字符、单词、短语或指定范围文本的字号大小。 • 它的语法格式为 <font size=#>文字</font> #=1，2，3，4，5，6，7 or +#，-#，默认时为3号字体。

[例3.6]各种基本文字字体的大小。 <html> <body> <font size=7>这是7号字体！！</font> <font size=5>这是5号字体！！</font> <font size=3>这是3号字体！！</font> <font size=2>这是2号字体！！</font> <font size=1>这是1号字体！！</font> </body> </html> • 图3.6是例3.6在浏览器里的显示结果。 • 注意：字体标记不会自动换行，这一点与标题字体不同。

图3.6

3.2.3 段落标记与换行标记 • 一个类似的标记元素是<br>。<br>这个标记用来标识一个换行动作。在HTML文件中可以用它来调整行间距。 • 它们的语法格式为 <p>文本</p> 文本<br> • 下面的例子可以看出二者的区别。

[例3.7]如何使用段落和换行标记。 <html> <body> • 在HTML格式里不需要在意文章每行的宽度，不必担心文字是不是太长了而被截掉；（未加段落标记） • <p>（加段落标记）它会根据窗口的宽度做自动转折（加换行标记）<br>到下一行的工作。 • 在HTML格式里不需要在意文章每行的宽度，不必担心文字 </p> </body> </html> • 图3.7是例3.7在浏览器里的显示结果。

图3.7 • 注意： <br>标记是单独使用的。

3.2.4 水平线标记 • 使用水平线标记<hr>可以在Web页面中插入一条水平线。线的宽度和高度是可调的。这个标记对于美化页面是很有帮助的。它的属性有align、width、size和noshade，分别用于调整水平线的位置、长度、宽度和是否为实心线。 • align表示水平线位置与前面类似，有right、center、left，默认时为居中。 • width 表示水平线长度可以用满屏宽度的百分数表示，也可以用像素值指明，默认时为100%。 • size 表示水平线宽度，可以用像素值2、4、8、16、32等指明，默认时为2，2也是最小值。

noshade表示水平线是实心线，默认时为一道阴影线。noshade表示水平线是实心线，默认时为一道阴影线。 • 它的语法格式为 <hr \[size=# align=#width=#noshade\]> • [例3.8]如何插入水平线。 <html> <body> <br> 插入水平线<hr ><br > 插入水平线<hr size=2 align=left width=75%> 插入水平线<hr size=6 align=center width=50%> 插入水平线<hr size=8 align=right width=50% noshade> </body> </html>

图3.8是例3.8在浏览器里的显示结果。 • 注意： <hr>标记是单独使用的。图3.8

3.2.5 字符格式化标记 • 个别的字或句子可以使用不同的字体，在NetScape中斜体用的是<i>或<em>强调，黑体用的是<b>或<strong>强调,添加下划线用<u>，选择打字机字体用<tt>。更多的格式标记还有 <code>：用于标记HTML指令； <dfn>：用于标记定义的语句； <kbd>：用于标记键盘字符； <samp>：用于标记某个命令的例子； <var>：用于标记程序变量。 • 这些标记的语法格式都是成对出现的。

[例3.9]如何使用字符格式化标记。 <html> <body> <i>斜体</i><em>(斜体)</em> <b>黑体</b><strong>(黑体)</strong><br> <tt>打字机字体</tt><var>程序变量xyz</var><br> <code>HTML指令</code><samp>例1</samp> <kbd>使用键盘字符时a%#@!()&*</kbd> </body> </html> • 图3.9是例3.9在浏览器里的显示结果。

图3.9

3.2.6 原样显示标记 • HTML在一般无标注的情况下会忽略文本文件中的空白字符和换行字符，但可以用<pre>和</pre>让空白字符和换行字符保存下来。在<pre>与</pre>之间的文字间隔、换行、空白会按照原来键入的模样显示。 • 它的语法格式为 <pre>原始文本</pre> [例3.10]如何使文本保持原有模样。 <html> <head><title> Web页面制作</title></head> <body> <pre>

看看是怎样使文本保持原有模样的！ #!/bin/cshcd$SCR×*cfsgetmysrc.f:mycfsdir/mysrc.f Fc-02-omya.outmysrc.fmya.out </pre> </body> </html> • 图3.10是例3\10在浏览器里的显示结果。

图3.10

3.3 列表标记 3.3.1 未标序的列表 • 未标序的列表由三个标记组成，<ul>说明是未标序的列表，<li>标记于各列表项之前，最后加上列表结束符</ul>。未标序的列表在每一行的起始是 “●”或是“■”标记。要注意若使用不同的浏览器就可能会有不同的效果。 • 它的语法格式为 <ul> <li> <li> <li> </ul>

3.3.2 标序列表 • 方法跟前者相似，先说明种类<ol>，再加上<li>标记于各项之前，最后加上列表结束符</ol>。在每一行列表的前面显示的是数字。 • 它的语法格式为 <ol> <li> <li> <li> </ol>

[例3.11]未标序的列表和标序列表。 <html><body> <ul> <li>第一章 <li>第二章 <li>第三章 </ul> <ol> <li>第一章 <li>第二章 <li>第三章 </ol> </body></html> • 图3.11是例3\11在浏览器里的显示结果。

图3.11

3.3.3 解释列表 • 解释列表包括一系列名词及其解释。名词比解释的部分凸前，为独立的一行。解释的部分被视为一长串文字会自动折行。先标记<dl>说明为解释列表，要解释的名词放在<dt>的后面，解释的内容放在<dd>后面，最后以</dl>结尾。在<dt>和<dd>之间，可以包含其他的标记。 • 它的语法格式为

<dl> <dt>名词1 <dd>解释1 <dt>名词2 <dd>解释2 <dt>名词3 <dd>解释3 … </dl>

[例3.12]解释列表。 <html> <body> <dl> <dt> Web <DD>Web是英文World Wide Web的简称，中文的意思是布满世界的蜘蛛网。 <dt> URL <dd>URL称为统一资源定位器，它是Uniform Resource Locations的缩写。 </dl> </body> </html> • 图3.12是例3\12在浏览器里的显示结果。

图3.12

3.3.4 综合列表 • 方法跟前者相似，先说明种类<ol>，再加上<li>标记于各项之前，最后加上列表结束符</ol>。在每一行列表的前面显示的是数字。 • 它的语法格式为 <ol> <li> <li> <li> </ol>

[例3.13]各列表的嵌套使用。 <html> <body> <ul> <li>第一章 <ul> <li>第一节 <dl> <dt>Web <dd>Web是英文World Wide Web的简称，中文的意思是布满世界的蜘蛛网。 <dt> URL <dd>URL称为统一资源定位器，它是Uniform Resource Locations的缩写。

</dl> <li>第二节 </ul> <li>第二章 <ol> <li>历史 <li>简介 </ol> </ul> </body> </html>

图3.13是例3\13在浏览器里的显示结果。 • 注意：一定要配套使用各个列表标记，否则将无法正确显示。图3.13

3.4 超链接标记 3.4.1 链接至本机另一Web页面 • 链接到本机上的Web页面很简单，只要把文件名和路径赋给href就可以了。 • 它的语法格式为 <a href=″filename.htm″>链接到filename</a> • 下面在浏览器中将看到“链接到filename”会变色并加下底线，当鼠标移到上面时，箭头会变成小手，它表示在这儿用鼠标按一下，会链接到同一机器同一路径的filename.htm 文件上。例如：<A href=“3.13.htm”>这里是“3.13.htm” Web页</A>。在浏览器中单击这里是″3.13.htm″Web页浏览器将打开3.13.htm文件。

3.4.2 链接到另外一台机器上的Web页面 • 链接到另外一台机器上的Web页面也很简单，只要把目的地的URL地址赋给href就可以了。例如：想链接到“首都在线”的主页，可以写成： <a href=″http://www.263.net″>这里是首都在线的主页</a> • 它的语法格式为 <a href=″URL″>这里是某地方</a>

第3章 HTML 语言基本结构