【HTML 入门必看】拆解网页骨架核心：、html、head、body 到底有什么用？

原创已于 2025-10-07 21:51:18 修改 · 369 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-10-07 20:54:25 首次发布

作为前端开发的基石，HTML 文档的结构逻辑决定了网页的 “身份识别”“内容承载” 和 “浏览器兼容性”。但很多初学者在写 HTML 时，常忽略 <!doctype html>、、、这四个核心组成部分的真正作用 —— 比如为什么要加 <!doctype html>？lang=“zh-CN” 是不是可有可无？里的内容为什么不显示在页面上？
本文将以 “零基础能懂” 的视角，逐一拆解这四个核心元素的语法规则、核心功能和实际应用场景，帮你彻底搞懂 HTML 文档的底层结构逻辑，避免 “只会复制代码，不懂原理” 的尴尬，为后续学习 CSS、JavaScript 打下扎实基础。

一、`<!doctype html>`

<!doctype html> 是 HTML 文档的第一行代码，但它并非 HTML 标签，而是 “文档类型声明”—— 相当于给浏览器递了一份 “说明书”，明确告知 “当前文档是 HTML5 格式，请用 HTML5 标准解析我”。语法特性：不区分大小写（、<!doctype HTML> 均有效），必须放在<html> 标签之前，且前面不能有任何空格、换行或注释。

二、`<html>`

<html> 标签是 HTML 文档的根元素（Root Element），也称为 “根标签”。它是所有其他 HTML 元素的直接或间接父容器，意味着一个标准的 HTML 文档中，除了最开头的 <!doctype html> 声明外，所有其他标签（如 <head>, <body>, <div>, <p> 等）都必须嵌套在和之间。

<!doctype html>
<html lang="zh-CN">
  <!-- 所有其他 HTML 元素都必须在这里 -->
  <head>
    <!-- 元信息部分 -->
  </head>
  <body>
    <!-- 可见内容部分 -->
  </body>
</html>

三、`<head>`

<head> 标签是 HTML 文档的头部区域，它位于 <html> 标签内部，紧跟在开始标签 <html> 之后，并在 <body> 标签之前。如果说<body>是网页的 “身体” 或 “前台展示区”（包含所有用户可见的内容，如文字、图片、按钮），那么<head>就是网页的 “大脑” 或 “后台配置中心”。它包含了所有不直接显示在页面主体的 “元数据（Metadata）”—— 即描述数据的数据。

<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 所有元数据都在这里 -->
    <meta charset="UTF-8">
    <title>我的网页标题</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <!-- 用户可见的内容在这里 -->
    <h1>你好，世界！</h1>
  </body>
</html>

四、`<body>`

标签是一个双标签，必须成对出现。

<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 元信息部分 -->
    <meta charset="UTF-8">
    <title>我的网页</title>
  </head>
  <body>
    <!-- 所有用户可见的内容都在这里 -->
    <h1>欢迎来到我的网站！</h1>
    <p>这是一个段落。</p>
    <img src="image.jpg" alt="一张图片">
    <a href="https://www.example.com">这是一个链接</a>
    <button>点击我</button>
  </body>
</html>