diff --git a/files/zh-cn/web/api/webgl_api/types/index.md b/files/zh-cn/web/api/webgl_api/types/index.md index 0b2679843cc323..cd687fe25bceb5 100644 --- a/files/zh-cn/web/api/webgl_api/types/index.md +++ b/files/zh-cn/web/api/webgl_api/types/index.md @@ -5,7 +5,7 @@ slug: Web/API/WebGL_API/Types {{DefaultAPISidebar("WebGL")}} -以下是[WebGL](/zh-CN/docs/Web/API/WebGL_API)提供的接口中用到的变量类型。 +以下是 [WebGL](/zh-CN/docs/Web/API/WebGL_API)提供的接口中用到的变量类型。 ## WebGL 1 diff --git a/files/zh-cn/web/api/webglactiveinfo/index.md b/files/zh-cn/web/api/webglactiveinfo/index.md index f480b6a791cda8..48a9a0281ac358 100644 --- a/files/zh-cn/web/api/webglactiveinfo/index.md +++ b/files/zh-cn/web/api/webglactiveinfo/index.md @@ -5,7 +5,7 @@ slug: Web/API/WebGLActiveInfo {{APIRef("WebGL")}} -**WebGLActiveInfo**是[WebGL API](/zh-CN/docs/Web/API/WebGL_API) 的一部分,并且代表了调用 {{domxref("WebGLRenderingContext.getActiveAttrib()")}} 和{{domxref("WebGLRenderingContext.getActiveUniform()")}} 这两个方法后传回的信息。 +**WebGLActiveInfo**是 [WebGL API](/zh-CN/docs/Web/API/WebGL_API) 的一部分,并且代表了调用 {{domxref("WebGLRenderingContext.getActiveAttrib()")}} 和{{domxref("WebGLRenderingContext.getActiveUniform()")}} 这两个方法后传回的信息。 ## 属性值 diff --git a/files/zh-cn/web/api/webglrenderingcontext/createtexture/index.md b/files/zh-cn/web/api/webglrenderingcontext/createtexture/index.md index ef7267e11b48ab..871c039c3a9f23 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/createtexture/index.md +++ b/files/zh-cn/web/api/webglrenderingcontext/createtexture/index.md @@ -23,7 +23,7 @@ WebGLTexture gl.createTexture(); ## 示例 -另见 [Using textures in WebGL](/zh-CN/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL)上的[WebGL tutorial](/zh-CN/docs/Web/API/WebGL_API/Tutorial) +另见 [Using textures in WebGL](/zh-CN/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL)上的 [WebGL tutorial](/zh-CN/docs/Web/API/WebGL_API/Tutorial) ### 创建一个纹理 diff --git a/files/zh-cn/web/api/webglrenderingcontext/enablevertexattribarray/index.md b/files/zh-cn/web/api/webglrenderingcontext/enablevertexattribarray/index.md index 8e00a30e05e568..3708e412a32569 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/enablevertexattribarray/index.md +++ b/files/zh-cn/web/api/webglrenderingcontext/enablevertexattribarray/index.md @@ -9,7 +9,7 @@ slug: Web/API/WebGLRenderingContext/enableVertexAttribArray > **备注:** 你可以通过以下方法关闭顶点属性数组 {{domxref("WebGLRenderingContext.disableVertexAttribArray", "disableVertexAttribArray()")}}. -在 WebGL 中,作用于顶点的数据会先储存在[attributes](/zh-CN/docs/Web/API/WebGL_API/Data#Attributes)。这些数据仅对 JavaScript 代码和顶点着色器可用。属性由索引号引用到 GPU 维护的属性列表中。在不同的平台或 GPU 上,某些顶点属性索引可能具有预定义的值。创建属性时,WebGL 层会分配其他属性。 +在 WebGL 中,作用于顶点的数据会先储存在 [attributes](/zh-CN/docs/Web/API/WebGL_API/Data#Attributes)。这些数据仅对 JavaScript 代码和顶点着色器可用。属性由索引号引用到 GPU 维护的属性列表中。在不同的平台或 GPU 上,某些顶点属性索引可能具有预定义的值。创建属性时,WebGL 层会分配其他属性。 无论怎样,都需要你使用 `enableVertexAttribArray()` 方法,来激活每一个属性以便使用,不被激活的属性是不会被使用的。一旦激活,以下其他方法就可以获取到属性的值了,包括{{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}}、{{domxref("WebGLRenderingContext.vertexAttrib", "vertexAttrib*()")}} 和 {{domxref("WebGLRenderingContext.getVertexAttrib", "getVertexAttrib()")}}。 diff --git a/files/zh-cn/web/api/webglrenderingcontext/gettexparameter/index.md b/files/zh-cn/web/api/webglrenderingcontext/gettexparameter/index.md index 5c241d354e03fc..4130be27e25e5d 100644 --- a/files/zh-cn/web/api/webglrenderingcontext/gettexparameter/index.md +++ b/files/zh-cn/web/api/webglrenderingcontext/gettexparameter/index.md @@ -5,7 +5,7 @@ slug: Web/API/WebGLRenderingContext/getTexParameter {{APIRef("WebGL")}} -**`WebGLRenderingContext.getTexParameter()`** 此[WebGL API](/zh-CN/docs/Web/API/WebGL_API)方法返回特定的纹理信息。 +**`WebGLRenderingContext.getTexParameter()`** 此 [WebGL API](/zh-CN/docs/Web/API/WebGL_API)方法返回特定的纹理信息。 ## 语法 diff --git a/files/zh-cn/web/api/webglshaderprecisionformat/index.md b/files/zh-cn/web/api/webglshaderprecisionformat/index.md index 104fa2bac79e9c..2a522ab7ff2624 100644 --- a/files/zh-cn/web/api/webglshaderprecisionformat/index.md +++ b/files/zh-cn/web/api/webglshaderprecisionformat/index.md @@ -3,7 +3,7 @@ title: WebGLShaderPrecisionFormat slug: Web/API/WebGLShaderPrecisionFormat --- -**WebGLShaderPrecisionFormat** 接口是[WebGL API](/zh-CN/docs/Web/API/WebGL_API) 的一部分,它表示通过调用{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}返回信息的信息。 +**WebGLShaderPrecisionFormat** 接口是 [WebGL API](/zh-CN/docs/Web/API/WebGL_API) 的一部分,它表示通过调用{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}返回信息的信息。 ## 属性 diff --git a/files/zh-cn/web/api/webgltexture/index.md b/files/zh-cn/web/api/webgltexture/index.md index 8dd48b535718cc..5802303947a3f6 100644 --- a/files/zh-cn/web/api/webgltexture/index.md +++ b/files/zh-cn/web/api/webgltexture/index.md @@ -3,7 +3,7 @@ title: WebGLTexture slug: Web/API/WebGLTexture --- -**WebGLTexture**接口是[WebGL API](/zh-CN/docs/Web/API/WebGL_API)的一部分,为不透明的纹理对象提供储存和状态等纹理操作。 +**WebGLTexture**接口是 [WebGL API](/zh-CN/docs/Web/API/WebGL_API)的一部分,为不透明的纹理对象提供储存和状态等纹理操作。 ## 描述 diff --git a/files/zh-cn/web/api/webglvertexarrayobject/index.md b/files/zh-cn/web/api/webglvertexarrayobject/index.md index 0220f86b606091..487c0b768efc04 100644 --- a/files/zh-cn/web/api/webglvertexarrayobject/index.md +++ b/files/zh-cn/web/api/webglvertexarrayobject/index.md @@ -5,7 +5,7 @@ slug: Web/API/WebGLVertexArrayObject {{APIRef("WebGL")}} -**`WebGLVertexArrayObject`**接口是[WebGL 2 API](/zh-CN/docs/Web/API/WebGL_API)的一部分,顶点数组对象 (VAOs) 指向顶点数组数据,并提供不同顶点数据集合的名称。 +**`WebGLVertexArrayObject`**接口是 [WebGL 2 API](/zh-CN/docs/Web/API/WebGL_API)的一部分,顶点数组对象 (VAOs) 指向顶点数组数据,并提供不同顶点数据集合的名称。 当使用`WebGLVertexArrayObject`对象时,这些方法会很有用: diff --git a/files/zh-cn/web/api/webrtc_api/index.md b/files/zh-cn/web/api/webrtc_api/index.md index 5719298a486d51..f5cc459a445f3d 100644 --- a/files/zh-cn/web/api/webrtc_api/index.md +++ b/files/zh-cn/web/api/webrtc_api/index.md @@ -44,7 +44,7 @@ WebRTC 包含了若干相互关联的 API 和协议以达到这个目标。你 - [使用 WebRTC 拍摄静止的照片](/zh-CN/docs/Web/API/WebRTC_API/Taking_still_photos) - : 这篇文章介绍了如何在 WebRTC 的支持下可以访问到电脑或者手机的摄像头并且使用它来拍摄照片。 - [一个简易 RTCDataChannel 的例子](/zh-CN/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample) - - : {{domxref("RTCDataChannel")}} 接口是一个特性,使用它你可以在两个点之间发送和接收任意数据。它的 API 和[WebSocket API](/zh-CN/docs/Web/API/WebSocket_API)非常相似,所以同样的代码对他们来说都可以使用。 + - : {{domxref("RTCDataChannel")}} 接口是一个特性,使用它你可以在两个点之间发送和接收任意数据。它的 API 和 [WebSocket API](/zh-CN/docs/Web/API/WebSocket_API)非常相似,所以同样的代码对他们来说都可以使用。 ## 资源 diff --git a/files/zh-cn/web/api/webrtc_api/protocols/index.md b/files/zh-cn/web/api/webrtc_api/protocols/index.md index 9279566d63efc8..3155504a28d194 100644 --- a/files/zh-cn/web/api/webrtc_api/protocols/index.md +++ b/files/zh-cn/web/api/webrtc_api/protocols/index.md @@ -13,7 +13,7 @@ slug: Web/API/WebRTC_API/Protocols ## STUN -NAT 的会话穿越功能[Session Traversal Utilities for **NAT** (STU**N**)](http://en.wikipedia.org/wiki/STUN) (缩略语的最后一个字母是 NAT 的首字母) 是一个允许位于 NAT 后的客户端找出自己的公网地址,判断出路由器阻止直连的限制方法的协议。 +NAT 的会话穿越功能 [Session Traversal Utilities for **NAT** (STU**N**)](http://en.wikipedia.org/wiki/STUN) (缩略语的最后一个字母是 NAT 的首字母) 是一个允许位于 NAT 后的客户端找出自己的公网地址,判断出路由器阻止直连的限制方法的协议。 客户端通过给公网的 STUN 服务器发送请求获得自己的公网地址信息,以及是否能够被(穿过路由器)访问。 @@ -21,7 +21,7 @@ NAT 的会话穿越功能[Session Traversal Utilities for **NAT** (STU**N**)](ht ## NAT -网络地址转换协议[Network Address Translation (NAT)](http://en.wikipedia.org/wiki/NAT) 用来给你的(私网)设备映射一个公网的 IP 地址的协议。一般情况下,路由器的 WAN 口有一个公网 IP,所有连接这个路由器 LAN 口的设备会分配一个私有网段的 IP 地址(例如 192.168.1.3)。私网设备的 IP 被映射成路由器的公网 IP 和唯一的端口,通过这种方式不需要为每一个私网设备分配不同的公网 IP,但是依然能被外网设备发现。 +网络地址转换协议 [Network Address Translation (NAT)](http://en.wikipedia.org/wiki/NAT) 用来给你的(私网)设备映射一个公网的 IP 地址的协议。一般情况下,路由器的 WAN 口有一个公网 IP,所有连接这个路由器 LAN 口的设备会分配一个私有网段的 IP 地址(例如 192.168.1.3)。私网设备的 IP 被映射成路由器的公网 IP 和唯一的端口,通过这种方式不需要为每一个私网设备分配不同的公网 IP,但是依然能被外网设备发现。 一些路由器严格地限定了谁能连接内网的设备。这种情况下,即使 STUN 服务器识别了该内网设备的公网 IP 和端口的映射,依然无法和这个内网设备建立连接。这种情况下就需要转向 TURN 协议。 @@ -29,13 +29,13 @@ NAT 的会话穿越功能[Session Traversal Utilities for **NAT** (STU**N**)](ht 一些路由器使用一种“对称型 NAT”的 NAT 模型。这意味着路由器只接受和对端先前建立的连接(就是下一次请求建立新的连接映射)。 -NAT 的中继穿越方式[Traversal Using Relays around NAT (TURN)](http://en.wikipedia.org/wiki/TURN) 通过 TURN 服务器中继所有数据的方式来绕过“对称型 NAT”。你需要在 TURN 服务器上创建一个连接,然后告诉所有对端设备发包到服务器上,TURN 服务器再把包转发给你。很显然这种方式是开销很大的,所以只有在没得选择的情况下采用。 +NAT 的中继穿越方式 [Traversal Using Relays around NAT (TURN)](http://en.wikipedia.org/wiki/TURN) 通过 TURN 服务器中继所有数据的方式来绕过“对称型 NAT”。你需要在 TURN 服务器上创建一个连接,然后告诉所有对端设备发包到服务器上,TURN 服务器再把包转发给你。很显然这种方式是开销很大的,所以只有在没得选择的情况下采用。 ![An interaction between two users of a WebRTC application involving STUN and TURN servers.](webrtc-turn.png) ## SDP -会话描述协议[Session Description Protocol (SDP)](http://en.wikipedia.org/wiki/Session_Description_Protocol) 是一个描述多媒体连接内容的协议,例如分辨率,格式,编码,加密算法等。所以在数据传输时两端都能够理解彼此的数据。本质上,这些描述内容的元数据并不是媒体流本身。 +会话描述协议 [Session Description Protocol (SDP)](http://en.wikipedia.org/wiki/Session_Description_Protocol) 是一个描述多媒体连接内容的协议,例如分辨率,格式,编码,加密算法等。所以在数据传输时两端都能够理解彼此的数据。本质上,这些描述内容的元数据并不是媒体流本身。 从技术上讲,SDP 并不是一个真正的协议,而是一种数据格式,用于描述在设备之间共享媒体的连接。 diff --git a/files/zh-cn/web/api/webrtc_api/session_lifetime/index.md b/files/zh-cn/web/api/webrtc_api/session_lifetime/index.md index fa3271098bc467..6f27bb36d76341 100644 --- a/files/zh-cn/web/api/webrtc_api/session_lifetime/index.md +++ b/files/zh-cn/web/api/webrtc_api/session_lifetime/index.md @@ -19,7 +19,7 @@ slug: Web/API/WebRTC_API/Session_lifetime ### 信令 -信令是在两个设备之间发送控制信息以确定通信协议、信道、媒体编解码器和格式以及数据传输方法以及任何所需的路由信息的过程。关于 WebRTC 的信令流程最重要的一点是:**信令在规范中并没有定义。**所以开发者需要自己决定如何实现这个过程。开发者可以为应用程序引擎选择任意的信息协议(如 SIP 或 XMPP),任意双向通信信道(如 WebSocket 或 XMLHttpRequest) 与持久连接服务器的 API(如[Google Channel API](https://developers.google.com/appengine/docs/python/channel/overview))一起工作。 +信令是在两个设备之间发送控制信息以确定通信协议、信道、媒体编解码器和格式以及数据传输方法以及任何所需的路由信息的过程。关于 WebRTC 的信令流程最重要的一点是:**信令在规范中并没有定义。**所以开发者需要自己决定如何实现这个过程。开发者可以为应用程序引擎选择任意的信息协议(如 SIP 或 XMPP),任意双向通信信道(如 WebSocket 或 XMLHttpRequest) 与持久连接服务器的 API(如 [Google Channel API](https://developers.google.com/appengine/docs/python/channel/overview))一起工作。 你可能会想,为什么这么一个对于建立 WebRTC 连接至关重要的基本过程居然没有定义在规范里?答案很简单:由于两个设备无法直接相互联系,规范无法预测 WebRTC 的所有可能用例,因此更明智的做法就是让开发人员们自己选择合适的网络技术和消息传递协议。 diff --git a/files/zh-cn/web/api/webrtc_api/signaling_and_video_calling/index.md b/files/zh-cn/web/api/webrtc_api/signaling_and_video_calling/index.md index 886b84a9007f0b..5c8d1f73716ab7 100644 --- a/files/zh-cn/web/api/webrtc_api/signaling_and_video_calling/index.md +++ b/files/zh-cn/web/api/webrtc_api/signaling_and_video_calling/index.md @@ -9,7 +9,7 @@ slug: Web/API/WebRTC_API/Signaling_and_video_calling [WebRTC](/zh-CN/docs/Web/API/WebRTC_API) 是一个完全对等技术,用于实时交换音频、视频和数据,同时提供一个中心警告。如其他地方所讨论的,必须进行一种发现和媒体格式协商,以使不同网络上的两个设备相互定位。这个过程被称为**信令**,并涉及两个设备连接到第三个共同商定的服务器。通过这个第三方服务器,这两台设备可以相互定位,并交换协商消息。 -在本文中,我们将进一步扩充 [WebSocket chat](https://webrtc-from-chat.glitch.me/) 作为我们的 WebSocket 文档的一部分(本文链接即将发布;它实际上还没有在线),以支持在用户之间的双向视频通话。你可以在[Glitch](https://webrtc-from-chat.glitch.me/)上查看这个例子,你也尝试[修改](https://glitch.com/edit/#!/remix/webrtc-from-chat)这个例子。你还可以在[GitHub](https://github.com/mdn/samples-server/tree/master/s/webrtc-from-chat)上查看完整的项目代码。 +在本文中,我们将进一步扩充 [WebSocket chat](https://webrtc-from-chat.glitch.me/) 作为我们的 WebSocket 文档的一部分(本文链接即将发布;它实际上还没有在线),以支持在用户之间的双向视频通话。你可以在 [Glitch](https://webrtc-from-chat.glitch.me/)上查看这个例子,你也尝试[修改](https://glitch.com/edit/#!/remix/webrtc-from-chat)这个例子。你还可以在 [GitHub](https://github.com/mdn/samples-server/tree/master/s/webrtc-from-chat)上查看完整的项目代码。 > **备注:** 如果你尝试在 Glitch 的例子,请注意任何代码的改动将立即重置所有连接。并且这个例子有短暂的延迟;Glitch 的例子仅仅作为简单的实验和测试用途。 @@ -17,7 +17,7 @@ slug: Web/API/WebRTC_API/Signaling_and_video_calling 两个设备之间建立 WebRTC 连接需要一个**信令服务器**来实现双方通过网络进行连接。信令服务器的作用是作为一个中间人帮助双方在尽可能少的暴露隐私的情况下建立连接。那我们如何实现这个服务器并且它是如何工作的呢? -WebRTC 并没有提供信令传递机制,你可以使用任何你喜欢的方式如[WebSocket](/zh-CN/docs/Web/API/WebSocket_API) 或者{{domxref("XMLHttpRequest")}} 等等,来交换彼此的令牌信息。 +WebRTC 并没有提供信令传递机制,你可以使用任何你喜欢的方式如 [WebSocket](/zh-CN/docs/Web/API/WebSocket_API) 或者{{domxref("XMLHttpRequest")}} 等等,来交换彼此的令牌信息。 重要的是信令服务器并不需要理解和解释信令数据内容。虽然它基于 {{Glossary("SDP")}}但这并不重要:通过信令服务器的消息的内容实际上是一个黑盒。重要的是,当{{Glossary("ICE")}}子系统指示你将信令数据发送给另一个对等方时,你就这样做,而另一个对等方知道如何接收此信息并将其传递给自己的 ICE 子系统。你所要做的就是来回传递信息。内容对信令服务器一点都不重要。 @@ -181,7 +181,7 @@ if (sendToClients) { #### 向信令服务器发送信息 -在整个代码中,我们调用 `sendToServer()` 以便向信令服务器发送消息。此函数使用[WebSocket](/zh-CN/docs/Web/API/WebSockets_API)连接执行其工作: +在整个代码中,我们调用 `sendToServer()` 以便向信令服务器发送消息。此函数使用 [WebSocket](/zh-CN/docs/Web/API/WebSockets_API)连接执行其工作: ```js function sendToServer(msg) { @@ -349,11 +349,11 @@ function createPeerConnection() { - {{domxref("RTCPeerConnection.onremovetrack")}} - : 调用与 `ontrack`相对应的对象来处理 `removetrack` 事件;当远程对等端从正在发送的媒体中删除磁道时,它将发送到`RTCPeerConnection`。参见[处理流的移除](#处理流的移除) 。 - {{domxref("RTCPeerConnection.oniceconnectionstatechange")}} - - : ICE 层发送 `iceconnectionstatechange` 事件,让你了解 ICE 连接状态的更改。这可以帮助你了解连接何时失败或丢失。我们将在下面的[ICE 连接状态](#ice_连接状态)中查看此示例的代码。 + - : ICE 层发送 `iceconnectionstatechange` 事件,让你了解 ICE 连接状态的更改。这可以帮助你了解连接何时失败或丢失。我们将在下面的 [ICE 连接状态](#ice_连接状态)中查看此示例的代码。 - {{domxref("RTCPeerConnection.onicegatheringstatechange")}} - : 当 ICE 代理收集候选对象的过程从一个状态切换到另一个状态(例如开始收集候选对象或完成协商)时,ICE 层将向你发送事件(“ICegulatingStateChange”)事件。见下文 [ICE 收集状态](#ice_收集状态)。 - {{domxref("RTCPeerConnection.onsignalingstatechange")}} - - : 当信令进程的状态更改时(或如果到信令服务器的连接更改时),WebRTC 架构将向你发送 `signalingstatechange` 消息。参见[ICE 信令状态](#ice_信令状态)查看我们的代码。 + - : 当信令进程的状态更改时(或如果到信令服务器的连接更改时),WebRTC 架构将向你发送 `signalingstatechange` 消息。参见 [ICE 信令状态](#ice_信令状态)查看我们的代码。 #### 开始协商 @@ -488,7 +488,7 @@ function handleICECandidateEvent(event) { ##### 接收 ICE 候选 -信令服务器使用它选择的任何方法将每个 ICE 候选传递给目标对等机;在我们的示例中,我们用的是 JSON 对象, `type` 属性包含字符串 `"new-ice-candidate"`。我们的 r `handleNewICECandidateMsg()` 函数由主[WebSocket](/zh-CN/docs/MDN/Doc_status/API/WebSockets)传入消息代码调用,以处理这些消息: +信令服务器使用它选择的任何方法将每个 ICE 候选传递给目标对等机;在我们的示例中,我们用的是 JSON 对象, `type` 属性包含字符串 `"new-ice-candidate"`。我们的 r `handleNewICECandidateMsg()` 函数由主 [WebSocket](/zh-CN/docs/MDN/Doc_status/API/WebSockets)传入消息代码调用,以处理这些消息: ```js function handleNewICECandidateMsg(msg) { @@ -611,7 +611,7 @@ function closeVideoCall() { 3. 通过调用{{domxref("RTCPeerConnection.close", "myPeerConnection.close()")}}.关闭 {{domxref("RTCPeerConnection")}} 。 4. 设置 `myPeerConnection` 为 `null`,确保我们的代码知道没有正在进行的调用;当用户单击用户列表中的名称时,这很有用。 -然后,对于传入和传出的{{HTMLElement("video")}}元素,我们使用它们的{{domxref("Element.removeAttribute", "removeAttribute()")}} 方法删除它们的 [`srcobject`](/zh-CN/docs/Web/HTML/Element/video#srcobject)和[`src`](/zh-CN/docs/Web/HTML/Element/video#src) 属性。这就完成了流与视频元素的分离。 +然后,对于传入和传出的{{HTMLElement("video")}}元素,我们使用它们的{{domxref("Element.removeAttribute", "removeAttribute()")}} 方法删除它们的 [`srcobject`](/zh-CN/docs/Web/HTML/Element/video#srcobject)和 [`src`](/zh-CN/docs/Web/HTML/Element/video#src) 属性。这就完成了流与视频元素的分离。 最后,我们在"Hang Up"按钮上将{{domxref("HTMLElement.disabled", "disabled")}}属性设置为 `true`,使其在没有调用的情况下不可点击;然后我们将`targetUsername` 设置为 `null` ,因为我们不再与任何人交谈。这允许用户呼叫另一个用户,或接收来电。 @@ -666,6 +666,6 @@ function handleICEGatheringStateChangeEvent(event) { ## 下一步 -现在你可以[在 Glitch 上尝试这个例子](https://webrtc-from-chat.glitch.me/),以看到它的实际效果。打开两个设备上的 Web 控制台并查看记录的输出,尽管你在上面所示的代码中看不到它,但是服务器上(以及[GitHub](https://github.com/mdn/samples-server/tree/master/s/webrtc-from-chat)上)的代码有很多控制台输出,因此你可以看到信令和连接进程在工作。 +现在你可以[在 Glitch 上尝试这个例子](https://webrtc-from-chat.glitch.me/),以看到它的实际效果。打开两个设备上的 Web 控制台并查看记录的输出,尽管你在上面所示的代码中看不到它,但是服务器上(以及 [GitHub](https://github.com/mdn/samples-server/tree/master/s/webrtc-from-chat)上)的代码有很多控制台输出,因此你可以看到信令和连接进程在工作。 另一个明显的改进是添加了一个“铃声”功能,这样一来,一个"用户 X 正在呼叫。你是否要应答?" 提示会首先出现,而不仅仅是请求用户允许使用相机和麦克风。 diff --git a/files/zh-cn/web/api/webrtc_api/simple_rtcdatachannel_sample/index.md b/files/zh-cn/web/api/webrtc_api/simple_rtcdatachannel_sample/index.md index 3d92a6ab39620d..cf9f396675094b 100644 --- a/files/zh-cn/web/api/webrtc_api/simple_rtcdatachannel_sample/index.md +++ b/files/zh-cn/web/api/webrtc_api/simple_rtcdatachannel_sample/index.md @@ -58,9 +58,9 @@ slug: Web/API/WebRTC_API/Simple_RTCDataChannel_sample ## The JavaScript code -你可以直接到[look at the code itself on GitHub](https://github.com/mdn/samples-server/tree/master/s/webrtc-simple-datachannel/main.js)来看代码,下面我们也会一步一步的解释。 +你可以直接到 [look at the code itself on GitHub](https://github.com/mdn/samples-server/tree/master/s/webrtc-simple-datachannel/main.js)来看代码,下面我们也会一步一步的解释。 -WebRTC API 大量使用了{{jsxref("Promise")}}. 这样会让建立链接的过程变得简单;如果你还没有到[ECMAScript 2015](/zh-CN/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla)了解过 Promise,你应该先去看看。另外本示例还使用了箭头语法[arrow functions](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)。 +WebRTC API 大量使用了{{jsxref("Promise")}}. 这样会让建立链接的过程变得简单;如果你还没有到 [ECMAScript 2015](/zh-CN/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla)了解过 Promise,你应该先去看看。另外本示例还使用了箭头语法 [arrow functions](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)。 ### 启动 diff --git a/files/zh-cn/web/api/websocket/bufferedamount/index.md b/files/zh-cn/web/api/websocket/bufferedamount/index.md index 135415957fd944..a9e18ecbf285eb 100644 --- a/files/zh-cn/web/api/websocket/bufferedamount/index.md +++ b/files/zh-cn/web/api/websocket/bufferedamount/index.md @@ -5,7 +5,7 @@ slug: Web/API/WebSocket/bufferedAmount {{APIRef("Web Sockets API")}} -**`WebSocket.bufferedAmount`是一个只读属性,用于返回已经被**[`send()`](#send)方法放入队列中但还没有被发送到网络中的数据的字节数。一旦队列中的所有数据被发送至网络,则该属性值将被重置为 0。但是,若在发送过程中连接被关闭,则属性值不会重置为 0。如果你不断地调用[`send()`](#send),则该属性值会持续增长 +**`WebSocket.bufferedAmount`是一个只读属性,用于返回已经被**[`send()`](#send)方法放入队列中但还没有被发送到网络中的数据的字节数。一旦队列中的所有数据被发送至网络,则该属性值将被重置为 0。但是,若在发送过程中连接被关闭,则属性值不会重置为 0。如果你不断地调用 [`send()`](#send),则该属性值会持续增长 The **`WebSocket.bufferedAmount`** read-only property returns the number of bytes of data that have been queued using calls to [`send()`](#send) but not yet transmitted to the network. This value resets to zero once all queued data has been sent. This value does not reset to zero when the connection is closed; if you keep calling [`send()`](#send), this will continue to climb. diff --git a/files/zh-cn/web/api/websockets_api/index.md b/files/zh-cn/web/api/websockets_api/index.md index 248ad88fa36763..e8ee51b8114f53 100644 --- a/files/zh-cn/web/api/websockets_api/index.md +++ b/files/zh-cn/web/api/websockets_api/index.md @@ -22,9 +22,9 @@ slug: Web/API/WebSockets_API - [µWebSockets](https://github.com/uWebSockets/uWebSockets):由 [C++11](https://isocpp.org/) 和 [Node.js](https://nodejs.org/) 实现的高度可扩展的 WebSocket 服务器和客户端.。 - [ClusterWS](https://github.com/ClusterWS/ClusterWS): 轻量级、快速和强大的框架,用于在 [Node.js](https://nodejs.org/) 中构建可伸缩的 WebSocket 应用程序。 - [Socket.IO](https://socket.io): 一个基于长轮询/WebSocket 的 [Node.js](https://nodejs.org) 第三方传输协议。 -- [SocketCluster](https://socketcluster.io/): 一个用于[Node.js](https://nodejs.org)的 pub/sub 专注于可伸缩 WebSocket 框架。 +- [SocketCluster](https://socketcluster.io/): 一个用于 [Node.js](https://nodejs.org)的 pub/sub 专注于可伸缩 WebSocket 框架。 - [WebSocket-Node](https://github.com/Worlize/WebSocket-Node): 一个用 [Node.js](https://nodejs.org/)实现 WebSocket 服务器 API。 -- [Total.js](https://www.totaljs.com/):一个用[Node.js](http://www.nodejs.org/) 实现的的 Web 应用程序框架(例如:WebSocket 聊天)。 +- [Total.js](https://www.totaljs.com/):一个用 [Node.js](http://www.nodejs.org/) 实现的的 Web 应用程序框架(例如:WebSocket 聊天)。 - [Faye](https://www.npmjs.com/package/faye-websocket): 一个 [Node.js](https://nodejs.org/) 的 [WebSocket](/zh-CN/docs/Web/API/WebSockets_API)(双向连接)和 [EventSource](/zh-CN/docs/Web/API/EventSource)(单向连接)的服务器和客户端。 - [SignalR](https://dotnet.microsoft.com/zh-cn/apps/aspnet/signalr): SignalR 在可用时将隐藏使用 WebSockets,在不可用时将优雅地使用其他技术和技术,而应用程序代码保持不变。 - [Caddy](https://caddyserver.com/docs/websocket): 能够将任意命令(stdin/stdout)代理为 websocket 的 web 服务器。 diff --git a/files/zh-cn/web/api/websockets_api/writing_a_websocket_server_in_java/index.md b/files/zh-cn/web/api/websockets_api/writing_a_websocket_server_in_java/index.md index 374d8eca0dd80f..4ea124111540cc 100644 --- a/files/zh-cn/web/api/websockets_api/writing_a_websocket_server_in_java/index.md +++ b/files/zh-cn/web/api/websockets_api/writing_a_websocket_server_in_java/index.md @@ -9,11 +9,11 @@ slug: Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java 虽然其他的服务端语言也能创建 WebSocket 服务,但是通过这个例子你可以看到使用 Java 来做这件事会更简单。 -这个服务符合协议[RFC 6455](http://tools.ietf.org/html/rfc6455),所以它只处理 Chrome 版本 16,Firefox 11,IE 10 及更高版本的连接。 +这个服务符合协议 [RFC 6455](http://tools.ietf.org/html/rfc6455),所以它只处理 Chrome 版本 16,Firefox 11,IE 10 及更高版本的连接。 ## 第一步 -WebSocket 通过[TCP(传输控制协议)](http://en.wikipedia.org/wiki/Transmission_Control_Protocol)通信。Java 的[ServerSocket](http://docs.oracle.com/javase/8/docs/api/java/net/ServerSocket.html) 类位于 java.net 包中。 +WebSocket 通过 [TCP(传输控制协议)](http://en.wikipedia.org/wiki/Transmission_Control_Protocol)通信。Java 的 [ServerSocket](http://docs.oracle.com/javase/8/docs/api/java/net/ServerSocket.html) 类位于 java.net 包中。 ### ServerSocket diff --git a/files/zh-cn/web/api/websockets_api/writing_websocket_client_applications/index.md b/files/zh-cn/web/api/websockets_api/writing_websocket_client_applications/index.md index 8e229c589df4bd..eb8c6c888aa7d6 100644 --- a/files/zh-cn/web/api/websockets_api/writing_websocket_client_applications/index.md +++ b/files/zh-cn/web/api/websockets_api/writing_websocket_client_applications/index.md @@ -34,7 +34,7 @@ WebSocket WebSocket( ### 连接错误 -如果尝试连接过程中发生错误,那么首先一个名为 "error" 的事件会被发送给 [`WebSocket`](/zh-CN/WebSockets/WebSockets_reference/WebSocket) 对象(然后调用其`onerror` handler),然后 [`CloseEvent`](/zh-CN/WebSockets/WebSockets_reference/CloseEvent) 被发送给[`WebSocket`](/zh-CN/WebSockets/WebSockets_reference/WebSocket) (然后调用其 `onclose` handler)以说明连接关闭的原因。 +如果尝试连接过程中发生错误,那么首先一个名为 "error" 的事件会被发送给 [`WebSocket`](/zh-CN/WebSockets/WebSockets_reference/WebSocket) 对象(然后调用其`onerror` handler),然后 [`CloseEvent`](/zh-CN/WebSockets/WebSockets_reference/CloseEvent) 被发送给 [`WebSocket`](/zh-CN/WebSockets/WebSockets_reference/WebSocket) (然后调用其 `onclose` handler)以说明连接关闭的原因。 在 Firefox 11 中,通常会从 Mozilla 平台的控制台中收到一个描述性的错误信息,以及一个通过 [`CloseEvent`](/zh-CN/WebSockets/WebSockets_reference/CloseEvent) 在 [RFC 6455, Section 7.4](http://tools.ietf.org/html/rfc6455#section-7.4) 中定义的错误代码。 @@ -72,7 +72,7 @@ var exampleSocket = new WebSocket("ws://www.example.com/socketserver", [ exampleSocket.send("Here's some text that the server is urgently awaiting!"); ``` -你可以把数据作为字符串,{{ domxref("Blob") }},或者[`ArrayBuffer`](/zh-CN/JavaScript_typed_arrays/ArrayBuffer)来发送。 +你可以把数据作为字符串,{{ domxref("Blob") }},或者 [`ArrayBuffer`](/zh-CN/JavaScript_typed_arrays/ArrayBuffer)来发送。 > **备注:** 在版本 11 之前,Firefox 只支持以字符串的形式发送数据。 @@ -86,7 +86,7 @@ exampleSocket.onopen = function (event) { ### 使用 JSON 发送对象 -你可以方便地使用[JSON](/zh-CN/JSON) 来向服务器发送复杂一些的数据。例如一个聊天程序与服务器交互的协议可以通过封装在 JSON 里的数据来实现: +你可以方便地使用 [JSON](/zh-CN/JSON) 来向服务器发送复杂一些的数据。例如一个聊天程序与服务器交互的协议可以通过封装在 JSON 里的数据来实现: ```js // 服务器向所有用户发送文本 diff --git a/files/zh-cn/web/api/websockets_api/writing_websocket_servers/index.md b/files/zh-cn/web/api/websockets_api/writing_websocket_servers/index.md index 32d474f39dd410..d6b170f046bad1 100644 --- a/files/zh-cn/web/api/websockets_api/writing_websocket_servers/index.md +++ b/files/zh-cn/web/api/websockets_api/writing_websocket_servers/index.md @@ -5,7 +5,7 @@ slug: Web/API/WebSockets_API/Writing_WebSocket_servers **WebSocket 服务器是一个**TCP 应用程序,监听服务器上任何遵循特定协议的端口,就这么简单。创建自定义服务器的任务往往听起来很吓人,然而,在你选择的平台上实现一个简单的 WebSocket 服务器是很容易的。 -WebSocket 服务器可以用任何实现了[Berkeley sockets](https://en.wikipedia.org/wiki/Berkeley_sockets)的服务器端编程语言编写,如 C(++) 或 Python 甚至[PHP](/zh-CN/docs/PHP)和[服务器端 JavaScript](/zh-CN/docs/Web/JavaScript/Server-Side_JavaScript)。这不是任何特定语言的教程,而是作为指导,以方便编写自己的服务器。 +WebSocket 服务器可以用任何实现了 [Berkeley sockets](https://en.wikipedia.org/wiki/Berkeley_sockets)的服务器端编程语言编写,如 C(++) 或 Python 甚至 [PHP](/zh-CN/docs/PHP)和[服务器端 JavaScript](/zh-CN/docs/Web/JavaScript/Server-Side_JavaScript)。这不是任何特定语言的教程,而是作为指导,以方便编写自己的服务器。 你需要知道 HTTP 的工作原理,并具有中级编程经验。根据语言帮助(Depending on language support),可能需要 TCP 套接字的知识。本指南的范围是介绍编写 WebSocket 服务器所需的最低知识。 @@ -55,7 +55,7 @@ Connection: Upgrade Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= ``` -另外,服务器可以在这时候决定插件或子协议,详情参见[杂项](/zh-CN/docs/Web/API/WebSockets_API/Writing_WebSocket_servers#Miscellaneous)。 `Sec-WebSocket-Accept` 参数很有趣,它需要服务器通过客户端发送的`Sec-WebSocket-Key` 计算出来。怎样计算呢,把客户发送的 `Sec-WebSocket-Key` 和 "`258EAFA5-E914-47DA-95CA-C5AB0DC85B11`" (这个叫做 "[魔法值](https://en.wikipedia.org/wiki/Magic_string)") 连接起来,把结果用[SHA-1](https://zh.wikipedia.org/wiki/SHA-1)编码,再用[base64](https://zh.wikipedia.org/wiki/Base64)编码一次,就可以了。 +另外,服务器可以在这时候决定插件或子协议,详情参见[杂项](/zh-CN/docs/Web/API/WebSockets_API/Writing_WebSocket_servers#Miscellaneous)。 `Sec-WebSocket-Accept` 参数很有趣,它需要服务器通过客户端发送的`Sec-WebSocket-Key` 计算出来。怎样计算呢,把客户发送的 `Sec-WebSocket-Key` 和 "`258EAFA5-E914-47DA-95CA-C5AB0DC85B11`" (这个叫做 "[魔法值](https://en.wikipedia.org/wiki/Magic_string)") 连接起来,把结果用 [SHA-1](https://zh.wikipedia.org/wiki/SHA-1)编码,再用 [base64](https://zh.wikipedia.org/wiki/Base64)编码一次,就可以了。 > **备注:** 这看起来繁复的处理使得客户端明确服务端是否支持 WebSocket。这是十分重要的,如果服务端接收到一个 WebSocket 连接但是把数据作为 HTTP 请求理解可能会导致安全问题。 @@ -176,7 +176,7 @@ _TODO_ ### 子协议 -可以把子协议理解成一个自定义[XML schema](https://en.wikipedia.org/wiki/XML_schema)或[文件类型声明](https://en.wikipedia.org/wiki/Document_Type_Definition)。你仍然使用 XML 和它的语法,但是还要额外受限于你声明的格式。 +可以把子协议理解成一个自定义 [XML schema](https://en.wikipedia.org/wiki/XML_schema)或[文件类型声明](https://en.wikipedia.org/wiki/Document_Type_Definition)。你仍然使用 XML 和它的语法,但是还要额外受限于你声明的格式。 WebSocket 子协议就是像这样的东西。它们不作任何假设实现,只是确立框架。就像一个文件类型或概要。与文件类型或概要类似,通信双方都需要同意子协议;于文件类型或概要不同的是,子协议在服务端实现,而不能由客户端参考第三方。 diff --git a/files/zh-cn/web/api/webvr_api/index.md b/files/zh-cn/web/api/webvr_api/index.md index 6a711f0fe6dcfc..3d843cd1c56157 100644 --- a/files/zh-cn/web/api/webvr_api/index.md +++ b/files/zh-cn/web/api/webvr_api/index.md @@ -27,7 +27,7 @@ The {{domxref("HMDVRDevice.getEyeParameters()")}} method returns a {{domxref("VR > **备注:** To find out more about using these interfaces in your own app, read [Using the WebVR API](/zh-CN/docs/Web/API/WebVR_API/Using_the_WebVR_API). To learn more about the basic concepts behind VR, read [WebVR concepts](/zh-CN/docs/Web/API/WebVR_API/WebVR_concepts). > -> 注释:要了解更多关于如何在你的应用程序中使用这些接口,请阅读文章[Using the WebVR API](/zh-CN/docs/Web/API/WebVR_API/Using_the_WebVR_API). 要学习更多关于 VR 技术背后的基础概念,请阅读文章 [WebVR concepts](/zh-CN/docs/Web/API/WebVR_API/WebVR_concepts). +> 注释:要了解更多关于如何在你的应用程序中使用这些接口,请阅读文章 [Using the WebVR API](/zh-CN/docs/Web/API/WebVR_API/Using_the_WebVR_API). 要学习更多关于 VR 技术背后的基础概念,请阅读文章 [WebVR concepts](/zh-CN/docs/Web/API/WebVR_API/WebVR_concepts). ### Using controllers: Combining WebVR with the Gamepad API diff --git a/files/zh-cn/web/api/webvr_api/using_the_webvr_api/index.md b/files/zh-cn/web/api/webvr_api/using_the_webvr_api/index.md index 8c1ec536a1aeb2..a4b92c107eac4e 100644 --- a/files/zh-cn/web/api/webvr_api/using_the_webvr_api/index.md +++ b/files/zh-cn/web/api/webvr_api/using_the_webvr_api/index.md @@ -4,7 +4,7 @@ slug: Web/API/WebVR_API/Using_the_WebVR_API --- The [WebVR API](/zh-CN/docs/Web/API/WebVR_API) is a fantastic addition to the web developer's toolkit, allowing access to virtual reality hardware such as the [Oculus Rift](https://developer.oculus.com/), and converting outputted movement and orientation data into view rendering updates on a web app. But how do you get started in developing VR apps for the Web? This article will guide you through the basics. -[WebVR API](/zh-CN/docs/Web/API/WebVR_API) 对于 web 开发者来说,是一个令人心动的功能包,允许你连接到类似于[Oculus Rift](https://developer.oculus.com/) 这样的虚拟现实硬件,并且能够在你的 web app 中,将从硬件获取到的位置移动数据和姿态角数据,实时更新你的渲染显示输出。具体要如何在 Web 上开始开发你的 VR app 呢?这篇文章将会提供基础的引导信息。 +[WebVR API](/zh-CN/docs/Web/API/WebVR_API) 对于 web 开发者来说,是一个令人心动的功能包,允许你连接到类似于 [Oculus Rift](https://developer.oculus.com/) 这样的虚拟现实硬件,并且能够在你的 web app 中,将从硬件获取到的位置移动数据和姿态角数据,实时更新你的渲染显示输出。具体要如何在 Web 上开始开发你的 VR app 呢?这篇文章将会提供基础的引导信息。 > **备注:** Currently WebVR is at an experimental stage (you can find the [latest spec here](http://mozvr.github.io/webvr-spec/webvr.html)); it currently works best in Firefox Nightly/Developer Edition, with some aspects of it also working in Google Chrome. Read [Bringing VR to Chrome](http://blog.tojicode.com/2014/07/bringing-vr-to-chrome.html) by Brandon Jones for more details on that. > 注意:当前 WebVR 还是体验实验阶段(你可以从[这里](http://mozvr.github.io/webvr-spec/webvr.html)找到最新规格说明);它已经在 Firefox Nightly/Developer Edition 的版本上工作的很好了,部分功能也在 Google Chrome 上可以正常工作了。详细请访问由 Brandon Jones 在 [Bringing VR to Chrome](http://blog.tojicode.com/2014/07/bringing-vr-to-chrome.html)提供的更多内容。 @@ -29,12 +29,12 @@ Once your environment is set up, try visiting one of our [MozVR projects](http:/ ## Introducing a simple demo
简单示例介绍 There are a number of WebVR demos available at the [MozVR team repo](https://github.com/MozVR/), and the [MDN webvr-tests repo](https://github.com/mdn/webvr-tests), but the main one we will be focusing on in this article is our [positionsensorvrdevice](https://github.com/mdn/webvr-tests/tree/gh-pages/positionsensorvrdevice) demo ([view it live](http://mdn.github.io/webvr-tests/positionsensorvrdevice/)): -在[MozVR team repo](https://github.com/MozVR/)和[MDN webvr-tests repo](https://github.com/mdn/webvr-tests)提供了一定数量的 WebVR 示例,在这篇文章里,我们将着重关注我们的 [positionsensorvrdevice](https://github.com/mdn/webvr-tests/tree/gh-pages/positionsensorvrdevice) 提供的示例 (点此访问 live [view it live](http://mdn.github.io/webvr-tests/positionsensorvrdevice/)) +在 [MozVR team repo](https://github.com/MozVR/)和 [MDN webvr-tests repo](https://github.com/mdn/webvr-tests)提供了一定数量的 WebVR 示例,在这篇文章里,我们将着重关注我们的 [positionsensorvrdevice](https://github.com/mdn/webvr-tests/tree/gh-pages/positionsensorvrdevice) 提供的示例 (点此访问 live [view it live](http://mdn.github.io/webvr-tests/positionsensorvrdevice/)) ![](vrpositionsensor-demo.png) This is a simple 2.5D demo showing a Firefox logo seen on a left and right eye view, rendered on [HTML5 Canvas](/zh-CN/docs/Web/HTML/Element/canvas). When you view the demo with a VR HMD and click the canvas, the demo will go fullscreen, and you'll be able to approach the Firefox logo. It will move realistically as you move your head towards and away from it, up and down and side to side, and rotate your head in any direction. -这是一个简单的 2.5D 的示例,在左右眼两个区域,以[HTML5 Canvas](/zh-CN/docs/Web/HTML/Element/canvas)的方式,同时渲染了 Firefox 的 LOGO。当你使用 VR 头显来观看这个示例时,点击画面,这个 DEMO 就会切换到全屏形式,可以尝试靠近 Firefox 图标。将会非常真实地同步你的头部运动后应该看到的内容,包括可以上下移动、左右移动、转动你的头部看想看的方向。 +这是一个简单的 2.5D 的示例,在左右眼两个区域,以 [HTML5 Canvas](/zh-CN/docs/Web/HTML/Element/canvas)的方式,同时渲染了 Firefox 的 LOGO。当你使用 VR 头显来观看这个示例时,点击画面,这个 DEMO 就会切换到全屏形式,可以尝试靠近 Firefox 图标。将会非常真实地同步你的头部运动后应该看到的内容,包括可以上下移动、左右移动、转动你的头部看想看的方向。 The demo was deliberately kept simple so that you can easily see what is going on with the WebVR code. The API is simple enough that you can easily apply WebVR-controlled movement to any app you like, from simple DOM-based interfaces to complex WebGL scenes. 这个示例程序特意做成足够地简单,以便于你可以更容易地了解 WebVR 代码的工作过程。从代码中你可以看到,这些 API 足够的简单,你可以轻松地将这些 WebVR 控制移动和转动的能力,移植到新的应用功能中,比如一个简单的使用 WebGL 来显示的基于 DOM 接口的应用。 diff --git a/files/zh-cn/web/api/webxr_device_api/index.md b/files/zh-cn/web/api/webxr_device_api/index.md index aeb59b7617cd54..bd82feb39f1fbd 100644 --- a/files/zh-cn/web/api/webxr_device_api/index.md +++ b/files/zh-cn/web/api/webxr_device_api/index.md @@ -16,7 +16,7 @@ WebXR-兼容性设备包括沉浸式 3D 运动和定位跟踪耳机,通过框 在最基本的层面上,通过计算应用于场景的透视图,以从每个用户的视角呈现场景,从而在 3D 中呈现场景,考虑到眼睛之间的常规距离,然后渲染场景两次,每只眼睛一次。然后将生成的图像 (场景在一个帧上呈现两次,每只眼睛一半) 显示给用户。 -由于 [WebGL](/zh-CN/docs/Web/API/WebGL_API) 用于将 3D 世界渲染到 WebXR 会话中,因此你首先应该熟悉 WebGL 的一般用法以及 3D 图形的基本知识。你很可能不会直接使用 WebGL API,而是利用在 WebGL 之上构建的框架或库之一来使其使用更加方便。其中最流行的是[three.js](https://threejs.org/)。 +由于 [WebGL](/zh-CN/docs/Web/API/WebGL_API) 用于将 3D 世界渲染到 WebXR 会话中,因此你首先应该熟悉 WebGL 的一般用法以及 3D 图形的基本知识。你很可能不会直接使用 WebGL API,而是利用在 WebGL 之上构建的框架或库之一来使其使用更加方便。其中最流行的是 [three.js](https://threejs.org/)。 使用库而不是直接使用 WebGL API 的一个特殊好处是,库取向于实现虚拟相机函数性的接口。OpenGL(WebGL 的扩展)不直接提供照相机视图,使用库模拟一个的话可以使你的工作变得非常非常容易,特别是在构建允许在虚拟世界中自由移动的代码时。 diff --git a/files/zh-cn/web/api/wheelevent/deltaz/index.md b/files/zh-cn/web/api/wheelevent/deltaz/index.md index 0e2fdeeed86953..e9f9f7f5da9ba4 100644 --- a/files/zh-cn/web/api/wheelevent/deltaz/index.md +++ b/files/zh-cn/web/api/wheelevent/deltaz/index.md @@ -5,7 +5,7 @@ slug: Web/API/WheelEvent/deltaZ {{APIRef("DOM Events")}} -**`WheelEvent.deltaZ`** 只读属性是一个 `double` 类型值,声明 Z 轴滚动量以[`WheelEvent.deltaMode`](/zh-CN/docs/Web/API/WheelEvent/deltaMode) 为单位。 +**`WheelEvent.deltaZ`** 只读属性是一个 `double` 类型值,声明 Z 轴滚动量以 [`WheelEvent.deltaMode`](/zh-CN/docs/Web/API/WheelEvent/deltaMode) 为单位。 ## 语法 diff --git a/files/zh-cn/web/api/window/beforeunload_event/index.md b/files/zh-cn/web/api/window/beforeunload_event/index.md index cdcb56afcee4a2..f3a462a76f8afd 100644 --- a/files/zh-cn/web/api/window/beforeunload_event/index.md +++ b/files/zh-cn/web/api/window/beforeunload_event/index.md @@ -43,9 +43,9 @@ slug: Web/API/Window/beforeunload_event 为避免意外弹出窗口,除非页面已与之交互,否则浏览器可能不会显示在`beforeunload`事件中创建的提示,甚至根本不会显示它们。 -将事件处理程序/监听器加到`window`或 `document`的`beforeunload`事件后,将阻止浏览器使用内存中的页面导航缓存,例如[Firefox 的 Back-Forward 缓存](/zh-CN/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching)或[WebKit 的 Page Cache](https://webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/)。 +将事件处理程序/监听器加到`window`或 `document`的`beforeunload`事件后,将阻止浏览器使用内存中的页面导航缓存,例如 [Firefox 的 Back-Forward 缓存](/zh-CN/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching)或 [WebKit 的 Page Cache](https://webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/)。 -HTML 规范指出在此事件中调用{{domxref("window.alert()")}},{{domxref("window.confirm()")}}以及{{domxref("window.prompt()")}}方法,可能会失效。更多详细信息,请参见[HTML 规范](https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#user-prompts)。 +HTML 规范指出在此事件中调用{{domxref("window.alert()")}},{{domxref("window.confirm()")}}以及{{domxref("window.prompt()")}}方法,可能会失效。更多详细信息,请参见 [HTML 规范](https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#user-prompts)。 ## 示例 diff --git a/files/zh-cn/web/api/window/devicemotion_event/index.md b/files/zh-cn/web/api/window/devicemotion_event/index.md index 2b84ae85389eac..c14c4fcf805602 100644 --- a/files/zh-cn/web/api/window/devicemotion_event/index.md +++ b/files/zh-cn/web/api/window/devicemotion_event/index.md @@ -7,7 +7,7 @@ slug: Web/API/Window/devicemotion_event ## 摘要 -一个发送到窗口的[`devicemotion`](/zh-CN/docs/Web/API/Window/devicemotion_event)事件处理程序。 +一个发送到窗口的 [`devicemotion`](/zh-CN/docs/Web/API/Window/devicemotion_event)事件处理程序。 ## 语法 diff --git a/files/zh-cn/web/api/window/dump/index.md b/files/zh-cn/web/api/window/dump/index.md index 73589f615e843f..399c73c106798b 100644 --- a/files/zh-cn/web/api/window/dump/index.md +++ b/files/zh-cn/web/api/window/dump/index.md @@ -23,11 +23,11 @@ dump(message); ## 注解 -`dump()`的常见用途是调试 JavaScript。`dump`如果使用`console`选项启动了 Firefox 进程,则将消息发送到系统控制台(本地控制台)。如果`console`未指定该选项,则输出到对应终端。dump() 的输出不会发送到[浏览器控制台](/zh-CN/docs/Tools/Browser_Console)。输出可以使用[console.log()](/zh-CN/docs/Web/API/Console.log)发送到[浏览器控制台](/zh-CN/docs/Tools/Browser_Console)。特殊的代码还能将消息记录到[错误控制台](/zh-CN/docs/Error_Console) / [浏览器控制台](/zh-CN/docs/Tools/Browser_Console)。[`Components.utils.reportError`](/zh-CN/docs/Components.utils.reportError)[`nsIConsoleService`](/zh-CN/docs/XPCOM_Interface_Reference/nsIConsoleService) +`dump()`的常见用途是调试 JavaScript。`dump`如果使用`console`选项启动了 Firefox 进程,则将消息发送到系统控制台(本地控制台)。如果`console`未指定该选项,则输出到对应终端。dump() 的输出不会发送到[浏览器控制台](/zh-CN/docs/Tools/Browser_Console)。输出可以使用 [console.log()](/zh-CN/docs/Web/API/Console.log)发送到[浏览器控制台](/zh-CN/docs/Tools/Browser_Console)。特殊的代码还能将消息记录到[错误控制台](/zh-CN/docs/Error_Console) / [浏览器控制台](/zh-CN/docs/Tools/Browser_Console)。[`Components.utils.reportError`](/zh-CN/docs/Components.utils.reportError)[`nsIConsoleService`](/zh-CN/docs/XPCOM_Interface_Reference/nsIConsoleService) `dump()`也可用于使用 JavaScript 实现的 XPCOM 组件,尽管 {{domxref("window")}} 不是组件中的全局对象。它也明确地在[沙箱中提供](/zh-CN/docs/Components.utils.Sandbox#Methods_available_on_the_Sandbox_object)。但是,这种使用`dump`不受下面提到的偏好的影响 --- 它将始终显示出来。因此,建议你自己检查此偏好或使用自己的调试偏好,以确保在根本不感兴趣的情况下,不会向用户的控制台发送大量调试内容。请注意,`dump`XPCOM 组件的输出将转到`stderr`,而`dump`其他地方将输出`stdout`。 -[Gecko](/zh-CN/docs/Gecko) 在默认情况 **dump()** 下被禁用 - 它不会做任何事情,但也不会引起错误。要查看`dump`输出,你必须通过设置首选项`browser.dom.window.dump.enabled`来启用它。你可以在[about:config](http://kb.mozillazine.org/About:config)或[user.js 文件中](http://kb.mozillazine.org/User.js_file)设置首选项。注意:`about:config`默认情况下不会列出此首选项,你可能需要创建它(右键单击内容区域 - >新建 - >布尔值)。 +[Gecko](/zh-CN/docs/Gecko) 在默认情况 **dump()** 下被禁用 - 它不会做任何事情,但也不会引起错误。要查看`dump`输出,你必须通过设置首选项`browser.dom.window.dump.enabled`来启用它。你可以在 [about:config](http://kb.mozillazine.org/About:config)或 [user.js 文件中](http://kb.mozillazine.org/User.js_file)设置首选项。注意:`about:config`默认情况下不会列出此首选项,你可能需要创建它(右键单击内容区域 - >新建 - >布尔值)。 在 Windows 上,你需要一个控制台才能看到任何东西。如果你还没有,请关闭应用程序并使用命令行参数重新打开`console`应该创建控制台或使用`-attach-console`现有的控制台。在其他操作系统上,从终端启动应用程序就足够了。 @@ -37,7 +37,7 @@ dump(message); firefox > console.txt 2>&1 ``` -> **备注:** 如果你希望控制台消息出现在用于启动应用程序的控制台中,则可以使用[Gecko 控制台重定向器](https://github.com/matthewkastor/Redirector)。预编译的二进制文件可以在压缩的归档文件 [https://github.com/matthewkastor/Redirector/archive/master.zip 中找到](https://github.com/matthewkastor/Redirector/archive/master.zip),`Redirector-master\Gecko\Console Redirector\bin\Release`将所有 dll 和 exe 复制到任何你想要的地方。然后跑`Console Redirector.exe /?` +> **备注:** 如果你希望控制台消息出现在用于启动应用程序的控制台中,则可以使用 [Gecko 控制台重定向器](https://github.com/matthewkastor/Redirector)。预编译的二进制文件可以在压缩的归档文件 [https://github.com/matthewkastor/Redirector/archive/master.zip 中找到](https://github.com/matthewkastor/Redirector/archive/master.zip),`Redirector-master\Gecko\Console Redirector\bin\Release`将所有 dll 和 exe 复制到任何你想要的地方。然后跑`Console Redirector.exe /?` ## Specification diff --git a/files/zh-cn/web/api/window/history/index.md b/files/zh-cn/web/api/window/history/index.md index 033d725516526c..f831e49b6a3883 100644 --- a/files/zh-cn/web/api/window/history/index.md +++ b/files/zh-cn/web/api/window/history/index.md @@ -28,7 +28,7 @@ history.go(-1); //等同于 history.back(); 出于安全考虑,History 对象不允许未授权代码访问会话历史(session History)中其他页面的 URLs,但可以导航到其他会话历史(session History)指向的页面。 -未授权代码无法清除会话历史(session History),也不能禁用回退/前进功能。最快捷的可用方式是使用[location.replace()](/zh-CN/DOM/window.location#replace)方法,提供指定的 URL 来替换当前的会话历史(session history)。 +未授权代码无法清除会话历史(session History),也不能禁用回退/前进功能。最快捷的可用方式是使用 [location.replace()](/zh-CN/DOM/window.location#replace)方法,提供指定的 URL 来替换当前的会话历史(session history)。 ## 规范 diff --git a/files/zh-cn/web/api/window/mozinnerscreeny/index.md b/files/zh-cn/web/api/window/mozinnerscreeny/index.md index 253daf14596c59..cb274266ccb323 100644 --- a/files/zh-cn/web/api/window/mozinnerscreeny/index.md +++ b/files/zh-cn/web/api/window/mozinnerscreeny/index.md @@ -9,7 +9,7 @@ slug: Web/API/Window/mozInnerScreenY 在屏幕坐标下获取窗口视口左上角的 Y 坐标 -> **备注:**该坐标是以 CSS 像素报告显示的,而不是以硬件像素。这意味着它可以受缩放级别的影响; 要计算物理屏幕像素的实际数量,需要使用[`nsIDOMWindowUtils.screenPixelsPerCSSPixel`](/zh-CN/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils) 属性 +> **备注:**该坐标是以 CSS 像素报告显示的,而不是以硬件像素。这意味着它可以受缩放级别的影响; 要计算物理屏幕像素的实际数量,需要使用 [`nsIDOMWindowUtils.screenPixelsPerCSSPixel`](/zh-CN/docs/XPCOM_Interface_Reference/nsIDOMWindowUtils) 属性 ## 语法 diff --git a/files/zh-cn/web/api/window/ondragdrop/index.md b/files/zh-cn/web/api/window/ondragdrop/index.md index 41b7538bd9020a..4680e8a62d7d8d 100644 --- a/files/zh-cn/web/api/window/ondragdrop/index.md +++ b/files/zh-cn/web/api/window/ondragdrop/index.md @@ -3,7 +3,7 @@ title: Window.ondragdrop slug: Web/API/Window/ondragdrop --- -> **警告:** 在 Firefox 50 中已删除,并且从未在任何其他浏览器中实行。请改用现代标准的[HTML5 拖放](/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API)功能。 +> **警告:** 在 Firefox 50 中已删除,并且从未在任何其他浏览器中实行。请改用现代标准的 [HTML5 拖放](/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API)功能。 ## 摘要 @@ -19,7 +19,7 @@ window.addEventListener("dragdrop", funcRef, useCapturing); - funcRef - : 要注册的事件处理函数。 -[Gecko](/zh-CN/docs/Web/API/Window/en/Gecko)([Firefox bug 112288](https://bugzil.la/112288)) 中未实现`window.ondragdrop`属性和`ondragdrop`属性,你必须使用`addEventListener`。有关详细信息,请参见[addEventListener](/zh-CN/docs/Web/API/Window/en/DOM/element.addEventListener)。 +[Gecko](/zh-CN/docs/Web/API/Window/en/Gecko)([Firefox bug 112288](https://bugzil.la/112288)) 中未实现`window.ondragdrop`属性和`ondragdrop`属性,你必须使用`addEventListener`。有关详细信息,请参见 [addEventListener](/zh-CN/docs/Web/API/Window/en/DOM/element.addEventListener)。 **示例** diff --git a/files/zh-cn/web/api/window/postmessage/index.md b/files/zh-cn/web/api/window/postmessage/index.md index 6a24dbfe977992..8c51bd9efea7b2 100644 --- a/files/zh-cn/web/api/window/postmessage/index.md +++ b/files/zh-cn/web/api/window/postmessage/index.md @@ -16,7 +16,7 @@ otherWindow.postMessage(message, targetOrigin, [transfer]); ``` - `otherWindow` - - : 其他窗口的一个引用,比如 iframe 的 contentWindow 属性、执行[window.open](/zh-CN/docs/DOM/window.open)返回的窗口对象、或者是命名过或数值索引的[window.frames](/zh-CN/docs/DOM/window.frames)。 + - : 其他窗口的一个引用,比如 iframe 的 contentWindow 属性、执行 [window.open](/zh-CN/docs/DOM/window.open)返回的窗口对象、或者是命名过或数值索引的 [window.frames](/zh-CN/docs/DOM/window.frames)。 - `message` - : 将要发送到其他 window 的数据。它将会被[结构化克隆算法](/zh-CN/docs/DOM/The_structured_clone_algorithm)序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。\[[1](/zh-CN/docs/)] - `targetOrigin` diff --git a/files/zh-cn/web/api/window/scrollmaxx/index.md b/files/zh-cn/web/api/window/scrollmaxx/index.md index e63525b3e3fc9f..488fff326a8633 100644 --- a/files/zh-cn/web/api/window/scrollmaxx/index.md +++ b/files/zh-cn/web/api/window/scrollmaxx/index.md @@ -26,7 +26,7 @@ window.scrollTo(maxX, 0); ## 提示 -不要用这个属性来获得文档总宽度,文档总宽度不等于[window.innerWidth](/zh-CN/docs/DOM/window.innerWidth) + window\.scrollMaxX。因为 {{domxref("window.innerWidth")}}包含所有可见的垂直滚动条的宽度,所以结果会超出文档总宽度,多出所有可见的垂直滚动条的宽度。作为替代,可使用{{domxref("element.scrollWidth","document.body.scrollWidth")}}。查看相关:{{domxref("window.scrollMaxY")}}。 +不要用这个属性来获得文档总宽度,文档总宽度不等于 [window.innerWidth](/zh-CN/docs/DOM/window.innerWidth) + window\.scrollMaxX。因为 {{domxref("window.innerWidth")}}包含所有可见的垂直滚动条的宽度,所以结果会超出文档总宽度,多出所有可见的垂直滚动条的宽度。作为替代,可使用{{domxref("element.scrollWidth","document.body.scrollWidth")}}。查看相关:{{domxref("window.scrollMaxY")}}。 ## 规范 diff --git a/files/zh-cn/web/api/window/setimmediate/index.md b/files/zh-cn/web/api/window/setimmediate/index.md index bfa7119df5a6cc..4849d473075f36 100644 --- a/files/zh-cn/web/api/window/setimmediate/index.md +++ b/files/zh-cn/web/api/window/setimmediate/index.md @@ -7,7 +7,7 @@ slug: Web/API/Window/setImmediate 该方法用来把一些需要长时间运行的操作放在一个回调函数里,在浏览器完成后面的其他语句后,就立刻执行这个回调函数。 -> **备注:** 该方法可能不会被批准成为标准,目前只有最新版本的 Internet Explorer 和 Node.js 0.10+ 实现了该方法。它遇到了 [Gecko](https://bugzilla.mozilla.org/show_bug.cgi?id=686201)(Firefox) 和[Webkit](http://code.google.com/p/chromium/issues/detail?id=146172) (Google/Apple) 的阻力。 +> **备注:** 该方法可能不会被批准成为标准,目前只有最新版本的 Internet Explorer 和 Node.js 0.10+ 实现了该方法。它遇到了 [Gecko](https://bugzilla.mozilla.org/show_bug.cgi?id=686201)(Firefox) 和 [Webkit](http://code.google.com/p/chromium/issues/detail?id=146172) (Google/Apple) 的阻力。 ## 语法 @@ -31,7 +31,7 @@ var immediateID = setImmediate(func); - {{ domxref("window.postMessage") }} 可以被用来触发一个 immediate 但会产生回调。请注意,Internet Explorer 8 包含 postMessage 的同步版本,这意味着它不能被用来作为代替品。 - [MessageChannel](/zh-CN/docs/Web/API/MessageChannel) 可以在 Web Workers 内部很好的被使用,而 postMessage 的语义意味着它不能在那使用。 -- `setTimeout(fn, 0)`_可以使用_, 然而按照[HTML 规范](https://html.spec.whatwg.org/multipage/webappapis.html#timers), 嵌套深度超过 5 级的定时器,会被限制在 4ms , 他没有为 setImmediate 的天然及时性提供合适的 polyfill. +- `setTimeout(fn, 0)`_可以使用_, 然而按照 [HTML 规范](https://html.spec.whatwg.org/multipage/webappapis.html#timers), 嵌套深度超过 5 级的定时器,会被限制在 4ms , 他没有为 setImmediate 的天然及时性提供合适的 polyfill. 所有这些技术都被纳入 [robust setImmediate polyfill](https://github.com/NobleJS/setImmediate) 中。 diff --git a/files/zh-cn/web/api/worker/index.md b/files/zh-cn/web/api/worker/index.md index a7785563800242..57ac89d03df817 100644 --- a/files/zh-cn/web/api/worker/index.md +++ b/files/zh-cn/web/api/worker/index.md @@ -29,7 +29,7 @@ Worker 也可以创建新的 Worker,当然,所有 Worker 必须与其创建 - {{domxref("Worker.onmessage")}} - : 当{{domxref("MessageEvent")}}类型的事件冒泡到 worker 时,事件监听函数 {{ domxref("EventListener") }} 被调用。例如,一个消息通过 {{domxref("DedicatedWorkerGlobalScope.postMessage")}},从执行者发送到父页面对象,消息保存在事件对象的 {{domxref("MessageEvent.data", "data")}} 属性中。 - {{domxref("Worker.onmessageerror")}} - - : 当[`messageerror`](/zh-CN/docs/Web/API/DedicatedWorkerGlobalScope/messageerror_event) 类型的事件发生时,对应的事件处理器代码被调用。 + - : 当 [`messageerror`](/zh-CN/docs/Web/API/DedicatedWorkerGlobalScope/messageerror_event) 类型的事件发生时,对应的事件处理器代码被调用。 ## 方法 @@ -69,7 +69,7 @@ first.onchange = function () { ### 跨域行为的错误事件 -浏览器的早期版本中,加载跨域的执行者脚本导致 `SecurityError`事件。根据规范的变更,而新版本的浏览器只有[`error`](/zh-CN/docs/Web/API/Element/error_event)事件发生 +浏览器的早期版本中,加载跨域的执行者脚本导致 `SecurityError`事件。根据规范的变更,而新版本的浏览器只有 [`error`](/zh-CN/docs/Web/API/Element/error_event)事件发生 ## 相关链接 diff --git a/files/zh-cn/web/api/xmlhttprequest/getresponseheader/index.md b/files/zh-cn/web/api/xmlhttprequest/getresponseheader/index.md index 4fbccf41cc6283..dc08921efc51cb 100644 --- a/files/zh-cn/web/api/xmlhttprequest/getresponseheader/index.md +++ b/files/zh-cn/web/api/xmlhttprequest/getresponseheader/index.md @@ -50,7 +50,7 @@ client.onreadystatechange = function() { //设定侦听器 onreadystatechange。 ## 参见 -- 如何使用[XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) +- 如何使用 [XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) - [HTTP headers](/zh-CN/docs/Web/HTTP/Headers) - {{DOMxRef("XMLHttpRequest.getAllResponseHeaders", "getAllResponseHeaders()")}} - {{DOMxRef("XMLHttpRequest.response", "response")}} diff --git a/files/zh-cn/web/api/xmlhttprequest/index.md b/files/zh-cn/web/api/xmlhttprequest/index.md index 66b82c5775c512..88b0acc34c5357 100644 --- a/files/zh-cn/web/api/xmlhttprequest/index.md +++ b/files/zh-cn/web/api/xmlhttprequest/index.md @@ -66,7 +66,7 @@ _此接口继承了 {{domxref("XMLHttpRequestEventTarget")}} 和 {{domxref("Even 作为 `XMLHttpRequest` 实例的属性之一,所有浏览器都支持 `onreadystatechange`。 -后来,许多浏览器实现了一些额外的事件(`onload`、`onerror`、`onprogress` 等)。详见[Using XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)。 +后来,许多浏览器实现了一些额外的事件(`onload`、`onerror`、`onprogress` 等)。详见 [Using XMLHttpRequest](/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)。 更多现代浏览器,包括 Firefox,除了可以设置 `on*` 属性外,也提供标准的监听器 {{domxref("EventTarget.addEventListener", "addEventListener()")}} API 来监听`XMLHttpRequest` 事件。 diff --git a/files/zh-cn/web/api/xmlhttprequest/overridemimetype/index.md b/files/zh-cn/web/api/xmlhttprequest/overridemimetype/index.md index 65999fe303787c..ab609f120e5d8a 100644 --- a/files/zh-cn/web/api/xmlhttprequest/overridemimetype/index.md +++ b/files/zh-cn/web/api/xmlhttprequest/overridemimetype/index.md @@ -24,7 +24,7 @@ XMLHttpRequest.overrideMimeType(mimeType) 这个样例指定 Content-Type 为“text/plain",为接受的数据重写 ContentType -> **备注:** 如果服务器没有指定一个[`Content-Type`](/zh-CN/docs/Web/HTTP/Headers/Content-Type) 头,{{domxref("XMLHttpRequest")}} 默认 MIME 类型为`"text/xml"`. 如果接受的数据不是有效的 XML,将会出现格”格式不正确“的错误。你能够通过调用 `overrideMimeType()` 指定各种类型来避免这种情况。 +> **备注:** 如果服务器没有指定一个 [`Content-Type`](/zh-CN/docs/Web/HTTP/Headers/Content-Type) 头,{{domxref("XMLHttpRequest")}} 默认 MIME 类型为`"text/xml"`. 如果接受的数据不是有效的 XML,将会出现格”格式不正确“的错误。你能够通过调用 `overrideMimeType()` 指定各种类型来避免这种情况。 ```js // Interpret the received data as plain text diff --git a/files/zh-cn/web/api/xmlhttprequest/send/index.md b/files/zh-cn/web/api/xmlhttprequest/send/index.md index 4bab2862784546..73496e58886c92 100644 --- a/files/zh-cn/web/api/xmlhttprequest/send/index.md +++ b/files/zh-cn/web/api/xmlhttprequest/send/index.md @@ -52,7 +52,7 @@ XMLHttpRequest.send(FormData data); 如果发送的数据是 Document 对象,需要在发送之前将其序列化。当发送一个 Document 对象时,Firefox 3 之前的版本都是使用 UTF-8 编码发送请求的;FireFox 3 则使用由 `body.xmlEncoding` 指定的编码格式正确的发送文档,但如果未指定编码格式,则使用 UTF-8 编码格式发送。 -如果是一个 nsIInputStream 接口,它必须与 nsIUploadChannel 的 `setUploadStream()` 方法兼容。在这种情况下,将 Content-Length 的头部添加到请求中,它的值则使用 nsIInputStream 接口的 `available()` 方法获取。任何报头包括在数据流顶部的都会被当做报文主体。所以,应该在发送请求即调用 `send()` 方法之前使用[`setRequestHeader()`](#setRequestHeader) 方法设置 Content-Type 头部来指定数据流的 MIME 类型。 +如果是一个 nsIInputStream 接口,它必须与 nsIUploadChannel 的 `setUploadStream()` 方法兼容。在这种情况下,将 Content-Length 的头部添加到请求中,它的值则使用 nsIInputStream 接口的 `available()` 方法获取。任何报头包括在数据流顶部的都会被当做报文主体。所以,应该在发送请求即调用 `send()` 方法之前使用 [`setRequestHeader()`](#setRequestHeader) 方法设置 Content-Type 头部来指定数据流的 MIME 类型。 发送二进制内容的最佳方法(如上传文件)是使用一个与 `send()` 方法结合的 [ArrayBufferView](/zh-CN/docs/Web/API/ArrayBufferView) 或者 [Blobs](/zh-CN/docs/Web/API/Blob) diff --git a/files/zh-cn/web/api/xmlhttprequest/statustext/index.md b/files/zh-cn/web/api/xmlhttprequest/statustext/index.md index 2714df7a72b2ac..068a3152b614e3 100644 --- a/files/zh-cn/web/api/xmlhttprequest/statustext/index.md +++ b/files/zh-cn/web/api/xmlhttprequest/statustext/index.md @@ -3,7 +3,7 @@ title: XMLHttpRequest.statusText slug: Web/API/XMLHttpRequest/statusText --- -{{APIRef('XMLHttpRequest')}}只读属性 **`XMLHttpRequest.statusText`** 返回了`XMLHttpRequest` 请求中由服务器返回的一个[`DOMString`](/zh-CN/docs/Web/API/DOMString) 类型的文本信息,这则信息中也包含了响应的数字状态码。不同于使用一个数字来指示的状态码[`XMLHTTPRequest.status`](/zh-CN/docs/Web/API/XMLHTTPRequest/status),这个属性包含了返回状态对应的文本信息,例如"OK"或是"Not Found"。如果请求的状态[`readyState`](/zh-CN/docs/Web/API/XMLHttpRequest/readyState)的值为"UNSENT"或者"OPENED",则这个属性的值将会是一个空字符串。如果服务器未明确指定一个状态文本信息,则`statusText`的值将会被自动赋值为"OK"。 +{{APIRef('XMLHttpRequest')}}只读属性 **`XMLHttpRequest.statusText`** 返回了`XMLHttpRequest` 请求中由服务器返回的一个 [`DOMString`](/zh-CN/docs/Web/API/DOMString) 类型的文本信息,这则信息中也包含了响应的数字状态码。不同于使用一个数字来指示的状态码 [`XMLHTTPRequest.status`](/zh-CN/docs/Web/API/XMLHTTPRequest/status),这个属性包含了返回状态对应的文本信息,例如"OK"或是"Not Found"。如果请求的状态 [`readyState`](/zh-CN/docs/Web/API/XMLHttpRequest/readyState)的值为"UNSENT"或者"OPENED",则这个属性的值将会是一个空字符串。如果服务器未明确指定一个状态文本信息,则`statusText`的值将会被自动赋值为"OK"。 ## 例子 diff --git a/files/zh-cn/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.md b/files/zh-cn/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.md index b2656ee9ae16e4..540cde1db7c3a8 100644 --- a/files/zh-cn/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.md +++ b/files/zh-cn/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.md @@ -187,7 +187,7 @@ if (request.status === 200) { Hello World!! ``` -**`myTask.js`** (包含了[`Worker`](/zh-CN/DOM/Worker)代码): +**`myTask.js`** (包含了 [`Worker`](/zh-CN/DOM/Worker)代码): ```js self.onmessage = function (oEvent) { @@ -206,7 +206,7 @@ self.onmessage = function (oEvent) { ### 将同步 XHR 用例调整到 Beacon API -在某些情况下,XMLHttpRequest 的同步使用是不可替代的,就像在 [window.onunload](/zh-CN/docs/Web/API/Window/onunload)和[window.onbeforeunload](/zh-CN/docs/Web/API/Window/onbeforeunload) 事件期间一样。你应该考虑使用带有 `Keepalive` 标志的 `fetch` API。当 `keepalive` 的 `fetch` 不可用时,可以考虑使用 [navigator.sendBeacon](/zh-CN/docs/Web/API/Navigator/sendBeacon) API 可以支持这些用例,通常在提供良好 UX 的同时。 +在某些情况下,XMLHttpRequest 的同步使用是不可替代的,就像在 [window.onunload](/zh-CN/docs/Web/API/Window/onunload)和 [window.onbeforeunload](/zh-CN/docs/Web/API/Window/onbeforeunload) 事件期间一样。你应该考虑使用带有 `Keepalive` 标志的 `fetch` API。当 `keepalive` 的 `fetch` 不可用时,可以考虑使用 [navigator.sendBeacon](/zh-CN/docs/Web/API/Navigator/sendBeacon) API 可以支持这些用例,通常在提供良好 UX 的同时。 以下示例(来自 [sendBeacon](/zh-CN/docs/Web/API/Navigator/sendBeacon) 文档)显示了一个理论分析代码,该代码尝试通过在卸载处理程序中使用同步 XMLHttpRequest 将数据提交给服务器。这导致页面的卸载被延迟。 diff --git a/files/zh-cn/web/api/xmlhttprequest/using_xmlhttprequest/index.md b/files/zh-cn/web/api/xmlhttprequest/using_xmlhttprequest/index.md index 0937939f2b830c..096b77a9de9b03 100644 --- a/files/zh-cn/web/api/xmlhttprequest/using_xmlhttprequest/index.md +++ b/files/zh-cn/web/api/xmlhttprequest/using_xmlhttprequest/index.md @@ -888,7 +888,7 @@ oReq.send(null); ### XMLHttpRequests 被停止 -如果你的 XMLHttpRequest 收到 `status=0` 和 `statusText=null` 的返回,这意味着请求无法执行。就是[无法发送](http://www.w3.org/TR/XMLHttpRequest/#dom-xmlhttprequest-unsent). 一个可能导致的原因是当 [`XMLHttpRequest` origin](http://www.w3.org/TR/XMLHttpRequest/#xmlhttprequest-origin) (创建的 XMLHttpRequest) 改变时,XMLHttpRequest 执行 `open()`.。这种情况是可能发生的,举个例子,我们在一个窗口的`onunload`事件中关闭 XMLHttpRequest,但实际上在即将关闭窗口时,之前创建的 XMLHttpRequest 仍然在那里,最后当这个窗口失去焦点、另一个窗口获得焦点时,它还是发送了请求(也就是`open()`)。最有效的避免这个问题的方法是为新窗口的 {{domxref("Element/DOMActivate_event", "DOMActivate")}} 事件设置一个监听器,一旦窗口关闭,它的[`unload`](/zh-CN/docs/Web/API/Window/unload_event)事件便触发。 +如果你的 XMLHttpRequest 收到 `status=0` 和 `statusText=null` 的返回,这意味着请求无法执行。就是[无法发送](http://www.w3.org/TR/XMLHttpRequest/#dom-xmlhttprequest-unsent). 一个可能导致的原因是当 [`XMLHttpRequest` origin](http://www.w3.org/TR/XMLHttpRequest/#xmlhttprequest-origin) (创建的 XMLHttpRequest) 改变时,XMLHttpRequest 执行 `open()`.。这种情况是可能发生的,举个例子,我们在一个窗口的`onunload`事件中关闭 XMLHttpRequest,但实际上在即将关闭窗口时,之前创建的 XMLHttpRequest 仍然在那里,最后当这个窗口失去焦点、另一个窗口获得焦点时,它还是发送了请求(也就是`open()`)。最有效的避免这个问题的方法是为新窗口的 {{domxref("Element/DOMActivate_event", "DOMActivate")}} 事件设置一个监听器,一旦窗口关闭,它的 [`unload`](/zh-CN/docs/Web/API/Window/unload_event)事件便触发。 ## Worker diff --git a/files/zh-cn/web/css/-moz-user-input/index.md b/files/zh-cn/web/css/-moz-user-input/index.md index 250bb86839dfbb..63ca8196c81135 100644 --- a/files/zh-cn/web/css/-moz-user-input/index.md +++ b/files/zh-cn/web/css/-moz-user-input/index.md @@ -5,7 +5,7 @@ slug: Web/CSS/-moz-user-input {{Non-standard_header}}{{CSSRef}} -在 Mozilla 应用程序中,**`-moz-user-input`** 决定元素是否将接受用户输入。A 类似的属性 **`user-focus`** 是在[CSS3 UI 规范的前身的早期草案](http://www.w3.org/TR/2000/WD-css3-userint-20000216)中提出的,但被工作组拒绝。 +在 Mozilla 应用程序中,**`-moz-user-input`** 决定元素是否将接受用户输入。A 类似的属性 **`user-focus`** 是在 [CSS3 UI 规范的前身的早期草案](http://www.w3.org/TR/2000/WD-css3-userint-20000216)中提出的,但被工作组拒绝。 {{cssinfo}} diff --git a/files/zh-cn/web/css/-webkit-overflow-scrolling/index.md b/files/zh-cn/web/css/-webkit-overflow-scrolling/index.md index 134486857450ce..6dc1886ebd8151 100644 --- a/files/zh-cn/web/css/-webkit-overflow-scrolling/index.md +++ b/files/zh-cn/web/css/-webkit-overflow-scrolling/index.md @@ -26,7 +26,7 @@ slug: Web/CSS/-webkit-overflow-scrolling ### 规范 -尚未有相关规范。另在 Apple 提供的[Safari CSS 参考文档](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling)中有所提及。 +尚未有相关规范。另在 Apple 提供的 [Safari CSS 参考文档](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-overflow-scrolling)中有所提及。 ### 浏览器兼容性 diff --git a/files/zh-cn/web/css/-webkit-tap-highlight-color/index.md b/files/zh-cn/web/css/-webkit-tap-highlight-color/index.md index e9572181379f2d..bec5220f9d2f86 100644 --- a/files/zh-cn/web/css/-webkit-tap-highlight-color/index.md +++ b/files/zh-cn/web/css/-webkit-tap-highlight-color/index.md @@ -33,4 +33,4 @@ _不属于规范的一部分。_ Apple [有自己的 safari web 内容指南的 ## 浏览器兼容性 -webkit/safari, Blink/Chrome,以及[IE 的一些版本。]() +webkit/safari, Blink/Chrome,以及 [IE 的一些版本。]() diff --git a/files/zh-cn/web/css/-webkit-touch-callout/index.md b/files/zh-cn/web/css/-webkit-touch-callout/index.md index c1565508e3de90..1450c979c5e1cc 100644 --- a/files/zh-cn/web/css/-webkit-touch-callout/index.md +++ b/files/zh-cn/web/css/-webkit-touch-callout/index.md @@ -7,7 +7,7 @@ slug: Web/CSS/-webkit-touch-callout ## 概述 -`-webkit-touch-callout` 这个[CSS](/zh-CN/docs/Web/CSS) 属性禁用了默认的 callout 展示,callout 是指当触摸并按住一个元素的时候出现的提示。 +`-webkit-touch-callout` 这个 [CSS](/zh-CN/docs/Web/CSS) 属性禁用了默认的 callout 展示,callout 是指当触摸并按住一个元素的时候出现的提示。 当在 iOS 上一直按住一个目标元素时,Safari 会展示一个关于这个链接的 callout 信息。`webkit-touch-callout`属性允许禁用掉这一行为。 diff --git a/files/zh-cn/web/css/@font-face/index.md b/files/zh-cn/web/css/@font-face/index.md index 8f9f3e60b35f28..dd0000dbf17a6c 100644 --- a/files/zh-cn/web/css/@font-face/index.md +++ b/files/zh-cn/web/css/@font-face/index.md @@ -18,7 +18,7 @@ slug: Web/CSS/@font-face ## 概述 -这是一个叫做`@font-face` 的[CSS](/zh-CN/docs/CSS) [@规则](/zh-CN/docs/CSS/At-rule) ,它允许网页开发者为其网页指定在线字体。通过这种作者自备字体的方式,`@font-face` 可以消除对用户电脑字体的依赖。 `@font-face` 不仅可以放在在 CSS 的最顶层,也可以放在 @规则 的 [条件规则组](/zh-CN/docs/CSS/At-rule#Conditional_Group_Rules) 中。 +这是一个叫做`@font-face` 的 [CSS](/zh-CN/docs/CSS) [@规则](/zh-CN/docs/CSS/At-rule) ,它允许网页开发者为其网页指定在线字体。通过这种作者自备字体的方式,`@font-face` 可以消除对用户电脑字体的依赖。 `@font-face` 不仅可以放在在 CSS 的最顶层,也可以放在 @规则 的 [条件规则组](/zh-CN/docs/CSS/At-rule#Conditional_Group_Rules) 中。 ## 语法 diff --git a/files/zh-cn/web/css/@property/index.md b/files/zh-cn/web/css/@property/index.md index dd943d2021398a..55294faac03be2 100644 --- a/files/zh-cn/web/css/@property/index.md +++ b/files/zh-cn/web/css/@property/index.md @@ -5,7 +5,7 @@ slug: Web/CSS/@property {{CSSRef}}{{SeeCompatTable}} -**`@property`** [CSS](/zh-CN/docs/Web/CSS) {{cssxref("at-rule")}}是[CSS Houdini](/zh-CN/docs/Web/Houdini) API 的一部分,它允许开发者显式地定义他们的{{cssxref('--*', 'CSS 自定义属性')}}, 允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。 +**`@property`** [CSS](/zh-CN/docs/Web/CSS) {{cssxref("at-rule")}}是 [CSS Houdini](/zh-CN/docs/Web/Houdini) API 的一部分,它允许开发者显式地定义他们的{{cssxref('--*', 'CSS 自定义属性')}}, 允许进行属性类型检查、设定默认值以及定义该自定义属性是否可以被继承。 `@property` 规则提供了一个直接在样式表中注册自定义属性的方式,而无需运行任何 JS 代码。有效的 `@property` 规则会注册一个自定义属性,就像 {{domxref('CSS.registerProperty')}} 函数被使用同样的参数调用了一样。 diff --git a/files/zh-cn/web/css/@property/syntax/index.md b/files/zh-cn/web/css/@property/syntax/index.md index 1dd6d79467aff9..42114d09833212 100644 --- a/files/zh-cn/web/css/@property/syntax/index.md +++ b/files/zh-cn/web/css/@property/syntax/index.md @@ -23,7 +23,7 @@ syntax: "*"; /* 任何有效字符 */ ## 取值 -规范定义的、受语法支持的字符串。支持的语法是[CSS types](/zh-CN/docs/Web/CSS/CSS_Types)的子集。这些可以单独使用,一些类型也可以结合使用。 +规范定义的、受语法支持的字符串。支持的语法是 [CSS types](/zh-CN/docs/Web/CSS/CSS_Types)的子集。这些可以单独使用,一些类型也可以结合使用。 - `""` - : 任何有效的 {{cssxref("<length>")}} 值。 diff --git a/files/zh-cn/web/css/_colon_dir/index.md b/files/zh-cn/web/css/_colon_dir/index.md index 228bbe0f903c01..bc3ccccfa66094 100644 --- a/files/zh-cn/web/css/_colon_dir/index.md +++ b/files/zh-cn/web/css/_colon_dir/index.md @@ -9,7 +9,7 @@ slug: Web/CSS/:dir ## 总结 -`:dir()`伪类匹配特定文字书写方向的元素。在 HTML 中,文字方向由[`dir`](/zh-CN/docs/Web/HTML/Element/html#dir)属性决定。其他的文档类型可能有其他定义文字方向的方法。 +`:dir()`伪类匹配特定文字书写方向的元素。在 HTML 中,文字方向由 [`dir`](/zh-CN/docs/Web/HTML/Element/html#dir)属性决定。其他的文档类型可能有其他定义文字方向的方法。 值得注意的是用 CSS 伪类 `:dir()` 并不等于使用 `[dir=…]` 属性选择器。后者匹配 [`dir`](/zh-CN/docs/Web/HTML/Element/html#dir) 的值且不会匹配到未定义此属性的元素,即使该元素继承了父元素的属性;类似的, `[dir=rtl]` 或 `[dir=ltr]` 不会匹配到 dir 属性的值为 auto 的元素。而 `:dir()`会匹配经过客户端计算后的属性,不管是继承的 dir 值还是 dir 值为 auto 的。 diff --git a/files/zh-cn/web/css/_colon_nth-last-child/index.md b/files/zh-cn/web/css/_colon_nth-last-child/index.md index fe9d74c1efc718..949cd8a56cea48 100644 --- a/files/zh-cn/web/css/_colon_nth-last-child/index.md +++ b/files/zh-cn/web/css/_colon_nth-last-child/index.md @@ -5,7 +5,7 @@ slug: Web/CSS/:nth-last-child {{CSSRef}} -**`:nth-last-child()`** 这个[CSS](/zh-CN/docs/Web/CSS) [伪类](/zh-CN/docs/Web/CSS/Pseudo-classes) 从兄弟节点中从后往前匹配处于某些位置的元素 +**`:nth-last-child()`** 这个 [CSS](/zh-CN/docs/Web/CSS) [伪类](/zh-CN/docs/Web/CSS/Pseudo-classes) 从兄弟节点中从后往前匹配处于某些位置的元素 ```css /* 在所有兄弟节点中,从后往前 diff --git a/files/zh-cn/web/css/_doublecolon_after/index.md b/files/zh-cn/web/css/_doublecolon_after/index.md index 04c13df9b0609b..14d9e6767b94a2 100644 --- a/files/zh-cn/web/css/_doublecolon_after/index.md +++ b/files/zh-cn/web/css/_doublecolon_after/index.md @@ -5,7 +5,7 @@ slug: Web/CSS/::after {{CSSRef}} -CSS[伪元素](/zh-CN/CSS/Pseudo-elements)`::after`用来创建一个伪元素,作为已选中元素的最后一个子元素。通常会配合{{ cssxref("content") }}属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。 +CSS [伪元素](/zh-CN/CSS/Pseudo-elements)`::after`用来创建一个伪元素,作为已选中元素的最后一个子元素。通常会配合{{ cssxref("content") }}属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。 {{EmbedInteractiveExample("pages/tabbed/pseudo-element-after.html", "tabbed-standard")}} diff --git a/files/zh-cn/web/css/_doublecolon_cue/index.md b/files/zh-cn/web/css/_doublecolon_cue/index.md index 19c2873ab6f4c0..a0b3430c70fcd9 100644 --- a/files/zh-cn/web/css/_doublecolon_cue/index.md +++ b/files/zh-cn/web/css/_doublecolon_cue/index.md @@ -5,7 +5,7 @@ slug: Web/CSS/::cue {{CSSRef}} -::cue CSS [伪元素](/zh-CN/docs/Web/CSS/Pseudo-elements)匹配所选元素中的[WebVTT](/zh-CN/docs/Web/API/WebVTT_API)提示。这可以用于在 VTT 轨道的媒体中使用字幕和其他线索。 +::cue CSS [伪元素](/zh-CN/docs/Web/CSS/Pseudo-elements)匹配所选元素中的 [WebVTT](/zh-CN/docs/Web/API/WebVTT_API)提示。这可以用于在 VTT 轨道的媒体中使用字幕和其他线索。 只有 CSS 一小部分属性可以与 `::cue` 伪元素一起使用: diff --git a/files/zh-cn/web/css/border-bottom-left-radius/index.md b/files/zh-cn/web/css/border-bottom-left-radius/index.md index 2aa8c8405bb731..0e524b8b60fd80 100644 --- a/files/zh-cn/web/css/border-bottom-left-radius/index.md +++ b/files/zh-cn/web/css/border-bottom-left-radius/index.md @@ -11,7 +11,7 @@ slug: Web/CSS/border-bottom-left-radius 一个无论是图像或颜色的背景,都会在边框上被裁剪,即使背景是圆角的; 裁剪的确切位置由 {{cssxref("background-clip")}} 属性定义。 -> **备注:** 如果该属性的值没有被一个在**`border-bottom-left-radius`** 属性后,作用于当前元素上的{{cssxref("border-radius")}}简写属性设置,那么该属性值将会被[shorthand property](/zh-CN/docs/Web/CSS/Shorthand_properties)重置为初始值。 +> **备注:** 如果该属性的值没有被一个在**`border-bottom-left-radius`** 属性后,作用于当前元素上的{{cssxref("border-radius")}}简写属性设置,那么该属性值将会被 [shorthand property](/zh-CN/docs/Web/CSS/Shorthand_properties)重置为初始值。 {{cssinfo}} diff --git a/files/zh-cn/web/css/border-right/index.md b/files/zh-cn/web/css/border-right/index.md index 36573abd489e03..44baa4ebe86178 100644 --- a/files/zh-cn/web/css/border-right/index.md +++ b/files/zh-cn/web/css/border-right/index.md @@ -5,7 +5,7 @@ slug: Web/CSS/border-right {{CSSRef}} -CSS 属性 **border-`right`** 是属性{{ Cssxref("border-right-color") }}, {{ Cssxref("border-right-style") }}, 和{{ Cssxref("border-right-width") }}的三者的缩写。这些属性都是在描述一个元素的右边的边框[`border`](/zh-CN/docs/Web/CSS/border)。 +CSS 属性 **border-`right`** 是属性{{ Cssxref("border-right-color") }}, {{ Cssxref("border-right-style") }}, 和{{ Cssxref("border-right-width") }}的三者的缩写。这些属性都是在描述一个元素的右边的边框 [`border`](/zh-CN/docs/Web/CSS/border)。 ```css border-right: 1px; diff --git a/files/zh-cn/web/css/border-top/index.md b/files/zh-cn/web/css/border-top/index.md index 3fd2b72061dd25..57246c749973bd 100644 --- a/files/zh-cn/web/css/border-top/index.md +++ b/files/zh-cn/web/css/border-top/index.md @@ -5,7 +5,7 @@ slug: Web/CSS/border-top {{CSSRef}} -CSS 属性 **border-top**是属性 {{Cssxref("border-top-color")}}, {{Cssxref("border-top-style")}}, 和{{Cssxref("border-top-width")}} 的三者的缩写。这些属性都是在描述一个元素的上方的边框[`border`](/zh-CN/docs/Web/CSS/border)。 +CSS 属性 **border-top**是属性 {{Cssxref("border-top-color")}}, {{Cssxref("border-top-style")}}, 和{{Cssxref("border-top-width")}} 的三者的缩写。这些属性都是在描述一个元素的上方的边框 [`border`](/zh-CN/docs/Web/CSS/border)。 {{EmbedInteractiveExample("pages/css/border-top.html")}} diff --git a/files/zh-cn/web/css/color_value/index.md b/files/zh-cn/web/css/color_value/index.md index 0be7ab92204238..a7d0617ff90689 100644 --- a/files/zh-cn/web/css/color_value/index.md +++ b/files/zh-cn/web/css/color_value/index.md @@ -5,13 +5,13 @@ slug: Web/CSS/color_value {{CSSRef}} -[CSS](/zh-CN/docs/Web/CSS) [数据类型](/zh-CN/docs/Web/CSS/CSS_Types) `` 表示一种[标准 RGB 色彩空间(sRGB color space)](http://en.wikipedia.org/wiki/SRGB)的颜色。一个颜色可以包括一个[alpha 通道](https://en.wikipedia.org/wiki/Alpha_compositing)透明度值,来表明颜色如何与它的背景色[混合(composite)](http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending)。 +[CSS](/zh-CN/docs/Web/CSS) [数据类型](/zh-CN/docs/Web/CSS/CSS_Types) `` 表示一种[标准 RGB 色彩空间(sRGB color space)](http://en.wikipedia.org/wiki/SRGB)的颜色。一个颜色可以包括一个 [alpha 通道](https://en.wikipedia.org/wiki/Alpha_compositing)透明度值,来表明颜色如何与它的背景色[混合(composite)](http://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending)。 一个``可以以如下方式定义: - 使用一个关键字(比如`blue`或`transparent`) -- 使用[RGB 立体坐标(RGB cubic-coordinate)](http://en.wikipedia.org/wiki/RGB_color_model#Geometric_representation)系统(以“#”加十六进制或者 `rgb()` 和 `rgba()` 函数表达式的形式) -- 使用[HSL 圆柱坐标(HSL cylindrical-coordinate)](http://en.wikipedia.org/wiki/HSL_and_HSV)系统(以 `hsl()` 和 `hsla()` 函数表达式的形式) +- 使用 [RGB 立体坐标(RGB cubic-coordinate)](http://en.wikipedia.org/wiki/RGB_color_model#Geometric_representation)系统(以“#”加十六进制或者 `rgb()` 和 `rgba()` 函数表达式的形式) +- 使用 [HSL 圆柱坐标(HSL cylindrical-coordinate)](http://en.wikipedia.org/wiki/HSL_and_HSV)系统(以 `hsl()` 和 `hsla()` 函数表达式的形式) > **备注:** 本文章详细描述了``数据类型。如要了解更多关于在 HTML 中使用颜色的信息,请参阅[使用 CSS 为 HTML 元素应用颜色](/zh-CN/docs/Web/HTML/Applying_color)。 diff --git a/files/zh-cn/web/css/counter-increment/index.md b/files/zh-cn/web/css/counter-increment/index.md index 5356dfdbaf1108..2dd2599e29b8bc 100644 --- a/files/zh-cn/web/css/counter-increment/index.md +++ b/files/zh-cn/web/css/counter-increment/index.md @@ -7,7 +7,7 @@ slug: Web/CSS/counter-increment ## 概要 -`counter-increment`属性用于将[CSS Counters](/zh-CN/docs/CSS_Counters)的值增加给定值。可以使用 {{cssxref("counter-reset")}} 属性重置计数器的值。 +`counter-increment`属性用于将 [CSS Counters](/zh-CN/docs/CSS_Counters)的值增加给定值。可以使用 {{cssxref("counter-reset")}} 属性重置计数器的值。 {{cssinfo}} diff --git a/files/zh-cn/web/css/counter/index.md b/files/zh-cn/web/css/counter/index.md index 74e00e5d4bfc81..45bd7e4be1ac1d 100644 --- a/files/zh-cn/web/css/counter/index.md +++ b/files/zh-cn/web/css/counter/index.md @@ -15,7 +15,7 @@ counter(计数器名称); counter(countername, upper-roman) ``` -一个[计数器](/zh-CN/docs/Web/CSS/CSS_lists/Using_CSS_counters)本身没有可见的效果,而是通过`counter()`函数(和[`counters()`](/zh-CN/docs/Web/CSS/counters)函数)返回开发人员定义的字符串(或图像)从而使计数器拥有很棒的作用。 +一个[计数器](/zh-CN/docs/Web/CSS/CSS_lists/Using_CSS_counters)本身没有可见的效果,而是通过`counter()`函数(和 [`counters()`](/zh-CN/docs/Web/CSS/counters)函数)返回开发人员定义的字符串(或图像)从而使计数器拥有很棒的作用。 > **备注:** `counter()`函数可以与任何 CSS 属性一起使用,但是对[`"content"`](/zh-CN/docs/Web/CSS/content)以外的属性的支持是试验性的,对 type-or-unit 参数的支持很少。 > diff --git a/files/zh-cn/web/css/counters/index.md b/files/zh-cn/web/css/counters/index.md index 9fdbe0fef89db5..05d18f88e109b7 100644 --- a/files/zh-cn/web/css/counters/index.md +++ b/files/zh-cn/web/css/counters/index.md @@ -26,7 +26,7 @@ counters(countername, '.', upper-roman) ### Values - ` 自定义标识` - - : 一个标识计数器的名称,区分大小写,并且与[`counter-reset`](/zh-CN/docs/Web/CSS/counter-reset)和[`counter-increment`](/zh-CN/docs/Web/CSS/counter-increment)中的“名称”相同。名称不能以两个破折号开头,并且不能为`none`, `unset`, `initial`, 或 `inherit`。 + - : 一个标识计数器的名称,区分大小写,并且与 [`counter-reset`](/zh-CN/docs/Web/CSS/counter-reset)和 [`counter-increment`](/zh-CN/docs/Web/CSS/counter-increment)中的“名称”相同。名称不能以两个破折号开头,并且不能为`none`, `unset`, `initial`, 或 `inherit`。 - ` 计数器样式` - : 计数器样式名称或 [`symbols()`](/zh-CN/docs/Web/CSS/symbols) 函数,其中计数器样式名称是数字,字母或符号的简单预定义计数器样式,复杂的东亚或埃塞俄比亚长手预定义计数器样式,或其他[预定义计数器样式](/zh-CN/docs/Web/CSS/CSS_counter_styles)。如果省略,则计数器样式默认为十进制。 - ` 字符串` diff --git a/files/zh-cn/web/css/css_box_alignment/box_alignment_in_flexbox/index.md b/files/zh-cn/web/css/css_box_alignment/box_alignment_in_flexbox/index.md index 4884a60430b3a7..3e96f822036de5 100644 --- a/files/zh-cn/web/css/css_box_alignment/box_alignment_in_flexbox/index.md +++ b/files/zh-cn/web/css/css_box_alignment/box_alignment_in_flexbox/index.md @@ -5,7 +5,7 @@ slug: Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox {{CSSRef}} -[Box Alignment](/zh-CN/docs/Web/CSS/CSS_box_alignment) 规范详细说明了对齐 (alignment) 在各种布局方法中的工作原理; 在此页面中,我们将探讨盒子对齐(box aligment)在 Flexbox 环境中的工作原理。由于此页面旨在详细说明特定于 Flexbox 和框对齐的内容,因此应与[Box Alignment](/zh-CN/docs/Web/CSS/CSS_box_alignment) 页面一起阅读,该页面详细说明了不同布局方法的框对齐的常见方法。 +[Box Alignment](/zh-CN/docs/Web/CSS/CSS_box_alignment) 规范详细说明了对齐 (alignment) 在各种布局方法中的工作原理; 在此页面中,我们将探讨盒子对齐(box aligment)在 Flexbox 环境中的工作原理。由于此页面旨在详细说明特定于 Flexbox 和框对齐的内容,因此应与 [Box Alignment](/zh-CN/docs/Web/CSS/CSS_box_alignment) 页面一起阅读,该页面详细说明了不同布局方法的框对齐的常见方法。 ## 基础示例 diff --git a/files/zh-cn/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md b/files/zh-cn/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md index 4e74bae4d14147..693648e276b44d 100644 --- a/files/zh-cn/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md +++ b/files/zh-cn/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md @@ -26,7 +26,7 @@ flexbox 之所以能迅速吸引开发者的注意,其中一个原因就是它 我们也会了解到 flexbox 如何使用 margin: auto 来实现居中。 -> **备注:** 这些 Flexbox 的对齐属性已经纳入 [CSS Box Alignment Level 3](https://www.w3.org/TR/css-align-3/)标准里了。预计这特性将最终会取代之前在[Flexbox Level One](https://www.w3.org/TR/css-flexbox-1/)定义的属性。 +> **备注:** 这些 Flexbox 的对齐属性已经纳入 [CSS Box Alignment Level 3](https://www.w3.org/TR/css-align-3/)标准里了。预计这特性将最终会取代之前在 [Flexbox Level One](https://www.w3.org/TR/css-flexbox-1/)定义的属性。 ## 交叉轴 @@ -76,7 +76,7 @@ flex items 的高度全都变成一样的原因是 `align-items` 属性的初始 ## 轴对齐内容—— align-content 属性 -到现在为止,我们已经对定义在 flex 容器里的 flex 项目或者单个 flex 项目进行对齐操作了。如果你有一个折行的多条 flex 项目的 flex 容器,然后你可能想使用 `align-content` 来控制每行之间空间的分配,在这种特定的场景叫做[packing flex lines](https://drafts.csswg.org/css-flexbox/#align-content-property)。 +到现在为止,我们已经对定义在 flex 容器里的 flex 项目或者单个 flex 项目进行对齐操作了。如果你有一个折行的多条 flex 项目的 flex 容器,然后你可能想使用 `align-content` 来控制每行之间空间的分配,在这种特定的场景叫做 [packing flex lines](https://drafts.csswg.org/css-flexbox/#align-content-property)。 要使得 `align-content` 生效,你需要你的 flex 容器的 height 要大于 flex 项目的可视内容。然后它会将所有的 flex 项目打包成一块之后再对齐剩下的空间。 diff --git a/files/zh-cn/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md b/files/zh-cn/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md index 4a3cc22cb41be0..a1ec8013451004 100644 --- a/files/zh-cn/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md +++ b/files/zh-cn/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.md @@ -13,7 +13,7 @@ slug: Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_me 许多人开始关注 flexbox 的最初原因是在 flex 容器中能够很好的对齐其中的元素。flexbox 可以设置在其交叉轴以及主轴上的对齐属性。 -这些属性最开始出现在 flexbox 规范中,现在已经成为[Box Alignment 规范](https://www.w3.org/TR/css-align-3/)的一部分。这个规范详细说明了在所有布局中(不仅仅是 flexbox)对齐属性是如何起作用的。对齐属性用于设置元素对齐方式和沿轴的空间分配。 +这些属性最开始出现在 flexbox 规范中,现在已经成为 [Box Alignment 规范](https://www.w3.org/TR/css-align-3/)的一部分。这个规范详细说明了在所有布局中(不仅仅是 flexbox)对齐属性是如何起作用的。对齐属性用于设置元素对齐方式和沿轴的空间分配。 之所以在 flexbox 规范和 box alignment 模块规范中都有对对齐属性的详细描述,是为了确保 flexbox 规范的完成不会受 box alignment 模块规范的影响,因为后者需要详细说明所有的布局类型中的对齐方法。flexbox 规范中有一条注释指出将来一旦 Box Alignment Level 3 完成,它将会取代 flexbox 规范中的相关定义: diff --git a/files/zh-cn/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md b/files/zh-cn/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md index c6ffd6d19ffb7b..a706f14256370e 100644 --- a/files/zh-cn/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md +++ b/files/zh-cn/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md @@ -9,7 +9,7 @@ slug: Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox **为什么选择 flexbox?** -在浏览器完美支持的环境中,你选择使用 flexbox 的原因是你希望把一堆元素不是放在这个方向就是那个方向。因为在放置元素过程中,你想控制元素在那个方向的维度,或者控制他们彼此之间的间距。flexbox 就是为此设计的。. 又可以阅读[Relationship of Flexbox to other layout methods](/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods)来了解更多关于 flexbox 和 CSS Grid 布局的区别,在这篇文章里面,我们会讨论 flexbox 如何运用与 CSS 整体布局。 +在浏览器完美支持的环境中,你选择使用 flexbox 的原因是你希望把一堆元素不是放在这个方向就是那个方向。因为在放置元素过程中,你想控制元素在那个方向的维度,或者控制他们彼此之间的间距。flexbox 就是为此设计的。. 又可以阅读 [Relationship of Flexbox to other layout methods](/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Relationship_of_flexbox_to_other_layout_methods)来了解更多关于 flexbox 和 CSS Grid 布局的区别,在这篇文章里面,我们会讨论 flexbox 如何运用与 CSS 整体布局。 在现实中,为了便于对齐,我们通常会选择用 Flexbox 作为替代品,来完成即使用 Grid 布局更好的情况。一旦盒子对齐(Box Alignment)被盒模型所实行,这种情况就会得到改善。在这个教程中,我们会介绍一些会在现在使用 flexbox 的用例。 diff --git a/files/zh-cn/web/css/css_flow_layout/introduction_to_formatting_contexts/index.md b/files/zh-cn/web/css/css_flow_layout/introduction_to_formatting_contexts/index.md index 3a128c8767917b..924d0ebd5ad522 100644 --- a/files/zh-cn/web/css/css_flow_layout/introduction_to_formatting_contexts/index.md +++ b/files/zh-cn/web/css/css_flow_layout/introduction_to_formatting_contexts/index.md @@ -36,7 +36,7 @@ slug: Web/CSS/CSS_flow_layout/Introduction_to_formatting_contexts 让我们看看几个例子,来理解创建 BFC 的效果。 -在下面的示例中,我们在应用了边框的 `
` 中有一个浮动元素。该 `div` 的内容与浮动元素一起浮动。由于 float 的内容比它旁边的内容高,所以现在 DIV 的边框贯穿了 float。如流入和流出元素指南[guide to in-flow and out of flow elements](/zh-CN/docs/Web/CSS/CSS_flow_layout/In_flow_and_out_of_flow)中所述,浮动已脱离文档流,因此 DIV 的背景和边框仅包含内容,而不包含浮动。 +在下面的示例中,我们在应用了边框的 `
` 中有一个浮动元素。该 `div` 的内容与浮动元素一起浮动。由于 float 的内容比它旁边的内容高,所以现在 DIV 的边框贯穿了 float。如流入和流出元素指南 [guide to in-flow and out of flow elements](/zh-CN/docs/Web/CSS/CSS_flow_layout/In_flow_and_out_of_flow)中所述,浮动已脱离文档流,因此 DIV 的背景和边框仅包含内容,而不包含浮动。 {{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}} diff --git a/files/zh-cn/web/css/css_fonts/variable_fonts_guide/index.md b/files/zh-cn/web/css/css_fonts/variable_fonts_guide/index.md index 4cadafe642ed79..7cdc3837fe2f8e 100644 --- a/files/zh-cn/web/css/css_fonts/variable_fonts_guide/index.md +++ b/files/zh-cn/web/css/css_fonts/variable_fonts_guide/index.md @@ -56,7 +56,7 @@ slug: Web/CSS/CSS_fonts/Variable_fonts_guide `wght` (weight) 是一个注册轴, `GRAD` (grade) 是一个自定义轴。 -2. 如果你使用 `font-variation-settings` 设置了值并想要更改其中一个值,则必须重新声明所有值。你可以通过对各个值使用[CSS 自定义属性](/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)(CSS 变量)来解决此限制,并只需修改单个自定义属性的值。该指南末尾有示例代码。 +2. 如果你使用 `font-variation-settings` 设置了值并想要更改其中一个值,则必须重新声明所有值。你可以通过对各个值使用 [CSS 自定义属性](/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)(CSS 变量)来解决此限制,并只需修改单个自定义属性的值。该指南末尾有示例代码。 ### 字重 diff --git a/files/zh-cn/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md b/files/zh-cn/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md index cdef9da2784ece..5af9a857350497 100644 --- a/files/zh-cn/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md +++ b/files/zh-cn/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md @@ -31,7 +31,7 @@ slug: Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout 多个元素可以放置在网格单元格中,或者区域可以部分地彼此重叠。然后可以 CSS 中的**z-index**属性来控制重叠区域显示的优先级。 -Grid 是一个强大的规范,当与 CSS 的其他部分(如[flexbox](/zh-CN/docs/Web/CSS/CSS_flexible_box_layout))结合使用时,可以帮助你创建以前不可能在 CSS 中构建的布局。这一切都是通过在网格容器上创建一个网格来开始的。 +Grid 是一个强大的规范,当与 CSS 的其他部分(如 [flexbox](/zh-CN/docs/Web/CSS/CSS_flexible_box_layout))结合使用时,可以帮助你创建以前不可能在 CSS 中构建的布局。这一切都是通过在网格容器上创建一个网格来开始的。 ## 网格容器 diff --git a/files/zh-cn/web/css/css_media_queries/index.md b/files/zh-cn/web/css/css_media_queries/index.md index 58042f15c5f57c..dc2f77433158cf 100644 --- a/files/zh-cn/web/css/css_media_queries/index.md +++ b/files/zh-cn/web/css/css_media_queries/index.md @@ -15,13 +15,13 @@ slug: Web/CSS/CSS_media_queries 在 [HTML](/zh-CN/docs/Web/HTML) 中,媒体查询可以应用于各种元素: -- 在{{HTMLElement("link")}}元素的[`media`](/zh-CN/docs/Web/HTML/Element/link#media)属性中,它们定义了待应用链接资源(通常是 CSS)的媒体。 -- 在{{HTMLElement("source")}}元素的[`media`](/zh-CN/docs/Web/HTML/Element/source#media)属性中,它们定义待应用源的媒体。 (这仅在{{HTMLElement("picture")}}元素内有效。) -- 在{{HTMLElement("style")}}元素的[`media`](/zh-CN/docs/Web/HTML/Element/style#media)属性中,它们定义待应用样式的媒体。 +- 在{{HTMLElement("link")}}元素的 [`media`](/zh-CN/docs/Web/HTML/Element/link#media)属性中,它们定义了待应用链接资源(通常是 CSS)的媒体。 +- 在{{HTMLElement("source")}}元素的 [`media`](/zh-CN/docs/Web/HTML/Element/source#media)属性中,它们定义待应用源的媒体。 (这仅在{{HTMLElement("picture")}}元素内有效。) +- 在{{HTMLElement("style")}}元素的 [`media`](/zh-CN/docs/Web/HTML/Element/style#media)属性中,它们定义待应用样式的媒体。 ### 在 JavaScript 中使用媒体查询 -在[JavaScript](/zh-CN/docs/Web/JavaScript)中,你可以使用 {{domxref("Window.matchMedia()")}} 方法根据媒体查询测试窗口。你还可以使用{{domxref("MediaQueryList.addListener()")}}在查询状态发生变化时收到通知。借助此功能,你的站点或应用可以响应设备配置,方向或状态的更改。 +在 [JavaScript](/zh-CN/docs/Web/JavaScript)中,你可以使用 {{domxref("Window.matchMedia()")}} 方法根据媒体查询测试窗口。你还可以使用{{domxref("MediaQueryList.addListener()")}}在查询状态发生变化时收到通知。借助此功能,你的站点或应用可以响应设备配置,方向或状态的更改。 你可以学习更多以编程方式使用媒体查询在[测试媒体查询](/zh-CN/docs/Web/CSS/CSS_media_queries/Testing_media_queries)中。 diff --git a/files/zh-cn/web/css/css_media_queries/using_media_queries/index.md b/files/zh-cn/web/css/css_media_queries/using_media_queries/index.md index f12743b694e7f0..4a197fa37b24fc 100644 --- a/files/zh-cn/web/css/css_media_queries/using_media_queries/index.md +++ b/files/zh-cn/web/css/css_media_queries/using_media_queries/index.md @@ -9,8 +9,8 @@ slug: Web/CSS/CSS_media_queries/Using_media_queries 媒体查询常被用于以下目的: -- 有条件的通过 {{cssxref("@media")}} 和 {{cssxref("@import")}} [at-rules](/zh-CN/docs/Web/CSS/At-rule) 用[CSS](/zh-CN/docs/Web/CSS) 装饰样式。 -- 用 `media=` 属性为{{HTMLElement("style")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}}和其他[HTML](/zh-CN/docs/Web/HTML)元素指定特定的媒体类型。如: +- 有条件的通过 {{cssxref("@media")}} 和 {{cssxref("@import")}} [at-rules](/zh-CN/docs/Web/CSS/At-rule) 用 [CSS](/zh-CN/docs/Web/CSS) 装饰样式。 +- 用 `media=` 属性为{{HTMLElement("style")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}}和其他 [HTML](/zh-CN/docs/Web/HTML)元素指定特定的媒体类型。如: ``` @@ -43,7 +43,7 @@ slug: Web/CSS/CSS_media_queries/Using_media_queries @media screen, print { ... } ``` -有关所有媒体类型的列表,请参见[Media types](#Media_types)。由于它们仅以非常广泛的术语描述设备,因此只有少数几种可用。要定位更具体的属性,请改用*媒体功能*。 +有关所有媒体类型的列表,请参见 [Media types](#Media_types)。由于它们仅以非常广泛的术语描述设备,因此只有少数几种可用。要定位更具体的属性,请改用*媒体功能*。 ## 定位媒体特性 @@ -71,7 +71,7 @@ slug: Web/CSS/CSS_media_queries/Using_media_queries @media speech and (aspect-ratio: 11/5) { ... } ``` -有关更多媒体功能[media feature](#Media_features)示例,请参阅每个特定功能的参考页。 +有关更多媒体功能 [media feature](#Media_features)示例,请参阅每个特定功能的参考页。 ## 创建复杂查询 diff --git a/files/zh-cn/web/css/css_shapes/overview_of_shapes/index.md b/files/zh-cn/web/css/css_shapes/overview_of_shapes/index.md index f5904ae9139649..a1a9388649e74b 100644 --- a/files/zh-cn/web/css/css_shapes/overview_of_shapes/index.md +++ b/files/zh-cn/web/css/css_shapes/overview_of_shapes/index.md @@ -79,7 +79,7 @@ Specification 定义了三种新的权限: {{EmbedGHLiveSample("css-examples/shapes/overview/threshold.html", '100%', 820)}} -下面我们进入更深层次的[Shapes from Images](/zh-CN/docs/Web/CSS/CSS_shapes/Shapes_from_images)学习。 +下面我们进入更深层次的 [Shapes from Images](/zh-CN/docs/Web/CSS/CSS_shapes/Shapes_from_images)学习。 ## `shape-margin` 属性 diff --git a/files/zh-cn/web/css/cssom_view/coordinate_systems/index.md b/files/zh-cn/web/css/cssom_view/coordinate_systems/index.md index d877c39dae4898..406004dbd1d4a0 100644 --- a/files/zh-cn/web/css/cssom_view/coordinate_systems/index.md +++ b/files/zh-cn/web/css/cssom_view/coordinate_systems/index.md @@ -5,7 +5,7 @@ slug: Web/CSS/CSSOM_view/Coordinate_systems {{CSSRef}} -当我们需要在图形上指定一点的坐标[algebra](https://zh.wikipedia.org/wiki/algebra)),这个坐标需要先对于某一个固定点。这个固定点我们称为原点[origin](). 这个指定点的坐标即为包含在各个维度上相对于远点的距离值。 +当我们需要在图形上指定一点的坐标 [algebra](https://zh.wikipedia.org/wiki/algebra)),这个坐标需要先对于某一个固定点。这个固定点我们称为原点 [origin](). 这个指定点的坐标即为包含在各个维度上相对于远点的距离值。 下面我将谈谈基于 CSS 对象模型的坐标系系统。大体上来讲这些坐标系唯一的不同就是坐标原点不一样。 diff --git a/files/zh-cn/web/css/cursor/index.md b/files/zh-cn/web/css/cursor/index.md index 403311433166c0..1720183d7ab90e 100644 --- a/files/zh-cn/web/css/cursor/index.md +++ b/files/zh-cn/web/css/cursor/index.md @@ -49,7 +49,7 @@ cursor: ### 值 - <`url`> - - : `url(…)`或者逗号分隔的`url(…), url(…), …`,指向图片文件。用大于一个{{cssxref("<url>")}}值提供后备,以防某些指针图片类型不被支持。最后必须提供一个非 URL 后备值。详情参见[cursor 属性中使用 URL 值](/zh-CN/docs/CSS/Using_URL_values_for_the_cursor_property)。 + - : `url(…)`或者逗号分隔的`url(…), url(…), …`,指向图片文件。用大于一个{{cssxref("<url>")}}值提供后备,以防某些指针图片类型不被支持。最后必须提供一个非 URL 后备值。详情参见 [cursor 属性中使用 URL 值](/zh-CN/docs/CSS/Using_URL_values_for_the_cursor_property)。 - `` `` {{experimental_inline}} - : 可选 x,y 坐标。两个小于 32 的无单位非负数。 - 关键字值 diff --git a/files/zh-cn/web/css/custom-ident/index.md b/files/zh-cn/web/css/custom-ident/index.md index 6300fd7858eed8..273dbcfad1981f 100644 --- a/files/zh-cn/web/css/custom-ident/index.md +++ b/files/zh-cn/web/css/custom-ident/index.md @@ -5,7 +5,7 @@ slug: Web/CSS/custom-ident {{CSSRef}} -**``** 指用户自定义字符串标识符。一种[CSS](/zh-CN/docs/Web/CSS) [数据类型](/zh-CN/docs/Web/CSS/CSS_Types);要区分大小写,值不能有任何歧义。 +**``** 指用户自定义字符串标识符。一种 [CSS](/zh-CN/docs/Web/CSS) [数据类型](/zh-CN/docs/Web/CSS/CSS_Types);要区分大小写,值不能有任何歧义。 ## 语法 diff --git a/files/zh-cn/web/css/flex-grow/index.md b/files/zh-cn/web/css/flex-grow/index.md index 52cce5dd202388..1808054adef323 100644 --- a/files/zh-cn/web/css/flex-grow/index.md +++ b/files/zh-cn/web/css/flex-grow/index.md @@ -11,7 +11,7 @@ CSS 属性 **`flex-grow`** [CSS](/zh-CN/docs/Web/CSS) 设置 flex 项 [主尺寸 ## 语法 -满足[CSS 属性值定义语法](/zh-CN/docs/CSS/Value_definition_syntax) {{csssyntax("flex-grow")}}。 +满足 [CSS 属性值定义语法](/zh-CN/docs/CSS/Value_definition_syntax) {{csssyntax("flex-grow")}}。 ```css /* 值 */ diff --git a/files/zh-cn/web/css/gradient/index.md b/files/zh-cn/web/css/gradient/index.md index c4b340bd383207..18b98ccc5f3052 100644 --- a/files/zh-cn/web/css/gradient/index.md +++ b/files/zh-cn/web/css/gradient/index.md @@ -110,7 +110,7 @@ div { ## 插值 -与其他的颜色插值一样,颜色渐变也通过 Alpha 预乘 (alpha-permultiplied) 计算得到结果。这样避免了因为颜色和透明度转变带来的不可预见的灰色阴影。(在使用[transparent keyword](/zh-CN/docs/Web/CSS/color_value#transparent_keyword)时,敬请注意一些没有使用这种计算方式的旧浏览器。) +与其他的颜色插值一样,颜色渐变也通过 Alpha 预乘 (alpha-permultiplied) 计算得到结果。这样避免了因为颜色和透明度转变带来的不可预见的灰色阴影。(在使用 [transparent keyword](/zh-CN/docs/Web/CSS/color_value#transparent_keyword)时,敬请注意一些没有使用这种计算方式的旧浏览器。) ## 规范 diff --git a/files/zh-cn/web/css/gradient/linear-gradient/index.md b/files/zh-cn/web/css/gradient/linear-gradient/index.md index f47c77fe80350d..00362426a4ad40 100644 --- a/files/zh-cn/web/css/gradient/linear-gradient/index.md +++ b/files/zh-cn/web/css/gradient/linear-gradient/index.md @@ -120,7 +120,7 @@ where = [ left | right ] || [ top | bottom ] 新的语法不需要 `to()`、`from()` 和 `color-stop()` 函数,所以这些函数被丢弃。而 `top` / `bottom` 与 `left` / `right` 的顺序也被标记为不重要,所以 `Mozilla` 移除了必需首先定义 `top` / `bottom` 的限制。 -新的语法仍然有一个缺点:它只允许水平和垂直渐变。在多次变更解决了方向限制的问题之后,它被增加到[CSS Images Values and Content Replacement Level 3 draft in 2011-02-17](http://www.w3.org/TR/2011/WD-css3-images-20110217/#ltlinear-gradient)。 +新的语法仍然有一个缺点:它只允许水平和垂直渐变。在多次变更解决了方向限制的问题之后,它被增加到 [CSS Images Values and Content Replacement Level 3 draft in 2011-02-17](http://www.w3.org/TR/2011/WD-css3-images-20110217/#ltlinear-gradient)。 - 原生支持{{ cssxref("<angle>") }}允许任何方向的渐变 - 定义 magic corner 算法,允许使用简便的方式定义端点的颜色,从而简化了开发者的工作 @@ -131,7 +131,7 @@ where = [ left | right ] || [ top | bottom ] linear-gradient( [ [ {{cssxref("<angle>")}} | [top | bottom] || [left | right] ],]? [, ]+); ``` -{{ cssxref("<angle>") }}属性的添加导致了一些混乱,它应当指向终点方向,但是这些关键字却通常指起始方向。在[related W3C CSSWG thread](http://lists.w3.org/Archives/Public/www-style/2011Jun/0377.html)可以查看一些讨论。在一项新的语法中,这个问题被修正。它仍然使用方向关键字,但是在关键字之前增加关键字 `to` 。这项语法被添加到[CSS Images Values and Content Replacement Level 3 draft in 2011-09-08](http://www.w3.org/TR/2011/WD-css3-images-20110908/#ltlinear-gradient)。 +{{ cssxref("<angle>") }}属性的添加导致了一些混乱,它应当指向终点方向,但是这些关键字却通常指起始方向。在 [related W3C CSSWG thread](http://lists.w3.org/Archives/Public/www-style/2011Jun/0377.html)可以查看一些讨论。在一项新的语法中,这个问题被修正。它仍然使用方向关键字,但是在关键字之前增加关键字 `to` 。这项语法被添加到 [CSS Images Values and Content Replacement Level 3 draft in 2011-09-08](http://www.w3.org/TR/2011/WD-css3-images-20110908/#ltlinear-gradient)。 ``` linear-gradient([ [ [ {{cssxref("<angle>")}} | to [top | bottom] || [left | right] ],]? [, ]+); @@ -281,7 +281,7 @@ div { \-moz-前缀的规则用于兼容 Fx 3.6 to Fx 15 的火狐浏览器。 -webkit-前缀的规则用于兼容在 Android 4.3 以前版本、iOS 6.1 以前版本、Safari 6。当使用带前缀的规则时,不要加“to”关键字。 -> **备注:** 如果将\标签的 background-image 属性设置为线性渐变`linear-gradient`,除非你还设置文档根标签(例如\标签)的[min-height](/zh-CN/docs/Web/CSS/min-height)属性,否则渐变不会填充浏览器屏幕到 100%。 +> **备注:** 如果将\标签的 background-image 属性设置为线性渐变`linear-gradient`,除非你还设置文档根标签(例如\标签)的 [min-height](/zh-CN/docs/Web/CSS/min-height)属性,否则渐变不会填充浏览器屏幕到 100%。 ## 规范 diff --git a/files/zh-cn/web/css/gradient/repeating-linear-gradient/index.md b/files/zh-cn/web/css/gradient/repeating-linear-gradient/index.md index 5bb26b4a6fe84e..05ca1b63ae4862 100644 --- a/files/zh-cn/web/css/gradient/repeating-linear-gradient/index.md +++ b/files/zh-cn/web/css/gradient/repeating-linear-gradient/index.md @@ -41,7 +41,7 @@ repeating-linear-gradient(0deg, blue, green 40%, red); - : 由一个{{cssxref("<color>")}}值组成,并且跟随着一个可选的终点位置(可以是一个{{cssxref("<percentage>")}}或者是沿着渐变轴的{{cssxref("<length>")}})。CSS 渐变的颜色渲染采取了与 SVG 相同的规则。 - > **备注:** 渲染颜色中间点的规则[CSS 渐变中的色标](#Gradient_with_multiple_color_stops) 与[SVG 渐变](/zh-CN/docs/Web/SVG/Tutorial/Gradients)一致。 + > **备注:** 渲染颜色中间点的规则 [CSS 渐变中的色标](#Gradient_with_multiple_color_stops) 与 [SVG 渐变](/zh-CN/docs/Web/SVG/Tutorial/Gradients)一致。 ### 形式语法 diff --git a/files/zh-cn/web/css/inheritance/index.md b/files/zh-cn/web/css/inheritance/index.md index bdf378c098f953..6ae9613115c44b 100644 --- a/files/zh-cn/web/css/inheritance/index.md +++ b/files/zh-cn/web/css/inheritance/index.md @@ -5,7 +5,7 @@ slug: Web/CSS/Inheritance {{CSSRef}} -在 css 中,每个[CSS 属性定义](/zh-CN/docs/CSS/CSS_Reference)的概述都指出了这个属性是默认继承的 ("Inherited: Yes") 还是默认不继承的 ("Inherited: no")。这决定了当你没有为元素的属性指定值时该如何计算值。 +在 css 中,每个 [CSS 属性定义](/zh-CN/docs/CSS/CSS_Reference)的概述都指出了这个属性是默认继承的 ("Inherited: Yes") 还是默认不继承的 ("Inherited: no")。这决定了当你没有为元素的属性指定值时该如何计算值。 ## 继承属性 diff --git a/files/zh-cn/web/css/layout_cookbook/media_objects/index.md b/files/zh-cn/web/css/layout_cookbook/media_objects/index.md index de398b030f5226..edcdde31f99a0e 100644 --- a/files/zh-cn/web/css/layout_cookbook/media_objects/index.md +++ b/files/zh-cn/web/css/layout_cookbook/media_objects/index.md @@ -5,7 +5,7 @@ slug: Web/CSS/Layout_cookbook/Media_objects {{CSSRef}} -媒体对象是 web 上随处可见的一种模式。它由[Nicole Sullivan](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/)命名,表示一种一侧是图片并且另一侧是描述性的文字的两列盒子,比如一篇 facebook 帖子或者 tweet。 +媒体对象是 web 上随处可见的一种模式。它由 [Nicole Sullivan](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/)命名,表示一种一侧是图片并且另一侧是描述性的文字的两列盒子,比如一篇 facebook 帖子或者 tweet。 ![](media-object.png) @@ -27,7 +27,7 @@ slug: Web/CSS/Layout_cookbook/Media_objects ## 做出选择 -我选择使用[Grid Layout](/zh-CN/docs/Web/CSS/CSS_grid_layout)实现媒体对象,因为它可以让我在我需要的时候控制两个维度的布局。这意味着当我们有一个页脚(footer)的时候,上面的内容很短,页脚可以被推到媒体对象的底部。 +我选择使用 [Grid Layout](/zh-CN/docs/Web/CSS/CSS_grid_layout)实现媒体对象,因为它可以让我在我需要的时候控制两个维度的布局。这意味着当我们有一个页脚(footer)的时候,上面的内容很短,页脚可以被推到媒体对象的底部。 另一个使用网格布局(Grid Layout)的原因是为了可以使用{{cssxref("fit-content")}}图片的追踪(track)大小。通过使用 最大尺寸是 200 像素的`fit-content` ,当我们有一个小图片比如 icon 的时候,track 仅仅得到和 image 的尺寸一样的大小(`max-content` 大小)。如果图片更大,track 在 200 像素的时候停止增长,因为图片应用了{{cssxref("max-width ")}}为 100%。同样,它会缩小以适应列内部的尺寸。 diff --git a/files/zh-cn/web/css/mask-border-mode/index.md b/files/zh-cn/web/css/mask-border-mode/index.md index 0b8f7abd4301bc..3c5a4e84c9d75c 100644 --- a/files/zh-cn/web/css/mask-border-mode/index.md +++ b/files/zh-cn/web/css/mask-border-mode/index.md @@ -5,7 +5,7 @@ slug: Web/CSS/mask-border-mode {{CSSRef}} -该[CSS](/zh-CN/docs/Web/CSS)属性指定使用的混合模式[面具边界](/zh-CN/docs/Web/CSS/mask-border)。**`mask-border-mode`** +该 [CSS](/zh-CN/docs/Web/CSS)属性指定使用的混合模式[面具边界](/zh-CN/docs/Web/CSS/mask-border)。**`mask-border-mode`** ## Syntax diff --git a/files/zh-cn/web/css/mask-border-slice/index.md b/files/zh-cn/web/css/mask-border-slice/index.md index aca27295cec10a..d19ce76d627e94 100644 --- a/files/zh-cn/web/css/mask-border-slice/index.md +++ b/files/zh-cn/web/css/mask-border-slice/index.md @@ -5,7 +5,7 @@ slug: Web/CSS/mask-border-slice {{CSSRef}} -的[CSS](/zh-CN/docs/Web/CSS)属性除以{{cssxref("掩模边界源")}}成区域的图像集合。这些区域用于形成元素的[遮罩边框](/zh-CN/docs/Web/CSS/mask-border)的组成部分。**`mask-border-slice`** +的 [CSS](/zh-CN/docs/Web/CSS)属性除以{{cssxref("掩模边界源")}}成区域的图像集合。这些区域用于形成元素的[遮罩边框](/zh-CN/docs/Web/CSS/mask-border)的组成部分。**`mask-border-slice`** ## 句法 @@ -101,7 +101,7 @@ mask-border-slice: 30 fill; -webkit-mask-box-image-slice: 30 fill; ``` -> **备注:** 该[`mask-border`](/zh-CN/docs/Web/CSS/mask-border)页面提供了一个有效的示例(使用 Chromium 支持的过期前缀边框蒙版属性),因此你可以大致了解效果。 +> **备注:** 该 [`mask-border`](/zh-CN/docs/Web/CSS/mask-border)页面提供了一个有效的示例(使用 Chromium 支持的过期前缀边框蒙版属性),因此你可以大致了解效果。 > **备注:** 如果希望元素的内容可见,则必须包含 fill 关键字。 diff --git a/files/zh-cn/web/css/mask-border-width/index.md b/files/zh-cn/web/css/mask-border-width/index.md index 8ebcba35afe357..a99eacf632cca7 100644 --- a/files/zh-cn/web/css/mask-border-width/index.md +++ b/files/zh-cn/web/css/mask-border-width/index.md @@ -51,7 +51,7 @@ mask-border-width: unset; - \ - : mask 边框宽度为元素`border-width`的倍数。不能为负数。 - `auto` - - : 使`mask-border`的宽度等于相应[`mask-border-slice`](/zh-CN/docs/Web/CSS/mask-border-slice)的固有宽度或高度(以适用者为准),如果图像没有所需的固有尺寸,则使用相应的边框宽度。 + - : 使`mask-border`的宽度等于相应 [`mask-border-slice`](/zh-CN/docs/Web/CSS/mask-border-slice)的固有宽度或高度(以适用者为准),如果图像没有所需的固有尺寸,则使用相应的边框宽度。 ### Formal syntax diff --git a/files/zh-cn/web/css/minmax/index.md b/files/zh-cn/web/css/minmax/index.md index 50bbb2979eb7dc..82c11a43e4fbe8 100644 --- a/files/zh-cn/web/css/minmax/index.md +++ b/files/zh-cn/web/css/minmax/index.md @@ -5,7 +5,7 @@ slug: Web/CSS/minmax {{CSSRef}} -[CSS](/zh-CN/docs/Web/CSS)函数 **`minmax()`** 定义了一个长宽范围的闭区间,它与[CSS 网格布局](/zh-CN/docs/Web/CSS/CSS_grid_layout/CSS_Grid,_Logical_Values_and_Writing_Modes)一起使用。 +[CSS](/zh-CN/docs/Web/CSS)函数 **`minmax()`** 定义了一个长宽范围的闭区间,它与 [CSS 网格布局](/zh-CN/docs/Web/CSS/CSS_grid_layout/CSS_Grid,_Logical_Values_and_Writing_Modes)一起使用。 ```css /* , values */ diff --git a/files/zh-cn/web/css/pointer-events/index.md b/files/zh-cn/web/css/pointer-events/index.md index 51f3dc248364f5..3683181e0756a9 100644 --- a/files/zh-cn/web/css/pointer-events/index.md +++ b/files/zh-cn/web/css/pointer-events/index.md @@ -41,7 +41,7 @@ pointer-events: unset; - `auto` - : 与`pointer-events`属性未指定时的表现效果相同,对于 SVG 内容,该值与`visiblePainted`效果相同 - `none` - - : 元素永远不会成为鼠标事件的[target](/zh-CN/docs/Web/API/event.target)。但是,当其后代元素的`pointer-events`属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。 + - : 元素永远不会成为鼠标事件的 [target](/zh-CN/docs/Web/API/event.target)。但是,当其后代元素的`pointer-events`属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。 - `visiblePainted` - : 只适用于 SVG。元素只有在以下情况才会成为鼠标事件的目标: @@ -106,7 +106,7 @@ a[href="http://example.com"] 使用`pointer-events`来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永远不会触发。如果元素后代明确指定了`pointer-events`属性并允许其成为鼠标事件的目标,那么指向该元素的任何事件在事件传播过程中都将通过父元素,并以适当的方式触发其上的事件侦听器。当然,位于父元素但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获(鼠标活动将会穿过父元素而指向位于其下面的元素)。 -我们希望为 HTML 提供更为精细的控制(而不仅仅是`auto`和`none`),以控制元素哪一部分何时会捕获鼠标事件。如果你有独特的想法,请添加至[wiki 页面](https://wiki.mozilla.org/SVG:pointer-events)的 Use Cases 部分,以帮助我们如何针对 HTML 扩展`pointer-events`。 +我们希望为 HTML 提供更为精细的控制(而不仅仅是`auto`和`none`),以控制元素哪一部分何时会捕获鼠标事件。如果你有独特的想法,请添加至 [wiki 页面](https://wiki.mozilla.org/SVG:pointer-events)的 Use Cases 部分,以帮助我们如何针对 HTML 扩展`pointer-events`。 该属性也可用来提高滚动时的帧频。的确,当滚动时,鼠标悬停在某些元素上,则触发其上的 hover 效果,然而这些影响通常不被用户注意,并多半导致滚动出现问题。对`body`元素应用`pointer-events:none`,禁用了包括`hover`在内的鼠标事件,从而提高滚动性能。 diff --git a/files/zh-cn/web/css/privacy_and_the__colon_visited_selector/index.md b/files/zh-cn/web/css/privacy_and_the__colon_visited_selector/index.md index aacea58e1c7155..c88e1738572b22 100644 --- a/files/zh-cn/web/css/privacy_and_the__colon_visited_selector/index.md +++ b/files/zh-cn/web/css/privacy_and_the__colon_visited_selector/index.md @@ -27,7 +27,7 @@ slug: Web/CSS/Privacy_and_the_:visited_selector - {{ cssxref("outline-color") }} - `fill` 和 `stroke` 属性的颜色部分 -此外,即便是上述样式,你也不能给访问过和未访问过设置不同的透明度。你不能使用[`rgba()`](/zh-CN/docs/Web/CSS/color_value/rgba)、[`hsla()`](/zh-CN/docs/Web/CSS/color_value/hsla)或是 [`transparent`](/zh-CN/docs/Web/CSS/color_value#transparent_关键字) 关键词。 +此外,即便是上述样式,你也不能给访问过和未访问过设置不同的透明度。你不能使用 [`rgba()`](/zh-CN/docs/Web/CSS/color_value/rgba)、[`hsla()`](/zh-CN/docs/Web/CSS/color_value/hsla)或是 [`transparent`](/zh-CN/docs/Web/CSS/color_value#transparent_关键字) 关键词。 这是一个使用被限样式的例子: diff --git a/files/zh-cn/web/css/reference/index.md b/files/zh-cn/web/css/reference/index.md index 789d705a5275fa..31d0310065dde6 100644 --- a/files/zh-cn/web/css/reference/index.md +++ b/files/zh-cn/web/css/reference/index.md @@ -5,7 +5,7 @@ slug: Web/CSS/Reference {{CSSRef}} -使用此 **CSS 参考**页面以浏览按[字母索引](#索引)的所有标准 [CSS](/zh-CN/docs/Web/CSS) 属性、[伪类](/zh-CN/docs/Web/CSS/Pseudo-classes)、[伪元素](/zh-CN/docs/Web/CSS/Pseudo-elements)、[数据类型](/zh-CN/docs/Web/CSS/CSS_Types)、[功能表记](/zh-CN/docs/Web/CSS/CSS_Functions)以及[@ 规则](/zh-CN/docs/Web/CSS/At-rule)。你也可以浏览[CSS 关键概念](#概念)和[按类型排列的 CSS 选择器](#选择器)列表。还有一份简短的 [DOM-CSS / CSSOM 参考](#dom-css_cssom)。 +使用此 **CSS 参考**页面以浏览按[字母索引](#索引)的所有标准 [CSS](/zh-CN/docs/Web/CSS) 属性、[伪类](/zh-CN/docs/Web/CSS/Pseudo-classes)、[伪元素](/zh-CN/docs/Web/CSS/Pseudo-elements)、[数据类型](/zh-CN/docs/Web/CSS/CSS_Types)、[功能表记](/zh-CN/docs/Web/CSS/CSS_Functions)以及[@ 规则](/zh-CN/docs/Web/CSS/At-rule)。你也可以浏览 [CSS 关键概念](#概念)和[按类型排列的 CSS 选择器](#选择器)列表。还有一份简短的 [DOM-CSS / CSSOM 参考](#dom-css_cssom)。 ## 基本规则语法 diff --git a/files/zh-cn/web/css/resolution/index.md b/files/zh-cn/web/css/resolution/index.md index 4701b8ee042f3b..773f74bdb5ab5b 100644 --- a/files/zh-cn/web/css/resolution/index.md +++ b/files/zh-cn/web/css/resolution/index.md @@ -20,7 +20,7 @@ slug: Web/CSS/resolution - `dpcm` - : [每厘米上的点数](https://en.wikipedia.org/wiki/Dots_per_inch)。1 英寸是 2.54 厘米,`1dpcm ≈ 2.54dpi`. - `dppx` - - : 表示每个[`px`](/zh-CN/docs/Web/CSS/length#px)的点数。由于 CSS px 的固定比率为 1:96,因此 1dppx 相当于 96dpi。which corresponds to the default resolution of images displayed in CSS as defined by {{cssxref("image-resolution")}}. + - : 表示每个 [`px`](/zh-CN/docs/Web/CSS/length#px)的点数。由于 CSS px 的固定比率为 1:96,因此 1dppx 相当于 96dpi。which corresponds to the default resolution of images displayed in CSS as defined by {{cssxref("image-resolution")}}. - `x` - : `dppx` 的别名 diff --git a/files/zh-cn/web/css/scrollbar-color/index.md b/files/zh-cn/web/css/scrollbar-color/index.md index 1fd042f4b908b9..de3f0f1451bca0 100644 --- a/files/zh-cn/web/css/scrollbar-color/index.md +++ b/files/zh-cn/web/css/scrollbar-color/index.md @@ -5,7 +5,7 @@ slug: Web/CSS/scrollbar-color {{CSSRef}}{{SeeCompatTable}} -**`scrollbar-color`**该[CSS](/zh-CN/docs/Web/CSS)属性设置滚动条轨道和拇指的颜色 +**`scrollbar-color`**该 [CSS](/zh-CN/docs/Web/CSS)属性设置滚动条轨道和拇指的颜色 **track(轨道)**是指滚动条,其一般是固定的而不管滚动位置的背景。 @@ -81,7 +81,7 @@ scrollbar-color: unset; ## 无障碍问题 -使用`scrollbar-color`具有特定颜色值的属性时,作者应确保指定的颜色在它们之间具有足够的对比度。对于关键字值,UA 应确保其使用的颜色具有足够的对比度。参见[WCAG 2.0 的技术:G183:使用 3:1 的对比度](https://www.w3.org/TR/WCAG20-TECHS/G183.html)。 +使用`scrollbar-color`具有特定颜色值的属性时,作者应确保指定的颜色在它们之间具有足够的对比度。对于关键字值,UA 应确保其使用的颜色具有足够的对比度。参见 [WCAG 2.0 的技术:G183:使用 3:1 的对比度](https://www.w3.org/TR/WCAG20-TECHS/G183.html)。 ## 规范 diff --git a/files/zh-cn/web/css/visual_formatting_model/index.md b/files/zh-cn/web/css/visual_formatting_model/index.md index 476a24afffd450..d22674d38eb1f9 100644 --- a/files/zh-cn/web/css/visual_formatting_model/index.md +++ b/files/zh-cn/web/css/visual_formatting_model/index.md @@ -7,7 +7,7 @@ slug: Web/CSS/Visual_formatting_model CSS 视觉格式化模型(*visual formatting model)*是用来处理和在视觉媒体上显示文档时使用的计算规则。该模型是 CSS 的基础概念之一。 -视觉格式化模型会根据[CSS 盒子模型](/zh-CN/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)将文档中的元素转换为一个个盒子,每个盒子的布局由以下因素决定: +视觉格式化模型会根据 [CSS 盒子模型](/zh-CN/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)将文档中的元素转换为一个个盒子,每个盒子的布局由以下因素决定: - 盒子的尺寸:精确指定、由约束条件指定或没有指定 - 盒子的类型:行内盒子(inline)、行内级盒子(inline-level)、原子行内级盒子(atomic inline-level)、块盒子(block) diff --git a/files/zh-cn/web/css/webkit_extensions/index.md b/files/zh-cn/web/css/webkit_extensions/index.md index 76ebc1edb98e53..4469875b6ae05a 100644 --- a/files/zh-cn/web/css/webkit_extensions/index.md +++ b/files/zh-cn/web/css/webkit_extensions/index.md @@ -5,7 +5,7 @@ slug: Web/CSS/WebKit_Extensions {{CSSRef}} -WebKit 支持大量的[CSS](/zh-CN/CSS)扩展,这种 css 属性的前缀`为-webkit-`. +WebKit 支持大量的 [CSS](/zh-CN/CSS)扩展,这种 css 属性的前缀`为-webkit-`. 这些属性其中的一部分已经被包含在 CSS 规范草案中,并且可能成为最后的推荐标准,但目前仍然是试验性的属性,还有一些属性是不规范的属性,它们没有出现在跟踪规范中。 diff --git a/files/zh-cn/web/guide/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md b/files/zh-cn/web/guide/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md index 06be669043a57a..f85856dc05a551 100644 --- a/files/zh-cn/web/guide/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md +++ b/files/zh-cn/web/guide/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md @@ -79,7 +79,7 @@ RTSP 2.0 目前处于开发阶段,并且无法向后兼容 RTSP 1.0。 ### MPEG-DASH -DASH 意即基于 HTTP 的动态自适应流,最近已经被 Chrome、以及运行在 Window 8.1 的 IE 11 浏览器所支持。它依赖于媒体源扩展 (MSE),这些扩展被[DASH.js](https://github.com/Dash-Industry-Forum/dash.js/)之类的 JavaScript 库所使用。这种方式允许我们通过 XHR 下载视频流的数据块,并且将它“添加”到 {{ htmlelement("video") }}元素正在播放的流中。正因如此,如果我们检测到网络缓慢,我们可以从下一段开始请求低质量(较小)的数据块。这种技术也允许添加广告片段到流中。 +DASH 意即基于 HTTP 的动态自适应流,最近已经被 Chrome、以及运行在 Window 8.1 的 IE 11 浏览器所支持。它依赖于媒体源扩展 (MSE),这些扩展被 [DASH.js](https://github.com/Dash-Industry-Forum/dash.js/)之类的 JavaScript 库所使用。这种方式允许我们通过 XHR 下载视频流的数据块,并且将它“添加”到 {{ htmlelement("video") }}元素正在播放的流中。正因如此,如果我们检测到网络缓慢,我们可以从下一段开始请求低质量(较小)的数据块。这种技术也允许添加广告片段到流中。 > **备注:** 你也可以 [将 MPEG-DASH 自适应流式系统与 WebM 一起使用](http://wiki.webmproject.org/adaptive-streaming/webm-dash-specification). diff --git a/files/zh-cn/web/guide/houdini/index.md b/files/zh-cn/web/guide/houdini/index.md index 81d6488b387ef6..b93aeb2ce259f8 100644 --- a/files/zh-cn/web/guide/houdini/index.md +++ b/files/zh-cn/web/guide/houdini/index.md @@ -3,7 +3,7 @@ title: CSS Houdini slug: Web/Guide/Houdini --- -Houdini 是一组底层 API,它们公开了 CSS 引擎的各个部分,从而使开发人员能够通过加入浏览器渲染引擎的样式和布局过程来扩展 CSS。Houdini 是一组 API,它们使开发人员可以直接访问[CSS 对象模型](/zh-CN/docs/Web/API/CSS_Object_Model) (CSSOM),使开发人员可以编写浏览器可以解析为 CSS 的代码,从而创建新的 CSS 功能,而无需等待它们在浏览器中本地实现。 +Houdini 是一组底层 API,它们公开了 CSS 引擎的各个部分,从而使开发人员能够通过加入浏览器渲染引擎的样式和布局过程来扩展 CSS。Houdini 是一组 API,它们使开发人员可以直接访问 [CSS 对象模型](/zh-CN/docs/Web/API/CSS_Object_Model) (CSSOM),使开发人员可以编写浏览器可以解析为 CSS 的代码,从而创建新的 CSS 功能,而无需等待它们在浏览器中本地实现。 ## Houdini 的优点 diff --git a/files/zh-cn/web/html/element/abbr/index.md b/files/zh-cn/web/html/element/abbr/index.md index 7d60a1e8505a68..b494deababdf81 100644 --- a/files/zh-cn/web/html/element/abbr/index.md +++ b/files/zh-cn/web/html/element/abbr/index.md @@ -52,7 +52,7 @@ slug: Web/HTML/Element/abbr 当然,我们不是所有的缩写都要使用``标记。但是其在下面一些场景很有帮助: -- 当你想为缩写在文档流外提供一段扩展或定义的时候,为 `` 设置一个合适的[`title`](/zh-CN/docs/Web/HTML/Global_attributes#title)。 +- 当你想为缩写在文档流外提供一段扩展或定义的时候,为 `` 设置一个合适的 [`title`](/zh-CN/docs/Web/HTML/Global_attributes#title)。 - 在定义一个读者可能不太熟悉的缩写时,使用 `` 和`title`属性或内联的文本来表现这个术语。 - 当文本中出现需要进行语义上的标注的缩写词时,``元素可用于依次将其作用样式和脚本。 - 可以将 `` 与 {{HTMLElement("dfn")}} 配合使用来建立缩写或首字母缩略词的定义。请参阅下面的示例 [定义一个缩写](#定义一个缩写)。 diff --git a/files/zh-cn/web/html/element/area/index.md b/files/zh-cn/web/html/element/area/index.md index ef09a2ca6922eb..607d150092d085 100644 --- a/files/zh-cn/web/html/element/area/index.md +++ b/files/zh-cn/web/html/element/area/index.md @@ -28,7 +28,7 @@ _HTML `` 元素 在图片上定义一个热点区域,可以关联一个 - `href` - : area 的超链接,值为一个 URL. HTML4 里,这个值不管是不是有值都要明确指定出来。HTML5 里则不需要。 - `hreflang` - - : 指明链接资源的语言类型,值的范围参考[BCP47](http://www.ietf.org/rfc/bcp/bcp47.txt). 这个属性只能在指明 href 属性之后使用。 + - : 指明链接资源的语言类型,值的范围参考 [BCP47](http://www.ietf.org/rfc/bcp/bcp47.txt). 这个属性只能在指明 href 属性之后使用。 - `name` {{Deprecated_Inline}} - : 为可点击区域定义一个名字以使旧浏览器解析。 - `media` diff --git a/files/zh-cn/web/html/element/article/index.md b/files/zh-cn/web/html/element/article/index.md index e621eef78abbec..361b6f96e42fb1 100644 --- a/files/zh-cn/web/html/element/article/index.md +++ b/files/zh-cn/web/html/element/article/index.md @@ -49,8 +49,8 @@ slug: Web/HTML/Element/article - 每个`
`,通常包括标题(\

- \

元素)作为`
`元素的子元素。 - 当`
`元素嵌套使用时,则该元素代表与外层元素有关的文章。例如,代表博客评论的`
`元素可嵌套在代表博客文章的`
`元素中。 - `
`元素的作者信息可通过{{HTMLElement("address")}}元素提供,但是不适用于嵌套的`
`元素。 -- `
`元素的发布日期和时间可通过{{HTMLElement("time")}}元素的[`pubdate`](/zh-CN/docs/Web/HTML/Element/time#pubdate)属性表示。 -- 可以使用{{HTMLElement("time")}} 元素的[`datetime`](/zh-CN/docs/Web/HTML/Element/time#datetime)属性来描述`
`元素的发布日期和时间。请注意{{HTMLElement("time")}}的*[`pubdate`](/zh-CN/docs/Web/HTML/Element/time#pubdate)* 属性不再是*{{glossary("W3C")}}* *{{glossary("HTML5")}}*标准。 +- `
`元素的发布日期和时间可通过{{HTMLElement("time")}}元素的 [`pubdate`](/zh-CN/docs/Web/HTML/Element/time#pubdate)属性表示。 +- 可以使用{{HTMLElement("time")}} 元素的 [`datetime`](/zh-CN/docs/Web/HTML/Element/time#datetime)属性来描述`
`元素的发布日期和时间。请注意{{HTMLElement("time")}}的*[`pubdate`](/zh-CN/docs/Web/HTML/Element/time#pubdate)* 属性不再是*{{glossary("W3C")}}* *{{glossary("HTML5")}}*标准。 ## 示例 diff --git a/files/zh-cn/web/html/element/big/index.md b/files/zh-cn/web/html/element/big/index.md index ee1c0f72622132..e5102bfb32244d 100644 --- a/files/zh-cn/web/html/element/big/index.md +++ b/files/zh-cn/web/html/element/big/index.md @@ -9,7 +9,7 @@ slug: Web/HTML/Element/big The HTML Big Element (``) 会使字体加大一号(例如从小号 (small) 到中号 (medium),从大号 (large) 到加大 (x-large)),最大不超过浏览器的最大字体。 -> **备注:** 由于它是纯显示性的,该元素在[HTML5](/zh-CN/docs/Web/Guide/HTML/HTML5)中已经被移除,不应当再使用。取而代之,网页开发者应当使用 CSS 属性。 +> **备注:** 由于它是纯显示性的,该元素在 [HTML5](/zh-CN/docs/Web/Guide/HTML/HTML5)中已经被移除,不应当再使用。取而代之,网页开发者应当使用 CSS 属性。 ## 属性 diff --git a/files/zh-cn/web/html/element/button/index.md b/files/zh-cn/web/html/element/button/index.md index f3cdbe4b79ea5b..1522836c71e8b3 100644 --- a/files/zh-cn/web/html/element/button/index.md +++ b/files/zh-cn/web/html/element/button/index.md @@ -45,31 +45,31 @@ slug: Web/HTML/Element/button - `autocomplete` {{non-standard_inline}} - : 该属性在 {{HTMLElement("button")}}上的使用并未标准化,只有 Firefox 允许。不像其他浏览器,Firefox 默认在页面加载时持续禁用 Button 的动态状态([Firefox persists the dynamic disabled state](http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) )。将此属性设置为`off` (i.e. `autocomplete="off"`) 关闭此特性。参见 [Firefox bug 654072](https://bugzil.la/654072)。 - `disabled` - - : 此布尔属性表示用户不能与 button 交互。如果属性值未指定,button 继承包含元素,例如{{HTMLElement("fieldset")}};如果没有设置**disabled**属性的包含元素,button 将可交互。不像其他浏览器,Firefox 默认在页面加载时持续禁用 Button 的动态状态。使用[`autocomplete`](/zh-CN/docs/Web/HTML/Element/button#autocomplete)属性可控制此特性。 + - : 此布尔属性表示用户不能与 button 交互。如果属性值未指定,button 继承包含元素,例如{{HTMLElement("fieldset")}};如果没有设置**disabled**属性的包含元素,button 将可交互。不像其他浏览器,Firefox 默认在页面加载时持续禁用 Button 的动态状态。使用 [`autocomplete`](/zh-CN/docs/Web/HTML/Element/button#autocomplete)属性可控制此特性。 - `form` - : 表示 button 元素关联的 form 元素(它的表单拥有者)。此属性值必须为同一文档中的一个{{HTMLElement("form")}}元素的**id**属性。如果此属性未指定,\