HTML - 基本标签


标题标签

任何文档都以标题开头。您可以为标题使用不同的大小。HTML 还具有六级标题,它们使用元素<h1>、<h2>、<h3>、<h4>、<h5><h6>。显示任何标题时,浏览器会在该标题之前添加一行,在该标题之后添加一行。

例子

<!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 ontime.<br />
         Thanks<br />
         Mahnaz</p>
   </body>
	
</html>

这将产生以下结果 -

内容居中

您可以使用<center>标签将任何内容放置在页面或任何表格单元格的中心。

例子

<!DOCTYPE html>
<html>

   <head>
      <title>Centring 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>标签内

不间断空格

假设您想使用短语“12 Angry Men”。在这里,您不希望浏览器将“12,Angry”和“Men”分成两行 -

An example of this technique appears in the movie "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&nbsp;Angry&nbsp;Men."</p>
   </body>
	
</html>

这将产生以下结果 -