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 Angry
Men."
</p>
</body>
</html>