From dfa3197386a38309fda32d2bff029069f2fb2d28 Mon Sep 17 00:00:00 2001 From: A1lo Date: Wed, 18 Sep 2024 08:25:42 +0800 Subject: [PATCH] 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

```