下载掌阅APP，畅读海量书库
立即打开
由于 HTML 是网页制作的标准语言，所以无论什么样的网页制作软件都提供直接以HTML的方式来制作网页的功能。即使用所见即所得的编辑软件来制作网页，最后生成的也都是HTML文件。HTML语言有时可以实现所见即所得工具所不能实现的功能。
为了文本排列的整齐和清晰，文字段落之间经常用<P>和</P>来做标签。段落的开始由<P>来标记，段落的结束由</P>来标记，</P>是可以省略的，因为下一个<P>的开始就意味着上一个<P>的结束。<P>标签还有一个属性 align，它用来指明字符显示时的对齐方式，一般值有center、left和right三种。下面是一个段落标签<P>的实例，在浏览器中的预览效果如图2-1所示。
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>段落</title>
</head>
<body>
<table width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="240" align="center">
<p>五台山位于山西省忻州市五台县境内，位列中国佛教四大名山之首。五台山位于山西省东北部，与浙江普陀山、安徽九华山、四川峨眉山共称“中国佛教四大名山”。</p>
<p>五台山所在的山西处于黄土高原，其中五座高峰，山势雄伟，连绵环抱，方圆达250公里，总面积592.88平方公里。</p>
<p>五台山最低处海拔仅624米，最高处海拔达3061.1米，为山西省最高峰。台顶雄旷，层峦叠嶂，峰岭交错，挺拔壮丽，大自然为其造就了许多独特的景观。<BR>
</p>
</p>
</td>
</tr>
</table>
</body>
</html>
<font></font>是一对很有用的标签，它可以对输出文本的字号大小、颜色进行随意改变，这些改变主要是通过对它的两个属性size和color的控制来实现的。size属性用来改变字体的大小，color属性则用来改变文本的颜色。
用于文字大小设置的标签是font，font有一个属性size，通过指定size属性可以设置字号大小。可以在size属性值之前加上“+”、“−”字符，来指定相对于字号初始值的增量或减量。其属性及属性值如表2-1所示。
下面是一个文字标签<font>的实例，在浏览器中的预览效果如图2-2所示。
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文本</title>
</head>
<body>
<table width="90%" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td><font color="#CC3300" size="+3" face="宋体"><b>18号字体</b></font></td>
</tr>
<tr>
<td><font color="#669900" size="+4" face="宋体"><i>24号字体</i></font></td>
</tr>
<tr>
<td><font color="#00CCFF" size="+5" face="宋体"><b>36号字体</b></font></td>
</tr>
</table>
</body>
</html>
HTML文件中最重要的应用之一就是超链接，超链接是一个网站的灵魂，Web上的网页是互相链接的，单击被称为超链接的文本或图形就可以链接到其他页面。超文本具有的链接能力，可层层链接相关文件，这种具有超级链接能力的操作，即称为超级链接。超级链接除了可链接文本外，也可链接各种媒体，通过它们可享受丰富多彩的多媒体世界。
<a href=""></a>
本标签对应的属性“href”无论如何都是不可缺少的，可在标签对之间加入需要链接的文本或图像。href的值可以是URL形式，即网址或相对路径，也可以是Mailto 形式，即发送E-mail形式。
对于第一种情况，其语法为<a href="URL"></a>，这就能创建一个超文本链接了，例如，<a href="123.html">大家好！</a>。对于第二种情况，其语法为<a href="Mailto: Email"></a>，这就创建了一个自动发送电子邮件的链接，Mailto:后边紧跟想要发送的电子邮件的地址（即E-mail 地址），例如，<a href="Mailto:ll@163.com">发电子邮件给我吧！</a>。
此外，<a href=""></a>还具有 target 属性，此属性用来指明浏览的目标帧。如果不使用target属性，当浏览者单击了链接之后将在原来的浏览器窗口中浏览新的HTML文档。若target的值等于_blank，单击链接后将会打开一个新的浏览器窗口来浏览新的HTML文档，例如，<a href="123.html" target="_blank">大家好！</a>。超链接标签的属性说明如表2-2 所示。
下面是一个超链接标签< href>的实例，在浏览器中的预览效果如图2-3 所示。
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>超链接</title>
</head>
<body>
<table width="90%" border="0" align="center" cellpadding="0" cellspacing= "0">
<tr>
<td height="40">
<p><a href="123.html" target="_blank">大家好！</a></p>
<p><a href="Mailto:28607100@QQ.com">发电子邮件给我吧！</a></p>
</td>
</tr>
</table>
</body>
</html>
<img>标签并不是真正地把图像加入到HTML文档中，而是将标签对的src属性赋值，这个值是图像文件的文件名，当然包括路径，这个路径可以是相对地址，也可以是绝对地址。实际上，<img>标签就是通过路径将图像文件嵌入到文档中。所谓相对路径是指所要链接或嵌入到当前HTML文档的文件与当前文件的相对位置所形成的路径。假如HTML文件与图像文件（文件名假设是tu.gif）在同一个目录下，则可以将代码写成<img src="tu.gif">；如图像文件放在当前的HTML文档所在目录的一个子目录（子目录名假设是images）下，则代码应为<img src="images/ tu.gif">。
src 属性在<img>标签中是必须赋值的，是标签中不可缺少的一部分。除此之外，<img>标签还有alt、align、border、width和height属性。
align属性是图像的对齐方式。
border属性是图像的边框，可以取大于或者等于0的整数，默认单位是像素。
width和Height属性是图像的宽和高，默认单位也是像素。
alt属性是当鼠标移动到图像上时显示的文本。
下面是一个图像标签<img>的实例，在浏览器中的预览效果如图2-4所示。
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图像</title>
</head>
<body>
<img src="images/tu.gif" alt=" 图像 " width="400" height="304" border="0"align="middle">
</body>
</html>
表格标签对于制作网页是很重要的，现在很多网页都使用多重表格。利用表格可以实现各种不同的布局方式，而且可以保证当浏览者改变页面字号大小的时候保持页面布局，还可以任意地进行背景和前景颜色的设置。<table></table>标签用来创建表格，表格标签的属性和用途如表2-3所示。
下面是一个表格标签<table>的实例，在浏览器中的预览效果如图2-5所示。
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格</title>
</head>
<body>
<table width="400" border="1" align="center" cellpadding="4" cellspacing="1"
bordercolor="#996600">
<tr>
<td height="30" align="center" bgcolor="#FFFF66">省份</td>
<td align="center" bgcolor="#66CCFF">山东</td>
<td align="center" bgcolor="#66CCFF">广东</td>
<td align="center" bgcolor="#66CCFF">浙江</td>
<td align="center" bgcolor="#66CCFF">江苏</td>
</tr>
<tr>
<td height="30" align="center" valign="middle" bgcolor="#FFFF66">城市</td>
<td align="center" bgcolor="#FFCCFF">济南</td>
<td align="center" bgcolor="#FFCCFF">广州</td>
<td align="center" bgcolor="#FFCCFF">杭州</td>
<td align="center" bgcolor="#FFCCFF">南京</td>
</tr>
</table>
</body>
</html>
