1. 首页
  2. HTML 菜鸟教程
  3. HTML - 基本标签

HTML - 基本标签

HTML 标签是用于定义文档结构的 HTML 的基本元素。这些是用尖括号（< 和 >）括起来的字母或单词。

通常，大多数 HTML 标签都是成对的，由开始标签和结束标签组成。开始标签表示元素的开始，而结束标签（在标签名称之前包含正斜杠）表示该元素的结束。每个标签都有不同的含义，浏览器会读取标签并相应地显示其包含的内容。

例如，如果我们在段落 （<p></p>） 标签中换行任何文本，浏览器会将其显示为单独的段落。在本教程中，我们将讨论 HTML 中的所有基本标签。

HTML 基本标签示例

下面我们用适当的示例描述了 HTML 的所有基本标签，这些标签将让您了解每个标签的作用。

标题标签

标题标签用于定义标题。您可以为标题使用不同的尺寸。HTML 还有六个级别的标题，它们使用元素 <h1>、<h2>、<h3>、<h4>、<h5> 和 <h6>。在显示任何标题时，浏览器会在该标题之前添加一行，在该标题之后添加一行。

以下 HTML 代码演示了各种级别的标题

<!DOCTYPE html><html><head>
   <title>标题示例</title>
</head>
<body>
   <h1>这是标题 1/h1>
   <h2>这是标题 2</h2>
   <h3>这是标题 3</h3>
   <h4>这是标题 4</h4>
   <h5>这是标题 5</h5>
   <h6>这是标题 6</h6>
</body>
</html>

段落标签

<p> 标签提供了一种将文本结构为不同段落的方法，这对于创建组织良好且可读的 Web 内容至关重要。每段文本都应介于开头 <p> 和结尾 </p> 标签之间，如下图所示。

<!DOCTYPE html><html><head>
   <title>段落示例</title></head><body>
   <p>这是正文的第一段。</p>
   <p>这是正文的第二段。</p>
   <p>这是正文的第三段。</p>
</body></html>

换行符标签

每当使用 <br /> 元素时，它后面的任何内容都会从下一行开始。此标签是空元素的一个示例，其中不需要开始和结束标签，因为它们之间没有任何内容。

<br /> 标签在字符 br 和正斜杠之间有一个空格。如果省略此空格，较旧的浏览器将无法呈现换行符，而如果您缺少正斜杠字符而仅使用 <br>则它在 XHTML 中无效。

<!DOCTYPE html><html><head>
   <title>换行示例</title></head><body>
   <p>
     你好 <br /> 你准时到了。<br />
      谢谢<br /> 雷军  </p>
</body></html>

 

居中内容

您可以使用 <center> 标签将任何内容放在页面的中心或任何表格单元格中。

<!DOCTYPE html>
<html>
<head>
<title>居中内容示例</title>
</head>
<body>
<p>这段文字不在中心.</p>
<center>
<p>这段文字在中心.</p>
</center>
</body>
</html>

 

水平线

水平线用于直观地分解文档的各个部分。 <hr> 标签创建一条从文档中的当前位置到右边距的线，并相应地分隔该行。<hr /> 标签是空元素的一个示例，其中不需要开始和结束标签，因为它们之间没有任何东西可以插入。

以下示例在两个段落之间绘制一条水平线。在执行代码时，您可以看到一条直线将两个段落分开。

<!DOCTYPE html><html><head>
   <title>水平线示例</title></head><body>
   <p>
      这是第一段，应该在上面  </p>
   <hr />
   <p>
      这是第二段，应该在底部   </p>
</body></html>

保留格式

有时，您希望文本遵循其在 HTML 文档中的编写方式的确切格式。在这些情况下，您可以使用预先格式化的标签<pre>。

Pre 标签通常用于在文档中呈现可编程代码。开始 <pre> 标签和结束 </pre> 标签之间的任何文本都将保留源文档的格式，这意味着如果您在两个字母之间添加新的行字符，这些字符将按原样反映在文档中。

<!DOCTYPE html><html><head>
   <title>保留格式示例</title></head><body>
   <pre>
      这
            文本
                  是 
                     预格式
   </pre>
</body></html>

不间断空格

假设，如果你想使用“12个愤怒的人”这个短语。在这里，您不希望客户端浏览器将“12，愤怒”和“男人”拆分为两行。

如果您不希望客户端浏览器破坏文本，则应使用不间断空格实体 &nbsp; 而不是普通空格。例如，在对段落中的“2个愤怒的男人”进行编码时，应使用类似于以下代码的内容

<!DOCTYPE html>
<html>
<head>
<title>不间断空格示例</title>
</head>
<body>
<p>
出现了此技术的一个示例
在电影《12个        愤怒的男人》中
</p>
<p>
出现了此技术的一个示例
在电影《12个&nbsp;&nbsp;&nbsp;&nbsp;愤怒的男人》中。"
</p>
</body>
</html>
请查看我们完整的 HTML 标签参考，以了解有关 HTML 中存在的其他标签的更多信息。
<< HTML - 编辑器 HTML - 元素 >>