讲解

每一张规范的 HTML 页面都长着同一副骨架。第一行 <!DOCTYPE html> 是文档类型声明，它不是标签，而是告诉浏览器「请按 HTML5 标准解析本页」。缺少它浏览器会进入「怪异模式」（Quirks Mode），用上世纪的兼容规则渲染，页面表现会变得不可预测——所以这一行永远要写，且必须出现在文件最开头。

声明之后是 <html> 根元素，页面的一切内容都在它内部，它的 lang 属性声明页面语言（中文页面写 zh-CN），搜索引擎和屏幕阅读器都依赖它。<html> 里固定分成两块：<head> 放「关于页面的信息」——编码、标题、样式表引用等，这些内容不直接显示在页面上；<body> 放「页面要显示的内容」——标题、段落、图片等一切可见元素。

写 HTML 还要分清三个概念：标签（tag）是 <p> 这样的标记符号；元素（element）是从开始标签到结束标签的完整整体，比如 <p>你好</p>；属性（attribute）写在开始标签里，为元素附加信息，比如 <p class="intro"> 里的 class。元素可以嵌套——<body> 里放 <p>，<p> 里放 <strong>——但嵌套必须完整：先开的后关，像括号一样层层匹配，浏览器遇到 <b><i>文字</b></i> 这种交叉嵌套会自行「修复」，结果未必是你想要的。

示例

<!DOCTYPE html>
<!-- 文档类型声明：使用 HTML5 标准模式 -->
<html lang="zh-CN">
  <!-- 根元素，lang 声明页面语言 -->
  <head>
    <!-- 头部：页面的元信息，不直接显示 -->
    <meta charset="UTF-8" />
    <title>页面标题</title>
  </head>
  <body>
    <!-- 主体：所有可见内容 -->
    <h1>欢迎</h1>
    <p class="intro">这是一个 <strong>结构规范</strong> 的页面。</p>
  </body>
</html>

注意缩进：每嵌套一层就缩进两个空格。缩进不影响渲染，但能让嵌套关系一目了然，是所有团队通用的约定。

常见坑

  • 漏写 ：浏览器退回怪异模式，盒模型、表格渲染都会出诡异问题，排查半天才发现是少了第一行。
  • 交叉嵌套：<b><i>...</b></i> 是非法的，必须先关 </i> 再关 </b>。浏览器虽会容错，但修复结果不可控。
  • 把可见内容写进 ：head 里放 <p> 会被浏览器强行挪到 body，文档结构全乱。可见内容只能放 body。
  • 忘记 lang 或写错值：中文页面写 lang="zh-CN"。留空或写错会影响屏幕阅读器的发音和搜索引擎的语言判断。

小结

doctype 声明 + html 根元素 + head/body 两分结构是每页的固定骨架；元素层层嵌套、先开后关，属性写在开始标签里。下一章深入 head 里那些「看不见却很重要」的元数据。