我是一个段落，千真万确。
``` 每个标题都必须被包裹在一个标题元素中： html```罗贯中
话说天下大势，分久必合，合久必分。周末七国分争，并入于秦。及秦灭之后，楚、汉分争，又并入于汉……
且说董卓字仲颖，陇西临洮人也，官拜河东太守，自来骄傲。当日怠慢了玄德，张飞性发，便欲杀之……
却说张飞饮了数杯闷酒，乘马从馆驿前过，见五六十个老人，皆在门前痛哭。飞问其故，众老人答曰：“督邮逼勒县吏，欲害刘公；我等皆来苦告，不得放入，反遭把门人赶打！”……
``` 所涉及的元素具体代表什么，完全取决于作者编辑的内容，只要层次结构是合理的。在创建此类结构时，只需要记住一些最佳实践： - 最好只对每个页面使用一次 ``——这是顶级标题，所有其他标题位于层次结构中的下方。 - 请确保在层次结构中以正确的顺序使用标题。不要使用 `` 来表示副标题，后面再跟 `` 来表示二级副标题——这是没有意义的，会导致奇怪的结果。 - 在现有的六个标题层次中，除非觉得有必要，否则应该争取每页使用不超过三个。有很多层次的文件（例如，深层次的标题层次）会变得笨重，难以浏览。在这种情况下，如果可能的话，建议将内容分散到多个页面。 ## 为什么我们需要结构化？ 回答这个问题前，让我们先来看一段[文档示例](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/html-text-formatting/text-start.html)——并从运行这段文档示例（美味的豆沙食谱）开始。你应该在本地机器上保存一份这个文件的副本，因为在以后的练习中会需要它。这个文件的主体目前包含了多条内容。它们没有任何标记，但都用换行符隔开（按回车键进入下一行）。 然而，当在浏览器中打开文档时，会看到文本显示为一整块！ 这是因为没有元素给内容结构，所以浏览器不知道什么是标题，什么是段落。此外： - 用户在阅读网页时，往往会快速浏览以查找相关内容，经常只是阅读开头的标题（我们通常在一个网页上会[花费很少的时间](https://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/))。如果用户不能在几秒内看到一些有用的内容，他们很可能会感到沮丧并离开。 - 对网页建立索引的搜索引擎将标题的内容视为影响网页搜索排名的重要关键字。没有标题，你的网页在[搜索引擎优化](https://developer.mozilla.org/zh-CN/docs/Glossary/SEO)方面效果不佳。 - 严重视力障碍者通常不会阅读网页；他们用听力来代替。完成这项工作的软件叫做[屏幕阅读器](https://zh.wikipedia.org/wiki/%E8%9E%A2%E5%B9%95%E9%96%B1%E8%AE%80%E5%99%A8)。该软件提供了快速访问给定文本内容的方法。在使用的各种技术中，它们通过朗读标题来提供文档的概述，让用户能快速找到他们需要的信息。如果标题不可用，用户将不得不听到整个文档被大声朗读。 - 使用 [CSS](https://developer.mozilla.org/zh-CN/docs/Glossary/CSS) 样式化内容，或者使用 [JavaScript](https://developer.mozilla.org/zh-CN/docs/Glossary/JavaScript) 做一些有趣的事情，你需要包含相关内容的元素，使得 CSS / JavaScript 可以有效地定位它。 因此，我们需要给我们的内容进行结构性标记。 ## 主动学习：为我们的内容赋予结构 让我们直接进入一个运行实例。在下面的示例中，向*可编辑代码*字段中的原始文本添加元素，使其在*实时输出*字段中显示为标题和两个段落。 如果犯了错误，你可以使用*重置*按钮进行重置。如果你卡住了，请按*显示答案*按钮以查看答案。 ```
按 ESC 退出编辑区域，按 Tab 可插入制表符 '\t'
床前明月光，疑是地上霜。
举头望明月，低头思故乡。
`; let solutionEntry = htmlSolution; reset.addEventListener("click", () => { textarea.value = code; userEntry = textarea.value; solutionEntry = htmlSolution; solution.value = "显示答案"; updateCode(); }); solution.addEventListener("click", () => { if (solution.value === "显示答案") { textarea.value = solutionEntry; solution.value = "隐藏答案"; } else { textarea.value = userEntry; solution.value = "显示答案"; } updateCode(); }); textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); // 阻止制表键跳出文本区域 // 而是在光标位置输出制表符 textarea.onkeydown = (e) => { if (e.code === "Tab") { e.preventDefault(); insertAtCaret("\t"); } if (e.code === "Escape") { textarea.blur(); } }; function insertAtCaret(text) { const scrollPos = textarea.scrollTop; let caretPos = textarea.selectionStart; const front = textarea.value.substring(0, caretPos); const back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; caretPos += text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; } // 每次用户更新文本区域代码时，更新已保存的 userCode textarea.onkeyup = function () { // 我们只想在显示用户代码时保存状态， // 而不是保存解答，因此解答不会保存在用户代码上 if (solution.value === "显示答案") { userEntry = textarea.value; } else { solutionEntry = textarea.value; } updateCode(); }; ``` ## 为什么我们需要语义？ 在我们身边的任何地方都要依赖语义——我们依靠以前的经验来告诉我们一个日常物品的功能是什么；当我们看到某个东西时，我们知道它的功能是什么。举个例子，我们知道红色交通灯表示“停止”，绿色交通灯表示“通行”。如果运用了错误的语义，事情会迅速地变得非常棘手（难道有某个国家使用红色代表通行？我不希望如此） 同样的道理，我们需要确保使用了正确的元素来给予内容正确的含义、作用以及外形。在这里，[h1](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/Heading_Elements) 元素也是一个语义元素，它所包裹的文本具有“页面上的顶级标题”的作用（或意义）。 html```