HTML – 基本标签

预计阅读时间3 分钟 42 views

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

通常,大多数 HTML 标记都包含 Opening 和 Ending 标记。每个标签都有不同的含义,浏览器会读取标签并相应地显示其包含的内容。

例如,如果我们用段落(<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>标签之间,如下图所示 -

<!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 中无效。

<!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>标记将任何内容放在页面的中心或任何表格单元格中。

<!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> 标记从文档中的当前位置到右边距创建一条线,并相应地分隔该行。

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

<!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 中无效

保留格式

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

开始<pre>标记和结束</pre>标记之间的任何文本都将保留源文档的格式。

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

如果在不使用 <pre>...</pre> 标记的情况下执行相同的代码。该功能将在没有预定义格式的情况下显示,如下所示 -

function testFunction( strText ){ alert (strText) }

不间断空格

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

这种技术的一个例子出现在电影“12个愤怒的男人”中。

如果不希望客户端浏览器破坏文本,则应使用不间断空格实体 而不是普通空格。例如,在对段落中的“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   Angry Men."</p>
</body>
</html>

在执行上述示例时,它将显示以下句子:此技术的一个示例在电影“12 Angry Men.”中出现两次。由于我们在 12 和 men 之间添加了 3 个 “ ” 字符,因此第二次可以观察到三个空格。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

6 + 16 =

分享此教程

HTML – 基本标签

或复制链接

内容