HTML - 基本标签

上一个

下一个

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

通常，大多数的HTML 标记包含一个开始标记和一个结束标记。每个标记有不同的含义，浏览器会读取这些标记，并根据标记将包含在标记中的内容相应地显示出来。

例如，如果我们在段落 (<p></p>) 标记中包装任何文本，浏览器会将它显示为单独的一个段落。本教程中，我们将讨论所有 HTML 中的基本标记。

标题标记

标题标记用于定义文档的标题。可以为标题使用不同的尺寸。HTML 还具有六级标题，使用元素 <h1>, <h2>, <h3>, <h4>, <h5>, 以及 <h6>。在显示任何标题时，浏览器会在该标题的前后各添加一行。

示例

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

<!DOCTYPE html>
<html>
<head>
   <title>Heading Example</title>
</head>
<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>
</body>
</html>

段落标记

<p> 标记提供了一种将文本组织成不同段落的方法。每一段文本应放在开始标记 <p> 和结束标记 </p> 之间。

示例

以下示例演示了段落 (<p>) 标记的使用，此处我们定义了 3 个段落 −

<!DOCTYPE html>
<html>
<head>
   <title>Paragraph Example</title>
</head>
<body>
   <p>Here is a first paragraph of text.</p>
   <p>Here is a second paragraph of text.</p>
   <p>Here is a third paragraph of text.</p>
</body>
</html>

换行标记

无论何时您使用 <br /> 元素，紧随其后的任何内容都从下一行开始。此标记是空元素的一个示例，您不需要开始标记和结束标记，因为在它们之间没有内容。

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

示例

以下示例演示了中断 (<br />) 标记的使用 −

<!DOCTYPE html>
<html>
<head>
   <title>Line Break Example</title>
</head>
<body>
   <p>Hello<br /> You delivered your assignment on time.<br />
      Thanks<br /> Mahnaz</p>
</body>
</html>

居中标记

<center> 标记将文本、图像或其他 HTML 元素对齐到网页的中间。

注意：<center> 标记在 HTML5 中已弃用。您可以使用 CSS text-align 属性将元素居中。

示例

以下示例演示了<center> 标记的使用。此处，我们在居中对齐方式中显示第二段落

<!DOCTYPE html>
<html>
<head>
   <title>Centering Content Example</title>
</head>
<body>
   <p>This text is not in the center.</p>
   <center>
      <p>This text is in the center.</p>
   </center>
</body>
</html>

水平规则标记

水平规则 (<hr>) 标记显示一条水平线。水平线在视觉上将文档的各个部分分隔开来。<hr> 标记从文档中的当前位置到右页边距创建一个线条，并相应地中断线条。

示例

以下示例在两个段落之间绘制了一条水平线 −

<!DOCTYPE html>
<html>
<head>
   <title>Horizontal Line Example</title>
</head>
<body>
   <p>This is paragraph one and should be on top</p>
   <hr />
   <p>This is paragraph two and should be at bottom</p>
</body>
</html>

在执行上述示例时，您会看到一条直线将两个段落分开。

<hr /> 标记是空元素的一个示例，您不需要开始标记和结束标记，因为在它们之间没有内容。

<hr /> 元素在字符 hr 和正斜杠之间有一个空格。如果您省略此空格，较旧的浏览器将难以呈现水平线，而如果您省略正斜杠字符而仅使用 <hr>，在 XHTML 中则无效。

保留格式标记

<pre> 标签用于保留格式。每当您想要在网页上以与在 HTML 文档中编写时完全相同的格式显示内容时，都可以使用 <pre> 标签。它保留了源代码的格式，包括换行和缩进。

示例

以下示例演示了如何使用 <pre> 标签。在此，我们正在显示一段代码，其格式应与在 <pre> 标签内编写的内容完全相同 -

<!DOCTYPE html>
<html>
<head>
   <title>Preserve Formatting Example</title>
</head>
<body>
   <pre>
      function testFunction( strText ){
         alert (strText)
      }
   </pre>
</body>
</html>

function testFunction( strText ){
 alert (strText)
}

不换行空格

不换行空格可防止自动换行，并且使用   实体显示。

假设您想使用短语 “愤怒的男人 12”。 在这里，您不希望浏览器将“愤怒”和“男人”分成两行 -

此技术的示例出现在电影“愤怒的男人 12”中。

在您不希望客户端浏览器中断文本的情况下，您应该使用不换行空格实体   而不是普通空格。例如，在段落中对 “愤怒的男人 12” 进行编码时，您应该使用类似于以下代码的内容 -

示例

以下示例演示了如何使用   实体 -

<!DOCTYPE html>
<html>
<head>
   <title>Nonbreaking Spaces Example</title>
</head>
<body>
   <p>An example of this technique appears in the movie "12 Angry Men."</p>
   <p>An example of this technique appears in the movie "12&nbsp;&nbsp;&nbsp;Angry Men."</p>
</body>
</html>

执行以上示例后，它将两次显示以下句子：此技术的示例出现在电影“愤怒的男人 12”中。 由于我们在 12 和 men 之间添加了 3 个 “ ” 字符，因此第二次，您可以看到三个空格。

列表标记

<ul> 标记和 <ol> 标记创建无序列表和有序列表，并且若要显示列表项，则使用 <li> 标记。

示例

以下示例演示了如何使用列表标记 -

<!DOCTYPE html>
<html>
<head>
   <title>Listing Tags Example</title>
</head>
<body>
  <h2>Unordered list</h2>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <h2>Ordered list</h2>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>  
</body>
</html>

打印页面

下一步