HTML 标签整理（图片、超链接、文字标签等）

HTML是 Hyper Text Markup Language 的缩写，是制作网站所需的语言之一。HTML 主要利用标签这一概念来创建网页文档，本文希望将制作网站所需的标签集中整理在一起。

由于标签种类繁多，难以逐一详细介绍，因此可以通过本文从整体上了解 HTML 有哪些标签，以及它们的结构。

HTML 的概念

HTML 的结构

使用 HTML 标签时需要了解的一点是，一般编程语言对大小写比较敏感，而标签不区分大小写，因此使用起来相对容易。

另外，即使出错也不会产生致命错误，因此可以认为 HTML 是一种难度相当低的语言。

所有标签都以 < 符号开始，以 > 符号结束，而且即使输入多个空格，也只会显示一个空格。标签的基本格式为 <标签名称 属性="属性值"> ~ </标签名称>。

本文将按照这一思路，把各个标签的说明写在 HTML 标签格式中。

文档相关标签

​

文档相关标签

▣ 设置文档边距（topmargin, leftmargin） - <body topmargin="0" leftmargin="0"> 创建没有边距的页面</body>

▣ 设置背景颜色（bgcolor） - <body bgcolor="颜色"> 将背景颜色设为指定的颜色。 </body>

▣ 设置背景图片（background） - <body background="文件名.jpg"> 图片文件和网页文档必须位于同一目录下。否则还需要指定路径。 </body>

▣ 换行（br, p） -

<body>

通常，在文字处理文档中，<br>

按 Enter 键就会跳到下一行，但<br>

HTML 文档使用名为 br 的标签<br>

来实现换行。而 p 标签 <p>

​

可以在换行时比普通换行多留出一行空白。

</body>

文字相关标签

文字相关标签

▣ 显示粗体文字（b） - <b> 在文字前加入 b 标签，就可以将文字显示为粗体。 </b>

▣ 调整字体大小（font size） - <font size="1~7"> 可以将文字大小指定为 1 到 7 之间的值来调整大小。 </font>

<font size="12pt"> 也可以用 point 单位指定文字大小。使用点数单位通常可以指定更广的范围，并进行更细致的调整></font>

▣ 更改字体（font - face） - <font size="2" face="Gulim"> 可以在字体部分指定 Gungsuh、Batang、Gulim、Dotum 等各种字体。</font>

▣ 更改文字颜色（color） - <font size="3" color="blue"> 在 font 标签中添加 color 属性，就可以将文字改为所需的颜色。不过，颜色名称必须用英文输入。 </font>

▣ 添加空格（&nbsp ; ） - 想在文字之间添加空格时， &nbsp ; 可以通过插入它来添加空格，效果与按空格键相同。而在 HTML 中，空格键输入只会生效 1 次。（另外，p 和 ; 必须紧挨着写。本文中如果原样输入标签就无法显示，因此特意将它们分开书写。）

图片相关标签

图片相关标签

▣ 插入图片（src） - <img src="图片文件名.jpg"> 如果网页文档和图片位于同一目录下，只需输入文件名；如果目录不同，还必须输入路径。

▣ 显示图片边框（border） - <img src="图片文件名.jpg" border="5"> 可以在图片插入标签后使用 border 指定图片边框的粗细。

▣ 图片对齐（align） - <img src="图片文件名.jpg" align="left"> 在 Align 属性中输入 left（左侧）、right（右侧）、middle（居中）、baseline（基线）、top（顶部）、bottom（底部）、texttop（文字顶部）、absmiddle（文字中央）、absbottom（文字底部），即可调整图片的对齐位置。

▣ 调整图片间距（hspace, vspace） - <img src="图片文件名.jpg" hspace="10" vspace="10"> 可以通过图片文件名后输入的 hspace（水平方向）、vpace（垂直方向）的值来调整间距。

▣ 鼠标悬停时显示文字（alt） - <img src="图片文件名.jpg" alt="文字"> 如果希望鼠标移到图片上时显示文字，可以在 alt 属性中填入所需的文字。

超链接相关标签

超链接相关标签

▣ 添加超链接（a href） - <a href="链接地址"> 像这样在 a href 标签属性中填入所需的链接地址，就可以创建鼠标点击后跳转到该地址的超链接。</a>

▣ 为图片添加超链接 - <a href="链接地址"><img src="GK Library.jpg"> 在超链接标签后加入图片标签，就可以创建点击图片后跳转到指定地址的按钮。</a>

▣ 鼠标悬停在图片上时显示说明文字（title） - <a href="链接地址" title="说明文字"><img src="GK Library.jpg"> 可以通过超链接标签属性栏中的 title 属性添加按钮的说明。</a>

▣ 在新窗口中打开（target-_blank） - <a href="链接地址" target="_blank"><img src="GK Library.jpg"> 在 target 属性中填入 _blank，就可以创建在新窗口中打开页面的按钮</a>

▣ 设置超链接颜色（link, vlink, alink） - <body link="blue" vlink="red" alink="green"> 在 body 标签中加入 link（超链接颜色）、vlink（已打开过的链接颜色）、alink（正在打开的链接颜色），即可指定链接颜色。</body>

▣ 跳转到当前页面内的特定位置（#, name） - 制作单页滚动形式的网站时，这个标签非常实用。

<a href="#a"> 跳转到 A 位置</a>

<a name="a"> A </a>

表格相关标签

HTML 表格标签示例

▣ <table> - 这是用于开始一个表格的基本标签。

▣ <thead> - 这个标签用于对表格的表头部分进行分组，可以选择使用。

▣ <tbody> - 这个标签用于对表格的主体部分进行分组，主要在使用 <thead> 或 <tfoot> 时配合使用。

▣ <tfoot> - 这个标签用于对表格的表尾部分进行分组，可以选择使用。

▣ <tr> - 这个标签用于定义表格中的行。

▣ <th> - 这个标签用于定义表格的表头单元格，该单元格的内容默认以粗体显示。

▣ <td> - 这个标签用于定义表格的数据单元格。

▣ <caption> - 这个标签用于提供表格的标题或说明，必须紧接在 <table> 标签之后。

应用示例代码后，会出现大致如下的表格。

GK Library 示例表格

以上整理了制作网站时使用的 HTML 标签。只要充分掌握文档、文字、图片、超链接和表格这些类别的标签，制作基础网站就不会有太大问题。

当然，HTML 在 IT 领域属于基础中的基础，但对于刚开始接触编程或网页相关工作的人来说，先掌握 HTML 有助于打牢基础。