HTML基本结构

每个HTML文档都遵循固定的基本结构，由DOCTYPE声明和三大核心标签组成。

文档基本模板

HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

DOCTYPE声明

HTML

<!DOCTYPE html>

DOCTYPE必须写在文档第一行，告知浏览器以HTML5标准模式解析页面。

html标签

HTML

<html lang="zh-CN">
    <!-- 整个页面内容 -->
</html>

属性	说明
`lang`	页面语言，`zh-CN`为中文，`en`为英文

head标签

head包含页面元信息，不显示在页面中。

必备配置

HTML

<head>
    <!-- 字符编码 -->
    <meta charset="UTF-8">

    <!-- 视口设置（响应式必备） -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 页面标题 -->
    <title>页面标题</title>
</head>

SEO相关meta

HTML

<meta name="keywords" content="关键词1,关键词2">
<meta name="description" content="页面描述，不超过150字">
<meta name="author" content="作者名称">
<meta name="robots" content="index,follow">

引入外部资源

HTML

<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico">
<script src="app.js" defer></script>

body标签

body包含所有可见内容。

HTML

<body>
    <header>头部导航</header>
    <main>主内容区域</main>
    <footer>底部信息</footer>

    <script src="main.js"></script>
</body>

结构层级示意

text

<!DOCTYPE html>
└── <html>
    ├── <head>
    │   ├── <meta>
    │   ├── <title>
    │   └── <link>/<script>/<style>
    └── <body>
        ├── <header>
        ├── <main>
        ├── <footer>
        └── <script>

要点总结

DOCTYPE必写：确保标准模式渲染
charset优先：字符编码放在head最前
viewport配置：响应式页面必备
lang属性：指定页面语言便于浏览器处理

📝 发现内容有误？点击此处直接编辑