Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: remove {{SectionOnPage}} macro from zh-CN #11135

Merged
merged 2 commits into from
Jan 18, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ CSS 为控制继承提供了五个特殊的通用属性值。每个 CSS 属性
- {{cssxref("unset")}}
- : 将属性重置为自然值,也就是如果属性是自然继承那么就是 `inherit`,否则和 `initial` 一样

> **备注:** 见 {{SectionOnPage("/zh-CN/docs/Web/CSS/Cascade", "CSS 声明的源")}} 有更多信息和具体是怎么工作的。
> **备注:** 见 [CSS 声明的源](/zh-CN/docs/Web/CSS/Cascade#css_声明的源)有更多信息和具体是怎么工作的。

我们可以查看一个链接列表来探索这些值是如何运作的。在下面的实例中,你可以通过修改 CSS 来查看它们的功能,写代码是掌握 HTML 和 CSS 最好的办法。

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,7 @@ window.addEventListener("load", function () {

{{EmbedLiveSample("使用绑定到表单元素上的_FormData", "100%", 50)}}

你甚至可以通过使用表单的{{domxref("HTMLFormElement.elements", "elements")}} 属性来更多的参与此过程,来得到一个包含表单里所有数据元素的列表,并且逐一手动管理他们。想了解更多,请参阅这里的例子:{{SectionOnPage("/en-US/docs/Web/API/HTMLFormElement.elements", "Accessing the element list's contents")}}
你甚至可以通过使用表单的{{domxref("HTMLFormElement.elements", "elements")}} 属性来更多的参与此过程,来得到一个包含表单里所有数据元素的列表,并且逐一手动管理他们。想了解更多,请参见示例[访问表单控件](/zh-CN/docs/Web/API/HTMLFormElement/elements#访问表单控件)。

### 在隐藏的 iframe 中构建 DOM

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -104,12 +104,10 @@ web 开发者们一直以来想在 Web 中使用音频和视频,自 21 世纪

浏览器并不全支持相同的 codecs,所以你得使用几个不同格式的文件来兼容不同的浏览器。如果你使用的格式都得不到浏览器的支持,那么媒体文件将不会播放。

要使你的媒体文件在不同平台,不同设备的浏览器上都可观看,这需要多种编码器组合使用,但是这是一种非常麻烦的事,所以可以参考{{SectionOnPage("/en-US/docs/Web/Media/Formats/Containers", "Choosing the right container")}}来选择最适合的容器格式,同样的,参考{{SectionOnPage("/en-US/docs/Web/Media/Formats/Video_codecs", "Choosing a video codec")}}和{{SectionOnPage("/en-US/docs/Web/Media/Formats/Audio_codecs", "Choosing an audio codec")}}选择编码格式
要使你的媒体文件在不同平台,不同设备的浏览器上都可观看,这需要多种编码器组合使用,但是这是一种非常麻烦的事,所以可以参考[选择合适的容器](/zh-CN/docs/Web/Media/Formats/Containers#choosing_the_right_container)来选择最适合的容器格式,同样地,参考[选择视频编解码器](/zh-CN/docs/Web/Media/Formats/Video_codecs#选择视频编解码器)和[选择音频编解码器](/zh-CN/docs/Web/Media/Formats/Audio_codecs#选择音频编解码器)选择编码格式

需要记住的另一件事:同一款浏览器,移动版与桌面版支持的格式可能会有不同。最重要的是,它们都可以减轻媒体播放的处理负担(对于所有媒体或仅针对其内部无法处理的特定类型)。这意味着设备的媒体支持还部分取决于用户安装了什么软件。

\<!-- 注:这并没有那么简单,你可以从这里看到 [音视频编码兼容表](/zh-CN/docs/Web/HTML/Supported_media_formats#浏览器兼容情况)。此外,许多移动平台的浏览器能够播放一些不支持的格式,但是它们用的却是底层系统的媒体播放器。但这也仅是现在支持。-->

我们该怎么做呢?请看如下例子(你可以点击这里[查看](https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html)网页,或者点击这里[查看](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html)源代码):

```html
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,3 @@ slug: MDN/Writing_guidelines/Page_structures/Macros/Other
我们有一个宏,专门用于创建[快速链接](/zh-CN/docs/MDN/Structures/Quicklinks):

- [`QuickLinksWithSubpages`](https://github.com/mdn/yari/blob/main/kumascript/macros/QuickLinksWithSubpages.ejs) 创建一组由当前页面(或指定页面,如果有的话)下方的页面组成的快速链接。生成最多两个深度级别的链接。

## 已弃用的宏

这些宏已被其它做同样事情的方式所取代,不应再使用。如果您在现有文章中发现了它们,请替换它们。

### 链接

- [`SectionOnPage`](https://github.com/mdn/yari/blob/main/kumascript/macros/SectionOnPage.ejs) 宏创建一个链接到一个部分的名称和包含该部分的文章的短语。例如,`\{{SectionOnPage("/en-US/docs/Mozilla/Firefox/Releases/21", "Changes for Web developers")}}` 输出以下内容:_{{SectionOnPage("/en-US/docs/Mozilla/Firefox/Releases/21", "Changes for Web developers")}}_。
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ slug: MDN/Writing_guidelines/Writing_style_guide

> The {{domxref("CanvasRenderingContext2D")}} method **`strokeText()`**, part of the [Canvas 2D API](/zh-CN/docs/Web/API/Canvas_API), strokes—that is, draws the outlines of—the characters of a specified string, anchored at the position indicated by the given X and Y coordinates. The text is drawn using the context's current {{domxref("CanvasRenderingContext2D.font", "font")}}, and is justified and aligned according to the {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, and {{domxref("CanvasRenderingContext2D.direction", "direction")}} properties.
>
> For more details and further examples, see {{SectionOnPage("/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Text")}} in the Learning Area as well as our main article on the subject, [Drawing text](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_text).
> For more details and further examples, see the [Text](/zh-CN/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics#文本) section on the Drawing graphics page as well as our main article on the subject, [Drawing text](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_text).

#### 多提供一些示例

Expand Down
2 changes: 1 addition & 1 deletion files/zh-cn/web/api/clipboard/write/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ slug: Web/API/Clipboard/write

但是你要提前获取 "[Permissions API](/zh-CN/docs/Web/API/Permissions_API)" 的 `"clipboard-write"` 权限才能将数据写入到剪贴板。

> **备注:** 浏览器对这个异步剪贴板的 API 仍然在讨论中。所以在使用它之前请检查 [浏览器兼容性](#浏览器兼容性) 和 {{SectionOnPage("/en-US/docs/Web/API/Clipboard", "Clipboard availability")}} 以获得更多的兼容性信息。
> **备注:** 浏览器对这个异步剪贴板的 API 仍然在讨论中。所以在使用它之前请检查[浏览器兼容性](#浏览器兼容性)和[剪切板可用性](/zh-CN/docs/Web/API/Clipboard#剪贴板可用性)以获得更多的兼容性信息。

## 语法

Expand Down
2 changes: 1 addition & 1 deletion files/zh-cn/web/api/clipboard/writetext/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ slug: Web/API/Clipboard/writeText

{{domxref("Clipboard")}} 接口的 **`writeText()`** 方法可以写入特定字符串到操作系统的剪切板。

> **备注:** 规范要求在写入剪贴板之前使用 [Permissions API](/zh-CN/docs/Web/API/Permissions_API) 获取“剪贴板写入”权限。但是,不同浏览器的具体要求不同,因为这是一个新的 API。有关详细信息,请查看[浏览器兼容性](#浏览器兼容性) and {{SectionOnPage("/en-US/docs/Web/API/Clipboard", "Clipboard availability")}}
> **备注:** 规范要求在写入剪贴板之前使用 [Permissions API](/zh-CN/docs/Web/API/Permissions_API) 获取“剪贴板写入”权限。但是,不同浏览器的具体要求不同,因为这是一个新的 API。有关详细信息,请查看[浏览器兼容性](#浏览器兼容性)和[剪贴板可用性](/zh-CN/docs/Web/API/Clipboard#剪贴板可用性)

## 语法

Expand Down
6 changes: 3 additions & 3 deletions files/zh-cn/web/api/console/debug/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@ console.debug(消息 [, 字符串 1, ..., 字符串 N]);
- `消息`
- : 一个 JavaScript 字符串,其中包含零个或多个替代字符串。
- `字符串 1` ... `字符串 N`
- : JavaScript 对象,用来依次替换`msg`中的替代字符串。你可以在替代字符串中指定对象的输出格式。查看{{SectionOnPage("/zh-CN/docs/Web/API/Console", "使用字符串替换")}}了解替换字符串如何工作。
- : JavaScript 对象,用来依次替换`msg`中的替代字符串。你可以在替代字符串中指定对象的输出格式。查看[使用字符串替换](/zh-CN/docs/Web/API/console#使用字符串替换)了解替换字符串如何工作。

有关详细信息,请参阅{{domxref("console")}} 对象文档中的[将文本输出到控制台](/zh-CN/docs/Web/API/console#Outputting_text_to_the_console)。
有关详细信息,请参阅 {{domxref("console")}} 对象文档中的[输出文本到控制台](/zh-CN/docs/Web/API/console#输出文本到控制台)。

## 规范

Expand All @@ -35,7 +35,7 @@ console.debug(消息 [, 字符串 1, ..., 字符串 N]);

{{Compat}}

## 相关链接
## 参见

- [Opera Dragonfly documentation: Console](http://www.opera.com/dragonfly/documentation/console/)
- [MSDN: Using the F12 Tools Console to View Errors and Status](http://msdn.microsoft.com/library/gg589530)
Expand Down
2 changes: 1 addition & 1 deletion files/zh-cn/web/api/console/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ console.log("Failed to open the specified link")
- {{domxref("Console.warn()")}}
- : 打印一个警告信息,可以使用 [string substitution](/zh-CN/docs/Web/API/console#Using_string_substitutions) 和额外的参数。

## 用法
## 示例

### 输出文本到控制台

Expand Down
7 changes: 3 additions & 4 deletions files/zh-cn/web/api/htmlimageelement/loading/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,6 @@ function addImageToList(url) {

## 参见

- The {{HTMLElement("img")}} element
- [Web performance](/zh-CN/docs/Learn/Performance) in the MDN Learning Area
- [Lazy loading](/zh-CN/docs/Web/Performance/Lazy_loading) in the MDN web performance guide
- {{SectionOnPage("/en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages", "Use lazy loading for images")}}
- {{HTMLElement("img")}} 元素
- MDN 学习专区中的 [Web 性能](/zh-CN/docs/Learn/Performance)
- MDN web 性能指南中的[懒加载](/zh-CN/docs/Web/Performance/Lazy_loading)
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ slug: Web/API/HTMLMediaElement/videoTracks

**`videoTracks`** 为 {{DOMxRef("HTMLMediaElement")}} 的只读属性,它是一个 {{DOMxRef("VideoTrackList")}} 列表,列表中包含相应媒体元素的视频轨,视频轨为{{DOMxRef("VideoTrack")}} 类型对象。

它是一个实时列表; 当相应的媒体元素增加或删除视频轨时,返回列表会发生动态的改变。由此你可以监控和检测视频轨发生的变化。学习 {{SectionOnPage("/en-US/docs/Web/API/VideoTrackList", "Event handlers")}} 可以获得更多关于 media element 视频轨的知识。
它是一个实时列表; 当相应的媒体元素增加或删除视频轨时,返回列表会发生动态的改变。由此你可以监控和检测视频轨发生的变化。学习 [VideoTrackList 事件](/zh-CN/docs/Web/API/VideoTrackList#事件)可以获得更多关于 media element 视频轨的知识。

## Syntax

Expand Down
2 changes: 1 addition & 1 deletion files/zh-cn/web/api/intersection_observer_api/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ let callback =(entries, observer) => {

请留意,你注册的回调函数将会在主线程中被执行。所以该函数执行速度要尽可能的快。如果有一些耗时的操作需要执行,建议使用 {{domxref("Window.requestIdleCallback()")}} 方法。

### How intersection is calculated -- 交集的计算
### 交集的计算

所有区域均被 Intersection Observer API 当做一个矩形看待。如果元素是不规则的图形也将会被看成一个包含元素所有区域的最小矩形,相似的,如果元素发生的交集部分不是一个矩形,那么也会被看作是一个包含他所有交集区域的最小矩形。

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,9 @@ var observer = new IntersectionObserver(callback[, options]);
- `root`
- : 监听元素的祖先元素{{domxref("Element")}}对象,其边界盒将被视作视口。目标在根的可见区域的的任何不可见部分都会被视为不可见。
- `rootMargin`
- : 一个在计算交叉值时添加至根的边界盒 ({{Glossary('bounding_box')}}) 中的一组偏移量,类型为字符串 (string) ,可以有效的缩小或扩大根的判定范围从而满足计算需要。语法大致和 CSS 中的{{cssxref("margin")}} 属性等同; 可以参考 {{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API", "The root element and root margin")}}来深入了解 margin 的工作原理及其语法。默认值是"0px 0px 0px 0px"。
- : 一个在计算交叉值时添加至根的边界盒 ({{Glossary('bounding_box')}}) 中的一组偏移量,类型为字符串 (string) ,可以有效的缩小或扩大根的判定范围从而满足计算需要。语法大致和 CSS 中的{{cssxref("margin")}} 属性等同; 可以参考 [intersection root 和 root margin](/zh-CN/docs/Web/API/Intersection_Observer_API#the_intersection_root_and_root_margin) 来深入了解 margin 的工作原理及其语法。默认值是"0px 0px 0px 0px"。
- `threshold`
- : 规定了一个监听目标与边界盒交叉区域的比例值,可以是一个具体的数值或是一组 0.0 到 1.0 之间的数组。若指定值为 0.0,则意味着监听元素即使与根有 1 像素交叉,此元素也会被视为可见。若指定值为 1.0,则意味着整个元素都在可见范围内时才算可见。可以参考{{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API", "Thresholds")}} 来深入了解阈值是如何使用的。阈值的默认值为 0.0。
- : 规定了一个监听目标与边界盒交叉区域的比例值,可以是一个具体的数值或是一组 0.0 到 1.0 之间的数组。若指定值为 0.0,则意味着监听元素即使与根有 1 像素交叉,此元素也会被视为可见。若指定值为 1.0,则意味着整个元素都在可见范围内时才算可见。可以参考[阈值](/zh-CN/docs/Web/API/Intersection_Observer_API#thresholds)来深入了解阈值是如何使用的。阈值的默认值为 0.0。

### 返回值

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ slug: Web/API/IntersectionObserver/rootMargin

{{domxref("IntersectionObserver")}} 接口的只读属性 **`rootMargin`** 是与 CSS 属性{{cssxref("margin")}}语法相似的字符串 (string) 对象。在交叉检测开始之前,由`rootMargin 规定的矩形的每一边都会被添加至`{{domxref("IntersectionObserver.root", "root")}}元素的边框盒 ({{Glossary("bounding box")}}) 的相应边。例如,这可以让你向外调整边界,使得目标元素被认为是 100% 可见的,即使此元素得一部分长或宽被裁剪,或者在边缘过于靠近根边框盒边界的情况下,将目标视为部分隐藏。

可参考{{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API", "The root element and root margin")}}来深入了解 root margin 的工作原理或如何使其与根的边框盒进行协同工作。
可参考[交集的计算](/zh-CN/docs/Web/API/Intersection_Observer_API#交集的计算)来深入了解 root margin 的工作原理或如何使其与根的边框盒进行协同工作。

## 语法

Expand All @@ -21,12 +21,12 @@ var marginString = IntersectionObserver.rootMargin;

这个属性返回的字符串也许会与{{domxref("IntersectionObserver")}}被配置时所指定的值有所差别。浏览器可以改变这些值。

如果 rootMargin 在对象初始化的时候未被指定,它将被设置成默认值 `"0px 0px 0px 0px"`,这将意味着在原根节点边界框与目标边界之间计算交叉值。{{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API", "The root element and root margin")}} 描述了 rootMargin 的更加深入的使用方法。
如果 rootMargin 在对象初始化的时候未被指定,它将被设置成默认值 `"0px 0px 0px 0px"`,这将意味着在原根节点边界框与目标边界之间计算交叉值。[交集的计算](/zh-CN/docs/Web/API/Intersection_Observer_API#交集的计算)描述了 rootMargin 的更加深入的使用方法。

## 规范

{{Specifications}}

## 浏览器兼容
## 浏览器兼容性

{{Compat}}
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ slug: Web/API/IntersectionObserver/thresholds

The {{domxref("IntersectionObserver")}} interface's read-only **`thresholds`** property returns the list of intersection thresholds that was specified when the observer was instantiated with {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}}. If only one threshold ratio was provided when instanitating the object, this will be an array containing that single value.

See {{SectionOnPage("/en-US/docs/Web/API/Intersection_Observer_API", "Thresholds")}} to learn how thresholds work.
See [Intersection Observer](/zh-CN/docs/Web/API/Intersection_Observer_API#thresholds) to learn how thresholds work.

## Syntax

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -431,5 +431,5 @@ slug: Web/API/Media_Capture_and_Streams_API/Taking_still_photos

- [GitHub 上的示例代码](https://github.com/mdn/samples-server/tree/master/s/webrtc-capturestill)
- {{domxref("MediaDevices.getUserMedia")}}
- {{SectionOnPage("/zh-CN/docs/Web/API/Canvas_API/Tutorial/Using_images", "使用视频帧")}}
- Canvas 教程中的[使用视频帧](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Using_images#使用视频帧)
- {{domxref("CanvasRenderingContext2D.drawImage()")}}
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ _无_.

## 样例

有关使用 `devicechange` 事件更新屏幕上设备列表的示例,请参阅 {{SectionOnPage("/en-US/docs/Web/API/MediaDevices/ondevicechange", "Example")}}。
TBD

## 规范

Expand All @@ -43,6 +43,6 @@ _无_.

{{Compat}}

## See also
## 参见

- {{domxref("MediaDevices.ondevicechange")}}
2 changes: 1 addition & 1 deletion files/zh-cn/web/api/mediadevices/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ _从其父项继承方法 {{domxref("EventTarget")}}。_
- {{ domxref("MediaDevices.enumerateDevices()") }}
- : 获取有关系统中可用的媒体输入和输出设备的一系列信息。
- {{domxref("MediaDevices.getSupportedConstraints", "getSupportedConstraints()")}}
- : 返回一个符合 {{domxref("MediaTrackSupportedConstraints")}} 的对象。该对象指明了 {{domxref("MediaStreamTrack")}} 接口支持的可约束的属性。查看 {{SectionOnPage("/en-US/docs/Web/API/Media_Streams_API", "Capabilities and constraints")}} 去了解更多相关信息
- : 返回一个符合 {{domxref("MediaTrackSupportedConstraints")}} 的对象。该对象指明了 {{domxref("MediaStreamTrack")}} 接口支持的可约束的属性。查看 [Media Streams API](/zh-CN/docs/Web/API/Media_Capture_and_Streams_API/Constraints) 以了解更多相关信息
- {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}}
- : 提示用户选择显示器或显示器的一部分(例如窗口)以捕获为{{domxref("MediaStream")}} 以便共享或记录。返回解析为 MediaStream 的 Promise。
- {{ domxref("MediaDevices.getUserMedia()") }}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ slug: Web/API/MediaStreamTrack/getCapabilities

{{domxref("MediaStreamTrack")}} 接口的 **`getCapabilities()`** 方法返回一个 {{domxref('MediaTrackCapabilities')}} 对象,此对象表示每个可调节属性的值或者范围,该特性依赖于平台和{{Glossary("user agent")}}.

一旦你知道了浏览器的功能,你的脚本可以通过调用 {{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}} 来请求配置为匹配理想或可接受的设置。参考{{SectionOnPage("/zh-CN/docs/Web/API/Media_Streams_API", "Capabilities and constraints")}} 以了解受限制属性的具体细节。
一旦你知道了浏览器的功能,你的脚本可以通过调用 {{domxref("MediaStreamTrack.applyConstraints", "applyConstraints()")}} 来请求配置为匹配理想或可接受的设置。参考[功能、约束和设置](/zh-CN/docs/Web/API/Media_Capture_and_Streams_API/Constraints)以了解受限制属性的具体细节。

## 语法

Expand Down
Loading