HTML 网页主体标记

HTML 网页主体标记

本章目标：

Ø 掌握〈BODY〉元素

Ø 掌握文字与段落的

Ø 掌握超链接

Ø 掌握图片标记

Ø 掌握表格标记

简介

网页的主体部分位于<body>和</body>这两个标记之间。<body>作为一个标记，有许多相关的属性。本章将介绍网页中主要的标记以及其属性的含义，通过这些标记，我们可以控制网页内容的显示。。 1、1 body标记

HTML的主体标记是<body>，在<body>和</body>中放置的是网页中的所有内容，如文字、图片、链接、表格、表单等。

在HTML中标签可以拥有属性。属性能够为页面上的HTML元素提供附加信息。标签<body>定义了html页面的主体元素。使用一个附加的bgcolor属性，可以告诉浏览器：页面的背景色是红色的，就像这样：<body bgcolor="red">.

<body>元素有很多自身的属性，如定义页面文字的颜色、背景的颜色、背景图像等，如表2-1所示。

表2-1 body标记属性

属性描述text设定页面文字的颜色bgcolor设定页面背景的颜色background设定页面的背景图像bgproperties设定页面的背景图像为固定，不随页面的滚动而滚动link设定页面默认的链接颜色alink设定鼠标正在单击时的链接颜色vlink设定访问过后的链接颜色topmargin设定页面的上边距leftmargin设定页面的左边距

1.1文字颜色属性text

<body>元素的text属性可以改变整个页面默认文字的颜色。在没有对文字进行单独定义颜色的时候，这个属性将对页面中所有文字产生作用。

基本语法

1.2页面背景颜色bgcolor

<body>元素的bgcolor属性用于设置页面的背景颜色。如下面代码：

中国北京

</body>

body元素的其他属性我们就不一一介绍了。

注意：

属性值应该被包含在引号中。双引号是最常用的，但是单引号也可以使用。
在很少情况下，比如说属性值本身包含引号，使用单引号就很必要了。
比如：name='John "ShotGun" Nelson'。
注意：中文引号跟英文引号是不一样的。上面所指的引号都是英文状态下的引号。

2 文本标记

在页面中显示文字内容是HTML语言所能做到的最简单的事情。

<html>

<body>

水是生命之源,我们要爱惜它。

</body>

</html>

在上述HTML文件中“水是生命之源,我们要爱惜它。”就是输入的普通文字。

显示结果如图2-1所示，页面显示了文字“水是生命之源,我们要爱惜它。”。

图2-1 页面中的文字

文字中一般会包括标题、段落、换行等格式。在HTML中，同样提供了定义标题元素的标签，段落标签和换行标签。下面重点介绍这些标签。

2．1 段落标记

首先我们看一个段落的例子。

<html>

<body>

</body>

</html>

上述代码浏览效果如图2-2所示。

图2-2 页面浏览效果

段落是用<p>标签定义的。例如：“<p>这是一个段落</p>” 。HTML自动在一个段落前后各添加一个空行。

当需要结束一行，并且不想开始新段落时，使用<br>标签。<br>标签不管放在什么位置，都能够强制换行。例如：

<p>This <br> is a para<br>graph with line breaks</p>

<br>标签是一个空标签，它没有结束标记。

注释标签用来在HTML源文件中插入注释。注释会被浏览器忽略。可以使用注释来解释我们的代码。例如：

<!—这是注释 -->

注意：我们需要在左括号“<”后面跟一个感叹号，右括号不用。

技巧

当我们写下HTML文本的时候，我们不能确知在另外一个浏览器中，这些文本将被如何显示。有人用着大的显示器，有的人用的小一些。每次用户调整窗口大小的时候，文本都将被重新格式化。建议不要在编辑器中写一些空行和空格来协助排版。
HTML将截掉你文本中的多余空格。不管多少个空格，处理起来只当一个。在HTML里面，一个空行也只被当作一个空格来处理。使用空段落<p>来插入空白行是一个坏习惯，请使用<br>标签来替代。

2．2 标题标记

通常一段文本都会有标题，而标题在显示的时候总是区别于正文文本。在HTML中，我们也可

以使用一些标记来表示标题元素。

标题元素由标签<h1>到<h6>定义。<h1>定义了最大的标题元素，<h6>定义了最小的。例如下面的代码显示六级标题。

