From dfa3197386a38309fda32d2bff029069f2fb2d28 Mon Sep 17 00:00:00 2001 From: A1lo Date: Wed, 18 Sep 2024 08:25:42 +0800 Subject: [PATCH 01/26] chore(zh-cn): add language tags for fenced codes (part 4) (#23300) --- files/zh-cn/.markdownlint.jsonc | 21 ++++++ files/zh-cn/web/api/mediaquerylist/index.md | 19 ----- files/zh-cn/web/api/node/index.md | 6 -- files/zh-cn/web/api/uievent/which/index.md | 8 +- .../web/css/-webkit-touch-callout/index.md | 12 +-- files/zh-cn/web/css/_colon_target/index.md | 2 +- files/zh-cn/web/css/_colon_where/index.md | 14 ++-- .../web/css/_doublecolon_backdrop/index.md | 6 +- files/zh-cn/web/css/_doublecolon_cue/index.md | 6 +- .../web/css/_doublecolon_selection/index.md | 9 +-- files/zh-cn/web/css/attr/index.md | 13 +++- .../web/css/background-blend-mode/index.md | 21 ++++-- .../zh-cn/web/css/background-origin/index.md | 35 +++++---- .../web/css/background-position/index.md | 6 +- .../web/css/border-image-outset/index.md | 38 ++++++---- .../web/css/border-image-repeat/index.md | 41 +++++++---- files/zh-cn/web/css/clear/index.md | 8 +- files/zh-cn/web/css/clip/index.md | 30 +++++--- .../css/color-interpolation-method/index.md | 4 +- files/zh-cn/web/css/content/index.md | 73 +++++++++++++------ files/zh-cn/web/css/counter/index.md | 18 ++--- .../using_css_counters/index.md | 4 +- .../using_media_queries/index.md | 2 +- .../stacking_context/index.md | 40 ++++++---- files/zh-cn/web/css/cursor/index.md | 2 +- files/zh-cn/web/css/element/index.md | 2 +- .../css/filter-function/drop-shadow/index.md | 24 +++++- files/zh-cn/web/css/hex-color/index.md | 2 +- .../web/css/hue-interpolation-method/index.md | 2 +- .../zh-cn/web/css/image-orientation/index.md | 32 ++++---- files/zh-cn/web/css/image/index.md | 29 +++++--- files/zh-cn/web/css/mix-blend-mode/index.md | 12 ++- files/zh-cn/web/css/outline/index.md | 40 ++++++---- files/zh-cn/web/css/time/index.md | 2 +- .../css/transform-function/matrix3d/index.md | 4 +- .../transform-function/perspective/index.md | 6 +- .../css/transform-function/rotate/index.md | 2 +- .../css/transform-function/rotate3d/index.md | 2 +- .../css/transform-function/rotatex/index.md | 2 +- .../css/transform-function/rotatey/index.md | 2 +- .../css/transform-function/rotatez/index.md | 2 +- .../web/css/transform-function/skew/index.md | 2 +- files/zh-cn/web/css/word-break/index.md | 11 ++- files/zh-cn/web/http/caching/index.md | 4 +- .../corsalloworiginnotmatchingorigin/index.md | 4 +- .../errors/corsmissingalloworigin/index.md | 8 +- files/zh-cn/web/http/headers/cookie/index.md | 4 +- .../zh-cn/web/http/headers/expect-ct/index.md | 4 +- files/zh-cn/web/http/headers/origin/index.md | 2 +- .../permissions-policy/camera/index.md | 4 +- files/zh-cn/web/http/status/404/index.md | 4 +- .../guide/indexed_collections/index.md | 2 +- .../guide/loops_and_iteration/index.md | 2 +- .../deprecated_and_obsolete_features/index.md | 2 +- .../errors/not_a_valid_code_point/index.md | 2 +- .../object/constructor/index.md | 2 +- .../global_objects/regexp/exec/index.md | 2 +- .../reference/iteration_protocols/index.md | 2 +- files/zh-cn/web/uri/schemes/data/index.md | 2 +- 59 files changed, 405 insertions(+), 261 deletions(-) diff --git a/files/zh-cn/.markdownlint.jsonc b/files/zh-cn/.markdownlint.jsonc index cb48f009c18eba..6ef149968c88f4 100644 --- a/files/zh-cn/.markdownlint.jsonc +++ b/files/zh-cn/.markdownlint.jsonc @@ -3,6 +3,7 @@ "no-trailing-punctuation": { "punctuation": ".,;:。，", }, + "fenced-code-language": true, "search-replace": { "rules": [ { @@ -73,6 +74,26 @@ "searchPattern": "/您/g", "searchScope": "text", }, + { + "name": "text-code-fence", + "message": "Use 'plain' tag", + "searchPattern": "/(^ *`{3,})(text|none|unix)/gm", + "replace": "$1plain", + "searchScope": "text", + }, + { + "name": "gfm-alert", + "message": "Use the GFM syntax: https://developer.mozilla.org/zh-CN/docs/MDN/Writing_guidelines/Howto/Markdown_in_MDN#备注、警告和标注", + "searchPattern": "/^ *> \\*\\*(Note|Warning|Callout):\\*\\*(?! [[{`_*])/gm", + "searchScope": "text", + }, + { + "name": "bad-gfm-alert", + "message": "Use the correct GFM syntax: `> [!NOTE]`", + // TODO this should use the modifier syntax; until it has better Node support + "searchPattern": "/^ *> !?\\[!?((?!NOTE)[Nn][Oo][Tt][Ee]|(?!WARNING)[Ww][Aa][Rr][Nn][Ii][Nn][Gg]|(?!CALLOUT)[Cc][Aa][Ll][Ll][Oo][Uu][Tt])\\]\\n|^ *> (?!\\[!)!?\\[!?(NOTE|WARNING|CALLOUT)\\]\\n/gm", + "searchScope": "text", + }, ], }, } diff --git a/files/zh-cn/web/api/mediaquerylist/index.md b/files/zh-cn/web/api/mediaquerylist/index.md index 58d6416be5841b..56229f85642473 100644 --- a/files/zh-cn/web/api/mediaquerylist/index.md +++ b/files/zh-cn/web/api/mediaquerylist/index.md @@ -9,13 +9,6 @@ slug: Web/API/MediaQueryList 如果你需要以编程方式来检测一个 document 上的媒体查询的值的变化，这个 `MediaQueryList` 对象使得通过观察其 document 而检测它的媒体查询的值的变化成为可能，而不是周期性地对这些媒体查询的值进行检查。 -## 方法概述 - -``` -void addListener(MediaQueryListListener listener); -void removeListener(MediaQueryListListener listener); -``` - ## 实例属性 _`MediaQueryList` 接口从它的父接口 {{DOMxRef("EventTarget")}} 继承了属性。_ @@ -31,12 +24,6 @@ _`MediaQueryList` 接口从它的父接口 {{DOMxRef("EventTarget")}} 继承了 在媒体查询列表上增加一个新的监听器，如果列表中已经存在了这个指定的监听器，这个方法将失去作用。 -``` -void addListener( - MediaQueryListListener listener -); -``` - #### 参数 ( 针对 addListener 方法) - `listener` @@ -46,12 +33,6 @@ void addListener( 从媒体查询列表中移除一个监听器，如果列表中不存在这个指定的监听器，则这个方法将失去作用。 -``` -void removeListener( - MediaQueryListListener listener -); -``` - #### 参数 (针对 removeListener 方法) - `listener` diff --git a/files/zh-cn/web/api/node/index.md b/files/zh-cn/web/api/node/index.md index 54bbf394d102b2..956f114e8a6e2a 100644 --- a/files/zh-cn/web/api/node/index.md +++ b/files/zh-cn/web/api/node/index.md @@ -182,12 +182,6 @@ function eachNode(rootNode, callback) { } ``` -#### 语法 - -``` -eachNode(rootNode, callback); -``` - #### 描述 使用递归的方式对 `rootNode` 的所有后代节点执行回调函数（包括 `rootNode` 自身） diff --git a/files/zh-cn/web/api/uievent/which/index.md b/files/zh-cn/web/api/uievent/which/index.md index 50395809cd8078..492969a520ded6 100644 --- a/files/zh-cn/web/api/uievent/which/index.md +++ b/files/zh-cn/web/api/uievent/which/index.md @@ -7,13 +7,7 @@ slug: Web/API/UIEvent/which {{domxref("KeyboardEvent")}} 接口的 **`which`** 只读属性返回所按下键的数字 `keyCode` 或所按下字母数字键的字符代码 (`charCode`) 。 -## 语法 - -``` -var keyResult = event.which; -``` - -### 返回值 +## 值 - `keyResult` contains the numeric code for a particular key pressed, depending on whether an alphanumeric or non-alphanumeric key was pressed. Please see {{domxref("KeyboardEvent.charCode")}} and {{domxref("KeyboardEvent.keyCode")}} for more details. 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..29ac876d2f0f89 100644 --- a/files/zh-cn/web/css/-webkit-touch-callout/index.md +++ b/files/zh-cn/web/css/-webkit-touch-callout/index.md @@ -13,16 +13,16 @@ slug: Web/CSS/-webkit-touch-callout ## 语法 -``` -Formal syntax: default | none -``` - ```css --webkit-touch-callout: default; /* displays the callout */ --webkit-touch-callout: none; /* disables the callout */ +/* 关键字值 */ +-webkit-touch-callout: default; +-webkit-touch-callout: none; +/* 全局值 */ -webkit-touch-callout: initial; -webkit-touch-callout: inherit; +-webkit-touch-callout: revert; +-webkit-touch-callout: revert-layer; -webkit-touch-callout: unset; ``` diff --git a/files/zh-cn/web/css/_colon_target/index.md b/files/zh-cn/web/css/_colon_target/index.md index 79b3a0d5dd1f7f..c5cb03ece4a580 100644 --- a/files/zh-cn/web/css/_colon_target/index.md +++ b/files/zh-cn/web/css/_colon_target/index.md @@ -16,7 +16,7 @@ slug: Web/CSS/:target 例如，以下 URL 具有一个片段（由 # 符号表示），指向名为 `section2` 的元素： -``` +```url http://www.example.com/index.html#section2 ``` diff --git a/files/zh-cn/web/css/_colon_where/index.md b/files/zh-cn/web/css/_colon_where/index.md index 3a1d63517a956d..f7d4951a3e97a1 100644 --- a/files/zh-cn/web/css/_colon_where/index.md +++ b/files/zh-cn/web/css/_colon_where/index.md @@ -26,6 +26,14 @@ footer p:hover { `:where()` 和 {{CSSxRef(":is", ":is()")}} 的不同之处在于，`:where()` 的[优先级](/zh-CN/docs/Web/CSS/Specificity)总是为 0，但是 `:is()` 的优先级是由它的选择器列表中优先级最高的[选择器](/zh-CN/docs/Glossary/CSS_Selector)决定的。 +## 语法 + +```css-nolint +:where() { + /* ... */ +} +``` + ### 可容错选择器解析 规范将 `:is()` 和 `:where()` 定义为接受一个[可容错选择器列表](https://drafts.csswg.org/selectors-4/#typedef-forgiving-selector-list)。 @@ -143,12 +151,6 @@ footer a { {{EmbedLiveSample('示例', '100%', 600)}} -## 语法 - -``` -:where( ) -``` - ## 规范 {{Specifications}} diff --git a/files/zh-cn/web/css/_doublecolon_backdrop/index.md b/files/zh-cn/web/css/_doublecolon_backdrop/index.md index e28d1c9d9a79da..9108da5cf1b992 100644 --- a/files/zh-cn/web/css/_doublecolon_backdrop/index.md +++ b/files/zh-cn/web/css/_doublecolon_backdrop/index.md @@ -20,8 +20,10 @@ dialog::backdrop { ## 语法 -``` -::backdrop +```css +::backdrop { + /* ... */ +} ``` ## 示例 diff --git a/files/zh-cn/web/css/_doublecolon_cue/index.md b/files/zh-cn/web/css/_doublecolon_cue/index.md index 19c2873ab6f4c0..d9848efe9cbb1c 100644 --- a/files/zh-cn/web/css/_doublecolon_cue/index.md +++ b/files/zh-cn/web/css/_doublecolon_cue/index.md @@ -26,8 +26,10 @@ slug: Web/CSS/::cue ## 语法 -``` -::cue | ::cue( ) +```css-nolint +::cue | ::cue() { + /* ... */ +} ``` ## 示例 diff --git a/files/zh-cn/web/css/_doublecolon_selection/index.md b/files/zh-cn/web/css/_doublecolon_selection/index.md index f2b32e411f6b5b..2a7303899e6081 100644 --- a/files/zh-cn/web/css/_doublecolon_selection/index.md +++ b/files/zh-cn/web/css/_doublecolon_selection/index.md @@ -31,11 +31,10 @@ slug: Web/CSS/::selection ## 语法 -``` -/* Legacy Firefox syntax (version 61 and below) */ -::-moz-selection - -{{CSSSyntax}} +```css +::selection { + /* ... */ +} ``` ## 示例 diff --git a/files/zh-cn/web/css/attr/index.md b/files/zh-cn/web/css/attr/index.md index 58d61216bef0bb..9257cdcb5801ae 100644 --- a/files/zh-cn/web/css/attr/index.md +++ b/files/zh-cn/web/css/attr/index.md @@ -17,8 +17,17 @@ CSS 表达式 `attr()` 用来获取选择到的元素的某一 HTML 属性值， ## 语法 -``` -语法：attr( attribute-name ? [, ]? ) +```css +/* 关键字值 */ +-webkit-touch-callout: default; +-webkit-touch-callout: none; + +/* 全局值 */ +-webkit-touch-callout: initial; +-webkit-touch-callout: inherit; +-webkit-touch-callout: revert; +-webkit-touch-callout: revert-layer; +-webkit-touch-callout: unset; ``` ### 解释 diff --git a/files/zh-cn/web/css/background-blend-mode/index.md b/files/zh-cn/web/css/background-blend-mode/index.md index 066ac355cbc7dc..55a2bf6c3b1a06 100644 --- a/files/zh-cn/web/css/background-blend-mode/index.md +++ b/files/zh-cn/web/css/background-blend-mode/index.md @@ -15,19 +15,18 @@ slug: Web/CSS/background-blend-mode ## 语法 -``` -Formal syntax: {{csssyntax("background-blend-mode")}} -``` - -``` +```css /* 单值 */ background-blend-mode: normal; -/* 双值，每个背景一个值 */ +/* 双值，一个值对应一个背景 */ background-blend-mode: darken, luminosity; -background-blend-mode: initial; +/* 全局值 */ background-blend-mode: inherit; +background-blend-mode: initial; +background-blend-mode: revert; +background-blend-mode: revert-layer; background-blend-mode: unset; ``` @@ -36,6 +35,14 @@ background-blend-mode: unset; - {{cssxref("<blend-mode>")}} - : 一个定义混合的模式，可以有多个值，用逗号间隔。 +## 形式定义 + +{{cssinfo}} + +## 形式语法 + +{{csssyntax}} + ## 示例 ```html hidden diff --git a/files/zh-cn/web/css/background-origin/index.md b/files/zh-cn/web/css/background-origin/index.md index dde1de731b09d5..80edbbd1e18061 100644 --- a/files/zh-cn/web/css/background-origin/index.md +++ b/files/zh-cn/web/css/background-origin/index.md @@ -14,20 +14,20 @@ slug: Web/CSS/background-origin > [!NOTE] > 假如{{cssxref("background")}}简写中没有设置该值，那么在 background 简写值后指定 background-origin，那么后面的值就会覆盖简写值，其实说白了，就是后出现的值会覆盖前面的值。 -{{cssinfo}} - ## 语法 -``` -Formal syntax: {{csssyntax("background-origin")}} -``` - -``` -background-origin: border-box -background-origin: padding-box -background-origin: content-box - -background-origin: inherit +```css +/* 关键字值 */ +background-origin: border-box; +background-origin: padding-box; +background-origin: content-box; + +/* 全局值 */ +background-origin: inherit; +background-origin: initial; +background-origin: revert; +background-origin: revert-layer; +background-origin: unset; ``` ### 属性值 @@ -39,12 +39,15 @@ background-origin: inherit - `content-box` - : 背景图片的摆放以 content 区域为参考 -### 形式化语法 +## 形式语法 + +{{cssinfo}} + +## 形式定义 -[How to read CSS syntax.](/zh-CN/docs/Web/CSS/Value_definition_syntax) -{{csssyntax("background-origin")}} +{{csssyntax}} -## 例子 +## 示例 ```css .example { diff --git a/files/zh-cn/web/css/background-position/index.md b/files/zh-cn/web/css/background-position/index.md index 4e3a127c8f50d7..96f78e5b3e3990 100644 --- a/files/zh-cn/web/css/background-position/index.md +++ b/files/zh-cn/web/css/background-position/index.md @@ -84,20 +84,20 @@ background-position: unset; 基本上发生的情况是从相应的容器尺寸中*减去*背景图像尺寸，然后将结果值的百分比用作从左（或顶部）边界的直接偏移量。 -``` +```plain (container width - image width) * (position x%) = (x offset value) (container height - image height) * (position y%) = (y offset value) ``` 以 X 轴为例，假设我们有一个 300px 宽的图像，我们在一个 100px 宽的容器中使用它，`background-size` 设置为 `auto`： -``` +```plain 100px - 300px = -200px (container & image difference) ``` 因此，位置百分比为 -25%、0%、50%、100%、125%，我们得到这些图像到容器边界偏移值： -``` +```plain -200px * -25% = 50px -200px * 0% = 0px -200px * 50% = -100px diff --git a/files/zh-cn/web/css/border-image-outset/index.md b/files/zh-cn/web/css/border-image-outset/index.md index b148d0fbfcc705..8e28dca7620e77 100644 --- a/files/zh-cn/web/css/border-image-outset/index.md +++ b/files/zh-cn/web/css/border-image-outset/index.md @@ -9,28 +9,30 @@ slug: Web/CSS/border-image-outset `border-image-outset` 属性定义边框图像可超出边框盒的大小。 -{{cssinfo}} - ## 语法 -``` -Formal syntax: {{csssyntax("border-image-outset")}} -``` +```css +/* 值 */ +border-image-outset: 1rem; -``` -/* border-image-outset: sides */ -border-image-outset: 30%; +/* 值 */ +border-image-outset: 1.5; -/* border-image-outset:垂直 水平 */ -border-image-outset: 10% 30%; +/* 上、下 | 左、右 */ +border-image-outset: 1 1.2; -/* border-image-outset: 顶 水平 底 */ -border-image-outset: 30px 30% 45px; +/* 上 | 左、右 | 下 */ +border-image-outset: 30px 2 45px; -/* border-image-outset:顶 右 底 左 */ +/* 上 | 右 | 下 | 左 */ border-image-outset: 7px 12px 14px 5px; -border-image-repeat: inherit; +/* 全局值值 */ +border-image-outset: inherit; +border-image-outset: initial; +border-image-outset: revert; +border-image-outset: revert-layer; +border-image-outset: unset; ``` ### 值 @@ -52,6 +54,14 @@ border-image-repeat: inherit; - `inherit` - : 四个方向的值都继承于父元素的该属性计算后值。 +## 形式定义 + +{{CSSInfo}} + +## 形式语法 + +{{csssyntax}} + ## 规范 {{Specifications}} diff --git a/files/zh-cn/web/css/border-image-repeat/index.md b/files/zh-cn/web/css/border-image-repeat/index.md index 4a90f193cfa7e5..d8e753384ffe79 100644 --- a/files/zh-cn/web/css/border-image-repeat/index.md +++ b/files/zh-cn/web/css/border-image-repeat/index.md @@ -7,22 +7,27 @@ slug: Web/CSS/border-image-repeat `border-image-repeat` 定义图片如何填充边框。或为单个值，设置所有的边框；或为两个值，分别设置水平与垂直的边框。 -{{cssinfo}} +## 语法 -## Syntax +```css +/* 关键字值 */ +border-image-repeat: stretch; +border-image-repeat: repeat; +border-image-repeat: round; +border-image-repeat: space; -``` -Formal syntax: {{csssyntax("border-image-repeat")}} -``` - -``` -border-image-repeat: type /* One-value syntax */ E.g. border-image-value: stretch; -border-image-repeat: horizontal vertical /* Two-value syntax */ E.g. border-image-width: round space; +/* 上、下 | 左、右 */ +border-image-repeat: round stretch; -border-image-repeat: inherit +/* 全局值 */ +border-image-repeat: inherit; +border-image-repeat: initial; +border-image-repeat: revert; +border-image-repeat: revert-layer; +border-image-repeat: unset; ``` -### Values +### 值 - _type_ - : `stretch`, `repeat`, `round`, `space` 选一。属于单个值的情况。 @@ -41,14 +46,22 @@ border-image-repeat: inherit - `inherit` - : 继承父级元素的计算值。 -## Examples +## 形式定义 + +{{CSSInfo}} + +## 形式语法 + +{{csssyntax}} + +## 示例 不同的取值，查看 {{cssxref("border-image")}} 的示例。 -## Specifications +## 规范 {{Specifications}} -## Browser compatibility +## 浏览器兼容性 {{Compat}} diff --git a/files/zh-cn/web/css/clear/index.md b/files/zh-cn/web/css/clear/index.md index 33a593cb61469d..525febe434d436 100644 --- a/files/zh-cn/web/css/clear/index.md +++ b/files/zh-cn/web/css/clear/index.md @@ -28,8 +28,8 @@ slug: Web/CSS/clear ## 语法 -``` -/* Keyword values */ +```css +/* 关键字值 */ clear: none; clear: left; clear: right; @@ -37,9 +37,11 @@ clear: both; clear: inline-start; clear: inline-end; -/* Global values */ +/* 全局值 */ clear: inherit; clear: initial; +clear: revert; +clear: revert-layer; clear: unset; ``` diff --git a/files/zh-cn/web/css/clip/index.md b/files/zh-cn/web/css/clip/index.md index 3f0d23b0c58692..6d061e4b7c9d5a 100644 --- a/files/zh-cn/web/css/clip/index.md +++ b/files/zh-cn/web/css/clip/index.md @@ -12,17 +12,21 @@ slug: Web/CSS/clip > [!WARNING] > 这个属性已被废弃。建议使用 {{cssxref("clip-path")}} 。 -{{cssinfo}} - ## 语法 -[形式语法](/zh-CN/docs/CSS/Value_definition_syntax): {{csssyntax("clip")}} - -``` -clip: rect(1px, 10em, 3rem, 2ch) -clip: auto - -clip: inherit +```css +/* 关键字值 */ +clip: auto; + +/* 值 */ +clip: rect(1px, 10em, 3rem, 2ch); + +/* 全局值 */ +clip: inherit; +clip: initial; +clip: revert; +clip: revert-layer; +clip: unset; ``` ### 值 @@ -47,6 +51,14 @@ clip: inherit - `auto` - : 元素不裁剪 (默认值) +## 形式定义 + +{{cssinfo}} + +## 形式语法 + +{{csssyntax}} + ## 示例 ### 裁剪图像 diff --git a/files/zh-cn/web/css/color-interpolation-method/index.md b/files/zh-cn/web/css/color-interpolation-method/index.md index 110efeb50f138b..a4efad8c1093d8 100644 --- a/files/zh-cn/web/css/color-interpolation-method/index.md +++ b/files/zh-cn/web/css/color-interpolation-method/index.md @@ -13,9 +13,9 @@ slug: Web/CSS/color-interpolation-method `` 指定了插值应使用直角坐标颜色空间还是带可选色相插值方法的极坐标颜色空间： -``` +```plain in -/* 或者 */ +// 或者 in [ ] ``` diff --git a/files/zh-cn/web/css/content/index.md b/files/zh-cn/web/css/content/index.md index 2056bdd29ef42a..c3236a92026edd 100644 --- a/files/zh-cn/web/css/content/index.md +++ b/files/zh-cn/web/css/content/index.md @@ -9,30 +9,51 @@ slug: Web/CSS/content CSS 的 `content` CSS 属性用于在元素的 {{ cssxref("::before") }} 和 {{ cssxref("::after") }} 伪元素中插入内容。使用 `content` 属性插入的内容都是匿名的[_可替换元素_](/zh-CN/docs/Web/CSS/Replaced_element)。 -{{cssinfo}} - ## 语法 -``` -Formal syntax: {{csssyntax("content")}} -``` - -``` -content: normal /* Keywords that cannot be combined with other values */ -content: none - -content: 'prefix' /* value, non-latin characters must be encoded e.g. \00A0 for   */ -content: url(http://www.example.com/test.html) /* value */ -content: chapter_counter /* values */ -content: attr(value string) /* attr() value linked to the HTML attribute value */ -content: open-quote /* Language- and position-dependant keywords */ -content: close-quote -content: no-open-quote -content: no-close-quote - -content: open-quote chapter_counter /* Except for normal and none, several values can be used simultaneously */ - -content: inherit +```css +/* 不能与其他值组合的关键字 */ +content: normal; +content: none; + +/* ： 值 */ +content: url("http://www.example.com/test.png"); +content: linear-gradient(#e66465, #9198e5); +content: image-set("image1x.png" 1x, "image2x.png" 2x); + +/* 语音输出：“/”后为替代文本 */ +content: url("../img/test.png") / "这是替代文本"; + +/* 值 */ +content: "unparsed text"; + +/* 值，后跟可选的 */ +content: counter(chapter_counter); +content: counter(chapter_counter, upper-roman); +content: counters(section_counter, "."); +content: counters(section_counter, ".", decimal-leading-zero); + +/* attr() 值会链接到 HTML 属性值 */ +content: attr(href); + +/* 值 */ +content: open-quote; +content: close-quote; +content: no-open-quote; +content: no-close-quote; + +/* ：content 值的列表。 +可以同时使用多个值 */ +content: "prefix" url(http://www.example.com/test.png); +content: "prefix" url("/img/test.png") "suffix" / "Alt text"; +content: open-quote counter(chapter_counter); + +/* 全局值 */ +content: inherit; +content: initial; +content: revert; +content: revert-layer; +content: unset; ``` ### 值 @@ -54,6 +75,14 @@ content: inherit - `no-open-quote` | `no-close-quote` - : 不会生产任何内容，但是会改变（增加或降低）引号层级。 +## 形式定义 + +{{cssinfo}} + +## 形式语法 + +{{csssyntax}} + ## 示例 ### 标题和引号 diff --git a/files/zh-cn/web/css/counter/index.md b/files/zh-cn/web/css/counter/index.md index 6b704b83d6a19a..09dd26a8c5abfe 100644 --- a/files/zh-cn/web/css/counter/index.md +++ b/files/zh-cn/web/css/counter/index.md @@ -23,6 +23,14 @@ counter(countername, upper-roman) ## 语法 +```css +/* 简单的用法 */ +counter(countername); + +/* 改变计数器的显示 */ +counter(countername, upper-roman) +``` + ### 值 - ` 自定义标识` @@ -32,15 +40,7 @@ counter(countername, upper-roman) ### 形式语法 -``` -counter( , ? ) - -where - = | symbols() - -where - = -``` +{{CSSSyntax}} ## 示例 diff --git a/files/zh-cn/web/css/css_counter_styles/using_css_counters/index.md b/files/zh-cn/web/css/css_counter_styles/using_css_counters/index.md index 088b9cc26214a2..2060c240df8264 100644 --- a/files/zh-cn/web/css/css_counter_styles/using_css_counters/index.md +++ b/files/zh-cn/web/css/css_counter_styles/using_css_counters/index.md @@ -58,7 +58,7 @@ h3::before { 当不需要包含父级上下文的编号，而仅需要嵌套内容的编号时，应使用 {{cssxref("counter", "counter()")}} 函数。例如，以下示例的每一个嵌套内容的计数都从 1 开始： -``` +```plain 1 One 1 Nested one 2 Nested two @@ -71,7 +71,7 @@ h3::before { 当需要同时包含父级上下文和嵌套内容的编号时，应使用 {{cssxref("counters", "counters()")}} 函数。例如，以下示例的每一个嵌套内容会包含父级编号： -``` +```plain 1 One 1.1 Nested one 1.2 Nested two 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 60fdf894ba7a05..bcddd2bcdc6f40 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 @@ -12,7 +12,7 @@ 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)元素指定特定的媒体类型。如： -``` +```html ``` diff --git a/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md b/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md index c899641808b7de..c6f227380db29a 100644 --- a/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md +++ b/files/zh-cn/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md @@ -84,40 +84,52 @@ slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context ### HTML -``` +```html

Division Element #1

- position: relative;
- z-index: 5; + position: relative;
+ z-index: 5;

Division Element #2

- position: relative;
- z-index: 2; + position: relative;
+ z-index: 2;

Division Element #4

- position: relative;
- z-index: 6; + position: relative;
+ z-index: 6;

Division Element #3

- position: absolute;
- z-index: 4; + position: absolute;
+ z-index: 4;

Division Element #5

- position: relative;
- z-index: 1; + position: relative;
+ z-index: 1;

Division Element #6

- position: absolute;
- z-index: 3; + position: absolute;
+ z-index: 3;
``` @@ -195,7 +207,7 @@ h1 { } ``` -### Result +### 结果 {{EmbedLiveSample('示例源码', '100%', '396') }} diff --git a/files/zh-cn/web/css/cursor/index.md b/files/zh-cn/web/css/cursor/index.md index 403311433166c0..e80d53d337401b 100644 --- a/files/zh-cn/web/css/cursor/index.md +++ b/files/zh-cn/web/css/cursor/index.md @@ -315,7 +315,7 @@ cursor: ## 示例 -``` +```css .foo { cursor: crosshair; } diff --git a/files/zh-cn/web/css/element/index.md b/files/zh-cn/web/css/element/index.md index 35834668dba06c..01a72d3522b93c 100644 --- a/files/zh-cn/web/css/element/index.md +++ b/files/zh-cn/web/css/element/index.md @@ -13,7 +13,7 @@ slug: Web/CSS/element ## 语法 -``` +```css element(id) ``` diff --git a/files/zh-cn/web/css/filter-function/drop-shadow/index.md b/files/zh-cn/web/css/filter-function/drop-shadow/index.md index 4bed18910567e5..33de1a3e9214d7 100644 --- a/files/zh-cn/web/css/filter-function/drop-shadow/index.md +++ b/files/zh-cn/web/css/filter-function/drop-shadow/index.md @@ -14,10 +14,28 @@ The **`drop-shadow()`** [CSS](/zh-CN/docs/Web/CSS) function applies a drop shado > [!NOTE] > 这个函数有点类似于 {{Cssxref("box-shadow")}} 属性。`box-shadow` 属性在元素的整个框后面创建一个矩形阴影，而 `drop-shadow()` 过滤器则是创建一个符合图像本身形状 (alpha 通道) 的阴影。 -## Syntax +## 语法 -``` -drop-shadow(offset-x offset-y blur-radius spread-radius color) +```css +/* 双长度值 */ +/* drop-shadow( ) */ +drop-shadow(5px 5px) + +/* 三长度值 */ +/* drop-shadow( ) */ +drop-shadow(5px 5px 15px) + +/* 双长度值加一个颜色值 */ +/* drop-shadow( ) */ +drop-shadow(5px 5px red) + +/* 三长度值加一个颜色值 */ +/* drop-shadow( ) */ +drop-shadow(5px 5px 15px red) + +/* 可以改变颜色和长度值的顺序 */ +/* drop-shadow( ) */ +drop-shadow(#e23 0.5rem 0.5rem 1rem) ``` The `drop-shadow()` function accepts a parameter of type `` (defined in the {{cssxref("box-shadow")}} property), with the exception that the `inset` keyword is not allowed. diff --git a/files/zh-cn/web/css/hex-color/index.md b/files/zh-cn/web/css/hex-color/index.md index 70e32a90ada0d9..678b21acf8b779 100644 --- a/files/zh-cn/web/css/hex-color/index.md +++ b/files/zh-cn/web/css/hex-color/index.md @@ -11,7 +11,7 @@ slug: Web/CSS/hex-color ## 语法 -``` +```plain #RGB // 三值语法 #RGBA // 四值语法 #RRGGBB // 六值语法 diff --git a/files/zh-cn/web/css/hue-interpolation-method/index.md b/files/zh-cn/web/css/hue-interpolation-method/index.md index db60244877be39..a29882b461d3bd 100644 --- a/files/zh-cn/web/css/hue-interpolation-method/index.md +++ b/files/zh-cn/web/css/hue-interpolation-method/index.md @@ -13,7 +13,7 @@ slug: Web/CSS/hue-interpolation-method `` 值由色相插值算法的名称后接字面标记 `hue` 所构成： -``` +```plain shorter hue longer hue increasing hue diff --git a/files/zh-cn/web/css/image-orientation/index.md b/files/zh-cn/web/css/image-orientation/index.md index 3e577b8c0897c6..e4f0305a8dcc62 100644 --- a/files/zh-cn/web/css/image-orientation/index.md +++ b/files/zh-cn/web/css/image-orientation/index.md @@ -16,19 +16,17 @@ CSS 属性 **`image-orientation`** 用来修正某些图片的预设方向。 ## 语法 -``` -语法形式: {{csssyntax("image-orientation")}} -``` - -``` -image-orientation: 0deg -image-orientation: 6.4deg /* 非 90 度的整数倍，所以会被四舍五入到 0 度 */ -image-orientation: -90deg /* 相当于 270deg */ -image-orientation: from-image /* 使用图片的 EXIF 数据 */ -image-orientation: 90deg flip /* 旋转 90deg, 再水平翻转 */ -image-orientation: flip /* 不旋转，只进行水平翻转 */ - -image-orientation: inherit +```css +/* 关键字值 */ +image-orientation: none; +image-orientation: from-image; /* 使用图片的 EXIF 数据 */ + +/* 全局值 */ +image-orientation: inherit; +image-orientation: initial; +image-orientation: revert; +image-orientation: revert-layer; +image-orientation: unset; ``` ### 属性值 @@ -40,6 +38,14 @@ image-orientation: inherit - `flip` - : 对图片进行水平翻转，先进行第二个参数执行的旋转，再进行此次翻转。 +## 形式语法 + +{{cssinfo}} + +## 形式定义 + +{{csssyntax}} + ## 示例 ## 规范 diff --git a/files/zh-cn/web/css/image/index.md b/files/zh-cn/web/css/image/index.md index da3899336e15e7..fc871d4539b658 100644 --- a/files/zh-cn/web/css/image/index.md +++ b/files/zh-cn/web/css/image/index.md @@ -47,19 +47,30 @@ CSS 确定一个图像对象实际尺寸的依据有三条：(1) 图像的原始 以下是有效的图像引用值： -```css -url(test.jpg) url() 方法，只要 test.jpg 是图像文件 -linear-gradient(to bottom, blue, red) 一个 标签 -element(#colonne3) 页面的一部分，使用了 element() 方法， - 如果 colonne3 是存在于页面中的一个元素 id 即可 +```css example-good +url(test.jpg) /* 值，只要 test.jpg 是实际的图像 */ +linear-gradient(blue, red) /* 值 */ +element(#realid) /* 网页中的一部分，如果“realid”是页面上现有的元素， + 则会被 element() 函数所引用 */ +image(ltr 'arrow.png#xywh=0,0,16,16', red) + /* 中的一个 16x16 的部分，从原始图像的左上角开始（只要 + arrow.png 是受支持的图像，否则为纯红色的方块）。如果语言为从 + 右到左的（rtl），则图像将水平翻转。 */ +cross-fade(20% url(twenty.png), url(eighty.png)) + /* 半透明叠加的图像，其中 twenty 的不透明度为 20%， + 而 eighty 的不透明度为 80%。 */ +image-set('test.jpg' 1x, 'test-2x.jpg' 2x) + /* 一系列具有不同分辨率的图像 */ ``` 以下是无效的图像引用值： -``` -cervin.jpg 图像文件必须使用 url() 方法定义 -url(report.pdf) url() 方法指向的文件链接必须是一个图像文件 -element(#fakeid) 如果 fakeid 是一个不存在与页面的元素 id +```css example-bad +nourl.jpg /* 图像文件必须使用 url() 函数定义。 */ +url(report.pdf) /* url() 函数指向的文件链接必须是一个图像。 */ +element(#fakeid) /* 元素 ID 必须是当前页面中存在的 ID。 */ +image(z.jpg#xy=0,0) /* 块片段的格式必须为 xywh=#,#,#,# */ +image-set('cat.jpg' 1x, 'dog.jpg' 1x) /* 图像集中的每个图像必须具有不同的分辨率 */ ``` ## 规范 diff --git a/files/zh-cn/web/css/mix-blend-mode/index.md b/files/zh-cn/web/css/mix-blend-mode/index.md index 23325463c36ca7..691913f9580fc9 100644 --- a/files/zh-cn/web/css/mix-blend-mode/index.md +++ b/files/zh-cn/web/css/mix-blend-mode/index.md @@ -11,14 +11,15 @@ slug: Web/CSS/mix-blend-mode ## 语法 -``` +```css +/* 关键字值 */ mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mix-blend-mode: lighten; -mix-blend-mode: color-dodge +mix-blend-mode: color-dodge; mix-blend-mode: color-burn; mix-blend-mode: hard-light; mix-blend-mode: soft-light; @@ -28,9 +29,14 @@ mix-blend-mode: hue; mix-blend-mode: saturation; mix-blend-mode: color; mix-blend-mode: luminosity; +mix-blend-mode: plus-darker; +mix-blend-mode: plus-lighter; -mix-blend-mode: initial; +/* 全局值 */ mix-blend-mode: inherit; +mix-blend-mode: initial; +mix-blend-mode: revert; +mix-blend-mode: revert-layer; mix-blend-mode: unset; ``` diff --git a/files/zh-cn/web/css/outline/index.md b/files/zh-cn/web/css/outline/index.md index 245a1ff46cb269..155945bb6dfbfe 100644 --- a/files/zh-cn/web/css/outline/index.md +++ b/files/zh-cn/web/css/outline/index.md @@ -20,22 +20,24 @@ slug: Web/CSS/outline ## 语法 -``` +```css /* 样式 */ outline: solid; -/* 颜色 | 样式 */ -outline: #f66 dashed; +/* 样式 | 颜色 */ +outline: dashed #f66; -/* 样式 | 宽度 */ -outline: inset thick; +/* 宽度 | 样式 */ +outline: thick inset; -/* 颜色 | 样式 | 宽度 */ -outline: green solid 3px; +/* 宽度 | 样式 | 颜色 */ +outline: 3px solid green; /* 全局值 */ outline: inherit; outline: initial; +outline: revert; +outline: revert-layer; outline: unset; ``` @@ -53,21 +55,27 @@ outline: unset; - `<'outline-width'>` - : 设置轮廓的宽度。没有设置时默认值为 `medium`。参见 {{cssxref("outline-width")}}。 -### 形式语法 +## 形式定义 + +{{cssinfo}} -{{csssyntax("outline")}} +## 形式语法 + +{{csssyntax}} ## 示例 -### HTML +### 使用 outline 设置焦点样式 -``` -This link has a special focus style. +#### HTML + +```html +该链接具有特殊的焦点样式。 ``` ### CSS -``` +```css a { border: 1px solid; border-radius: 3px; @@ -83,7 +91,9 @@ a:focus { } ``` -### 结果 +#### 结果 + +{{EmbedLiveSample("使用 outline 设置焦点样式", "100%", 85)}} ## 无障碍考虑 @@ -96,8 +106,6 @@ a:focus { {{Specifications}} -{{cssinfo}} - ## 浏览器兼容性 {{Compat}} diff --git a/files/zh-cn/web/css/time/index.md b/files/zh-cn/web/css/time/index.md index e82e088b86dc5d..dcd2869e973b25 100644 --- a/files/zh-cn/web/css/time/index.md +++ b/files/zh-cn/web/css/time/index.md @@ -28,7 +28,7 @@ slug: Web/CSS/time ### 有效时间 -``` +```plain example-good 12s 正整数 -456ms 负整数 4.3ms 非整数 diff --git a/files/zh-cn/web/css/transform-function/matrix3d/index.md b/files/zh-cn/web/css/transform-function/matrix3d/index.md index db6cbccc9bf87f..c43451f5e44cde 100644 --- a/files/zh-cn/web/css/transform-function/matrix3d/index.md +++ b/files/zh-cn/web/css/transform-function/matrix3d/index.md @@ -11,11 +11,11 @@ slug: Web/CSS/transform-function/matrix3d `matrix3d()` 函数由 16 个参数指定。这些参数以列为主的顺序进行描述。 -``` +```css matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) ``` -### Values +### 值 - _a1_ _b1_ _c1_ _d1_ _a2_ _b2_ _c2_ _d2_ _a3_ _b3_ _c3_ _d3_ - : Are {{cssxref("<number>")}}s describing the linear transformation. diff --git a/files/zh-cn/web/css/transform-function/perspective/index.md b/files/zh-cn/web/css/transform-function/perspective/index.md index 02bd4d64b0e95a..901070091ccff1 100644 --- a/files/zh-cn/web/css/transform-function/perspective/index.md +++ b/files/zh-cn/web/css/transform-function/perspective/index.md @@ -11,13 +11,13 @@ T 更小，变化的幅度决定于属性值的变化大小 ## 语法 -``` -perspective(l) +```css +perspective(d) ``` ## 参数 -- _l_ +- _d_ - : 这个{{cssxref("<length>")}} 得到的是距离 0 坐标的距离。被用作提供一个透视渐变属性给某个元素。如果这个值是 0 或者不合法的值，将不会产生透视的变化。 diff --git a/files/zh-cn/web/css/transform-function/rotate/index.md b/files/zh-cn/web/css/transform-function/rotate/index.md index 34254c1e1d4e99..bffad77afb1321 100644 --- a/files/zh-cn/web/css/transform-function/rotate/index.md +++ b/files/zh-cn/web/css/transform-function/rotate/index.md @@ -15,7 +15,7 @@ CSS 的 **`rotate()`** 函数定义了一种将元素围绕一个定点（由{{ {{cssxref("<angle>")}} 指定了 `rotate()` 的旋转程度。参数为正时，顺时针旋转；参数为负时，逆时针旋转。180° 旋转称为*点反演*。 -``` +```css rotate(a) ``` diff --git a/files/zh-cn/web/css/transform-function/rotate3d/index.md b/files/zh-cn/web/css/transform-function/rotate3d/index.md index 135247803fe2d9..1ad7f5f7bd50b4 100644 --- a/files/zh-cn/web/css/transform-function/rotate3d/index.md +++ b/files/zh-cn/web/css/transform-function/rotate3d/index.md @@ -16,7 +16,7 @@ slug: Web/CSS/transform-function/rotate3d ## 语法 -``` +```css rotate3d(x, y, z, a) ``` diff --git a/files/zh-cn/web/css/transform-function/rotatex/index.md b/files/zh-cn/web/css/transform-function/rotatex/index.md index 5f2906775955f4..633157b3368526 100644 --- a/files/zh-cn/web/css/transform-function/rotatex/index.md +++ b/files/zh-cn/web/css/transform-function/rotatex/index.md @@ -20,7 +20,7 @@ slug: Web/CSS/transform-function/rotateX **`rotateX()`** 引起的旋转量由{{cssxref("<angle>")}}指定。如果为正，则顺时针方向移动；如果为负，则逆时针方向移动。 -``` +```css rotateX(a) ``` diff --git a/files/zh-cn/web/css/transform-function/rotatey/index.md b/files/zh-cn/web/css/transform-function/rotatey/index.md index 2a146181e6df6f..7172108ad0aed4 100644 --- a/files/zh-cn/web/css/transform-function/rotatey/index.md +++ b/files/zh-cn/web/css/transform-function/rotatey/index.md @@ -20,7 +20,7 @@ slug: Web/CSS/transform-function/rotateY **`rotateY()`** 引起的旋转量由{{cssxref("<angle>")}}指定。如果为正，则顺时针方向移动；如果为负，则逆时针方向移动。 -``` +```css rotateY(a) ``` diff --git a/files/zh-cn/web/css/transform-function/rotatez/index.md b/files/zh-cn/web/css/transform-function/rotatez/index.md index 949720a79d1c57..442510d11fb8b0 100644 --- a/files/zh-cn/web/css/transform-function/rotatez/index.md +++ b/files/zh-cn/web/css/transform-function/rotatez/index.md @@ -20,7 +20,7 @@ slug: Web/CSS/transform-function/rotateZ **`rotateZ()`** 引起的旋转量由{{cssxref("<angle>")}}指定。如果为正，则顺时针方向移动；如果为负，则逆时针方向移动。 -``` +```css rotateZ(a) ``` diff --git a/files/zh-cn/web/css/transform-function/skew/index.md b/files/zh-cn/web/css/transform-function/skew/index.md index 16fd6d1e383245..83a3d6d1872633 100644 --- a/files/zh-cn/web/css/transform-function/skew/index.md +++ b/files/zh-cn/web/css/transform-function/skew/index.md @@ -13,7 +13,7 @@ slug: Web/CSS/transform-function/skew `skew()` 函数指定一个或两个参数，它们表示在每个方向上应用的倾斜量。 -``` +```css skew(ax) skew(ax, ay) diff --git a/files/zh-cn/web/css/word-break/index.md b/files/zh-cn/web/css/word-break/index.md index 40a37253e5eeda..4bd3eef8d6bbb8 100644 --- a/files/zh-cn/web/css/word-break/index.md +++ b/files/zh-cn/web/css/word-break/index.md @@ -11,16 +11,19 @@ CSS 属性 `word-break` 指定了怎样在单词内断行。 ## 语法 -``` -/* Keyword values */ +```css +/* 关键字值 */ word-break: normal; word-break: break-all; word-break: keep-all; -word-break: break-word; /* deprecated */ +word-break: auto-phrase; /* 实验性 */ +word-break: break-word; /* 已弃用 */ -/* Global values */ +/* 全局值 */ word-break: inherit; word-break: initial; +word-break: revert; +word-break: revert-layer; word-break: unset; ``` diff --git a/files/zh-cn/web/http/caching/index.md b/files/zh-cn/web/http/caching/index.md index e6537f5aafb755..41919cabd465f9 100644 --- a/files/zh-cn/web/http/caching/index.md +++ b/files/zh-cn/web/http/caching/index.md @@ -515,7 +515,7 @@ Cache-Control: no-cache, private 因此，你可以使用包含基于版本号或哈希值的更改部分的 URL 来提供 JavaScript 和 CSS。一些方法如下所示。 -``` +```plain # version in filename bundle.v123.js @@ -545,7 +545,7 @@ bundle.js?v=YsAIAAAA-QG4G6kCMAMBAAAAAAAoK 一些常用的缓存头值如下所示。 -``` +```plain 36 cache-control max-age=0 37 cache-control max-age=604800 38 cache-control max-age=2592000 diff --git a/files/zh-cn/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md b/files/zh-cn/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md index 4ff77a86610e2f..77741d806b676e 100644 --- a/files/zh-cn/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md +++ b/files/zh-cn/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md @@ -22,13 +22,13 @@ slug: Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin > [!WARNING] > 你必须将 HTTPS 或 HTTP 协议作为源的一部分。 -``` +```apacheconf Header set Access-Control-Allow-Origin 'origin' ``` 在 Nginx 中，对应的配置为： -``` +```nginx add_header 'Access-Control-Allow-Origin' 'origin' ``` diff --git a/files/zh-cn/web/http/cors/errors/corsmissingalloworigin/index.md b/files/zh-cn/web/http/cors/errors/corsmissingalloworigin/index.md index f4326afbca62ab..952b19baa948f1 100644 --- a/files/zh-cn/web/http/cors/errors/corsmissingalloworigin/index.md +++ b/files/zh-cn/web/http/cors/errors/corsmissingalloworigin/index.md @@ -36,14 +36,14 @@ Access-Control-Allow-Origin: * 设置标头的命令取决于你的 Web 服务器。例如，在 Apache 服务器中，将下面一行添加到服务器的配置中（在相应的 ``、``、`` 或 `` 部分中）。配置通常位于 `.conf` 文件中（`httpd.conf` 和 `apache.conf` 是这些文件的通用名称）或者位于 `.htaccess` 文件中。 -``` -Header set Access-Control-Allow-Origin 'origin-list' +```apacheconf +Header set Access-Control-Allow-Origin 'https://example.com' ``` 对于 Nginx，设置此标头的命令是： -``` -add_header 'Access-Control-Allow-Origin' 'origin-list'; +```nginx +add_header 'Access-Control-Allow-Origin' 'https://example.com' always; ``` ## 参见 diff --git a/files/zh-cn/web/http/headers/cookie/index.md b/files/zh-cn/web/http/headers/cookie/index.md index 3698d647296da2..afbc1f600b1aba 100644 --- a/files/zh-cn/web/http/headers/cookie/index.md +++ b/files/zh-cn/web/http/headers/cookie/index.md @@ -24,7 +24,7 @@ slug: Web/HTTP/Headers/Cookie ## 语法 -``` +```http Cookie: Cookie: name=value Cookie: name=value; name2=value2; name3=value3 @@ -35,7 +35,7 @@ Cookie: name=value; name2=value2; name3=value3 ## 示例 -``` +```http Cookie: PHPSESSID=298zf09hf012fh2; csrftoken=u32t4o3tb3gg43; _gat=1 ``` diff --git a/files/zh-cn/web/http/headers/expect-ct/index.md b/files/zh-cn/web/http/headers/expect-ct/index.md index 62122c4154d745..8c0de1c13324e7 100644 --- a/files/zh-cn/web/http/headers/expect-ct/index.md +++ b/files/zh-cn/web/http/headers/expect-ct/index.md @@ -36,7 +36,7 @@ slug: Web/HTTP/Headers/Expect-CT ## 语法 -``` +```http Expect-CT: report-uri="", enforce, max-age= @@ -66,7 +66,7 @@ Expect-CT: report-uri="", 以下示例指定在 24 小时内遵守证书透明度政策，并向 `foo.example.com` 报告违规行为。 -``` +```http Expect-CT: max-age=86400, enforce, report-uri="https://foo.example.com/report" ``` diff --git a/files/zh-cn/web/http/headers/origin/index.md b/files/zh-cn/web/http/headers/origin/index.md index 6a8e7ada5044b3..bdfc1ec7bf15de 100644 --- a/files/zh-cn/web/http/headers/origin/index.md +++ b/files/zh-cn/web/http/headers/origin/index.md @@ -22,7 +22,7 @@ slug: Web/HTTP/Headers/Origin ## 语法 -``` +```http Origin: null Origin: :// Origin: ://: diff --git a/files/zh-cn/web/http/headers/permissions-policy/camera/index.md b/files/zh-cn/web/http/headers/permissions-policy/camera/index.md index a0fcbc1c0ea3a3..9fac02b878d64c 100644 --- a/files/zh-cn/web/http/headers/permissions-policy/camera/index.md +++ b/files/zh-cn/web/http/headers/permissions-policy/camera/index.md @@ -9,8 +9,8 @@ HTTP {{HTTPHeader("Permissions-Policy")}} 标头当中的 `camera` 指令控制 ## 语法 -``` -Permissions-Policy: camera ; +```http +Permissions-Policy: camera=; ``` - \ diff --git a/files/zh-cn/web/http/status/404/index.md b/files/zh-cn/web/http/status/404/index.md index 50df6f25992e0e..ab523912fdcb07 100644 --- a/files/zh-cn/web/http/status/404/index.md +++ b/files/zh-cn/web/http/status/404/index.md @@ -11,7 +11,7 @@ HTTP 响应状态码 **`404 Not Found`** 指的是服务器无法找到所请求 ## 状态 -``` +```http 404 Not Found ``` @@ -19,7 +19,7 @@ HTTP 响应状态码 **`404 Not Found`** 指的是服务器无法找到所请求 你可以自定义 404 页面，使其对用户更友好，以及提供一些引导。例如，Apache 服务器可以在 `.htaccess` 文件中指定自定义 404 页面的路径，代码片段如下： -``` +```apacheconf ErrorDocument 404 /notfound.html ``` diff --git a/files/zh-cn/web/javascript/guide/indexed_collections/index.md b/files/zh-cn/web/javascript/guide/indexed_collections/index.md index edb3e48841aaee..b24f91bb8a6a5b 100644 --- a/files/zh-cn/web/javascript/guide/indexed_collections/index.md +++ b/files/zh-cn/web/javascript/guide/indexed_collections/index.md @@ -570,7 +570,7 @@ for (i = 0; i < 4; i++) { 这个例子创建的数组拥有以下行数据： -``` +```plain Row 0: [0,0] [0,1] [0,2] [0,3] Row 1: [1,0] [1,1] [1,2] [1,3] Row 2: [2,0] [2,1] [2,2] [2,3] diff --git a/files/zh-cn/web/javascript/guide/loops_and_iteration/index.md b/files/zh-cn/web/javascript/guide/loops_and_iteration/index.md index 3b2294a41bb70e..0349d38e42abe3 100644 --- a/files/zh-cn/web/javascript/guide/loops_and_iteration/index.md +++ b/files/zh-cn/web/javascript/guide/loops_and_iteration/index.md @@ -387,7 +387,7 @@ function dump_props(obj, obj_name) { 对于一个拥有 `make` 和 `model` 属性的 `car` 对象来说，执行结果 `result` 是： -``` +```plain car.make = Ford car.model = Mustang ``` diff --git a/files/zh-cn/web/javascript/reference/deprecated_and_obsolete_features/index.md b/files/zh-cn/web/javascript/reference/deprecated_and_obsolete_features/index.md index 97cbfddc1cf252..a0e451709e2f01 100644 --- a/files/zh-cn/web/javascript/reference/deprecated_and_obsolete_features/index.md +++ b/files/zh-cn/web/javascript/reference/deprecated_and_obsolete_features/index.md @@ -184,7 +184,7 @@ console.log("b"); 数组推导式和生成器推导式已被移除。 -``` +```js-nolint // 遗留的数组推导式 [for (x of iterable) x] [for (x of iterable) if (condition) x] diff --git a/files/zh-cn/web/javascript/reference/errors/not_a_valid_code_point/index.md b/files/zh-cn/web/javascript/reference/errors/not_a_valid_code_point/index.md index 0cb1fb10bde32f..63f01f4559690d 100644 --- a/files/zh-cn/web/javascript/reference/errors/not_a_valid_code_point/index.md +++ b/files/zh-cn/web/javascript/reference/errors/not_a_valid_code_point/index.md @@ -9,7 +9,7 @@ JavaScript 异常“Invalid code point”会在 {{jsxref("String.fromCodePoint() ## 错误信息 -``` +```plain RangeError: Invalid code point -1 (V8-based) RangeError: -1 is not a valid code point (Firefox) RangeError: Arguments contain a value that is out of range of code points (Safari) diff --git a/files/zh-cn/web/javascript/reference/global_objects/object/constructor/index.md b/files/zh-cn/web/javascript/reference/global_objects/object/constructor/index.md index d161e50ff2f978..a31044260eef3b 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/object/constructor/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/object/constructor/index.md @@ -67,7 +67,7 @@ console.log(`theTree.constructor 是 ${theTree.constructor}`); 这个示例会打印以下输出： -``` +```plain theTree.constructor 是 function Tree(name) { this.name = name; } diff --git a/files/zh-cn/web/javascript/reference/global_objects/regexp/exec/index.md b/files/zh-cn/web/javascript/reference/global_objects/regexp/exec/index.md index af59b04ea9d403..7cfb550536d331 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/regexp/exec/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/regexp/exec/index.md @@ -94,7 +94,7 @@ while ((myArray = myRe.exec(str)) !== null) { 脚本运行结果如下： -``` +```plain Found abb. Next match starts at 3 Found ab. Next match starts at 9 ``` diff --git a/files/zh-cn/web/javascript/reference/iteration_protocols/index.md b/files/zh-cn/web/javascript/reference/iteration_protocols/index.md index c6e28f7654dc86..8bcbea1c0f076c 100644 --- a/files/zh-cn/web/javascript/reference/iteration_protocols/index.md +++ b/files/zh-cn/web/javascript/reference/iteration_protocols/index.md @@ -125,7 +125,7 @@ JavaScript 语言指定了产生或使用可迭代对象和迭代器的 API。 从内置迭代返回的迭代器实际上都继承了一个公共类（目前尚未暴露），该类实现了上述 `[Symbol.iterator]() { return this; }` 方法，使它们都是可迭代的迭代器。将来，除了迭代器协议要求的 `next()` 方法外，这些内置迭代器可能还有其他[辅助方法](https://github.com/tc39/proposal-iterator-helpers)。你可以通过在图形控制台中记录迭代器的原型链来检查它。 -``` +```plain console.log([][Symbol.iterator]()); Array Iterator {} diff --git a/files/zh-cn/web/uri/schemes/data/index.md b/files/zh-cn/web/uri/schemes/data/index.md index e87f911488ee23..4512d19c287e7c 100644 --- a/files/zh-cn/web/uri/schemes/data/index.md +++ b/files/zh-cn/web/uri/schemes/data/index.md @@ -77,7 +77,7 @@ bash$ echo -n hello | base64 下文介绍一些在创建和使用 `data` URL 时遇到的常见问题： -``` +```html data:text/html,lots of text…

bottom?arg=val

``` From 1e6e2288add6c3847c055434889854fa799a0bbd Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Wed, 18 Sep 2024 08:31:20 +0800 Subject: [PATCH 02/26] [zh-CN]: sync translation for Badging API & Web Share API (#23626) --- files/zh-cn/web/api/badging_api/index.md | 4 ++-- files/zh-cn/web/api/web_share_api/index.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/files/zh-cn/web/api/badging_api/index.md b/files/zh-cn/web/api/badging_api/index.md index cf017b55948ed2..0be14b10923789 100644 --- a/files/zh-cn/web/api/badging_api/index.md +++ b/files/zh-cn/web/api/badging_api/index.md @@ -2,7 +2,7 @@ title: Badging API slug: Web/API/Badging_API l10n: - sourceCommit: 8a999418acafeb44b4491e37d02721d32607ec3a + sourceCommit: a4675b9077ae32f989c7ecac94f454db2653c4fc --- {{DefaultAPISidebar("Badging API")}}{{securecontext_header}}{{AvailableInWorkers}} @@ -28,7 +28,7 @@ Web 开发人员经常更新文档图标或标题以指示状态。Badging API - : 表示当前未设置徽章。若徽章被应用程序清除或被用户代理重置，徽章可能会处于此状态。 - `flag` - : 表示已设置徽章，但没有具体数据可显示。如果应用程序已设置徽章，但未将任何值传递给该方法，则徽章将处于此状态。 -- `an integer` +- 一个整数 - : 设置徽章时传递的值。该值永远不会是 `0`，设置徽章时传递值 `0` 将导致用户代理通过将其设置为 `nothing` 来清除徽章。 ### 设置徽章 diff --git a/files/zh-cn/web/api/web_share_api/index.md b/files/zh-cn/web/api/web_share_api/index.md index 4f49bb3b258abe..490b9d8c93c1a8 100644 --- a/files/zh-cn/web/api/web_share_api/index.md +++ b/files/zh-cn/web/api/web_share_api/index.md @@ -2,7 +2,7 @@ title: Web 共享 API slug: Web/API/Web_Share_API l10n: - sourceCommit: 91907f1383139ec2bd1d309d02ffac30b4eee757 + sourceCommit: 44c4ec928281dc2d7c5ea42b7d2c74a2013f16ac --- {{DefaultAPISidebar("Web Share API")}}{{securecontext_header}} From 097585d18b1f3c2749d464154e4f0b1b93e95302 Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Wed, 18 Sep 2024 08:35:11 +0800 Subject: [PATCH 03/26] [zh-CN]: sync translation for Local Font Access API (#23627) --- files/zh-cn/web/api/fontdata/blob/index.md | 2 +- files/zh-cn/web/api/fontdata/index.md | 2 +- files/zh-cn/web/api/local_font_access_api/index.md | 4 ++-- files/zh-cn/web/api/window/querylocalfonts/index.md | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/files/zh-cn/web/api/fontdata/blob/index.md b/files/zh-cn/web/api/fontdata/blob/index.md index 61c9974614edac..c7e61f3fdcd1d5 100644 --- a/files/zh-cn/web/api/fontdata/blob/index.md +++ b/files/zh-cn/web/api/fontdata/blob/index.md @@ -2,7 +2,7 @@ title: FontData：blob() 方法 slug: Web/API/FontData/blob l10n: - sourceCommit: 4458494807b6f4898d504b6c0af0a45f8031cbf3 + sourceCommit: d7143e171b5f18fb37a686a7d4947db417fd74f3 --- {{APIRef("Local Font Access API")}}{{SeeCompatTable}} diff --git a/files/zh-cn/web/api/fontdata/index.md b/files/zh-cn/web/api/fontdata/index.md index db2df67131f207..0329185ec8f576 100644 --- a/files/zh-cn/web/api/fontdata/index.md +++ b/files/zh-cn/web/api/fontdata/index.md @@ -2,7 +2,7 @@ title: FontData slug: Web/API/FontData l10n: - sourceCommit: 4458494807b6f4898d504b6c0af0a45f8031cbf3 + sourceCommit: d7143e171b5f18fb37a686a7d4947db417fd74f3 --- {{APIRef("Local Font Access API")}}{{SeeCompatTable}} diff --git a/files/zh-cn/web/api/local_font_access_api/index.md b/files/zh-cn/web/api/local_font_access_api/index.md index d2623d83ca254e..01c9e9aff985f5 100644 --- a/files/zh-cn/web/api/local_font_access_api/index.md +++ b/files/zh-cn/web/api/local_font_access_api/index.md @@ -2,7 +2,7 @@ title: Local Font Access API slug: Web/API/Local_Font_Access_API l10n: - sourceCommit: 4458494807b6f4898d504b6c0af0a45f8031cbf3 + sourceCommit: d7143e171b5f18fb37a686a7d4947db417fd74f3 --- {{SeeCompatTable}}{{DefaultAPISidebar("Local Font Access API")}} @@ -24,7 +24,7 @@ Local Font Access API 的创建就是为了解决这些问题。 在隐私和安全方面： - 本地字体访问 API 旨在仅提供对解决上述问题所需的数据的访问。它既不要求浏览器提供可用本地字体的完整列表，也不要求按照磁盘上出现的顺序提供数据。 -- 当调用 {{domxref("Window.queryLocalFonts()")}} 时，系统会请求用户授予访问其本地字体的权限。此权限的状态可以通过 {{domxref("Permissions API")}}（`local-fonts` 权限）查询。 +- 当调用 {{domxref("Window.queryLocalFonts()")}} 时，系统会请求用户授予访问其本地字体的权限。此权限的状态可以通过 [Permissions API](/zh-CN/docs/Web/API/Permissions_API)（`local-fonts` 权限）查询。 - 你可以使用 {{httpheader("Permissions-Policy/local-fonts", "local-fonts")}} [权限策略](/zh-CN/docs/Web/HTTP/Permissions_Policy)控制对此特性的访问。 ## 接口 diff --git a/files/zh-cn/web/api/window/querylocalfonts/index.md b/files/zh-cn/web/api/window/querylocalfonts/index.md index 3b5c5b66c027c8..c02e010252a96f 100644 --- a/files/zh-cn/web/api/window/querylocalfonts/index.md +++ b/files/zh-cn/web/api/window/querylocalfonts/index.md @@ -2,7 +2,7 @@ title: Window：queryLocalFonts() 方法 slug: Web/API/Window/queryLocalFonts l10n: - sourceCommit: 89c435da452257b944b403cc9e45036fcb22590e + sourceCommit: d7143e171b5f18fb37a686a7d4947db417fd74f3 --- {{APIRef("Local Font Access API")}}{{SeeCompatTable}}{{SecureContext_Header}} From 4042a6e9b041984408d865ed3e47a623607a63f6 Mon Sep 17 00:00:00 2001 From: Tianyi Tao Date: Wed, 18 Sep 2024 10:37:45 +0800 Subject: [PATCH 04/26] [zh-cn]: create the translation of `aria-colspan` attribute (#23467) Co-authored-by: A1lo --- .../aria/attributes/aria-colspan/index.md | 169 ++++++++++++++++++ 1 file changed, 169 insertions(+) create mode 100644 files/zh-cn/web/accessibility/aria/attributes/aria-colspan/index.md diff --git a/files/zh-cn/web/accessibility/aria/attributes/aria-colspan/index.md b/files/zh-cn/web/accessibility/aria/attributes/aria-colspan/index.md new file mode 100644 index 00000000000000..88e2ef551b54e0 --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/attributes/aria-colspan/index.md @@ -0,0 +1,169 @@ +--- +title: aria-colspan +slug: Web/Accessibility/ARIA/Attributes/aria-colspan +l10n: + sourceCommit: 194bd13942ad0c532c92d364e0d5d0c36732d98c +--- + +{{AccessibilitySidebar}} + +`aria-colspan` 属性定义了在 [`table`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/table_role)、[`grid`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/grid_role) 或 [`treegrid`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/treegrid_role) 中，单元格或网格单元格跨越的列数。 + +## 描述 + +`aria-colspan` 主要用于不包含在原生 HTML {{HTMLElement('table')}} 中的 [`cell`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/cell_role) 和 [`gridcell`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/gridcell_role)，该属性值定义了一个单元格在 ARIA [`table`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/table_role)、[`grid`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/grid_role) 或 [`treegrid`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/treegrid_role) 中跨越的列数。 + +在 HTML 中，{{HTMLElement('th')}} 和 {{HTMLElement('td')}} 元素具有 [`colspan`](/zh-CN/docs/Web/HTML/Element/td#attributes) 属性。当使用语义化的 {{HTMLElement('table')}} 时，按设计使用原生的 `colspan` 属性即可。此 ARIA 属性用于不包含在原生表格中的单元格和网格单元格，如果用于 {{HTMLElement('table')}} 中的单元格，将被忽略。 + +> [!NOTE] +> 使用 ARIA 的首要规则是，如果可以使用具有所需语义和行为的原生特性，而不是重新定义元素并**添加** ARIA 角色、状态或属性使其变得无障碍，那么就这样做。尽可能使用 HTML {{HTMLelement('table')}} 元素（包括 {{HTMLelement('td')}} 和 {{HTMLelement('th')}} 以及 `colspan` 属性），而不是带有 ARIA 角色和属性的非语义元素。 + +`aria-colspan` 的值应为正整数。单元格跨越的默认或假定值为 1。确保所包含的值不会导致单元格或网格单元格与同一行中的下一个单元格重叠，也不会导致单元格跨越超出包含的表格、网格或树网格。 + +## 示例 + +以下是一个保龄球锦标赛联赛计分表的部分示例。每场比赛跨越 10 计分格（frame），每个计分格跨越 3 个分数：两球和当前总分。每场比赛的第 10 个（也是最后一个）计分格跨越 4 列，以防有人记全倒。 + +```html +
+
+
+ + + 队伍 + 玩家 + 第 1 局计分格 + 第 2 局计分格 + 第 3 局计分格 + 合计 +
+
+ 姓 + 名 + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 +
+
+
+
+ 强力短尾矮袋鼠队 + Henderson + Alice + 7 + / + 20 + X + 39 + 9 + - + 48 + X + 76 + X + 96 + 8 + / + 113 + 7 + - + 120 + X + 146 + X + 166 + 6 + / + X + 186 + 7 + 2 + 9 + 6 + - + 15 + X + 35 + 7 + / + … +
+
+ McPherson + Leslie + 9 + - + 9 + 8 + 1 + 18 + … +
+
+
+``` + +如果我们使用 {{HTMLElement('table')}} 和语义化的表格元素，我们的标记将会更简洁，并且默认具有无障碍性。 + +## 值 + +- `` + - : 一个大于或等于默认值 1 的整数，定义单元格跨越的列数。该值必须小于会导致单元格与同一行中的下一个单元格重叠的数值。 + +## 相关接口 + +- {{domxref("Element.ariaColSpan")}} + - : [`ariaColSpan`](/zh-CN/docs/Web/API/Element/ariaColSpan) 属性，作为每个元素接口的一部分，反映了 `aria-colspan` 属性的值，该属性定义了单元格或网格单元格在表格、网格或树网格中跨越的列数。 + +## 相关角色 + +用于角色： + +- [`cell`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/cell_role) + +继承到角色： + +- [`columnheader`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/columnheader_role) +- [`rowheader`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/columnheader_role) + +## 规范 + +{{Specifications}} + +## 参见 + +- {{HTMLElement('th')}} 和 {{HTMLElement('td')}} [`colspan`](/zh-CN/docs/Web/HTML/Element/td#attributes) 属性 +- [`aria-colindex`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-colindex) 属性 +- [`aria-rowspan`](/zh-CN/docs/Web/Accessibility/ARIA/Attributes/aria-rowspan) 属性 +- [`cell`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/cell_role) 角色 +- [`columnheader`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/columnheader_role) 角色 +- [`rowheader`](/zh-CN/docs/Web/Accessibility/ARIA/Roles/columnheader_role) 角色 From 05fa4858c52617423370dfa8d8b14ec223dcd2fa Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Wed, 18 Sep 2024 10:40:23 +0800 Subject: [PATCH 05/26] zh-CN: create `extensionTypes.InjectDetails` (#23530) --- .../api/extensiontypes/injectdetails/index.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 files/zh-cn/mozilla/add-ons/webextensions/api/extensiontypes/injectdetails/index.md diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/extensiontypes/injectdetails/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/extensiontypes/injectdetails/index.md new file mode 100644 index 00000000000000..53a2b96d76f2e2 --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/extensiontypes/injectdetails/index.md @@ -0,0 +1,14 @@ +--- +title: extensionTypes.InjectDetails +slug: Mozilla/Add-ons/WebExtensions/API/extensionTypes/InjectDetails +l10n: + sourceCommit: 2c5465eab20015868a1eeca59c5623d37b105f7c +--- + +{{AddonSidebar}} + +这一类型作为参数传递给 `tabs.executeScript()`、`tabs.insertCSS()` 和 `tabs.removeCSS()` 方法。有关其属性的详细信息以及它们的用途，请参阅这些方法的文档页面： + +- {{WebExtAPIRef("tabs.executeScript()")}} +- {{WebExtAPIRef("tabs.insertCSS()")}} +- {{WebExtAPIRef("tabs.removeCSS()")}} From 61508412c44f3ce7c4fe049a8adfc039e99ec259 Mon Sep 17 00:00:00 2001 From: ikenk <93726321+ikenk@users.noreply.github.com> Date: Wed, 18 Sep 2024 11:17:14 +0800 Subject: [PATCH 06/26] updated the Math.sin() method doc (#23584) Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- .../global_objects/math/sin/index.md | 22 ++++++++++++------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/files/zh-cn/web/javascript/reference/global_objects/math/sin/index.md b/files/zh-cn/web/javascript/reference/global_objects/math/sin/index.md index 07f4c07d685b78..e1877080ce5d30 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/math/sin/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/math/sin/index.md @@ -1,17 +1,19 @@ --- title: Math.sin() slug: Web/JavaScript/Reference/Global_Objects/Math/sin +l10n: + sourceCommit: fcd80ee4c8477b6f73553bfada841781cf74cf46 --- {{JSRef}} -## 概述 +**`Math.sin()`** 静态方法以弧度为单位返回一个数字的正弦值。 -**`Math.sin()`** 函数返回一个数值的正弦值。 +{{EmbedInteractiveExample("pages/js/math-sin.html")}} ## 语法 -```plain +```js-nolint Math.sin(x) ``` @@ -20,21 +22,25 @@ Math.sin(x) - `x` - : 一个数值（以弧度为单位）。 -## 描述 +### 返回值 + +`x` 的正弦值，介于 -1 到 1 之间（包含 -1 和 1）。如果 `x` 为 {{jsxref("Infinity")}}、`-Infinity` 或 {{jsxref("NaN")}}，则返回 {{jsxref("NaN")}}。 -`sin` 方法返回一个 -1 到 1 之间的数值，表示给定角度（单位：弧度）的正弦值。 +## 描述 -由于 `sin` 是 `Math` 的静态方法，所以应该像这样使用：`Math.sin()`，而不是作为你创建的 `Math` 实例的方法。 +由于 `sin()` 是 `Math` 的静态方法，应该总是以 `Math.sin()` 的形式，而不是作为 `Math` 对象的方法来使用它（`Math` 不是构造函数）。 ## 示例 -### 示例：使用 `Math.sin` +### 使用 Math.sin() ```js +Math.sin(-Infinity); // NaN +Math.sin(-0); // -0 Math.sin(0); // 0 Math.sin(1); // 0.8414709848078965 - Math.sin(Math.PI / 2); // 1 +Math.sin(Infinity); // NaN ``` ## 规范 From 68e2195a04edc0e1ad85ee00d77752734ad165ee Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Wed, 18 Sep 2024 11:20:49 +0800 Subject: [PATCH 07/26] [zh-cn]: sync translation for File API (#23412) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Hoarfroster Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- files/zh-cn/web/api/blob/bytes/index.md | 36 +++++++++++++++++++ files/zh-cn/web/api/blob/index.md | 4 ++- files/zh-cn/web/api/blob/type/index.md | 2 +- files/zh-cn/web/api/file/index.md | 4 +-- .../zh-cn/web/api/file/lastmodified/index.md | 12 +++---- .../web/api/file/lastmodifieddate/index.md | 10 +++--- files/zh-cn/web/api/file_api/index.md | 5 +-- .../index.md | 21 +++++------ files/zh-cn/web/api/filelist/index.md | 7 ++-- files/zh-cn/web/api/filereader/index.md | 4 +-- .../api/filereader/readasarraybuffer/index.md | 2 +- .../filereader/readasbinarystring/index.md | 2 +- .../web/api/filereader/readasdataurl/index.md | 2 +- .../web/api/filereader/readastext/index.md | 4 +-- .../web/api/filereader/readystate/index.md | 10 +++--- .../filereadersync/filereadersync/index.md | 2 +- .../readasbinarystring/index.md | 2 +- .../api/url/createobjecturl_static/index.md | 4 +-- .../api/url/revokeobjecturl_static/index.md | 2 +- 19 files changed, 88 insertions(+), 47 deletions(-) create mode 100644 files/zh-cn/web/api/blob/bytes/index.md diff --git a/files/zh-cn/web/api/blob/bytes/index.md b/files/zh-cn/web/api/blob/bytes/index.md new file mode 100644 index 00000000000000..1ac80778ed31e2 --- /dev/null +++ b/files/zh-cn/web/api/blob/bytes/index.md @@ -0,0 +1,36 @@ +--- +title: Blob：bytes() 方法 +slug: Web/API/Blob/bytes +l10n: + sourceCommit: 5ee9d033cacad3a031562be16be43c55a838cc4f +--- + +{{APIRef("File API")}}{{AvailableInWorkers}} + +{{domxref("Blob")}} 接口的 **`bytes()`** 方法返回一个 {{jsxref("Promise")}}，该 {{jsxref("Promise")}} 兑现为一个包含 blob 内容的字节数组的 {{jsxref("Uint8Array")}}。 + +## 语法 + +```js-nolint +bytes() +``` + +### 参数 + +无。 + +### 返回值 + +一个兑现包含 blob 数据的 {{jsxref("Uint8Array")}} 对象的 {{jsxref("Promise")}}。 + +### 异常 + +例如，如果用于获取 Blob 数据的读取器抛出异常，则该方法将拒绝返回的 {{jsxref("Promise")}}。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} diff --git a/files/zh-cn/web/api/blob/index.md b/files/zh-cn/web/api/blob/index.md index ae42dc12817d50..758c1541942451 100644 --- a/files/zh-cn/web/api/blob/index.md +++ b/files/zh-cn/web/api/blob/index.md @@ -2,7 +2,7 @@ title: Blob slug: Web/API/Blob l10n: - sourceCommit: 367b982b93c07f7f99e7bb768a6bf326fa5198e6 + sourceCommit: de2ef1e9950eebbacdd55f072dfe03014d113bbd --- {{APIRef("File API")}}{{AvailableInWorkers}} @@ -33,6 +33,8 @@ Blob 表示的不一定是 JavaScript 原生格式的数据。{{DOMxRef("File")} - {{DOMxRef("Blob.arrayBuffer()")}} - : 返回一个 promise，其会兑现一个包含 `Blob` 所有内容的二进制格式的 {{jsxref("ArrayBuffer")}}。 +- {{DOMxRef("Blob.bytes()")}} + - : 返回一个 promise，其会兑现一个包含 `Blob` 内容的 {{jsxref("Uint8Array")}}。 - {{DOMxRef("Blob.slice()")}} - : 返回一个新的 `Blob` 对象，其中包含调用它的 blob 的指定字节范围内的数据。 - {{DOMxRef("Blob.stream()")}} diff --git a/files/zh-cn/web/api/blob/type/index.md b/files/zh-cn/web/api/blob/type/index.md index a4ba70c965f820..b04ba0cc1597f0 100644 --- a/files/zh-cn/web/api/blob/type/index.md +++ b/files/zh-cn/web/api/blob/type/index.md @@ -2,7 +2,7 @@ title: Blob：type 属性 slug: Web/API/Blob/type l10n: - sourceCommit: 84a9afd94f497d4173bde131731ef6bdf0b6135d + sourceCommit: be8f7f155a48e11b30c240f8731afb1845f85378 --- {{APIRef("File API")}}{{AvailableInWorkers}} diff --git a/files/zh-cn/web/api/file/index.md b/files/zh-cn/web/api/file/index.md index b99d4fe68a0af0..8dbaf7f9afe65e 100644 --- a/files/zh-cn/web/api/file/index.md +++ b/files/zh-cn/web/api/file/index.md @@ -2,7 +2,7 @@ title: File slug: Web/API/File l10n: - sourceCommit: 467508d83e320be0680f334c3455d3cc232bce42 + sourceCommit: 58ad1df59f2ffb9ecab4e27fe1bdf1eb5a55f89b --- {{APIRef("File API")}}{{AvailableInWorkers}} @@ -11,7 +11,7 @@ l10n: `File` 对象通常从用户使用 {{HTMLElement("input")}} 元素选择文件返回的 {{DOMxRef("FileList")}} 对象中检索，或者从拖放操作返回的 {{DOMxRef("DataTransfer")}} 对象中检索。 -`File` 对象是一种特定类型的 {{DOMxRef("Blob")}}，并且可以在 Blob 可以使用的任何上下文中使用。特别是，{{DOMxRef("FileReader")}}、{{DOMxRef("URL.createObjectURL_static", "URL.createObjectURL()")}}、{{DOMxRef("createImageBitmap()")}}、{{domxref("fetch()")}} 方法的 [`body`](/zh-CN/docs/Web/API/fetch#body) 选项和 {{DOMxRef("XMLHttpRequest", "", "send( )")}} 都可以接收 `Blob` 对象和 `File` 对象。 +`File` 对象是一种特定类型的 {{DOMxRef("Blob")}}，并且可以在 Blob 可以使用的任何上下文中使用。特别是，{{DOMxRef("FileReader")}}、{{DOMxRef("URL.createObjectURL_static", "URL.createObjectURL()")}}、{{DOMxRef("createImageBitmap()")}}、{{domxref("Window/fetch", "fetch()")}} 方法的 [`body`](/zh-CN/docs/Web/API/RequestInit#body) 选项和 {{DOMxRef("XMLHttpRequest.send()")}} 都可以接收 `Blob` 对象和 `File` 对象。 参见[在 Web 应用程序使用文件](/zh-CN/docs/Web/API/File_API/Using_files_from_web_applications)了解更多信息和例子。 diff --git a/files/zh-cn/web/api/file/lastmodified/index.md b/files/zh-cn/web/api/file/lastmodified/index.md index 2d1c4791289f39..b0438bd2cb5553 100644 --- a/files/zh-cn/web/api/file/lastmodified/index.md +++ b/files/zh-cn/web/api/file/lastmodified/index.md @@ -2,7 +2,7 @@ title: File：lastModified 属性 slug: Web/API/File/lastModified l10n: - sourceCommit: 8fd2ee72038310e3ecc387df235ffac1cb08775c + sourceCommit: 73b2b6ee411ac094b9fc57dafac6f9c232fc20d9 --- {{APIRef("File API")}}{{AvailableInWorkers}} @@ -59,7 +59,7 @@ filepicker.addEventListener("change", (event) => { ### 动态创建文件 -如果文件是动态创建的，可以在 {{domxref("File.File()", "new File()")}} 构造函数中提供最后修改时间。如果未提供则会继承文件对象被创建时的 {{jsxref("Date.now()")}}。 +如果文件是动态创建的，可以在 {{domxref("File.File()", "File()")}} 构造函数中提供最后修改时间。如果未提供该参数，`lastModified` 将会继承文件对象被创建时的时间（来自 {{jsxref("Date.now()")}}）。 ```js const fileWithDate = new File([], "file.bin", { @@ -73,13 +73,14 @@ console.log(fileWithoutDate.lastModified); // 返回当前时间 ## 时间精度降低 -为了防止计时攻击和{{glossary("fingerprinting", "指纹识别")}}，`someFile.lastModifiedDate.getTime()` 的精度可能会根据浏览器设置进行舍入。 +为了防止计时攻击和[指纹识别](/zh-CN/docs/Glossary/Fingerprinting)，`someFile.lastModified` 的精度可能会根据浏览器设置进行舍入。在 Firefox 中，`privacy.reduceTimerPrecision` 首选项默认启用，默认为 2ms。你还可以启用 `privacy.resistFingerprinting`，在这种情况下精度将为 100ms 或 `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` 的值，以较大者为准。 -在 Firefox 中，`privacy.reduceTimerPrecision` 首选项默认启用，在 Firefox 59 中默认为 20 微秒；Firefox 60 中为 2 毫秒。 +例如，在降低时间精度的情况下，`someFile.lastModified` 的结果将始终是 2 的倍数，或者在启用 `privacy.resistFingerprinting` 的情况下为 100 的倍数（或 `privacy.resistFingerprinting.reduceTimerPrecision.microseconds`）。 ```js // Firefox 60 中的时间精度降低（2 毫秒） someFile.lastModifiedDate.getTime(); +// 可能是： // 1519211809934 // 1519211810362 // 1519211811670 @@ -87,14 +88,13 @@ someFile.lastModifiedDate.getTime(); // 启用 `privacy.resistFingerprinting` 会降低时间精度 someFile.lastModifiedDate.getTime(); +// 可能是： // 1519129853500 // 1519129858900 // 1519129864400 // … ``` -在 Firefox 中，你还可以启用 `privacy.resistFingerprinting`，精度将为 100 毫秒 或 `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` 的值，以较大者为准。 - ## 规范 {{Specifications}} diff --git a/files/zh-cn/web/api/file/lastmodifieddate/index.md b/files/zh-cn/web/api/file/lastmodifieddate/index.md index 4e3304e9c1c333..0bcf0afc686fa1 100644 --- a/files/zh-cn/web/api/file/lastmodifieddate/index.md +++ b/files/zh-cn/web/api/file/lastmodifieddate/index.md @@ -2,7 +2,7 @@ title: File：lastModifiedDate 属性 slug: Web/API/File/lastModifiedDate l10n: - sourceCommit: 367b982b93c07f7f99e7bb768a6bf326fa5198e6 + sourceCommit: 3b5a1c0dfd59257c0a51052a9efa7b0108f8ecca --- {{APIRef("File API")}}{{AvailableInWorkers}}{{Deprecated_Header}}{{Non-standard_Header}} @@ -26,13 +26,14 @@ for (const file of fileInput.files) { ## 时间精度降低 -为了防止计时攻击和{{glossary("fingerprinting", "指纹识别")}}，`someFile.lastModifiedDate.getTime()` 的精度可能会根据浏览器设置进行舍入。 +为了防止计时攻击和[指纹识别](/zh-CN/docs/Glossary/Fingerprinting)，`someFile.lastModifiedDate` 的精度可能会根据浏览器设置进行舍入。在 Firefox 中，`privacy.reduceTimerPrecision` 首选项默认启用，默认为 2ms。你还可以启用 `privacy.resistFingerprinting`，在这种情况下精度将为 100ms 或 `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` 的值，以较大者为准。 -在 Firefox 中，`privacy.reduceTimerPrecision` 首选项默认启用，在 Firefox 59 中默认为 20 微秒；Firefox 60 中为 2 毫秒。 +例如，在降低时间精度的情况下，`someFile.lastModifiedDate.getTime()` 的结果将始终是 2 的倍数，或者在启用 `privacy.resistFingerprinting` 的情况下为 100 的倍数（或 `privacy.resistFingerprinting.reduceTimerPrecision.microseconds`）。 ```js // Firefox 60 中的时间精度降低（2 毫秒） someFile.lastModifiedDate.getTime(); +// 可能是： // 1519211809934 // 1519211810362 // 1519211811670 @@ -40,14 +41,13 @@ someFile.lastModifiedDate.getTime(); // 启用 `privacy.resistFingerprinting` 会降低时间精度 someFile.lastModifiedDate.getTime(); +// 可能是： // 1519129853500 // 1519129858900 // 1519129864400 // … ``` -在 Firefox 中，你还可以启用 `privacy.resistFingerprinting`，精度将为 100 毫秒或 `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` 的值，以较大者为准。 - ## 规范 _尽管存在于文件 API 规范的早期草案中，但此属性已从中删除，并且此属性现在是非标准的。使用 {{domxref("File.lastModified")}} 代替。_ diff --git a/files/zh-cn/web/api/file_api/index.md b/files/zh-cn/web/api/file_api/index.md index e0c90ace5fc95a..1a107cd676f2ef 100644 --- a/files/zh-cn/web/api/file_api/index.md +++ b/files/zh-cn/web/api/file_api/index.md @@ -2,7 +2,7 @@ title: 文件 API slug: Web/API/File_API l10n: - sourceCommit: 497d322c61511b11e4877a77660f8d7b394a8277 + sourceCommit: 73b2b6ee411ac094b9fc57dafac6f9c232fc20d9 --- {{DefaultAPISidebar("File API")}}{{AvailableInWorkers}} @@ -78,7 +78,7 @@ fileInput.addEventListener("change", () => { }); ``` -### 运行结果 +### 结果 {{EmbedLiveSample("读取文件", "", "300")}} @@ -89,4 +89,5 @@ fileInput.addEventListener("change", () => { ## 参见 - [``](/zh-CN/docs/Web/HTML/Element/input/file)：文件 input 元素 +- {{domxref("Blob.text()")}} - {{domxref("DataTransfer")}} 接口 diff --git a/files/zh-cn/web/api/file_api/using_files_from_web_applications/index.md b/files/zh-cn/web/api/file_api/using_files_from_web_applications/index.md index 8d9a4d26b50f73..4d12ad024c540f 100644 --- a/files/zh-cn/web/api/file_api/using_files_from_web_applications/index.md +++ b/files/zh-cn/web/api/file_api/using_files_from_web_applications/index.md @@ -2,7 +2,7 @@ title: 在 web 应用程序中使用文件 slug: Web/API/File_API/Using_files_from_web_applications l10n: - sourceCommit: 94ef07a7b073c2663cbace0667bdb717a40bfa28 + sourceCommit: 88467d31d2ad7bdfade8b38ec69f6702fee080d1 --- {{DefaultAPISidebar("File API")}}{{AvailableInWorkers}} @@ -335,16 +335,17 @@ fileSelect.addEventListener( fileElem.addEventListener("change", handleFiles, false); function handleFiles() { + fileList.textContent = ""; if (!this.files.length) { - fileList.innerHTML = "

没有选择任何文件！

"; + const p = document.createElement("p"); + p.textContent = "没有选择任何文件！"; + fileList.appendChild(p); } else { - fileList.innerHTML = ""; const list = document.createElement("ul"); fileList.appendChild(list); for (let i = 0; i < this.files.length; i++) { const li = document.createElement("li"); list.appendChild(li); - const img = document.createElement("img"); img.src = URL.createObjectURL(this.files[i]); img.height = 60; @@ -353,7 +354,7 @@ function handleFiles() { }; li.appendChild(img); const info = document.createElement("span"); - info.innerHTML = `${this.files[i].name}: ${this.files[i].size} bytes`; + info.textContent = `${this.files[i].name}：${this.files[i].size} 字节`; li.appendChild(info); } } @@ -400,7 +401,7 @@ function sendFiles() { } ``` -第 2 行获取了文档中所有 CSS 类为 `obj` 的元素的 {{DOMxRef("NodeList")}}，命名为 `imgs`。在我们的例子中，这些是包含所有图像缩略图的列表。有了这个列表，遍历并为每一项创建一个新的 `FileUpload` 实例就很简单了。每个实例都可以处理相应文件的上传。 +`document.querySelectorAll` 获取了文档中所有 CSS 类为 `obj` 的元素的 {{DOMxRef("NodeList")}}，命名为 `imgs`。在我们的例子中，这些是包含所有图像缩略图的列表。有了这个列表，遍历并为每一项创建一个新的 `FileUpload` 实例就很简单了。每个实例都可以处理相应文件的上传。 ### 处理文件的上传过程 @@ -486,14 +487,14 @@ function createThrobber(img) { 这个例子演示了如何异步上传文件，在服务器端使用了 PHP，在客户端使用了 JavaScript。 -```js +```php +?> @@ -544,7 +545,7 @@ if (isset($_FILES['myFile'])) { 对象 URL 可以用于图像之外的其他东西！它可以用于显示嵌入的 PDF 文件或任何其他浏览器能显示的资源。 -在 Firefox 中，要让 PDF 嵌入式地显示在 iframe 中（而不是作为下载的文件弹出），必须将 `pdfjs.disabled` 设为 `false` {{non-standard_inline()}}. +在 Firefox 中，要让 PDF 嵌入式地显示在 iframe 中（而不是作为下载的文件弹出），必须将 `pdfjs.disabled` 设为 `false`。 ```html diff --git a/files/zh-cn/web/api/filelist/index.md b/files/zh-cn/web/api/filelist/index.md index a8823ac45d943a..e1c2f781e54b83 100644 --- a/files/zh-cn/web/api/filelist/index.md +++ b/files/zh-cn/web/api/filelist/index.md @@ -2,7 +2,7 @@ title: FileList slug: Web/API/FileList l10n: - sourceCommit: 8fd2ee72038310e3ecc387df235ffac1cb08775c + sourceCommit: cfa628aedb53a83b315943ef19fa6c73298fb7d5 --- {{APIRef("File API")}}{{AvailableInWorkers}} @@ -21,8 +21,9 @@ l10n: const file = document.getElementById("fileItem").files[0]; ``` -> [!NOTE] -> 此接口的出现是[对创建不可修改列表的一次尝试](https://stackoverflow.com/questions/74630989/why-use-domstringlist-rather-than-an-array/74641156#74641156)，并且仅是出于避免破坏已经在使用它的代码而继续受到支持。现代 API 使用围绕 ECMAScript 数组类型的类型，因此你可以像 ECMAScript 数组一样对待它们，同时对其使用施加额外的语义（例如使其项目只读）。 +此接口[试图创建不可修改的列表](https://stackoverflow.com/questions/74630989/why-use-domstringlist-rather-than-an-array/74641156#74641156)，为了不破坏已经使用该接口的代码，才继续支持该接口。现代 API 使用基于 JavaScript [数组](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array)的类型来表示列表结构，从而提供许多数组方法，同时对其使用施加额外的语义（例如使其项目为只读）。 + +这些历史原因并不意味着你作为开发人员应该避免使用 `FileList`。你不会自己创建 `FileList` 对象，而是从诸如 {{domxref("HTMLInputElement.files")}} 之类的 API 获取它们，并且这些 API 并未弃用。但是，请注意与真实数组的语义差异。 ## 实例属性 diff --git a/files/zh-cn/web/api/filereader/index.md b/files/zh-cn/web/api/filereader/index.md index ff1d520f9c9182..d61b20668636d9 100644 --- a/files/zh-cn/web/api/filereader/index.md +++ b/files/zh-cn/web/api/filereader/index.md @@ -2,7 +2,7 @@ title: FileReader slug: Web/API/FileReader l10n: - sourceCommit: c2f4a396c85a8f875b592913279e6f116072f622 + sourceCommit: 58ad1df59f2ffb9ecab4e27fe1bdf1eb5a55f89b --- {{APIRef("File API")}}{{AvailableInWorkers}} @@ -11,7 +11,7 @@ l10n: 文件对象可以从用户使用 {{HTMLElement("input")}} 元素选择文件而返回的 {{domxref("FileList")}} 对象中获取，或者从拖放操作的 {{ domxref("DataTransfer")}} 对象中获取。 -`FileReader` 只能访问用户明确选择的文件内容，无论是使用 HTML `` 元素还是通过拖放。它不能用于从用户的文件系统中按路径名读取文件。要按路径名读取客户端文件系统上的文件，请使用[文件系统访问 API](/zh-CN/docs/Web/API/File_System_API)。要读取服务器端文件，请使用 {{domxref("fetch()")}}，如果跨源读取，则需要 [CORS](/zh-CN/docs/Web/HTTP/CORS) 权限。 +`FileReader` 只能访问用户明确选择的文件内容，无论是使用 HTML `` 元素还是通过拖放。它不能用于从用户的文件系统中按路径名读取文件。要按路径名读取客户端文件系统上的文件，请使用[文件系统访问 API](/zh-CN/docs/Web/API/File_System_API)。要读取服务器端文件，请使用 {{domxref("Window/fetch", "fetch()")}}，如果跨源读取，则需要 [CORS](/zh-CN/docs/Web/HTTP/CORS) 权限。 {{InheritanceDiagram}} diff --git a/files/zh-cn/web/api/filereader/readasarraybuffer/index.md b/files/zh-cn/web/api/filereader/readasarraybuffer/index.md index b6d264b839ab52..183193fd22ecdd 100644 --- a/files/zh-cn/web/api/filereader/readasarraybuffer/index.md +++ b/files/zh-cn/web/api/filereader/readasarraybuffer/index.md @@ -2,7 +2,7 @@ title: FileReader：readAsArrayBuffer() 方法 slug: Web/API/FileReader/readAsArrayBuffer l10n: - sourceCommit: e43bfd9b4a6c363a4ba7ef6ffa64c09b38fd111b + sourceCommit: d8f04d843dd81ab8cea1cfc0577ae3c5c9b77d5c --- {{APIRef("File API")}}{{AvailableInWorkers}} diff --git a/files/zh-cn/web/api/filereader/readasbinarystring/index.md b/files/zh-cn/web/api/filereader/readasbinarystring/index.md index f40eda5fcff1dd..925df2d339d3cb 100644 --- a/files/zh-cn/web/api/filereader/readasbinarystring/index.md +++ b/files/zh-cn/web/api/filereader/readasbinarystring/index.md @@ -2,7 +2,7 @@ title: FileReader：readAsBinaryString() 方法 slug: Web/API/FileReader/readAsBinaryString l10n: - sourceCommit: e43bfd9b4a6c363a4ba7ef6ffa64c09b38fd111b + sourceCommit: d8f04d843dd81ab8cea1cfc0577ae3c5c9b77d5c --- {{APIRef("File API")}}{{AvailableInWorkers}}{{Deprecated_Header}} diff --git a/files/zh-cn/web/api/filereader/readasdataurl/index.md b/files/zh-cn/web/api/filereader/readasdataurl/index.md index da312c621f1ee0..2d6589fa07bb62 100644 --- a/files/zh-cn/web/api/filereader/readasdataurl/index.md +++ b/files/zh-cn/web/api/filereader/readasdataurl/index.md @@ -2,7 +2,7 @@ title: FileReader：readAsDataURL() 方法 slug: Web/API/FileReader/readAsDataURL l10n: - sourceCommit: e43bfd9b4a6c363a4ba7ef6ffa64c09b38fd111b + sourceCommit: 6b730e3cfdf0f51940b44efa71bd59c84ce76e71 --- {{APIRef("File API")}}{{AvailableInWorkers}} diff --git a/files/zh-cn/web/api/filereader/readastext/index.md b/files/zh-cn/web/api/filereader/readastext/index.md index c3fdb02a71cfc3..68f819e1de52ef 100644 --- a/files/zh-cn/web/api/filereader/readastext/index.md +++ b/files/zh-cn/web/api/filereader/readastext/index.md @@ -2,10 +2,10 @@ title: FileReader：readAsText() 方法 slug: Web/API/FileReader/readAsText l10n: - sourceCommit: e43bfd9b4a6c363a4ba7ef6ffa64c09b38fd111b + sourceCommit: d8f04d843dd81ab8cea1cfc0577ae3c5c9b77d5c --- -{{APIRef("File API")}} +{{APIRef("File API")}}{{AvailableInWorkers}} {{domxref("FileReader")}} 接口的 **`readAsText()`** 方法用于读取指定的 {{domxref("Blob")}} 或 {{domxref("File")}} 对象的内容。当读操作完成时，{{domxref("FileReader.readyState","readyState")}} 属性更改为 `DONE`，并触发 {{domxref("FileReader/loadend_event", "loadend")}} 事件，并且 {{domxref("FileReader.result","result")}} 属性包含表示文件内容的文本字符串。 diff --git a/files/zh-cn/web/api/filereader/readystate/index.md b/files/zh-cn/web/api/filereader/readystate/index.md index bd2535294a109a..e5094178fa29fb 100644 --- a/files/zh-cn/web/api/filereader/readystate/index.md +++ b/files/zh-cn/web/api/filereader/readystate/index.md @@ -2,7 +2,7 @@ title: FileReader：readyState 属性 slug: Web/API/FileReader/readyState l10n: - sourceCommit: 541c4d10b9a1fb1c3400087f2514cd7358f4298f + sourceCommit: e932acf254c5dd06e26798b9d8fe01ce8dab1fb7 --- {{APIRef("File API")}}{{AvailableInWorkers}} @@ -11,13 +11,13 @@ l10n: ## 值 -一个数值，是 {{domxref("FileReader")}} API 定义的三个可能状态的常量之一。 +一个数字，它是 {{domxref("FileReader")}} 接口上定义的三个可能的状态常量之一： -- `FileReader.EMPTY` +- `FileReader.EMPTY`（0） - : Reader 已创建，但尚未调用任何读取方法。 -- `FileReader.LOADING` +- `FileReader.LOADING`（1） - : 已调用读取方法。正在读取 {{domxref("File")}} 或 {{domxref("Blob")}}，尚未发生错误。 -- `FileReader.DONE` +- `FileReader.DONE`（2） - : 读取操作完成。这可能意味着：整个 {{domxref("File")}} 或 {{domxref("Blob")}} 已读入内存，发生文件读取错误，或 {{domxref("FileReader.abort()", "abort()")}} 被调用并且读取被取消。 ## 示例 diff --git a/files/zh-cn/web/api/filereadersync/filereadersync/index.md b/files/zh-cn/web/api/filereadersync/filereadersync/index.md index d12c078843cc9d..dc8bcd2e5c5511 100644 --- a/files/zh-cn/web/api/filereadersync/filereadersync/index.md +++ b/files/zh-cn/web/api/filereadersync/filereadersync/index.md @@ -2,7 +2,7 @@ title: FileReaderSync：FileReaderSync() 构造函数 slug: Web/API/FileReaderSync/FileReaderSync l10n: - sourceCommit: 1dad49fff047729e8dcca313a45ccb4cc2d2526f + sourceCommit: d8f04d843dd81ab8cea1cfc0577ae3c5c9b77d5c --- {{APIRef("File API")}} {{AvailableInWorkers("worker_except_service")}} diff --git a/files/zh-cn/web/api/filereadersync/readasbinarystring/index.md b/files/zh-cn/web/api/filereadersync/readasbinarystring/index.md index aedb8012f63891..228921e907ef21 100644 --- a/files/zh-cn/web/api/filereadersync/readasbinarystring/index.md +++ b/files/zh-cn/web/api/filereadersync/readasbinarystring/index.md @@ -2,7 +2,7 @@ title: FileReaderSync：readAsBinaryString() 方法 slug: Web/API/FileReaderSync/readAsBinaryString l10n: - sourceCommit: 502e8c3f0be95c6f42afe6a72113b029b290b9e8 + sourceCommit: d8f04d843dd81ab8cea1cfc0577ae3c5c9b77d5c --- {{APIRef("File API")}}{{deprecated_header}} {{AvailableInWorkers("worker_except_service")}} diff --git a/files/zh-cn/web/api/url/createobjecturl_static/index.md b/files/zh-cn/web/api/url/createobjecturl_static/index.md index fcc6117f9fa9d8..83ca33fa5f1226 100644 --- a/files/zh-cn/web/api/url/createobjecturl_static/index.md +++ b/files/zh-cn/web/api/url/createobjecturl_static/index.md @@ -2,7 +2,7 @@ title: URL：createObjectURL() 静态方法 slug: Web/API/URL/createObjectURL_static l10n: - sourceCommit: 367b982b93c07f7f99e7bb768a6bf326fa5198e6 + sourceCommit: 22080a7cc403f7f45c8e85065b182c9f0d4d383c --- {{APIRef("File API")}} {{AvailableInWorkers("window_and_worker_except_service")}} @@ -48,7 +48,7 @@ URL.createObjectURL(object) 在较早版本的媒体源规范中，需要为 {{domxref("MediaStream")}} 创建一个对象 URL 才能将流附加到 {{HTMLElement("video")}} 元素。这已不再必要，浏览器正在逐步取消对此的支持。 > [!WARNING] -> 如果你还有依赖于 {{domxref("URL.createObjectURL_static", "createObjectURL()")}} 将流附加到媒体元素的代码，你需要更新代码并将 {{domxref("HTMLMediaElement.srcObject", "srcObject")}} 设置为 `MediaStream`。 +> 如果你还有依赖于 `createObjectURL()` 将流附加到媒体元素的代码，你需要更新代码并将 {{domxref("HTMLMediaElement.srcObject", "srcObject")}} 设置为 `MediaStream`。 ## 规范 diff --git a/files/zh-cn/web/api/url/revokeobjecturl_static/index.md b/files/zh-cn/web/api/url/revokeobjecturl_static/index.md index 7d0f9b64c068c6..202e356d902520 100644 --- a/files/zh-cn/web/api/url/revokeobjecturl_static/index.md +++ b/files/zh-cn/web/api/url/revokeobjecturl_static/index.md @@ -2,7 +2,7 @@ title: URL：revokeObjectURL() 静态方法 slug: Web/API/URL/revokeObjectURL_static l10n: - sourceCommit: 367b982b93c07f7f99e7bb768a6bf326fa5198e6 + sourceCommit: 216794e76611c18e53222bb8efa570e898e990de --- {{APIRef("File API")}} {{AvailableInWorkers("window_and_worker_except_service")}} From 0155042c142fa0a729f554da5fa3efc93eadc34d Mon Sep 17 00:00:00 2001 From: A1lo Date: Wed, 18 Sep 2024 12:04:44 +0800 Subject: [PATCH 08/26] zh-cn: update the translation of the `HTMLElement.click()` method (#23634) Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- .../zh-cn/web/api/htmlelement/click/index.md | 29 ++++++++++++------- 1 file changed, 18 insertions(+), 11 deletions(-) diff --git a/files/zh-cn/web/api/htmlelement/click/index.md b/files/zh-cn/web/api/htmlelement/click/index.md index 0ff7eb1e5a003e..03f032fd385dce 100644 --- a/files/zh-cn/web/api/htmlelement/click/index.md +++ b/files/zh-cn/web/api/htmlelement/click/index.md @@ -1,14 +1,13 @@ --- -title: HTMLElement.click() +title: HTMLElement：click() 方法 slug: Web/API/HTMLElement/click +l10n: + sourceCommit: bf0b6c9ae5845fdfca1398541ed26d9946db2495 --- {{ APIRef("HTML DOM") }} -**`HTMLElement.click()`** 方法可以用来模拟鼠标左键单击一个元素。 - -当在支持 `click()` 方法的元素上使用该方法（例如 -{{HTMLElement("input")}}) ，将会产生该元素的一个点击事件。这个事件会冒泡上升到文档树（或事件链）中更高的元素，并触发它们的点击事件。 +**`HTMLElement.click()`** 方法模拟鼠标单击元素。当在某个元素上调用时，会触发元素的 {{domxref("Element/click_event", "click")}} 事件（除非该元素设置了 [`disabled`](/zh-CN/docs/Web/HTML/Attributes/disabled) 属性）。 ## 语法 @@ -16,9 +15,17 @@ slug: Web/API/HTMLElement/click click() ``` +### 参数 + +无。 + +### 返回值 + +无（{{jsxref("undefined")}}）。 + ## 示例 -当鼠标移动过复选框时模拟一个点击事件： +当鼠标移动过复选框时模拟鼠标点击事件： ### HTML @@ -28,7 +35,7 @@ click() type="checkbox" id="myCheck" onmouseover="myFunction()" - onclick="alert('click event occurred')" /> + onclick="alert('发生点击事件')" /> ``` @@ -51,8 +58,8 @@ function myFunction() { ## 参见 -- 有关的事件处理 +- 有关的事件处理器 - - {{domxref("GlobalEventHandlers.onclick")}} - - {{domxref("GlobalEventHandlers.ondblclick")}} - - {{domxref("GlobalEventHandlers.onauxclick")}} + - {{domxref("Element.click_event", "Element.onclick")}} + - {{domxref("Element.dblclick_event", "Element.ondblclick")}} + - {{domxref("Element.auxclick_event", "Element.onauxclick")}} From 072cee95e558966167c7aa18703ea047d888fe53 Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Wed, 18 Sep 2024 15:36:05 +0800 Subject: [PATCH 09/26] [zh-CN]: update translation for Broadcast Channel API - part II (#23375) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Jason Ren <40999116+jasonren0403@users.noreply.github.com> --- .../web/api/broadcastchannel/close/index.md | 20 ++--- .../broadcastchannel/message_event/index.md | 26 ++++--- .../messageerror_event/index.md | 73 ++++++++++--------- .../api/broadcastchannel/postmessage/index.md | 30 ++++++-- 4 files changed, 86 insertions(+), 63 deletions(-) diff --git a/files/zh-cn/web/api/broadcastchannel/close/index.md b/files/zh-cn/web/api/broadcastchannel/close/index.md index 720574f2abe9eb..f2dc336436482e 100644 --- a/files/zh-cn/web/api/broadcastchannel/close/index.md +++ b/files/zh-cn/web/api/broadcastchannel/close/index.md @@ -1,27 +1,27 @@ --- -title: BroadcastChannel.close() +title: BroadcastChannel：close() 方法 slug: Web/API/BroadcastChannel/close +l10n: + sourceCommit: 50a45d52fd9f45f1ca30b546af5920d0ccda82dc --- -{{APIRef("BroadCastChannel API")}} +{{APIRef("BroadCastChannel API")}} {{AvailableInWorkers}} -通过调用 **`BroadcastChannel.close()`** 方法，可以马上断开其与对应频道的关联，并让其被垃圾回收。这是必要的步骤，因为浏览器没有其他方式知道频道不再被需要。 - -{{AvailableInWorkers}} +{{domxref("BroadcastChannel")}} 接口的 **`close()`** 方法终止与底层频道的连接，从而允许对对象进行垃圾回收。这是必须执行的步骤，因为浏览器没有其他方法可以知道不再需要此频道。 ## 语法 -```plain -var str = channel.close(); +```js-nolint +close() ``` ## 示例 ```js // 连接到指定频道 -var bc = new BroadcastChannel("test_channel"); +const bc = new BroadcastChannel("test_channel"); -// 其他操作 (如：postMessage, …) +// 其他操作（如：postMessage、……） // 当完成后，断开与频道的连接 bc.close(); @@ -37,4 +37,4 @@ bc.close(); ## 参见 -- {{domxref("BroadcastChannel")}}, the interface it belongs to. +- 所属接口：{{domxref("BroadcastChannel")}} diff --git a/files/zh-cn/web/api/broadcastchannel/message_event/index.md b/files/zh-cn/web/api/broadcastchannel/message_event/index.md index b5c2b3e1bb252b..38888d824afffd 100644 --- a/files/zh-cn/web/api/broadcastchannel/message_event/index.md +++ b/files/zh-cn/web/api/broadcastchannel/message_event/index.md @@ -1,19 +1,21 @@ --- title: BroadcastChannel：message 事件 slug: Web/API/BroadcastChannel/message_event +l10n: + sourceCommit: 50a45d52fd9f45f1ca30b546af5920d0ccda82dc --- -{{APIRef}} +{{APIRef("BroadCastChannel API")}}{{AvailableInWorkers}} -当频道收到一条消息时，会在关联的 {{domxref('BroadcastChannel')}} 对象上触发 `message` 事件。 +{{domxref("BroadcastChannel")}} 接口的 **`message`** 事件在频道收到一条消息时触发。 ## 语法 在 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 等方法中使用事件名称，或设置事件处理器属性。 -```js -addEventListener("message", (event) => {}); -onmessage = (event) => {}; +```js-nolint +addEventListener("message", (event) => { }) +onmessage = (event) => { } ``` ## 事件类型 @@ -26,20 +28,20 @@ onmessage = (event) => {}; _除了下面列出的属性之外，还可以使用父接口 {{domxref("Event")}} 的属性。_ -- {{domxref("MessageEvent.data", "data")}} {{readonlyInline}} +- {{domxref("MessageEvent.data", "data")}} {{ReadOnlyInline}} - : 由消息发送者发送的数据。 -- {{domxref("MessageEvent.origin", "origin")}} {{readonlyInline}} +- {{domxref("MessageEvent.origin", "origin")}} {{ReadOnlyInline}} - : 一个表示消息发送者来源的字符串。 -- {{domxref("MessageEvent.lastEventId", "lastEventId")}} {{readonlyInline}} +- {{domxref("MessageEvent.lastEventId", "lastEventId")}} {{ReadOnlyInline}} - : 一个表示事件唯一 ID 的字符串。 -- {{domxref("MessageEvent.source", "source")}} {{readonlyInline}} +- {{domxref("MessageEvent.source", "source")}} {{ReadOnlyInline}} - : 一个*消息事件源*，可以是一个用于表示消息发送者的 {{glossary("WindowProxy")}}、{{domxref("MessagePort")}} 或 {{domxref("ServiceWorker")}} 对象。 -- {{domxref("MessageEvent.ports", "ports")}} {{readonlyInline}} +- {{domxref("MessageEvent.ports", "ports")}} {{ReadOnlyInline}} - : 一个与发送消息（通过频道发送消息或向 SharedWorker 发送消息）的频道相关联的 {{domxref("MessagePort")}} 对象的数组。 ## 示例 -在这个示例中，有一个 [`