目录导航

下面我们来了解HTML文档的文档结构。下图显示了HTML文档的一般结构。

body标记之间的文本(<body></body>)将在浏览器中显示。

HTML文档的基本结构

以下示例显示了HTML文档的基本结构。

<!DOCTYPE html>
<html>
<head>
    <title>HTML教程标题</title>
</head>
<body>

    <h1>这是主标题</h1>
    <p>这是一个段落</p>
    <p>这是另一个段落</p>

</body>
</html>

打开Windows记事本之类的文本编辑器。输入上面的HTML代码或直接复制粘贴。
键入/复制后,将上面文另存为文件:index.htmindex.html。然后在Web浏览器中打开保存的HTML文档。在浏览器中打开输出网页显示如下:

在上述HTML文档结构示例中:

  • DOCTYPE声明将文档类型定义为HTML
  • <html></html>之间的文本描述了HTML文档。
  • <head></head>之间的文本提供有关HTML文档的信息。
  • <title></title>之间的文本为HTML文档提供了标题。
  • <body></body>之间的文本描述了可见的页面内容,即在浏览器中显示的内容。
  • <h1></h1>之间的文本描述了主标题。
  • <p></p>之间的文本描述了一个段落。

HTML文档结构的其他示例

以下是一些HTML示例,它们显示了其他HTML文档的一般结构。

<!DOCTYPE html>
<html>
<head>
    <title>HTML教程标题</title>
</head>
<body>

    <h1>这是H1标题</h1>
    <p>这是一个段落</p>
    <h2>这是h2标题</h2>
    <p>这是另一个段落</p>

</body>
</html>

上面的HTML代码产生的输出如下:

HTML文档结构的其他示例

下面是另一个HTML示例,显示了HTML文档的基本结构:

<!DOCTYPE html>
<html>
<head>
    <title>HTML教程标题</title>
</head>
<body>

    <h1>这是H1标题</h1>
    <p>这是一个段落</p>
    <h2>这是H2标题</h2>
    <p><a href="http://www.xntutor.com/html/">HTML教程</a></p>
    <h3>这是H3标题</h3>
    <p><a href="http://www.xntutor.com/java/">Java教程</a></p>

</body>
</html>

上面的HTML代码产生的输出如下: