Html 简明教程

HTML - Basic Tags

HTML 标签是用于定义文档结构的 HTML 的基本元素。它们是由尖括号(< 和 >)括起来的字母或单词。

通常,大多数 HTML 标签都是成对出现的,由一个开始标签和一个结束标签组成。开始标签标记一个元素的开始,而结束标签在标签名前面包含一个正斜线,表示该元素的结束。每个标签都有不同的意义,浏览器会读取这些标签并相应地显示它所包含的内容。

例如,如果我们用段落 (<p></p>) 标签包裹一段文本,浏览器将其显示为一个单独的段落。在本教程中,我们将讨论 HTML 中的所有基本标签。

Examples of HTML Basic Tags

在下面,我们使用适当的示例描述了 HTML 的所有基本标签,示例将有助于理解每个标签的作用。

Heading Tag

标题标签用于定义文档的标题。你可以为标题使用不同的尺寸。HTML 还包含六个标题级别,其中使用元素 <h1>, <h2>, <h3>, <h4>, <h5>, and <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>

Paragraph Tag

<p> 标记提供了一个将文本组织为不同段落的方法,这对于创建组织良好且可读的 Web 内容非常重要。文本的每个段落应包含在开启的 <p> 和关闭的 </p> 标记之间,如下面的示例所示。

<!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>

Line Break Tag

每当你使用 <br /> 元素时,任何跟在其后的内容都从下一行开始。此标签是 empty 元素的一个示例,其中不需要开启和关闭标记,因为没有内容位于它们之间。

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

<!DOCTYPE html>
<html>

<head>
   <title>Line Break Example</title>
</head>

<body>
   <p>
      Hello <br /> You are on time.<br />
      Thanks<br /> Mahnaz
   </p>
</body>

</html>

Centering the Content

你可以使用 <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>

Horizontal Lines

水平线用于在视觉上中断文档的各个部分。 <hr> 标记从文档中的当前位置创建一条线到右页边距,并相应地断开该线。 <hr /> 标记是 empty 元素的一个示例,其中不需要开启和关闭标记,因为没有内容位于它们之间。

以下示例在两个段落之间绘制了一条水平线。执行代码后,你可以看到一条直线将这两个段落分开。

<!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>

Preserve Formatting

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

Pre 标记通常用于在文档中呈现可编程代码。开启 <pre> 标记和关闭 </pre> 标记之间的任何文本都将保留源文档的格式,这意味着如果你在两个字母之间添加一个新行字符,这将原样反映在文档中。

<!DOCTYPE html>
<html>

<head>
   <title>Preserve Formatting Example</title>
</head>

<body>
   <pre>
      This
            text
                  is
                     pre-formatted.
   </pre>
</body>

</html>

Nonbreaking Spaces

假设您想要使用下列短语: "12 Angry Men." 在此情况下,您肯定不希望客户端浏览器将“12, Angry”和“Men”分隔在两行上。

在以下情况中,您都不希望客户端浏览器拆分文本,则应该使用非断行空格实体 * * ,而不是使用普通空格。例如,当在段落中对 "12 Angry Men" 进行编码时,您应使用以下代码:

<!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;&nbsp;Angry
      Men."
   </p>
</body>

</html>