跟着 MDN 学 HTML day_9：（信件语义标记）

很多新手单标签都会，一到综合排版、全局结构、多语义联动就翻车，代码层级乱、语义用错、头部配置缺失、排版不符合商务规范。今天这一篇，我带你从零拆解全流程，每一步对应一个企业刚需知识点，附带可直接复制的完整源码，写完直接通过W3C校验，面试、作业、实训直接满分通关。

先划重点：这道题是前端入门语义化综合验收压轴题，吃透这一篇，你就彻底告别"只会写零散标签，不会搭完整页面"的短板。

一、实训前置认知：为什么信件标记是前端必刷经典题？

1.1 核心实战知识点前置复盘

很多人疑惑：为什么学HTML一定要写信件？不是为了复古，是因为一封标准商务信件，刚好全覆盖前端入门核心考点：全局文档结构、地址语义、标题层级、三类列表混用、行内高级语义、无障碍日期、头部标准化配置、简易样式联动。一次性串联半个月所学，是天然的综合验收场景。

而且企业初级前端代码评审、校企实训、外包小项目，都会看你会不会结构化、语义化、规范化写完整页面，信件案例就是最标准的打分模板。今天全程严格对标MDN官方评分标准，零冗余、零错误、零违规。

1.2 本次实训硬性评分红线（必记）

1）必须完整标配 doctype、html、head、body 四层根结构，语言、编码、作者全部补齐；2）收发地址必须专用地址标签，不能用普通段落硬换行；3）标题层级只能1个一级标题、3个二级标题，严禁乱跳层级；4）日期全部机器可读，缩写全部补全称，化学式、次方上下标精准对位；5）落款校训必须用行内引用+来源标注，全程符合无障碍规范。

二、头部标准化配置：一键搞定meta、样式、文档声明

2.1 核心知识点：head是页面的"身份证+配置中心"

很多新手只写body内容，完全忽略head，直接扣分翻车。head不负责看得见的页面内容，只负责给浏览器、搜索引擎、校验工具发规则：编码防乱码、标注作者、指定页面语言、内置全局基础样式、配置页面标题。信件是正式公文类页面，头部必须合规齐全，否则直接判定不规范。

关键细节：语言必须标注en-US贴合英文信件场景，编码固定utf-8杜绝乱码，作者精准填写发件人，样式内部样式统一管控排版，外部不额外引CSS，纯原生完成实训要求。

2.2 头部完整可直接复用代码

html 复制代码

<head>
  <meta charset="utf-8" />
  <meta name="author" content="Dr. Eleanor Gaye" />
  <title>Awesome science application correspondence</title>
  <style>
    body {
      font: 1.2em / 1.5 system-ui;
    }
    .sender-column {
      text-align: right;
    }
    h1 {
      font-size: 1.5em;
    }
    h2 {
      font-size: 1.3em;
    }
  </style>
</head>

2.3 避坑小结

不要省略任意一条meta标签，不要把样式写到外部文件，不要乱改标题文本，严格贴合MDN原题要求，一次就过校验。

三、地址语义专用标签：搞定商务信件排版

3.1 核心知识点：地址别再用p硬凑，专用标签才合规

收发信人地址、电话、邮箱，属于联系类结构化语义内容，不是普通正文段落，必须用address专属标签。搭配换行标签实现单行地址换行，不产生额外段落间距，贴合纸质信件排版观感；再搭配sender-column类名，一键实现发件人右对齐，复刻经典商务信件版式。

同时配合加粗标签高亮姓名、电话、邮箱，强化关键信息层级，读屏器会自动识别这是联系区块，无障碍直接达标。

3.2 收发地址实操示例代码

html 复制代码

<!-- 发件人：右对齐专属类名 -->
<address class="sender-column">
  <strong>Dr. Eleanor Gaye</strong><br />
  Awesome Science faculty<br />
  University of Awesome<br />
  Bobtown, CA 99999,<br />
  USA<br />
  <strong>Tel</strong>: 123-456-7890<br />
  <strong>Email</strong>: no_reply@example.com
</address>

<!-- 收件人：默认左对齐 -->
<address>
  <strong>Miss Eileen Dover</strong><br />
  4321 Cliff Top Edge<br />
  Dover, CT9 XXX<br />
  UK
</address>

四、机器可读日期：兼顾人看+程序抓取

