页面类型

MDN 上有多种反复使用的页面类型。本文介绍了这些页面类型、它们的用途,并提供了每种页面类型的示例和创建新页面时可使用的模板。

MDN 上的页面类型大致分为三类,尽管某些页面类型属于多个类别。

  • 参考页面描述了某个事物的详细信息,并根据所描述事物的结构进行组织。
  • 指南页面描述了如何做某事或如何使用某物,并根据读者的目标进行组织。
  • 导航页面主要用于提供指向其他页面的链接,通常是关于相关主题的页面。

创建新页面

添加新文档相对简单,尤其是当你从类似主题的 index.md 文件开始复制时。有几点需要记住:

  • 文档以 Markdown 格式写入 index.md 文件中。
  • 例如,如果你正在为一个名为 foo 的 HTTP 标头创建新文档,请在 files/en-us/web/http/reference/headers/foo 创建一个新文件夹,并将 Markdown 文件放入此文件夹中(files/en-us/web/http/reference/headers/foo/index.md)。
  • 文档的 index.md 文件必须以定义 titleslug 以及大多数情况下 page-type 的前言开始。你可能会发现参考类似文档的 index.md 中的前言很有帮助。

如何使用模板

创建新页面时,你可以参考我们的页面模板之一,确保你使用了正确的页面结构/内容——参见以下部分。你可以通过每个模板底部的“在 GitHub 上查看源代码”链接找到每个模板的确切源代码(如果你想复制它)。这些页面模板作为已发布的页面意义不大,但如果你查看它们的源代码,你会发现它们包含许多有用的注释、占位符和提示,详细说明了如何填写缺失信息并创建你的页面。

在每个模板的顶部,你会找到一个名为“发布前删除”的部分——这包含有关如何填写页面标题、slug、侧边栏菜单和标签的信息(例如,实际上不会出现在文章正文中的信息)。在按照其中的说明操作后,你需要删除此部分,然后才能认为页面已完成。

旧式页面布局

有时你会遇到与此处提供的模板明显不同的旧式参考页面。例如,旧式接口页面将所有接口的成员详细信息放在一个页面上,并且没有单独的方法/属性/构造函数/事件监听器页面。

如果你遇到旧式页面集,我们非常希望你能将它们更新为新样式!但是,我们确实理解这可能需要大量工作。如果需要更新的信息量不大,并且你有一些空闲时间,请务必尝试将其更新为新样式。

如果工作量更大,那么在确定工作优先级时,你应该考虑几个因素:

  • 信息过时程度如何?
  • 信息质量有多低?
  • 此功能有多受欢迎?信息有多受追捧?

如果你想组建一个团队来处理更新,或者你只是想报告或讨论需要更新的内容,请随时提交内容问题向我们寻求帮助

页面类型前言键

我们定义了一个前言键 page-type,以明确识别 MDN 页面的类型。下面链接的模板指示了你应该为每种页面类型设置哪些 page-type 值。

有关页面类型的完整列表,请参阅页面类型前言键

页面模板

以下是你在 MDN 上可以找到的各种页面的示例,以及可用于根据你将呈现的内容类型创建新内容的模板,包括以下页面:

每个部分都包含指向该页面类型的实时示例页面的链接。

API 落地页

API 落地页提供了对特定 API 功能的概述,以及指向该 API 提供的每个接口、全局变量、函数等的文档链接。它不直接链接到 API 类中的特定方法或属性,除非在概述文本的上下文中。它主要是一个导航页面,但也作为 API 的一目了然的参考页面。

在某些情况下,存在多个独立的 API,它们在各自的规范中定义,但它们密切相关,因此用单个 API 落地页涵盖它们是有意义的。例如,通用传感器 API涵盖通用传感器问题,但更具体的问题在其他 API 中涵盖,例如环境光传感器运动传感器等。在这种情况下,许多高级概念是相同的,因此在多个落地页上重复它们是没有意义的。在这种情况下,从重复和可查找性的角度来看,将它们全部涵盖在单个“Web 传感器”落地页下更有意义。

示例

模板

API 参考页

注意:也称为接口落地页

API 参考页列出了属于特定接口或类的所有方法、属性、事件等。它提供了该类或接口的功能或用途概述,并提供了指向这些成员中每个成员的文档链接。它比 API 落地页更精细,API 落地页通常链接到多个 API 参考页。

示例

模板

API 参考子页

API 参考子页是 API 参考页的子页面。它详细记录了单个接口成员。

示例

模板

HTML 元素参考页

