Html 简明教程
HTML - Basic Tags
HTML 标签是用于定义文档结构的 HTML 的基本元素。它们是由尖括号（< 和 >）括起来的字母或单词。
HTML tags are the fundamental elements of HTML used for defining the structure of the document. These are letters or words enclosed by angle brackets (< and >).
通常，大多数 HTML 标签都是成对出现的，由一个开始标签和一个结束标签组成。开始标签标记一个元素的开始，而结束标签在标签名前面包含一个正斜线，表示该元素的结束。每个标签都有不同的意义，浏览器会读取这些标签并相应地显示它所包含的内容。
Usually, most HTML tags come in pairs, consisting of an opening tag and a closing tag. The opening tag marks the beginning of an element, while the closing tag, which includes a forward slash before the tag name, indicates the end of that element.. Each tag has a different meaning and the browser reads the tags and displays the contents enclosed by it accordingly.
例如，如果我们用段落 (<p></p>) 标签包裹一段文本，浏览器将其显示为一个单独的段落。在本教程中，我们将讨论 HTML 中的所有基本标签。
For example, if we wrap any text with in the paragraph (<p></p>) tag browser displays it as a separate paragraph. In this tutorial we will discuss all the basic tags in HTML.
Examples of HTML Basic Tags
在下面，我们使用适当的示例描述了 HTML 的所有基本标签，示例将有助于理解每个标签的作用。
Below we have described all the basic tags of HTML with proper example that will you to understand the role of each tags.
Heading Tag
标题标签用于定义文档的标题。你可以为标题使用不同的尺寸。HTML 还包含六个标题级别，其中使用元素 <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> 。当显示任一标题时，浏览器在该标题之前和之后各添加一行。
Heading tags are used to define headings of douments. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before and one line after that heading.
以下 HTML 代码演示了各种标题级别
Following HTML code demonstrates various levels of headings
<!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> 标记之间，如下面的示例所示。
The <p> tag offers a way to structure your text into different paragraphs which is essential for creating well-organized and readable web content. Each paragraph of text should go in between an opening <p> and a closing </p> tag as shown below in the example.
<!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 元素的一个示例，其中不需要开启和关闭标记，因为没有内容位于它们之间。
Whenever you use the <br /> element, anything following it starts from the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them.
<br /> 标记在字符 br 和正斜杠之间有一个空格。如果你省略此空格，旧浏览器将难以呈现换行符，而如果你错过了正斜杠字符而只使用了 <br>，在 XHTML 中则无效。
The <br /> tag has a space between the characters br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break, while if you miss the forward slash character and just use <br> it is not valid in 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> 标记将任何内容放置在页面或任何表单元格的中心。
You can use <center> tag to put any content in the center of the page or any table cell.
<!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 元素的一个示例，其中不需要开启和关闭标记，因为没有内容位于它们之间。
Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly. The <hr /> tag is an example of the empty element, where you do not need opening and closing tags, as there is nothing to go in between them.
以下示例在两个段落之间绘制了一条水平线。执行代码后，你可以看到一条直线将这两个段落分开。
Following example draws a horizontal line between two paragraphs. On executing the code, you can see a straight line dividing the two paragraphs.
<!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> 。
Sometimes, you want your text to follow the exact format of how it is written in the HTML document. In these cases, you can use the preformatted tag <pre>.
Pre 标记通常用于在文档中呈现可编程代码。开启 <pre> 标记和关闭 </pre> 标记之间的任何文本都将保留源文档的格式，这意味着如果你在两个字母之间添加一个新行字符，这将原样反映在文档中。
Pre tag is generally used to render programmable codes in document. Any text between the opening <pre> tag and the closing </pre> tag will preserve the formatting of the source document, Which means if you add new line character between two letter that will be reflected in the document as it is.
<!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”分隔在两行上。
Suppose, if you want to use the phrase "12 Angry Men." Here, you would not want a client browser to split the "12, Angry" and "Men" across two lines.
在以下情况中，您都不希望客户端浏览器拆分文本，则应该使用非断行空格实体 * * ，而不是使用普通空格。例如，当在段落中对 "12 Angry Men" 进行编码时，您应使用以下代码：
In cases, where you do not want the client browser to break text, you should use a nonbreaking space entity * * instead of a normal space. For example, when coding the "12 Angry Men" in a paragraph, you should use something similar to the following code
<!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>