HTML文档结构

HTML文档结构定义网页的整体框架，是每个网页的基础模板。

文档基础结构

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>

声明必须位于文档最顶部，告知浏览器使用HTML5标准解析页面。

html标签

HTML

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

属性	说明
`lang`	页面语言：`zh-CN`（中文）、`en`（英文）

head标签

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

必备meta标签

HTML

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

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

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

常用meta标签

HTML

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

<!-- 搜索引擎索引 -->
<meta name="robots" content="index, follow">

<!-- IE兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- 缓存控制 -->
<meta http-equiv="Cache-Control" content="no-cache">

引入资源

HTML

<head>
    <!-- 外部CSS -->
    <link rel="stylesheet" href="style.css">

    <!-- 网站图标 -->
    <link rel="icon" href="favicon.ico">

    <!-- 预加载 -->
    <link rel="preload" href="font.woff2" as="font">

    <!-- 内部样式 -->
    <style>
        body { margin: 0; }
    </style>

    <!-- 外部JS（head中较少用） -->
    <script src="app.js" defer></script>
</head>

body标签

body包含所有可见内容。

HTML

<body>
    <!-- 页面可见内容 -->
    <header>头部</header>
    <main>主内容</main>
    <footer>底部</footer>

    <!-- 页面底部JS -->
    <script src="main.js"></script>
</body>

注释

HTML

<!-- 这是HTML注释 -->
<!--
    多行注释
    用于说明代码逻辑
-->

完整模板

HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="页面描述">
    <meta name="keywords" content="关键词">
    <title>页面标题</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>导航栏</nav>
    </header>

    <main>
        <h1>页面标题</h1>
        <p>页面内容</p>
    </main>

    <footer>
        <p>版权信息</p>
    </footer>

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

要点总结

DOCTYPE必写：确保浏览器以标准模式渲染
charset优先：字符编码meta需放在head最前
viewport配置：响应式页面必备
lang属性：帮助浏览器正确解析内容

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