4.1 核心知识点：肉眼好看、机器好读双向适配

信件里四处关键日期，直接写纯文本只能人看，爬虫、日历插件、无障碍设备全部识别失败。time标签内部写自然语言日期，datetime属性写标准ISO格式年月日，一边保证排版自然，一边方便后续归档、筛选、同步，是正式公文必备写法。发件日期额外绑定右对齐类名，贴合版式规范。

4.2 日期完整嵌入代码片段

html 复制代码

<!-- 发件日期：右对齐 -->
<p class="sender-column">
  <time datetime="2016-01-20">20 January 2016</time>
</p>

<!-- 学期开学日期嵌入列表示例 -->
<li>First semester: <time datetime="2016-09-09">9 September 2016</time></li>

五、三级列表精准选型：有序+无序+自定义描述列表混用

5.1 核心知识点：不同场景严格对应不同列表

很多新手全部乱用无序列表，直接扣分。规则很简单：并列无先后→无序列表；有优先级排序→有序列表；名词+解释一一对应→自定义描述列表。信件里开学时间并列无序、研究课题有优先级有序、舞蹈名称加释义用描述列表，三种全覆盖，直接拉满专业度。

5.2 三类列表实战示范代码

html 复制代码

<!-- 开学时间：无序列表 -->
<ul>
  <li>First semester: <time datetime="2016-09-09">9 September 2016</time></li>
  <li>Second semester: <time datetime="2017-01-15">15 January 2017</time></li>
  <li>Third semester: <time datetime="2017-05-02">2 May 2017</time></li>
</ul>

<!-- 研究课题：有序优先级列表 -->
<ol>
  <li>Turning H<sub>2</sub>O into wine...</li>
</ol>

<!-- 异域舞蹈：自定义描述列表 -->
<dl>
  <dt>Polynesian chicken dance</dt>
  <dd>A little known but very influential dance...</dd>
</dl>

六、行内高级语义全覆盖：缩写+下标上标+强调+引用

6.1 核心知识点：细节决定是否满分通关

这一块是扣分重灾区：5个缩写全部补全称、化学式下标、科学计数上标、两处语义强调、结尾校训行内引用加来源。全部都是之前day7学过的知识点，今天综合复用，无缝衔接无障碍规范，细节拉满直接满分。

6.2 综合行内语义嵌入代码

html 复制代码

<!-- 缩写补全 -->
<abbr title="Doctor of Philosophy">PhD</abbr>
<abbr title="HyperText Markup Language">HTML</abbr>

<!-- 化学式、次方 -->
H<sub>2</sub>O、3 × 10<sup>3</sup>

<!-- 语义强调 -->
I <em>did</em> study exotic tribal dances.

<!-- 校训引用 -->
<q>Be awesome to each other.</q> -- <cite>The memoirs of Bill S Preston, <abbr title="Esquire">Esq.</abbr></cite>

七、完整可直接运行全站源码（一键复制直接提交作业）

下面整合所有模块，零修改、零报错、直接通过W3C校验，拿去就能交实训、交作业、自测复盘。

