讲解

学到这里，你已经掌握 HTML 的核心知识。最后一章把散落各章的纪律汇总成一份可以贴在墙上的清单。写法规范方面：标签名和属性名一律小写（<DIV> 能运行但难看也不合惯例）；属性值用双引号包起来；每层嵌套缩进两格；布尔属性直接写名字（required、disabled），不必写 required="true"；文件保存为 UTF-8，head 里 <meta charset="UTF-8"> 永远放最前。这些规范不改变运行结果，但决定代码能否被团队和未来的你顺畅阅读。

结构质量方面：每页从 <!DOCTYPE html> 开始，html 带 lang，head 里 charset、viewport、title、description 一个不少；body 里语义化元素搭骨架（header/nav/main/article/section/footer），div 只做样式容器；一页一个 h1，标题层级不跳跃；图片必有 alt、必有宽高、首屏外 lazy；表单控件必有 label，button 写清 type。写完页面用 W3C 的校验器（validator.w3.org）过一遍，它能抓出未闭合标签、非法嵌套、重复 id 这类肉眼难查的错误。

性能与上线方面：CSS 放 head 里 link 引入（渲染前需要），JS 用 defer 或放 body 末尾（别阻塞渲染）；图片压缩后再上线、用 WebP/AVIF 等现代格式并配好回退；iframe 和大媒体 lazy 加载；内外链接检查一遍没有 404；最后在不同尺寸的手机和主流浏览器里真机过一遍。HTML 的世界还在演进——dialog 元素、details/summary、popover 属性这些原生能力正不断替代过去的 JS 组件方案，MDN（developer.mozilla.org）是你未来查证任何标签和属性的权威手册。教程到此结束，接下来：动手做三个真实页面，比再读三遍更有用。

示例

一份可以直接套用的页面检查骨架：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>具体、唯一的页面标题 | 站点名</title>
    <meta name="description" content="一两句话概括本页价值。" />
    <link rel="icon" href="/favicon.ico" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/main.js" defer></script>
  </head>
  <body>
    <a class="skip-link" href="#main">跳到主要内容</a>
    <header>……</header>
    <main id="main">
      <h1>页面主题</h1>
      <!-- 语义化结构、带 alt 的图片、有 label 的表单 -->
    </main>
    <footer>……</footer>
  </body>
</html>

上线前自查清单：

□ doctype、lang、charset、viewport、title、description 齐全
□ 一个 h1，标题层级不跳跃
□ 语义化元素搭骨架，无 div 汤
□ 所有 img 有 alt 和 width/height，首屏外 lazy
□ 表单控件都有 label，button 写了 type
□ W3C 校验器零错误
□ 手机窄屏与桌面宽屏各看一遍
□ 所有链接点开无 404

常见坑

  • 「能跑就行」的心态：浏览器容错极强，烂结构也能显示，但可维护性、SEO、无障碍全在暗处受损。规范是给未来投资。
  • 从不跑校验器：未闭合标签、重复 id 这类问题肉眼极难发现，validator.w3.org 三十秒就能扫完，上线前务必跑一遍。
  • 只在桌面 Chrome 里测试：窄屏溢出、Safari 差异、触摸点击区域太小，都是真机测试才能暴露的问题。
  • 学完不动手：HTML 是肌肉记忆型的技能，照着教程敲三遍不如独立做一个页面。给自己的兴趣做一个小站，是最好的毕业设计。

小结

小写、双引号、缩进、UTF-8 是写法纪律；doctype + 语义骨架 + 标题层级 + alt + label 是结构纪律；defer、图片优化、校验器、真机测试是上线纪律。带上这份清单，去写真正的页面吧——HTML 的世界欢迎你。