Ø <h1>这是一级标题</h1>

Ø <h2>这是二级标题</h2>

Ø <h3>这是三级标题</h3>

Ø <h4>这是四级标题</h4>

Ø <h5>这是五级标题</h5>

Ø <h6>这是六级标题</h6>

HTML自动在一个标题元素前后各添加一个空行。

下面的代码是标题标签和段落标签的综合应用。代码如下。页面浏览效果如图2-3所示。

<html>

<body>

<h1 align="center">我爱世界杯</h1>

<p>这个火热的六月绝对属于世界杯（World Cup）。从6月9日到7月9日，全球有近20亿人通过各种方式关注这个体育盛会。</p>

<p>世界杯的魅力是无与伦比的。它的影响力远不仅限于体育和经济，还是每一个参赛队伍民族性格和民族文化的延伸：巴西的热情奔放，阿根廷的浪漫和性感。德意志的严谨和耐力，英格兰的绅士与优雅…..</p>

<p>每一个人都有属于自己的世界杯。2006，你找到了属于你的世界杯吗？</p>

</body>

</html>

图2-3页面浏览效果

2．3 格式化文本

文本经常需要加粗、斜体、缩进等，这些都是文本的格式化。HTML提供了一些标签实现文本的格式化。这些标签包括<b>、<pre>、<address>等，下面分别介绍这些标签。

首先我们看一个实例，该实例通过标记设置了文本的格式。实例代码如下。

<html>

<body>

