2.4 主体标记之间的常用标记
2.4.1 文字与段落标记
1．标题标记
<H1> </H1>:正文的第一级标题标记。此外，还有第二、三、四、五、六级标题标记，分别为<H2> </H2>、<H3> </H3>、<H4> </H4>、<H5> </H5>、<H6> </H6>。级别越高，文字越小。
六级标题的实例代码如下，它们在浏览器中的显示效果如图2-6所示。
<html>
<head>
<title>标题标记</title>
</head>
<body>
<！--下面是标题标记对-->
<h1>标题h1</h1>
<h2>标题h2</h2>
<h3>标题h3</h3>
<h4>标题h4</h4>
<h5>标题h5</h5>
<h6>标题h6</h6>
</body>
</html>
图 2-6
Hn 可以有对齐属性，ALIGN=#，“#”表示Left（标题居左）、Center（标题居中）和Right（标题居右）。例如：
<h2 align=center>标题2</h2>
2．段落标记
<p> </p>:
说明：p是英文单词“Paragraph”(段落)的缩写。<p>标记符用来划分段落，不同的段落之间会自动换行并有一定的间距。使用p标记符时，可以有多种属性，比较常用的是Align=#, “#”，可以是Left、Center或Right,其含义分别为：左对齐、居中或右对齐。
<pre> </pre>
说明：pre标记符是预格式化标记符。浏览器按照编辑文档时<pre>和</pre>标记符之间字符的位置，将内容毫无变动地显示出来。换句话说，在html文档中写的时候是什么样，在浏览器中显示的就是什么样。
3．换行符标记
<br> 换行符标记，可插入一个简单的换行符。<br> 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。请注意，<br> 标签只是简单地开始新的一行，而当浏览器遇到 <p> 标签时，通常会在相邻的段落之间插入一些垂直的间距。
4．字体标记
<font> </font>:字体标记，用于规定文本的字体、字体尺寸、字体颜色。属性有face（字体）、size（大小）、color（颜色）。
（1）字体大小：HTML文件可以有7种字号，1号最小，7号最大，默认字号为3，可以用（FONT SIZE=字号）设置默认字号。设置文本的字号有两种方法：一种设置绝对字号，（FONT SIZE=字号）；另一种是设置文本的相对字号，（FONT SIZE=±N）。使用第二种方法时，“+”号表示字体变大，“−”表示字体变小。
（2）字体颜色：字体的颜色用（FONT color=#）进行设置，#可以是6位十六制数，分别指定红、绿、蓝的值，也可以使用16种标准颜色。
例如，设置“字体大小和颜色”网页的代码如下：
<HTML> <HEAD> <TITLE>字体大小和颜色</TITLE> </HEAD> <BODY> <FONT SIZE=5 COLOR=#FF0000>字体大小和颜色</FONT>字体大小和颜色<BR> <FONT SIZE=2 COLOR=#0000FF>字体大小和颜色</FONT>字体大小和颜色<BR> <BLINK>闪烁的文本</BLINK> </BODY> </HTML>
网页显示效果如图2-7所示。
图 2-7
5．字体风格
字体风格分为物理风格和逻辑风格两种。物理风格用来指定字体，主要有<B>黑体、<I>斜体、<U>下划线、<TT>打字机体等，逻辑风格主要有<EM>强调、<STRONG>特别强调等。如表2-1所示。“字体风格”网页设置代码如下，显示效果如图2-8所示。
表2-1 文本风格修饰标记
图 2-8
<html> <head> <title>各种字体风格</title> </head> <body> <B>各种字体风格</B> 各种字体风格<BR> <I>各种字体风格</I> 各种字体风格<BR> <U>各种字体风格</U> 各种字体风格<BR> <TT>各种字体风格</TT> 各种字体风格<BR> </body> </html>
6．添加注释
由于站点需要经常更新，而且制作时往往是几个人合作，所以创建的页面必须要易于维护，而添加注释是增强文件可读性的重要手段。HTML中的注释是由开始标记符<!—和结束标记符-->组成的。这两个标记符中间的内容就是注释的内容，它们不会在浏览器中显示。该标记可以添加在HTML代码的任何位置。下面是一个使用注释的例子，源代码如下：
<html> <head> <title>添加注释，但注释不会被显示</title> </head> <body> <!--注释：这是一次添加注释的测试，本内容将不会在页面中显示--> 愉快的网页学习 </body> </html>
添加注释的网页显示效果如图2-9所示。
图 2-9
2.4.2 列表标记
列表分为项目列表和编号列表，在什么情况下用到这两个列表呢？读者在门户网站上浏览新闻时，在网站的新闻列表中，新闻标题前会出现一个小圆点，而有的是有序号的数字，前者表示的是项目列表，后者表示的是编号列表。学习列表的表示，通过代码可以表现出列表是编号列表还是项目列表。
1．项目列表
所谓项目列表是指在列表中没有顺序可言，表里的每项都是相同的。项目列表的语法分两部分，格式如下：
<!--下面一行表示项目列表--> <ul> <li>表项一</li> <li>表项二</li> <li>表项三</li> </ul>
分析上面代码，决定项目的是<ul>，而<li>只是里面的一列表项。如果想列出更多的表项，那么就在<ul></ul>里加表项<li></li>即可。
项目列表用法举例如下：
<html> <head> <title>项目列表</title> </head> <body> <ul> <li>HTML+CSS完全自学手册 <li>HTML+CSS完全自学手册 <li>HTML+CSS完全自学手册 <li>HTML+CSS完全自学手册 </ul> </body> </html>
在项目列表符中间加了4行带列表项的文字，默认状态下的项目列表显示的效果在文本前用圆点表示，即在每项前面显示一个小圆点。网页显示的效果如图2-10所示。
图 2-10
2．编号列表
与编号列表对应的是有序列表，表项里不用设置就可以自动按顺序排列，初学者乍一看很神奇，现在来揭开其神秘面纱。编号列表用<ol></ol>表示有顺序，里面表项符与项目列表一样的，只代表一个表项而已，在多个表项中，系统自动按顺序排列，语法代码如下：
<!--下面一行表示编号列表-->
<ol>
<li>表项一</li>
<li>表项二</li>
<li>表项三</li>
</ol>
与项目列表相差只是在<ol>上。下面示例的内容与项目列表是一样的（表项都是一样），不同的是用<ol></ol>标记对取代了<ul></ul>标记对。
编号列表用法。
<html> <head> <title>编号列表</title> </head> <body> <ol> <li>HTML+CSS完全自学手册</li> <li>HTML+CSS完全自学手册</li> <li>HTML+CSS完全自学手册</li> <li>HTML+CSS完全自学手册</li> </ol> </body> </html>
与项目列表显示效果不同的是，编号列表在表项前用数字序号表示，如图2-11所示。
图 2-11
提示
项目列表是无序列表，编号列表则是有序列表。项目与编号只相差一个字母，但是有明显的不同。在编号列表或项目列表中还可以用其他编号或符号取代数字或圆点，“<ol type=#>? </ol>”中#可以有A、a、I、i、1等；<ul type=#>?</ul>中#可以有circle（圆圈）square（正方形）disc（圆点）等。
2.4.3 图像标记
<IMG />：它是图像标记。用来加载图像与GIF动画。在网页中加载GIF动画的方法与加载图像的方法一样。GIF动画文件的扩展名也是.gif，文件格式是GIF89A格式。制作GIF动画的软件有很多，例如Fireworks和Ulead GIF Animator 5.0等。
SRC：它是依附于其他标记的一个属性，依附于<IMG />标记时，用来导入图像与GIF动画。其格式如下：
<IMG SRC="图像文件的目录与文件名" />
提示
属性除了src外，还有width（宽）、height（高）、alt（替代文本）等。
设置背景平铺图像：使用<BODY>标记中的BACKGROUND属性，可设置网页的平铺背景图像，其格式如下：
<BODY BACKGROUND="图像文件名或URL">
2.4.4 超链接标记
1．在同一个网页中建立链接的HTML标记
在同一个网页文件中建立链接，需要做以下工作。
（1）在文件的前面需要列出链接的标题文字，它们相当于文章的目录。同时将这些文字与相应的锚记名称（即定位名）建立链接。所谓“锚记名称”是指网页中能被链接到的一个特定位置。建立链接时，要在锚记名称前加一个“#”符号，其格式如下:
<A HREF="#锚记名称">标题名字</A>
（2）为被链接的内容起一个名字，该名字叫锚记名称，锚记名称的定义要放在相应标题对应的内容前面。其格式如下。
<A NAME="锚记名称"></A>
2．建立电子邮件链接
如果将HREF属性值指定为“MAILTO:电子邮件地址”，就可以获得电子邮件链接的效果。例如，使用下面的HTML代码可以设置电子邮件的超链接。
<A HREF="MAILTO:shenda@yahoo.com">邮箱地址：shenda@yahoo.com </A>
当浏览网页的用户单击了指向电子邮件的超级链接后，系统将自动启动邮件客户程序（对于安装了Windows 98/2000以上操作系统的计算机，默认时启动Outlook Express），并将指定的邮件地址填写到“收件人”栏中，用户可以编辑并发送该邮件。
如果是第一次启动Outlook Express，会要求进行软件设置。
3．链接到其他页面中的锚点
从一个文件链接到另外一个文件，与同一个文件中的链接的格式有所不同。那么，能不能使用一个命令，链接到其他文件的指定位置呢？
在网页中建立文字链接的HTML代码是：<A HREF=“被链接的文件名或URL”文字</A>。只要将“被链接的文件名或URL”替换为“要链接的文件名或URL加#加锚记名称>”即可。例如，<A HREF=“HTMLABC.htm#TT”>天坛</A>标记，即可建立一个到HTMLABC.htm网页文档中的“天坛”锚点的链接。
2.4.5 表格标记
表格标记在网页中可以表现出Word中的表格效果，即在Word中要表现的表格效果可以在网页中显示，就需要HTML中的表格标记。表格标记不仅仅用于表现表格中的效果，还可以用表格来给网页布局，布局中的表格是不需要表格中的边框的，故需要对表格进行设置。
表格标记是HTML常用的标签，代表在网页中插入一张表格。表格标记是用table标签对表示的标签对，其语法形式如下：
<!--设置表格标记 --> <table></table>
表格常常是有行和列的，那么，如何在表格内表示行和列呢？这又要另外的代码：<tr>标签对表示表行，每出现一个<tr></tr>代表表格的一行；<th>标签对表示表头，表头是在表格上显示下面列的；<td>标签对表示表元，表元就是在表格中显示的每一方格(即单元格)。下列代码说明表格的基本语法。
<html>
<head>
<title>表格的基本语法</title>
</head>
<body>
<!--设置表格和边框-->
<table border=1>
<!--设置表格中的表头 -->
<tr>
<!--设置表格中的表项 -->
<th>表头一</th>
<th>表头二</th>
</tr>
<tr>
<td>表元一</td>
<td>表元二</td>
</tr>
</table>
</body>
</html>
上面代码在<table>标签对中包括两个行表示符：<tr>标签对，表示两行。在第一个行表示符中包括了表头符，在第二个行表示符中包括了表元表示符。为了显示表格效果，在表格属性中加入了border边框，效果如图2-12所示。
图 2-12
提示
在<table>中的<tr>、<th>、<td>是常用的，<th>可以省略，三者都在<table></table>中，不能交叉。它们各自的属性说明如表2-2～表2-4所示。
表2-2 表格<table>的属性
表2-3 行<tr>的属性
表2-4 单元格<td>的属性
2.4.6 多媒体标记
1．添加背景音乐
使用<BGSOUND>标记可以在网页中插入背景音乐。<BGSOUND>标记可以放在<HTML>与</HTML>标记内的任何地方。引导音乐文件的属性是SRC，其格式如下：
<BGSOUND SRC ="文件目录与文件名或URL">
2．在网页中插入Flash动画及其他视频
在网页中直接包含多媒体对象最常用的标记是<EMBED>标记。
（1）<EMBED>标记：使用<EMBED>标记，不仅可以在网页中插入Flash动画，还可以使用下载并显示由插件支持的其他多媒体应用程序。使用<EMBED>标记可以在网页中插入Flash对象，同添加背景音乐的方法一样，<EMBED>标记可以放在<HTML>与</HTML>标记内的任何地方。引导Flash动画文件的属性是SRC，格式如下：
<EMBED SRC ="文件目录与文件名或URL">
当浏览器遇到<EMBED>标记时，会加载其中指定的文件并确定它的MIME类型。MIME信息告知浏览器正在下载的文件类型，然后浏览器查找与该MIME类型一致的插件。如果有就使用；如果没有则会显示一条错误信息，并且提示用户下载该插件。
（2）<EMBED>标记还可以使网页中包含JavaApple、视频和音频等多媒体及其他文件。当浏览器遇到<EMBED>标记时，会加载相应的文件，并根据该标记包含属性的值来显示它。<EMBED>标记的属性见表2-5。
表2-5 <EMBED>标记的属性
3．滚动标记
<marquee>…</marquee>滚动标记又称为跑马灯标记。<marquee>标记的属性见表2-6。
表2-6 <marquee>标记的属性
