HTML – 基本标签
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 个 “ ” 字符,因此第二次可以观察到三个空格。