HTML 参考页列出了 HTML 元素可用的所有属性,解释了元素的用途和用法,并提供了示例、浏览器兼容性信息和其他重要数据。

示例

模板

HTML 属性参考页

HTML 属性页面列出了 HTML 属性存在的所有值,解释了属性的用途和用例,提供了示例、浏览器兼容性信息和其他重要数据。

注意:如果元素特定属性(例如 <input>placeholder)可以在父元素的参考页中充分涵盖,则不需要单独的页面(例如,placeholder 属性应该在 <input> 元素的页面上涵盖,而不是作为独立页面)。

示例

模板

SVG 元素参考页

SVG 参考页列出了 SVG 元素可用的所有属性,解释了元素的用途和用法,并提供了示例、浏览器兼容性信息和其他重要数据。

示例

模板

CSS 模块落地页

每个 CSS 模块代表一个 CSS 规范,为 CSS 中的某些功能和实现提供支持。例如,CSS 盒模型模块代表描述允许你在 CSS 盒内和周围创建间距的边距和内边距属性的规范

CSS 模块落地页提供了模块提供功能的概述,并列出了模块提供的所有属性、数据类型、CSS 函数等。如果可能,CSS 模块落地页通过交互式示例快速演示了使用模块属性可以实现什么。模块落地页主要作为导航页面,但也作为模块的一目了然的参考页面。

一些属于其他模块但与你正在文档化的模块提供的功能密切相关的属性和功能,也可以在“相关概念”部分中涵盖。例如,<easing-function> 数据类型和 prefers-reduced-motion 媒体查询不在 CSS 动画模块中涵盖,但由于它们与 CSS 动画密切相关,因此最好在 CSS 动画模块落地页的相关概念部分中突出显示它们。

示例

模板

CSS 功能参考页

CSS 参考页列出了 CSS 功能(例如选择器或属性)的所有可用语法,并解释了该功能的用途和用法。它还提供了示例、浏览器兼容性信息和其他重要数据。

示例

模板

HTTP 标头参考页

HTTP 标头参考页列出了 HTTP 标头可以包含的所有可用指令,并解释了标头的用途和用法。它还提供了示例、浏览器兼容性信息和其他重要解释。

示例

模板

ARIA 参考页

ARIA 参考页描述了定义如何使 Web 内容和 Web 应用程序对残疾人更易于访问的角色属性

示例

模板

概念页

概念页是一个解释或教授某些内容的指南页面。通常,如果一个页面主要包含散文,并且不属于其他页面类型,那么它可能是一个概念页。对某个主题的扩展讨论可能会分散在多个概念页中,并使用 NextPrevious 宏进行链接。

示例

词汇表页

词汇表页包含对术语、主题或概念的简要解释。第一段应该是一个简单、独立的术语描述,不超过两句话。这之后可以是在“另请参阅”部分中指向更多信息的链接。如果页面增长到超过一屏左右,则说明它太长了,应该转换为概念页。有关更多详细信息,请参阅如何在词汇表中编写和引用条目

示例

模板

落地页

落地页充当其子页面的菜单,因此主要是一个导航页面。落地页布局通常用于关于特定主题的页面树的根页面。它以主题的简要摘要开头,然后呈现子页面的结构化列表,并可选地提供可能对读者有用的其他材料。

子页面列表可以使用 SubpagesWithSummaries 模板自动生成。但是,在更复杂的情况下,列表可能需要手动创建(和维护)。

学习 Web 开发页面

MDN 的学习 Web 开发部分专门针对学习 Web 开发基础知识的人,因此需要与 MDN 其他内容不同的方法。你可以在学习 Web 开发写作指南中找到更多指南。

学习 Web 开发中只有几种页面类型:

模块组落地页,例如核心学习模块

这些页面包含一个介绍段落,一个详细说明在开始模块组之前应具备的先决条件的部分,以及一个模块列表,后面是一个可选的“另请参阅”链接列表。

模块落地页,例如使用 HTML 结构化内容

这些页面包含一个介绍段落,一个详细说明在开始模块之前应具备的先决条件的部分,以及一个包含的教程列表,后面是一个可选的“其他教程”列表(这些教程相关但不是核心学习路径的一部分),以及一个可选的“另请参阅”链接列表。

教程页,例如基本 HTML 语法

学习教程的结构并不严格,但它必须提供实践学习体验(参见学习 Web 开发写作指南 > 方法),它必须在顶部列出“先决条件”和“学习成果”,并且内容必须教授所述的学习成果。

示例

另见