HTML基本标签：面向完全初学者的指南与示例

原创

admin 4个月前 (08-07) 阅读数 17 #HTML

HTML基本标签：面向完全初学者的指南与示例

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

通常，大多数HTML标签包含一个开始标签和一个结束标签。每个标签都有不同的含义，浏览器会读取这些标签并相应地显示它们所包含的内容。

例如，如果我们用段落标签（<p></p>）包裹任何文本，浏览器会将其显示为独立的段落。在本教程中，我们将讨论所有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>标签提供了一种将文本结构化为不同段落的方式。每个文本段落应该放在开始标签<p>和结束标签</p>之间。

示例

以下示例演示了段落标签的使用，这里我们定义了3个段落：

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

换行标签

<br>标签用于在文本中插入换行符。它强制其后的内容出现在下一行。当您希望文本换行到新行而不开始新段落时，使用此标签。

注意：<br>标签是一个空标签，不需要结束标签。

示例

以下示例演示了换行标签的使用：

<!DOCTYPE html>
<html>
<head>
   <title>换行示例</title>
</head>
<body>
   <p>你好<br>你按时提交了作业。<br>谢谢<br>玛娜兹</p>
</body>
</html>

居中标签

在HTML中，应该使用CSS而不是已弃用的标签来处理对齐问题。先前用于将内容居中对齐到网页的<center>标签在HTML5中已被弃用。您可以使用CSS的text-align: center;属性来居中对齐文本或内联元素。

示例

以下示例演示了如何使用CSS使段落居中：

<!DOCTYPE html>
<html>
<head>
   <title>居中内容示例</title>
   <style>
      .center-text {
         text-align: center;
      }
   </style>
</head>
<body>
   <p>这段文本不在中间。</p>
   <p class="center-text">这段文本在中间。</p>
</body>
</html>

水平线标签

<hr>标签用于在页面上插入一条水平线。它通常用于视觉上分隔内容部分。

注意：与<br>标签类似，<hr>标签也是一个空标签，不需要结束标签。

示例

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

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

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

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

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

保留格式标签

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

示例

以下示例演示了<pre>标签的使用。这里，我们显示一些代码，这些代码应保持与<pre>标签内编写的格式完全相同的格式：

<!DOCTYPE html>
<html>
<head>
   <title>保留格式示例</title>
</head>
<body>
   <pre>
      function testFunction( strText ){
         alert (strText)
      }
   </pre>
</body>
</html>

不间断空格

不间断空格可以防止自动换行，使用 实体显示。

假设您想使用短语"12 Angry Men."在这里，您不希望浏览器将"12, Angry"和"Men"分成两行：

这种技术的一个例子出现在电影"12 Angry Men"中。

在您不希望客户端浏览器断开文本的情况下，您应该使用不间断空格实体 而不是普通空格。例如，在段落中编码"12 Angry Men"时，您应该使用类似于以下代码的内容：

示例

以下示例演示了 实体的使用：

<!DOCTYPE html>
<html>
<head>
   <title>不间断空格示例</title>
</head>
<body>
   <p>这种技术的一个例子出现在电影"12 Angry Men"中。</p>
   <p>这种技术的一个例子出现在电影"12&nbsp;&nbsp;&nbsp;Angry Men"中。</p>
</body>
</html>

执行上述示例后，它将两次显示句子：这种技术的一个例子出现在电影"12 Angry Men"中。由于我们在12和men之间添加了3个" "字符，第二次，您可以观察到三个空格。

列表标签

<ul>和<ol>标签创建无序列表和有序列表，而要显示列表项，则使用<li>标签。

示例

以下示例演示了列表标签的使用：

<!DOCTYPE html>
<html>
<head>
   <title>列表标签示例</title>
</head>
<body>
  <h2>无序列表</h2>
  <ul>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
  </ul>
  <h2>有序列表</h2>
  <ol>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
  </ol>  
</body>
</html>