HTML 通用容器与链接：从 body、div、a 到语义化页面

旧 HTML 笔记常把 body 背景色、链接颜色和 div 的默认换行行为当成主要知识。现在更重要的是明确每个区域代表什么、链接要去哪里、键盘和辅助技术能否理解它，并把外观交给 CSS。

body 是页面内容根，不是样式配置表

一个正常 HTML 文档只有一个 body，承载页面可见内容。旧式 bgcolor、background、text、link、vlink 等展示属性不应用于新代码；用 CSS 自定义属性、主题类或设计令牌控制颜色和背景。背景若传达信息，应同时提供可读文本，不要把文字只烘焙进背景图。

<body class='site-shell'>
  <header>
    <a class='skip-link' href='#main'>跳到主要内容</a>
    <a href='/' aria-label='个人博客首页'>豪哥的个人博客</a>
  </header>
  <nav aria-label='主导航'>
    <a href='/blog/front/'>前端文章</a>
  </nav>
  <main id='main'>
    <article>
      <h1>语义化页面结构</h1>
      <p>结构表达内容关系，样式由 CSS 控制。</p>
    </article>
  </main>
  <footer><small>持续记录工程实践</small></footer>
</body>

选语义元素，div 只做无专用语义的分组

div 是通用分组容器，本身不表示导航、文章、标题或按钮。若区域承担明确职责，优先使用 header、nav、main、article、section、aside、footer 等语义元素；section 通常应有描述主题的标题。只有在没有更合适元素、确实需要布局或脚本钩子时才用 div。

class 可重复地标记一组元素，id 应在文档中唯一，适合片段跳转、表单关联和脚本定位。不要为了 CSS 选择器把每个元素包进多层容器；也不要把普通 div 加上点击事件伪装成链接或按钮。导航使用带 href 的 a，触发当前页面操作使用 button，两者的键盘行为和浏览器能力不同。

链接写目的地，锚点写可理解文本

a 的 href 表示目的地，可以是站内相对地址、完整 URL 或同页片段。片段跳转目标应有唯一、稳定的 id；不要再用过时的 name 锚点。链接文案应说明去向，例如“阅读 HTML 图像指南”，避免孤立的“点这里”。

在新标签打开外部页面时，使用 target='_blank' 并可显式写 rel='noopener'；如确实不应向对方发送来源信息，再加 noreferrer。这不是给未知网站加信任的理由：展示外部链接时仍应检查协议和目标，避免把用户输入直接拼成危险 URL。下载链接、hreflang、media 等属性只在符合其语义和浏览器行为时使用，不能因为旧属性表列出就机械添加。

段落与样式边界

p 表示段落，不是通用的空白占位。标题级别表达内容层级，不用 h1 到 h6 调字号；CSS 负责颜色、间距和布局。空白、分栏和对齐也由 Grid/Flexbox 等样式解决，不应靠重复空段落或旧式表格布局。

迁移旧页时可按这份清单检查：

1. 删除 body、a、table 等元素上的展示型旧属性，将主题样式迁到 CSS。
2. 把导航、主要内容、文章和页脚分别映射到恰当语义区域。
3. 确认每个 ID 唯一、片段链接可到达，所有链接文案脱离上下文仍能理解。
4. 键盘 Tab 到达每个链接后，焦点可见；回车可执行导航，按钮使用空格/回车触发操作。
5. 对新窗口、外链、下载和用户输入 URL 做明确的产品与安全检查。

参考：MDN body、MDN div、MDN a、MDN HTML semantics、MDN skip links and HTML accessibility、WHATWG HTML Standard。