无涯教程-HTML - 基础

46 阅读3分钟

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>

这将产生以下输出-

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>

这将产生以下输出-

HTML 换行

每当您使用<br />换行元素时,其后的所有内容将从下一行开始。 此标签是一个空元素示例,您无需打开和关闭标签,因为它们之间没有任何内容。

<!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>

这将产生以下输出-

HTML 居中

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

<!DOCTYPE html>
<html>

<head> <title>Centring Content Example</title> </head>

<body> <p>This text is not in the center.</p>

  </span><span class="tag">&lt;center&gt;</span><span class="pln">
     </span><span class="tag">&lt;p&gt;</span><span class="pln">This text is in the center.</span><span class="tag">&lt;/p&gt;</span><span class="pln">
  </span><span class="tag">&lt;/center&gt;</span><span class="pln">

</body>

</html>

这将产生以下输出-

HTML 水平线

如,您可能想要在两个段落之间划一条线,如下面的示例所示-

<!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>

这将产生以下输出-

HTML 格式化

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

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

<!DOCTYPE html>
<html>

<head> <title>Preserve Example</title> </head>

<body> <pre> function testFunction( strText ){ alert (strText) } </pre> </body>

</html>

这将产生以下输出-

尝试使用相同的代码而不将其保留在<pre> ... </pre>标签内

HTML 不换行

假设您要使用短语"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 Example</title> </head>

<body> <p>An example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men."</p> </body>

</html>

这将产生以下输出-

参考链接

www.learnfk.com/html/html-b…