HTML基础教程（3）——HTML标签

浏览数：19 / 时间：2015年06月09日

HTML 中最重要的标签是定义标题、段落和换行的标签。

学习 HTML 最好的方式就是边学边做实验。我们为您准备了很好的 HTML 编辑器。使用这个编辑器，您可以任意编辑一段 HTML 源码，然后单击 TIY 按钮来查看结果。

实例

一个简单的 HTML 文件

这个例子是一个很简单的 HTML 文件，使用了尽可能少的 HTML 标签。它向您演示了 body 元素中的内容是如何被浏览器显示的。

<html>
<body>
<p>body元素中的内容会显示在浏览器中。</p>
</body>

</html>

简单的段落

此例演示：段落元素中的文字如何被浏览器显示。

<html>
<body>

<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>

<p>段落元素由 p 标签定义。</p> 

</body>
</html>

标题

标题使用 <h1> 至 <h6> 标签进行定义。<h1> 定义最大的标题。<h6> 定义最小的标题。

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

HTML 会自动在标题前后添加一个额外的折行。

段落

段落使用 <p> 标签进行定义。

<p>This is a paragraph</p>
<p>This is another paragraph</p>

HTML 会自动在段落前后添加一个额外的空行。

不要忘记关闭标签

您可能注意到了，在编写段落时可以不带有 </p> 标签：

<p>This is a paragraph
<p>This is another paragraph

上面的例子在大多数浏览器中都可以工作，但是不要依赖这种做法。HTML 未来的版本不允许省略任何结束标签。

通过结束标签来关闭 HTML 是一种经得起未来考验的 HTML 编写方法。清楚地标记某个元素在何处开始，并在何处结束，不论对您还是对浏览器来说，都会使代码更容易理解。

换行符

当你打算结束一行，而又不想开始一个新段落时，<br> 标签就派上用场了。无论你将它置于何处，<br> 标签都会产生一个强制的换行。

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

<br> 标签是空白标签，由于关闭标签没有任何意义，因此它没有类似 </br> 的终止标签。

<br> 还是 <br />

您会越来越多地发现 <br> 与 <br /> 很相似。

由于 <br> 没有结束标签，它也就违反了未来的 HTML 的规则之一，即所有的元素都必须关闭。

把这个标签写为 <br /> 是经得起未来考验的做法，XHTML 和 XML 都接受在打开的标签内部来关闭标签的做法。

HTML 注释

注释标签用于在 HTML 源码中插入注释。注释会被浏览器忽略。您可以使用注释对您的代码进行解释，这么做在以后的日子里会对您的代码编辑产生帮助。

<!-- This is a comment -->

注意：左括号后需要写一个惊叹号，右括号前就不需要了。

对 HTML 元素的重新认识

每个 HTML 元素都有一个元素名（比如 body、h1、p、br）
开始标签是被尖括号包围的元素名
结束标签是被尖括号包围的斜杠和元素名
元素内容位于开始标签和结束标签之间
某些 HTML 元素没有内容
某些 HTML 元素没有结束标签

基本的注意事项 - 有益的提示

当您写 HTML 文本的时候，你永远也没法确定这些文本在另一台显示器上是如何显示的。一些人使用大显示器，而另一些使用小的。当用户调整视窗的分辨率时，这些文本就会被重新格式化。所以不要通过在文本中添加空行和空格的办法在你的编辑器中格式化文本。

HTML 会裁掉文本中所有的空格。任何数量的空格都被按一个空格计数。另外，在 HTML 中，一个空行也被当作一个空格。

使用空的段落标记 <p> 去插入一个空行是个坏习惯。用 <br> 标签代替它！（但是不要用 <br> 标签去创建列表。不要着急，您将在稍后的篇幅学习到 HTML 列表。）

您也许已经注意到了，在没有结束标签 </p> 的情况下，<p> 标签依然可以正常工作。不过不要这样做！下一个版本的 HTML 将不允许忽略任何的结束标签。

HTML 会自动地在某些元素前后添加一个额外的空行，比如段落、标题元素前后。

使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）。

更多实例

更多的段落

本例演示段落元素的某些缺省的行为。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<body>

<p>
这个段落
在源代码中
包含许多行
但是浏览器
忽略了它们。
</p>

<p>
这个段落
在源代码       中
包含   许多行
但是      浏览器
忽略了  它们。
</p>

<p>
段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。
</p>

</body>
</html>

查看结果：

这个段落在源代码中包含许多行但是浏览器忽略了它们。 

这个段落在源代码 中包含 许多行但是 浏览器忽略了 它们。 

段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。

“诗歌”问题

本例演示 HTML 格式化的某些问题。

<html>

<body>

<p>
   My Bonnie lies over the ocean.
    My Bonnie lies over the sea.
   My Bonnie lies over the ocean.
  Oh, bring back my Bonnie to me.
</p>

<p>注意，浏览器忽略了源代码中的格式。</p>

</body>
</html>

查看结果：

My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me. 

注意，浏览器忽略了源代码中的格式。

折行

本例演示在 HTML 文档中折行的使用。

<html>

<body>

<p>
To break<br>lines<br>in a<br>paragraph,<br>use the br tag.
</p>

</body>
</html>

查看结果：

To break
lines
in a
paragraph,
use the br tag.

标题

本例演示在 HTML 文档中显示标题的标签。

<html>

<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

<p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p>

</body>
</html>

查看结果：

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。

水平线

本例演示如何插入水平线。

<html>

<body>
<p>hr 标签定义水平线：</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
</body>
</html>

查看结果：

hr 标签定义水平线：

这是段落。

这是段落。

这是段落。

隐藏的注释

本例演示如何在 HTML 源代码中插入隐藏的注释。

<html>

<body>

<!--这里的注释不会显示出来-->
<p>这是常规的段落。</p>

</body>
</html>

查看结果：

这是常规的段落。

基本的 HTML 标签

标签	描述
<html>	定义 HTML 文档。
<body>	定义文档的主体。
<h1> to <h6>	定义标题 1 至标题 6。
<p>	定义段落。
<br>	插入折行。
<hr>	定义水平线。
<!-->	定义注释。