mdn · yin1999 · Feb 7, 2025 · Feb 7, 2025 · Feb 7, 2025 · Feb 7, 2025
@@ -19,7 +19,7 @@ l10n:
 
 - [CSS 颜色](/zh-CN/docs/Web/CSS/CSS_colors)
 - [CSS 的值与单位](/zh-CN/docs/Learn_web_development/Core/Styling_basics/Values_and_units)
-- [图像文件类型与格式指南](/zh-CN/docs/Web/Media/Formats/Image_types)
+- [图像文件类型与格式指南](/zh-CN/docs/Web/Media/Guides/Formats/Image_types)
 - 维基百科上的 [Alpha 合成](https://zh.wikipedia.org/wiki/Alpha合成)
 - 维基百科上的 [RGBA](https://zh.wikipedia.org/wiki/RGBA)
 - 维基百科上的[通道（数字图像）](<https://zh.wikipedia.org/wiki/通道_(数字图像)>)
@@ -12,6 +12,6 @@ l10n:
 ## 参见
 
 - 维基百科上的[编解码器](https://zh.wikipedia.org/wiki/编解码器)
-- [Web 视频编解码器教程](/zh-CN/docs/Web/Media/Formats/Video_codecs)
-- [Web 音频编解码器教程](/zh-CN/docs/Web/Media/Formats/Audio_codecs)
-- [Web 媒体类型和格式指南](/zh-CN/docs/Web/Media/Formats)
+- [Web 视频编解码器教程](/zh-CN/docs/Web/Media/Guides/Formats/Video_codecs)
+- [Web 音频编解码器教程](/zh-CN/docs/Web/Media/Guides/Formats/Audio_codecs)
+- [Web 媒体类型和格式指南](/zh-CN/docs/Web/Media/Guides/Formats)
@@ -7,7 +7,7 @@ l10n:
 
 {{GlossarySidebar}}
 
-**[WebM](/zh-CN/docs/Web/Media/Formats/Containers#webm)** 是一个免版税和开放的 web 视频格式，所有现代浏览器都原生支持它。
+**[WebM](/zh-CN/docs/Web/Media/Guides/Formats/Containers#webm)** 是一个免版税和开放的 web 视频格式，所有现代浏览器都原生支持它。
 
 ## 参见
 

@@ -14,4 +14,4 @@ XInclude 机制在任何主流浏览器中都不受支持。
 ## 参见
 
 - [XInclude 标准](https://www.w3.org/TR/xinclude-11/)
-- [`XPath`](/zh-CN/docs/Web/XPath)
+- [`XPath`](/zh-CN/docs/Web/XML/XPath)
@@ -2,7 +2,7 @@
 title: XPath
 slug: Glossary/XPath
 l10n:
-  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+  sourceCommit: 3e1b5277c6451e7d27ab628f23fb9702947a7a7b
 ---
 
 {{GlossarySidebar}}
@@ -11,7 +11,7 @@ l10n:
 
 ## 参见
 
-- [MDN 上的 XPath 文档](/zh-CN/docs/Web/XPath)
+- [MDN 上的 XPath 文档](/zh-CN/docs/Web/XML/XPath)
 - [XPath 规范](https://www.w3.org/TR/xpath-30/)
 - [官方网站](https://www.w3.org/TR/?tag=xml)
 - 维基百科上的 [XPath](https://zh.wikipedia.org/wiki/XPath)
@@ -14,4 +14,4 @@ XSLT 有它自己的可接受 XML 输入或任何可转换为 XQuery 和 XPath
 ## 参见
 
 - 维基百科上的 [XSLT](https://zh.wikipedia.org/wiki/XSLT)
-- [MDN 中的 XSLT 文档](/zh-CN/docs/Web/XSLT)
+- [MDN 中的 XSLT 文档](/zh-CN/docs/Web/XML/XSLT)
@@ -226,9 +226,9 @@ player.ontimeupdate = () => {
 
 这为你提供了如何向视频/音频播放器实例添加自定义播放器功能的基本想法。有关如何向视频/音频播放器添加更复杂的功能（包括旧版浏览器的 Flash 回退）的详细信息，请参阅：
 
-- [Audio and video delivery](/zh-CN/docs/Web/Media/Audio_and_video_delivery)
-- [Video player styling basics](/zh-CN/docs/Web/Media/Audio_and_video_delivery/Video_player_styling_basics)
-- [Creating a cross-browser video player](/zh-CN/docs/Web/Media/Audio_and_video_delivery/cross_browser_video_player)
+- [Audio and video delivery](/zh-CN/docs/Web/Media/Guides/Audio_and_video_delivery)
+- [Video player styling basics](/zh-CN/docs/Web/Media/Guides/Audio_and_video_delivery/Video_player_styling_basics)
+- [Creating a cross-browser video player](/zh-CN/docs/Web/Media/Guides/Audio_and_video_delivery/cross_browser_video_player)
 
 我们还创建了一个高级示例，以演示如何创建面向对象的系统，该系统可查找页面上的每个视频和音频播放器 (无论有多少个视频和音频播放器),并将自定义控件添加到其中。请参阅 [custom-controls-oojs](https://mdn.github.io/learning-area/accessibility/multimedia/custom-controls-OOJS/)（[查看其源码](https://github.com/mdn/learning-area/tree/main/accessibility/multimedia/custom-controls-OOJS)）。
 
@@ -324,7 +324,7 @@ This is the second.
 
 ![Video player with standard controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."](video-player-with-captions.png)
 
-有关详细信息，请阅读[Adding captions and subtitles to HTML5 video](/zh-CN/docs/Web/Media/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video)。你可以找到与本文一起使用本文的[the example](http://iandevlin.github.io/mdn/video-player-with-captions/),本文由 Ian Devlin 编写 (请参阅[source code](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions))。此示例使用一些 JavaScript 允许用户在不同的字幕之间进行选择。请注意，要打开字幕，你需要按"CC"按钮并选择一个选项 - 英语、德语或西班牙语。
+有关详细信息，请阅读[Adding captions and subtitles to HTML5 video](/zh-CN/docs/Web/Media/Guides/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video)。你可以找到与本文一起使用本文的[the example](http://iandevlin.github.io/mdn/video-player-with-captions/),本文由 Ian Devlin 编写 (请参阅[source code](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions))。此示例使用一些 JavaScript 允许用户在不同的字幕之间进行选择。请注意，要打开字幕，你需要按"CC"按钮并选择一个选项 - 英语、德语或西班牙语。
 
 > [!NOTE]
 > 文本轨道和转录也可以帮助你使用{{glossary("SEO")}},因为搜索引擎在文本上尤其繁荣。文本轨道甚至允许搜索引擎通过视频直接链接到一个点部分。

@@ -153,7 +153,7 @@ select:focus {
 
 有时候，无法避免键盘无障碍性的丧失。你可能继承了一个语义结构不佳的网站（比如，你不得不使用一个生成 `<div>` 按钮的糟糕内容管理系统），或者你正在使用一个缺乏内置键盘无障碍性支持的复杂控件，例如 HTML {{htmlelement("video")}} 元素（令人意外的是，Opera 是唯一支持 Tab 键导航 `<video>` 元素的默认浏览器控件的浏览器）。以下是一些可行的解决方案：
 
-1. 使用 `<button>` 元素（默认情况下我们可以通过 Tab 键导航至该元素！）和 JavaScript 来创建自定义控件，并实现其功能。请参见[创建跨浏览器的视频播放器](/zh-CN/docs/Web/Media/Audio_and_video_delivery/cross_browser_video_player)了解一些很好的示例。
+1. 使用 `<button>` 元素（默认情况下我们可以通过 Tab 键导航至该元素！）和 JavaScript 来创建自定义控件，并实现其功能。请参见[创建跨浏览器的视频播放器](/zh-CN/docs/Web/Media/Guides/Audio_and_video_delivery/cross_browser_video_player)了解一些很好的示例。
 2. 通过 JavaScript 创建键盘快捷键，以便在按下某些键时激活功能。请参见[桌面鼠标和键盘控制](/zh-CN/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard)了解一些可以适用于任何目的的游戏相关示例。
 3. 使用一些有趣的技巧来模拟按钮行为。例如，我们的 [fake-div-buttons.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html) 示例（参见[源代码](https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html)）。在这里，我们给我们的假 `<div>` 按钮添加了 `tabindex="0"` 属性，使它们可以获得焦点（包括通过 tab 键）。参见 WebAIM 的 [tabindex 文章](https://webaim.org/techniques/keyboard/tabindex)获取更多有用的细节。虽然这使我们能够通过 Tab 键导航到按钮，但无法通过 Enter/Return 键激活它们。要做到这一点，我们必须添加以下 JavaScript 技巧：
 
@@ -180,7 +180,7 @@ select:focus {
 
 可以通过多种方法来测试缺少的替代文本，例如，使用无障碍[审计工具](#审计工具)。
 
-视频和音频内容的替代文本稍微更加复杂一些。有一种方式可以定义文本轨道（如字幕），并在播放视频时显示它们，那就是使用 {{htmlelement("track")}} 元素和 [WebVTT](/zh-CN/docs/Web/API/WebVTT_API) 格式（参见[为 HTML 视频添加字幕和字幕](/zh-CN/docs/Web/Media/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video)的详细教程）。这些特性在[浏览器兼容性](/zh-CN/docs/Web/Media/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video#浏览器兼容性)方面相当好，但如果你想为音频提供文本替代方案或支持较旧的浏览器，在同一页面上或单独的页面上提供一个简单的文本记录可能是个不错的主意。
+视频和音频内容的替代文本稍微更加复杂一些。有一种方式可以定义文本轨道（如字幕），并在播放视频时显示它们，那就是使用 {{htmlelement("track")}} 元素和 [WebVTT](/zh-CN/docs/Web/API/WebVTT_API) 格式（参见[为 HTML 视频添加字幕和字幕](/zh-CN/docs/Web/Media/Guides/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video)的详细教程）。这些特性在[浏览器兼容性](/zh-CN/docs/Web/Media/Guides/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video#浏览器兼容性)方面相当好，但如果你想为音频提供文本替代方案或支持较旧的浏览器，在同一页面上或单独的页面上提供一个简单的文本记录可能是个不错的主意。
 
 #### 元素关系和上下文
 

@@ -99,7 +99,7 @@ API 通常分为两类。
 - {{domxref("Document_Object_Model","文档对象模型 API","","nocode")}} 能通过创建、移除和修改 HTML，为页面动态应用新样式等手段来操作 HTML 和 CSS。比如当某个页面出现了一个弹窗，或者显示了一些新内容（像上文小演示中看到那样），这就是 DOM 在运行。
 - {{domxref("Geolocation","地理位置 API","","nocode")}} 获取地理信息。这就是为什么[谷歌地图](https://www.google.com/maps)可以找到你的位置，而且标示在地图上。
 - {{domxref("Canvas_API","画布（Canvas）","","nocode")}} 和 {{domxref("WebGL_API","WebGL","","nocode")}} API 可以创建生动的 2D 和 3D 图像。人们正运用这些 web 技术制作令人惊叹的作品。参见 [Chrome Experiments](https://experiments.withgoogle.com/collection/chrome) 以及 [webglsamples](https://webglsamples.org/)。
-- 诸如 {{domxref("HTMLMediaElement")}} 和 {{domxref("WebRTC API", "WebRTC","","nocode")}} 等[影音类 API](/zh-CN/docs/Web/Media/Audio_and_video_delivery) 让你可以利用多媒体做一些非常有趣的事，比如在网页中直接播放音乐和影片，或用自己的网络摄像头获取录像，然后在其他人的电脑上展示（试用简易版[截图演示](http://chrisdavidmills.github.io/snapshot/)以理解这个概念）。
+- 诸如 {{domxref("HTMLMediaElement")}} 和 {{domxref("WebRTC API", "WebRTC","","nocode")}} 等[影音类 API](/zh-CN/docs/Web/Media/Guides/Audio_and_video_delivery) 让你可以利用多媒体做一些非常有趣的事，比如在网页中直接播放音乐和影片，或用自己的网络摄像头获取录像，然后在其他人的电脑上展示（试用简易版[截图演示](http://chrisdavidmills.github.io/snapshot/)以理解这个概念）。
 
 > [!NOTE]
 > 上述很多演示都不能在旧浏览器中运行。推荐你在测试代码时使用诸如 Firefox、Chrome、Edge 或者 Opera 等现代浏览器。当代码即将交付生产环境时（也就是真实的客户即将使用真实的代码时），你还需要深入考虑[跨平台测试](/zh-CN/docs/Learn_web_development/Extensions/Testing)。