html 复制代码

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="author" content="Dr. Eleanor Gaye" />
    <title>Awesome science application correspondence</title>
    <style>
      body {
        font: 1.2em / 1.5 system-ui;
      }
      .sender-column {
        text-align: right;
      }
      h1 {
        font-size: 1.5em;
      }
      h2 {
        font-size: 1.3em;
      }
    </style>
  </head>
  <body>
    <address class="sender-column">
      <strong>Dr. Eleanor Gaye</strong><br />
      Awesome Science faculty<br />
      University of Awesome<br />
      Bobtown, CA 99999,<br />
      USA<br />
      <strong>Tel</strong>: 123-456-7890<br />
      <strong>Email</strong>: no_reply@example.com
    </address>
    <p class="sender-column"><time datetime="2016-01-20">20 January 2016</time></p>
    <address>
      <strong>Miss Eileen Dover</strong><br />
      4321 Cliff Top Edge<br />
      Dover, CT9 XXX<br />
      UK
    </address>
    <h1>Re: Eileen Dover university application</h1>
    <p>Dear Eileen,</p>
    <p>Thank you for your recent application to join us at the University of Awesome's science faculty to study as part of your <abbr title="Doctor of Philosophy">PhD</abbr> next year. I will answer your questions one by one, in the following sections.</p>
    <h2>Starting dates</h2>
    <p>We are happy to accommodate you starting your study with us at any time, however it would suit us better if you could start at the beginning of a semester; the start dates for each one are as follows:</p>
    <ul>
      <li>First semester: <time datetime="2016-09-09">9 September 2016</time></li>
      <li>Second semester: <time datetime="2017-01-15">15 January 2017</time></li>
      <li>Third semester: <time datetime="2017-05-02">2 May 2017</time></li>
    </ul>
    <p>Please let me know if this is ok, and if so which start date you would prefer.</p>
    <h2>Subjects of study</h2>
    <p>At the Awesome Science Faculty, we have a pretty open-minded research facility --- as long as the subjects fall somewhere in the realm of science and technology.</p>
    <ol>
      <li>Turning H<sub>2</sub>O into wine, and the health benefits of Resveratrol (C<sub>14</sub>H<sub>12</sub>O<sub>3</sub>).</li>
      <li>Measuring the effect on performance of funk bass players at temperatures exceeding 30°C (86°F), when the audience size exponentially increases (effect of 3 × 10<sup>3</sup> increasing to 3 × 10<sup>4</sup>).</li>
      <li><abbr title="HyperText Markup Language">HTML</abbr>, Hypertext Markup Language, and <abbr title="Cascading Style Sheets">CSS</abbr>, Cascading Style Sheets, constructs for representing musical scores.</li>
    </ol>
    <h2>Exotic dance moves</h2>
    <p>Yes, you are right! As part of my post-doctorate work, I <em>did</em> study exotic tribal dances.</p>
    <dl>
      <dt>Polynesian chicken dance</dt>
      <dd>A little known but very influential dance dating back as far as 300 <abbr title="Before Common Era">BCE</abbr>, a whole village would dance around in a circle like chickens, to encourage their livestock to be "fruitful".</dd>
      <dt>Icelandic brownian shuffle</dt>
      <dd>Before the Icelanders developed fire as a means of getting warm, they used to practice this dance, which involved huddling close together in a circle on the floor, and shuffling their bodies around in imperceptibly tiny, very rapid movements.</dd>
      <dt>Arctic robot dance</dt>
      <dd>An interesting example of historic misinformation, English explorers in the 1960s believed to have discovered a new dance style characterized by "robotic", stilted movements.</dd>
    </dl>
    <p>Yours sincerely,</p>
    <p>Dr Eleanor Gaye</p>
    <p>University of Awesome motto: <q>Be awesome to each other.</q> -- <cite>The memoirs of Bill S Preston, <abbr title="Esquire">Esq.</abbr></cite></p>
  </body>
</html>

八、总结：

今天这一封信件实训，把全局文档结构、头部配置、地址语义、标题层级、三类列表、时间语义、缩写下标、强调引用全部串联闭环。你会发现：HTML不是拼标签，是按场景选语义、按规范搭结构、按标准做兼容。

后续我们继续跟着MDN打卡，下一步进阶布局语义、表单高阶适配，慢慢从零基础稳扎稳打，直接过渡到能独立写完整项目、能无障碍适配、能过企业代码评审的正规前端水准。

跟着 MDN 学 HTML day_9：（信件语义标记）

一、实训前置认知：为什么信件标记是前端必刷经典题？

1.1 核心实战知识点前置复盘

1.2 本次实训硬性评分红线（必记）

二、头部标准化配置：一键搞定meta、样式、文档声明

2.1 核心知识点：head是页面的"身份证+配置中心"

2.2 头部完整可直接复用代码

2.3 避坑小结

三、地址语义专用标签：搞定商务信件排版

3.1 核心知识点：地址别再用p硬凑，专用标签才合规

3.2 收发地址实操示例代码

四、机器可读日期： 兼顾人看+程序抓取

4.1 核心知识点：肉眼好看、机器好读双向适配

4.2 日期完整嵌入代码片段

五、三级列表精准选型：有序+无序+自定义描述列表混用

5.1 核心知识点：不同场景严格对应不同列表

5.2 三类列表实战示范代码

六、行内高级语义全覆盖：缩写+下标上标+强调+引用

6.1 核心知识点：细节决定是否满分通关

6.2 综合行内语义嵌入代码

七、完整可直接运行全站源码（一键复制直接提交作业）

八、总结：

四、机器可读日期：兼顾人看+程序抓取