HTML 基本结构

1 代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关关教程 tuto.dushare.cn</title>
</head>

<body>
Hello,HTML。
</body>

2 代码说明

<!DOCTYPE html> 声明文档版本为HTML5。HTML4及以前版本主要用于PC端，HTML5开始支持移动端。

<html lang="en"> HTML文档的根结点，后续内容嵌套在该结点中。语言为英文，中文可设置为：zh、zh-CN。经常不在此处设置语言。

<head> 文档头部，其中包含其它节点，如：标题、字符集。

<title> 设置文档标题。

<body> 设置文档内容。

3 基本特点

开始标记与结束标记

大多数标签需开始标记与结束标记，成对出现，例如：

少部分标签只有开始标记，没有结束标记，也称为自闭合标签。

另一种写法，结尾处加斜杠：

HTML5规范不建议加斜杠。

树状结构

整个HTML文档是树状结构；

<html>节点作为根结点（第1级），其中包含两个子节点<head>（第2级）、<body>（第2级）；

<head>节点包含三个子节点：两个<meta>（第3级），一个<title>（第3级）；

<body>节点目前无子节点，后续开发页面，会继续在其中加入多级子节点。

大家来找茬

下面各段代码，找出其中错误，本文末尾有答案。

错误代码1

<html>

<head>
    <meta charset="UTF-8">
    <title>关关教程 tuto.dushare.cn</itle>
</head>

<body>
Hello,HTML。
</body>

</html>

错误代码2

<html>

<head>
    <meta charset="UTF-8">
    <title>关关教程 tuto.dushare.cn</title>
</head>

《body>
Hello,HTML。
</body>

</html>

错误代码3

<html>

<head>
    <meta charset="UTF-8">
    <title>关关教程 tuto.dushare.cn</title>
</head>

<body>
Hello,HTML。
</html>
</body>

找茬答案

错误代码1

</itle>结束标记与开始标记名称应一致，拼写错误，改为</title>

错误代码2

《body>标记中出现中文括号，改为英文括号<body>

错误代码

</html>放到了</body>的前面，父子节点嵌套关系错误，需移到</body>的后面。

注意事项

有些错误当前可能不影响页面的显示，但要求正确与尽量规范，不然总会有真正影响页面显示的时候。

❮上一节 HTML Hello 下一节 HTML 基本原理❯

第01章 HTML入门

HTML 基本结构

1 代码示例

2 代码说明

3 基本特点

html教程