<b>中华人民共和国万岁(b标记）</b>

<br>

中华人民共和国万岁(strong标记）

</strong>

<br>

<big>

中华人民共和国万岁(big标记）

</big>

<br>

<em>

中华人民共和国万岁(em标记）

</em>

<br>

<i>

中华人民共和国万岁(i标记）

</i>

<br>

<small>

中华人民共和国万岁(small标记）

</small>

<br>

<sub>

中华人民共和国万岁(sub标记）

</sub>

<br>

<sup>

中华人民共和国万岁(sup标记）

</sup>

</body>

</html>

实例显示效果如图2-4所示。

图2-4 页面显示效果

上例中使用的标签的含义如表2-2所示。

表2-2 标记含义

标记标记含义<b>指定文本应以粗体渲染<strong>以粗体渲染文本<big>指定所含文本要以比当前字体稍大的字体显示<em>强调文本，通常以斜体显示<i>指定文本应以斜体显示<small>指定内含文本要以比当前字体稍小的字体显示<sub>说明内含文本要以下标的形式显示，比当前字体稍小<sup>说明内含文本要以上标的形式显示，比当前字体稍小

除了表2-2所示的标记可以用于设置文本的格式外，还有其他的标记同样可以实现一些特殊的功能，下面我们介绍这些标记。

<pre>标记

<pre>标记用于控制换行和空格，使得浏览器以固定宽度字体显示文本。下面实例演示了<pre>标记的用法。

<html>

<body>

<p>下面的文本使用了pre标记</p>

<pre>

for i = 1 to 10

print i

next i

</pre>

<p>下面的文本之前没有使用pre标记</p>

for i = 1 to 10

print i

next i

</body>

</html>

页面显示效果如图2-5所示。

图2-5 页面显示效果

从图2-5可以看出<pre>标记能够控制文本的换行和空格。<pre>标记也称为预格式化文本标记。

显示程序代码标记

经常需要在浏览器中显示计算机程序代码，html同样定义了显示程序代码的标记，使用这些标记使得程序代码能够以特殊格式显示。表2-3列出了这些标记以及其含义。

表2-3 显示程序代码标记

标记标记含义<code>表示代码<kbd>以定宽字体显示文本<tt>以固定宽度字体显示文本<samp>表示代码范例<var>定义程序变量，通常以斜体显示

下面的实例演示了上述标记的用法，实例的显示效果如图2-6所示。

<html>

<body>

<code>程序代码范例</code>

<br>

<kbd>Keyboard input 键盘输入</kbd>

<br>

<tt>Teletype text打印机字体</tt>

<br>

<samp>Sample text显示代码实例</samp>

<br>

<var>Computer variable显示程序变量</var>

<br>

<p>

<b>Note:</b> 以上标记通常用来显示程序代码</p>

</body>

</html>

表2-6 页面显示效果图

<address>标记

<address>标记表示特定信息，如地址、签名、作者、文档信息。

缩写和首字母缩略法

<abbr>表示缩写，<acronym>表示取首字母的缩写词，title属性表示被缩写的文本。

<dbo>标记

<bdo dir="rtl">表示文本显示的方向，dir=”rtl”表示文本将从右到左显示。下面的代码显示< bdo >标记的用法。

我们都是中国人

</bdo>

代码显示效果如图2-7所示。

图2-7 页面显示效果

<blockquote>标记

<blockquote>标记表示文本中的一段引用语，下面的代码使用了<blockquote>标记。

<html>

<body>

这是引用：

<blockquote>

床前明月光，疑是地上霜，举头望明月，低头思故乡。

</blockquote>

<p>床前明月光，疑是地上霜，举头望明月，低头思故乡。</p>

</body>

</html>

<del>标记和<ins>标记

<del>标记表示文本已经从文档中删除，<ins>标记表示插入到文档中的文本。下面代码演示这两个标记的用法。代码显示效果如图2-8所示。

<html>

<body>

<del>被删除的文本 </del>

<ins>插入的文本 </ins>

</body>

</html>

图2-8 页面显示效果

3 超链接

超链接是网页页面中最重要的元素之一。一个网站是由多个页面组成的，页面之间依据链接确定相互的导航关系。

网页中超链接的运用是当今网页设计中必不可少的元素，通过超链接可以使人们在不同网页之间来回转跳，使得网页生动起来。

链接标记<a>和<base>

<a> 标记表示超链接的起始或目的位置，由 <a> 与 </a> 所围的文字、图片等等可以成为一个链接。例如

增加学校

</a>

href="/schoolhome/jsp/Manager/SystemManager/AddSchool.html "，herf参数表示链接的网址。

当作为一外部链接时， href 所设定的是该链接所要链到的文件名称，若该文件与此 html 档不是同在一目录需要加上适当的路径，相对绝对皆可。

当作为一内部链接时， href 所设定的是该链接所要连到的同文件内参考点或指定文件的参考点，且不需要包括任何内容，只要加上结束标记 </a>便可以，例如

在上述代码中，there 是参考点，并需于其前加上符号 # 以作识别，参考点由下一个参数 name 事先于文件中埋下。name="hello"

这参数是为文件埋下参考点，作为被链接，不会被显示。所以说制作一个内部链接需要使用两次 <a> 链接标记。一个使用参数 name 事先于文件中埋下一参考点，另一个使用参数 href 链接到这个参考点。

target=" right "

设定链接被按了之后所要显示的视窗。可选值为： _blank， _parent， _self， _top，框架名称。target="框架名称" 运用于框架网页中，若设定则链接结果将显示在“框架名称”的框窗中，框窗名称是事先由框架标记命名。以下为参数的含义，关于框架的概念将在后面的章节中介绍。

target="_blank" 或 target="new"将链接的内容打开在新的浏览器窗口中。

target="_parent"将链接的内容当成文件的上一个画面。

target="_self"将链接的内容显示在当前窗口中。(默认值)

target="_top"将框架中链接的画面内容，显示在没有框架的视窗中。（即除去了框架）

<base>标记

<base>标记是一个链接基准标记，用以设置文件中所有链接标记的参数默认值。它只能适应于文件的开头部分，即标记<head> 与 </head> 之间。

<base>标记设置示例：<base href="http://www.microsoft.com/" target="_top">

href="http://www.microsoft.com/" 设定该网页中所有http文件及图片（包括相对路径链接及 <img> 图形标记等）的默认路径。一般相对路径链接及 <img> 图形标记等是默认以该网页所在的目录作为起点，若依这个例子，该文件中所有链接将会以 http://www.microsoft.com/ 作为起点，若其中有链接如 <a href="index.html">Back to Main Page</a> ，那么它将会链接到 Microsoft 的首页，这是因为相对路径已给 <base> 转成绝对的了。

target="_top" 设定该网页中所有链接被按之后结果所要显示的视窗，这样就不用分别为所有链接加上 target 参数，常应用于框架中。其设定与 <a> 链接中 target 参数相同。

4 图片标记

页面中插入图片可以起到美化的作用。插入图片的标记只有一个，<img>标记。

<img> 称图形标记，主要用来插入图形标记，主要用来插入图片于网页中。

<img>标记的实例如下：

src="/schoolhome/image/new_img/left_menu_logo_kanri.jpg " 表示图片来源，接受 .gif, .jpg 及 .png 格式，前两者通行已久，后者则由 96 年开始发展，png格式图片将取代前两者。若图片文件与该 html文件在同一目录则只需写上图片文件名称即可，否则必须加上正确的路径，相对路径或绝对路径。

属性设置“width=210 height=72”用于设定图片大小，宽度及高度一般采用象素作单位。这两个参数通常设为图片的真实大小，以免失真，若需要更改图片大小最好使用图像编辑工具。

除了上面的width属性和height属性外，还有hspace属性、vspace属性、border属性等其他属性，下面分别介绍这些属性的含义。

属性设置“hspace=5 vspace=5”用于设定图片边沿空白，以免文字或其它图片贴近。hspace 是设定图片左右的空间，vspace是设定图片上下的空间，高度采用pixels 作单位。

属性设置“border=0”用于设置图片边框厚度。

属性设置align="top"调整图片旁边文字的位置，你可以控制文字出现在图片的偏上方、中间、底部、左右等，可选值：top, middle, bottom, left, right，内定为 botom。

Netscape 还支持 texttop, baseline, absmiddle, absbottom属性，这些属性的含义如下：

texttop 表示图片和文字依顶线对齐，

baseline 表示图片对齐到目前文字行底线值，

absmiddle 表示图片对齐到目前文字行绝对中央，

absbottom 表示图片对齐到目前文字行绝对底部，（绝对底部是指它考虑到比如 y 、g、q 等字的下边）。

属性设置alt="Logo of PenPal Garden" 用以描述该图形的文字，若使用文字浏览器，由于不支持图片，这些文字将会代替图片被显示。若支持图片的浏览器，当鼠标移至图片上该文字也会显示。

2.5 表格标记

为了便于组织和管理页面中的其它标记元素以使得页面显示整齐有规律，我们可以使用表格标记。表格标记包括<table> <tr> <td> <th> <caption> 。

表格是用<table>标签定义的。表格被划分为行（使用<tr>标签），每行又被划分为数据单元格（使用<td>标签）。td表示“表格数据”（Table Data），即数据单元格的内容。数据单元格可以包含文本，图像，列表，段落，表单，水平线，表格等等。因此，<table> <tr> <td>这三个标记是定义表格的最重要的标记。

<table>是一个容器标记，要在网页中创建表格必须使用<table>标记开头，使用</table>标记结束。<tr>标记表示表格行。<td>标记表示表格列。

下面的实例演示了如何在网页中创建表格。实例代码如下所示，页面的浏览效果如图2-9所示。

<html>

<body>

<tr>

</tr>

</table>

<tr>

</tr>

</table>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

表2-9页面浏览效果

在实际应用中，可以通过设置表格的属性来控制表格的显示效果。<table>标记常见的属性设置如下例所示。

属性设置width="210" 用于设置表格宽度，接受绝对值（如 80）及相对值（如 80%）。

属性设置border="0" 用于设置表格边框的厚度，不同浏览器有不同的内定值。

属性设置cellspacing="0"用于设置或获取表格中单元格之间的空间总量。

属性设置cellpadding="0"用于设置或获取介于单元格边框和单元格内容之间的空间总量。

属性设置align="center"用于设置表格的摆放位置（水平），可选值为： left, right, center。

属性设置valign="top"用于设置表格内内容的对齐方式（垂直），可选值为： top, middle, bottom。

属性设置background="myweb.gif" 用于设置表格的背景图片，与 bgcolor 不要同用。

属性设置bgcolor="#cda9f5" 用于设置表格的底色，与 background 不要同用。

属性设置bordercolor="#CF0000" 用于设置表格边框颜色。

属性设置bordercolorlight="#00FF00"用于设置表格边框向光部分的颜色，只适用于 IE。

属性设置bordercolordark="#00FFFF"用于设置表格边框背光部分的颜色，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。

属性设置cols="2"表示表格列数目，只是让浏览器在下载表格时先画出整个表格而已。

<tr> 标记常见的属性设置如表2-4所示。

表2-4 <tr>标记常见属性

属性含义align内容的对齐方式（水平），可选值为： left, center, rightvalign内容的对齐方式（垂直），可选值为： top, middle, bottombgcolor背景颜色bordercolor列边框颜色bordercolorlight边框向光部分的颜色（只适用于 IE）bordercolordark边框背光部分的颜色，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效（只适用于 IE）

<td> 标记的常见属性如表2-5所示。

表2-5 <td >标记常见属性

属性属性含义width设置单元格的宽度，接受绝对值（如 80）及相对值（如 80%）height设置单元格高度colspan该单元格跨越的表格列数（相当于多列单元格合并）rowspan该单元格跨越的表格的行数（相当于多行单元格合并）align内容的对齐方式，可选值为：left, center, rightvalign储存格内容的对齐方式（垂直），可选值为：top, middle, bottom

<th>标记

<th>与<td>同样是标记一个单元格，唯一不同的是<th>所标记的单元格中的文字是以粗体出现，通常用于表格中的标题栏目。用它取代<td>的位置便可以，其参数设定和<td>一样。

当然也可以在<td>所标记的文字加上粗体标记便能达到同样效果。

<caption>标记

<caption>标记表示表格的标题，对表格的简单描述。下面的代码示例了<caption>标记的用法，页面的显示效果如图2-6所示。

<html>

<body>

<h4>

这个表格有标题：

</h4>

<caption>表格标题</caption>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

图2-6 页面显示效果

6 列表标记

HTML支持有序、无序和自定义列表，下面的代码为一个无序列表实例。

<html>

<body>

<h4>An Unordered List:</h4>

<ul>

<li>Coffee</li>

</ul>

</body>

</html>

下面的代码显示了一个有序列表。

<html>

<body>

<h4>An Ordered List:</h4>

<ol>

<li>Coffee</li>

</ol>

</body>

</html>

1．无序列表

无序列表是一个项目的序列。各项目前加有标记（通常是黑色的实心小圆圈）。

无序列表以<ul>标签开始。每个列表项目以<li>开始。

<ul>

<li>Coffee</li>

</ul>

在浏览器中显示如下：

l Coffee

l Milk

无序列表的项目中可以加入段落、换行、图像，链接，其他的列表等等。下面的例子样式了无序列表的不同类型，代码如下。

<html>

<body>

<h4>水果（列表前为圆）:</h4>

</ul>

<h4>水果（列表前为空心圆）:</h4>

</ul>

<h4>水果（列表前为方格）:</h4>

</ul>

</body>

</html>

页面显示效果如图2-7所示。

图2-7 页面浏览效果

2．有序列表

有序列表也是一个项目的序列。各项目前加有数字作标记。有序列表以<ol>标签开始。每个列表项目以<li>开始。

<ol>

<li>Coffee</li>

</ol>

在浏览器中显示如下：

1. Coffee

2. Milk

有序列表的项目中可以加入段落、换行、图像，链接，其他的列表等等。

下面的例子显示了有序列表的不同类型。HTML代码如下：

<html>

<body>

<h4>水果（列表前为数字）:</h4>

<ol>

</ol>

<h4>水果（列表前为大写字母）:</h4>

</ol>

<h4>水果（列表前为小写字母）:</h4>

</ol>

<h4>水果（列表前为大写罗马数字）:</h4>

</ol>

<h4>水果（列表前为小写罗马数字）:</h4>

</ol>

</body>

</html>

页面显示效果如图2-8所示。

图2-8 页面显示效果

3．自定义列表

自定义列表不是一个项目的序列，它是一系列条目和它们的解释。

有序列表以<dl>标签开始，自定义列表条目以<dt>开始，自定义列表的定义以<dd>开始。

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dd>White cold drink</dd>

</dl>

在浏览器中显示如图2-9所示。

图2-9 页面浏览效果

自定义列表的定义（标签<dd>）中可以加入段落、换行、图像，链接，其他的列表等等。

总结

Ø body标记是html文档中最基本的标记。

Ø 在html中文本可以显示为不同的格式，这些都可以通过不同的标记来实现。

Ø 表格是html中最重要的元素之一，创建表格最重要的标记包括<table>、<tr>、<td>等。

Ø 超链接<a>标记用于设置文字和图片的链接。

Ø 使用列表能够使得内容组织更加规范，在HTML中，我们可以使用无序列表、有序列表以及自定义列表。

作业

1．解释<tr><td><caption><br><b><p><pre>等标记的含义

2．使用表格在网页中显示10个同学的姓名以及他们语文、数学、英语的考试成绩

请添加内容