diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt
index ad5291f6fb8ce4..808aa78ab3c224 100644
--- a/files/es/_redirects.txt
+++ b/files/es/_redirects.txt
@@ -1721,10 +1721,10 @@
 /es/docs/Web/API/WebSockets_API/Escribiendo_servidor_WebSocket	/es/docs/Web/API/WebSockets_API/Writing_WebSocket_server
 /es/docs/Web/API/WebSockets_API/Escribiendo_servidores_con_WebSocket	/es/docs/Web/API/WebSockets_API/Writing_WebSocket_servers
 /es/docs/Web/API/Web_Speech_API/Uso_de_la_Web_Speech_API	/es/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API
-/es/docs/Web/API/Window.clearTimeout	/es/docs/Web/API/clearTimeout
+/es/docs/Web/API/Window.clearTimeout	/es/docs/Web/API/Window/clearTimeout
 /es/docs/Web/API/Window.navigator	/es/docs/Web/API/Window/navigator
 /es/docs/Web/API/Window.onbeforeunload	/es/docs/Web/API/Window/beforeunload_event
-/es/docs/Web/API/Window.setTimeout	/es/docs/Web/API/setTimeout
+/es/docs/Web/API/Window.setTimeout	/es/docs/Web/API/Window/setTimeout
 /es/docs/Web/API/Window/applicationCache	/es/docs/orphaned/Web/API/Window/applicationCache
 /es/docs/Web/API/Window/dialogArguments	/es/docs/orphaned/Web/API/Window/dialogArguments
 /es/docs/Web/API/WindowBase64.atob	/es/docs/Web/API/Window/atob
@@ -1736,18 +1736,18 @@
 /es/docs/Web/API/WindowEventHandlers/onpopstate	/es/docs/Web/API/Window/popstate_event
 /es/docs/Web/API/WindowOrWorkerGlobalScope/atob	/es/docs/Web/API/Window/atob
 /es/docs/Web/API/WindowOrWorkerGlobalScope/caches	/es/docs/Web/API/Window/caches
-/es/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval	/es/docs/Web/API/clearInterval
-/es/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout	/es/docs/Web/API/clearTimeout
-/es/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap	/es/docs/Web/API/createImageBitmap
+/es/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval	/es/docs/Web/API/Window/clearInterval
+/es/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout	/es/docs/Web/API/Window/clearTimeout
+/es/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap	/es/docs/Web/API/Window/createImageBitmap
 /es/docs/Web/API/WindowOrWorkerGlobalScope/fetch	/es/docs/Web/API/Window/fetch
 /es/docs/Web/API/WindowOrWorkerGlobalScope/indexedDB	/es/docs/Web/API/Window/indexedDB
 /es/docs/Web/API/WindowOrWorkerGlobalScope/isSecureContext	/es/docs/Web/API/Window/isSecureContext
-/es/docs/Web/API/WindowOrWorkerGlobalScope/setInterval	/es/docs/Web/API/setInterval
-/es/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout	/es/docs/Web/API/setTimeout
-/es/docs/Web/API/WindowTimers/clearInterval	/es/docs/Web/API/clearInterval
-/es/docs/Web/API/WindowTimers/clearTimeout	/es/docs/Web/API/clearTimeout
-/es/docs/Web/API/WindowTimers/setInterval	/es/docs/Web/API/setInterval
-/es/docs/Web/API/WindowTimers/setTimeout	/es/docs/Web/API/setTimeout
+/es/docs/Web/API/WindowOrWorkerGlobalScope/setInterval	/es/docs/Web/API/Window/setInterval
+/es/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout	/es/docs/Web/API/Window/setTimeout
+/es/docs/Web/API/WindowTimers/clearInterval	/es/docs/Web/API/Window/clearInterval
+/es/docs/Web/API/WindowTimers/clearTimeout	/es/docs/Web/API/Window/clearTimeout
+/es/docs/Web/API/WindowTimers/setInterval	/es/docs/Web/API/Window/setInterval
+/es/docs/Web/API/WindowTimers/setTimeout	/es/docs/Web/API/Window/setTimeout
 /es/docs/Web/API/XMLDocument/async	/es/docs/Web/API/XMLDocument
 /es/docs/Web/API/XMLHttpRequest/FormData	/es/docs/Web/API/FormData
 /es/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest	/es/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest
@@ -1755,6 +1755,8 @@
 /es/docs/Web/API/atob	/es/docs/Web/API/Window/atob
 /es/docs/Web/API/btoa	/es/docs/Web/API/Window/btoa
 /es/docs/Web/API/caches	/es/docs/Web/API/Window/caches
+/es/docs/Web/API/clearInterval	/es/docs/Web/API/Window/clearInterval
+/es/docs/Web/API/clearTimeout	/es/docs/Web/API/Window/clearTimeout
 /es/docs/Web/API/console/assert	/es/docs/Web/API/console/assert_static
 /es/docs/Web/API/console/count	/es/docs/Web/API/console/count_static
 /es/docs/Web/API/console/dir	/es/docs/Web/API/console/dir_static
@@ -1767,12 +1769,15 @@
 /es/docs/Web/API/console/timeEnd	/es/docs/Web/API/console/timeEnd_static
 /es/docs/Web/API/console/trace	/es/docs/Web/API/console/trace_static
 /es/docs/Web/API/console/warn	/es/docs/Web/API/console/warn_static
+/es/docs/Web/API/createImageBitmap	/es/docs/Web/API/Window/createImageBitmap
 /es/docs/Web/API/crypto_property	/es/docs/Web/API/Window/crypto
 /es/docs/Web/API/event.defaultPrevented	/es/docs/Web/API/Event/defaultPrevented
 /es/docs/Web/API/event.which	/es/docs/Web/API/UIEvent/which
 /es/docs/Web/API/fetch	/es/docs/Web/API/Window/fetch
 /es/docs/Web/API/indexedDB	/es/docs/Web/API/Window/indexedDB
 /es/docs/Web/API/isSecureContext	/es/docs/Web/API/Window/isSecureContext
+/es/docs/Web/API/setInterval	/es/docs/Web/API/Window/setInterval
+/es/docs/Web/API/setTimeout	/es/docs/Web/API/Window/setTimeout
 /es/docs/Web/Accesibilidad	/es/docs/Web/Accessibility
 /es/docs/Web/Accesibilidad/Comunidad	/es/docs/conflicting/Web/Accessibility
 /es/docs/Web/Accesibilidad/Understanding_WCAG	/es/docs/Web/Accessibility/Understanding_WCAG
@@ -2199,13 +2204,17 @@
 /es/docs/Web/HTML/microformatos	/es/docs/Web/HTML/microformats
 /es/docs/Web/HTML/Índice	/es/docs/Web/HTML
 /es/docs/Web/HTTP/Access_control_CORS	/es/docs/Web/HTTP/CORS
+/es/docs/Web/HTTP/Basics_of_HTTP	/es/docs/conflicting/Web/HTTP
 /es/docs/Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs	/es/docs/Web/URI/Authority/Choosing_between_www_and_non-www_URLs
 /es/docs/Web/HTTP/Basics_of_HTTP/Data_URIs	/es/docs/Web/URI/Schemes/data
 /es/docs/Web/HTTP/Basics_of_HTTP/Data_URLs	/es/docs/Web/URI/Schemes/data
 /es/docs/Web/HTTP/Basics_of_HTTP/Datos_URIs	/es/docs/Web/URI/Schemes/data
+/es/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP	/es/docs/Web/HTTP/Evolution_of_HTTP
 /es/docs/Web/HTTP/Basics_of_HTTP/Identificación_recursos_en_la_Web	/es/docs/orphaned/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web
 /es/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web	/es/docs/orphaned/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web
-/es/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Lista_completa_de_tipos_MIME	/es/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+/es/docs/Web/HTTP/Basics_of_HTTP/MIME_types	/es/docs/Web/HTTP/MIME_types
+/es/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types	/es/docs/Web/HTTP/MIME_types/Common_types
+/es/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Lista_completa_de_tipos_MIME	/es/docs/Web/HTTP/MIME_types/Common_types
 /es/docs/Web/HTTP/Gestion_de_la_conexion_en_HTTP_1.x	/es/docs/Web/HTTP/Connection_management_in_HTTP_1.x
 /es/docs/Web/HTTP/Peticiones_condicionales	/es/docs/Web/HTTP/Conditional_requests
 /es/docs/Web/HTTP/Sesión	/es/docs/Web/HTTP/Session
diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json
index 4c761971946439..6f362a29aaf10f 100644
--- a/files/es/_wikihistory.json
+++ b/files/es/_wikihistory.json
@@ -5460,6 +5460,14 @@
     "modified": "2019-03-23T22:30:46.211Z",
     "contributors": ["khrizenriquez"]
   },
+  "Web/API/Window/clearInterval": {
+    "modified": "2019-03-23T22:56:16.485Z",
+    "contributors": ["Guitxo"]
+  },
+  "Web/API/Window/clearTimeout": {
+    "modified": "2019-06-18T10:20:27.972Z",
+    "contributors": ["AlePerez92", "fscholz", "basemnassar11", "VictorArias"]
+  },
   "Web/API/Window/close": {
     "modified": "2020-10-15T21:37:07.614Z",
     "contributors": ["SphinxKnight", "dgrizzla", "Siro_Diaz"]
@@ -5472,6 +5480,10 @@
     "modified": "2019-03-23T22:45:47.266Z",
     "contributors": ["julian3xl"]
   },
+  "Web/API/Window/createImageBitmap": {
+    "modified": "2020-10-15T22:14:17.553Z",
+    "contributors": ["Bumxu"]
+  },
   "Web/API/Window/crypto": {
     "modified": "2020-02-12T20:26:38.795Z",
     "contributors": ["joseluisq", "AlePerez92", "victorjavierss"]
@@ -5635,6 +5647,21 @@
     "modified": "2019-03-23T22:57:50.655Z",
     "contributors": ["svera", "pedromagnus", "develasquez"]
   },
+  "Web/API/Window/setInterval": {
+    "modified": "2020-08-24T18:02:23.092Z",
+    "contributors": ["mastertrooper", "Makinita", "Klius", "claudionebbia"]
+  },
+  "Web/API/Window/setTimeout": {
+    "modified": "2019-03-23T23:17:29.378Z",
+    "contributors": [
+      "BubuAnabelas",
+      "vltamara",
+      "nauj27",
+      "fscholz",
+      "AshfaqHossain",
+      "VictorArias"
+    ]
+  },
   "Web/API/Window/showModalDialog": {
     "modified": "2019-03-18T20:58:55.311Z",
     "contributors": ["SphinxKnight", "BubuAnabelas", "Grijander81"]
@@ -5707,14 +5734,6 @@
       "inma_610"
     ]
   },
-  "Web/API/clearInterval": {
-    "modified": "2019-03-23T22:56:16.485Z",
-    "contributors": ["Guitxo"]
-  },
-  "Web/API/clearTimeout": {
-    "modified": "2019-06-18T10:20:27.972Z",
-    "contributors": ["AlePerez92", "fscholz", "basemnassar11", "VictorArias"]
-  },
   "Web/API/console": {
     "modified": "2019-08-30T08:42:12.082Z",
     "contributors": ["ajuanjojjj", "fcanellas", "vlguerrero", "chrisdavidmills"]
@@ -5767,10 +5786,6 @@
     "modified": "2020-10-15T21:53:36.780Z",
     "contributors": ["juanluisrp", "oderflaj"]
   },
-  "Web/API/createImageBitmap": {
-    "modified": "2020-10-15T22:14:17.553Z",
-    "contributors": ["Bumxu"]
-  },
   "Web/API/notification/icon": {
     "modified": "2019-03-23T22:59:32.492Z",
     "contributors": ["joxhker"]
@@ -5783,21 +5798,6 @@
     "modified": "2019-03-23T22:50:37.341Z",
     "contributors": ["MarkelCuesta", "jezdez", "Davdriver"]
   },
-  "Web/API/setInterval": {
-    "modified": "2020-08-24T18:02:23.092Z",
-    "contributors": ["mastertrooper", "Makinita", "Klius", "claudionebbia"]
-  },
-  "Web/API/setTimeout": {
-    "modified": "2019-03-23T23:17:29.378Z",
-    "contributors": [
-      "BubuAnabelas",
-      "vltamara",
-      "nauj27",
-      "fscholz",
-      "AshfaqHossain",
-      "VictorArias"
-    ]
-  },
   "Web/Accessibility": {
     "modified": "2020-09-22T14:24:03.363Z",
     "contributors": [
@@ -9415,34 +9415,6 @@
       "DavidPeniafiel"
     ]
   },
-  "Web/HTTP/Basics_of_HTTP": {
-    "modified": "2020-04-20T02:59:31.392Z",
-    "contributors": [
-      "obed3113",
-      "sanxofon",
-      "Sergio_Gonzalez_Collado",
-      "cissoid"
-    ]
-  },
-  "Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP": {
-    "modified": "2019-03-23T22:10:11.567Z",
-    "contributors": ["Sergio_Gonzalez_Collado", "ChrisMHM"]
-  },
-  "Web/HTTP/Basics_of_HTTP/MIME_types": {
-    "modified": "2019-11-18T08:03:54.325Z",
-    "contributors": [
-      "IsaacAaron",
-      "sanxofon",
-      "Sergio_Gonzalez_Collado",
-      "kevinmont",
-      "juanrarodriguez18",
-      "strattadb"
-    ]
-  },
-  "Web/HTTP/Basics_of_HTTP/MIME_types/Common_types": {
-    "modified": "2020-02-28T13:10:45.613Z",
-    "contributors": ["chrisdavidmills", "sanxofon", "franklevel", "gabrielnoe"]
-  },
   "Web/HTTP/CORS": {
     "modified": "2020-08-10T16:23:20.546Z",
     "contributors": [
@@ -9521,6 +9493,10 @@
       "omertafox"
     ]
   },
+  "Web/HTTP/Evolution_of_HTTP": {
+    "modified": "2019-03-23T22:10:11.567Z",
+    "contributors": ["Sergio_Gonzalez_Collado", "ChrisMHM"]
+  },
   "Web/HTTP/Headers": {
     "modified": "2019-12-10T13:29:15.931Z",
     "contributors": [
@@ -9719,6 +9695,21 @@
     "modified": "2020-10-15T21:59:06.897Z",
     "contributors": ["JulioMoreyra", "francinysalles", "tonialfaro"]
   },
+  "Web/HTTP/MIME_types": {
+    "modified": "2019-11-18T08:03:54.325Z",
+    "contributors": [
+      "IsaacAaron",
+      "sanxofon",
+      "Sergio_Gonzalez_Collado",
+      "kevinmont",
+      "juanrarodriguez18",
+      "strattadb"
+    ]
+  },
+  "Web/HTTP/MIME_types/Common_types": {
+    "modified": "2020-02-28T13:10:45.613Z",
+    "contributors": ["chrisdavidmills", "sanxofon", "franklevel", "gabrielnoe"]
+  },
   "Web/HTTP/Messages": {
     "modified": "2019-11-12T11:40:26.816Z",
     "contributors": [
@@ -14288,6 +14279,15 @@
       "Nukeador"
     ]
   },
+  "conflicting/Web/HTTP": {
+    "modified": "2020-04-20T02:59:31.392Z",
+    "contributors": [
+      "obed3113",
+      "sanxofon",
+      "Sergio_Gonzalez_Collado",
+      "cissoid"
+    ]
+  },
   "conflicting/Web/HTTP/Basics_of_HTTP/MIME_types": {
     "modified": "2019-01-16T15:43:53.805Z",
     "contributors": [
diff --git a/files/es/web/http/basics_of_http/index.md b/files/es/conflicting/web/http/index.md
similarity index 98%
rename from files/es/web/http/basics_of_http/index.md
rename to files/es/conflicting/web/http/index.md
index 89eb19f963bab5..0725dbfefbb528 100644
--- a/files/es/web/http/basics_of_http/index.md
+++ b/files/es/conflicting/web/http/index.md
@@ -1,6 +1,7 @@
 ---
 title: Conceptos básicos de HTTP
-slug: Web/HTTP/Basics_of_HTTP
+slug: conflicting/Web/HTTP
+original_slug: Web/HTTP/Basics_of_HTTP
 ---
 
 {{HTTPSidebar}}
diff --git a/files/es/web/api/clearinterval/index.md b/files/es/web/api/window/clearinterval/index.md
similarity index 91%
rename from files/es/web/api/clearinterval/index.md
rename to files/es/web/api/window/clearinterval/index.md
index ccbe3a4985e6e4..3b4dded0ab2388 100644
--- a/files/es/web/api/clearinterval/index.md
+++ b/files/es/web/api/window/clearinterval/index.md
@@ -1,6 +1,7 @@
 ---
 title: WindowTimers.clearInterval()
-slug: Web/API/clearInterval
+slug: Web/API/Window/clearInterval
+original_slug: Web/API/clearInterval
 ---
 
 {{APIRef("HTML DOM")}}
diff --git a/files/es/web/api/cleartimeout/index.md b/files/es/web/api/window/cleartimeout/index.md
similarity index 95%
rename from files/es/web/api/cleartimeout/index.md
rename to files/es/web/api/window/cleartimeout/index.md
index 5c77b4c3794950..4aeb0d79f9a9d0 100644
--- a/files/es/web/api/cleartimeout/index.md
+++ b/files/es/web/api/window/cleartimeout/index.md
@@ -1,6 +1,7 @@
 ---
 title: window.clearTimeout
-slug: Web/API/clearTimeout
+slug: Web/API/Window/clearTimeout
+original_slug: Web/API/clearTimeout
 ---
 
 {{ApiRef}}
diff --git a/files/es/web/api/createimagebitmap/index.md b/files/es/web/api/window/createimagebitmap/index.md
similarity index 97%
rename from files/es/web/api/createimagebitmap/index.md
rename to files/es/web/api/window/createimagebitmap/index.md
index 43a86129ef01de..51a5e63062eef2 100644
--- a/files/es/web/api/createimagebitmap/index.md
+++ b/files/es/web/api/window/createimagebitmap/index.md
@@ -1,6 +1,7 @@
 ---
 title: self.createImageBitmap()
-slug: Web/API/createImageBitmap
+slug: Web/API/Window/createImageBitmap
+original_slug: Web/API/createImageBitmap
 ---
 
 {{APIRef("Canvas API")}}
diff --git a/files/es/web/api/setinterval/index.md b/files/es/web/api/window/setinterval/index.md
similarity index 99%
rename from files/es/web/api/setinterval/index.md
rename to files/es/web/api/window/setinterval/index.md
index ce2b6440455a40..4d8dd57d7f55f7 100644
--- a/files/es/web/api/setinterval/index.md
+++ b/files/es/web/api/window/setinterval/index.md
@@ -1,6 +1,7 @@
 ---
 title: setInterval()
-slug: Web/API/setInterval
+slug: Web/API/Window/setInterval
+original_slug: Web/API/setInterval
 l10n:
   sourceCommit: 0717d1c0a7528b2dd44d065fe90d860e3bdc2e6a
 ---
diff --git a/files/es/web/api/settimeout/index.md b/files/es/web/api/window/settimeout/index.md
similarity index 99%
rename from files/es/web/api/settimeout/index.md
rename to files/es/web/api/window/settimeout/index.md
index cf89ebc0e2b596..439fd8524337fd 100644
--- a/files/es/web/api/settimeout/index.md
+++ b/files/es/web/api/window/settimeout/index.md
@@ -1,6 +1,7 @@
 ---
 title: setTimeout()
-slug: Web/API/setTimeout
+slug: Web/API/Window/setTimeout
+original_slug: Web/API/setTimeout
 l10n:
   sourceCommit: 4ba12fec878a1f941492ada3edd467bfd76532cf
 ---
diff --git a/files/es/web/http/basics_of_http/evolution_of_http/index.md b/files/es/web/http/evolution_of_http/index.md
similarity index 99%
rename from files/es/web/http/basics_of_http/evolution_of_http/index.md
rename to files/es/web/http/evolution_of_http/index.md
index 1d38c4992f2ce4..4684d6bcd460c4 100644
--- a/files/es/web/http/basics_of_http/evolution_of_http/index.md
+++ b/files/es/web/http/evolution_of_http/index.md
@@ -1,6 +1,7 @@
 ---
 title: Evolución del protocolo HTTP
-slug: Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP
+slug: Web/HTTP/Evolution_of_HTTP
+original_slug: Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP
 ---
 
 {{HTTPSidebar}}
diff --git a/files/es/web/http/basics_of_http/mime_types/common_types/index.md b/files/es/web/http/mime_types/common_types/index.md
similarity index 99%
rename from files/es/web/http/basics_of_http/mime_types/common_types/index.md
rename to files/es/web/http/mime_types/common_types/index.md
index c4269f6d809c71..0711b60967a996 100644
--- a/files/es/web/http/basics_of_http/mime_types/common_types/index.md
+++ b/files/es/web/http/mime_types/common_types/index.md
@@ -1,6 +1,7 @@
 ---
 title: Lista completa de tipos MIME
-slug: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+slug: Web/HTTP/MIME_types/Common_types
+original_slug: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
 ---
 
 {{HTTPSidebar}}
diff --git a/files/es/web/http/basics_of_http/mime_types/index.md b/files/es/web/http/mime_types/index.md
similarity index 99%
rename from files/es/web/http/basics_of_http/mime_types/index.md
rename to files/es/web/http/mime_types/index.md
index 28f0a23f5a016e..73e89a5546e678 100644
--- a/files/es/web/http/basics_of_http/mime_types/index.md
+++ b/files/es/web/http/mime_types/index.md
@@ -1,6 +1,7 @@
 ---
 title: Tipos MIME
-slug: Web/HTTP/Basics_of_HTTP/MIME_types
+slug: Web/HTTP/MIME_types
+original_slug: Web/HTTP/Basics_of_HTTP/MIME_types
 ---
 
 {{HTTPSidebar}}
diff --git a/files/fr/learn/javascript/objects/basics/index.md b/files/fr/learn/javascript/objects/basics/index.md
index d9859e66bf1ecb..afa49259501b79 100644
--- a/files/fr/learn/javascript/objects/basics/index.md
+++ b/files/fr/learn/javascript/objects/basics/index.md
@@ -77,7 +77,7 @@ var personne = {
 };
 ```
 
-Après avoir sauvegardé et rafraîchit la page, essayez d'entrer les lignes suivantes dans le champ de saisie `input` :
+Après avoir sauvegardé et rafraîchi la page, essayez d'entrer les lignes suivantes dans le champ de saisie `input` :
 
 ```js
 personne.nom;
diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index 3179efb3068144..734bf8050932e2 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -913,8 +913,8 @@
 /ja/docs/DOM/window.btoa-redirect-1	/ja/docs/Web/API/Window/btoa
 /ja/docs/DOM/window.cancelAnimationFrame	/ja/docs/Web/API/Window/cancelAnimationFrame
 /ja/docs/DOM/window.captureEvents	/ja/docs/Web/API/Window/captureEvents
-/ja/docs/DOM/window.clearInterval	/ja/docs/Web/API/clearInterval
-/ja/docs/DOM/window.clearTimeout	/ja/docs/Web/API/clearTimeout
+/ja/docs/DOM/window.clearInterval	/ja/docs/Web/API/Window/clearInterval
+/ja/docs/DOM/window.clearTimeout	/ja/docs/Web/API/Window/clearTimeout
 /ja/docs/DOM/window.close	/ja/docs/Web/API/Window/close
 /ja/docs/DOM/window.closed	/ja/docs/Web/API/Window/closed
 /ja/docs/DOM/window.confirm	/ja/docs/Web/API/Window/confirm
@@ -1016,8 +1016,8 @@
 /ja/docs/DOM/window.scrollY-redirect-1	/ja/docs/Web/API/Window/scrollY
 /ja/docs/DOM/window.scrollbars	/ja/docs/Web/API/Window/scrollbars
 /ja/docs/DOM/window.self	/ja/docs/Web/API/Window/self
-/ja/docs/DOM/window.setInterval	/ja/docs/Web/API/setInterval
-/ja/docs/DOM/window.setTimeout	/ja/docs/Web/API/setTimeout
+/ja/docs/DOM/window.setInterval	/ja/docs/Web/API/Window/setInterval
+/ja/docs/DOM/window.setTimeout	/ja/docs/Web/API/Window/setTimeout
 /ja/docs/DOM/window.showModalDialog	/ja/docs/Web/API/Window/showModalDialog
 /ja/docs/DOM/window.sidebar	/ja/docs/Web/API/Window/external
 /ja/docs/DOM/window.sizeToContent	/ja/docs/Web/API/Window/sizeToContent
@@ -1134,8 +1134,8 @@
 /ja/docs/DOM:window.blur	/ja/docs/Web/API/Window/blur
 /ja/docs/DOM:window.btoa	/ja/docs/Web/API/Window/btoa
 /ja/docs/DOM:window.captureEvents	/ja/docs/Web/API/Window/captureEvents
-/ja/docs/DOM:window.clearInterval	/ja/docs/Web/API/clearInterval
-/ja/docs/DOM:window.clearTimeout	/ja/docs/Web/API/clearTimeout
+/ja/docs/DOM:window.clearInterval	/ja/docs/Web/API/Window/clearInterval
+/ja/docs/DOM:window.clearTimeout	/ja/docs/Web/API/Window/clearTimeout
 /ja/docs/DOM:window.close	/ja/docs/Web/API/Window/close
 /ja/docs/DOM:window.closed	/ja/docs/Web/API/Window/closed
 /ja/docs/DOM:window.confirm	/ja/docs/Web/API/Window/confirm
@@ -1223,8 +1223,8 @@
 /ja/docs/DOM:window.scrollY	/ja/docs/Web/API/Window/scrollY
 /ja/docs/DOM:window.scrollbars	/ja/docs/Web/API/Window/scrollbars
 /ja/docs/DOM:window.self	/ja/docs/Web/API/Window/self
-/ja/docs/DOM:window.setInterval	/ja/docs/Web/API/setInterval
-/ja/docs/DOM:window.setTimeout	/ja/docs/Web/API/setTimeout
+/ja/docs/DOM:window.setInterval	/ja/docs/Web/API/Window/setInterval
+/ja/docs/DOM:window.setTimeout	/ja/docs/Web/API/Window/setTimeout
 /ja/docs/DOM:window.showModalDialog	/ja/docs/Web/API/Window/showModalDialog
 /ja/docs/DOM:window.sidebar	/ja/docs/Web/API/Window/external
 /ja/docs/DOM:window.sizeToContent	/ja/docs/Web/API/Window/sizeToContent
@@ -2536,8 +2536,8 @@
 /ja/docs/Tools/Working_with_iframes	https://firefox-source-docs.mozilla.org/devtools-user/working_with_iframes/index.html
 /ja/docs/Tools/about:debugging	https://firefox-source-docs.mozilla.org/devtools-user/about_colon_debugging/index.html
 /ja/docs/Transforming_XML_with_XSLT	/ja/docs/Web/XSLT/Transforming_XML_with_XSLT
-/ja/docs/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference	/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference
-/ja/docs/Transforming_XML_with_XSLT:The_Netscape_XSLT_XPath_Reference	/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference
+/ja/docs/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference	/ja/docs/Web/XSLT/Transforming_XML_with_XSLT
+/ja/docs/Transforming_XML_with_XSLT:The_Netscape_XSLT_XPath_Reference	/ja/docs/Web/XSLT/Transforming_XML_with_XSLT
 /ja/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces	/ja/docs/Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces
 /ja/docs/Tutorials/Using_CSS_gradients	/ja/docs/Web/CSS/CSS_images/Using_CSS_gradients
 /ja/docs/Upcoming_Firefox_features_for_developers	/ja/docs/Mozilla/Firefox/Releases/4
@@ -3184,8 +3184,6 @@
 /ja/docs/Web/API/Window/onreset	/ja/docs/Web/API/HTMLFormElement/reset_event
 /ja/docs/Web/API/Window/onresize	/ja/docs/Web/API/Window/resize_event
 /ja/docs/Web/API/Window/restore	/ja/docs/Web/API/Window/moveTo
-/ja/docs/Web/API/Window/setInterval	/ja/docs/Web/API/setInterval
-/ja/docs/Web/API/Window/setTimeout	/ja/docs/Web/API/setTimeout
 /ja/docs/Web/API/Window/sidebar	/ja/docs/Web/API/Window/external
 /ja/docs/Web/API/Window/transitioncancel_event	/ja/docs/Web/API/Element/transitioncancel_event
 /ja/docs/Web/API/Window/transitionend_event	/ja/docs/Web/API/Element/transitionend_event
@@ -3216,20 +3214,20 @@
 /ja/docs/Web/API/WindowOrWorkerGlobalScope/atob	/ja/docs/Web/API/Window/atob
 /ja/docs/Web/API/WindowOrWorkerGlobalScope/btoa	/ja/docs/Web/API/Window/btoa
 /ja/docs/Web/API/WindowOrWorkerGlobalScope/caches	/ja/docs/Web/API/Window/caches
-/ja/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval	/ja/docs/Web/API/clearInterval
-/ja/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout	/ja/docs/Web/API/clearTimeout
-/ja/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap	/ja/docs/Web/API/createImageBitmap
+/ja/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval	/ja/docs/Web/API/Window/clearInterval
+/ja/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout	/ja/docs/Web/API/Window/clearTimeout
+/ja/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap	/ja/docs/Web/API/Window/createImageBitmap
 /ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch	/ja/docs/Web/API/Window/fetch
 /ja/docs/Web/API/WindowOrWorkerGlobalScope/indexedDB	/ja/docs/Web/API/Window/indexedDB
 /ja/docs/Web/API/WindowOrWorkerGlobalScope/isSecureContext	/ja/docs/Web/API/Window/isSecureContext
 /ja/docs/Web/API/WindowOrWorkerGlobalScope/origin	/ja/docs/Web/API/Window/origin
-/ja/docs/Web/API/WindowOrWorkerGlobalScope/setInterval	/ja/docs/Web/API/setInterval
-/ja/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout	/ja/docs/Web/API/setTimeout
-/ja/docs/Web/API/WindowTimers	/ja/docs/Web/API/setTimeout
-/ja/docs/Web/API/WindowTimers/clearInterval	/ja/docs/Web/API/clearInterval
-/ja/docs/Web/API/WindowTimers/clearTimeout	/ja/docs/Web/API/clearTimeout
-/ja/docs/Web/API/WindowTimers/setInterval	/ja/docs/Web/API/setInterval
-/ja/docs/Web/API/WindowTimers/setTimeout	/ja/docs/Web/API/setTimeout
+/ja/docs/Web/API/WindowOrWorkerGlobalScope/setInterval	/ja/docs/Web/API/Window/setInterval
+/ja/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout	/ja/docs/Web/API/Window/setTimeout
+/ja/docs/Web/API/WindowTimers	/ja/docs/Web/API/Window/setTimeout
+/ja/docs/Web/API/WindowTimers/clearInterval	/ja/docs/Web/API/Window/clearInterval
+/ja/docs/Web/API/WindowTimers/clearTimeout	/ja/docs/Web/API/Window/clearTimeout
+/ja/docs/Web/API/WindowTimers/setInterval	/ja/docs/Web/API/Window/setInterval
+/ja/docs/Web/API/WindowTimers/setTimeout	/ja/docs/Web/API/Window/setTimeout
 /ja/docs/Web/API/Worker/onerror	/ja/docs/Web/API/Worker/error_event
 /ja/docs/Web/API/Worker/onmessageerror	/ja/docs/Web/API/Worker/messageerror_event
 /ja/docs/Web/API/WorkerGlobalScope/console	/ja/docs/conflicting/Web/API/console
@@ -3255,6 +3253,8 @@
 /ja/docs/Web/API/atob	/ja/docs/Web/API/Window/atob
 /ja/docs/Web/API/btoa	/ja/docs/Web/API/Window/btoa
 /ja/docs/Web/API/caches	/ja/docs/Web/API/Window/caches
+/ja/docs/Web/API/clearInterval	/ja/docs/Web/API/Window/clearInterval
+/ja/docs/Web/API/clearTimeout	/ja/docs/Web/API/Window/clearTimeout
 /ja/docs/Web/API/console.dir	/ja/docs/Web/API/console/dir_static
 /ja/docs/Web/API/console.log	/ja/docs/Web/API/console/log_static
 /ja/docs/Web/API/console.time	/ja/docs/Web/API/console/time_static
@@ -3276,6 +3276,7 @@
 /ja/docs/Web/API/console/timeStamp	/ja/docs/Web/API/console/timeStamp_static
 /ja/docs/Web/API/console/trace	/ja/docs/Web/API/console/trace_static
 /ja/docs/Web/API/console/warn	/ja/docs/Web/API/console/warn_static
+/ja/docs/Web/API/createImageBitmap	/ja/docs/Web/API/Window/createImageBitmap
 /ja/docs/Web/API/crypto_property	/ja/docs/Web/API/Window/crypto
 /ja/docs/Web/API/document.URL	/ja/docs/Web/API/Document/URL
 /ja/docs/Web/API/document.activeElement	/ja/docs/Web/API/Document/activeElement
@@ -3378,6 +3379,8 @@
 /ja/docs/Web/API/range.intersectsNode	/ja/docs/Web/API/Range/intersectsNode
 /ja/docs/Web/API/range.setStart	/ja/docs/Web/API/Range/setStart
 /ja/docs/Web/API/reportError	/ja/docs/Web/API/Window/reportError
+/ja/docs/Web/API/setInterval	/ja/docs/Web/API/Window/setInterval
+/ja/docs/Web/API/setTimeout	/ja/docs/Web/API/Window/setTimeout
 /ja/docs/Web/API/structuredClone	/ja/docs/Web/API/Window/structuredClone
 /ja/docs/Web/API/tableRow.insertCell	/ja/docs/Web/API/HTMLTableRowElement/insertCell
 /ja/docs/Web/API/tableRow.rowIndex	/ja/docs/Web/API/HTMLTableRowElement/rowIndex
@@ -3392,8 +3395,8 @@
 /ja/docs/Web/API/window.btoa	/ja/docs/Web/API/Window/btoa
 /ja/docs/Web/API/window.cancelAnimationFrame	/ja/docs/Web/API/Window/cancelAnimationFrame
 /ja/docs/Web/API/window.captureEvents	/ja/docs/Web/API/Window/captureEvents
-/ja/docs/Web/API/window.clearInterval	/ja/docs/Web/API/clearInterval
-/ja/docs/Web/API/window.clearTimeout	/ja/docs/Web/API/clearTimeout
+/ja/docs/Web/API/window.clearInterval	/ja/docs/Web/API/Window/clearInterval
+/ja/docs/Web/API/window.clearTimeout	/ja/docs/Web/API/Window/clearTimeout
 /ja/docs/Web/API/window.close	/ja/docs/Web/API/Window/close
 /ja/docs/Web/API/window.closed	/ja/docs/Web/API/Window/closed
 /ja/docs/Web/API/window.confirm	/ja/docs/Web/API/Window/confirm
@@ -3489,8 +3492,8 @@
 /ja/docs/Web/API/window.scrollY	/ja/docs/Web/API/Window/scrollY
 /ja/docs/Web/API/window.scrollbars	/ja/docs/Web/API/Window/scrollbars
 /ja/docs/Web/API/window.self	/ja/docs/Web/API/Window/self
-/ja/docs/Web/API/window.setInterval	/ja/docs/Web/API/setInterval
-/ja/docs/Web/API/window.setTimeout	/ja/docs/Web/API/setTimeout
+/ja/docs/Web/API/window.setInterval	/ja/docs/Web/API/Window/setInterval
+/ja/docs/Web/API/window.setTimeout	/ja/docs/Web/API/Window/setTimeout
 /ja/docs/Web/API/window.showModalDialog	/ja/docs/Web/API/Window/showModalDialog
 /ja/docs/Web/API/window.sidebar	/ja/docs/Web/API/Window/external
 /ja/docs/Web/API/window.sizeToContent	/ja/docs/Web/API/Window/sizeToContent
@@ -4145,11 +4148,15 @@
 /ja/docs/Web/HTML/Supported_media_formats	/ja/docs/Web/Media/Formats
 /ja/docs/Web/HTML/Using_HTML5_audio_and_video	/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
 /ja/docs/Web/HTML/属性	/ja/docs/Web/HTML/Attributes
+/ja/docs/Web/HTTP/Basics_of_HTTP	/ja/docs/Web/HTTP
 /ja/docs/Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs	/ja/docs/Web/URI/Authority/Choosing_between_www_and_non-www_URLs
 /ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs	/ja/docs/Web/URI/Schemes/data
 /ja/docs/Web/HTTP/Basics_of_HTTP/Data_URLs	/ja/docs/Web/URI/Schemes/data
+/ja/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP	/ja/docs/Web/HTTP/Evolution_of_HTTP
 /ja/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web	/ja/docs/Web/URI
-/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types	/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types	/ja/docs/Web/HTTP/MIME_types
+/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types	/ja/docs/Web/HTTP/MIME_types/Common_types
+/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types	/ja/docs/Web/HTTP/MIME_types/Common_types
 /ja/docs/Web/HTTP/Basics_of_HTTP/Resource_URLs	/ja/docs/Web/URI/Schemes/resource
 /ja/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP)	/ja/docs/Web/HTTP/Cross-Origin_Resource_Policy
 /ja/docs/Web/HTTP/Feature_Policy	/ja/docs/Web/HTTP/Permissions_Policy
@@ -4192,7 +4199,7 @@
 /ja/docs/Web/HTTP/Headers/Feature-Policy/sync-xhr	/ja/docs/Web/HTTP/Headers/Permissions-Policy
 /ja/docs/Web/HTTP/Headers/Feature-Policy/vr	/ja/docs/Web/HTTP/Headers/Permissions-Policy/xr-spatial-tracking
 /ja/docs/Web/HTTP/Headers/Feature-Policy/web-share	/ja/docs/Web/HTTP/Headers/Permissions-Policy/web-share
-/ja/docs/Web/HTTP/Headers/Feature-Policy/xr	/ja/docs/conflicting/Web/HTTP/Headers/Feature-Policy/xr-spatial-tracking
+/ja/docs/Web/HTTP/Headers/Feature-Policy/xr	/ja/docs/Web/HTTP/Headers/Permissions-Policy/xr-spatial-tracking
 /ja/docs/Web/HTTP/Headers/Feature-Policy/xr-spatial-tracking	/ja/docs/Web/HTTP/Headers/Permissions-Policy/xr-spatial-tracking
 /ja/docs/Web/HTTP/Headers/Permissions-Policy/battery	/ja/docs/Web/HTTP/Headers/Permissions-Policy
 /ja/docs/Web/HTTP/Headers/Set-Cookie2	/ja/docs/Web/HTTP/Headers/Set-Cookie
@@ -4200,7 +4207,7 @@
 /ja/docs/Web/HTTP/Link_prefetching_FAQ	/ja/docs/Glossary/Prefetch
 /ja/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file	/ja/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_PAC_file
 /ja/docs/Web/HTTP/Public_Key_Pinning	/ja/docs/conflicting/Web/Security/Certificate_Transparency
-/ja/docs/Web/HTTP/Resources_and_URIs	/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types
+/ja/docs/Web/HTTP/Resources_and_URIs	/ja/docs/Web/HTTP/MIME_types
 /ja/docs/Web/HTTP/Response_codes	/ja/docs/Web/HTTP/Status
 /ja/docs/Web/HTTP/Response_codes/204	/ja/docs/Web/HTTP/Status/204
 /ja/docs/Web/HTTP/Server-Side_Access_Control	/ja/docs/Web/HTTP/CORS
@@ -4701,6 +4708,7 @@
 /ja/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Resources	/ja/docs/Web/API/XSLTProcessor
 /ja/docs/Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Setting_Parameters	/ja/docs/Web/API/XSLTProcessor
 /ja/docs/Web/XSLT/Transforming_XML_with_XSLT/Resources	/ja/docs/Web/XSLT/Transforming_XML_with_XSLT
+/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference	/ja/docs/Web/XSLT/Transforming_XML_with_XSLT
 /ja/docs/Web/XSLT/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations	/ja/docs/Web/API/XSLTProcessor
 /ja/docs/Web/XSLT/XSLT_JS_interface_in_Gecko	/ja/docs/Web/API/XSLTProcessor
 /ja/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/Advanced_Example	/ja/docs/Web/API/XSLTProcessor
@@ -4892,7 +4900,7 @@
 /ja/docs/XSLT/Transforming_XML_with_XSLT/An_Overview	/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/An_Overview
 /ja/docs/XSLT/Transforming_XML_with_XSLT/For_Further_Reading	/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/For_Further_Reading
 /ja/docs/XSLT/Transforming_XML_with_XSLT/Resources	/ja/docs/Web/XSLT/Transforming_XML_with_XSLT
-/ja/docs/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference	/ja/docs/Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference
+/ja/docs/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference	/ja/docs/Web/XSLT/Transforming_XML_with_XSLT
 /ja/docs/XSLT/Using_the_Mozilla_JavaScript_interface_to_XSL_Transformations	/ja/docs/Web/API/XSLTProcessor
 /ja/docs/XSLT/value-of	/ja/docs/Web/XSLT/Element/value-of
 /ja/docs/XSLT:Elements	/ja/docs/Web/XSLT/Element
@@ -5202,8 +5210,8 @@
 /ja/docs/toSource	/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/toString
 /ja/docs/toString	/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/toString
 /ja/docs/width	/ja/docs/Web/CSS/width
-/ja/docs/window.clearInterval	/ja/docs/Web/API/clearInterval
+/ja/docs/window.clearInterval	/ja/docs/Web/API/Window/clearInterval
 /ja/docs/window.screenY	/ja/docs/Web/API/Window/screenY
 /ja/docs/window.scrollMaxY	/ja/docs/Web/API/Window/scrollMaxY
-/ja/docs/window.setInterval	/ja/docs/Web/API/setInterval
+/ja/docs/window.setInterval	/ja/docs/Web/API/Window/setInterval
 /ja/docs/メインページ	/ja/docs/Web
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index cd2c352fa5268f..6b4d1590f430b3 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -13890,6 +13890,31 @@
     "modified": "2019-03-23T23:52:28.151Z",
     "contributors": ["fscholz", "AshfaqHossain", "ethertank", "Potappo"]
   },
+  "Web/API/Window/clearInterval": {
+    "modified": "2019-03-23T23:49:51.484Z",
+    "contributors": [
+      ".Hiroya",
+      "fscholz",
+      "khalid32",
+      "teoli",
+      "ethertank",
+      "Marsf",
+      "Mgjbot",
+      "Hfjapancom"
+    ]
+  },
+  "Web/API/Window/clearTimeout": {
+    "modified": "2020-10-15T21:16:17.778Z",
+    "contributors": [
+      "mfuji09",
+      ".Hiroya",
+      "mushahiroyuki",
+      "fscholz",
+      "jsx",
+      "ethertank",
+      "Potappo"
+    ]
+  },
   "Web/API/Window/close": {
     "modified": "2020-10-15T21:16:53.403Z",
     "contributors": [
@@ -13927,6 +13952,10 @@
     "modified": "2020-10-15T22:27:12.990Z",
     "contributors": ["mfuji09"]
   },
+  "Web/API/Window/createImageBitmap": {
+    "modified": "2020-10-15T22:34:31.000Z",
+    "contributors": ["silverskyvicto"]
+  },
   "Web/API/Window/crypto": {
     "modified": "2020-10-15T21:16:38.249Z",
     "contributors": [
@@ -14518,6 +14547,41 @@
     "modified": "2019-10-26T12:13:09.011Z",
     "contributors": ["Uemmra3", "yyss"]
   },
+  "Web/API/Window/setInterval": {
+    "modified": "2020-10-15T21:15:06.280Z",
+    "contributors": [
+      "Potappo",
+      "yyss",
+      "mushahiroyuki",
+      "teoli",
+      "jsx",
+      "ethertank",
+      "Ceth",
+      "Shoot",
+      "Marsf",
+      "Okome",
+      "Taken",
+      "Mgjbot",
+      "Hfjapancom"
+    ]
+  },
+  "Web/API/Window/setTimeout": {
+    "modified": "2020-10-15T21:15:57.322Z",
+    "contributors": [
+      "mfuji09",
+      "yyss",
+      "hamasaki",
+      "teoli",
+      "AshfaqHossain",
+      "ethertank",
+      "dextra",
+      "Ceth",
+      "Shoot",
+      "Marsf",
+      "Mgjbot",
+      "Hfjapancom"
+    ]
+  },
   "Web/API/Window/showModalDialog": {
     "modified": "2019-08-18T18:14:25.207Z",
     "contributors": [
@@ -15059,31 +15123,6 @@
     "modified": "2020-04-13T14:03:23.203Z",
     "contributors": ["mfuji09", "Marsf"]
   },
-  "Web/API/clearInterval": {
-    "modified": "2019-03-23T23:49:51.484Z",
-    "contributors": [
-      ".Hiroya",
-      "fscholz",
-      "khalid32",
-      "teoli",
-      "ethertank",
-      "Marsf",
-      "Mgjbot",
-      "Hfjapancom"
-    ]
-  },
-  "Web/API/clearTimeout": {
-    "modified": "2020-10-15T21:16:17.778Z",
-    "contributors": [
-      "mfuji09",
-      ".Hiroya",
-      "mushahiroyuki",
-      "fscholz",
-      "jsx",
-      "ethertank",
-      "Potappo"
-    ]
-  },
   "Web/API/console": {
     "modified": "2020-10-15T21:08:48.807Z",
     "contributors": [
@@ -15161,45 +15200,6 @@
     "modified": "2019-03-23T22:34:47.743Z",
     "contributors": ["yyss"]
   },
-  "Web/API/createImageBitmap": {
-    "modified": "2020-10-15T22:34:31.000Z",
-    "contributors": ["silverskyvicto"]
-  },
-  "Web/API/setInterval": {
-    "modified": "2020-10-15T21:15:06.280Z",
-    "contributors": [
-      "Potappo",
-      "yyss",
-      "mushahiroyuki",
-      "teoli",
-      "jsx",
-      "ethertank",
-      "Ceth",
-      "Shoot",
-      "Marsf",
-      "Okome",
-      "Taken",
-      "Mgjbot",
-      "Hfjapancom"
-    ]
-  },
-  "Web/API/setTimeout": {
-    "modified": "2020-10-15T21:15:57.322Z",
-    "contributors": [
-      "mfuji09",
-      "yyss",
-      "hamasaki",
-      "teoli",
-      "AshfaqHossain",
-      "ethertank",
-      "dextra",
-      "Ceth",
-      "Shoot",
-      "Marsf",
-      "Mgjbot",
-      "Hfjapancom"
-    ]
-  },
   "Web/API/treeWalker": {
     "modified": "2020-10-15T21:21:02.292Z",
     "contributors": ["yyss", "xuancanh", "ethertank"]
@@ -21368,22 +21368,6 @@
     "modified": "2020-07-07T14:27:04.565Z",
     "contributors": ["mfuji09", "Uemmra3", "silverskyvicto"]
   },
-  "Web/HTTP/Basics_of_HTTP": {
-    "modified": "2019-11-23T23:17:48.338Z",
-    "contributors": ["mfuji09", "silverskyvicto", "cissoid"]
-  },
-  "Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP": {
-    "modified": "2020-09-25T15:03:35.377Z",
-    "contributors": ["mfuji09", "silverskyvicto", "yyss"]
-  },
-  "Web/HTTP/Basics_of_HTTP/MIME_types": {
-    "modified": "2020-07-24T02:39:26.659Z",
-    "contributors": ["pcw", "mfuji09", "nekottyo", "silverskyvicto", "yyss"]
-  },
-  "Web/HTTP/Basics_of_HTTP/MIME_types/Common_types": {
-    "modified": "2020-05-15T22:15:38.965Z",
-    "contributors": ["mfuji09", "chrisdavidmills", "silverskyvicto", "yyss"]
-  },
   "Web/HTTP/Browser_detection_using_the_user_agent": {
     "modified": "2020-11-12T13:14:23.994Z",
     "contributors": ["mfuji09", "negibokken", "silverskyvicto", "karaage-kun"]
@@ -21555,6 +21539,10 @@
     "modified": "2020-10-15T22:27:25.103Z",
     "contributors": ["mfuji09", "Potappo", "shisama", "53able"]
   },
+  "Web/HTTP/Evolution_of_HTTP": {
+    "modified": "2020-09-25T15:03:35.377Z",
+    "contributors": ["mfuji09", "silverskyvicto", "yyss"]
+  },
   "Web/HTTP/Headers": {
     "modified": "2020-04-10T02:46:53.832Z",
     "contributors": ["mfuji09", "ycrack", "yyss", "hamasaki"]
@@ -22060,6 +22048,14 @@
     "modified": "2020-10-15T22:05:39.038Z",
     "contributors": ["mfuji09", "pcw", "kurimaru"]
   },
+  "Web/HTTP/MIME_types": {
+    "modified": "2020-07-24T02:39:26.659Z",
+    "contributors": ["pcw", "mfuji09", "nekottyo", "silverskyvicto", "yyss"]
+  },
+  "Web/HTTP/MIME_types/Common_types": {
+    "modified": "2020-05-15T22:15:38.965Z",
+    "contributors": ["mfuji09", "chrisdavidmills", "silverskyvicto", "yyss"]
+  },
   "Web/HTTP/Messages": {
     "modified": "2020-07-11T01:20:50.882Z",
     "contributors": ["mfuji09", "yyss"]
@@ -29889,10 +29885,6 @@
     "modified": "2019-03-18T20:50:35.199Z",
     "contributors": ["mfuji09", "silverskyvicto"]
   },
-  "Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference": {
-    "modified": "2019-03-18T20:50:35.595Z",
-    "contributors": ["mfuji09", "ExE-Boss", "silverskyvicto", "Mgjbot", "Okome"]
-  },
   "WebAssembly": {
     "modified": "2020-10-15T21:52:54.116Z",
     "contributors": ["mfuji09", "mosh", "ukyo", "silverskyvicto", "dskmori"]
@@ -30296,10 +30288,6 @@
     "modified": "2020-11-30T10:28:22.488Z",
     "contributors": ["chrisdavidmills", "mfuji09", "inkusu"]
   },
-  "conflicting/Web/HTTP/Headers/Feature-Policy/xr-spatial-tracking": {
-    "modified": "2020-08-12T12:42:41.854Z",
-    "contributors": ["mfuji09", "tamura4278"]
-  },
   "conflicting/Web/JavaScript/Inheritance_and_the_prototype_chain": {
     "modified": "2020-10-21T02:00:03.457Z",
     "contributors": [
@@ -30354,10 +30342,6 @@
     "modified": "2020-10-15T21:36:10.884Z",
     "contributors": ["mfuji09", "silverskyvicto", "hashedhyphen", "clariroid"]
   },
-  "conflicting/Web/XSLT/Transforming_XML_with_XSLT": {
-    "modified": "2019-03-18T20:50:34.704Z",
-    "contributors": ["mfuji09", "silverskyvicto"]
-  },
   "orphaned/Code_snippets/Toolbar": {
     "modified": "2019-03-23T23:46:21.932Z",
     "contributors": ["teoli", "Mgjbot", "Shimono"]
diff --git a/files/ja/mozilla/firefox/releases/128/index.md b/files/ja/mozilla/firefox/releases/128/index.md
index c665e86e7c7931..049e954fff4c82 100644
--- a/files/ja/mozilla/firefox/releases/128/index.md
+++ b/files/ja/mozilla/firefox/releases/128/index.md
@@ -50,7 +50,7 @@ l10n:
 - {{domxref('MediaKeys.getStatusForPolicy()')}} をサポートしました。DRM で保護されたコンテンツを復号するために使用する CDM モジュールが、システムでサポートされる [High-bandwidth Digital Content Protection (HDCP)](https://en.wikipedia.org/wiki/High-bandwidth_Digital_Content_Protection) バージョンのような指定されたポリシー要件に基づく "仮想" キーに暗号化されたメディアの提示を許可するかを確認します。
   これは最適な解像度での再生が許可されるかを、メディアキーセッションを作成したり実際のライセンスを取得したりする必要なく事前に知るためのシンプルな仕組みをアプリケーションに提供します ([Firefox bug 1878714](https://bugzil.la/1878714))。
 - {{domxref('RTCRtpTransceiver.setCodecPreferences()')}} をサポートしました。WebRTC のローカルピアが受信したデータをデコードするために使用できるコーデックを、好みの順番で設定します。ウェブアプリケーションは、リモートピアに好みのコーデックを選択させたり、(再送信、冗長化、前方誤り訂正に使用するものを含む) 特定のコーデックのネゴシエーションを無効にしたりするためにこのメソッドを使用できます ([Firefox bug 1396922](https://bugzil.la/1396922))。
-- {{domxref('ShadowRoot.getHTML()')}}、{{domxref('Element.getHTML()')}} メソッド、およびこれらに関連する {{domxref('ShadowRoot.serializable')}}、{{domxref('HTMLTemplateElement.shadowRootSerializable')}} プロパティを含む、[宣言的なシャドウ DOM](/ja/docs/Web/API/Web_components/Using_shadow_DOM#declaratively_with_html) のシリアライズをサポートしました。
+- {{domxref('ShadowRoot.getHTML()')}}、{{domxref('Element.getHTML()')}} メソッド、およびこれらに関連する {{domxref('ShadowRoot.serializable')}}、{{domxref('HTMLTemplateElement.shadowRootSerializable')}} プロパティを含む、[宣言的なシャドウ DOM](/ja/docs/Web/API/Web_components/Using_shadow_DOM#html_で宣言的に) のシリアライズをサポートしました。
 - [`CSSPropertyRule`](/ja/docs/Web/API/CSSPropertyRule) インターフェイスをデフォルトで有効にして、CSS の [`@property`](/ja/docs/Web/CSS/@property) アットルールを表すようになりました。このインターフェイスは [`name`](/ja/docs/Web/API/CSSPropertyRule/name)、[`syntax`](/ja/docs/Web/API/CSSPropertyRule/syntax)、[`inherits`](/ja/docs/Web/API/CSSPropertyRule/inherits)、[`initialValue`](/ja/docs/Web/API/CSSPropertyRule/initialvalue) のような、`@property` アットルールを使用して定義した CSS カスタムプロパティの値を取得できます ([Firefox bug 1864818](https://bugzil.la/1864818))。
 - [`registerProperty()`](/ja/docs/Web/API/CSS/registerProperty_static) メソッドをデフォルトで有効にしました。JavaScript で [CSS カスタムプロパティ](/ja/docs/Web/CSS/--*) を定義できます。これは、CSS の `@property` アットルールを使用することに似ています ([Firefox bug 1864818](https://bugzil.la/1864818))。
 
diff --git a/files/ja/mozilla/firefox/releases/130/index.md b/files/ja/mozilla/firefox/releases/130/index.md
index c8dda68123f7cf..a7152e63610e5b 100644
--- a/files/ja/mozilla/firefox/releases/130/index.md
+++ b/files/ja/mozilla/firefox/releases/130/index.md
@@ -14,7 +14,7 @@ l10n:
 ### HTML
 
 - `<details>` 要素の [`name`](/ja/docs/Web/HTML/Element/details#name) 属性で、`<details>` 要素のグループ化が可能になりました。グループの中で同時にひとつの要素だけを開くことができます。これにより、JavaScript を使用せずに排他的なアコーディオンを作成できます ([Firefox bug 1856460](https://bugzil.la/1856460)、[Firefox bug 1909613](https://bugzil.la/1909613))。
-- [シャドウ DOM](/ja/docs/Web/API/Web_components/Using_shadow_DOM#attribute_inheritance) における動作など、[`dir`](/ja/docs/Web/HTML/Global_attributes/dir) および [`lang`](/ja/docs/Web/HTML/Global_attributes/lang) [グローバル属性](/ja/docs/Web/HTML/Global_attributes) の継承を改良しました ([Firefox bug 1876163](https://bugzil.la/1876163))。
+- [シャドウ DOM](/ja/docs/Web/API/Web_components/Using_shadow_DOM#属性の継承) における動作など、[`dir`](/ja/docs/Web/HTML/Global_attributes/dir) および [`lang`](/ja/docs/Web/HTML/Global_attributes/lang) [グローバル属性](/ja/docs/Web/HTML/Global_attributes) の継承を改良しました ([Firefox bug 1876163](https://bugzil.la/1876163))。
 
 ### CSS
 
diff --git a/files/ja/web/api/htmltemplateelement/index.md b/files/ja/web/api/htmltemplateelement/index.md
index 6d88edbdb3145e..5f5b5453354c82 100644
--- a/files/ja/web/api/htmltemplateelement/index.md
+++ b/files/ja/web/api/htmltemplateelement/index.md
@@ -2,13 +2,18 @@
 title: HTMLTemplateElement
 slug: Web/API/HTMLTemplateElement
 l10n:
-  sourceCommit: 387d0d4d8690c0d2c9db1b85eae28ffea0f3ac1f
+  sourceCommit: d16706e4e930c57161d473287374a9286c663147
 ---
 
 {{APIRef("Web Components")}}
 
 `HTMLTemplateElement` インターフェイスは、HTML の {{HTMLElement("template")}} 要素の内容にアクセスできるようにします。
 
+> [!NOTE]
+> HTML パーサーは、{{HTMLElement("template")}} 要素を構文解析する際に、その `<template>` 属性に応じて、`HTMLTemplateElement` または {{domxref("ShadowRoot")}} のどちらかを生成する可能性があります。
+> `HTMLTemplateElement` が作成されると、"shadow" 属性がテンプレートから反映されます。
+> しかし、これらは有用ではありません。`HTMLTemplateElement` はシャドウルートではなく、シャドウルートに変更することができないからです。
+
 {{InheritanceDiagram}}
 
 ## インスタンスプロパティ
@@ -17,6 +22,14 @@ _このインターフェイスには {{domxref("HTMLElement")}} から継承し
 
 - {{domxref("HTMLTemplateElement.content", "content")}} {{ReadOnlyInline}}
   - : 読み取り専用の {{domxref("DocumentFragment")}} で、 {{HTMLElement("template")}} 要素のテンプレートの内容を表す DOM サブツリーを返します。
+- {{domxref("HTMLTemplateElement.shadowRootMode", "shadowRootMode")}}
+  - : 文字列で、関連付けられた `<template>` 要素の [`shadowrootmode`](/ja/docs/Web/HTML/Element/template#shadowrootmode) 属性の値を反映します。
+- {{domxref("HTMLTemplateElement.shadowRootDelegatesFocus", "shadowRootDelegatesFocus")}}
+  - : 論理値で、関連付けられた `<template>` 要素の [`shadowrootdelegatesfocus`](/ja/docs/Web/HTML/Element/template#shadowrootdelegatesfocus) 属性の値を反映します。
+- {{domxref("HTMLTemplateElement.shadowRootClonable", "shadowRootClonable")}}
+  - : 論理値で、関連付けられた `<template>` 要素の [`shadowrootclonable`](/ja/docs/Web/HTML/Element/template#shadowrootclonable) 属性の値を反映します。
+- {{domxref("HTMLTemplateElement.shadowRootSerializable", "shadowRootSerializable")}}
+  - : 論理値で、関連付けられた `<template>` 要素の [`shadowrootserializable`](/ja/docs/Web/HTML/Element/template#shadowrootserializable) 属性の値を反映します。
 
 ## インスタンスメソッド
 
diff --git a/files/ja/web/api/htmltemplateelement/shadowrootclonable/index.md b/files/ja/web/api/htmltemplateelement/shadowrootclonable/index.md
new file mode 100644
index 00000000000000..b46ecb04ca3541
--- /dev/null
+++ b/files/ja/web/api/htmltemplateelement/shadowrootclonable/index.md
@@ -0,0 +1,32 @@
+---
+title: "HTMLTemplateElement: shadowRootClonable プロパティ"
+short-title: shadowRootClonable
+slug: Web/API/HTMLTemplateElement/shadowRootClonable
+l10n:
+  sourceCommit: 26091e4af9c73bb6c5d1466df5070c949498fdbd
+---
+
+{{APIRef("Web Components")}}
+
+**`shadowRootClonable`** プロパティは、関連付けられた [`<template>`](/ja/docs/Web/HTML/Element/template) 要素の [`shadowrootclonable`](/ja/docs/Web/HTML/Element/template#shadowrootclonable) 属性の値を反映します。
+
+このプロパティは開発者にとって有用ではないことに注意してください。
+`<template>` 要素を使用して宣言的に [`ShadowRoot`](/ja/docs/Web/API/ShadowRoot) を作成する場合は、このオブジェクトおよびプロパティは存在しません。
+それ以外の場合、`HTMLTemplateElement` が作成された場合は、オブジェクトがシャドウルートではないため、このプロパティの値は無関係であり、シャドウルートに変更することはできません。
+
+## 値
+
+関連付けられた [`<template>`](/ja/docs/Web/HTML/Element/template) 要素の [`shadowrootclonable`](/ja/docs/Web/HTML/Element/template#shadowrootclonable) 属性の値を反映します。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [`shadowrootclonable`](/ja/docs/Web/HTML/Element/template#shadowrootclonable)（`<template>` 要素の属性）
+- [`ShadowRoot.clonable`](/ja/docs/Web/API/ShadowRoot/clonable)
diff --git a/files/ja/web/api/htmltemplateelement/shadowrootdelegatesfocus/index.md b/files/ja/web/api/htmltemplateelement/shadowrootdelegatesfocus/index.md
new file mode 100644
index 00000000000000..31226361dd02d8
--- /dev/null
+++ b/files/ja/web/api/htmltemplateelement/shadowrootdelegatesfocus/index.md
@@ -0,0 +1,32 @@
+---
+title: "HTMLTemplateElement: shadowRootDelegatesFocus プロパティ"
+short-title: shadowRootDelegatesFocus
+slug: Web/API/HTMLTemplateElement/shadowRootDelegatesFocus
+l10n:
+  sourceCommit: 26091e4af9c73bb6c5d1466df5070c949498fdbd
+---
+
+{{APIRef("Web Components")}}
+
+**`shadowRootDelegatesFocus`** は {{domxref("HTMLTemplateElement")}} インターフェイスのプロパティで、関連付けられた [`<template>`](/ja/docs/Web/HTML/Element/template) 要素の [`shadowrootdelegatesfocus`](/ja/docs/Web/HTML/Element/template#shadowrootdelegatesfocus) 属性の値を反映します。
+
+このプロパティは開発者にとって有用ではないことに注意してください。
+`<template>` 要素を使用して宣言的に [`ShadowRoot`](/ja/docs/Web/API/ShadowRoot) を作成する場合は、このオブジェクトおよびプロパティは存在しません。
+それ以外の場合、`HTMLTemplateElement` が作成された場合は、オブジェクトがシャドウルートではないため、このプロパティの値は無関係であり、シャドウルートに変更することはできません。
+
+## 値
+
+関連付けられた [`<template>`](/ja/docs/Web/HTML/Element/template) 要素の [`shadowrootdelegatesfocus`](/ja/docs/Web/HTML/Element/template#shadowrootdelegatesfocus) 属性の値を反映します。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [`shadowrootdelegatesfocus`](/ja/docs/Web/HTML/Element/template#shadowrootdelegatesfocus)（`<template>` 要素の属性）
+- [`ShadowRoot.delegatesFocus`](/ja/docs/Web/API/ShadowRoot/delegatesFocus)
diff --git a/files/ja/web/api/htmltemplateelement/shadowrootmode/index.md b/files/ja/web/api/htmltemplateelement/shadowrootmode/index.md
new file mode 100644
index 00000000000000..d81bdedca424c7
--- /dev/null
+++ b/files/ja/web/api/htmltemplateelement/shadowrootmode/index.md
@@ -0,0 +1,32 @@
+---
+title: "HTMLTemplateElement: shadowRootMode プロパティ"
+short-title: shadowRootMode
+slug: Web/API/HTMLTemplateElement/shadowRootMode
+l10n:
+  sourceCommit: 26091e4af9c73bb6c5d1466df5070c949498fdbd
+---
+
+{{APIRef("Web Components")}}
+
+**`shadowRootMode`** は {{domxref("HTMLTemplateElement")}} インターフェイスのプロパティで、関連付けられた [`<template>`](/ja/docs/Web/HTML/Element/template) 要素の [`shadowrootmode`](/ja/docs/Web/HTML/Element/template#shadowrootmode) 属性の値を反映します。
+
+このプロパティは開発者にとって有用ではないことに注意してください。
+`<template>` 要素を使用して宣言的に [`ShadowRoot`](/ja/docs/Web/API/ShadowRoot) を作成する場合は、このオブジェクトおよびプロパティは存在しません。
+それ以外の場合、`HTMLTemplateElement` が作成された場合は、オブジェクトがシャドウルートではないため、このプロパティの値は無関係であり、シャドウルートに変更することはできません。
+
+## 値
+
+関連付けられた [`<template>`](/ja/docs/Web/HTML/Element/template) 要素の [`shadowrootmode`](/ja/docs/Web/HTML/Element/template#shadowrootmode) 属性の値を反映します。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [`shadowrootmode`](/ja/docs/Web/HTML/Element/template#shadowrootmode)（`<template>` 要素の属性）
+- [`ShadowRoot.mode`](/ja/docs/Web/API/ShadowRoot/mode)
diff --git a/files/ja/web/api/htmltemplateelement/shadowrootserializable/index.md b/files/ja/web/api/htmltemplateelement/shadowrootserializable/index.md
new file mode 100644
index 00000000000000..bc48432baa3ae8
--- /dev/null
+++ b/files/ja/web/api/htmltemplateelement/shadowrootserializable/index.md
@@ -0,0 +1,32 @@
+---
+title: "HTMLTemplateElement: shadowRootSerializable プロパティ"
+short-title: shadowRootSerializable
+slug: Web/API/HTMLTemplateElement/shadowRootSerializable
+l10n:
+  sourceCommit: b9e02b32080fc4e079ed3d0e1ae003cab3b770ad
+---
+
+{{APIRef("Web Components")}}
+
+**`shadowRootSerializable`** プロパティは、関連付けられた [`<template>`](/ja/docs/Web/HTML/Element/template) 要素の [`shadowrootserializable`](/ja/docs/Web/HTML/Element/template#shadowrootserializable) 属性の値を反映します。
+
+このプロパティは開発者にとって有用ではないことに注意してください。
+`<template>` 要素を使用して宣言的に [`ShadowRoot`](/ja/docs/Web/API/ShadowRoot) を作成する場合は、このオブジェクトおよびプロパティは存在しません。
+それ以外の場合、`HTMLTemplateElement` が作成された場合は、オブジェクトがシャドウルートではないため、このプロパティの値は無関係であり、シャドウルートに変更することはできません。
+
+## 値
+
+関連付けられた [`<template>`](/ja/docs/Web/HTML/Element/template) 要素の [`shadowrootserializable`](/ja/docs/Web/HTML/Element/template#shadowrootserializable) 属性の値を反映します。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [`shadowrootserializable`](/ja/docs/Web/HTML/Element/template#shadowrootserializable)（`<template>` 要素の属性）
+- [`ShadowRoot.serializable`](/ja/docs/Web/API/ShadowRoot/serializable)
diff --git a/files/ja/web/api/shadowroot/adoptedstylesheets/index.md b/files/ja/web/api/shadowroot/adoptedstylesheets/index.md
new file mode 100644
index 00000000000000..e6104bba95493c
--- /dev/null
+++ b/files/ja/web/api/shadowroot/adoptedstylesheets/index.md
@@ -0,0 +1,92 @@
+---
+title: "ShadowRoot: adoptedStyleSheets プロパティ"
+short-title: adoptedStyleSheets
+slug: Web/API/ShadowRoot/adoptedStyleSheets
+l10n:
+  sourceCommit: 4f35a8237ee0842beb9cfef3354e05464ad7ce1a
+---
+
+{{APIRef("CSSOM")}}
+
+**`adoptedStyleSheets`** は {{domxref("ShadowRoot")}} インターフェイスのプロパティで、構築されたスタイルシートの配列を設定し、シャドウ DOM サブツリーで使用します。
+
+> [!NOTE]
+> 構築されたスタイルシートは、[`CSSStyleSheet()` コンストラクター](/ja/docs/Web/API/CSSStyleSheet/CSSStyleSheet)を使用してプログラムで作成されたスタイルシートです（ユーザーエージェントがスクリプトからスタイルシートをインポートする際に作成するスタイルシート、{{HTMLElement('style')}} と {{CSSXref('@import')}} を使用してインポートするスタイルシート、または {{HTMLElement('link')}} を使用してリンクするスタイルシートと比較すると）。
+
+このスタイルシートは、複数の {{domxref("ShadowRoot")}} インスタンスや、親文書にも（ {{domxref("Document.adoptedStyleSheets")}} プロパティを使用して）適用することができます。
+適用されたスタイルシートを変更すると、適用されたすべてのオブジェクトに影響します。
+
+`adoptedStyleSheets` プロパティ内のスタイルシートは、シャドウ DOM の他のスタイルシートとともに考慮されます。
+そのため、最終的な計算結果の CSS を決定する目的では、シャドウ DOM 内の他のスタイルシート ([`ShadowRoot.styleSheets`](/ja/docs/Web/API/ShadowRoot/styleSheets)) の後に追加されたものとみなされます。
+
+[`CSSStyleSheet()` コンストラクター](/ja/docs/Web/API/CSSStyleSheet/CSSStyleSheet)を使用して作成し、シャドウルートと同じ親文書 ({{domxref("Document")}}) 内のもののみ、このスタイルシートを適用することができます。
+
+## 値
+
+値は {{domxref("CSSStyleSheet")}} インスタンスの配列であり、シャドウルートの親文書 ({{domxref("Document")}}) のコンテキスト内で {{domxref("CSSStyleSheet.CSSStyleSheet()", "CSSStyleSheet()")}} コンストラクターを使用して作成されたものでなければなりません。
+
+配列を変更する必要がある場合は、その場で変更する `push()` のような方法を使用します。{{domxref("CSSStyleSheet")}} インスタンス自体も変更することができ、この変更は、このスタイルシートが採用されている場所すべてに適用されます。
+
+仕様書の以前のバージョンでは、配列は変更することができなかったため、新しいスタイルシートを追加する唯一の方法は、`adoptedStyleSheets` に新しい配列を割り当てることでした。
+
+## 例
+
+### スタイルシートの適用
+
+下記のコードでは、最初のスタイルシートが構築され、その後、{{domxref("CSSStyleSheet.replaceSync()")}} が呼び出されて、シートにルールが追加されます。
+
+```js
+// 空の「構築された」スタイルシートを作成
+const sheet = new CSSStyleSheet();
+// シートにルールを適用
+sheet.replaceSync("a { color: red; }");
+```
+
+次に {{domxref("ShadowRoot")}} を作成し、シートオブジェクトを配列内の `adoptedStyleSheets` に渡します。
+
+```js
+// 文書内の要素を作成し、次にシャドウルートを作成
+const node = document.createElement("div");
+const shadow = node.attachShadow({ mode: "open" });
+
+// シートをシャドウ DOM に適用
+shadow.adoptedStyleSheets = [sheet];
+```
+
+このスタイルシートは、配列に追加した後でも変更することができます。
+次の例では、{{domxref("CSSStyleSheet.insertRule()")}} を使用して、同じスタイルシートに新しいルールを追加しています。
+
+```js
+sheet.insertRule("* { background-color: blue; }");
+// The document will now have blue background.
+```
+
+### 新しいスタイルシートの追加
+
+`adoptedStyleSheets.push()` を使用することで、新しいスタイルシートを文書またはシャドウルートに追加することができます。
+
+```js
+const extraSheet = new CSSStyleSheet();
+extraSheet.replaceSync("p { color: green; }");
+
+// 新しいシートに結合する
+shadow.adoptedStyleSheets.push(extraSheet);
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [Constructable Stylesheets](https://web.dev/articles/constructable-stylesheets) (web.dev)
+- [シャドウ DOM の使用](/ja/docs/Web/API/Web_components/Using_shadow_DOM)
+- [`CSSStyleSheet()` コンストラクター](/ja/docs/Web/API/CSSStyleSheet/CSSStyleSheet)
+- {{domxref("CSSStyleSheet.replaceSync()")}}
+- {{domxref("CSSStyleSheet.replace()")}}
+- {{domxref("CSSStyleSheet.insertRule()")}}
+- {{domxref("CSSStyleSheet.deleteRule()")}}
diff --git a/files/ja/web/api/shadowroot/clonable/index.md b/files/ja/web/api/shadowroot/clonable/index.md
new file mode 100644
index 00000000000000..7aac326113b640
--- /dev/null
+++ b/files/ja/web/api/shadowroot/clonable/index.md
@@ -0,0 +1,41 @@
+---
+title: "ShadowRoot: clonable プロパティ"
+short-title: clonable
+slug: Web/API/ShadowRoot/clonable
+l10n:
+  sourceCommit: 26091e4af9c73bb6c5d1466df5070c949498fdbd
+---
+
+{{APIRef("Shadow DOM")}}
+
+**`clonable`** は {{domxref("ShadowRoot")}} インターフェイスの読み取り専用プロパティで、シャドウルートが複製可能であれば `true` を返し、そうでなければ `false` を返します。
+
+値が `true` の場合、{{domxref("Node.cloneNode()")}} または {{domxref("Document.importNode()")}} で複製されたシャドウホストにはシャドウルートのコピーが含まれます。
+
+既定値は `false` です。
+`true` に設定するには、{{domxref("Element.attachShadow()")}} メソッドの `clonable` オプションを使用するか、またはシャドウルートを宣言的に関連付ける使用される `<template>` 要素の [`shadowrootclonable`](/ja/docs/Web/HTML/Element/template#shadowrootclonable) 属性を設定します。
+
+## 値
+
+シャドウルートが複製可能であれば `true`、そうでなければ `false` です。
+
+## 例
+
+```js
+const host = document.createElement("div");
+const shadowRoot = host.attachShadow({
+  mode: "open",
+  clonable: true,
+});
+
+shadowRoot.clonable;
+// true
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/shadowroot/delegatesfocus/index.md b/files/ja/web/api/shadowroot/delegatesfocus/index.md
index 3283d521ff23d1..9ae871c425b859 100644
--- a/files/ja/web/api/shadowroot/delegatesfocus/index.md
+++ b/files/ja/web/api/shadowroot/delegatesfocus/index.md
@@ -1,28 +1,39 @@
 ---
-title: ShadowRoot.delegatesFocus
+title: "ShadowRoot: delegatesFocus プロパティ"
+short-title: delegatesFocus
 slug: Web/API/ShadowRoot/delegatesFocus
+l10n:
+  sourceCommit: 26091e4af9c73bb6c5d1466df5070c949498fdbd
 ---
 
 {{APIRef("Shadow DOM")}}
 
 **`delegatesFocus`** は {{domxref("ShadowRoot")}} インターフェイスの読み取り専用プロパティで、シャドウルートがフォーカスを委任する場合は `true`、そうでなければ `false` を返します。
 
-`true` の場合、シャドウ DOM のフォーカスを受け取れない部分がクリックさると、フォーカスを受け取ることができる最初の部分がフォーカスを受け取り、シャドウホストが `:focus` のスタイルになります。
+`true` の場合、シャドウ DOM のフォーカスを受け取れない部分がクリックされるか、ホスト要素に対して `.focus()` が呼び出されると、フォーカスを受け取ることができる最初の部分がフォーカスを受け取り、シャドウホストが `:focus` のスタイルになります。
 
-このプロパティの値は {{domxref("Element.attachShadow()")}}) に渡されたオブジェクトの `delegatesFocus` プロパティを使用して設定します。
+キーボードのユーザー（スクリーンリーダーを使用するユーザーも含む）にとっては、フォーカスが特に重要です。 `delegatesFocus` の既定の動作は、最初のフォーカス可能な要素にフォーカスを当てるというものです。これは、その要素がタブ順序の一部として意図されていない場合（例えば、`tabindex="-1"` の要素）や、より「重要な」フォーカス可能な要素に初期フォーカスを当てるべき場合（例えば、最初のテキストフィールドをその前にある「閉じる」ボタンより優先させるなど）には望ましくない場合があります。このような場合、初期フォーカスを受け取る要素に `autofocus` 属性を指定することができます。 `autofocus` 属性は、アクセシビリティに関する課題を引き起こす可能性があるため、使用する際には注意が必要です。例えば、DOM の順序が後にある要素にフォーカスが設定されているために気づかないような重要なコンテンツを回避するといった課題です。
+
+このプロパティ値は、元々、{{domxref("Element.attachShadow()")}} に渡すオブジェクトの `delegatesFocus` プロパティを使用するか、またはシャドウルートを宣言的に作成する際の [`<template>`](/ja/docs/Web/HTML/Element/template) 要素の [`shadowrootdelegatesfocus`](/ja/docs/Web/HTML/Element/template#shadowrootclonable) 属性を使用して設定します。
 
 ### 値
 
+シャドウルートがフォーカスを譲る場合は `true`、そうでない場合は `false`。
+
+## 例
+
 ```js
-let customElem = document.querySelector('my-shadow-dom-element');
+let customElem = document.querySelector("my-shadow-dom-element");
 let shadow = customElem.shadowRoot;
 
-  ...
+// ...
 
 // Does it delegate focus?
 let hostElem = shadow.delegatesFocus;
 ```
 
+`<template>` のドキュメント内の[フォーカスのｐ譲渡を伴う宣言的シャドウ DOM](/ja/docs/Web/HTML/Element/template#フォーカスを譲渡を伴う宣言的シャドウ_dom)の例では、フォーカスを譲ることの効果が示されています。
+
 ## 仕様書
 
 {{Specifications}}
diff --git a/files/ja/web/api/shadowroot/fullscreenelement/index.md b/files/ja/web/api/shadowroot/fullscreenelement/index.md
index c99e18aa67a36b..60ae26ce4792c5 100644
--- a/files/ja/web/api/shadowroot/fullscreenelement/index.md
+++ b/files/ja/web/api/shadowroot/fullscreenelement/index.md
@@ -1,19 +1,16 @@
 ---
-title: ShadowRoot.fullscreenElement
+title: "ShadowRoot: fullscreenElement プロパティ"
+short-title: fullscreenElement
 slug: Web/API/ShadowRoot/fullscreenElement
+l10n:
+  sourceCommit: f2f9346c0c0e9f6676f2df9f1850933e274401de
 ---
 
 {{APIRef("Shadow DOM")}}
 
 **`fullscreenElement`** は {{domxref("ShadowRoot")}} インターフェイスの読み取り専用プロパティで、現在全画面モードで表示されているシャドウツリー内の要素を返します。
 
-## 構文
-
-```js
-shadowRoot.fullscreenElement;
-```
-
-### 値
+## 値
 
 現在全画面モードで表示されている {{domxref('Element')}}、または全画面モードの要素がなければ `null` を返します。
 
diff --git a/files/ja/web/api/shadowroot/getanimations/index.md b/files/ja/web/api/shadowroot/getanimations/index.md
index bd8c45e67d9aad..d0b246395b89b1 100644
--- a/files/ja/web/api/shadowroot/getanimations/index.md
+++ b/files/ja/web/api/shadowroot/getanimations/index.md
@@ -1,16 +1,19 @@
 ---
-title: ShadowRoot.getAnimations()
+title: "ShadowRoot: getAnimations() メソッド"
+short-title: getAnimations()
 slug: Web/API/ShadowRoot/getAnimations
+l10n:
+  sourceCommit: 76717f752447b6eef25bf29c12272e407ee5cb6b
 ---
 
 {{APIRef("Web Animations")}}
 
-**`getAnimations()`** は {{domxref("ShadowRoot")}} のメソッドで、ターゲット要素がシャドウツリーの子孫である、現在有効なすべての {{domxref("Animation")}} オブジェクトの配列を返します。この配列には [CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations)、[CSS トランジション](/ja/docs/Web/CSS/CSS_Transitions)、[ウェブアニメーション](/ja/docs/Web/API/Web_Animations_API) が含まれています。
+**`getAnimations()`** は {{domxref("ShadowRoot")}} のメソッドで、ターゲット要素がシャドウツリーの子孫である、現在有効なすべての {{domxref("Animation")}} オブジェクトの配列を返します。この配列には [CSS アニメーション](/ja/docs/Web/CSS/CSS_animations)、[CSS トランジション](/ja/docs/Web/CSS/CSS_transitions)、[ウェブアニメーション](/ja/docs/Web/API/Web_Animations_API) が含まれています。
 
 ## 構文
 
-```js
-getAnimations();
+```js-nolint
+getAnimations()
 ```
 
 ### 引数
@@ -28,7 +31,7 @@ getAnimations();
 ```js
 let customElem = document.querySelector("my-shadow-dom-element");
 let shadow = customElem.shadowRoot;
-shadow.getAnimations().forEach(function (animation) {
+shadow.getAnimations().forEach((animation) => {
   animation.playbackRate *= 0.5;
 });
 ```
@@ -44,8 +47,8 @@ shadow.getAnimations().forEach(function (animation) {
 ## 関連情報
 
 - [Web Animations API](/ja/docs/Web/API/Web_Animations_API)
-- [CSS アニメーション](/ja/docs/Web/CSS/CSS_Animations)
-- [CSS トランジション](/ja/docs/Web/CSS/CSS_Transitions)
+- [CSS アニメーション](/ja/docs/Web/CSS/CSS_animations)
+- [CSS トランジション](/ja/docs/Web/CSS/CSS_transitions)
 - {{domxref("Element.getAnimations()")}} - 単一の
   {{domxref("Element")}} とその配下のアニメーションのみを読み取ります。
 - {{domxref("Animation")}}
diff --git a/files/ja/web/api/shadowroot/gethtml/index.md b/files/ja/web/api/shadowroot/gethtml/index.md
new file mode 100644
index 00000000000000..1f9a491ea6e537
--- /dev/null
+++ b/files/ja/web/api/shadowroot/gethtml/index.md
@@ -0,0 +1,58 @@
+---
+title: "ShadowRoot: getHTML() メソッド"
+short-title: getHTML()
+slug: Web/API/ShadowRoot/getHTML
+l10n:
+  sourceCommit: 4558d208395a5b1df4db44b0c8ef4e9a0f8adbbf
+---
+
+{{APIRef("DOM")}}
+
+**`getHTML()`** は {{domxref("ShadowRoot")}} インターフェイスのメソッドで、シャドウルートの DOM を HTML 文字列にシリアライズするために使用します。
+
+このメソッドは、options 引数を提供しており、シャドウルートである子ノードのシリアライズができるようにします。options を使用すると、{{domxref("ShadowRoot/serializable","シリアライズ可能","",1)}}なネストされたシャドウルートを含めることができます。また、{{domxref("ShadowRoot")}} オブジェクトの指定された配列を含めることもできます。この配列は、開いているものも閉じているものも含みます。
+
+引数がない場合、シャドウルートである子ノードはシリアライズされず、このメソッドは {{domxref("Element.innerHTML")}} の値を読み取る場合と同じ動作をします。
+
+## 構文
+
+```js-nolint
+const html = shadowRoot.getHTML(options)
+```
+
+### 引数
+
+- `options` {{optional_inline}}
+
+  - : 次のオプションのパラメーターを持つオプションオブジェクトです。
+
+    - `serializableShadowRoots`
+      - : 論理値で、[シリアライズ可能](/ja/docs/Web/API/ShadowRoot/serializable)なシャドウルートを含めるかどうかを指定します。
+        既定値は `false` です。
+    - `shadowRoots`
+      - : シリアライズする {{domxref("ShadowRoot")}} オブジェクトの配列です。
+        これらは、`serializable` としてマークされているかどうか、または開かれているか閉じられたかに関係なく含まれます。
+        既定値は空の配列です。
+
+### 返値
+
+文字列で、シャドウルートの HTML シリアライズを表します。
+
+### 例外
+
+なし。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Element.getHTML()")}}
+- {{domxref("Element.innerHTML")}}
+- {{domxref("ShadowRoot.setHTMLUnsafe()")}}
+- {{domxref("Element.setHTMLUnsafe()")}}
diff --git a/files/ja/web/api/shadowroot/host/index.md b/files/ja/web/api/shadowroot/host/index.md
index b12a9737c66b44..156645cf3a3f4e 100644
--- a/files/ja/web/api/shadowroot/host/index.md
+++ b/files/ja/web/api/shadowroot/host/index.md
@@ -1,29 +1,26 @@
 ---
-title: ShadowRoot.host
+title: "ShadowRoot: host プロパティ"
+short-title: host
 slug: Web/API/ShadowRoot/host
+l10n:
+  sourceCommit: 584e1d86cc4d770f43b32ec62613a4840d2821db
 ---
 
 {{APIRef("Shadow DOM")}}
 
-**`host`** は {{domxref("ShadowRoot")}} の読み取り専用プロパティで、 `ShadowRoot` が取り付けられている DOM 要素の参照を返します。
+**`host`** は {{domxref("ShadowRoot")}} の読み取り専用プロパティで、 `ShadowRoot` が装着されている DOM 要素の参照を返します。
 
-## 構文
-
-```js
-const someElement = shadowRoot.host;
-```
-
-### 値
+## 値
 
 DOM の {{domxref('Element')}} です。
 
 ## 例
 
 ```js
-let customElem = document.querySelector('my-shadow-dom-element');
+let customElem = document.querySelector("my-shadow-dom-element");
 let shadow = customElem.shadowRoot;
 
-  ...
+// ...
 
 // 後で、元のホスト要素を返す
 let hostElem = shadow.host;
@@ -36,3 +33,10 @@ let hostElem = shadow.host;
 ## ブラウザーの互換性
 
 {{Compat}}
+
+## 関連情報
+
+- HTML の [`part`](/ja/docs/Web/HTML/Global_attributes#part) および [`exportparts`](/ja/docs/Web/HTML/Global_attributes#exportparts) 属性
+- HTML の {{HTMLelement("template")}} および {{HTMLElement("slot")}} 要素
+- CSS の {{CSSXref(":host")}}, {{CSSXref(":host_function", ":host()")}}, {{CSSXref(":host-context", ":host-context()")}} 擬似クラス
+- CSS の {{CSSXref("::part")}} および {{CSSXref("::slotted")}} 擬似クラス
diff --git a/files/ja/web/api/shadowroot/index.md b/files/ja/web/api/shadowroot/index.md
index 2fc6c99642de53..95902a04976d28 100644
--- a/files/ja/web/api/shadowroot/index.md
+++ b/files/ja/web/api/shadowroot/index.md
@@ -2,7 +2,7 @@
 title: ShadowRoot
 slug: Web/API/ShadowRoot
 l10n:
-  sourceCommit: 9091d8b54a600e5b751c97b1e47261324ef475d8
+  sourceCommit: 4558d208395a5b1df4db44b0c8ef4e9a0f8adbbf
 ---
 
 {{APIRef('Shadow DOM')}}
@@ -20,8 +20,10 @@ l10n:
 - {{domxref("ShadowRoot.adoptedStyleSheets")}}
   - : シャドウ DOM のサブツリーで使用するために構築されたスタイルシートの配列を追加します。
     これらは、同じ親 {{domxref("Document")}} ノードを共有する他の DOM サブツリーや、文書自身と共有されることがあります。
+- {{domxref("ShadowRoot.clonable")}} {{ReadOnlyInline}}
+  - : 論理値で、シャドウルートがクローン可能であるかどうかを示します。
 - {{domxref("ShadowRoot.delegatesFocus")}} {{ReadOnlyInline}}
-  - : シャドウが取り付けられたときに `delegatesFocus` が設定されていたかどうかを示す論理値を返します（{{domxref("Element.attachShadow()")}} を参照）。
+  - : 論理値で、フォーカスできないノードが選択された場合に、シャドウルートがフォーカスを譲るかどうかを示します。
 - {{DOMxRef("ShadowRoot.fullscreenElement")}} {{ReadOnlyInline}}
   - : このシャドウツリーで現在全画面モードになっている要素です。
 - {{domxref("ShadowRoot.host")}} {{ReadOnlyInline}}
@@ -36,6 +38,12 @@ l10n:
 - {{DOMxRef("ShadowRoot.pointerLockElement")}} {{ReadOnlyInline}}
   - : ポインターがロックされている間、マウスイベントのターゲットとして設定されている {{DOMxRef('Element')}} を返します。
     ロックが保留中か、ポインターがロックされていないか、ターゲットがほかのツリーにある場合は `null` を返します。
+- {{DOMxRef("ShadowRoot.serializable")}} {{ReadOnlyInline}}
+  - : 論理値で、シャドウルートがシリアライズ可能かどうかを示します。
+    要素内のシリアライズ可能なシャドウルートは、[`options.serializableShadowRoots`](/ja/docs/Web/API/Element/getHTML#serializableshadowroots) 引数が `true` に設定されている場合、{{DOMxRef('Element.getHTML()')}} または {{DOMxRef('ShadowRoot.getHTML()')}} によってシリアライズされます。
+    これは、シャドウルートが作成される際に設定されます。
+- {{DOMxRef("ShadowRoot.slotAssignment")}} {{ReadOnlyInline}}
+  - : スロット割り当ての型（`manual` または `named`）を持つ文字列を返します。
 - {{domxref("ShadowRoot.styleSheets")}} {{ReadOnlyInline}}
   - : シャドウツリーに明示的にリンクされている、または埋め込まれている {{domxref('CSSStyleSheet')}} オブジェクトの {{domxref('StyleSheetList')}} を返します。
 
@@ -49,6 +57,8 @@ l10n:
   - : 指定された座標における最上位の要素を返します。
 - {{domxref("ShadowRoot.elementsFromPoint()")}} {{Non-standard_Inline}}
   - : 指定された座標における全要素からなる配列を返します。
+- {{DOMxRef("ShadowRoot.setHTMLUnsafe()")}}
+  - : HTML 文字列を、無害化せずに文書フラグメントとして解析し、シャドウルートに元から存在するサブツリーを置き換えます。HTML 文字列には宣言型のシャドウルートを記載することができます。これは、[`ShadowRoot.innerHTML`](#shadowroot.innerhtml) を使用して設定された HTML のテンプレート要素として解釈されます。
 
 ## イベント
 
diff --git a/files/ja/web/api/shadowroot/mode/index.md b/files/ja/web/api/shadowroot/mode/index.md
index 37071c3aeac35d..dea6b8e4ad0f01 100644
--- a/files/ja/web/api/shadowroot/mode/index.md
+++ b/files/ja/web/api/shadowroot/mode/index.md
@@ -1,41 +1,42 @@
 ---
-title: ShadowRoot.mode
+title: "ShadowRoot: mode プロパティ"
+short-title: mode
 slug: Web/API/ShadowRoot/mode
+l10n:
+  sourceCommit: 26091e4af9c73bb6c5d1466df5070c949498fdbd
 ---
 
 {{APIRef("Shadow DOM")}}
 
-**`mode`** は {{domxref("ShadowRoot")}} の読み取り専用プロパティで、モードを `open` と `closed` のどちらかで示します。これはシャドウルートの内部機能を JavaScript からアクセスできるかどうかを定義します。
+**`mode`** は {{domxref("ShadowRoot")}} の読み取り専用プロパティで、モードを `open` と `closed` のどちらかで示します。
+これはシャドウルートの内部機能を JavaScript からアクセスできるかどうかを定義します。
 
 シャドウルートの `mode` が "`closed`" であった場合、シャドウルートの内部的な実装は JavaScript からアクセスできず、変更できなくなります。例えば、 {{HTMLElement("video")}} の内部の実装は JavaScript からアクセスも変更もできないのと同様になります。
 
-## 構文
-
-```js
-var mode = shadowRoot.mode;
-```
+このプロパティ値を設定するには、{{domxref("Element.attachShadow()")}} に渡すオブジェクトの `options.mode` プロパティを使用するか、シャドウルートを宣言的に作成する場合は、[`<template>`](/ja/docs/Web/HTML/Element/template) 要素の [`shadowrootmode`](/ja/docs/Web/HTML/Element/template#shadowrootmode) 属性を使用します。
 
 ### 値
 
-[`ShadowRootMode`](https://dom.spec.whatwg.org/#enumdef-shadowrootmode) 列挙型で定義された値です。 `open` か `closed` のどちらかです。
+次のどちらかの値を取りうる文字列です。
+
+- `open`
+  - : このシャドウルートの要素は、ルート外の JavaScript からアクセスすることができます。
+- `closed`
+  - : 閉じられたシャドウツリー内のノードは、ルート外の JavaScript でアクセスすることはできません。
 
 ## 例
 
 ```js
-  // アクセスできない closed のシャドウルートを作成します
-  let element = document.createElement("div");
-  element.attachShadow({ mode: "closed" });
-  element.shadowRoot // シャドウルートが closed なので null
-
-  // アクセスできる open のシャドウルートを作成します
-  let element2 = document.createElement("div");
-  element2.attachShadow({ mode: "open" });
-  console.log("The shadow is" + element2.shadowRoot.mode) // "The shadow is open" と出力
-  element2.shadowRoot.innerHTML("
-
-Opened shadow
-
-") // シャドウは open なので、外部からアクセスできます
+// アクセスできない closed のシャドウルートを作成します
+let element = document.createElement("div");
+element.attachShadow({ mode: "closed" });
+element.shadowRoot; // シャドウルートが closed なので null
+
+// アクセスできる open のシャドウルートを作成します
+let element2 = document.createElement("div");
+element2.attachShadow({ mode: "open" });
+console.log(`The shadow is ${element2.shadowRoot.mode}`); // "The shadow is open" と出力
+element2.shadowRoot.textContent("Opened shadow"); // シャドウは open なので、外部からアクセスできる
 ```
 
 ## 仕様書
diff --git a/files/ja/web/api/shadowroot/pictureinpictureelement/index.md b/files/ja/web/api/shadowroot/pictureinpictureelement/index.md
index a0cf6da35a22c0..2de006a59951f6 100644
--- a/files/ja/web/api/shadowroot/pictureinpictureelement/index.md
+++ b/files/ja/web/api/shadowroot/pictureinpictureelement/index.md
@@ -1,19 +1,16 @@
 ---
-title: ShadowRoot.pictureInPictureElement
+title: "ShadowRoot: pictureInPictureElement プロパティ"
+short-title: pictureInPictureElement
 slug: Web/API/ShadowRoot/pictureInPictureElement
+l10n:
+  sourceCommit: f2f9346c0c0e9f6676f2df9f1850933e274401de
 ---
 
 {{APIRef("Shadow DOM")}}
 
 **`pictureInPictureElement`** は {{domxref("ShadowRoot")}} インターフェイスの読み取り専用プロパティで、このシャドウツリー内で現在、ピクチャインピクチャモードで表示されている要素 ({{domxref("Element")}}) を返します。現在、ピクチャインピクチャモードが使用されていない場合は `null` を返します。
 
-## 構文
-
-```js
-shadowRoot.pictureInPictureElement;
-```
-
-### 値
+## 値
 
 現在ピクチャインピクチャモードになっている {{domxref("Element")}} オブジェクトへの参照、またはピクチャインピクチャモードが現在シャドウツリーで使われていない場合は `null` が返されます。
 
diff --git a/files/ja/web/api/shadowroot/pointerlockelement/index.md b/files/ja/web/api/shadowroot/pointerlockelement/index.md
index 283971be8d9160..cd79d888190211 100644
--- a/files/ja/web/api/shadowroot/pointerlockelement/index.md
+++ b/files/ja/web/api/shadowroot/pointerlockelement/index.md
@@ -1,19 +1,16 @@
 ---
-title: ShadowRoot.pointerLockElement
+title: "ShadowRoot: pointerLockElement プロパティ"
+short-title: pointerLockElement
 slug: Web/API/ShadowRoot/pointerLockElement
+l10n:
+  sourceCommit: c99ff93a1b71e7d664509fdd3e0c168920be967a
 ---
 
-{{APIRef("DOM")}}
+{{APIRef("Pointer Lock API")}}
 
-**`pointerLockElement`** は {{domxref("ShadowRoot")}} インターフェースの読み取り専用プロパティで、ポインターがロックされている間、マウスイベントのターゲットとして設定される要素を提供します。ロックが保留されている場合、ポインタのロックが解除されている場合、ターゲットが別のツリーにある場合は `null` になります。
+**`pointerLockElement`** は {{domxref("ShadowRoot")}} インターフェイスの読み取り専用プロパティで、ポインターがロックされている間、マウスイベントのターゲットとして設定される要素を提供します。ロックが保留されている場合、ポインターのロックが解除されている場合、ターゲットが別のツリーにある場合は `null` になります。
 
-## 構文
-
-```js
-shadowRoot.pointerLockElement;
-```
-
-### 値
+## 値
 
 {{domxref("Element")}} または `null` です。
 
diff --git a/files/ja/web/api/shadowroot/serializable/index.md b/files/ja/web/api/shadowroot/serializable/index.md
new file mode 100644
index 00000000000000..10e1c583459c1f
--- /dev/null
+++ b/files/ja/web/api/shadowroot/serializable/index.md
@@ -0,0 +1,39 @@
+---
+title: "ShadowRoot: serializable プロパティ"
+short-title: serializable
+slug: Web/API/ShadowRoot/serializable
+l10n:
+  sourceCommit: 4558d208395a5b1df4db44b0c8ef4e9a0f8adbbf
+---
+
+{{APIRef("Shadow DOM")}}
+
+**`serializable`** は {{domxref("ShadowRoot")}} インターフェイスの読み取り専用プロパティで、このシャドウルートがシリアライズ可能であれば、`true` を返します。
+
+設定されている場合、このシャドウルートは、{{DOMxRef('Element.getHTML()')}} または {{DOMxRef('ShadowRoot.getHTML()')}} メソッドを `options.serializableShadowRoots` 引数に `true` を指定して呼び出すことでシリアライズできます。
+
+シャドウルートの serializable プロパティは、シャドウルートが作成された際に指定されます。`<template>` 要素に [`shadowrootserializable`](/ja/docs/Web/HTML/Element/template#shadowrootserializable) 属性を（許可された [`shadowrootmode`](/ja/docs/Web/HTML/Element/template#shadowrootmode) 値とともに）追加することで宣言的に指定するか、[`options.serializable`](/ja/docs/Web/API/Element/attachShadow#serializable) 引数を `true` に設定して [`Element.attachShadow()`](/ja/docs/Web/API/Element/attachShadow) を使用します。
+
+## 値
+
+このシャドウルートがシリアライズ可能であれば `true`、そうでなければ `false`。
+
+## 例
+
+```js
+let customElem = document.querySelector("my-shadow-dom-element");
+let shadow = customElem.shadowRoot;
+
+// ...
+
+// シリアライズ可能かどうか
+let hostElem = shadow.serializable;
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
diff --git a/files/ja/web/api/shadowroot/sethtmlunsafe/index.md b/files/ja/web/api/shadowroot/sethtmlunsafe/index.md
new file mode 100644
index 00000000000000..2528e68b802235
--- /dev/null
+++ b/files/ja/web/api/shadowroot/sethtmlunsafe/index.md
@@ -0,0 +1,52 @@
+---
+title: "ShadowRoot: setHTMLUnsafe() メソッド"
+short-title: setHTMLUnsafe()
+slug: Web/API/ShadowRoot/setHTMLUnsafe
+l10n:
+  sourceCommit: 4f35a8237ee0842beb9cfef3354e05464ad7ce1a
+---
+
+{{APIRef("Shadow DOM")}}
+
+**`setHTMLUnsafe()`** は {{domxref("ShadowRoot")}} インターフェイスのメソッドで、HTML の文字列を {{domxref("DocumentFragment")}} に解釈できるもので、DOM 内の要素のサブツリーを置き換えます。
+入力 HTML には、[宣言型のシャドウルート](/ja/docs/Web/HTML/Element/template#宣言的シャドウ_dom)を含めることができます。
+
+メソッド名の接尾辞 "Unsafe" は、このメソッドが、`<script>` 要素やスクリプト、イベントハンドラーの content 属性など、潜在的に危険な XSS 関連の入力がサニタイズ（無害化）または除去されないことを示しています。
+
+HTML の文字列が、特定のシャドウホストで複数の[宣言型のシャドウルート](/ja/docs/Web/HTML/Element/template#宣言的シャドウ_dom)を定義している場合、最初の {{domxref("ShadowRoot")}} のみが作成されます。その後の宣言は、そのシャドウルート内の `<template>` 要素として解釈できます。
+
+> [!NOTE]
+> HTML の文字列が宣言的なシャドウルートを含む可能性がある場合は、{{domxref("ShadowRoot.innerHTML")}} の代わりにこのメソッドを使用しましょう。
+
+## 構文
+
+```js-nolint
+setHTMLUnsafe(html)
+```
+
+### 引数
+
+- `html`
+  - : 文字列で、解釈する HTML を定義します。
+
+### 返値
+
+なし (`undefined`)。
+
+### 例外
+
+なし。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Element.setHTMLUnsafe()")}}
+- {{domxref("ShadowRoot.innerHTML")}}
+- {{domxref("Document.parseHTMLUnsafe_static", "Document.parseHTMLUnsafe()")}}
diff --git a/files/ja/web/api/shadowroot/slotassignment/index.md b/files/ja/web/api/shadowroot/slotassignment/index.md
new file mode 100644
index 00000000000000..b73461d7b895de
--- /dev/null
+++ b/files/ja/web/api/shadowroot/slotassignment/index.md
@@ -0,0 +1,57 @@
+---
+title: "ShadowRoot: slotAssignment プロパティ"
+short-title: slotAssignment
+slug: Web/API/ShadowRoot/slotAssignment
+l10n:
+  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+---
+
+{{APIRef("Shadow DOM")}}
+
+**`slotAssignment`** は {{domxref("ShadowRoot")}} インターフェイスの読み取り専用プロパティで、このシャドウ DOM ツリーのスロット割り当てモードを返します。ノードは自動的に割り当て (`named`) されるか、手動で割り当て (`manual`) されます。このプロパティの値は、`slotAssignment` オプションを {{domxref("Element.attachShadow()")}} を呼び出す際に使用して定義されます。
+
+## 値
+
+文字列で、以下のどちらかです。
+
+- `named`
+  - : 要素は自動的にこのシャドウルート内の {{HTMLElement("slot")}} 要素に割り当てられます。ホストの子孫要素で、このシャドウルート内の `<slot>` の `name` 属性と一致する `slot` 属性を持つものは、そのスロットに割り当てられます。ホストの最上位の子要素で、`slot` 属性を持たないものは、`name` 属性を持たない `<slot>`（「既定のスロット」）に割り当てられます。ただし、そのような `<slot>` が存在する場合に限ります。
+- `manual`
+  - : 要素は自動的に {{HTMLElement("slot")}} 要素に割り当てられるわけではありません。代わりに、{{domxref("HTMLSlotElement.assign()")}} を使用して手動で割り当てる必要があります。
+
+## 例
+
+以下の例では、`assign()` メソッドを使用して、タブ付きアプリケーションで正しいタブを表示します。この関数は、表示するパネルを渡されて呼び出され、その後スロットに割り当てられます。 `slotAssignment` が `named` であるかどうかをテストし、{{domxref("HTMLSlotElement.assign()")}} が呼び出された際に例外が発生しないようにします。
+
+```js
+function UpdateDisplayTab(elem, tabIdx) {
+  const shadow = elem.shadowRoot;
+
+  // 通常、このテストは必要ありませんが、デバッグ時に役立つことがあります。
+  if (shadow.slotAssignment === "named") {
+    console.error(
+      "自動割り当て（名前付き）スロットに手動で割り当てようとしています",
+    );
+  }
+  const slot = shadow.querySelector("slot");
+  const panels = elem.querySelectorAll("tab-panel");
+  if (panels.length && tabIdx && tabIdx <= panels.length) {
+    slot.assign(panels[tabIdx - 1]);
+  } else {
+    slot.assign();
+  }
+}
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{domxref("Element.attachShadow()")}}
+- {{domxref("HTMLSlotElement.assign()")}}
diff --git a/files/ja/web/api/shadowroot/stylesheets/index.md b/files/ja/web/api/shadowroot/stylesheets/index.md
index dbbdc9134212e6..04d68aa58037ed 100644
--- a/files/ja/web/api/shadowroot/stylesheets/index.md
+++ b/files/ja/web/api/shadowroot/stylesheets/index.md
@@ -1,18 +1,15 @@
 ---
-title: ShadowRoot.styleSheets
+title: "ShadowRoot: styleSheets プロパティ"
+short-title: styleSheets
 slug: Web/API/ShadowRoot/styleSheets
+l10n:
+  sourceCommit: f2f9346c0c0e9f6676f2df9f1850933e274401de
 ---
 
 {{APIRef("CSSOM")}}
 
 **`styleSheets`** は {{domxref("ShadowRoot")}} インターフェイスの読み取り専用プロパティで、シャドウツリーに明示的にリンクされるか埋め込まれたスタイルシートを表す {{domxref('CSSStyleSheet')}} オブジェクトの {{domxref('StyleSheetList')}} を返します。
 
-## 構文
-
-```js
-shadowRoot.styleSheets;
-```
-
 ### 値
 
 {{domxref('CSSStyleSheet')}} オブジェクトの {{domxref('StyleSheetList')}} です。
diff --git a/files/ja/web/api/url/createobjecturl_static/index.md b/files/ja/web/api/url/createobjecturl_static/index.md
index 8c50d87adbf6cd..1231ff600fb7c6 100644
--- a/files/ja/web/api/url/createobjecturl_static/index.md
+++ b/files/ja/web/api/url/createobjecturl_static/index.md
@@ -3,18 +3,16 @@ title: "URL: createObjectURL() 静的メソッド"
 short-title: createObjectURL()
 slug: Web/API/URL/createObjectURL_static
 l10n:
-  sourceCommit: a0f6bf6f7d148f368f6965255058df1ed1f43839
+  sourceCommit: 22080a7cc403f7f45c8e85065b182c9f0d4d383c
 ---
 
-{{APIRef("URL API")}}
+{{APIRef("File API")}} {{AvailableInWorkers("window_and_worker_except_service")}}
 
-**`URL.createObjectURL()`** 静的メソッドは、引数で指定されたオブジェクトを表す URL を含む文字列を生成します。
+**`createObjectURL()`** は {{domxref("URL")}} インターフェイスの静的メソッドで、引数で指定されたオブジェクトを表す URL を含む文字列を生成します。
 
 URL の寿命は、それを作成したウィンドウ内の {{domxref("document")}} と結び付けられています。 新しいオブジェクト URL は、指定された {{domxref("File")}} オブジェクトか {{domxref("Blob")}} オブジェクトを表します。
 
-オブジェクト URL を解放するには、 {{domxref("URL/revokeObjectURL_static", "revokeObjectURL()")}} を呼び出してください。
-
-{{AvailableInWorkers}}
+オブジェクト URL を解放するには、 {{domxref("URL.revokeObjectURL_static", "revokeObjectURL()")}} を呼び出してください。
 
 > [!NOTE]
 > この機能はメモリーリークを生み出す可能性があるため、[サービスワーカー](/ja/docs/Web/API/Service_Worker_API)内で利用することは*できません*。
@@ -44,14 +42,14 @@ URL.createObjectURL(object)
 
 すでにオブジェクト URL が生成されている場合でも、 `createObjectURL()` を呼び出す度に、新しいオブジェクト URL が生成されます。 必要がなくなったら {{domxref("URL.revokeObjectURL_static")}} を呼び出して、それぞれを解放してください。
 
-ブラウザーは、文書がアンロードされた際にこれらのオブジェクト URL をメモリから解放します。しかし、性能とメモリ使用を考慮すると、明示的にアンロードできる安全な機会があるならば、そうするべきです。
+ブラウザーは、文書がアンロードされた際にこれらのオブジェクト URL をメモリーから解放します。しかし、性能とメモリー使用を考慮すると、明示的にアンロードできる安全な機会があるならば、そうするべきです。
 
 ### メディアストリームのオブジェクト URL の使用
 
 古いバージョンの Media Source 仕様書では、 {{HTMLElement("video")}} 要素にストリームを添付するには {{domxref("MediaStream")}} にオブジェクト URL を生成する必要があるとしてます。 これはもう必要なく、ブラウザーはこのようにする対応を削除してきています。
 
 > [!WARNING]
-> もし {{domxref("URL/createObjectURL_static", "createObjectURL()")}} でメディア要素にストリームを割り当てるコードが残っているのであれば、単純に {{domxref("HTMLMediaElement.srcObject", "srcObject")}} を直接 `MediaStream` に設定するよう更新する必要があります。
+> もし `createObjectURL()` でメディア要素にストリームを割り当てるコードが残っているのであれば、単純に {{domxref("HTMLMediaElement.srcObject", "srcObject")}} を直接 `MediaStream` に設定するよう更新する必要があります。
 
 ## 仕様書
 
@@ -65,6 +63,6 @@ URL.createObjectURL(object)
 
 - [ウェブアプリケーションからのファイルの使用](/ja/docs/Web/API/File_API/Using_files_from_web_applications)
 - [オブジェクト URL で画像を表示](/ja/docs/Web/API/File_API/Using_files_from_web_applications#例_オブジェクト_url_で画像を表示)
-- {{domxref("URL.revokeObjectURL_static")}}
+- {{domxref("URL.revokeObjectURL_static", "URL.revokeObjectURL()")}}
 - {{domxref("HTMLMediaElement.srcObject")}}
 - {{domxref("FileReader.readAsDataURL()")}}
diff --git a/files/ja/web/api/url/index.md b/files/ja/web/api/url/index.md
index bdec1f504d4f73..cd18c88a5adf3c 100644
--- a/files/ja/web/api/url/index.md
+++ b/files/ja/web/api/url/index.md
@@ -2,23 +2,20 @@
 title: URL
 slug: Web/API/URL
 l10n:
-  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+  sourceCommit: 32305cc3cf274fbfdcc73a296bbd400a26f38296
 ---
 
-{{APIRef("URL API")}}
+{{APIRef("URL API")}} {{AvailableInWorkers}}
 
 **`URL`** インターフェイスは、{{glossary("URL", "URL")}} の解釈、構築、正規化、およびエンコードに使用します。 URL のコンポーネントを簡単に読み取って変更できるプロパティを提供することで機能します。
 
 通常、新しい `URL` オブジェクトを作成するにはコンストラクターを呼び出すときに URL を文字列として指定するか、相対 URL とベース URL を指定します。その後、解釈された URL のコンポーネントを簡単に読み取ったり、URL を変更したりすることができます。
 
-ブラウザーがまだ {{domxref("URL.URL", "URL()")}} コンストラクターに対応していない場合は、{{domxref("Window")}} インターフェイスの {{domxref("URL")}} プロパティを使用して URL オブジェクトにアクセスできます。対象とするブラウザーのいずれかに、この接頭辞を付ける必要があるかどうかを確認してください。
-
-{{AvailableInWorkers}}
-
 ## コンストラクター
 
 - {{domxref("URL.URL", "URL()")}}
-  - : 絶対 URL 文字列、または相対 URL 文字列とベース URL 文字列を使用して指定された URL を参照する `URL` オブジェクトを作成して返します。
+  - : `URL` オブジェクトを、URL 文字列とオプションのベース URL 文字列から作成し、それを返します。
+    渡された引数が有効な URL を定義していない場合、例外が発生します。
 
 ## プロパティ
 
@@ -49,12 +46,14 @@ l10n:
 
 ## 静的メソッド
 
-- [`canParse()`](/ja/docs/Web/API/URL/canParse_static)
+- {{domxref("URL.canParse_static", "canParse()")}}
   - : URL 文字列とオプションのベース URL 文字列から定義された URL が解釈可能で有効かどうかを示す論理値を返します。
-- {{domxref("URL/createObjectURL_static", "createObjectURL()")}}
+- {{domxref("URL.createObjectURL_static", "createObjectURL()")}}
   - : 一意の blob URL の入った文字列を返します。 これは、スキームとして `blob:` の入った URL で、その後にブラウザー内のオブジェクトを一意に識別する不透明な文字列が続きます。
-- {{domxref("URL/revokeObjectURL_static", "revokeObjectURL()")}}
-  - : {{domxref("URL.createObjectURL_static")}} を使用して以前に生成したオブジェクト URL を取り消します。
+- {{domxref("URL.parse_static", "parse()")}}
+  - : `URL` オブジェクトを、URL 文字列とオプションのベース URL 文字列から作成して返します。渡された引数が無効な `URL` を定義している場合は、`null` を返します。
+- {{domxref("URL.revokeObjectURL_static", "revokeObjectURL()")}}
+  - : {{domxref("URL.createObjectURL_static", "URL.createObjectURL()")}} を使用して以前に生成したオブジェクト URL を取り消します。
 
 ## メソッド
 
@@ -74,7 +73,7 @@ console.log(url.pathname); // "/cats"
 ```
 
 コンストラクターは URL を有効な URL に解釈できない場合に例外を発生させます。
-上記のコードを [`try...catch`](/ja/docs/Web/JavaScript/Reference/Statements/try...catch) ブロックの中で呼び出すか、[`canParse()`](/ja/docs/Web/API/URL/canParse_static) 静的メソッドを使って先に URL が有効かどうかをチェックしてください。
+上記のコードを [`try...catch`](/ja/docs/Web/JavaScript/Reference/Statements/try...catch) ブロックの中で呼び出すか、{{domxref("URL.canParse_static", "canParse()")}} 静的メソッドを使って先に URL が有効かどうかをチェックしてください。
 
 ```js
 if (URL.canParse("../cats", "http://www.example.com/dogs")) {
@@ -131,5 +130,4 @@ const response = await fetch(
 - [`URL` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#url-and-urlsearchparams)
 - [URL API](/ja/docs/Web/API/URL_API)
 - [URL とは何か](/ja/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL)
-- `URL` オブジェクトを取得するプロパティ: {{domxref("URL")}}
 - {{domxref("URLSearchParams")}}
diff --git a/files/ja/web/api/url/parse_static/index.md b/files/ja/web/api/url/parse_static/index.md
new file mode 100644
index 00000000000000..e19ed3d97e94f5
--- /dev/null
+++ b/files/ja/web/api/url/parse_static/index.md
@@ -0,0 +1,136 @@
+---
+title: "URL: parse() 静的メソッド"
+short-title: parse()
+slug: Web/API/URL/parse_static
+l10n:
+  sourceCommit: 216794e76611c18e53222bb8efa570e898e990de
+---
+
+{{ApiRef("URL API")}}
+
+**`URL.parse()`** は {{domxref("URL")}} インターフェイスの静的メソッドで、引数で定義された {{domxref("URL")}} を表す、新たに作成された URL オブジェクトを返します。
+
+指定されたベース URL または結果の URL が解析可能で有効な URL でない場合、`null` が返されます。
+これは、{{domxref("URL.URL", "URL()")}} コンストラクターを使用することに対する、[try...catch](/ja/docs/Web/JavaScript/Reference/Statements/try...catch) ブロック内で `URL` を構築したり、 {{domxref("URL.canParse_static", "canParse()")}} を使用して引数を調べ、メソッドが `false` を返した場合に `null` を返したりする代替手段です。
+
+## 構文
+
+```js-nolint
+URL.parse(url)
+URL.parse(url, base)
+```
+
+### 引数
+
+- `url`
+  - : 文字列、または{{Glossary("stringifier", "文字列化")}}を持つオブジェクトで、絶対 URL または URL への相対参照を表します。
+    `url` が相対参照の場合、`base` は要求され、最終的な URL を解決するために使用されます。
+    `url` が絶対 URL の場合、指定された `base` は結果の URL を作成するために使用されません。
+- `base` {{optional_inline}}
+
+  - : `url` が相対 URL の場合に利用するベース URL を表す文字列です。
+    指定しない場合、既定では `undefined` となります。
+
+    `base` URL を指定すると、解決された URL は単に `url` と `base` を結合したものではありません。
+    親ディレクトリーおよびカレントディレクトリーへの相対参照は、`base` URL のカレントディレクトリーを基準として解決されます。
+    ルートへの相対参照は、`base` のオリジンを基準として解決されます。 詳細については、[相対参照の URL への解決](/ja/docs/Web/API/URL_API/Resolving_relative_references)を参照してください。
+
+> **Note:** `url` および `base` 引数は、渡した値が例えば {{domxref("HTMLAnchorElement")}} や {{domxref("HTMLAreaElement")}} 要素など、何であれそれぞれ文字列化されます。文字列を受け入れる他の Web API と同様です。
+> 具体的には、どちらかの引数に既存の {{domxref("URL")}} オブジェクトを使用することができます。そのオブジェクトの {{domxref("URL.href", "href")}} プロパティから文字列化されます。
+
+### 返値
+
+引数が有効な URL に解決できた場合は `URL` です。そうでなければ `null` です。
+
+## 例
+
+[相対参照の URL への解決](/ja/docs/Web/API/URL_API/Resolving_relative_references)および [`URL()` コンストラクター](/ja/docs/Web/API/URL/URL#examples)の記事には、`url` および `base` 値が最終的な絶対 URL に解決される方法を示す例がもっとあります（主に `URL()` を使用するものですが）。
+
+### URL.parse() の使用
+
+この例では、いくつかの異なる絶対参照値と相対参照値に対して、静的メソッド `URL.parse()` を使用する方法を説明しています。
+
+```html hidden
+<pre id="log"></pre>
+```
+
+```css hidden
+#log {
+  height: 100px;
+  overflow: scroll;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+```js hidden
+const logElement = document.getElementById("log");
+function log(text) {
+  logElement.innerText += `${text}\n`;
+}
+```
+
+最初に、`URL.parse()` メソッドに対応しているかどうかを `"parse" in URL` という条件式でチェックします。
+メソッドが対応している場合、絶対URL、相対参照、ベース URL、より[複雑なベース URL](/ja/docs/Web/API/URL_API/Resolving_relative_references) を持つ相対参照、有効なベース URL を持つ有効な絶対 URL（これは使用されません）、およびメソッドが `null` を返す不正なベース URL のチェック結果をログ出力します。
+
+また、`URL.parse()` に対応していない場合にもログ出力します。
+
+```js-nolint
+if ("parse" in URL) {
+  // Absolute URL
+  let result = URL.parse("https://developer.mozilla.org/ja/docs");
+  log(`[1]: ${result.href}`);
+
+  // 相対参照を有効なベース URL へ
+  result = URL.parse("ja/docs", "https://developer.mozilla.org");
+  log(`[2]: ${result.href}`);
+
+  // 相対参照を「複雑」で有効なベース URL へ
+  // （スキームとドメインのみを使用して URL を解決します）
+  result = URL.parse(
+    "/different/place",
+    "https://developer.mozilla.org:443/some/path?id=4",
+  );
+  log(`[3]: ${result.href}`);
+
+  // 絶対 URL の引数（ベース URL は無視される）
+  result = URL.parse(
+    "https://example.org/some/docs",
+    "https://developer.mozilla.org",
+  );
+  log(`[4]: ${result.href}`);
+
+  // 無効なベース URL（コロンの付け忘れ）
+  result = URL.parse("ja/docs", "https//developer.mozilla.org");
+  log(`[5]: ${result}`);
+} else {
+  log("URL.parse() に対応していません");
+}
+```
+
+最後に、下記のコードでは、`base` 引数に `URL` オブジェクトを渡すとことで、引数が文字列でなくてもよいことを示しています。
+
+```js
+if ("parse" in URL) {
+  // URL オブジェクトとして指定されたベース URL との相対参照
+  result = URL.parse("/ja/docs", new URL("https://developer.mozilla.org/"));
+  log(`[6]: ${result.href}`);
+}
+```
+
+それぞれのチェックを以下に表示します。
+
+{{EmbedLiveSample('URL.parse()', '100%')}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [`URL()` コンストラクター](/ja/docs/Web/API/URL/URL): 渡された引数が不正な引数を定義している場合は例外が発生します。
+- [`URL.parse()` のポリフィル](https://github.com/zloirock/core-js#url-and-urlsearchparams) が [`core-js`](https://github.com/zloirock/core-js) で利用できます
diff --git a/files/ja/web/api/url/port/index.md b/files/ja/web/api/url/port/index.md
index 3415f48a603f1e..da808a0ce360ba 100644
--- a/files/ja/web/api/url/port/index.md
+++ b/files/ja/web/api/url/port/index.md
@@ -3,17 +3,15 @@ title: "URL: port プロパティ"
 short-title: port
 slug: Web/API/URL/port
 l10n:
-  sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6
+  sourceCommit: 216794e76611c18e53222bb8efa570e898e990de
 ---
 
-{{ApiRef("URL API")}}
+{{ApiRef("URL API")}} {{AvailableInWorkers}}
 
 **`port`** は {{domxref("URL")}} インターフェイスのプロパティで、この URL のポート番号の入った文字列です。
 
 > **メモ:** [`URL()`](/ja/docs/Web/API/URL/URL) コンストラクターに渡された入力文字列が明示的なポート番号を含んでいないか（例えば `https://localhost`）、入力文字列のプロトコル部分に対応する既定のポート番号を含んでいる場合（例えば `https://localhost:443`）、コンストラクターが返す [`URL`](/ja/docs/Web/API/URL) オブジェクトの port プロパティの値は空文字列 (`''`) になります。
 
-{{AvailableInWorkers}}
-
 ## 値
 
 文字列です。
@@ -21,11 +19,25 @@ l10n:
 ## 例
 
 ```js
-const url = new URL("https://example.com:80/svn/Repos/");
-console.log(url.port); // '80' と出力
+// https プロトコルで既定ではないポート番号
+new URL("https://example.com:5443/svn/Repos/").port; // '5443'
+// http プロトコルで既定ではないポート番号
+new URL("http://example.com:8080/svn/Repos/").port; // '8080'
+// https プロトコルで既定のポート番号
+new URL("https://example.com:443/svn/Repos/").port; // ''（空文字列）
+// http プロトコルで既定のポート番号
+new URL("http://example.com:80/svn/Repos/").port; // ''（空文字列）
+// https プロトコルで明示的なポート番号なし
+new URL("https://example.com/svn/Repos/").port; // ''（空文字列）
+// http プロトコルで明示的なポート番号なし
+new URL("https://example.com/svn/Repos/").port; // ''（空文字列）
+// ftp プロトコルで既定ではないポート番号
+new URL("ftp://example.com:221/svn/Repos/").port; // '221'
+// ftp プロトコルで既定のポート番号
+new URL("ftp://example.com:21/svn/Repos/").port; // ''（空文字列）
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
diff --git a/files/ja/web/api/url/protocol/index.md b/files/ja/web/api/url/protocol/index.md
index a513138eefc5c3..771c65e5009b79 100644
--- a/files/ja/web/api/url/protocol/index.md
+++ b/files/ja/web/api/url/protocol/index.md
@@ -3,15 +3,13 @@ title: "URL: protocol プロパティ"
 short-title: protocol
 slug: Web/API/URL/protocol
 l10n:
-  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+  sourceCommit: 4de6f76bbfd76229db78ffb7d52cf6b4cb9f31f8
 ---
 
-{{ApiRef("URL API")}}
+{{ApiRef("URL API")}} {{AvailableInWorkers}}
 
 **`protocol`** は {{domxref("URL")}} インターフェイスのプロパティで、最後の `':'` を含む URL のプロトコルスキームを表す文字列です。
 
-{{AvailableInWorkers}}
-
 ## 値
 
 文字列です。
@@ -25,7 +23,7 @@ const url = new URL(
 console.log(url.protocol); // "https:" とログ出力
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
diff --git a/files/ja/web/api/url/revokeobjecturl_static/index.md b/files/ja/web/api/url/revokeobjecturl_static/index.md
index e4917f08d6b645..2782ae779a4d89 100644
--- a/files/ja/web/api/url/revokeobjecturl_static/index.md
+++ b/files/ja/web/api/url/revokeobjecturl_static/index.md
@@ -3,19 +3,18 @@ title: "URL: revokeObjectURL() 静的メソッド"
 short-title: revokeObjectURL()
 slug: Web/API/URL/revokeObjectURL_static
 l10n:
-  sourceCommit: a0f6bf6f7d148f368f6965255058df1ed1f43839
+  sourceCommit: 216794e76611c18e53222bb8efa570e898e990de
 ---
 
-{{ApiRef("URL API")}}
+{{APIRef("File API")}} {{AvailableInWorkers("window_and_worker_except_service")}}
 
-**`URL.revokeObjectURL()`** 静的メソッドは、以前に {{domxref("URL.createObjectURL_static") }} を呼び出して生成された既存のオブジェクト URL を解放します。
+**`revokeObjectURL()`** は {{domxref("URL")}} インターフェイスの静的メソッドで、以前に {{domxref("URL.createObjectURL_static", "URL.createObjectURL()")}} を呼び出して生成された既存のオブジェクト URL を解放します。
 
-オブジェクト URL を使い終わったら、このメソッドを呼び出して、ファイルへの参照をこれ以上保持しないようにブラウザーに知らせます。
-
-{{AvailableInWorkers}}
+オブジェクト URL を使い終わったら、このメソッドを呼び出して、ファイルへの参照をこれ以上保持しないようにブラウザーに知らせてください。
 
 > [!NOTE]
-> このメソッドは、{{domxref("Blob")}} インターフェイスのライフサイクルの問題とリークの可能性があるため、サービスワーカーからは利用できません。
+> このメソッドは、[サービスワーカー](/ja/docs/Web/API/Service_Worker_API)からは利用できません。
+> {{domxref("Blob")}} インターフェイスのライフサイクルの問題とリークの可能性があるためです。
 
 ## 構文
 
@@ -26,7 +25,7 @@ URL.revokeObjectURL(objectURL)
 ### 引数
 
 - `objectURL`
-  - : 以前に {{domxref("URL/createObjectURL_static", "createObjectURL()") }} を呼び出して生成されたオブジェクト URL を表す文字列です。
+  - : 以前に {{domxref("URL.createObjectURL_static", "createObjectURL()") }} を呼び出して生成されたオブジェクト URL を表す文字列です。
 
 ### 返値
 
@@ -48,4 +47,4 @@ URL.revokeObjectURL(objectURL)
 
 - [ウェブアプリケーションからのファイルの使用](/ja/docs/Web/API/File_API/Using_files_from_web_applications)
 - [オブジェクト URL で画像を表示](/ja/docs/Web/API/File_API/Using_files_from_web_applications#例_オブジェクト_url_で画像を表示)
-- {{domxref("URL.createObjectURL_static") }}
+- {{domxref("URL.createObjectURL_static", "URL.createObjectURL()")}}
diff --git a/files/ja/web/api/url/url/index.md b/files/ja/web/api/url/url/index.md
index 3ee42f49422202..e2a967a8bc3778 100644
--- a/files/ja/web/api/url/url/index.md
+++ b/files/ja/web/api/url/url/index.md
@@ -3,17 +3,15 @@ title: "URL: URL() コンストラクター"
 short-title: URL()
 slug: Web/API/URL/URL
 l10n:
-  sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6
+  sourceCommit: 5a7fae1cc8df27d50c9365511a714f3c2fa4bfc1
 ---
 
-{{APIRef("URL API")}}
+{{APIRef("URL API")}} {{AvailableInWorkers}}
 
 **`URL()`** コンストラクターは、引数によって定義された URL を表す、新しく生成された {{domxref("URL")}} オブジェクトを返します。
 
 与えられたベース URL または結果の URL が有効な URL でない場合、JavaScript の {{jsxref("TypeError")}} 例外が発生します。
 
-{{AvailableInWorkers}}
-
 ## 構文
 
 ```js-nolint
@@ -24,26 +22,35 @@ new URL(url, base)
 ### 引数
 
 - `url`
-  - : 絶対または相対 URL を表す文字列または{{Glossary("stringifier", "文字列化")}}のあるその他のオブジェクト、例えば {{htmlelement("a")}} や {{htmlelement("area")}} 要素です。
-    `url` が相対 URL である場合、`base` は必須であり、ベース URL として使用されます。
-    `url` が絶対 URL である場合、指定された `base` は無視されます。
+  - : 文字列または{{Glossary("stringifier", "文字列化")}}のあるその他のオブジェクトで、絶対またはベース URL に対する相対参照を表します。
+    `url` が相対参照である場合、`base` は必須であり、最終的な URL を解決するために使用されます。
+    `url` が絶対 URL である場合、指定された `base` は結果の URL を作成するためには使用されません。
 - `base` {{optional_inline}}
-  - : `url` が相対 URL の場合に使用するベース URL を表す文字列です。
+
+  - : 文字列で、`url` が相対参照の場合に使用するベース URL を表します。
     指定されなかった場合、既定値は `undefined` です。
 
+    `base` を指定した場合、解決した URL は単に `url` と `base` を結合したものではありません。
+    親ディレクトリーおよびカレントディレクトリーへの相対参照は、`base` URL の最後のスラッシュまでのパス部分をカレントディレクトリーとした相対で解決されます。ただし、最後のスラッシュ以降は含まれません。
+    ルートへの相対参照は、ベースを原点とした相対で解決されます。
+    詳細については、[URL への相対参照の解決](/ja/docs/Web/API/URL_API/Resolving_relative_references)を参照してください。
+
 > [!NOTE]
-> 引数 `url` と `base` はそれぞれ、文字列を受け入れる他の Web API と同様に、渡された値から文字列化されます。
+> 引数 `url` と `base` はそれぞれ、渡された値を何でも、{{domxref("HTMLAnchorElement")}} や {{domxref("HTMLAreaElement")}} であっても文字列化します。これは、文字列を受け入れる他の Web API と同様です。
 > 具体的な例としては、既存の {{domxref("URL")}} オブジェクトをどちらの引数にも使用することができ、そのオブジェクトの {{domxref("URL.href", "href")}} プロパティに文字列化されます。
 
 ### 例外
 
-| 例外                    | 説明                                                                                            |
-| ----------------------- | ----------------------------------------------------------------------------------------------- |
-| {{jsxref("TypeError")}} | `url`（絶対 URL の場合）または `base` + `url`（相対 URL の場合）が、有効な URL ではありません。 |
+- {{jsxref("TypeError")}}
+  - : `url`（絶対 URL の場合）または `base` + `url`（相対 URL の場合）が、有効な URL ではない場合。
 
 ## 例
 
-```js
+コンストラクターを使用する例をいくつか示します。
+
+> **メモ:** [相対参照の URL への解決](/ja/docs/Web/API/URL_API/Resolving_relative_references)では、さまざまな `url` と `base` 値が最終的な絶対 URL に解決される方法を説明するさらなる例が提供されています。
+
+```js-nolint
 // ベース URL:
 let baseUrl = "https://developer.mozilla.org";
 
@@ -67,9 +74,11 @@ new URL("/ja/docs", A);
 
 new URL("/ja/docs", "https://developer.mozilla.org/fr-FR/toto");
 // => 'https://developer.mozilla.org/ja/docs'
+```
 
-// 無効な URL:
+こちらは無効な URL の例です。
 
+```js
 new URL("/ja/docs", "");
 // Raises a TypeError exception as '' is not a valid URL
 
@@ -104,5 +113,6 @@ new URL("//foo.com", "https://example.com");
 
 ## 関連項目
 
+- {{domxref("URL.parse_static", "URL.parse()")}}: 例外を発生しないこのコンストラクターの代用
 - [`URL` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#url-and-urlsearchparams)
-- 所属しているインターフェース: {{domxref("URL")}}。
+- 所属しているインターフェイス: {{domxref("URL")}}
diff --git a/files/ja/web/api/url/username/index.md b/files/ja/web/api/url/username/index.md
index d89a535a6e37fa..4ae87bf8e48b10 100644
--- a/files/ja/web/api/url/username/index.md
+++ b/files/ja/web/api/url/username/index.md
@@ -3,15 +3,13 @@ title: "URL: username プロパティ"
 short-title: username
 slug: Web/API/URL/username
 l10n:
-  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+  sourceCommit: 4de6f76bbfd76229db78ffb7d52cf6b4cb9f31f8
 ---
 
-{{ApiRef("URL API")}}
+{{ApiRef("URL API")}} {{AvailableInWorkers}}
 
 **`username`** は {{domxref("URL")}} インターフェイスのプロパティで、ドメイン名の前に指定されたユーザー名をの入った文字列です。
 
-{{AvailableInWorkers}}
-
 ## 値
 
 文字列です。
@@ -25,7 +23,7 @@ const url = new URL(
 console.log(url.username); // "anonymous" とログ出力
 ```
 
-## 仕様
+## 仕様書
 
 {{Specifications}}
 
diff --git a/files/ja/web/api/url_api/resolving_relative_references/index.md b/files/ja/web/api/url_api/resolving_relative_references/index.md
new file mode 100644
index 00000000000000..83fab003471d2e
--- /dev/null
+++ b/files/ja/web/api/url_api/resolving_relative_references/index.md
@@ -0,0 +1,164 @@
+---
+title: 相対参照の URL への解決
+slug: Web/API/URL_API/Resolving_relative_references
+l10n:
+  sourceCommit: 216794e76611c18e53222bb8efa570e898e990de
+---
+
+{{DefaultAPISidebar("URL API")}}
+
+[`URL()` コンストラクター](/ja/docs/Web/API/URL/URL)、または {{domxref("URL.parse_static", "URL.parse()")}} 静的メソッド ([URL API](/ja/docs/Web/API/URL_API)) を使用すると、相対参照とベース URL を絶対 URL に解決することができます。
+
+どちらのメソッドも、最大 2 つの文字列引数を取り、絶対 URL を表す [`URL()`](/ja/docs/Web/API/URL) オブジェクトを返します。
+最初の引数は絶対 URL または URL への相対参照を表し、2 番目の引数は、最初の引数に相対参照が指定されている場合にその相対参照を解決するために使用されるベース URL です。
+これらのメソッドは、無効な URL が渡されると `URL()` コンストラクターがエラーを発生させるのに対し、`parse()` は `null` を返すという点を除いて、同じ方法で相対参照を解決します。
+
+下記コードは、同じ `url` および `base` URL 値を使用してメソッドがどのように使用されるかを示しています。
+
+```js
+const url = "articles";
+const base = "https://developer.mozilla.org/some/path";
+const constructorResult = new URL(url, base);
+// => https://developer.mozilla.org/some/articles
+const parseResult = URL.parse(url, base);
+// => https://developer.mozilla.org/some/articles
+```
+
+例えば、指定されたベース URL と相対参照から `URL` を解決することは、単純に指定された引数を結合するだけではないことが分かります。
+
+この場合、カレントディレクトリーに相対するパス (`articles`) が渡されます。
+ベース URL のカレントディレクトリーは、最後のスラッシュまでの URL 文字列です。
+この例では、`https://developer.mozilla.org/some/path` の末尾にスラッシュが指定されていないため、カレントディレクトリーは `https://developer.mozilla.org/some/` となり、最終的な URL は `https://developer.mozilla.org/some/articles` となります。
+
+相対参照は、カレントディレクトリー (`./`)、カレントディレクトリーの親ディレクトリー (`../`)、またはサイトルート (`/`) に対する相対パス参照を使用して、ベース URL に対して解決されます。
+以下の章では、相対パスの各タイプについて、解決の作業方法を表示させます。
+
+## カレンとディレクトリーからの相対
+
+`./` で始まる相対参照、または接頭辞のない参照、例えば `./article`、`article`、`./article/` は、`base` 引数で表される URL のカレントディレクトリーに対する相対参照です。
+
+```html hidden
+<pre id="log"></pre>
+```
+
+```css hidden
+#log {
+  height: 90px;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+```js hidden
+const logElement = document.getElementById("log");
+function log(text) {
+  logElement.innerText += `${text}\n`;
+}
+```
+
+ベース URL のカレントディレクトリーは、最後のスラッシュまでの URL 文字列であり、下記コードブロックのベース文字列どちらも `https://test.example.org/api/` です。
+カレントディレクトリーから相対参照する `article` がこれに追加され、`https://test.example.org/api/article` に解決されます。
+
+```js
+log(new URL("./article", "https://test.example.org/api/").href);
+// => https://test.example.org/api/article
+log(new URL("article", "https://test.example.org/api/v1").href);
+// => https://test.example.org/api/article
+```
+
+同様に、下記どちらのベース URL 文字列も、カレンとディレクトリーは `https://test.example.org/api/v2/` です。
+最終的な URL を解決するために、これらに `story/` と `story` を追加します。
+
+```js
+log(new URL("./story/", "https://test.example.org/api/v2/").href);
+// => https://test.example.org/api/v2/story/
+log(new URL("./story", "https://test.example.org/api/v2/v3").href);
+// => https://test.example.org/api/v2/story
+```
+
+{{EmbedLiveSample('Current directory relative', '100%', '140px')}}
+
+## 親ディレクトリーからの相対
+
+`../` という接頭辞が付いた相対参照、例えば `../path` は、`base` 引数で表される URL の現在のディレクトリーの親ディレクトリーに対する相対参照です。
+`../` の各インスタンスは現在のディレクトリーからフォルダー内を削除し、`../` 以降のテキストは残りのベースパスに追加されます。
+`../` を複数回指定することで親ディレクトリーに移動できますが、サイトルートのレベルまでです。
+
+例えば、ベース URL `https://test.example.com/test/api/v1/` とその親の相対 URL `../some/path` が指定された場合、カレントディレクトリーは `https://test.example.com/test/api/v1/`、親ディレクトリーは `https://test.example.com/test/api/`、解決された絶対 URL は `https://test.example.com/test/api/some/path` となります。
+
+```html hidden
+<pre id="log"></pre>
+```
+
+```css hidden
+#log {
+  height: 80px;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+```js hidden
+const logElement = document.getElementById("log");
+function log(text) {
+  logElement.innerText += `${text}\n`;
+}
+```
+
+次の例では、この点をより詳しく説明します。
+すべてのケースにおいて、カレントディレクトリーは `https://test.example.org/api/v1/v2/` です（2 つ目のケースでは、`v3` が最後のスラッシュの後に続きます）。相対参照はそれぞれ異なる親ディレクトリを指します。
+
+```js
+log(new URL("../path", "https://test.example.org/api/v1/v2/").href);
+// => https://test.example.org/api/v1/path
+log(new URL("../../path", "https://test.example.org/api/v1/v2/v3").href);
+// => https://test.example.org/api/path
+log(new URL("../../../../path", "https://test.example.org/api/v1/v2/").href);
+// => https://test.example.org/path
+```
+
+{{EmbedLiveSample('Parent-directory relative', '100%')}}
+
+## ルートからの相対
+
+`/` 接頭辞付きの相対参照、たとえば `/path` は、`base` 引数で指定された URL のサイトルートに対する相対パスとなります。
+例えば、ベース URL が `https://test.example.com/api/v1` の場合、ルート相対 URL `/some/path` の解決後の URL は `https://test.example.com/some/path` となります。
+
+> [!NOTE]
+> ルート相対 URL を解決すると、`base` URL のパス部分は関係なくなります。
+
+```html hidden
+<pre id="log"></pre>
+```
+
+```css hidden
+#log {
+  height: 80px;
+  padding: 0.5rem;
+  border: 1px solid black;
+}
+```
+
+```js hidden
+const logElement = document.getElementById("log");
+function log(text) {
+  logElement.innerText += `${text}\n`;
+}
+```
+
+以下に、いくつか例を挙げます。
+
+```js
+log(new URL("/some/path", "https://test.example.org/api/").href);
+// => https://test.example.org/some/path
+log(new URL("/", "https://test.example.org/api/v1/").href);
+// => https://test.example.org/
+log(new URL("/article", "https://example.com/api/v1/").href);
+// => https://example.com/article
+```
+
+{{EmbedLiveSample('Root relative', '100%')}}
+
+## 関連情報
+
+- [RFC 3986 - Relative Resolution](https://datatracker.ietf.org/doc/html/rfc3986.html#section-5.2): ベース及び相対 URL の解決の仕様書
diff --git a/files/ja/web/api/urlsearchparams/delete/index.md b/files/ja/web/api/urlsearchparams/delete/index.md
index b48b97456ad6af..dc67b14b3c113f 100644
--- a/files/ja/web/api/urlsearchparams/delete/index.md
+++ b/files/ja/web/api/urlsearchparams/delete/index.md
@@ -3,10 +3,10 @@ title: "URLSearchParams: delete() メソッド"
 short-title: delete()
 slug: Web/API/URLSearchParams/delete
 l10n:
-  sourceCommit: 92ae2da158d7462890f6d76d9bd605468bd906eb
+  sourceCommit: ed8ef3722c476fffa19914bef27689e7b2048b0e
 ---
 
-{{ApiRef("URL API")}}
+{{ApiRef("URL API")}} {{AvailableInWorkers}}
 
 **`delete()`** は {{domxref("URLSearchParams")}} インターフェイスのメソッドで、すべての検索パラメーターのリストから、指定された検索パラメーターとそれに関連するすべての値を削除します。
 
@@ -14,8 +14,6 @@ l10n:
 パラメーター名のみが指定された場合、その名前に一致するすべての検索パラメーターが、関連する値とともに削除されます。
 パラメーター名と値の両方が指定された場合、パラメーター名と値の両方に一致するすべての検索パラメーターが削除されます。
 
-{{AvailableInWorkers}}
-
 ## 構文
 
 ```js-nolint
@@ -40,55 +38,39 @@ delete(name, value)
 
 この例では、特定の名前を持つクエリーパラメーター（および値）をすべて削除する方法を示します。
 
-```html hidden
-<pre id="log"></pre>
-```
-
-```js hidden
-const logElement = document.getElementById("log");
-function log(text) {
-  logElement.innerText += `${text}\n`;
-}
-```
-
 ```js
 const url = new URL("https://example.com?foo=1&bar=2&foo=3");
 const params = new URLSearchParams(url.search);
-log(`Query string (before):\t ${params}`);
+console.log(`クエリー文字列（変更前）:\t ${params}`);
 params.delete("foo");
-log(`Query string (after):\t ${params}`);
+console.log(`クエリー文字列（変更後）:\t ${params}`);
 ```
 
-以下のログは、`foo` という名前を持つパラメータがすべて削除されていることを示しています。
+以下のログは、`foo` という名前を持つパラメーターがすべて削除されていることを示しています。
 
-{{EmbedLiveSample('Delete all parameters with specified name', '100%', '50')}}
+```plain
+クエリー文字列（変更前）:  foo=1&bar=2&foo=3
+クエリー文字列（変更後）:   bar=2
+```
 
 ### 指定した名前と値を持つパラメーターの削除
 
 この例では、特定の名前と値に一致するクエリーパラメーターを削除する方法を示します。
 
-```html hidden
-<pre id="log"></pre>
-```
-
-```js hidden
-const logElement = document.getElementById("log");
-function log(text) {
-  logElement.innerText += `${text}\n`;
-}
-```
-
 ```js
 const url = new URL("https://example.com?foo=1&bar=2&foo=3&foo=1");
 const params = new URLSearchParams(url.search);
-log(`Query string (before):\t ${params}`);
+console.log(`クエリー文字列（変更前）:\t ${params}`);
 params.delete("foo", "1");
-log(`Query string (after):\t ${params}`);
+console.log(`クエリー文字列（変更後）:\t ${params}`);
 ```
 
 パラメーターの `name` と `value` の両方が一致するパラメーターがすべて削除されるはずです（上記のように、同じ名前と値を持つパラメーターを 2 つ指定する理由はありません）。
 
-{{EmbedLiveSample('Delete parameters with specified name and value', '100%', '50')}}
+```plain
+クエリー文字列（変更前）:  foo=1&bar=2&foo=3&foo=1
+クエリー文字列（変更後）:   bar=2&foo=3
+```
 
 ブラウザーが `value` オプションに対応している場合、"after" の文字列は `bar=2&foo=3` となります。
 そうでない場合、結果は前の例 (`bar=2`) と同じになります。
diff --git a/files/ja/web/api/urlsearchparams/get/index.md b/files/ja/web/api/urlsearchparams/get/index.md
index 9f0f29d2179f30..69f9a9f3a9a26d 100644
--- a/files/ja/web/api/urlsearchparams/get/index.md
+++ b/files/ja/web/api/urlsearchparams/get/index.md
@@ -3,14 +3,12 @@ title: "URLSearchParams: get() メソッド"
 short-title: get()
 slug: Web/API/URLSearchParams/get
 l10n:
-  sourceCommit: 0c8a320b035cf625c1df67713a94ead2e7f3aec6
+  sourceCommit: 4de6f76bbfd76229db78ffb7d52cf6b4cb9f31f8
 ---
 
-{{ApiRef("URL API")}}
+{{ApiRef("URL API")}} {{AvailableInWorkers}}
 
-**`get()`** は {{domxref("URLSearchParams")}} インターフェースのメソッドで、指定された検索パラメーターに関連付けられた最初の値を返します。
-
-{{availableinworkers}}
+**`get()`** は {{domxref("URLSearchParams")}} インターフェイスのメソッドで、指定された検索パラメーターに関連付けられた最初の値を返します。
 
 ## 構文
 
diff --git a/files/ja/web/api/urlsearchparams/has/index.md b/files/ja/web/api/urlsearchparams/has/index.md
index d41956fe6ca514..92743980fc3158 100644
--- a/files/ja/web/api/urlsearchparams/has/index.md
+++ b/files/ja/web/api/urlsearchparams/has/index.md
@@ -3,10 +3,10 @@ title: "URLSearchParams: has() メソッド"
 short-title: has()
 slug: Web/API/URLSearchParams/has
 l10n:
-  sourceCommit: 92ae2da158d7462890f6d76d9bd605468bd906eb
+  sourceCommit: 42d23bc68c42b3eaef5a4a7990499bdf88ff680f
 ---
 
-{{ApiRef("URL API")}}
+{{ApiRef("URL API")}} {{AvailableInWorkers}}
 
 **`has()`** は {{domxref("URLSearchParams")}} インターフェイスのメソッドは、指定された名前のパラメーターが存在するかどうかを示す論理値を返します。
 
@@ -14,8 +14,6 @@ l10n:
 パラメーター名のみが指定された場合、このメソッドはクエリー文字列内のいずれかのパラメーターがその名前と一致した場合に `true` を返し、それ以外の場合は `false` を返します。
 パラメーター名と値の両方が指定された場合、あるパラメーターの名前と値の両方が一致した場合に `true` を返します。
 
-{{AvailableInWorkers}}
-
 ## 構文
 
 ```js-nolint
@@ -40,59 +38,45 @@ has(name, value)
 
 この例では、クエリー文字列に特定の名前のパラメーターがあるかどうかをチェックする方法を示します。
 
-```html hidden
-<pre id="log"></pre>
-```
-
-```js hidden
-const logElement = document.getElementById("log");
-function log(text) {
-  logElement.innerText += `${text}\n`;
-}
-```
-
 ```js
 const url = new URL("https://example.com?foo=1&bar=2&foo=3");
 const params = new URLSearchParams(url.search);
 
 // has() はそのパラメーターがクエリー文字列にある場合に true を返す
-log(`bar?:\t${params.has("bar")}`);
-log(`bark?:\t${params.has("bark")}`);
-log(`foo?:\t${params.has("foo")}`);
+console.log(`bar?:\t${params.has("bar")}`);
+console.log(`bark?:\t${params.has("bark")}`);
+console.log(`foo?:\t${params.has("foo")}`);
 ```
 
 以下のログは、パラメーター `bar`、`bark`、`foo` がクエリー文字列内に存在するかどうかを示しています。
 
-{{EmbedLiveSample('Check for parameter with specified name', '100%', '80')}}
+```plain
+bar?:  true
+bark?: false
+foo?:  true
+```
 
 ### 指定された名前と値を持つパラメーターをチェック
 
 この例では、クエリー文字列に特定の名前と値の両方が一致するパラメーターがあるかどうかをチェックする方法を示します。
 
-```html hidden
-<pre id="log"></pre>
-```
-
-```js hidden
-const logElement = document.getElementById("log");
-function log(text) {
-  logElement.innerText += `${text}\n`;
-}
-```
-
 ```js
 const url = new URL("https://example.com?foo=1&bar=2&foo=3");
 const params = new URLSearchParams(url.search);
 
 // has() は、一致する名前と値を持つパラメーターがクエリー文字列内にある場合に true を返します。
-log(`bar=1?:\t${params.has("bar", "1")}`);
-log(`bar=2?:\t${params.has("bar", "2")}`);
-log(`foo=4?:\t${params.has("foo", "4")}`);
+console.log(`bar=1?:\t${params.has("bar", "1")}`);
+console.log(`bar=2?:\t${params.has("bar", "2")}`);
+console.log(`foo=4?:\t${params.has("foo", "4")}`);
 ```
 
 パラメーター名が `bar` で値が `2` のもののみが一致するので、上記の 2 番目の値のみが `true` になるはずです。
 
-{{EmbedLiveSample('Check for parameter with specified name and value', '100%', '80')}}
+```plain
+bar=1?: false
+bar=2?: true
+foo=4?: false
+```
 
 ブラウザーが `value` オプションに対応していない場合、このメソッドは名前に一致し、結果はすべて `true` になるはずです。
 
diff --git a/files/ja/web/api/urlsearchparams/index.md b/files/ja/web/api/urlsearchparams/index.md
index 7bf65ff5b3b1f2..168a5da83c3fcb 100644
--- a/files/ja/web/api/urlsearchparams/index.md
+++ b/files/ja/web/api/urlsearchparams/index.md
@@ -2,14 +2,14 @@
 title: URLSearchParams
 slug: Web/API/URLSearchParams
 l10n:
-  sourceCommit: 92ae2da158d7462890f6d76d9bd605468bd906eb
+  sourceCommit: 6cca2796f0dcfe90e2b6a069b5e10e0d139278a3
 ---
 
-{{ApiRef("URL API")}}
+{{ApiRef("URL API")}} {{AvailableInWorkers}}
 
-**`URLSearchParams`** インターフェイスは URL のクエリー文字列の操作に役立つメソッドを定義します。
+**`URLSearchParams`** インターフェイスは、URL のクエリー文字列の操作に役立つメソッドを定義します。
 
-`URLSearchParams` を実装しているオブジェクトは、{{jsxref("Statements/for...of", "for...of")}} 構造の中で直接使用して、キーと値のペアをクエリー文字列に現れるのと同じ順序で反復処理することができます。例えば次の 2 行は等価です。
+`URLSearchParams` オブジェクトは[反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#反復可能プロトコル)ですので、{{jsxref("Statements/for...of", "for...of")}} 構造の中で直接使用して、キーと値のペアをクエリー文字列に現れるのと同じ順序で反復処理することができます。例えば次の 2 行は等価です。
 
 ```js
 for (const [key, value] of mySearchParams) {
@@ -18,7 +18,7 @@ for (const [key, value] of mySearchParams.entries()) {
 }
 ```
 
-{{availableinworkers}}
+`URLSearchParams` は機能的には {{jsxref("Map")}} に似ていますが、反復処理を行う際には、`Map` では実装方法の関係で発生しないような[落とし穴](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#concurrent_modifications_when_iterating)に陥る可能性があります。
 
 ## コンストラクター
 
@@ -27,19 +27,19 @@ for (const [key, value] of mySearchParams.entries()) {
 
 ## インスタンスプロパティ
 
-- {{domxref("URLSearchParams.size", 'size')}}
+- {{domxref("URLSearchParams.size", 'size')}} {{ReadOnlyInline}}
   - : 検索パラメーター項目の総数を示します。
 
 ## インスタンスメソッド
 
-- `URLSearchParams.[@@iterator]()`
-  - : このオブジェクトに含まれるすべてのキーと値のペアを、クエリー文字列に現れるのと同じ順序で反復処理することができる{{jsxref("Iteration_protocols","イテレーター")}}を返します。
+- `URLSearchParams[Symbol.iterator]()`
+  - : このオブジェクトに含まれるすべてのキーと値のペアを、クエリー文字列に現れるのと同じ順序で反復処理することができる{{jsxref("Iteration_protocols","イテレーター","","nocode")}}を返します。
 - {{domxref("URLSearchParams.append()")}}
   - : 指定されたキーと値のペアを新しい検索パラメーターとして追加します。
 - {{domxref("URLSearchParams.delete()")}}
   - : 指定された名前と値に一致する検索パラメーターを、検索パラメーターのリストからすべて削除します。
 - {{domxref("URLSearchParams.entries()")}}
-  - : このオブジェクトに含まれるすべてのキーと値のペアを、クエリー文字列に現れるのと同じ順序で反復処理することができる{{jsxref("Iteration_protocols","イテレーター")}}を返します。
+  - : このオブジェクトに含まれるすべてのキーと値のペアを、クエリー文字列に現れるのと同じ順序で反復処理することができる{{jsxref("Iteration_protocols","イテレーター","","nocode")}}を返します。
 - {{domxref("URLSearchParams.forEach()")}}
   - : コールバック関数を介して、このオブジェクトに含まれるすべての値を反復処理します。
 - {{domxref("URLSearchParams.get()")}}
@@ -49,7 +49,7 @@ for (const [key, value] of mySearchParams.entries()) {
 - {{domxref("URLSearchParams.has()")}}
   - : 指定されたパラメーター、またはパラメーターと値のペアが存在するかどうかを示す論理値を返します。
 - {{domxref("URLSearchParams.keys()")}}
-  - : このオブジェクトに含まれるすべてのキーと値のペアのキーを反復処理する {{jsxref("Iteration_protocols", "イテレーター")}}を返します。
+  - : このオブジェクトに含まれるすべてのキーと値のペアのキーを反復処理する {{jsxref("Iteration_protocols","イテレーター","","nocode")}}を返します。
 - {{domxref("URLSearchParams.set()")}}
   - : 指定された検索パラメーターに結び付けられた値を指定された値に設定します。複数の値が存在していた場合、他のものは削除されます。
 - {{domxref("URLSearchParams.sort()")}}
@@ -57,7 +57,7 @@ for (const [key, value] of mySearchParams.entries()) {
 - {{domxref("URLSearchParams.toString()")}}
   - : URL で使用するのに適したクエリー文字列を返します。
 - {{domxref("URLSearchParams.values()")}}
-  - : このオブジェクトに含まれるすべてのキーと値のペアの値を反復処理する {{jsxref("Iteration_protocols", "イテレーター")}}を返します。
+  - : このオブジェクトに含まれるすべてのキーと値のペアの値を反復処理する {{jsxref("Iteration_protocols","イテレーター","","nocode")}}を返します。
 
 ## 例
 
@@ -107,7 +107,7 @@ console.log(searchParams.getAll("foo")); // ["bar", "baz"]
 
 ### URL の解釈なし
 
-`URLSearchParams` コンストラクターは URL 全体を解釈しません。しかし、文字列から最初の `?` 以降が存在すれば、削除します。
+`URLSearchParams` コンストラクターは URL 全体を解釈しません。しかし、もし存在すれば、文字列から最初の `?` 以降を削除します。
 
 ```js
 const paramsString1 = "http://example.com/search?query=%40";
@@ -130,7 +130,7 @@ console.log(searchParams3.has("query")); // true
 
 ### プラス記号の温存
 
-`URLSearchParams` コンストラクターはプラス記号 (`+`) をスペースとして解釈します。以下の例では、[16 進エスケープシーケンス](/ja/docs/Web/JavaScript/Reference/Lexical_grammar#16_進エスケープシーケンス) を使って、URL 検索パラメーターに格納する必要のあるバイナリデータ（各バイトが情報を持つ）を含む文字列を模倣しています。`btoa()` でエンコードされた文字列は `+` を含んでおり、 `URLSearchParams` では温存されないことに注意してください。
+`URLSearchParams` コンストラクターはプラス記号 (`+`) を空白として解釈します。以下の例では、[16 進エスケープシーケンス](/ja/docs/Web/JavaScript/Reference/Lexical_grammar#16_進エスケープシーケンス) を使って、URL 検索パラメーターに格納する必要のあるバイナリーデータ（各バイトが情報を持つ）を含む文字列を模倣しています。`btoa()` でエンコードされた文字列は `+` を含んでおり、 `URLSearchParams` では温存されないことに注意してください。
 
 ```js
 const rawData = "\x13à\x17@\x1F\x80";
diff --git a/files/ja/web/api/urlsearchparams/keys/index.md b/files/ja/web/api/urlsearchparams/keys/index.md
index de06263916153c..634549d97c767a 100644
--- a/files/ja/web/api/urlsearchparams/keys/index.md
+++ b/files/ja/web/api/urlsearchparams/keys/index.md
@@ -3,16 +3,13 @@ title: "URLSearchParams: keys() メソッド"
 short-title: keys()
 slug: Web/API/URLSearchParams/keys
 l10n:
-  sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8
+  sourceCommit: bd15d43260b7e72b1066c04d9d9f3b79129c619c
 ---
 
-{{APIRef("URL API")}}
+{{APIRef("URL API")}} {{AvailableInWorkers}}
 
 **`keys()`** は {{domxref("URLSearchParams")}} インターフェイスのメソッドで、このオブジェクトに含まれるすべてのキーを反復処理できる{{jsxref("Iteration_protocols",'イテレーター')}}を返します。 キーは文字列です。
 
-> [!NOTE]
-> このメソッドは[ウェブワーカー](/ja/docs/Web/API/Web_Workers_API)で利用できます。
-
 ## 構文
 
 ```js-nolint
@@ -54,6 +51,6 @@ key2
 
 {{Compat}}
 
-## 関連項目
+## 関連情報
 
 - {{domxref("URL")}} インターフェイス
diff --git a/files/ja/web/api/web_components/index.md b/files/ja/web/api/web_components/index.md
index 5fc7b9e8dcba3f..cb5578012b09ed 100644
--- a/files/ja/web/api/web_components/index.md
+++ b/files/ja/web/api/web_components/index.md
@@ -2,7 +2,7 @@
 title: ウェブコンポーネント
 slug: Web/API/Web_components
 l10n:
-  sourceCommit: 94b59a847d74883c9cf3a6aed38426c95cf3998b
+  sourceCommit: 839b5e82a117678948392e77b81d64a7f6d03811
 ---
 
 {{DefaultAPISidebar("Web Components")}}
@@ -47,7 +47,7 @@ l10n:
   - : カスタム要素に関わる機能が含まれています。中でも注目すべきは、 {{domxref("CustomElementRegistry.define()")}} メソッドで、新しいカスタム要素を登録するために用います。それにより、カスタム要素を文書内で使用できるようになります。
 - {{domxref("Window.customElements")}}
   - : `CustomElementRegistry` オブジェクトへの参照を返します。
-- [ライフサイクルコールバック](/ja/docs/Web/API/Web_components/Using_custom_elements#ライフサイクルコールバックの使用)
+- [ライフサイクルコールバック](/ja/docs/Web/API/Web_components/Using_custom_elements#カスタム要素のライフサイクルコールバック)
 
   - : カスタム要素のクラス定義の中で定義された特別なコールバック関数で、挙動に影響を与えます。
 
@@ -81,6 +81,9 @@ l10n:
       - : 使われている CSS を含む、[シャドウ DOM](/ja/docs/Web/API/Web_components/Using_shadow_DOM) のシャドウホストを選択します。（シャドウ DOM の内側からカスタム要素を選択することができます。）ただし、関数の引数として渡されるセレクターがシャドウホストに一致している場合に限ります。
     - {{cssxref(":host-context", ":host-context()")}}
       - : 使われている CSS を含む、[シャドウ DOM](/ja/docs/Web/API/Web_components/Using_shadow_DOM) のシャドウホストを選択します。（シャドウ DOM の内側からカスタム要素を選択することができます。）ただし、関数の引数として渡されるセレクターが DOM 階層内のシャドウホストの先祖要素に一致している場合に限ります。
+    - {{CSSxRef(":state",":state()")}}
+      - : 指定したカスタム状態にあるカスタム要素と一致します。
+        より正確に言えば、指定した状態が要素の {{domxref("CustomStateSet")}} に存在する無名カスタム要素と一致します。
 
 - CSS 擬似要素
 
diff --git a/files/ja/web/api/web_components/using_custom_elements/index.md b/files/ja/web/api/web_components/using_custom_elements/index.md
index a47cef72808dc3..08782e3ca72949 100644
--- a/files/ja/web/api/web_components/using_custom_elements/index.md
+++ b/files/ja/web/api/web_components/using_custom_elements/index.md
@@ -2,114 +2,342 @@
 title: カスタム要素の使用
 slug: Web/API/Web_components/Using_custom_elements
 l10n:
-  sourceCommit: 270351317fdaa57ba9123a19aa281e9e40bb0baa
+  sourceCommit: b065c09b79d18abf0f04778c9307e1c312b8c6f9
 ---
 
 {{DefaultAPISidebar("Web Components")}}
 
-ウェブコンポーネント標準の主な特徴の 1 つは、 HTML ページに機能をカプセル化するカスタム要素を作成できることで、カスタムページの機能を提供する要素の長いネストしたバッチを作成する必要がありません。この記事では、カスタム要素 API の使い方を紹介します。
+ウェブコンポーネントの主な特徴のひとつは、カスタム要素を作成できることです。つまり、ウェブ開発者によって動作が定義され、ブラウザーで利用可能な要素セットを拡張する HTML 要素です。
 
-## 高水準のビュー
+この記事では、カスタム要素について紹介し、いくつかの例を説明します。
 
-ウェブ文書上でカスタム要素を制御するのは {{domxref("CustomElementRegistry")}} オブジェクトです。このオブジェクトで、ページへカスタム要素を登録したり、どのようなカスタム要素が登録されているのかを返したりすることができます。
+## カスタム要素の種類
 
-ページにカスタム要素を登録するには、 {{domxref("CustomElementRegistry.define()")}} メソッドを使います。引数に次のものを取ります。
+カスタム要素には 2 つの種類があります。
 
-- 要素に与える名前を表す文字列。カスタム要素の名前は、[ダッシュが使われている名前](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name) (kebab-case) である必要があります。単一の単語にすることはできません。
-- 要素の振る舞いを定義した[クラス](/ja/docs/Web/JavaScript/Reference/Classes)のオブジェクト。
-- {{optional_inline}} `extends` プロパティを含むオプションオブジェクトです。このプロパティは、もしあれば、要素が継承する組み込み要素を指定します（カスタマイズされた組み込み要素にのみ関係します）。
+- **カスタム組み込み要素** (Customized built-in element) は、標準 HTML 要素、例えば {{domxref("HTMLImageElement")}} や {{domxref("HTMLParagraphElement")}} を継承します。これらの実装により、標準要素の特定のインスタンスの動作が拡張されます。
 
-カスタム要素には 2 つの種類があります。
+  > [!NOTE]
+  > カスタム組み込み要素の実装に関する注意事項については、[`is`](/ja/docs/Web/HTML/Global_attributes/is) 属性のリファレンスを参照してください。
+
+- **自律型カスタム要素** (Autonomous custom element) は HTML 要素の基底クラスである {{domxref("HTMLElement")}} を継承します。一から動作を実装する必要があります。
 
-- **自律カスタム要素** (Autonomous custom element) はスタンドアロンです。標準の HTML 要素を継承しません。 HTML 要素としてページ内で記述して使います。例えば、`<popup-info>` あるいは `document.createElement("popup-info")` などです。
-- **カスタマイズされた組み込み要素** (Customized built-in element) は、基礎となる HTML 要素を継承します。これらを作成するには、どの要素を拡張するかを指定する必要があり（上記の例で示した通り）、基本要素を記述し、カスタム要素の名前を [`is`](/ja/docs/Web/HTML/Global_attributes/is) 属性（またはプロパティ）で指定することで使用します。例えば、 `<p is="word-count">` や `document.createElement("p", { is: "word-count" })` のようにします。
+## カスタム要素の実装
 
-例えば、**カスタマイズされた組み込み要素**である [word-count 要素](https://mdn.github.io/web-components-examples/word-count-web-component/)を定義するには次のようにします。
+カスタム要素は、{{domxref("HTMLElement")}} を拡張する[クラス](/ja/docs/Web/JavaScript/Reference/Classes)（自立型要素の場合）またはカスタマイズするインターフェイス（カスタム組み込み要素の場合）として実装されます。
+
+以下は、最小限のカスタム要素で、{{HTMLElement("p")}} 要素をカスタマイズする実装例です。
 
 ```js
-customElements.define("word-count", WordCount, { extends: "p" });
+class WordCount extends HTMLParagraphElement {
+  constructor() {
+    super();
+  }
+  // 要素の機能をここに書く
+}
 ```
 
-この要素は `word-count` と呼ばれ、クラスオブジェクトは `WordCount` であり、 {{htmlelement("p")}} 要素を拡張したものになります。これは拡張された要素内で `is` 属性を設定することでのみ構築することができます。例えば、 `<p is="word-count">` または
-`document.createElement("p", { is: "word-count" })` のようにします。
+最小限の自律型カスタム要素の実装は次のとおりです。
+
+```js
+class PopupInfo extends HTMLElement {
+  constructor() {
+    super();
+  }
+  // 要素の機能をここに書く
+}
+```
+
+クラスの[コンストラクター](/ja/docs/Web/JavaScript/Reference/Classes/constructor)では、初期状態や既定値の設定、イベントリスナーの登録、シャドウルートを作成することなどが可能です。この時点では、要素の属性や子要素を検査したり、新しい属性や子要素を追加したりしないでください。要件のすべてについては、[Requirements for custom element constructors and reactions](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-conformance) を参照してください。
+
+### カスタム要素のライフサイクルコールバック
 
-カスタム要素のクラスのオブジェクトは `class` 構文で実装します。例えば、 `WordCount` は次のように構成します。
+カスタム要素が登録されると、ページのコードがカスタム要素と特定の方法でやり取りを行う際に、ブラウザーがそのクラスの特定のメソッドを呼び出します。 仕様書ではこれらのメソッドの実装を「ライフサイクルコールバック」と呼んでいますが、これらのメソッドを提供することで、これらのイベントに応答してコードを実行することができます。
+
+カスタム要素のライフサイクルコールバックには、以下のものが含まれます。
+
+- `connectedCallback()`: 要素が文書に追加されるたびに呼び出されます。仕様では、開発者は可能な限り、カスタム要素の設定をコンストラクターではなく、このコールバックで実装することを推奨しています。
+- `disconnectedCallback()`: 要素が文書から削除されるたびに呼び出されます。
+- `adoptedCallback()`: 要素が新しい文書に移動されるたびに呼び出されます。
+- `attributeChangedCallback()`: 属性が変更、追加、削除、置換されたときに呼び出されます。このコールバックの詳細については、[属性の変更への応答](#属性の変更への応答)を参照してください。
+
+これらのライフサイクルイベントを記録する最小限のカスタム要素は次のとおりです。
 
 ```js
-class WordCount extends HTMLParagraphElement {
+// 要素のためのクラスを作成
+class MyCustomElement extends HTMLElement {
+  static observedAttributes = ["color", "size"];
+
   constructor() {
-    // コンストラクターでは常に super を最初に呼び出してください
+    // コンストラクターでは、常に super を最初に呼び出す
     super();
+  }
+
+  connectedCallback() {
+    console.log("カスタム要素がページに追加されました。");
+  }
+
+  disconnectedCallback() {
+    console.log("カスタム要素がページから除去されました。");
+  }
 
-    // ここに要素の機能を記述します
+  adoptedCallback() {
+    console.log("カスタム要素が新しいページへ移動されました。");
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    console.log(`属性 ${name} が変更されました。`);
   }
 }
+
+customElements.define("my-custom-element", MyCustomElement);
 ```
 
-> **メモ:** [JavaScript のソース全体](https://github.com/mdn/web-components-examples/blob/main/word-count-web-component/main.js)があります。
+## カスタム要素の登録
 
-これはごく簡単な例ですが、ここでできることはもっとあります。クラスの中でライフサイクルコールバックを定義することにより、要素のライフサイクルの特定の時点で実行することができます。例えば、 `connectedCallback` は文書に接続された要素にカスタム要素が追加されるたびに実行されます。一方 `attributeChangedCallback` はカスタム要素に属性が追加、削除、変更される時に実行されます。
+カスタム要素をページで利用できるようにするには、{{domxref("Window.customElements")}} の {{domxref("CustomElementRegistry.define()", "define()")}} メソッドを呼び出します。
 
-これらについては、下記の[ライフサイクルコールバックの使用](#ライフサイクルコールバックの使用)の節で詳しく学ぶことができます。
+`define()` メソッドは、以下の引数を取ります。
 
-## 簡単な例での作業
+- `name`
+  - : 要素の名前。これは小文字で始まり、ハイフンを含み、仕様書の [definition of a valid name](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name) に記載されているその他の特定のルールを満たす必要があります。
+- `constructor`
+  - : カスタム要素のコンストラクター関数。
+- `options`
+  - : カスタム組み込み要素のみに含まれ、これは単一のプロパティ `extends` を含むオブジェクトです。これは、拡張する組み込み要素の名前を指定する文字列です。
 
-ここで、もう少し簡単な例で、カスタム要素の作成方法をより詳しく説明しましょう。
+例えば、このコードはカスタム組み込み要素である `WordCount` を登録します。
 
-### 自律カスタム要素
+```js
+customElements.define("word-count", WordCount, { extends: "p" });
+```
 
-自律カスタム要素の例を見てみましょう。[`<popup-info-box>`](https://github.com/mdn/web-components-examples/tree/main/popup-info-box-web-component) ([ライブ例](https://mdn.github.io/web-components-examples/popup-info-box-web-component/)も参照) です。これは画像とテキストを受け取り、ページにアイコンを埋め込みます。アイコンにフォーカスすると、テキストをポップアップ情報ボックスに表示し、さらにコンテキスト内の情報を提供します。
+このコードは、`PopupInfo` という自律型カスタム要素を登録します。
 
-最初に汎用的な {{domxref("HTMLElement")}} クラスを継承して `PopupInfo` というクラスを定義する JavaScript ファイルです。
+```js
+customElements.define("popup-info", PopupInfo);
+```
+
+## カスタム要素の使用
+
+カスタム要素を定義し登録すると、コードで使用できるようになります。
+
+カスタム組み込み要素を使用するには、組み込み要素を使用しますが、カスタム名を [`is`](/ja/docs/Web/HTML/Global_attributes/is) 属性の値として使用します。
+
+```html
+<p is="word-count"></p>
+```
+
+自律型カスタム要素を独自に作成して使用するには、組み込みの HTML 要素と同様にカスタム名を使用します。
+
+```html
+<popup-info>
+  <!-- 要素の中身 -->
+</popup-info>
+```
+
+## 属性の変更への応答
+
+組み込み要素と同様に、カスタム要素も HTML 属性を使用して要素の動作を設定することができます。属性を効果的に使用するには、要素が属性値の変更に対応できなければなりません。これを実現するには、カスタム要素を実装するクラスに以下のメンバーを追加する必要があります。
+
+- `observedAttributes` という名前の静的プロパティ。これは、その要素が変更通知を必要とするすべての属性の名前を含む配列でなければなりません。
+- `attributeChangedCallback()` ライフサイクルコールバックの実装。
+
+`attributeChangedCallback()` コールバックは、要素の `observedAttributes` プロパティにリストされた名前の属性が追加、修正、削除、置換されるたびに呼び出されます。
+
+コールバックには 3 つの引数が渡されます。
+
+- 変更された属性の名前。
+- 属性の古い値。
+- 属性の新しい値。
+
+例えば、この自律的な要素は `size` 属性を監視し、値が変更された際に新旧の値を記録します。
 
 ```js
-class PopupInfo extends HTMLElement {
+// 要素のためのクラスを作成
+class MyCustomElement extends HTMLElement {
+  static observedAttributes = ["size"];
+
   constructor() {
-    // コンストラクターでは常に super を最初に呼び出してください
     super();
+  }
 
-    // ここに要素の機能を記述します
+  attributeChangedCallback(name, oldValue, newValue) {
+    console.log(
+      `Attribute ${name} has changed from ${oldValue} to ${newValue}.`,
+    );
   }
 }
+
+customElements.define("my-custom-element", MyCustomElement);
+```
+
+要素の HTML 宣言に監視される属性が含まれている場合、その属性が初期化された後に、要素の宣言が最初に解釈された時点で `attributeChangedCallback()` が呼び出されることに
+注意してください。 したがって、以下の例では、たとえ属性がその後変更されることがなかったとしても、DOM が解釈された時点で `attributeChangedCallback()` が呼び出されます。
+
+```html
+<my-custom-element size="100"></my-custom-element>
 ```
 
-前述のコードスニペットはクラスのコンストラクター ([`constructor()`](/ja/docs/Web/JavaScript/Reference/Classes/constructor)) の定義を含んでいます。ここでは常に [`super()`](/ja/docs/Web/JavaScript/Reference/Operators/super) を最初に呼び出し、正しいプロトタイプチェーンが確立されるようにします。
+`attributeChangedCallback()` の使用を示す完全な例については、このページの[ライフサイクルコールバック](#ライフサイクルコールバックの使用)を参照してください。
+
+### カスタム状態と CSS のカスタム状態擬似クラスセレクター
+
+HTML 要素に組み込まれた要素は、「ホバー」、「無効」、「読み取り専用」など、様々な状態を取ります。。
+これらの状態の一部は、HTML または JavaScript を使用して属性として設定できますが、内部的なものもあり、設定できないものもあります。
+外部または内部に関わらず、これらの状態には通常、特定の状態にある要素を選択し、スタイルを適用するために使用できる対応する [CSS 擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)が存在します。
+
+また、自律型カスタム要素（組み込み要素をベースにした要素を除く）では、擬似クラス関数 `:state()` を使用して状態を定義し、それに対して選択を行うこともできます。
+以下のコードでは、内部状態 "`collapsed`" を持つ自律型カスタム要素の例を使用して、その動作を示しています。
 
-コンストラクターの内部では、その要素のインスタンスが生成されたときに持つすべての機能を定義します。この場合、カスタム要素にシャドウルートを添付し、いくつかの DOM 操作を使用して要素の内部シャドウ DOM 構造を作成します。それをシャドウルートに添付します。そして最後に、いくつかの CSS をシャドウルートに添付してスタイル付けを行います。
+`collapsed` の状態は、要素の外からは見えない論理値プロパティ（セッターとゲッターメソッド付き）として表現されます。
+この状態を CSS で選択できるようにするために、カスタム要素は最初のコンストラクターで {{domxref("HTMLElement.attachInternals()")}} を呼び出し、{{domxref("ElementInternals")}} オブジェクトを装着します。これにより、{{domxref("ElementInternals.states")}} プロパティを通じて {{domxref("CustomStateSet")}} にアクセスできるようになります。
+（内部で）折りたたまれた状態のセッターは、状態が `true` であれば `CustomStateSet` に識別子 `hidden` を追加し、状態が `false` であれば除去します。 識別子は単なる文字列です。この場合、`hidden` と呼びましたが、`collapsed` と読んでも同じように機能します。
 
 ```js
-// シャドウルートを生成
-this.attachShadow({ mode: "open" }); // 'this.shadowRoot' を設定して返す
-
-//（内部の）span 要素を生成
-const wrapper = document.createElement("span");
-wrapper.setAttribute("class", "wrapper");
-const icon = wrapper.appendChild(document.createElement("span"));
-icon.setAttribute("class", "icon");
-icon.setAttribute("tabindex", 0);
-// アイコンを、定義された属性または既定のアイコンから挿入
-const img = icon.appendChild(document.createElement("img"));
-img.src = this.hasAttribute("img")
-  ? this.getAttribute("img")
-  : "img/default.png";
-// 画像を追加する際には、常に説明文を含めるようする
-img.alt = this.hasAttribute("alt") ? this.getAttribute("alt") : "";
-
-const info = wrapper.appendChild(document.createElement("span"));
-info.setAttribute("class", "info");
-// 属性の中身を取得し、 info の span の中に入れる
-info.textContent = this.getAttribute("data-text");
-
-// CSS を作成しシャドウ DOM に割り当てる
-const style = document.createElement("style");
-style.textContent = `.wrapper {
-  /* 簡略化のために CSS は省略 */
-}`;
+class MyCustomElement extends HTMLElement {
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+  }
 
-// 生成された要素をシャドウ DOM に添付する
-this.shadowRoot.append(style, wrapper);
+  get collapsed() {
+    return this._internals.states.has("hidden");
+  }
+
+  set collapsed(flag) {
+    if (flag) {
+      // Existence of identifier corresponds to "true"
+      this._internals.states.add("hidden");
+    } else {
+      // Absence of identifier corresponds to "false"
+      this._internals.states.delete("hidden");
+    }
+  }
+}
+
+// Register the custom element
+customElements.define("my-custom-element", MyCustomElement);
+```
+
+カスタム要素の `CustomStateSet` (`this._internals.states`) に追加された識別子を使用して、要素のカスタム状態と照合することができます。
+これは、[`:state()`](/ja/docs/Web/CSS/:state) 擬似クラスに識別子を渡すと照合されます。
+例えば、下記では、`hidden` セレクターを使用して、`hidden` 状態が `true`（したがって、要素が`collapsed` 状態）であることを選択し、境界線を削除します。
+
+```css
+my-custom-element {
+  border: dashed red;
+}
+my-custom-element:state(hidden) {
+  border: none;
+}
+```
+
+`:state()` 擬似クラスを [`:host()`](/ja/docs/Web/CSS/:host_function) 擬似クラス関数内で使用すると、[カスタム要素のシャドウ DOM 内の](/ja/docs/Web/CSS/:state#matching_a_custom_state_in_a_custom_elements_shadow_dom)カスタム状態と照合することもできます。
+さらに、`:state()` 擬似クラスを [`::part()`](/ja/docs/Web/CSS/::part) 擬似要素の後で使用することで、特定の状態にあるカスタム要素の[シャドウパーツ](/ja/docs/Web/CSS/CSS_shadow_parts)と照合することもできます。
+
+{{domxref("CustomStateSet")}} には、これがどのように動作するのかを示すいくつかのライブサンプルがあります。
+
+## 例
+
+このガイドの残りの部分では、いくつかのカスタム要素の例を見ていきます。 これらの例のすべて、およびその他のソースは、[web-components-examples](https://github.com/mdn/web-components-examples) リポジトリーで参照できます。また、すべてをライブで確認するには、<https://mdn.github.io/web-components-examples/> にアクセスしてください。
+
+### 自律カスタム要素
+
+まず、自律カスタム要素の例を見てみましょう。`<popup-info>` カスタム要素は、画像アイコンとテキスト文字列を属性として取り、アイコンにフォーカスすると、テキストをポップアップ情報ボックスに表示し、さらにコンテキスト内の情報を提供します。
+
+- [この例のライブ実行を確認](https://mdn.github.io/web-components-examples/popup-info-box-web-component/)
+- [ソースコードを参照](https://github.com/mdn/web-components-examples/tree/main/popup-info-box-web-component)
+
+最初に {{domxref("HTMLElement")}} クラスを継承して `PopupInfo` というクラスを定義する JavaScript ファイルです。
+
+```js
+// 要素のためのクラスを作成
+class PopupInfo extends HTMLElement {
+  constructor() {
+    // コンストラクターでは super を常に最初に呼び出す
+    super();
+  }
+
+  connectedCallback() {
+    // シャドウルートを生成
+    const shadow = this.attachShadow({ mode: "open" });
+
+    // span 要素を生成
+    const wrapper = document.createElement("span");
+    wrapper.setAttribute("class", "wrapper");
+
+    const icon = document.createElement("span");
+    icon.setAttribute("class", "icon");
+    icon.setAttribute("tabindex", 0);
+
+    const info = document.createElement("span");
+    info.setAttribute("class", "info");
+
+    // 属性の中身を取得し、情報 span の中に入れる
+    const text = this.getAttribute("data-text");
+    info.textContent = text;
+
+    // アイコンを挿入
+    let imgUrl;
+    if (this.hasAttribute("img")) {
+      imgUrl = this.getAttribute("img");
+    } else {
+      imgUrl = "img/default.png";
+    }
+
+    const img = document.createElement("img");
+    img.src = imgUrl;
+    icon.appendChild(img);
+
+    // いくらかの CSS を生成してシャドウ DOM に適用
+    const style = document.createElement("style");
+    console.log(style.isConnected);
+
+    style.textContent = `
+      .wrapper {
+        position: relative;
+      }
+
+      .info {
+        font-size: 0.8rem;
+        width: 200px;
+        display: inline-block;
+        border: 1px solid black;
+        padding: 10px;
+        background: white;
+        border-radius: 10px;
+        opacity: 0;
+        transition: 0.6s all;
+        position: absolute;
+        bottom: 20px;
+        left: 10px;
+        z-index: 3;
+      }
+
+      img {
+        width: 1.2rem;
+      }
+
+    .icon:hover + .info, .icon:focus + .info {
+        opacity: 1;
+      }
+    `;
+
+    // 生成要素をシャドウ DOM に結びつける
+    shadow.appendChild(style);
+    console.log(style.isConnected);
+    shadow.appendChild(wrapper);
+    wrapper.appendChild(icon);
+    wrapper.appendChild(info);
+  }
+}
 ```
 
+前述のコードスニペットはクラスのコンストラクター（[`constructor()`](/ja/docs/Web/JavaScript/Reference/Classes/constructor)）の定義を含んでいます。ここでは常に [`super()`](/ja/docs/Web/JavaScript/Reference/Operators/super) を最初に呼び出し、正しいプロトタイプチェーンが確立されるようにします。
+
+`connectedCallback()` メソッド内で、要素が DOM に接続された際にその要素が持つすべての機能を定義します。この例では、シャドウルートをカスタム要素に割り当て、DOM 操作を使用して要素の内部シャドウルート構造を作成します（そしてシャドウルートに割り当てます）。最後に、シャドウルートにいくつかの CSS を割り当ててスタイル設定します。要素の属性は DOM に接続されるまで利用できないため、コンストラクターでは処理はうまくいきません。
+
 最後に、カスタム要素を `CustomElementRegistry` に登録します。前述の `define()` を使用して、引数で要素名とその機能を定義するクラス名を指定します。
 
 ```js
@@ -126,55 +354,157 @@ customElements.define("popup-info", PopupInfo);
   back of your card."></popup-info>
 ```
 
-> [!NOTE]
-> こちらで[完全な JavaScript ソース](https://github.com/mdn/web-components-examples/blob/main/popup-info-box-web-component/main.js) を見ることができます。
-
 ### 内部スタイルと外部スタイル
 
-上記の例では {{htmlelement("style")}} 要素を用いてシャドウ DOM にスタイルを適用しましたが、代わりに完全に {{htmlelement("link")}} 要素から外部スタイルシートを参照することが可能です。
+上記の例では、{{htmlelement("style")}} 要素を用いてシャドウ DOM にスタイルを適用しましたが、代わりに {{htmlelement("link")}} 要素から外部スタイルシートを参照することが可能です。この例では、外部スタイルシートを使用するように `<popup-info>` カスタム要素を変更します。
 
-例えば、 [popup-info-box-external-stylesheet](https://mdn.github.io/web-components-examples/popup-info-box-external-stylesheet/) のコードを少し見てみましょう（[ソースコード](https://github.com/mdn/web-components-examples/blob/main/popup-info-box-external-stylesheet/main.js)はこちら）。
+- [この例のライブ実行を確認](https://mdn.github.io/web-components-examples/popup-info-box-external-stylesheet/)
+- [ソースコードを参照](https://github.com/mdn/web-components-examples/tree/main/popup-info-box-external-stylesheet)
+
+こちらがクラス定義です。
 
 ```js
-// 外部スタイルシートをシャドウ DOM に適用
-const linkElem = document.createElement("link");
-linkElem.setAttribute("rel", "stylesheet");
-linkElem.setAttribute("href", "style.css");
+// 要素のためのクラスを作成
+class PopupInfo extends HTMLElement {
+  constructor() {
+    // コンストラクターでは super を常に最初に呼び出す
+    super();
+  }
+
+  connectedCallback() {
+    // シャドウルートを生成
+    const shadow = this.attachShadow({ mode: "open" });
+
+    // span 要素を生成
+    const wrapper = document.createElement("span");
+    wrapper.setAttribute("class", "wrapper");
+
+    const icon = document.createElement("span");
+    icon.setAttribute("class", "icon");
+    icon.setAttribute("tabindex", 0);
+
+    const info = document.createElement("span");
+    info.setAttribute("class", "info");
+
+    // 属性の中身を取得し、情報 span の中に入れる
+    const text = this.getAttribute("data-text");
+    info.textContent = text;
+
+    // アイコンを挿入
+    let imgUrl;
+    if (this.hasAttribute("img")) {
+      imgUrl = this.getAttribute("img");
+    } else {
+      imgUrl = "img/default.png";
+    }
 
-// 生成された要素をシャドウ DOM に添付
-shadow.appendChild(linkElem);
+    const img = document.createElement("img");
+    img.src = imgUrl;
+    icon.appendChild(img);
+
+    // 外部スタイルシートをシャドウ DOM に適用
+    const linkElem = document.createElement("link");
+    linkElem.setAttribute("rel", "stylesheet");
+    linkElem.setAttribute("href", "style.css");
+
+    // 生成した要素をシャドウ DOM に結びつける
+    shadow.appendChild(linkElem);
+    shadow.appendChild(wrapper);
+    wrapper.appendChild(icon);
+    wrapper.appendChild(info);
+  }
+}
 ```
 
+これは、元の `<popup-info>` の例とほぼ同じですが、外部スタイルシートにリンクするために、シャドウ DOM に追加する {{HTMLElement("link")}} 要素を使用している点が異なります。
+
 なお、 {{htmlelement("link")}} 要素はシャドウルートの描画をブロックしないので、スタイルシートのロード中にスタイル付けされていないコンテンツ (FOUC) が一瞬表示されるかもしれないことに注意してください。
 
 最近のブラウザーの多くは、共通のノードからクローンされた、あるいは同一のテキストを持つ {{htmlelement("style")}} タグに対して、単一のバッキングスタイルシートを共有できるようにする最適化を実装しています。この最適化によって、外部スタイルでも内部スタイルでも性能は同程度になるはずです。
 
-### カスタマイズされた組み込み要素
+### カスタム組み込み要素
 
-ここで、もう 1 つの組み込み要素の例を見てみましょう。 [expanding-list](https://github.com/mdn/web-components-examples/tree/main/expanding-list-web-component) です。（[ライブでも確認してください](https://mdn.github.io/web-components-examples/expanding-list-web-component/)） これにより番号なしリストが展開・収納するメニューになります。
+ここで、もう 1 つの組み込み要素の例を見てみましょう。この例は、組み込みの {{HTMLElement("ul")}} 要素を拡張して、リストアイテムが展開・収納するするようにします。
+
+- [この例のライブ実行を確認](https://mdn.github.io/web-components-examples/expanding-list-web-component/)
+- [ソースコードを参照](https://github.com/mdn/web-components-examples/tree/main/expanding-list-web-component)
+
+> [!NOTE]
+> カスタム組み込み要素の実装に関する注意事項については、[`is`](/ja/docs/Web/HTML/Global_attributes/is) 属性のリファレンスを参照してください。
 
 まず始めに、これまでと同様の方法でクラス要素を定義します。
 
 ```js
+// 要素のためのクラスを作成
 class ExpandingList extends HTMLUListElement {
   constructor() {
-    // コンストラクターでは常に super を最初に呼び出してください
-    super();
+    // コンストラクターでは super を常に最初に呼び出す
+    // super() の返値はこの要素への参照
+    self = super();
+  }
 
-    // ここに要素の機能を記述します
+  connectedCallback() {
+    // このカスタム ul 要素の子である ul および li 要素を取得する
+    // li 要素は、その中に ul がある場合、コンテナーとして機能する
+    const uls = Array.from(self.querySelectorAll("ul"));
+    const lis = Array.from(self.querySelectorAll("li"));
+    // すべての子の ul を隠す
+    // これらのリストは、ユーザーが上位レベルのコンテナーをクリックしたときに表示される
+    uls.forEach((ul) => {
+      ul.style.display = "none";
+    });
+
+    // ul内のli要素をそれぞれ見ていく
+    lis.forEach((li) => {
+      // この li に ul が子要素としてある場合、クリックハンドラーを追加する
+      if (li.querySelectorAll("ul").length > 0) {
+        // スタイル設定で使用できる属性を追加し、
+        // 開く・閉じるアイコンを表示させる
+        li.setAttribute("class", "closed");
+
+        // li 要素のテキストを新しい span 要素で囲むことで、
+        // span にスタイルやイベントハンドラーを割り当てることができる
+        const childText = li.childNodes[0];
+        const newSpan = document.createElement("span");
+
+        // li から span にテキストをコピーし、カーソルスタイルを設定
+        newSpan.textContent = childText.textContent;
+        newSpan.style.cursor = "pointer";
+
+        // この span にクリックハンドラーを追加
+        newSpan.addEventListener("click", (e) => {
+          // span 要素の次兄弟要素は ul であるはず
+          const nextul = e.target.nextElementSibling;
+
+          // 表示状態を切り替え、ul の class 属性を更新
+          if (nextul.style.display == "block") {
+            nextul.style.display = "none";
+            nextul.parentNode.setAttribute("class", "closed");
+          } else {
+            nextul.style.display = "block";
+            nextul.parentNode.setAttribute("class", "open");
+          }
+        });
+        // span を追加し、li から裸のテキストノードを除去
+        childText.parentNode.insertBefore(newSpan, childText);
+        childText.parentNode.removeChild(childText);
+      }
+    });
   }
 }
 ```
 
-ここでは要素の詳細な機能については説明しませんが、ソースコードからどのように動作するのか確認することができます。これまでと唯一違う点は、 {{domxref("HTMLUListElement")}} インターフェースを継承しており、 {{domxref("HTMLElement")}} ではないことです。そのため、独立した要素ではなく、 {{htmlelement("ul")}} 要素の特徴を備えた上に、定義した機能を持ちます。これこそが、自律カスタム要素ではなくカスタマイズされた組み込み要素である理由です。
+なお、今回は {{domxref("HTMLElement")}} ではなく、{{domxref("HTMLUListElement")}} を拡張しています。 つまり、リストの既定の動作が得られ、独自のカスタマイズのみを実装すればよいということです。
+
+前回と同様に、コードのほとんどは `connectedCallback()` ライフサイクルコールバック内にあります。
 
-次に、以前と同様に `define()` を用いて要素を登録しますが、今回はこのカスタム要素がどの要素から継承したのかという情報をオプションとして渡しています。
+次に、前回と同様に `define()` メソッドを使用して要素を登録しますが、今回は、カスタム要素が継承する要素の詳細を記載した options オブジェクトも含めます。
 
 ```js
 customElements.define("expanding-list", ExpandingList, { extends: "ul" });
 ```
 
-ウェブ文書内で組み込み要素を使用する場合とはやや異なります。
+ウェブ文書内で組み込み要素を使用すると、また少し違った見え方になります。
 
 ```html
 <ul is="expanding-list">
@@ -184,48 +514,45 @@ customElements.define("expanding-list", ExpandingList, { extends: "ul" });
 
 通常のように `<ul>` を使用していますが、カスタム要素の名前が `is` 属性で指定されています。
 
-> [!NOTE]
-> 繰り返しますが、完全な [JavaScript のソースコード](https://github.com/mdn/web-components-examples/blob/main/expanding-list-web-component/main.js)はこちらにあります。
-
-## ライフサイクルコールバックの使用
-
-カスタム要素のクラス定義内に、いくつかの異なるコールバックを定義できます。これらは要素のライフサイクルのさまざまな時点で起動します。
+この場合、DOM が完全に解釈された後にカスタム要素を定義するスクリプトが実行されるように保証する必要があります。`connectedCallback()` は展開されたリストが DOM に追加されると同時に呼び出されますが、その時点では子要素はまだ追加されていないため、`querySelectorAll()` の呼び出しでは何も見つかりません。これを保証する一つの方法は、スクリプトを記載する行に [defer](/ja/docs/Web/HTML/Element/script#defer) 属性を追加することです。
 
-- `connectedCallback`: 文書に接続された要素にカスタム要素が追加されるたびに呼び出されます。これはそのノードが移動するために発生するので、要素の内容が完全に解釈される前に発生することがあります。
-
-  > **メモ:** `connectedCallback` は要素の接続が終了したときにも呼び出されることがあります。 {{domxref("Node.isConnected")}} を使用して確認してください。
+```html
+<script src="main.js" defer></script>
+```
 
-- `disconnectedCallback`: カスタム要素が文書の DOM から切断されるたびに呼び出されます。
-- `adoptedCallback`: カスタム要素が新しい文書に移動するたびに呼び出されます。
-- `attributeChangedCallback`: カスタム要素の属性の 1 つが追加、削除、変更されるたびに呼び出されます。どの属性の変更が通知されたかは、静的な get `observedAttributes()` メソッドで指定されます。
+## ライフサイクルコールバック
 
-これらの使用例を見てみましょう。以下のコードは [life-cycle-callbacks](https://github.com/mdn/web-components-examples/tree/main/life-cycle-callbacks) の例から引用しています（[実行可能なライブでも確認してください](https://mdn.github.io/web-components-examples/life-cycle-callbacks/)）。これは、ページ上に一定の大きさの色のついた四角形を生成する些細な例です。カスタム要素は次のようなものです。
+これまでは、`connectedCallback()` というライフサイクルコールバックが 1 つだけ動作しているのを見てきました。最後の例である `<custom-square>` では、他にもいくつか見ていきます。この例では、自律型のカスタム要素 `<custom-square>` を紹介します。これは、名前付きの 2 つの属性 `"size"` および `"color"` によってサイズと色が決定される四角形を描画します。
 
-```html
-<custom-square l="100" c="red"></custom-square>
-```
+- [この例のライブ実行を確認](https://mdn.github.io/web-components-examples/life-cycle-callbacks/)
+- [ソースコードを参照](https://github.com/mdn/web-components-examples/tree/main/life-cycle-callbacks)
 
-クラスのコンストラクターは非常に単純です。ここでは、要素にシャドウ DOM を割り当て、空の {{htmlelement("div")}} および {{htmlelement("style")}} 要素をシャドウルートに追加します。
+クラスのコンストラクターでは、要素にシャドウ DOM を割り当て、空の {{htmlelement("div")}} および {{htmlelement("style")}} 要素をシャドウルートに追加します。
 
 ```js
+constructor() {
+  // コンストラクターでは super を常に最初に呼び出す
+  super();
+
 const shadow = this.attachShadow({ mode: "open" });
 
 const div = document.createElement("div");
 const style = document.createElement("style");
 shadow.appendChild(style);
 shadow.appendChild(div);
+}
 ```
 
-この例の主要な機能は `updateStyle()` です。これは要素を取得し、シャドウルートを取得し、その `<style>` 要素を見つけて、{{cssxref("width")}}, {{cssxref("height")}}, および{{cssxref("background-color")}} をそのスタイルに追加します。
+この例の主要な機能は `updateStyle()` です。これは要素を取得し、シャドウルートを取得し、その `<style>` 要素を見つけて、{{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("background-color")}} をそのスタイルに追加します。
 
 ```js
 function updateStyle(elem) {
   const shadow = elem.shadowRoot;
   shadow.querySelector("style").textContent = `
     div {
-      width: ${elem.getAttribute("l")}px;
-      height: ${elem.getAttribute("l")}px;
-      background-color: ${elem.getAttribute("c")};
+      width: ${elem.getAttribute("size")}px;
+      height: ${elem.getAttribute("size")}px;
+      background-color: ${elem.getAttribute("color")};
     }
   `;
 }
@@ -235,7 +562,7 @@ function updateStyle(elem) {
 
 ```js
 connectedCallback() {
-  console.log('Custom square element added to page.');
+  console.log("Custom square element added to page.");
   updateStyle(this);
 }
 ```
@@ -244,19 +571,19 @@ connectedCallback() {
 
 ```js
 disconnectedCallback() {
-  console.log('Custom square element removed from page.');
+  console.log("Custom square element removed from page.");
 }
 
 adoptedCallback() {
-  console.log('Custom square element moved to new page.');
+  console.log("Custom square element moved to new page.");
 }
 ```
 
-`attributeChangedCallback()` コールバックは、要素の属性の 1 つが何らかの方法で変更されるたびに実行されます。そのプロパティからわかるように、属性、属性の名前、および古い属性値と新しい属性値を個別に操作することができます。ただし、この場合は、 `updateStyle()` 関数を再度実行して、新しい値に従って正方形のスタイルが更新されるようにします。
+`attributeChangedCallback()` コールバックは、要素の属性の 1 つが何らかの方法で変更されるたびに実行されます。その引数からわかるように、属性、属性の名前、および古い属性値と新しい属性値を個別に操作することができます。ただし、この場合は、`updateStyle()` 関数を再度実行して、新しい値に従って正方形のスタイルが更新されるようにします。
 
 ```js
 attributeChangedCallback(name, oldValue, newValue) {
-  console.log('Custom square element attributes changed.');
+  console.log("Custom square element attributes changed.");
   updateStyle(this);
 }
 ```
@@ -264,17 +591,7 @@ attributeChangedCallback(name, oldValue, newValue) {
 ある属性が変更されたときに起動する `attributeChangedCallback()` コールバックを取得するには、その属性を監視する必要があることに注意してください。これは、カスタム要素クラス内で `static get observedAttributes()` メソッドを定義することによって行われます。これは、監視したい属性の名前を含む配列を返すようにしてください。
 
 ```js
-static get observedAttributes() { return ['c', 'l']; }
+static get observedAttributes() {
+  return ["color", "size"];
+}
 ```
-
-この例では、これはコンストラクターの最上部に配置されています。
-
-> **メモ:** [完全な JavaScript のソース](https://github.com/mdn/web-components-examples/blob/main/life-cycle-callbacks/main.js)はこちらにあります。
-
-## トランスパイラーとクラス
-
-古いブラウザーを対象とした Babel 6 や TypeScript では、クラスが期待通りにトランスパイルされない可能性があることに注意してください。 Babel 7 もしくは Babel 6 の [babel-plugin-transform-builtin-classes](https://www.npmjs.com/package/babel-plugin-transform-builtin-classes) を使用すると、 TypeScript で古いブラウザーではなく ES2015 をターゲットとすることができます。
-
-## ライブラリー
-
-カスタム要素を作る際に抽象度を高めることを目的とした、ウェブコンポーネントで実装されたライブラリーがあります。これらのライブラリーには、 [FASTElement](https://www.fast.design/docs/fast-element/getting-started), [snuggsi](https://github.com/devpunks/snuggsi), [X-Tag](https://x-tag.github.io/), [Slim.js](https://slimjs.com/), [Lit](https://lit.dev/), [Smart](https://www.htmlelements.com/), [Stencil](https://stenciljs.com), [hyperHTML-Element](https://github.com/WebReflection/hyperHTML-Element), [DataFormsJS](https://www.dataformsjs.com/), [Custom-Element-Builder](https://tmorin.github.io/ceb/) などがあります。
diff --git a/files/ja/web/api/web_components/using_shadow_dom/index.md b/files/ja/web/api/web_components/using_shadow_dom/index.md
index d36b5f94b5c512..a6ef38c3aa833b 100644
--- a/files/ja/web/api/web_components/using_shadow_dom/index.md
+++ b/files/ja/web/api/web_components/using_shadow_dom/index.md
@@ -2,29 +2,28 @@
 title: シャドウ DOM の使用
 slug: Web/API/Web_components/Using_shadow_DOM
 l10n:
-  sourceCommit: de954cbfe1c070de631cdaf91005c7def339c344
+  sourceCommit: 9d76a1d4601c8e0042732899a99b6fecde2c919d
 ---
 
 {{DefaultAPISidebar("Web Components")}}
 
-ウェブコンポーネントにおける重要な側面の一つが、カプセル化です。マークアップ構造、スタイル、動作を隠蔽し、コード上の他のコードから分離することで、他の部分でクラッシュすることを防ぎ、コードをきれいにしておくことができます。シャドウ DOM API はこの主要部分であり、隠蔽され分離された DOM を要素に取り付けるための方法を提供しています。この記事ではシャドウ DOM を使う基本を記述しています。
+カスタム要素の重要な側面の一つがカプセル化です。なぜなら、カスタム要素は定義上、再利用可能な機能の一部であり、任意のウェブページにドロップして動作させることが期待されるからです。そのため、ページで実行されるコードが、内部実装を変更することでカスタム要素を誤って壊すことがないようにすることが重要です。シャドウ DOM を使用すると、DOM ツリーを要素に割り当て、ページで実行される JavaScript や CSS からこのツリーの内部を隠すことができます。
 
-## 高水準のビュー
+この記事では、シャドウ DOM の使用法の基本について説明します。
+
+## 高水準の視点
 
 この記事は、すでにあなたが [DOM (Document Object Model)](/ja/docs/Web/API/Document_Object_Model/Introduction) の概念を理解していることを想定しています。これはツリー上の構造で、接続されたノードがマークアップ文書（ウェブ文書の場合は通常 HTML 文書）に現れるさまざまな要素や文字列を表します。例として、以下のような HTML の断片を考えてみましょう。
 
 ```html
-<!doctype html>
 <html lang="en-US">
   <head>
     <meta charset="utf-8" />
-    <title>Simple DOM example</title>
+    <title>DOM example</title>
   </head>
   <body>
     <section>
-      <img
-        src="dinosaur.png"
-        alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." />
+      <img src="dinosaur.png" alt="A red Tyrannosaurus Rex." />
       <p>
         Here we will add a link to the
         <a href="https://www.mozilla.org/">Mozilla homepage</a>
@@ -34,9 +33,22 @@ l10n:
 </html>
 ```
 
-この断片によって以下のような DOM 構造が構成されます。
-
-![要素とテキストノードを持つDOMツリー、要素の属性名と内容を含めるために、空でないテキストノードのコンテンツ。](dom-screenshot.png)
+このフラグメントは、以下の DOM 構造を生成します（ホワイトスペースのみのテキストノードを除く）。
+
+```plain
+- HTML
+    - HEAD
+        - META charset="utf-8"
+        - TITLE
+            - #text: DOM example
+    - BODY
+        - SECTION
+            - IMG src="dinosaur.png" alt="A red Tyrannosaurus Rex."
+            - P
+                - #text: Here we will add a link to the
+                - A href="https://www.mozilla.org/"
+                    - #text: Mozilla homepage
+```
 
 _シャドウ_ DOM により、通常の DOM ツリーの要素の下に隠れた DOM ツリーを取り付けることができます。このシャドウ DOM ツリーはシャドウルートから始まり、その下には普通の DOM ツリーと同様に任意の要素を追加することができます。
 
@@ -51,180 +63,329 @@ _シャドウ_ DOM により、通常の DOM ツリーの要素の下に隠れ
 
 シャドウ DOM 内のノードには、シャドウでないノードと全く同じように影響を与えることができます。たとえば、子を追加したり、属性を設定したり、element.style.foo を使用して個々のノードのスタイルを設定したり、 {{htmlelement("style")}} 要素内でシャドウ DOM ツリー全体へのスタイルを追加したりすることができます。違いは、シャドウ DOM 内のどのコードもその外の何かに影響を与えることができず、便利なカプセル化ができることです。
 
-なお、シャドウ DOM は決して新しいものではありません。ブラウザーは長い間、要素の内部構造をカプセル化するためにこれを使用してきました。例えば、既定のブラウザーコントロールが公開されている {{htmlelement("video")}} 要素を思い浮かべてください。 DOM には `<video>` 要素しか表示されませんが、そのシャドウ DOM の内部には、一連のボタンやその他のコントロールが含まれています。 シャドウ DOM 仕様書により、独自のカスタム要素のシャドウ DOM を実際に操作することができるようになりました。
+ウェブ開発者がシャドウ DOM を利用できるようになる前から、ブラウザーはすでに要素の内部構造をカプセル化するためにシャドウ DOM を使用していました。例えば、既定のブラウザーコントロールが公開されている {{htmlelement("video")}} 要素を思い浮かべてください。 DOM には `<video>` 要素しか表示されませんが、そのシャドウ DOM の内部には、一連のボタンやその他のコントロールが含まれています。 シャドウ DOM 仕様書では、自分自身でカスタマイズした要素のシャドウ DOM を操作できるようにします。
 
-## 基本的な使い方
+### 属性の継承
 
-任意の要素にシャドウルートを取り付けるには {{domxref("Element.attachShadow()")}} メソッドを使用します。このメソッドはオプションオブジェクトを引数として取り、その中にはオプションが 1 つ、 `mode` オプションを `open` または `closed` の値で取ります。
+シャドウツリーと {{ HTMLElement("slot") }} 要素は、シャドウホストから [`dir`](/ja/docs/Web/HTML/Global_attributes/dir) および [`lang`](/ja/docs/Web/HTML/Global_attributes/lang) 属性を継承しています。
 
-```js
-const shadowOpen = elementRef.attachShadow({ mode: "open" });
-const shadowClosed = elementRef.attachShadow({ mode: "closed" });
+## シャドウ DOM の作成
+
+### JavaScript で命令的に
+
+次のページには、2つの要素が含まれています。{{htmlelement("div")}} 要素で [`id`](/ja/docs/Web/HTML/Global_attributes/id) が `"host"` であるものと、テキストを格納する {{htmlelement("span")}} 要素です。
+
+```html
+<div id="host"></div>
+<span>I'm not in the shadow DOM</span>
 ```
 
-`open` の場合は、シャドウ DOM にメインページに書かれた JavaScript からアクセスできます。以下のように {{domxref("Element.shadowRoot")}} プロパティを利用してアクセスできます。
+`"host"` の要素をシャドウホストとして使用します。このホスト上で {{domxref("Element.attachShadow()", "attachShadow()")}} を呼び出してシャドウ DOM を作成し、このシャドウ DOM には、メイン DOM に対して行うのと同じようにノードを追加することができます。この例では、単一の `<span>` 要素を追加します。
 
 ```js
-const myShadowDom = myCustomElem.shadowRoot;
+const host = document.querySelector("#host");
+const shadow = host.attachShadow({ mode: "open" });
+const span = document.createElement("span");
+span.textContent = "I'm in the shadow DOM";
+shadow.appendChild(span);
 ```
 
-シャドウルートを `mode: "closed"` が設定された状態で取り付けた場合、外部からシャドウ DOM にアクセスすることができません。 `myCustomElem.shadowRoot` は `null` を返します。シャドウ DOM を含む既成の要素、例えば `<video>` などはこれに該当します。
+結果は次のようになります。
 
-なお、同じ JavaScript の領域内において、これはシャドウルートを隠す方法として完全に安全な訳ではありません。コードが `Element.prototype.attachShadow` を上書きして、常に `mode: "open"` を使用することが可能だと[このブログ記事](https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af)が示しています。しかし、悪意のあるコードがグローバルを操作することが懸念される環境でない限り、このことを心配する必要はないでしょう。さらに、ウェブ拡張機能はウィンドウのグローバルにアクセスしないため、シャドウ DOM をウェブ拡張機能から確実に保護することができます。
+{{EmbedLiveSample("Imperatively with JavaScript")}}
 
-シャドウ DOM をカスタム要素のコンストラクターの一部として取り付けた場合（シャドウ DOM の最も有用な用途です）、次のような方法を使用することになります。
+### HTML で宣言的に
 
-```js
-const shadow = this.attachShadow({ mode: "open" });
+シャドウ DOM を作成するのに JavaScript API を使用する方法は、クライアント側でレンダリングされるアプリケーションには良い選択肢かもしれません。それ以外のアプリケーションでは、サーバー側でレンダリングされた UI の方がパフォーマンスが良いことが多く、その結果、より使い勝手の良いものにできる可能性があります。そのような場合、{{htmlelement("template")}} 要素を使用してシャドウ DOM を宣言的に定義することができます。この動作の鍵となるのは{{glossary("enumerated","列挙型")}}の `shadowrootmode` 属性です。これは `open` または `closed` のどちらかに設定することができ、{{domxref("Element.attachShadow()", "attachShadow()")}} メソッドの `mode` オプションと同じ値です。
+
+```html
+<div id="host">
+  <template shadowrootmode="open">
+    <span>I'm in the shadow DOM</span>
+  </template>
+</div>
 ```
 
-シャドウ DOM を要素に取り付けた場合、その操作は通常の DOM 操作と同じ DOM API を使うだけでよいのです。
+{{EmbedGHLiveSample("dom-examples/shadow-dom/shadowrootmode/simple.html", "", "")}}
 
-```js
-const para = document.createElement("p");
-shadow.appendChild(para);
-// etc.
+> [!NOTE]
+> 既定では、`<template>` の内容は表示されません。この場合、`shadowrootmode="open"` が記載されているため、シャドウルートがレンダリングされます。対応しているブラウザーでは、そのシャドウルート内の可視コンテンツが表示されます。
+
+ブラウザーが HTML を解釈し終えると、 {{htmlelement("template")}} 要素は、親要素（この例では `<div id="host">`）に追加された[シャドウルート](/ja/docs/Glossary/Shadow_tree)にラップされた内容に置き換えられます。その結果の DOM ツリーは次のようになります（DOM ツリーには `<template>` 要素はありません）。
+
+```plain
+- DIV id="host"
+  - #shadow-root
+    - SPAN
+      - #text: I'm in the shadow DOM
 ```
 
-## 簡単な例を一通り扱う
+なお、`shadowrootmode` に加えて、 `<template>` の `shadowrootclonable` や `shadowrootdelegatesfocus` 属性などの使用して、生成されるシャドウルートに他のプロパティを指定することができます。
 
-カスタム要素内のシンプルなシャドウ DOM を見てみましょう。 [`<popup-info>`](https://github.com/mdn/web-components-examples/tree/main/popup-info-box-web-component) （[ライブ例](https://mdn.github.io/web-components-examples/popup-info-box-web-component/)を参照）です。この要素は画像アイコンとテキストを取り、アイコンをページに埋め込みます。アイコンがフォーカスされるとポップアップが表示され、さらなる情報を提供します。まずは `HTMLElement` を拡張して `PopUpInfo` というクラスを定義します。
+## JavaScript からのカプセル化
 
-```js
-class PopUpInfo extends HTMLElement {
-  constructor() {
-    // コンストラクターでは常に super を最初に呼び出してください
-    super();
+ここまでは、それほど多くはないように見えるかもしれません。しかし、ページで実行しているコードが、シャドウ DOM 内の要素にアクセスしようとした場合、何が起こるか見ていきましょう。
+
+このページは、2 つの {{htmlelement("button")}} 要素を追加したことを除いて、先のページと同じです。
+
+```html
+<div id="host"></div>
+<span>I'm not in the shadow DOM</span>
+<br />
+
+<button id="upper" type="button">Uppercase span elements</button>
+<button id="reload" type="button">Reload</button>
+```
+
+"Uppercase span elements" ボタンをクリックすると、ページ内のすべての `<span>` 要素を探し、そのテキストを大文字に変換します。
+"Reload" ボタンをクリックすると、ページが再読み込みされるので、もう一度試してみることができます。
 
-    // ここに要素の機能を記述します
+```js
+const host = document.querySelector("#host");
+const shadow = host.attachShadow({ mode: "open" });
+const span = document.createElement("span");
+span.textContent = "I'm in the shadow DOM";
+shadow.appendChild(span);
+
+const upper = document.querySelector("button#upper");
+upper.addEventListener("click", () => {
+  const spans = Array.from(document.querySelectorAll("span"));
+  for (const span of spans) {
+    span.textContent = span.textContent.toUpperCase();
   }
-}
+});
+
+const reload = document.querySelector("#reload");
+reload.addEventListener("click", () => document.location.reload());
 ```
 
-クラス定義の中で、要素のコンストラクターを定義し、その中で要素のインスタンスが生成されたときに、その要素が持つすべての機能を定義します。
+"Uppercase span elements" をクリックすると、{{domxref("Document.querySelectorAll()")}} が私たちのシャドウ DOM 内の要素を探していないことがわかります。それらはページ内の JavaScript から効果的に隠されています。
+
+{{EmbedLiveSample("Encapsulation from JavaScript")}}
 
-### シャドウルートの作成
+## Element.shadowRoot および "mode" オプション
 
-最初にシャドウルートをカスタム要素に追加します。
+上記の例では、引数 `{ mode: "open" }` を `attachShadow()` に渡しています。 モードが `"open"` に設定されている場合、ページ内の JavaScript は、シャドウホストの {{domxref("Element.shadowRoot", "shadowRoot")}} プロパティを通じて、シャドウ DOM の内部にアクセスすることができます。
+
+この例では、前述の例と同様に、HTML はシャドウホスト、メインの DOM ツリー内の `<span>` 要素、および 2 つのボタンを含んでいます。
+
+```html
+<div id="host"></div>
+<span>I'm not in the shadow DOM</span>
+<br />
+
+<button id="upper" type="button">Uppercase shadow DOM span elements</button>
+<button id="reload" type="button">Reload</button>
+```
+
+この時点では、"Uppercase" ボタンは `shadowRoot` を使用して DOM 内の `<span>` 要素を探します。
 
 ```js
-// シャドウルートを生成
-const shadow = this.attachShadow({ mode: "open" });
+const host = document.querySelector("#host");
+const shadow = host.attachShadow({ mode: "open" });
+const span = document.createElement("span");
+span.textContent = "I'm in the shadow DOM";
+shadow.appendChild(span);
+
+const upper = document.querySelector("button#upper");
+upper.addEventListener("click", () => {
+  const spans = Array.from(host.shadowRoot.querySelectorAll("span"));
+  for (const span of spans) {
+    span.textContent = span.textContent.toUpperCase();
+  }
+});
+
+const reload = document.querySelector("#reload");
+reload.addEventListener("click", () => document.location.reload());
 ```
 
-### シャドウ DOM 構造の作成
+この時点では、ページで実行されている JavaScript は、シャドウ DOM の内部にアクセスすることができます。
 
-次に、いくつかの DOM 操作を使用して、要素の内部シャドウ DOM 構造を作成します。
+{{EmbedLiveSample("Element.shadowRoot and the \"mode\" option")}}
 
-```js
-// span の生成
-const wrapper = document.createElement("span");
-wrapper.setAttribute("class", "wrapper");
-const icon = document.createElement("span");
-icon.setAttribute("class", "icon");
-icon.setAttribute("tabindex", "0");
-const info = document.createElement("span");
-info.setAttribute("class", "info");
+引数 `{mode: "open"}` は、ページにシャドウ DOM のカプセル化を解除する方法を提供します。ページにこの機能を与えたくない場合は、代わりに `{mode: "closed"}` を渡すと、`shadowRoot` は `null` を返します。
 
-// 属性の中身を取得し、 info の span の中に入れる
-const text = this.getAttribute("data-text");
-info.textContent = text;
+しかし、これを強力なセキュリティの仕組みだと考えるべきではありませ ん。例えば、ページで実行するブラウザー拡張機能など、回避する方法があるからです。むしろ、ページがシャドウ DOM ツリーの内部にアクセスすべきではないことを示すものです。
 
-// アイコンを挿入
-const img = document.createElement("img");
-img.src = this.hasAttribute("img")
-  ? this.getAttribute("img")
-  : "img/default.png";
-img.alt = this.hasAttribute("alt") ? this.getAttribute("alt") : "";
-icon.appendChild(img);
-```
+## CSS からのカプセル化
 
-### シャドウ DOM のスタイル付け
+このページのこのバージョンでは、HTML は元のバージョンと同じです。
 
-そのあと、 {{htmlelement("style")}} 要素を作り CSS でスタイルを付けます。
+```html
+<div id="host"></div>
+<span>I'm not in the shadow DOM</span>
+```
+
+JavaScript では、シャドウ DOM を作成します。
 
 ```js
-// CSS を生成してシャドウ DOM に適用
-let style = document.createElement("style");
+const host = document.querySelector("#host");
+const shadow = host.attachShadow({ mode: "open" });
+const span = document.createElement("span");
+span.textContent = "I'm in the shadow DOM";
+shadow.appendChild(span);
+```
 
-style.textContent = `
-.wrapper {
-  position: relative;
-}
+今回は、ページ内の `<span>` 要素を対象とする CSS を指定します。
 
-.info {
-  font-size: 0.8rem;
-  width: 200px;
-  display: inline-block;
+```css
+span {
+  color: blue;
   border: 1px solid black;
-  padding: 10px;
-  background: white;
-  border-radius: 10px;
-  opacity: 0;
-  transition: 0.6s all;
-  position: absolute;
-  bottom: 20px;
-  left: 10px;
-  z-index: 3;
 }
+```
 
-img {
-  width: 1.2rem;
-}
+ページの CSS は、シャドウ DOM 内のノードには影響しません。
 
-.icon:hover + .info, .icon:focus + .info {
-  opacity: 1;
-}`;
-```
+{{EmbedLiveSample("Encapsulation from CSS")}}
 
-### シャドウ DOM をシャドウルートに追加
+## シャドウ DOM 内にスタイルを適用
 
-最後のステップは、生成した要素すべてをシャドウルートに取り付けることです。
+この節では、シャドウ DOM ツリー内でスタイル設定を行う 2 つの異なる方法を見ていきます。
 
-```js
-// 生成した要素をシャドウ DOM に取り付ける
-shadow.appendChild(style);
-shadow.appendChild(wrapper);
-wrapper.appendChild(icon);
-wrapper.appendChild(info);
-```
+- [プログラム的](#構築可能なスタイルシート)な方法。{{domxref("CSSStyleSheet")}} オブジェクトを構築し、それをシャドウルートに添付します。
+- [宣言的](#template_宣言への_style_要素の追加)な方法。 {{htmlelement("template")}} 要素の宣言に {{htmlelement("style")}} 要素を追加します。
+
+どちらの場合も、シャドウ DOM ツリーで定義されたスタイルはそのツリーにのみ適用されるため、ページスタイルがシャドウ DOM の要素に影響を与えないのと同様に、シャドウ DOM スタイルはページの他の部分の要素に影響を与えません。
 
-### カスタム要素の使用
+### 構築可能なスタイルシート
 
-一度クラスを定義すれば、[カスタム要素の使用](/ja/docs/Web/API/Web_components/Using_custom_elements)で説明したように、その要素を定義し、ページに配置するだけで簡単に使用できるようになります。
+シャドウ DOM のページ要素を構築可能なスタイルシートでスタイル設定するには、次の方法があります。
+
+1. 空の {{domxref("CSSStyleSheet")}} オブジェクトを作成する
+2. {{domxref("CSSStyleSheet.replace()")}} または {{domxref("CSSStyleSheet.replaceSync()")}} を使用して内容を設定
+3. それを {{domxref("ShadowRoot.adoptedStyleSheets")}} へ代入することでシャドウルートへ追加
+
+`CSSStyleSheet` で定義されたルールは、シャドウ DOM ツリーだけでなく、他にも割り当てられた DOM ツリーにも適用されます。
+
+ここで、再び、ホストと `<span>` を格納する HTML は次のとおりです。
+
+```html
+<div id="host"></div>
+<span>I'm not in the shadow DOM</span>
+```
+
+今回は、シャドウ DOM を作成し、`CSSStyleSheet` オブジェクトを割り当てます。
 
 ```js
-// 新しい要素を定義
-customElements.define("popup-info", PopUpInfo);
+const sheet = new CSSStyleSheet();
+sheet.replaceSync("span { color: red; border: 2px dotted black;}");
+
+const host = document.querySelector("#host");
+
+const shadow = host.attachShadow({ mode: "open" });
+shadow.adoptedStyleSheets = [sheet];
+
+const span = document.createElement("span");
+span.textContent = "I'm in the shadow DOM";
+shadow.appendChild(span);
 ```
 
+シャドウ DOM ツリーで定義されたスタイルは、ページの他の部分には適用されません。
+
+{{EmbedLiveSample("Constructable stylesheets")}}
+
+### `<template>` 宣言への `<style>` 要素の追加
+
+`CSSStyleSheet` オブジェクトを作成する代わりに、{{htmlelement("style")}} 要素をウェブコンポーネントを定義するために使用する {{htmlelement("template")}} 要素内に記載することもできます。
+
+この場合、HTML には次の `<template>` 宣言が含まれます。
+
 ```html
-<popup-info
-  img="img/alt.png"
-  data-text="Your card validation code (CVC) is an extra security feature — it is the last 3 or 4 numbers on the back of your card."></popup-info>
+<template id="my-element">
+  <style>
+    span {
+      color: red;
+      border: 2px dotted black;
+    }
+  </style>
+  <span>I'm in the shadow DOM</span>
+</template>
+
+<div id="host"></div>
+<span>I'm not in the shadow DOM</span>
 ```
 
-### 内部スタイルと外部スタイル
+JavaScript で、シャドウ DOM を作成し、そこに `<template>` の内容を追加します。
 
-上記の例では {{htmlelement("style")}} 要素を用いてシャドウ DOM にスタイルを適用しましたが、代わりに完全に {{htmlelement("link")}} 要素から外部スタイルシートを参照することが可能です。
+```js
+const host = document.querySelector("#host");
+const shadow = host.attachShadow({ mode: "open" });
+const template = document.getElementById("my-element");
+
+shadow.appendChild(template.content);
+```
+
+繰り返しになりますが、`<template>` で定義されたスタイルはシャドウ DOM ツリー内でのみ適用され、ページの他の部分には適用されません。
+
+{{EmbedLiveSample("adding_style_elements_in_template_declarations")}}
+
+### プログラム型と宣言型の選択肢の選択
+
+どのオプションを使用するかは、アプリケーションと環境設定によって異なります。
+
+`CSSStyleSheet` を作成し、`adoptedStyleSheets` を使用してシャドウルートに割り当てることで、単一のスタイルシートを作成し、それを複数の DOM ツリーで共有することができます。例えば、コンポーネントライブラリーで単一のスタイルシートを作成し、そのライブラリーに属するすべてのカスタム要素で共有することができます。このスタイルシートは、ブラウザーによって一度だけ解釈されます。また、スタイルシートに動的な変更を加え、そのシートを使用するすべてのコンポーネントに伝搬させることもできます。
+
+`<style>` 要素を添付する手法は、宣言的でありたい場合や、保有するスタイルがいくつかある場合、異なるコンポーネント間でスタイルを共有する必要がない場合に最適です。
+
+## シャドウ DOM とカスタム要素
 
-例えば、 [popup-info-box-external-stylesheet](https://mdn.github.io/web-components-examples/popup-info-box-external-stylesheet/) のコードを少し見てみましょう（[ソースコード](https://github.com/mdn/web-components-examples/blob/main/popup-info-box-external-stylesheet/main.js)はこちら）。
+シャドウ DOM によってカプセル化が提供されなければ、[カスタム要素](/ja/docs/Web/API/Web_components/Using_custom_elements)は非常に壊れやすいものになってしまいます。 ページで実行する JavaScript や CSS によって、カスタム要素の動作やレイアウトが誤って壊れてしまうことが簡単に起こり得ます。 カスタム要素を開発する立場では、カスタム要素内で適用されるセレクターが、カスタム要素を使用することを選んだページで適用されるセレクターと競合しているかどうかを知ることはできません。
+
+カスタム要素は、ベースの {{domxref("HTMLElement")}} または {{domxref("HTMLParagraphElement")}} などの組み込みの HTML 要素を拡張するクラスとして実装されます。通常、カスタム要素自体がシャドウホストとなり、その要素がルートの下に複数の要素を作成し、要素の内部実装を提供します。
+
+次の例では、単一色で塗りつぶされた円を描画するカスタム要素 `<filled-circle>` を作成します。
 
 ```js
-// 外部スタイルシートをシャドウ DOM に適用
-const linkElem = document.createElement("link");
-linkElem.setAttribute("rel", "stylesheet");
-linkElem.setAttribute("href", "style.css");
+class FilledCircle extends HTMLElement {
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    // Create a shadow root
+    // The custom element itself is the shadow host
+    const shadow = this.attachShadow({ mode: "open" });
+
+    // create the internal implementation
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    const circle = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "circle",
+    );
+    circle.setAttribute("cx", "50");
+    circle.setAttribute("cy", "50");
+    circle.setAttribute("r", "50");
+    circle.setAttribute("fill", this.getAttribute("color"));
+    svg.appendChild(circle);
+
+    shadow.appendChild(svg);
+  }
+}
 
-// 生成された要素をシャドウ DOM に添付
-shadow.appendChild(linkElem);
+customElements.define("filled-circle", FilledCircle);
+```
+
+```html
+<filled-circle color="blue"></filled-circle>
 ```
 
-なお、 {{htmlelement("link")}} 要素はシャドウルートの描画をブロックしないので、スタイルシートのロード中にスタイル付けされていないコンテンツ (FOUC) が一瞬表示されるかもしれないことに注意してください。
+{{EmbedLiveSample("Shadow DOM and custom elements", 100, 160)}}
 
-最近のブラウザーの多くは、共通のノードからクローンされた、あるいは同一のテキストを持つ {{htmlelement("style")}} タグに対して、単一のバッキングスタイルシートを共有できるようにする最適化を実装しています。この最適化によって、外部スタイルでも内部スタイルでも性能は同程度になるはずです。
+カスタム要素の実装のさまざまな側面を示す例については、[カスタム要素のガイド]を参照してください。
 
 ## 関連情報
 
 - [カスタム要素の使用](/ja/docs/Web/API/Web_components/Using_custom_elements)
 - [テンプレートとスロットの使用](/ja/docs/Web/API/Web_components/Using_templates_and_slots)
+- {{domxref("Element.attachShadow()")}}
+- {{domxref("ShadowRoot.adoptedStyleSheets")}}
+- {{domxref("CSSStyleSheet.replace()")}}
+- {{domxref("CSSStyleSheet.replaceSync()")}}
+- {{HTMLelement("template")}}
+- [CSS スコープ化](/ja/docs/Web/CSS/CSS_scoping)モジュール
+- {{CSSXref(":host")}}
+- {{CSSXref(":host_function", ":host()")}}
+- {{CSSXref(":host-context", ":host-context()")}}
+- {{CSSXref("::slotted", "::slotted()")}}
+- [CSS シャドウパーツ](/ja/docs/Web/CSS/CSS_shadow_parts)モジュール
+- {{CSSXref("::part")}}
diff --git a/files/ja/web/api/web_components/using_templates_and_slots/index.md b/files/ja/web/api/web_components/using_templates_and_slots/index.md
index 8d67728ae21dc8..18e66663041328 100644
--- a/files/ja/web/api/web_components/using_templates_and_slots/index.md
+++ b/files/ja/web/api/web_components/using_templates_and_slots/index.md
@@ -2,7 +2,7 @@
 title: テンプレートとスロットの使用
 slug: Web/API/Web_components/Using_templates_and_slots
 l10n:
-  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+  sourceCommit: bc7e82aa6db60568d7146ee285918550bbe4b8ce
 ---
 
 {{DefaultAPISidebar("Web Components")}}
@@ -18,7 +18,7 @@ l10n:
 簡単な例を見てみましょう。
 
 ```html
-<template id="my-paragraph">
+<template id="custom-paragraph">
   <p>My paragraph</p>
 </template>
 ```
@@ -26,7 +26,7 @@ l10n:
 これはページ上に表示されず、以下のようなコードで JavaScript で参照を取得し、 DOM に追加することで表示されます。
 
 ```js
-let template = document.getElementById("my-paragraph");
+let template = document.getElementById("custom-paragraph");
 let templateContent = template.content;
 document.body.appendChild(templateContent);
 ```
@@ -45,7 +45,7 @@ customElements.define(
   class extends HTMLElement {
     constructor() {
       super();
-      let template = document.getElementById("my-paragraph");
+      let template = document.getElementById("custom-paragraph");
       let templateContent = template.content;
 
       const shadowRoot = this.attachShadow({ mode: "open" });
@@ -63,7 +63,7 @@ customElements.define(
 したがって、例えば次のようにすると、
 
 ```html
-<template id="my-paragraph">
+<template id="custom-paragraph">
   <style>
     p {
       color: white;
diff --git a/files/ja/web/api/websockets_api/index.md b/files/ja/web/api/websockets_api/index.md
index 00ede1d0bb0e6c..62cc9d57673238 100644
--- a/files/ja/web/api/websockets_api/index.md
+++ b/files/ja/web/api/websockets_api/index.md
@@ -2,60 +2,85 @@
 title: WebSocket API (WebSockets)
 slug: Web/API/WebSockets_API
 l10n:
-  sourceCommit: 50e215d730cd173d93b9bf75785c0d8ed2f67cb0
+  sourceCommit: f49de43625cd621fd73c7ba2e9a2db3d8566580f
 ---
 
-{{DefaultAPISidebar("Websockets API")}}
+{{DefaultAPISidebar("WebSockets API")}}
 
-**WebSocket API** は、ユーザーのブラウザーとサーバー間で対話的な通信セッションを開くことができる先進技術です。この API によって、サーバーにメッセージを送信したり、応答をサーバーにポーリングすることなく、イベント駆動型のレスポンスを受信したりすることができます。
+**WebSocket API** は、ユーザーのブラウザーとサーバー間で対話的な通信セッションを開くことができるものです。この API を使用すると、サーバーにメッセージを送信し、サーバーから返信をポーリングすることなく応答を受信することができます。
+
+WebSocket API は、ウェブソケット接続を作成して使用するための、{{domxref("WebSocket")}} インターフェイスと {{domxref("WebSocketStream")}} インターフェイスという 2 つの異なるメカニズムを提供しています。
+
+- `WebSocket` インターフェイスは安定しており、ブラウザーとサーバーの対応も充実しています。しかし、[背圧](/ja/docs/Web/API/Streams_API/Concepts#背圧)には対応していません。そのため、アプリケーションがメッセージを処理するよりも速いペースでメッセージが到着すると、メッセージをバッファーに保存することで端末のメモリーがいっぱいになったり、CPU 使用率が 100% になって応答不能になったり、あるいはその両方が起こります。
+- `WebSocketStream` インターフェイスは、`WebSocket` の{{jsxref("Promise","プロミス","","nocode")}}ベースの別バージョンです。[ストリーム API](/ja/docs/Web/API/Streams_API) を使用してメッセージの送受信を処理し、ソケット接続がストリームの背圧を自動的に利用できます。つまり、アプリケーションのボトルネックを避けるために読み取りまたは書き込みの速度を調整できます。しかし、`WebSocketStream` は標準化されておらず、現在、1 つのレンダリングエンジンしか対応していません。
+
+それに加えて、[WebTransport API](/ja/docs/Web/API/WebTransport_API) が多くのアプリケーションで WebSocket API に取って代わることも予想されます。WebTransport は、汎用性の高い低レベル API で、背圧や、`WebSocket` や `WebSocketStream` では対応していない機能、例えば、一方向ストリーム、順不同配信、データグラムを介した信頼性の低いデータ転送など、他にも多くの機能を提供します。WebTransport は WebSocket よりも複雑で、ブラウザーの対応も限定的ですが、高度なソリューションの実装が可能です。標準の WebSocket 接続が用途に適しており、幅広いブラウザーとの互換性が必要な場合は、WebSockets API を用いてすばやく実装し、実行することができます。しかし、アプリケーションに標準以外のカスタムソリューションが要求される場合は、WebTransport API を使用すべきでしょう。
 
 > [!NOTE]
-> WebSocket のコネクションは機能的にどこか標準 Unix スタイルのソケットに似ていますが、関連はありません。
+> WebSocket の接続は機能的にどこか標準 Unix スタイルのソケットに似ていますが、関連はありません。
 
 ## インターフェイス
 
 - [`WebSocket`](/ja/docs/Web/API/WebSocket)
   - : WebSocket サーバーに接続し、その接続を通じてデータを送受信するための主要インターフェイス
+- [`WebSocketStream`](/ja/docs/Web/API/WebSocketStream) {{non-standard_inline}}
+  - : WebSocket サーバーに接続するためのプロミスベースのインターフェイス。[ストリーム](/ja/docs/Web/API/Streams_API)を使用して接続上のデータの送受信を行います。
 - [`CloseEvent`](/ja/docs/Web/API/CloseEvent)
   - : 接続が閉じた時に WebSocket オブジェクトによって送信されるイベントです。
 - [`MessageEvent`](/ja/docs/Web/API/MessageEvent)
   - : サーバーからメッセージを受信した時に WebSocket オブジェクトによって送信されるイベント
 
+## 関連 HTTP ヘッダー
+
+[WebSocket のハンドシェイク](/ja/docs/Web/API/WebSockets_API/Writing_WebSocket_servers#websocket_ハンドシェイク)では、HTTP ヘッダーが使用されます。
+
+- {{HTTPHeader("Sec-WebSocket-Key")}}
+  - : クライアントからのノンスを保持する HTTP リクエストヘッダー。
+    これは、[WebSocket 開始時のハンドシェイク](/ja/docs/Web/API/WebSockets_API/Writing_WebSocket_servers#websocket_ハンドシェイク)で使用され、クライアントが明示的に WebSocket を開く意図があることを確認します。 ブラウザーによって自動的に追加されます。
+    ブラウザーによって自動的に追加されます。
+- {{HTTPHeader("Sec-WebSocket-Accept")}}
+  - : WebSocket の開くためのハンドシェイクで使用する HTTP {{glossary("response header","レスポンスヘッダー")}}で、サーバーが WebSocket 接続へのアップグレードを望んでいることを示します。
+    ディレクティブの値は、対応するリクエストの `Sec-WebSocket-Key` の値から計算されます。
+- {{HTTPHeader("Sec-WebSocket-Version")}}
+  - : リクエストで、クライアントが理解する WebSocket プロトコルのバージョンを示す HTTP ヘッダー。
+    レスポンスでは、リクエストされたプロトコルバージョンがサーバーで対応していない場合にのみ送信され、サーバーが対応しているバージョンが掲載されています。
+- {{HTTPHeader("Sec-WebSocket-Protocol")}}
+  - : リクエストでは、クライアントが対応しているサブプロトコルを推奨する順番で示す HTTP ヘッダーです。
+    レスポンスでは、サーバーがクライアントの環境設定から選択したサブプロトコルを示します。
+- {{HTTPHeader("Sec-WebSocket-Extensions")}}
+  - : リクエストでは、クライアントが対応している WebSocket 拡張機能を推奨する順番で示す HTTP ヘッダーです。
+    レスポンスでは、サーバーがクライアントの環境設定から選択した拡張機能です。
+
 ## ガイド
 
-- [WebSocket クライアントアプリケーションの記述](/ja/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications)
+- [WebSocket クライアントアプリケーションを書く](/ja/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications)
 - [WebSocket サーバーの記述](/ja/docs/Web/API/WebSockets_API/Writing_WebSocket_servers)
 - [WebSocket サーバーを C# で書く](/ja/docs/Web/API/WebSockets_API/Writing_WebSocket_server)
 - [WebSocket サーバーを Java で書く](/ja/docs/Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java)
 - [WebSocket サーバーを JavaScript (Deno) で書く](/ja/docs/Web/API/WebSockets_API/Writing_a_WebSocket_server_in_JavaScript_Deno)
+- [WebSocketStream を用いてクライアントを書く](/ja/docs/Web/API/WebSockets_API/Using_WebSocketStream)
 
 ## ツール
 
 - [AsyncAPI](https://www.asyncapi.com/): WebSocket のようなプロトコルに基づいたイベントドリブン型アーキテクチャを記述するための仕様です。 OpenAPI 仕様で REST API を記述するのと同じように、 WebSocket ベースの API を記述するために使用することができます。 [WebSocket で AsyncAPI の利用を検討すべき理由](https://www.asyncapi.com/blog/websocket-part1)と[利用する方法](https://www.asyncapi.com/blog/websocket-part2)を紹介します。
-- [HumbleNet](https://hacks.mozilla.org/2017/06/introducing-humblenet-a-cross-platform-networking-library-that-works-in-the-browser/): ブラウザーで動作するクロスプラットフォームのネットワークライブラリです。ブラウザー間の違いを抽象化する WebSocket や WebRTC の C ラッパー、ゲームやその他のアプリで複数ユーザーのネットワーク機能を作成するものから成ります。
 - [µWebSockets](https://github.com/uNetworking/uWebSockets): [C++11](https://isocpp.org/) および [Node.js](https://nodejs.org) で書かれた可用性の高い WebSocket サーバーとクライアントの実装です。
 - [Socket.IO](https://socket.io): 長いポーリングと WebSocket ベースのサードバーティ―の [Node.js](https://nodejs.org) 用転送プロトコルです。
 - [SocketCluster](https://socketcluster.io/): スケーラビリティに焦点を当てた [Node.js](https://nodejs.org) 用の pub/sub WebSocket フレームワークです。
 - [WebSocket-Node](https://github.com/theturtle32/WebSocket-Node): [Node.js](https://nodejs.org) 用の WebSocket サーバー API 実装です。
 - [Total.js](https://www.totaljs.com): [Node.js](https://nodejs.org/en/) 用の ウェブアプリケーションフレームワーク(使用例: [WebSocket chat](https://github.com/totaljs/examples/tree/master/websocket))
-- [Faye](https://www.npmjs.com/package/faye-websocket): [Node.js](https://nodejs.org) 用の [WebSocket](/ja/docs/Web/API/WebSockets_API) (双方向接続) と [EventSource](/ja/docs/Web/API/EventSource) (片方向接続) サーバーおよびクライアント
-- [SignalR](https://dotnet.microsoft.com/en-us/apps/aspnet/signalr): SignalR は単一のコードだけで、もし WebSockets が使用可能な場合、基盤として WebSockets を使用し、そうでない場合はほかの代替技術にフォールバックします。
+- [SignalR](https://dotnet.microsoft.com/ja/apps/aspnet/signalr): SignalR は単一のコードだけで、もし WebSockets が使用可能な場合、基盤として WebSockets を使用し、そうでない場合はほかの代替技術にフォールバックします。
 - [Caddy](https://caddyserver.com/): WebSocket として任意のコマンド (stdin/stdout) を中継することができるウェブサーバーです。
-- [ws](https://github.com/websockets/ws): [Node.js](https://nodejs.org/) のための有名な WebSocket クライアント＆サーバーライブラリです。
-- [jsonrpc-bidirectional](https://github.com/bigstepinc/jsonrpc-bidirectional): 非同期の RPC で、単一の接続を用いて、サーバー上にエクスポートされた機能と、同時にクライアント上のものがあります (クライアントがサーバーを呼び出すことができ、サーバーもクライアントを呼び出すことができます)。
+- [ws](https://github.com/websockets/ws): [Node.js](https://nodejs.org/) のための有名な WebSocket クライアント＆サーバーライブラリーです。
 - [cowboy](https://github.com/ninenines/cowboy): Cowboy は高速で最新の HTTP サーバーで、 Erlang/OTP のためのものであり、 WebSocket に対応しています。
 - [ZeroMQ](https://zeromq.org): ZeroMQ は、インプロセス、IPC、TCP、UDP、TIPC、マルチキャスト、WebSocket でメッセージを伝送する組み込み可能なネットワーキングライブラリーです。
 - [WebSocket King](https://websocketking.com): WebSocket サーバーの開発、テスト、作業を支援するクライアントツールです。
 - [PHP WebSocket Server](https://github.com/napengam/phpWebSocketServer): WebSocket の wss:\// または ws:\// および通常ソケットの ssl:\//, tcp:\// を介して接続を処理するために PHP で書かれたサーバーです。
-- [Channels](https://channels.readthedocs.io/en/stable/index.html): WebSocket（および長時間動作する非同期接続を必要とする他のプロトコル）の対応を追加する Django ライブラリーです。
+- [Django Channels](https://channels.readthedocs.io/en/stable/index.html): WebSocket（および長時間動作する非同期接続を必要とする他のプロトコル）の対応を追加する Django ライブラリーです。
+- [(Phoenix) Channels](https://hexdocs.pm/phoenix/channels.html): Elixir Phoenix フレームワークで WebSocket を使用したスケーラブルなリアルタイム通信です。
+- [Phoenix LiveView](https://github.com/phoenixframework/phoenix_live_view): Elixir Phoenix フレームワークで WebSocket によるリアルタイムの対話型ウェブ体験です。
 - [Flask-SocketIO](https://flask-socketio.readthedocs.io/en/latest/): Flask アプリケーションに、クライアントとサーバー間の低遅延な双方向通信を提供します。
 - [Gorilla WebSocket](https://pkg.go.dev/github.com/gorilla/websocket): Gorilla WebSocket は、WebSocket プロトコルの [Go](https://go.dev/) による実装です。
 
-## 関連トピック
-
-- [AJAX](/ja/docs/Web/Guide/AJAX)
-- [JavaScript](/ja/docs/Web/JavaScript)
-
 ## 仕様書
 
 {{Specifications}}
diff --git a/files/ja/web/api/websockets_api/using_websocketstream/index.md b/files/ja/web/api/websockets_api/using_websocketstream/index.md
new file mode 100644
index 00000000000000..da174d6f1585ed
--- /dev/null
+++ b/files/ja/web/api/websockets_api/using_websocketstream/index.md
@@ -0,0 +1,300 @@
+---
+title: WebSocketStream でクライアントを書く
+slug: Web/API/WebSockets_API/Using_WebSocketStream
+l10n:
+  sourceCommit: d102514706e844bd642850aa340c9645c74bf70c
+---
+
+{{DefaultAPISidebar("WebSockets API")}}{{non-standard_header}}
+
+{{domxref("WebSocketStream")}} API は、{{jsxref("Promise", "プロミス", "", 1)}}ベースのもうひとつの選択肢であり、クライアントサイドの WebSocket 接続の作成と使用にWebSocket を使用します。 `WebSocketStream` は、[ストリーム API](/ja/docs/Web/API/Streams_API) を使用してメッセージの送受信を処理するため、ソケット接続はストリームの[背圧](/ja/docs/Web/API/Streams_API/Concepts#背圧)を自動的に利用することができ（開発者による追加の操作は不要）、アプリケーションのボトルネックを回避するために読み取りまたは書き込みの速度を調整することができます。
+
+この記事では、{{domxref("WebSocketStream")}} API を使用して WebSocket クライアントを作成する方法を説明します。
+
+## 機能検出
+
+`WebSocketStream` API に対応しているかどうかを確認するには、次のようにします。
+
+```js
+if ("WebSocketStream" in self) {
+  // WebSocketStream に対応
+}
+```
+
+## WebSocketStream オブジェクトの作成
+
+WebSocket クライアントを作成するには、まず新しい `WebSocketStream` インスタンスを {{domxref("WebSocketStream.WebSocketStream", "WebSocketStream()")}} コンストラクターで作成する必要があります。最もシンプルな形では、WebSocket サーバーの URL を引数として使用します。
+
+```js
+const wss = new WebSocketStream("wss://example.com/wss");
+```
+
+また、カスタムプロトコルや {{domxref("AbortSignal")}} を含むオプションオブジェクトを受け取ることもできます（[接続の切断](#接続の切断)を参照）。
+
+```js
+const controller = new AbortController();
+const queueWSS = new WebSocketStream("wss://example.com/queue", {
+  protocols: ["amqp", "mqtt"],
+  signal: controller.signal,
+});
+```
+
+## データの送信と受信
+
+`WebSocketStream` インスタンスには {{domxref("WebSocketStream.opened", "opened")}} プロパティがあります。これは、WebSocket 接続が正常に開かれると、{{domxref("ReadableStream")}} と {{domxref("WritableStream")}} インスタンスを含むオブジェクトで履行されるプロミスを返します。
+
+```js
+const { readable, writable } = await wss.opened;
+```
+
+これらのオブジェクトに対して {{domxref("ReadableStream.getReader", "getReader()")}} と {{domxref("WritableStream.getWriter", "getWriter()")}} を呼び出すと、それぞれ {{domxref("ReadableStreamDefaultReader")}} および {{domxref("WritableStreamDefaultWriter")}} が返されます。これらは、それぞれソケット接続の読み取りと書き込みに使用できます。
+
+```js
+const reader = readable.getReader();
+const writer = writable.getWriter();
+```
+
+ソケットへデータを書き込むには、 {{domxref("WritableStreamDefaultWriter.write()")}} が利用できます。
+
+```js
+writer.write("My message");
+```
+
+ソケットからデータを読み込むには、ストリームが終了するまで、{{domxref("ReadableStreamDefaultReader.read()")}} を継続的に呼び出すことができます。ストリームが終了すると、`done` が `true` になります。
+
+```js
+while (true) {
+  const { value, done } = await reader.read();
+  if (done) {
+    break;
+  }
+
+  // Process value in some way
+}
+```
+
+ブラウザーは必要に際して背圧を適用することで、クライアントがデータを受信および送信する速度を自動的に制御します。クライアントが `read()` できる速度よりも速い速度でデータが到着している場合、基盤となるストリーム API がサーバーに背圧をかけます。さらに、`write()` 操作は安全に行える場合にのみ実行されます。
+
+## 接続の切断
+
+`WebSocketStream` により、以前に `WebSocket` の {{domxref("WebSocket.close_event", "close")}} および {{domxref("WebSocket.error_event", "error")}} イベントで利用可能だった情報は、{{domxref("WebSocketStream.closed", "closed")}} プロパティで利用できるようになりました。これは、終了コード（[`CloseEvent` ステータスコード](/ja/docs/Web/API/CloseEvent/code#値)の完全なリストを参照）とサーバーが接続を終了した理由を示す理由を含むオブジェクトで履行されるプロミスを返します。
+
+```js
+const { code, reason } = await wss.closed;
+```
+
+前述の通り、WebSocket 接続は {{domxref("AbortController")}} を使用して終了することができます。必要な {{domxref("AbortSignal")}} は、`WebSocketStream` コンストラクターの作成時に渡され、必要に応じて {{domxref("AbortController.abort()")}} を呼び出すことができます。
+
+```js
+const controller = new AbortController();
+const wss = new WebSocketStream("wss://example.com/wss", {
+  signal: controller.signal,
+});
+
+// しばらく後
+
+controller.abort();
+```
+
+他に、{{domxref("WebSocketStream.close()")}} メソッドを使用して接続を閉じることもできます。これは主に、カスタムコードや理由を指定したい場合に利用されます。
+
+```js
+wss.close({
+  code: 4000,
+  reason: "Night draws to a close",
+});
+```
+
+> [!NOTE]
+> 使用するサーバーの設定やステータスコードによっては、サーバーが、終了理由に適した有効なコードを優先して、カスタムコードを無視することがあります。
+
+## 完全なサンプルクライアント
+
+`WebSocketStream` の基本的な使い方を示すために、サンプルクライアントを作成しました。記事の一番下に[全リスト](#全リスト)がありますので、以下の説明と合わせてご覧ください。
+
+> [!NOTE]
+> この例を動作させるには、サーバーコンポーネントも必要です。[WebSocket サーバーを JavaScript (Deno) で書く](/ja/docs/Web/API/WebSockets_API/Writing_a_WebSocket_server_in_JavaScript_Deno)で説明されている Deno サーバーと連携するようにクライアントを書きましたが、互換性のあるサーバーであればどれでも構いません。
+
+デモの HTML は以下の通りです。情報的な [`<h2>`](/ja/docs/Web/HTML/Element/Heading_Elements) と {{htmlelement("p")}} 要素、初期状態では無効になっている WebSocket 接続を閉じるための{{htmlelement("button")}}、および出力メッセージを書き込むための {{htmlelement("div")}} があります。
+
+```html
+<h2>WebSocketStream Test</h2>
+<p>Sends a ping every five seconds</p>
+<button id="close" disabled>Close socket connection</button>
+<div id="output"></div>
+```
+
+次に JavaScript です。まず、出力先の `<div>` と終了タグの `<button>` の参照を取得し、メッセージを `<div>` に挿入するユーティリティ関数を定義します。
+
+```js
+const output = document.querySelector("#output");
+const closeBtn = document.querySelector("#close");
+
+function writeToScreen(message) {
+  const pElem = document.createElement("p");
+  pElem.textContent = message;
+  output.appendChild(pElem);
+}
+```
+
+次に、`WebSocketStream` を検出する `if ... else` 構造を作成し、対応していないブラウザーに対して情報メッセージを出力します。
+
+```js
+if (!("WebSocketStream" in self)) {
+  writeToScreen("Your browser does not support WebSocketStream");
+} else {
+  // supporting code path
+}
+```
+
+補助的なコードパスでは、まず WebSocket サーバーの URL を含む変数を定義し、新しい `WebSocketServer` インスタンスを構築します。
+
+```js
+const wsURL = "ws://127.0.0.1/";
+const wss = new WebSocketStream(wsURL);
+```
+
+> [!NOTE]
+> 実際のアプリケーションでは、安全な WebSocket (`wss://`) を使用するのが最善の方法です。しかし、このデモではローカルホストに接続しているため、例を動作させるには安全ではない WebSocket プロトコル (`ws://`) を使用する必要があります。
+
+私たちのコードの大部分は `start()` 関数内に含まれており、私たちはこの関数を定義し、すぐに呼び出します。{{domxref("WebSocketStream.opened", "opened")}} のプロミスを待ち、それが履行された後に、接続が成功したことを読み手に知らせるメッセージを書き込みます。そして、{{domxref("ReadableStreamDefaultReader")}} および {{domxref("WritableStreamDefaultWriter")}} のインスタンスを返された `readable` および `writable` から作成します。
+
+次に、`start()` として、サーバーに "ping" メッセージを送信し、"pong" メッセージを受信する関数を作成し、それを呼び出します。関数本体では、`wss.opened` プロミスを待ち、その履行値からリーダーとライターを作成します。ソケットが開いたら、そのことをユーザーに通知し、Close ボタンを有効にします。次に、ソケットに `"ping"` 値を `write()` し、そのことをユーザーに通知します。この時点で、サーバーは `"pong"` メッセージで応答します。応答の `read()` を待ち、ユーザーに通知します。その後、5 秒のタイムアウト後にサーバーに別の `"ping"` を送信します。この動作を繰り返すことで、 `"ping"`/`"pong"` のループが延々と続きます。
+
+```js
+async function start() {
+  const { readable, writable } = await wss.opened;
+  writeToScreen("CONNECTED");
+  closeBtn.disabled = false;
+  const reader = readable.getReader();
+  const writer = writable.getWriter();
+
+  writer.write("ping");
+  writeToScreen("SENT: ping");
+
+  while (true) {
+    const { value, done } = await reader.read();
+    writeToScreen(`RECEIVED: ${value}`);
+    if (done) {
+      break;
+    }
+
+    setTimeout(async () => {
+      try {
+        await writer.write("ping");
+        writeToScreen("SENT: ping");
+      } catch (e) {
+        writeToScreen(`Error writing to socket: ${e.message}`);
+      }
+    }, 5000);
+  }
+}
+
+start();
+```
+
+> **メモ:** {{domxref("setTimeout")}} 関数は、アプリケーションがストリームを閉じた後に書き込みを行おうとした場合に発生する可能性のあるエラーを処理するために、`write()` 呼び出しを [`try...catch`](/ja/docs/Web/JavaScript/Reference/Statements/try...catch) ブロックで囲みます。
+
+WebSocket 接続が閉じられた場合、{{domxref("WebSocketStream.closed", "closed")}} プロミスが履行されることで通知されるように、コードと理由をユーザーに通知するプロミススタイルのコードセクションを追加しました。
+
+```js
+wss.closed.then((result) => {
+  writeToScreen(
+    `DISCONNECTED: code ${result.closeCode}, message "${result.reason}"`,
+  );
+  console.log("Socket closed", result.closeCode, result.reason);
+});
+```
+
+最後に、コードとカスタムの理由を指定して、`close()` メソッドを使用して接続を閉じるイベントリスナーを Close ボタンに追加します。この関数は Close ボタンを無効にもします。接続がすでに閉じられた後は、ユーザーにボタンを押させたくないからです。
+
+```js
+closeBtn.addEventListener("click", () => {
+  wss.close({
+    code: 1000,
+    reason: "That's all folks",
+  });
+
+  closeBtn.disabled = true;
+});
+```
+
+### 完全なリスト
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>WebSocketStream Test</title>
+  </head>
+
+  <body>
+    <h2>WebSocketStream Test</h2>
+    <p>Sends a ping every five seconds</p>
+    <button id="close" disabled>Close socket connection</button>
+    <div id="output"></div>
+    <script>
+      const output = document.querySelector("#output");
+      const closeBtn = document.querySelector("#close");
+
+      function writeToScreen(message) {
+        const pElem = document.createElement("p");
+        pElem.textContent = message;
+        output.appendChild(pElem);
+      }
+
+      if (!("WebSocketStream" in self)) {
+        writeToScreen("Your browser does not support WebSocketStream");
+      } else {
+        const wsURL = "ws://127.0.0.1/";
+        const wss = new WebSocketStream(wsURL);
+
+        console.log(wss.url);
+
+        async function start() {
+          const { readable, writable, extensions, protocol } = await wss.opened;
+          writeToScreen("CONNECTED");
+          closeBtn.disabled = false;
+          const reader = readable.getReader();
+          const writer = writable.getWriter();
+
+          writer.write("ping");
+          writeToScreen("SENT: ping");
+
+          while (true) {
+            const { value, done } = await reader.read();
+            writeToScreen(`RECEIVED: ${value}`);
+            if (done) {
+              break;
+            }
+
+            setTimeout(() => {
+              writer.write("ping");
+              writeToScreen("SENT: ping");
+            }, 5000);
+          }
+        }
+
+        start();
+
+        wss.closed.then((result) => {
+          writeToScreen(
+            `DISCONNECTED: code ${result.closeCode}, message "${result.reason}"`,
+          );
+          console.log("Socket closed", result.closeCode, result.reason);
+        });
+
+        closeBtn.addEventListener("click", () => {
+          wss.close({
+            code: 1000,
+            reason: "That's all folks",
+          });
+
+          closeBtn.disabled = true;
+        });
+      }
+    </script>
+  </body>
+</html>
+```
diff --git a/files/ja/web/api/websockets_api/writing_a_websocket_server_in_java/index.md b/files/ja/web/api/websockets_api/writing_a_websocket_server_in_java/index.md
index 6d98158bb72a33..b50e4715056328 100644
--- a/files/ja/web/api/websockets_api/writing_a_websocket_server_in_java/index.md
+++ b/files/ja/web/api/websockets_api/writing_a_websocket_server_in_java/index.md
@@ -1,11 +1,11 @@
 ---
-title: Java による WebSocket サーバーの記述
+title: Java で WebSocket サーバーを書く
 slug: Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java
 l10n:
-  sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8
+  sourceCommit: 44c4ec928281dc2d7c5ea42b7d2c74a2013f16ac
 ---
 
-{{DefaultAPISidebar("Websockets API")}}
+{{DefaultAPISidebar("WebSockets API")}}
 
 この例では、Oracle Java を使用して WebSocket API サーバーを作成する方法を示します。
 
diff --git a/files/ja/web/api/websockets_api/writing_a_websocket_server_in_javascript_deno/index.md b/files/ja/web/api/websockets_api/writing_a_websocket_server_in_javascript_deno/index.md
index cf05008b838cec..3954e9375fd235 100644
--- a/files/ja/web/api/websockets_api/writing_a_websocket_server_in_javascript_deno/index.md
+++ b/files/ja/web/api/websockets_api/writing_a_websocket_server_in_javascript_deno/index.md
@@ -2,10 +2,10 @@
 title: WebSocket サーバーを JavaScript (Deno) で書く
 slug: Web/API/WebSockets_API/Writing_a_WebSocket_server_in_JavaScript_Deno
 l10n:
-  sourceCommit: 50e215d730cd173d93b9bf75785c0d8ed2f67cb0
+  sourceCommit: b065c09b79d18abf0f04778c9307e1c312b8c6f9
 ---
 
-{{DefaultAPISidebar("Websockets API")}}
+{{DefaultAPISidebar("WebSockets API")}}
 
 この例では、 Deno を使用して WebSocket API サーバーを作成する方法を、付随するウェブページと共に示します。
 
@@ -55,7 +55,7 @@ Deno.serve({
 
 `Deno.upgradeWebSocket()` は接続をウェブソケット接続にアップグレードします。これは[プロトコルアップグレードメカニズム](/ja/docs/Web/HTTP/Protocol_upgrade_mechanism)で詳しく説明されています。
 
-[`Deno.serve()`](https://deno.land/api@v1.36.4?s=Deno.serve) は、 `Deno.listen()` と `Deno.serveHttp()` を基盤に使用し、 HTTP サーバーを簡単に設定するための上位インターフェイスです。これがなければ、コードは次のように見ていくことになります。
+[`Deno.serve()`](https://docs.deno.com/api/deno/~/Deno.serve) は、 `Deno.listen()` と `Deno.serveHttp()` を基盤に使用し、 HTTP サーバーを簡単に設定するための上位インターフェイスです。これがなければ、コードは次のように見ていくことになります。
 
 ```js
 for await (const conn of Deno.listen({ port: 80 })) {
diff --git a/files/ja/web/api/websockets_api/writing_websocket_client_applications/index.md b/files/ja/web/api/websockets_api/writing_websocket_client_applications/index.md
index 84fe25f66a63b5..50986d7f1ef215 100644
--- a/files/ja/web/api/websockets_api/writing_websocket_client_applications/index.md
+++ b/files/ja/web/api/websockets_api/writing_websocket_client_applications/index.md
@@ -1,8 +1,8 @@
 ---
-title: WebSocket クライアントアプリケーションの記述
+title: WebSocket クライアントアプリケーションを書く
 slug: Web/API/WebSockets_API/Writing_WebSocket_client_applications
 l10n:
-  sourceCommit: 8a9085b96d0135920be9b281d4500ff72a7a8369
+  sourceCommit: 4bd2e8957a40a8f31484f9aea3725bdfe78a921a
 ---
 
 {{DefaultAPISidebar("WebSockets API")}} {{AvailableInWorkers}}
@@ -26,7 +26,8 @@ webSocket = new WebSocket(url, protocols);
 - `url`
   - : 接続先 URL。これは、 WebSocket サーバーが応答する URL である必要があります。
     これは URL スキームに `wss://` を使用するべきですが、ソフトウェアによってはローカル接続用に安全ではない `ws://` を使用することを許可していることがあります。
-- `protocols` {{ optional_inline() }}
+    相対 URL 値と `https://` および `http://` スキームも、[ほとんどのブラウザーの最新バージョン](/ja/docs/Web/API/WebSocket/WebSocket#ブラウザーの互換性)で許可されています。
+- `protocols` {{optional_inline}}
   - : 単一のプロトコル文字列または一連のプロトコル文字列。
     これらの文字列はサブプロトコルを示すのに使用されるため、単一のサーバーで複数の WebSocket サブプロトコルを実装できます（たとえば、特定の `protocol` に応じて 1 つのサーバーで異なる種類の対話を処理できるようにする）。
     プロトコル文字列を指定しない場合、空文字列であると仮定されます。
@@ -36,7 +37,7 @@ webSocket = new WebSocket(url, protocols);
 
 ### 接続エラー
 
-接続中にエラーが発生した場合、最初に `error` という名前の単純なイベントが {{domxref("WebSocket")}} オブジェクトに送信され（その結果、その {{domxref("WebSocket/error_event", "onerror")}} ハンドラーが呼び出されます）、次に {{domxref("CloseEvent")}} が `WebSocket` オブジェクトに送信され（{{domxref("WebSocket/close_event", "onclose")}} ハンドラーが呼び出されます）接続の終了の理由を示します。
+接続を試行中にエラーが発生した場合、最初の [`error` イベント](/ja/docs/Web/API/WebSocket/error_event)が {{domxref("WebSocket")}} オブジェクトに送信され（これにより、すべてのハンドラーが呼び出されます）、接続が閉じられた理由を示す [`close` イベント](/ja/docs/Web/API/WebSocket/close_event)が続きます。
 
 ブラウザーは {{domxref("CloseEvent")}} 経由で、コンソールにも [RFC 6455 第 7.4 節](https://datatracker.ietf.org/doc/html/rfc6455#section-7.4)で定義されている終了コードと同時に、もっと説明的なエラーメッセージを出力するができます。
 
@@ -52,7 +53,8 @@ const exampleSocket = new WebSocket(
 );
 ```
 
-返されると、 {{domxref("WebSocket.readyState", "exampleSocket.readyState")}} は `CONNECTING` です。 `readyState` は接続がデータを転送する準備ができたら `OPEN`になります。
+返されると、 {{domxref("WebSocket.readyState", "exampleSocket.readyState")}} は `CONNECTING` です。
+`readyState` は接続がデータを転送する準備ができたら `OPEN`になります。
 
 接続を開き、サポートしているプロトコルについて柔軟に対応したい場合は、プロトコルの配列を指定することができます。
 
@@ -89,7 +91,8 @@ exampleSocket.onopen = (event) => {
 
 ### JSON を使用したオブジェクトの送信
 
-サーバーに複雑なデータを合理的に送信するのに手軽な方法の一つとして、 {{glossary("JSON")}} を使用する方法があります。たとえば、チャットプログラムがサーバーとやり取りするのに、 JSON でカプセル化されたデータのパケットを使用して実装されたプロトコルを使用することができます。
+サーバーに複雑なデータを合理的に送信するのに手軽な方法の一つとして、{{glossary("JSON")}} を使用する方法があります。
+たとえば、チャットプログラムがサーバーとやり取りするのに、 JSON でカプセル化されたデータのパケットを使用して実装されたプロトコルを使用することができます。
 
 ```js
 // Send text to all users through the server
@@ -153,7 +156,7 @@ exampleSocket.onmessage = (event) => {
       text = `Your username has been set to <em>${msg.name}</em> because the name you chose is in use.<br>`;
       break;
     case "userlist":
-      document.getElementById("userlistbox").innerHTML = msg.users.join("<br>");
+      document.getElementById("userlistbox").innerText = msg.users.join("\n");
       break;
   }
 
diff --git a/files/ja/web/api/websockets_api/writing_websocket_server/index.md b/files/ja/web/api/websockets_api/writing_websocket_server/index.md
index 32421c12f3537a..055107860acc4f 100644
--- a/files/ja/web/api/websockets_api/writing_websocket_server/index.md
+++ b/files/ja/web/api/websockets_api/writing_websocket_server/index.md
@@ -1,11 +1,11 @@
 ---
-title: C# による WebSocket サーバーの記述
+title: C# で WebSocket サーバーを書く
 slug: Web/API/WebSockets_API/Writing_WebSocket_server
 l10n:
-  sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8
+  sourceCommit: 1fc3cc69ee229c7677883b45f5d1a71095f8a4c4
 ---
 
-{{DefaultAPISidebar("Websockets API")}}
+{{DefaultAPISidebar("WebSockets API")}}
 
 WebSocket API を使用したい場合は、サーバーを所有していると便利です。この記事では、C# で記述する方法を説明します。どんなサーバーサイドの言語でも行うことができますが、わかりやすく理解しやすいように、 Microsoft の言語を選択しました。
 
@@ -13,7 +13,7 @@ WebSocket API を使用したい場合は、サーバーを所有していると
 
 ## 最初のステップ
 
-WebSocket は [TCP (伝送制御プロトコル)](http://en.wikipedia.org/wiki/Transmission_Control_Protocol) 接続を介して通信します。幸いにも、C# には [TcpListener](https://docs.microsoft.com/en-us/dotnet/api/system.net.sockets.tcplistener?view=net-6.0) クラスがあり、その名前が示すようにします。これは System.Net.Sockets 名前空間にあります。
+WebSocket は [TCP (伝送制御プロトコル)](http://en.wikipedia.org/wiki/Transmission_Control_Protocol) 接続を介して通信します。幸いにも、C# には [TcpListener](https://learn.microsoft.com/ja/dotnet/api/system.net.sockets.tcplistener?view=net-6.0) クラスがあり、その名前が示すようにします。これは System.Net.Sockets 名前空間にあります。
 
 > [!NOTE]
 > 書く量を減らすために名前空間を `using` キーワードに含めることをお勧めします。毎回完全な名前空間を入力することなく、名前空間のクラスを使用できます。
@@ -140,7 +140,7 @@ if (Regex.IsMatch(data, "^GET")) {
 1. 先行または後続空白なしで "Sec-WebSocket-Key" リクエストヘッダーの値を取得します
 2. それを "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" (RFC 6455 で指定された特別な GUID)
 3. 新しい値の SHA-1 および Base64 ハッシュを計算します
-4. HTTP レスポンスの "Sec-WebSocket-Accept" レスポンスヘッダーの値としてハッシュを書き戻します
+4. HTTP レスポンスの {{httpheader("Sec-WebSocket-Accept")}} レスポンスヘッダーの値としてハッシュを書き戻します
 
 ```cs
 if (new System.Text.RegularExpressions.Regex("^GET").IsMatch(data))
@@ -280,9 +280,9 @@ class Server {
             } else {
                 bool fin = (bytes[0] & 0b10000000) != 0,
                     mask = (bytes[1] & 0b10000000) != 0; // must be true, "All messages from the client to the server have this bit set"
-                int opcode = bytes[0] & 0b00001111, // expecting 1 - text message
-                    offset = 2;
-                ulong msglen = bytes[1] & 0b01111111;
+                int opcode = bytes[0] & 0b00001111; // expecting 1 - text message
+                ulong offset = 2,
+                      msglen = bytes[1] & (ulong)0b01111111;
 
                 if (msglen == 126) {
                     // bytes are reversed because websocket will print them in Big-Endian, whereas
diff --git a/files/ja/web/api/websockets_api/writing_websocket_servers/index.md b/files/ja/web/api/websockets_api/writing_websocket_servers/index.md
index 74ea53234cfc31..9cbaa98d0f0be0 100644
--- a/files/ja/web/api/websockets_api/writing_websocket_servers/index.md
+++ b/files/ja/web/api/websockets_api/writing_websocket_servers/index.md
@@ -1,13 +1,13 @@
 ---
-title: WebSocket サーバーの記述
+title: WebSocket サーバーを書く
 slug: Web/API/WebSockets_API/Writing_WebSocket_servers
 l10n:
-  sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8
+  sourceCommit: c69e36924e1849fdc9b7fc49a3f4c550efa3468a
 ---
 
-{{APIRef("Websockets API")}}
+{{DefaultAPISidebar("WebSockets API")}}
 
-WebSocket サーバーは、特定のプロトコルに従うサーバーの任意のポートを待ち受けする TCP アプリケーションに他なりません。カスタムサーバーを作成する作業は人々を悩ませる傾向があります。ただし、選択したプラットフォームに簡単な WebSocket サーバーを実装するのは簡単です。
+WebSocket サーバーは、特定のプロトコルに従うサーバーの任意のポートを待ち受けする TCP アプリケーションに他なりません。カスタムサーバーを作成したことがない人にとっては、カスタムサーバーの作成は大変な作業のように思えるかもしれません。しかし、実際には、選択したプラットフォームに基本的な WebSocket サーバーを実装するのは、それほど難しいことではありません。
 
 WebSocket サーバーは、 [Berkeley sockets](https://en.wikipedia.org/wiki/Berkeley_sockets) が利用可能なサーバーサイドプログラミング言語、例えば C(++)、Python、{{Glossary("PHP")}}、[サーバーサイド JavaScript](/ja/docs/Learn/Server-side/Node_server_without_framework) などで記述することができます。これは特定の言語のチュートリアルではありませんが、独自のサーバーの作成を容易にするガイドとして役立ちます。
 
@@ -28,13 +28,13 @@ WebSocket サーバーは、 [Berkeley sockets](https://en.wikipedia.org/wiki/Be
 ハンドシェイクは WebSockets の "Web" です。それは HTTP から WS への橋渡しです。ハンドシェイクでは、接続の詳細がネゴシエートされ、いずれの当事者も条件が悪い場合には完了前に取り消すことができます。 サーバーはクライアントがリクエストするすべてのものを理解するように注意する必要があります。そうしないとセキュリティの問題が発生します。
 
 > [!NOTE]
-> request-uri （ここでは `/chat`）の意味は仕様書では定義されていません。多くの人がこれを使用して、 1 つのサーバーが複数の WebSocket アプリケーションを処理できるようにします。たとえば、`example.com/chat` はマルチユーザチャットアプリを呼び出すことができ、同じサーバーの `/game` はマルチプレイヤーゲームを呼び出すことができるようにするなどです。
+> request-uri （ここでは `/chat`）の意味は仕様書では定義されていません。多くの人がこれを使用して、 1 つのサーバーが複数の WebSocket アプリケーションを処理できるようにします。たとえば、`example.com/chat` はマルチユーザーチャットアプリを呼び出すことができ、同じサーバーの `/game` はマルチプレイヤーゲームを呼び出すことができるようにするなどです。
 
 ### クライアントハンドシェイクリクエスト
 
 サーバーを構築していても、クライアントは WebSocket ハンドシェイクプロセスを開始する必要があります。したがってクライアントのリクエストをどのように解釈するかを知っておく必要があります。**クライアント**は次のようなかなり標準的な HTTP リクエスト (HTTP バージョンは 1.1 以上**でなければならず**、メソッドは`GET` **でなければなりません**) を送信します。
 
-```bash
+```http
 GET /chat HTTP/1.1
 Host: example.com:8000
 Upgrade: websocket
@@ -46,7 +46,7 @@ Sec-WebSocket-Version: 13
 クライアントはここで拡張子やサブプロトコルを求めることができます。詳細は「[その他](#その他)」を参照してください。また {{HTTPHeader("User-Agent")}}、{{HTTPHeader("Referer")}}、{{HTTPHeader("Cookie")}}、認証ヘッダーなどの一般的なヘッダーも存在する可能性があります。これらに対しては何をしても構いません。 WebSocket には直接関係しません。それらを無視することも安全です。多くの一般的な設定では、リバースプロキシーは既にそれらを処理しています。
 
 > [!NOTE]
-> すべての**ブラウザー**は [`Origin` ヘッダー](/ja/docs/Web/HTTP/CORS#origin)を送信します。このヘッダーをセキュリティ（同一オリジンのチェック、ホワイトリスト/ブラックリストなど) に使用し、見せたくなければ [403 Forbidden](/ja/docs/Web/HTTP/Status#403) を送ることができます。ただし、ブラウザー以外のエージェントは、偽の `Origin` を送信するだけであることに注意してください。ほとんどのアプリケーションは、このヘッダーのないリクエストを拒否します。
+> すべての**ブラウザー**は [`Origin` ヘッダー](/ja/docs/Web/HTTP/CORS#origin)を送信します。このヘッダーをセキュリティ（同一オリジンのチェック、自動許可または拒否など）に使用し、見せたくなければ [403 Forbidden](/ja/docs/Web/HTTP/Status/403) を送ることができます。これは[クロスサイト WebSocket ハイジャッキング (CSWH)] (https://cwe.mitre.org/data/definitions/1385.html) に対して効果があります。ただし、ブラウザー以外のエージェントは、偽の `Origin` を送信するだけであることに注意してください。ほとんどのアプリケーションは、このヘッダーのないリクエストを拒否します。
 
 ヘッダーが解釈されていないか値が正しくない場合、サーバーは {{HTTPStatus("400")}} ("Bad Request") を送信し、すぐにソケットを閉じる必要があります。通常は、HTTP レスポンス本体でハンドシェイクが失敗した理由を示すかもしれませんが、メッセージは表示されないかもしれません（ブラウザーは表示しません）。 サーバーが WebSocket のバージョンを認識しない場合、サーバーは解釈可能なバージョンを含む {{HTTPHeader("Sec-WebSocket-Version")}} ヘッダーを返す必要があります。上記の例では、 WebSocket プロトコル 13 版であることを示しています。
 
@@ -58,7 +58,7 @@ Sec-WebSocket-Version: 13
 
 **サーバー**がハンドシェイクリクエストを受け取ると、プロトコルが HTTP から WebSocket に変更されることを示す特別なレスポンスを送り返す必要があります。そのヘッダーは次のようなものです（各ヘッダー行は `\r\n` で終わり、ヘッダーの終わりを示すために最後の行の後に追加の `\r\n` を置くことを忘れないでください）。
 
-```bash
+```http
 HTTP/1.1 101 Switching Protocols
 Upgrade: websocket
 Connection: Upgrade
@@ -112,13 +112,25 @@ Frame format:
      +---------------------------------------------------------------+
 ```
 
+つまり、フレームには次のバイトが格納されているということです。
+
+- 1 バイト目:
+  - bit 0: FIN
+  - bit 1: RSV1
+  - bit 2: RSV2
+  - bit 3: RSV3
+  - bits 4-7 OPCODE
+- 2-10 バイト目: 本体の長さ（[本体長のデコード](#本体長のデコード) を参照）
+- マスクを使用する場合は、次の 4 バイトにマスクキーが格納されます（[データの読み取りとマスキングの解除](#データの読み込みとマスク解除)を参照）
+- 続くバイト列はすべて本体です
+
 MASK ビットはメッセージがエンコードされているかどうかを示します。クライアントからのメッセージはマスクされている必要がありますので、サーバーはこのビットが 1 であることを確認する必要があります。（実際、[仕様書の第 5.1 節](https://datatracker.ietf.org/doc/html/rfc6455#section-5.1)では、クライアントがマスクされていないメッセージを送信する場合、サーバーはクライアントから切断する必要があります。）フレームをクライアントに戻すときは、マスクしたりマスクビットを設定しないでください。後でマスキングについて説明します。注意：セキュアソケットを使用している場合でも、メッセージをマスクする必要があります。RSV1-3 は無視することができますが、それは拡張のためのものです。
 
-opcode フィールドは、ペイロードデータをどのように解釈するかを定義します。継続の場合 `0x0`、テキスト (UTF-8 で常にエンコードされる) の場合は `0x1`、バイナリの場合は `0x2`、およびその他のいわゆる「制御コード」については後で説明します。この版の WebSocket では、`0x3` 〜 `0x7` および `0xB` 〜`0xF` は意味を持ちません。
+opcode フィールドは、ペイロードデータをどのように解釈するかを定義します。継続の場合 `0x0`、テキスト (UTF-8 で常にエンコードされる) の場合は `0x1`、バイナリーの場合は `0x2`、およびその他のいわゆる「制御コード」については後で説明します。この版の WebSocket では、`0x3` 〜 `0x7` および `0xB` 〜`0xF` は意味を持ちません。
 
 FIN ビットは、これがシリーズ内の最後のメッセージであるかどうかを示します。0 の場合、サーバーはメッセージのより多くの部分をリスニングし続けます。それ以外の場合、サーバーは配信されたメッセージを考慮する必要があります。これについては後で詳しく説明します。
 
-### ペイロード長のデコード
+### 本体長のデコード
 
 ペイロードデータを読み取るには、いつ読み終えるべきかを知っておく必要があります。そのためペイロードの長さを知ることが重要です。残念ながら、これはやや複雑です。それを読むには、次の手順を実行します。
 
@@ -128,7 +140,7 @@ FIN ビットは、これがシリーズ内の最後のメッセージである
 
 ### データの読み込みとマスク解除
 
-MASK ビットがセットされていた場合は（クライアントからサーバーへのメッセージではそうあるべきです）、次の 4 オクテット（32 ビット）を読み込みます。これがマスキングキーです。ペイロード長とマスキングキーがデコードされたら、ソケットからそのバイト数を読み取ることができます。データを `ENCODED`、キーを `MASK` 呼ぶことにします。 `DECODED` を取得するには、`ENCODED` のオクテット（バイト列、すなわちテキストデータの文字の列）をループし、オクテットを `MASK` の（i モジュロ 4）番目のオクテットを使用して XOR します。擬似コードで表してみます（JavaScript が有効な場合）。
+MASK ビットがセットされていた場合は（クライアントからサーバーへのメッセージではそうあるべきです）、次の 4 オクテット（32 ビット）を読み込みます。これがマスキングキーです。本体長とマスキングキーがデコードされたら、ソケットからそのバイト数を読み取ることができます。データを `ENCODED`、キーを `MASK` 呼ぶことにします。 `DECODED` を取得するには、`ENCODED` のオクテット（バイト列、すなわちテキストデータの文字の列）をループし、オクテットを `MASK` の（i モジュロ 4）番目のオクテットを使用して XOR します。擬似コードで表してみます（JavaScript が有効な場合）。
 
 ```js
 const MASK = [1, 2, 3, 4]; // 4 バイトマスク
@@ -144,7 +156,7 @@ const DECODED = Uint8Array.from(ENCODED, (elt, i) => elt ^ MASK[i % 4]); // マ
 
 FIN フィールドとオペコードフィールドは連携して、別々のフレームに分割されたメッセージを送信します。これはメッセージフラグメンテーションと呼ばれます。フラグメンテーションは、オペコード `0x0` 〜 `0x2` でのみ使用できます。
 
-オペコードはフレームの意味を示しています。`0x1` の場合、ペイロードはテキストです。`0x2` の場合、ペイロードはバイナリデータです。ただし、`0x0` の場合、フレームは継続フレームです。つまりサーバーはフレームのペイロードをそのクライアントから受信した最後のフレームに連結する必要があります。ここでは、サーバーがテキストメッセージを送信するクライアントに反応する概略を示します。第 1 のメッセージは単一のフレームで送信され、第 2 のメッセージは3つのフレームにわたって送信されます。FIN とオペコードの詳細は、クライアントに対してのみ表示されます。
+オペコードはフレームの意味を示しています。`0x1` の場合、ペイロードはテキストです。`0x2` の場合、ペイロードはバイナリーデータです。ただし、`0x0` の場合、フレームは継続フレームです。つまりサーバーはフレームのペイロードをそのクライアントから受信した最後のフレームに連結する必要があります。ここでは、サーバーがテキストメッセージを送信するクライアントに反応する概略を示します。第 1 のメッセージは単一のフレームで送信され、第 2 のメッセージは3つのフレームにわたって送信されます。FIN とオペコードの詳細は、クライアントに対してのみ表示されます。
 
 ```plain
 Client: FIN=1, opcode=0x1, msg="hello"
@@ -163,7 +175,7 @@ Server: (process complete message) Happy new year to you too!
 
 ハンドシェイク後の任意の時点で、クライアントまたはサーバーのどちらかが、相手に ping を送信することを選択できます。 ping が受信されると、受信者はできるだけ早く pong を返さなければなりません。 これを使用して、たとえばクライアントがまだ接続されていることを確認できます。
 
-ping や pong は単なる通常のフレームですが、**制御フレーム**です。ping のオペコードは `0x9`、pong のオペコードは `0xA` です。ping を取得したら、ping と同じペイロードデータを持つ pong を送ります（ping と pong の場合、最大ペイロード長は 125 です）。ping を送信することなく pong を取得することもできます。その場合はこれを無視してください。
+ping や pong は単なる通常のフレームですが、**制御フレーム**です。ping のオペコードは `0x9`、pong のオペコードは `0xA` です。ping を取得したら、ping と同じペイロードデータを持つ pong を送ります（ping と pong の場合、最大本体長は 125 です）。ping を送信することなく pong を取得することもできます。その場合はこれを無視してください。
 
 > [!NOTE]
 > pong を送信する機会を得る前に複数の ping を受信した場合でも、送信する pong は 1 つだけです。
@@ -177,7 +189,7 @@ ping や pong は単なる通常のフレームですが、**制御フレーム*
 > [!NOTE]
 > WebSocket のコード、拡張機能、サブプロトコルなどは、[IANA WebSocket プロトコルレジストリー](https://www.iana.org/assignments/websocket/websocket.xml)に登録されています。
 
-WebSocket の拡張機能とサブプロトコルは、ハンドシェイク中にヘッダーを介して交渉されます。拡張機能とサブプロトコルはとても似ていますが、明確な区別があります。拡張機能は WebSocket **フレーム**を制御し、ペイロードを**変更**しますが、サブプロトコルは WebSocket **ペイロード**を構造化し、**何も変更しません**。拡張機能は任意のもので一般化されています（圧縮など）。サブプロトコルは必須のもので、ローカライズされています（チャットや MMORPG ゲームなど）。
+WebSocket の拡張機能とサブプロトコルは、[ハンドシェイク](#websocket_ハンドシェイク)中にヘッダーを介して交渉されます。拡張機能とサブプロトコルはとても似ていますが、明確な区別があります。拡張機能は WebSocket **フレーム**を制御し、ペイロードを**変更**しますが、サブプロトコルは WebSocket **ペイロード**を構造化し、**何も変更しません**。拡張機能は任意のもので一般化されています（圧縮など）。サブプロトコルは必須のもので、ローカライズされています（チャットや MMORPG ゲームなど）。
 
 ## 拡張機能
 
@@ -195,7 +207,7 @@ WebSocket の拡張機能とサブプロトコルは、ハンドシェイク中
 
 クライアントは特定のサブプロトコルを要求する必要があります。 これを行うには、**元のハンドシェイクの一部として**次のようなものを送ります。
 
-```bash
+```http
 GET /chat HTTP/1.1
 ...
 Sec-WebSocket-Protocol: soap, wamp
@@ -203,7 +215,7 @@ Sec-WebSocket-Protocol: soap, wamp
 
 次のものも同等です。
 
-```bash
+```http
 ...
 Sec-WebSocket-Protocol: soap
 Sec-WebSocket-Protocol: wamp
@@ -211,7 +223,7 @@ Sec-WebSocket-Protocol: wamp
 
 これでサーバーはクライアントが提案して対応しているプロトコルの 1 つを選択する必要があります。複数ある場合は、クライアントが送信した最初のものを送信します。サーバーが `soap` と `wamp` の両方を使用できると想像してください。 次に、レスポンスハンドシェイクで次のメッセージが送信されます。
 
-```bash
+```http
 Sec-WebSocket-Protocol: soap
 ```
 
@@ -219,7 +231,7 @@ Sec-WebSocket-Protocol: soap
 > サーバーは複数の `Sec-Websocket-Protocol` ヘッダーを送信できません。
 > サーバーがサブプロトコルを使用したくない場合、 **`Sec-WebSocket-Protocol` ヘッダーを送信してはいけません**。空白のヘッダーを送信するのは間違いです。クライアントは、必要なサブプロトコルを取得できない場合に接続を閉じることがあります。
 
-サーバーが特定のサブプロトコルに従うようにしたいのであれば、必然的にサーバー上に特別なコードが必要になります。 `json` サブプロトコルを使用しているとしましょう。このサブプロトコルではすべてのデータが [JSON](https://en.wikipedia.org/wiki/JSON) として渡されます。クライアントがこのプロトコルを要求し、サーバーがそれを使用したい場合、サーバーは JSON パーサーを持つ必要があります。実際に言えば、これはライブラリの一部になりますが、サーバーはデータを渡す必要があります。
+サーバーが特定のサブプロトコルに従うようにしたいのであれば、必然的にサーバー上に特別なコードが必要になります。 `json` サブプロトコルを使用しているとしましょう。このサブプロトコルではすべてのデータが [JSON](https://en.wikipedia.org/wiki/JSON) として渡されます。クライアントがこのプロトコルを要求し、サーバーがそれを使用したい場合、サーバーは JSON パーサーを持つ必要があります。実際に言えば、これはライブラリーの一部になりますが、サーバーはデータを渡す必要があります。
 
 > [!NOTE]
 > 名前の競合を避けるため、サブプロトコル名をドメイン文字列の一部にすることをお勧めします。Example Inc. 専用の独自の形式を使用するカスタムチャットアプリを構築する場合は、次のように使用します: `Sec-WebSocket-Protocol: chat.example.com`。これは必須ではないことに注意してください。これは単なるオプションです。任意の文字列を使用できます。
diff --git a/files/ja/web/api/clearinterval/index.md b/files/ja/web/api/window/clearinterval/index.md
similarity index 95%
rename from files/ja/web/api/clearinterval/index.md
rename to files/ja/web/api/window/clearinterval/index.md
index 4e2605c19bd266..94b0ac02997856 100644
--- a/files/ja/web/api/clearinterval/index.md
+++ b/files/ja/web/api/window/clearinterval/index.md
@@ -1,6 +1,7 @@
 ---
 title: clearInterval()
-slug: Web/API/clearInterval
+slug: Web/API/Window/clearInterval
+original_slug: Web/API/clearInterval
 l10n:
   sourceCommit: 05d8b0eb3591009b6b7fee274bb7ed1bc5638f18
 ---
diff --git a/files/ja/web/api/cleartimeout/index.md b/files/ja/web/api/window/cleartimeout/index.md
similarity index 96%
rename from files/ja/web/api/cleartimeout/index.md
rename to files/ja/web/api/window/cleartimeout/index.md
index 67cb6766e4fa2e..74f7f1e8ec3f4b 100644
--- a/files/ja/web/api/cleartimeout/index.md
+++ b/files/ja/web/api/window/cleartimeout/index.md
@@ -1,6 +1,7 @@
 ---
 title: clearTimeout()
-slug: Web/API/clearTimeout
+slug: Web/API/Window/clearTimeout
+original_slug: Web/API/clearTimeout
 l10n:
   sourceCommit: da88b2f3a23b9d93f083003f13c06f9d96073f6a
 ---
diff --git a/files/ja/web/api/createimagebitmap/index.md b/files/ja/web/api/window/createimagebitmap/index.md
similarity index 98%
rename from files/ja/web/api/createimagebitmap/index.md
rename to files/ja/web/api/window/createimagebitmap/index.md
index 89c4239eb28407..9c4d597ff1db18 100644
--- a/files/ja/web/api/createimagebitmap/index.md
+++ b/files/ja/web/api/window/createimagebitmap/index.md
@@ -1,6 +1,7 @@
 ---
 title: createImageBitmap()
-slug: Web/API/createImageBitmap
+slug: Web/API/Window/createImageBitmap
+original_slug: Web/API/createImageBitmap
 l10n:
   sourceCommit: 32539676aca5ea2913cfaefeab3ba986ecd2206f
 ---
diff --git a/files/ja/web/api/setinterval/index.md b/files/ja/web/api/window/setinterval/index.md
similarity index 99%
rename from files/ja/web/api/setinterval/index.md
rename to files/ja/web/api/window/setinterval/index.md
index bd46d77512bc96..ea14589a0f88ec 100644
--- a/files/ja/web/api/setinterval/index.md
+++ b/files/ja/web/api/window/setinterval/index.md
@@ -1,7 +1,7 @@
 ---
 title: setInterval() グローバル関数
-short-title: setInterval()
-slug: Web/API/setInterval
+slug: Web/API/Window/setInterval
+original_slug: Web/API/setInterval
 l10n:
   sourceCommit: bb48907e64eb4bf60f17efd7d39b46c771d220a0
 ---
diff --git a/files/ja/web/api/settimeout/index.md b/files/ja/web/api/window/settimeout/index.md
similarity index 99%
rename from files/ja/web/api/settimeout/index.md
rename to files/ja/web/api/window/settimeout/index.md
index 1e92b92e070af4..77bc62ec7d6e59 100644
--- a/files/ja/web/api/settimeout/index.md
+++ b/files/ja/web/api/window/settimeout/index.md
@@ -1,7 +1,7 @@
 ---
 title: setTimeout() グローバル関数
-short-title: setTimeout()
-slug: Web/API/setTimeout
+slug: Web/API/Window/setTimeout
+original_slug: Web/API/setTimeout
 l10n:
   sourceCommit: 8acf54a3eb1536134a39896c3ceb1578f9b4eea7
 ---
diff --git a/files/ja/web/css/_colon_nth-child/index.md b/files/ja/web/css/_colon_nth-child/index.md
index 6f981429f2e838..77e7d5ef70261c 100644
--- a/files/ja/web/css/_colon_nth-child/index.md
+++ b/files/ja/web/css/_colon_nth-child/index.md
@@ -1,32 +1,26 @@
 ---
 title: ":nth-child()"
 slug: Web/CSS/:nth-child
+l10n:
+  sourceCommit: 4cb569f768ec9529724f8fb06539f2903a583a41
 ---
 
 {{CSSRef}}
 
-**`:nth-child()`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、兄弟要素のグループの中での位置に基づいて選択します。
-
-```css
-/* リスト中の 2 番目の <li> 要素を選択 */
-li:nth-child(2) {
-  color: lime;
-}
-
-/* 兄弟要素の中で 3 つおきに要素を選択 */
-:nth-child(4n) {
-  color: lime;
-}
-```
+**`:nth-child()`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、兄弟要素のグループの中での位置に基づいて選択します。つまり `:nth-child()` セレクターは、親要素内のすべての兄弟要素同士の位置に従って子要素を選択します。
 
 {{EmbedInteractiveExample("pages/tabbed/pseudo-class-nth-child.html", "tabbed-shorter")}}
 
+> **メモ:** `element:nth-child()` の構文では、子要素のカウントにはあらゆる要素タイプの兄弟子要素が含まれます。しかし、その位置の子要素について、要素がセレクターの他の部分と一致する場合のみ、一致するとみなされます。
+
 ## 構文
 
 `:nth-child()` 擬似クラスは、引数を 1 つ指定し、リストの子要素を要素の位置で選択するためのパターンを記述します。要素の位置は 1 から始まります。
 
-```
-:nth-child( <nth> [ of <complex-selector-list> ]? )
+```css-nolint
+:nth-child(<nth> [of <complex-selector-list>]?) {
+  /* ... */
+}
 ```
 
 ### キーワード値
@@ -40,22 +34,40 @@ li:nth-child(2) {
 
 - `<An+B>`
 
-  - : リスト中の位置が、 `An+B` で定義された数値のパターンと一致する要素を表します。
+  - : 兄弟要素の並びにおける、数値で指定した位置がパターン `An+B` と一致する要素を表します。`n` の値が正の整数またはゼロの場合、次のようになります。
 
     - `A` は整数の刻み値です。
     - `B` は整数の加算値です。
     - `n` はすべての正の整数で、 0 から始まります。
 
-    リスト中の _An+B_ 番目の要素として読むことができます。
+    リスト中の `An+B` 番目の要素として読むことができます。`A` と `B` はどちらも {{cssxref("&lt;integer&gt;")}} の値が示されている必要があります。
+
+### `of <selector>` 構文
+
+セレクター引数を渡すことで、そのセレクターに一致する **n 番目**の要素を選択することができます。例えば、次のセレクターは `class="important"` を持つ最初の 3 つのリストアイテムに一致します。
+
+```css
+:nth-child(-n + 3 of li.important) {
+}
+```
+
+これは、セレクターを関数の外に移動させた場合とは異なります。例えば、
+
+```css
+li.important:nth-child(-n + 3) {
+}
+```
+
+このセレクターは、リストアイテムが最初の 3 つの子要素の中にあり、セレクター `li.important` と一致する場合に、そのリストアイテムを選択します。
 
 ## 例
 
-<h3 id="Example_selectors" name="Example_selectors">セレクターの例</h3>
+### セレクターの例
 
 - `tr:nth-child(odd)` または `tr:nth-child(2n+1)`
-  - : HTML テーブルの奇数行 (1、3、5、など) を表します。
+  - : HTML テーブルの奇数行（1、3、5、など）を表します。
 - `tr:nth-child(even)` または `tr:nth-child(2n)`
-  - : HTML テーブルの偶数行 (2、4、6、など) を表します。
+  - : HTML テーブルの偶数行（2、4、6、など）を表します。
 - `:nth-child(7)`
   - : 7 番目の要素を表します。
 - `:nth-child(5n)`
@@ -77,6 +89,8 @@ li:nth-child(2) {
 
 ### 詳細な例
 
+#### HTML
+
 ```html
 <h3>
   <code>span:nth-child(2n+1)</code> で、子要素の間に
@@ -142,23 +156,25 @@ li:nth-child(2) {
 
 #### CSS
 
-```css
-html {
+```css hidden
+* {
   font-family: sans-serif;
 }
 
 span,
 div em {
   padding: 5px;
-  border: 1px solid green;
+  border: 1px solid tomato;
   display: inline-block;
   margin-bottom: 3px;
 }
+```
 
+```css
 .first span:nth-child(2n + 1),
 .second span:nth-child(2n + 1),
 .third span:nth-of-type(2n + 1) {
-  background-color: lime;
+  background-color: tomato;
 }
 ```
 
@@ -166,6 +182,296 @@ div em {
 
 {{EmbedLiveSample('Detailed_example', 550, 550)}}
 
+### 'of &lt;selector&gt;' の使用
+
+この例では、名前付きの順序なしリストがあり、そのうちのいくつかは **noted** として `class="noted"` を使用してマークされています。これらは太い下線で強調表示されています。
+
+#### HTML
+
+```html
+<ul>
+  <li class="noted">Diego</li>
+  <li>Shilpa</li>
+  <li class="noted">Caterina</li>
+  <li>Jayla</li>
+  <li>Tyrone</li>
+  <li>Ricardo</li>
+  <li class="noted">Gila</li>
+  <li>Sienna</li>
+  <li>Titilayo</li>
+  <li class="noted">Lexi</li>
+  <li>Aylin</li>
+  <li>Leo</li>
+  <li>Leyla</li>
+  <li class="noted">Bruce</li>
+  <li>Aisha</li>
+  <li>Veronica</li>
+  <li class="noted">Kyouko</li>
+  <li>Shireen</li>
+  <li>Tanya</li>
+  <li class="noted">Marlene</li>
+</ul>
+```
+
+#### CSS
+
+```css hidden
+* {
+  font-family: sans-serif;
+}
+
+ul {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  font-size: 1.2rem;
+  padding-left: 0;
+}
+
+li {
+  margin: 0.125rem;
+  padding: 0.25rem;
+}
+
+li {
+  border: 1px solid tomato;
+}
+
+.noted {
+  border-bottom: 5px solid tomato;
+}
+```
+
+次のCSSでは、`class="noted"` が指定された**偶数番目**のリストアイテムを対象としています。
+
+```css
+li:nth-child(even of .noted) {
+  background-color: tomato;
+  border-bottom-color: seagreen;
+}
+```
+
+#### 結果
+
+`class="noted"` があるアイテムは太い下線があり、3、10、17 のアイテムは、`class="noted"` がある偶数のリストアイテムであるため、背景が指定されています。
+
+{{EmbedLiveSample('of_selector_syntax_example', 550, 120)}}
+
+### of セレクター構文とセレクター nth-child
+
+この例では、名前付きの順序なしリストが 2 つあります。1 つ目のリストは `li:nth-child(-n + 3 of .noted)` の効果を示し、2 つ目のリストは `li.noted:nth-child(-n + 3)` の効果を示します。
+
+#### HTML
+
+```html
+<ul class="one">
+  <li class="noted">Diego</li>
+  <li>Shilpa</li>
+  <li class="noted">Caterina</li>
+  <li>Jayla</li>
+  <li>Tyrone</li>
+  <li>Ricardo</li>
+  <li class="noted">Gila</li>
+  <li>Sienna</li>
+  <li>Titilayo</li>
+  <li class="noted">Lexi</li>
+</ul>
+<ul class="two">
+  <li class="noted">Diego</li>
+  <li>Shilpa</li>
+  <li class="noted">Caterina</li>
+  <li>Jayla</li>
+  <li>Tyrone</li>
+  <li>Ricardo</li>
+  <li class="noted">Gila</li>
+  <li>Sienna</li>
+  <li>Titilayo</li>
+  <li class="noted">Lexi</li>
+</ul>
+```
+
+#### CSS
+
+```css hidden
+* {
+  font-family: sans-serif;
+}
+
+ul {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  font-size: 1.2rem;
+  padding-left: 0;
+}
+
+li {
+  margin: 0.125rem;
+  padding: 0.25rem;
+}
+
+li {
+  border: 1px solid tomato;
+}
+
+.noted {
+  border-bottom: 5px solid tomato;
+}
+```
+
+```css
+ul.one > li:nth-child(-n + 3 of .noted) {
+  background-color: tomato;
+  border-bottom-color: seagreen;
+}
+
+ul.two > li.noted:nth-child(-n + 3) {
+  background-color: tomato;
+  border-bottom-color: seagreen;
+}
+```
+
+#### 結果
+
+1 つ目のケースでは、リストの最初の 3 つのアイテムであるかどうかに関わらず、最初の 3 つのリストアイテムに `class="noted"` というスタイルが適用されます。
+
+2 つ目のケースでは、リストの最初の 3 つのアイテム内にあるアイテムに `class="noted"` というスタイルが適用されます。
+
+{{EmbedLiveSample('of_selector_syntax_vs_selector_nth-child', 550, 150)}}
+
+### of セレクターを使用して表の縞模様を修正
+
+表でよく使用される方法として、行の背景色を明るい色と暗い色で交互に変える「縞模様」があります。これにより、表が読みやすくなり、アクセシビリティも向上します。行が非表示になっている場合、縞模様は統合されて表示され、意図した効果が得られなくなります。この例では、行が非表示 (`hidden`) になっている表が 2 つ表示されています。2 つ目の表では、`of:not([hidden])` を使用して非表示の行を処理しています。
+
+#### HTML
+
+```html-nolint hidden
+<div class="wrapper">
+```
+
+```html-nolint
+<table class="broken">
+  <thead>
+    <tr><th>Name</th><th>Age</th><th>Country</th></tr>
+  </thead>
+  <tbody>
+    <tr><td>Mamitiana</td><td>23</td><td>Madagascar</td></tr>
+    <tr><td>Yuki</td><td>48</td><td>Japan</td></tr>
+    <tr hidden><td>Tlayolotl</td><td>36</td><td>Mexico</td></tr>
+    <tr><td>Adilah</td><td>27</td><td>Morocco</td></tr>
+    <tr><td>Vieno</td><td>55</td><td>Finland</td></tr>
+    <tr><td>Ricardo</td><td>66</td><td>Brazil</td></tr>
+  </tbody>
+</table>
+<table class="fixed">
+  <thead>
+    <tr><th>Name</th><th>Age</th><th>Country</th></tr>
+  </thead>
+  <tbody>
+    <tr><td>Mamitiana</td><td>23</td><td>Madagascar</td></tr>
+    <tr><td>Yuki</td><td>48</td><td>Japan</td></tr>
+    <tr hidden><td>Tlayolotl</td><td>36</td><td>Mexico</td></tr>
+    <tr><td>Adilah</td><td>27</td><td>Morocco</td></tr>
+    <tr><td>Vieno</td><td>55</td><td>Finland</td></tr>
+    <tr><td>Ricardo</td><td>66</td><td>Brazil</td></tr>
+  </tbody>
+</table>
+```
+
+```html hidden
+</div>
+```
+
+#### CSS
+
+```css hidden
+.wrapper {
+  display: flex;
+  justify-content: space-around;
+}
+td {
+  padding: 0.125rem 0.5rem;
+}
+```
+
+```css
+.broken > tbody > tr:nth-child(even) {
+  background-color: silver;
+}
+```
+
+```css
+.fixed > tbody > tr:nth-child(even of :not([hidden])) {
+  background-color: silver;
+}
+```
+
+#### 結果
+
+最初の表では、これは単に `:nth-child(even)` を使用しているだけです。3 行目は `hidden` 属性を保有しています。この例では、3 行目は表示されず、2 行目と 4 行目は偶数としてカウントされます。これは技術的には正しいですが、視覚的には正しくありません。
+
+2 つ目の表では、`:nth-child(even of :not([hidden]))` で of 構文を使用して、非表示になって**いない** `tr` のみを対象としています。
+
+{{EmbedLiveSample('Using_of_selector_to_fix_striped_tables', 550, 180)}}
+
+### 表の列のスタイル付け
+
+表の列にスタイル設定を行う場合、{{HTMLElement("col")}} 要素にスタイルを設定することはできません。表のセルは、この要素の子ではないためです（行要素である {{HTMLElement("tr")}} では可能です）。列のセルを選択するには、`:nth-child()` のような擬似クラスが便利です。
+
+この例では、列ごとに異なるスタイルを設定しています。
+
+#### HTML
+
+```html-nolint
+<table>
+<caption>学生名簿</caption>
+<colgroup>
+  <col/>
+  <col/>
+  <col/>
+</colgroup>
+  <thead>
+    <tr><th>名前</th><th>年齢</th><th>国籍</th></tr>
+  </thead>
+  <tbody>
+    <tr><td>Mamitiana</td><td>23</td><td>Madagascar</td></tr>
+    <tr><td>Yuki</td><td>48</td><td>Japan</td></tr>
+  </tbody>
+</table>
+
+```
+
+#### CSS
+
+```css
+td {
+  padding: 0.125rem 0.5rem;
+  height: 3rem;
+  border: 1px solid black;
+}
+
+tr :nth-child(1) {
+  text-align: left;
+  vertical-align: bottom;
+  background-color: silver;
+}
+
+tbody tr :nth-child(2) {
+  text-align: center;
+  vertical-align: middle;
+}
+
+tbody tr :nth-child(3) {
+  text-align: right;
+  vertical-align: top;
+  background-color: tomato;
+}
+```
+
+#### 結果
+
+{{EmbedLiveSample('Styling_a_table_column', 100, 200)}}
+
 ## 仕様書
 
 {{Specifications}}
@@ -176,4 +482,8 @@ div em {
 
 ## 関連情報
 
-- {{ Cssxref(":nth-of-type") }}, {{ Cssxref(":nth-last-child") }}
+- {{ Cssxref(":nth-of-type", ":nth-of-type()") }}
+- {{ Cssxref(":nth-last-child", ":nth-last-child()") }}
+- {{ Cssxref(":has", ":has()") }}: 親要素を選択する擬似クラス
+- [ツリー構造擬似クラス](/ja/docs/Web/CSS/Pseudo-classes#ツリー構造擬似クラス)
+- [CSS セレクター](/ja/docs/Web/CSS/CSS_selectors)モジュール
diff --git a/files/ja/web/css/_colon_state/index.md b/files/ja/web/css/_colon_state/index.md
new file mode 100644
index 00000000000000..b5ae607460fb89
--- /dev/null
+++ b/files/ja/web/css/_colon_state/index.md
@@ -0,0 +1,109 @@
+---
+title: ":state()"
+slug: Web/CSS/:state
+l10n:
+  sourceCommit: b60bc79c7ad36c56dddf6760d2fd4dbb642d2023
+---
+
+{{CSSRef}}
+
+**`:state()`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、特定のカスタム状態を持つ[カスタム要素](/ja/docs/Web/API/Web_components/Using_custom_elements)に一致します。
+
+## 構文
+
+`:state()` 擬似クラスは、引数として一致するカスタム要素の状態を表すカスタム識別子を取ります。
+
+```css-nolint
+:state(<カスタム識別子>) {
+  /* ... */
+}
+```
+
+## 解説
+
+要素は、ユーザー操作や他の要因により、状態が遷移することがあります。
+例えば、ユーザーが要素にカーソルをかざしたときに "hover" 状態に遷移したり、ユーザーがクリックした後にリンクが "visited" 状態に遷移したりします。
+ブラウザーで指定された要素は、[`:hover`](/ja/docs/Web/CSS/:hover) や [`:visited`](/ja/docs/Web/CSS/:visited) などの CSS 擬似クラスを使用して、これらの状態に基づいてスタイルを設定することができます。
+同様に、[自律的カスタム要素](/ja/docs/Web/API/Web_components/Using_custom_elements#カスタム要素の種類)（組み込み要素から派生していないカスタム要素）は、その状態を公開することができ、その要素を使用するページは、CSS の `:state()` 擬似クラスを使用して、それらにスタイル設定することができます。
+
+カスタム要素の状態は文字列値で表されます。
+これらの値は、要素に関連付けられた [`CustomStateSet`](/ja/docs/Web/API/CustomStateSet) オブジェクトに追加または除去されます。
+CSS の `:state()` 擬似クラスは、引数として渡された識別子が要素の `CustomStateSet` に存在する場合に、その要素と一致します。
+
+`:state()` 擬似クラスは、カスタム要素の実装内でカスタム状態を一致させるためにも使用することができます。
+これは、 `:state()` を [`:host()`](/ja/docs/Web/CSS/:host_function) 擬似クラス関数内で使用することで実現され、現在のカスタム要素のシャドウ DOM 内でのみ状態を一致させます。
+
+さらに、[`::part()`](/ja/docs/Web/CSS/::part) 擬似要素に `:state()` 擬似クラスが続くことで、特定の状態にあるカスタム要素の[シャドウパーツ](/ja/docs/Web/CSS/CSS_shadow_parts)と照合することができます。
+（**シャドウパーツ**とは、カスタム要素のシャドウツリーの一部で、スタイル設定のため、コンテナーページに明示的に公開される部分です。）
+
+## 例
+
+### カスタム状態の照合
+
+この CSS は、"checked" 状態にある場合、カスタム要素 `<labeled-checkbox>` の境界線を `red` に変更する方法を示しています。
+
+```css
+labeled-checkbox {
+  border: dashed red;
+}
+labeled-checkbox:state(checked) {
+  border: solid;
+}
+```
+
+このコードのライブサンプルについては、`CustomStateSet` ページの[カスタムチェックボックス要素のカスタム状態の照合](/ja/docs/Web/API/CustomStateSet#matching_the_custom_state_of_a_custom_checkbox_element)の例を参照してください。
+
+### カスタム要素のシャドウ DOM 内のカスタム状態の照合
+
+この例では、カスタム要素の実装内でカスタム状態を照合するために、`:state()` 擬似クラスを [`:host()`](/ja/docs/Web/CSS/:host_function) 擬似クラス関数内で使用できることを表示させています。
+
+以下の CSS は、要素が "checked" の状態にある場合、その要素の前にグレーの `[x]` を挿入します。
+
+```css
+:host(:state(checked))::before {
+  content: "[x]";
+}
+```
+
+このコードのライブサンプルについては、`CustomStateSet` ページの[カスタムチェックボックス要素のカスタム状態の照合](/ja/docs/Web/API/CustomStateSet#matching_the_custom_state_of_a_custom_checkbox_element)の例を参照してください。
+
+### シャドウパーツでカスタム状態との照合
+
+この例では、カスタム要素の `:state()` 擬似クラスを[シャドウパーツ](/ja/docs/Web/CSS/CSS_shadow_parts)を対象として使用できることを示しています。
+
+シャドウパーツは、[`part`](/ja/docs/Web/HTML/Global_attributes#part) 属性を使用して定義し、名前を付けます。
+例えば、`<question-box>` という名前のカスタム要素が、`<labeled-checkbox>` カスタム要素を `checkbox` という名前のシャドウパーツとして使用しているとします。
+
+```js
+shadowRoot.innerHTML = `<labeled-checkbox part='checkbox'>Yes</labeled-checkbox>`;
+```
+
+次の CSS は、[`::part()`](/ja/docs/Web/CSS/::part) 擬似要素を使用して `'checkbox'` シャドウパーツと照合する方法を示しています。
+また、`::part()`擬 似要素に続いて `:state()` 擬似クラスを使用することで、チェック状態の同じ部分と照合する方法も表示させています。
+
+```css
+question-box::part(checkbox) {
+  color: red;
+}
+
+question-box::part(checkbox):state(checked) {
+  color: green;
+}
+```
+
+このコードの動作例については、`CustomStateSet` ページの[カスタム要素のシャドウパーツ内のカスタム状態の照合](/ja/docs/Web/API/CustomStateSet#matching_a_custom_state_in_a_shadow_part_of_a_custom_element)の例を参照してください。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [`CustomStateSet`](/ja/docs/Web/API/CustomStateSet)
+- [擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)
+- [擬似クラスと擬似要素](/ja/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)
+- [カスタム状態と CSS のカスタム状態擬似クラスセレクター](/ja/docs/Web/API/Web_components/Using_custom_elements#カスタム状態と_css_のカスタム状態擬似クラスセレクター)（[カスタム要素の使用](/ja/docs/Web/API/Web_components/Using_custom_elements)）
diff --git a/files/ja/web/css/backdrop-filter/index.md b/files/ja/web/css/backdrop-filter/index.md
index 286cb5603d21d2..6ba34d0ca6b3b5 100644
--- a/files/ja/web/css/backdrop-filter/index.md
+++ b/files/ja/web/css/backdrop-filter/index.md
@@ -1,11 +1,17 @@
 ---
 title: backdrop-filter
 slug: Web/CSS/backdrop-filter
+l10n:
+  sourceCommit: 1c4eb0bfb5f72a26fcc21a83fac91aa3e66c2fb8
 ---
 
 {{CSSRef}}
 
-**`backdrop-filter`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の背後の領域に、ぼかしや色変化のようなグラフィック効果を適用することができます。要素の*背後*のすべてに適用されるため、効果を見るためには少なくとも一部が透明な要素またはその背景を作成する必要があります。
+**`backdrop-filter`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の背後の領域に、ぼかしや色変化のようなグラフィック効果を適用することができます。要素の背後にあるすべてに適用されるため、要素またはその背景が透明または部分的に透明である必要があります。
+
+{{EmbedInteractiveExample("pages/css/backdrop-filter.html")}}
+
+## 構文
 
 ```css
 /* キーワード値 */
@@ -33,19 +39,16 @@ backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
 backdrop-filter: inherit;
 backdrop-filter: initial;
 backdrop-filter: revert;
+backdrop-filter: revert-layer;
 backdrop-filter: unset;
 ```
 
-{{EmbedInteractiveExample("pages/css/backdrop-filter.html")}}
-
-## 構文
-
 ### 値
 
 - `none`
   - : 背後にフィルターを適用しません。
 - `<filter-function-list>`
-  - : 背景に適用する {{cssxref("&lt;filter-function&gt;")}} または [SVG フィルター](/ja/docs/Web/SVG/Element/filter)の空白区切りのリストです。
+  - : 背景に適用する {{cssxref("&lt;filter-function&gt;")}} または [SVG フィルター](/ja/docs/Web/SVG/Element/filter)の空白区切りのリストです。CSS の `<filter-function>` には {{CSSxRef("filter-function/blur", "blur()")}}, {{CSSxRef("filter-function/brightness", "brightness()")}}, {{CSSxRef("filter-function/contrast", "contrast()")}}, {{CSSxRef("filter-function/drop-shadow", "drop-shadow()")}}, {{CSSxRef("filter-function/grayscale", "grayscale()")}}, {{CSSxRef("filter-function/hue-rotate", "hue-rotate()")}}, {{CSSxRef("filter-function/invert", "invert()")}}, {{CSSxRef("filter-function/opacity", "opacity()")}}, {{CSSxRef("filter-function/saturate", "saturate()")}}, {{CSSxRef("filter-function/sepia", "sepia()")}} があります。
 
 ## 公式定義
 
@@ -61,39 +64,38 @@ backdrop-filter: unset;
 
 ```css
 .box {
-  background-color: rgba(255, 255, 255, 0.3);
-  border-radius: 5px;
-  font-family: sans-serif;
-  text-align: center;
-  line-height: 1;
-  -webkit-backdrop-filter: blur(10px);
+  background-color: rgb(255 255 255 / 30%);
   backdrop-filter: blur(10px);
-  max-width: 50%;
-  max-height: 50%;
-  padding: 20px 40px;
 }
 
-html,
 body {
-  height: 100%;
-  width: 100%;
+  background-image: url("anemones.jpg");
 }
+```
 
+```css hidden
+html,
 body {
-  background-image: url(https://picsum.photos/id/1080/6858/4574),
-    linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: cover;
+  height: 100%;
+  width: 100%;
 }
 
 .container {
+  background-size: cover;
   align-items: center;
   display: flex;
   justify-content: center;
   height: 100%;
   width: 100%;
 }
+.box {
+  border-radius: 5px;
+  font-family: sans-serif;
+  text-align: center;
+  max-width: 50%;
+  max-height: 50%;
+  padding: 20px 40px;
+}
 ```
 
 ### HTML
@@ -121,3 +123,7 @@ body {
 ## 関連情報
 
 - {{cssxref("filter")}}
+- {{cssxref("&lt;filter-function&gt;")}}
+- {{cssxref("background-blend-mode")}}, {{cssxref("mix-blend-mode")}}
+- [CSS フィルター効果](/ja/docs/Web/CSS/CSS_filter_effects)
+- [CSS 合成と混合](/ja/docs/Web/CSS/CSS_compositing_and_blending)
diff --git a/files/ja/web/css/border-radius/index.md b/files/ja/web/css/border-radius/index.md
index f001b50a3dd239..37c50762cf7e23 100644
--- a/files/ja/web/css/border-radius/index.md
+++ b/files/ja/web/css/border-radius/index.md
@@ -1,6 +1,8 @@
 ---
 title: border-radius
 slug: Web/CSS/border-radius
+l10n:
+  sourceCommit: 4e508e2f543c0d77c9c04f406ebc8e9db7e965be
 ---
 
 {{CSSRef}}
@@ -58,6 +60,7 @@ border-radius: 10px 5% / 20px 25em 30px 35em;
 border-radius: inherit;
 border-radius: initial;
 border-radius: revert;
+border-radius: revert-layer;
 border-radius: unset;
 ```
 
@@ -72,7 +75,7 @@ border-radius: unset;
   <tbody>
     <tr>
       <td><em>半径</em></td>
-      <td><img alt="all-corner.png" src="all-corner.png" /></td>
+      <td><img alt="水色の長方形に薄いグレーの境界線があります。4 つの角はすべて丸めてあります。" src="all-corner.png" /></td>
       <td>
         境界の四隅に使用される半径を記述する {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} です。値 1 つの構文でのみ使用されます。
       </td>
@@ -80,7 +83,7 @@ border-radius: unset;
     <tr>
       <td><em>左上と右下</em></td>
       <td>
-        <img alt="top-left-bottom-right.png" src="top-left-bottom-right.png" />
+        <img alt="水色の長方形に薄いグレーの境界線があります。左上と右下の 2 つの角は丸めてあります。" src="top-left-bottom-right.png" />
       </td>
       <td>
         要素ボックスの左上と右下の隅の境界に使用される半径を記述する {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} です。値 2 つの構文でのみ使用されます。
@@ -89,7 +92,7 @@ border-radius: unset;
     <tr>
       <td><em>右上と左下</em></td>
       <td>
-        <img alt="top-right-bottom-left.png" src="top-right-bottom-left.png" />
+        <img alt="水色の長方形に薄いグレーの境界線があります。右上と左下の 2 つの角は丸めてあります。" src="top-right-bottom-left.png" />
       </td>
       <td>
         要素ボックスの右上と左下の隅の境界に使用される半径を記述する {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} です。値 2 つまたは 3 つの構文でのみ使用されます。
@@ -97,28 +100,28 @@ border-radius: unset;
     </tr>
     <tr>
       <td><em>左上</em></td>
-      <td><img alt="top-left.png" src="top-left.png" /></td>
+      <td><img alt="水色の長方形に薄いグレーの境界線があります。左上の角は丸めてあります。" src="top-left.png" /></td>
       <td>
         要素ボックスの左上の隅の境界に使用される半径を記述する {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} です。値 3 つまたは 4 つの構文でのみ使用されます。
       </td>
     </tr>
     <tr>
       <td><em>右上</em></td>
-      <td><img alt="top-right.png" src="top-right.png" /></td>
+      <td><img alt="水色の長方形に薄いグレーの境界線があります。右上の角は丸めてあります。" src="top-right.png" /></td>
       <td>
         要素ボックスの右上の隅の境界に使用される半径を記述する {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} です。値 4 つの構文でのみ使用されます。
       </td>
     </tr>
     <tr>
       <td><em>右下</em></td>
-      <td><img alt="bottom-right.png" src="bottom-right.png" /></td>
+      <td><img alt="水色の長方形に薄いグレーの境界線があります。右下の角は丸めてあります。" src="bottom-right.png" /></td>
       <td>
         要素ボックスの右下の隅の境界に使用される半径を記述する {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} です。3 つまたは 4 つの値の構文でのみ使用されます。
       </td>
     </tr>
     <tr>
       <td><em>左下</em></td>
-      <td><img alt="bottom-left.png" src="bottom-left.png" /></td>
+      <td><img alt="水色の長方形に薄いグレーの境界線があります。左下の角は丸めてあります。" src="bottom-left.png" /></td>
       <td>
         要素ボックスの左下の隅の境界に使用される半径を記述する {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} です。値 4 つの構文でのみ使用されます。
       </td>
@@ -136,7 +139,7 @@ border-radius: unset;
 ```css
 border-radius: 1em/5em;
 
-/* ... is equivalent to: */
+/* 次のものと同等 */
 border-top-left-radius: 1em 5em;
 border-top-right-radius: 1em 5em;
 border-bottom-right-radius: 1em 5em;
@@ -146,7 +149,7 @@ border-bottom-left-radius: 1em 5em;
 ```css
 border-radius: 4px 3px 6px / 2px 4px;
 
-/* ... is equivalent to: */
+/* 次のものと同等 */
 border-top-left-radius: 4px 2px;
 border-top-right-radius: 3px 4px;
 border-bottom-right-radius: 6px 2px;
@@ -161,49 +164,48 @@ border-bottom-left-radius: 3px 4px;
 
 {{csssyntax}}
 
-<h2 id="Examples">例</h2>
+## 例
 
 ```html hidden
 <pre id="example-1">
 border: solid 10px;
 border-radius: 10px 40px 40px 10px;
-  </pre
->
+</pre>
+
 <pre id="example-2">
 border: groove 1em red;
 border-radius: 2em;
-  </pre
->
+</pre>
+
 <pre id="example-3">
 background: gold;
 border: ridge gold;
 border-radius: 13em/3em;
-  </pre
->
+</pre>
+
 <pre id="example-4">
 border: none;
 border-radius: 40px 10px;
 background: gold;
-  </pre
->
+</pre>
+
 <pre id="example-5">
 border: none;
 border-radius: 50%;
 background: burlywood;
-  </pre
->
+</pre>
+
 <pre id="example-6">
 border: dotted;
 border-width: 10px 4px;
 border-radius: 10px 40px;
-  </pre
->
+</pre>
+
 <pre id="example-7">
 border: dashed;
 border-width: 2px 4px;
 border-radius: 40px;
-  </pre
->
+</pre>
 ```
 
 ```css hidden
diff --git a/files/ja/web/css/font-weight/index.md b/files/ja/web/css/font-weight/index.md
index 1af2fe005045c0..09a5035a3b5b03 100644
--- a/files/ja/web/css/font-weight/index.md
+++ b/files/ja/web/css/font-weight/index.md
@@ -1,61 +1,68 @@
 ---
 title: font-weight
 slug: Web/CSS/font-weight
+l10n:
+  sourceCommit: 4ecbac9e89961a132c1e7f5493ec94f60dcb1ee4
 ---
 
 {{CSSRef}}
 
-**`font-weight`** は [CSS](/ja/docs/Web/CSS) のプロパティで、フォントの太さ (あるいは重み) を指定します。実際に表示されるフォントの太さは、現在設定されている {{cssxref("font-family")}} に依存する場合があります。
+**`font-weight`** は [CSS](/ja/docs/Web/CSS) のプロパティで、フォントの太さ（あるいは重み）を指定します。実際に表示されるフォントの太さは、現在設定されている {{cssxref("font-family")}} に依存する場合があります。
 
 {{EmbedInteractiveExample("pages/css/font-weight.html")}}
 
 ## 構文
 
 ```css
-/* キーワード値 */
+/* <font-weight-absolute> キーワード値 */
 font-weight: normal;
 font-weight: bold;
 
-/* 親要素に対して相対的なキーワード値 */
-font-weight: lighter;
-font-weight: bolder;
-
-/* 数値のキーワード値 */
+/* <font-weight-absolute> 数値のキーワード値 [1,1000] */
 font-weight: 100;
 font-weight: 200;
 font-weight: 300;
-font-weight: 400;// normal
+font-weight: 400; /* normal */
 font-weight: 500;
 font-weight: 600;
-font-weight: 700;// bold
+font-weight: 700; /* bold */
 font-weight: 800;
 font-weight: 900;
 
+/* 親要素に対して相対的なキーワード値 */
+font-weight: lighter;
+font-weight: bolder;
+
 /* グローバル値 */
 font-weight: inherit;
 font-weight: initial;
 font-weight: revert;
+font-weight: revert-layer;
 font-weight: unset;
 ```
 
-`font-weight` プロパティは、以下の一覧から選択した単一のキーワードで指定します。
+`font-weight` プロパティは、`<font-weight-absolute>` 値または以下の一覧にある相対的な太さの値で指定します。
 
 ### 値
 
 - `normal`
+
   - : 通常のフォントの太さです。 `400` と同じです。
+
 - `bold`
+
   - : 太字のフォントの太さです。 `700` と同じです。
-- `lighter`
-  - : フォントの太さが親要素よりも相対的に 1 つ細くなります。相対的な太さの計算に考慮されるフォントの太さは 4 つのみであることに注意してください。下記の[相対的な太さの意味](#meaning_of_relative_weights)を参照してください。
-- `bolder`
-  - : フォントの太さが親要素よりも相対的に1つ太くなります。相対的な太さの計算に考慮されるフォントの太さは 4 つのみであることに注意してください。下記の[相対的な太さの意味](#meaning_of_relative_weights)を参照してください。
+
 - `<number>`
-  - : 1 以上 1000 以下の {{cssxref("&lt;number&gt;")}} 値です。数値が大きいと、数値が小さいものより太さが太い (または等しい) ことを表します。よく使用される値は、以下の[一般的な太さ名との対応](#一般的な太さ名との対応)にあるように、共通の太さ名に対応しています。
 
-`font-weight` 仕様書の古いバージョンでは、このプロパティはキーワード値と数値 100, 200, 300, 400, 500, 600, 700, 800, 900 のみを受け付けていました。可変フォント以外では実際にはこれらのセット値しか利用できません。ただし、可変フォント以外では細かい値 (例えば 451) は[太さの代替](#太さの代替)の仕組みを用いて、これらの値のいずれかに変換されます。
+  - : 1 以上 1000 以下の {{cssxref("&lt;number&gt;")}} 値です。数値が大きいと、数値が小さいものより太さが太い（または等しい）ことを表します。これにより、[可変フォント](#可変フォント)をきめ細かく制御することができます。可変フォントではない場合、指定した通りの太さが利用できない場合は、[太さの代替](#太さの代替)アルゴリズムが使用されます。100 で割り切れる数値は、下記の[一般的な太さ名との対応](#一般的な太さ名との対応)の節で説明されている一般的な太さ名に対応しています。
 
-CSS Fonts レベル 4 では、構文を拡張して 1 から 1000 までの任意の数値を受け付けるようになり、[可変フォント](#variable_fonts)が導入され、フォントの太さにもっと細かい範囲を使用することができるようになりました。
+- `lighter`
+
+  - : フォントの太さが親要素よりも相対的に 1 つ細くなります。相対的な太さの計算に考慮されるフォントの太さは 4 つのみであることに注意してください。下記の[相対的な太さの意味](#相対的な太さの意味)を参照してください。
+
+- `bolder`
+  - : フォントの太さが親要素よりも相対的に1つ太くなります。相対的な太さの計算に考慮されるフォントの太さは 4 つのみであることに注意してください。下記の[相対的な太さの意味](#相対的な太さの意味)を参照してください。
 
 ### 太さの代替
 
@@ -68,13 +75,17 @@ CSS Fonts レベル 4 では、構文を拡張して 1 から 1000 までの任
   - 一致するものがなければ、 `500` より大きい太さを昇順で探します。
 
 - 太さが `400` 未満で指定された場合、対象値以下の太さを降順で探します。一致するものがなければ、対象値より大きい太さを昇順で探します。
+
 - 太さが `500` より大きく指定された場合、対象値以上の太さを昇順で探します。一致するものがなければ、対象値より小さい太さを降順で探します。
 
+> [!NOTE]
+> 代替のウェイトアルゴリズムはレンダリングだけに使用されます。プロパティの計算値は指定値のままです。
+
 ### 相対的な太さの意味
 
 以下の表は、 `lighter` または `bolder` を指定する場合に要素の絶対的な太さを算出する方法を示しています。
 
-なお、相対的な太さを使用した場合、 thin (100), normal (400), bold (700), heavy (900) の4つの太さのみが考慮されます。 font-family でもっと多くの太さが利用できる場合であっても、相対的な太さの計算の用途では無視されます。
+なお、相対的な太さを使用した場合、 thin (100), normal (400), bold (700), heavy (900) の 4 つの太さのみが考慮されます。フォントファミリーでもっと多くの太さが利用できる場合であっても、相対的な太さの計算の用途では無視されます。
 
 <table class="standard-table">
   <thead>
@@ -135,34 +146,34 @@ CSS Fonts レベル 4 では、構文を拡張して 1 から 1000 までの任
 
 ### 一般的な太さ名との対応
 
-`100` から `900` の数値は、おおよそ以下の太さ名に対応します ([OpenType 仕様書](https://docs.microsoft.com/en-us/typography/opentype/spec/os2#usweightclass)を参照してください)。
-
-| 値  | 太さ名                                                                                                                            |
-| --- | --------------------------------------------------------------------------------------------------------------------------------- |
-| 100 | Thin (Hairline)                                                                                                                   |
-| 200 | Extra Light (Ultra Light)                                                                                                         |
-| 300 | Light                                                                                                                             |
-| 400 | Normal (Regular)                                                                                                                  |
-| 500 | Medium                                                                                                                            |
-| 600 | Semi Bold (Demi Bold)                                                                                                             |
-| 700 | Bold                                                                                                                              |
-| 800 | Extra Bold (Ultra Bold)                                                                                                           |
-| 900 | Black (Heavy)                                                                                                                     |
-| 950 | [Extra Black (Ultra Black)](https://docs.microsoft.com/en-us/dotnet/api/system.windows.fontweights?view=netframework-4.8#remarks) |
+`100` から `900` の数値は、おおよそ以下の太さ名に対応します ([OpenType 仕様書](https://learn.microsoft.com/en-us/typography/opentype/spec/os2#usweightclass)を参照してください)。
+
+| 値  | 太さ名                                                                                                                             |
+| --- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| 100 | Thin (Hairline)                                                                                                                    |
+| 200 | Extra Light (Ultra Light)                                                                                                          |
+| 300 | Light                                                                                                                              |
+| 400 | Normal (Regular)                                                                                                                   |
+| 500 | Medium                                                                                                                             |
+| 600 | Semi Bold (Demi Bold)                                                                                                              |
+| 700 | Bold                                                                                                                               |
+| 800 | Extra Bold (Ultra Bold)                                                                                                            |
+| 900 | Black (Heavy)                                                                                                                      |
+| 950 | [Extra Black (Ultra Black)](https://learn.microsoft.com/en-us/dotnet/api/system.windows.fontweights?view=netframework-4.8#remarks) |
 
 ### 可変フォント
 
-多くのフォントは、[一般的な太さ名との対応](#一般的な太さ名との対応)の中の数値の一つに対応する特定の太さを持っています。しかし、可変フォントと呼ばれる一部のフォントは、もっと高いまたは低い粒度の太さの範囲に対応しており、これにより、デザイナーは選択した太さをより詳細に制御することができます。
+ほとんどのフォントは、[一般的な太さ名との対応](#一般的な太さ名との対応)のいずれかの数値に対応する特定の太さを持っています。しかし、可変フォントと呼ばれる一部のフォントは、より細かい粒度でさまざまな太さの範囲に対応でき、デザイナーは選択した太さをより詳細に制御できます。
 
 TrueType や OpenType の可変フォントでは、 "wght" バリエーションが様々な幅を実装するために使用されます。
 
-以下の例を動作させるには、 CSS Fonts Level 4 の font-weight が 1～1000 の任意の数を取れる構文に対応したブラウザーが必要です。
+このデモでは、`font-weight: 500;` を設定して読み込みます。 `font-weight` プロパティの値を変更すると、テキストの太さが変わります。
 
 {{EmbedGHLiveSample("css-examples/variable-fonts/font-weight.html", '100%', 860)}}
 
-## アクセシビリティの考慮
+## アクセシビリティ
 
-弱視の人は、 `font-weight` の値が `100` (Thin/Hairline) または `200` (Extra Light) の場合、特にフォントの[コントラスト比が低い場合](/ja/docs/Web/CSS/color#accessibility_concerns)は、テキストを読むのが難しくなることがあります。
+弱視の人は、 `font-weight` の値が `100` (Thin/Hairline) または `200` (Extra Light) の場合、特にフォントの[コントラスト比が低い場合](/ja/docs/Web/CSS/color#アクセシビリティ)は、テキストを読むのが難しくなることがあります。
 
 - [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#ガイドライン_1.4_前景と背景の区別を含め、ユーザーがコンテンツを見たり聞いたりしやすくする)
 - [Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)
@@ -230,6 +241,7 @@ span {
 
 ## 関連情報
 
-- {{cssxref("font-style")}}
 - {{cssxref("font-family")}}
+- {{cssxref("font-style")}}
 - [基本的なテキストとフォントの装飾](/ja/docs/Learn/CSS/Styling_text/Fundamentals)
+- [CSS フォント](/ja/docs/Web/CSS/CSS_fonts)モジュール
diff --git a/files/ja/web/css/overflow/index.md b/files/ja/web/css/overflow/index.md
index 10ea503be761b7..83b2e8cb78fc97 100644
--- a/files/ja/web/css/overflow/index.md
+++ b/files/ja/web/css/overflow/index.md
@@ -1,11 +1,13 @@
 ---
 title: overflow
 slug: Web/CSS/overflow
+l10n:
+  sourceCommit: 59a92ab5609f0a021602f11843f3b00b16e67e6d
 ---
 
 {{CSSRef}}
 
-`overflow` は [CSS](/ja/docs/Web/CSS) の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、要素のオーバーフロー時、すなわち、要素の内容が多すぎて[ブロック整形コンテキスト](/ja/docs/Web/Guide/CSS/Block_formatting_context)に収まらない場合の望ましい動作を両方向について設定します。
+**`overflow`** は [CSS](/ja/docs/Web/CSS) の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、コンテンツが要素のパディングボックスに収まらない（はみ出す）場合に、水平方向および垂直方向の望ましい動作を設定します。
 
 {{EmbedInteractiveExample("pages/css/overflow.html")}}
 
@@ -31,52 +33,39 @@ overflow: hidden visible;
 overflow: inherit;
 overflow: initial;
 overflow: revert;
+overflow: revert-layer;
 overflow: unset;
 ```
 
-`overflow` プロパティは、以下の値の一覧のうち一つまたは二つのキーワードで指定します。二つのキーワードが指定された場合、最初の値が `overflow-x` で、二つ目の値が `overflow-y` になります。それ以外の場合、 `overflow-x` および `overflow-y` は同じ値に設定されます。
+`overflow` プロパティは、1 つまたは 2 つの {{CSSXref("overflow_value", "&lt;overflow&gt;")}} キーワード値として指定される。キーワードが 1 つだけ指定された場合、`overflow-x` と `overflow-y` の両方が同じ値に設定される。2 つのキーワードが指定された場合、最初の値は水平方向の `overflow-x` に適用され、2 番目の値は垂直方向の `overflow-y` に適用されます。
 
 ### 値
 
 - `visible`
-  - : 内容はクリッピングされず、パディングボックスの外側に表示されることがあります。
+  - : 溢れたコンテンツは切り取られず、要素のパディングボックスの外側に表示されることがあります。要素ボックスは{{glossary("scroll container", "スクロールコンテナー")}}ではありません。これは `overflow` プロパティの既定値です。
 - `hidden`
-  - : 内容は、必要に応じてパディングボックスに合わせて切り取られます。スクロールバーは表示されず、ユーザーがスクロールできるようにするための対応 (ドラッグやスクロールホイールによる方法) もありません。内容はプログラム的に (例えば、 {{domxref("HTMLElement.offsetLeft", "offsetLeft")}} のようなプロパティの値を設定する方法などで) スクロールすることが<em>できます</em>ので、要素はスクロールコンテナーになります。
+  - : 溢れたコンテンツは要素のパディングボックスで切り取られます。スクロールバーはなく、切り取られたコンテンツは見えなくなります（つまり、切り取られたコンテンツは非表示になります）が、コンテンツはまだ存在しています。ユーザーエージェントはスクロールバーを追加せず、また、タッチスクリーンでのドラッグやマウスのスクロールホイールなどの操作によって、ユーザーが切り取られた領域の外にあるコンテンツを表示することもできません。コンテンツはプログラムによってスクロールさせることができ（例えば、アンカーテキストへのリンク、非表示でありながらフォーカス可能な要素へのタブ操作、{{domxref("Element.scrollLeft", "scrollLeft")}} プロパティの値や {{domxref("Element.scrollTo", "scrollTo()")}} メソッドの設定など）、この場合、要素ボックスはスクロールコンテナーとなります。
 - `clip`
-  - : `hidden` と同様に、コンテンツは要素のパディングボックスに合わせて切り取られます。 `clip` と `hidden` の違いは、 `clip` キーワードがプログラム的なスクロールも含め、すべてのスクロールを禁止することです。ボックスはスクロールコンテナーにはならず、新しい整形コンテキストを始めることもありません。新しい整形コンテキストを始めたいのであれば、 {{cssxref("display", "display: flow-root", "#flow-root")}} を使用して実現することができます。
+  - : 溢れたコンテンツは、[`overflow-clip-margin`](/ja/docs/Web/CSS/overflow-clip-margin) プロパティを使用して定義された要素のはみ出しクリップ辺で切り取られます。その結果、コンテンツは要素のパディングボックスを `overflow-clip-margin` の {{cssxref("&lt;length&gt;")}} 値分、または設定されていない場合は `0px` 分はみ出します。切り取られた領域の外側に溢れたコンテンツは表示されず、ユーザーエージェントはスクロールバーを追加せず、プログラムによるスクロールも行われません。新しい[整形コンテキスト](/ja/docs/Web/CSS/CSS_display/Block_formatting_context)は作成されません。整形コンテキストを確立するには、`overflow: clip` を {{cssxref("display", "display: flow-root", "#flow-root")}} とともに使用してください。この要素ボックスはスクロールコンテナーにはなりません。
 - `scroll`
-  - : 内容は、必要に応じてパディングボックスに合わせて切り取られます。コンテンツが変化したときに、スクロールバーが現れたり消えたりするのを防ぐため、ブラウザーは内容がクリッピングされるかどうかに関わらず、スクロールバーを常に表示します。プリンターはあふれた部分の内容を印刷する可能性があります。
+  - : 溢れたコンテンツは要素のパディングボックスで切り取られ、スクロールバーを使用してスクロールさせることで、溢れたコンテンツを表示することができます。ユーザーエージェントは、コンテンツが溢れているか否かに関わらずスクロールバーを表示します。そのため、このキーワードを使用すると、コンテンツが変化するたびにスクロールバーが表示されたり非表示になったりすることを防ぐことができます。ただし、印刷時には溢れたコンテンツが印刷される場合があります。要素ボックスはスクロールコンテナーになります。
 - `auto`
+  - : 溢れたコンテンツは要素のパディングボックスで切り取られ、溢れたコンテンツはスクロールバーを使ってスクロールして表示することができます。`scroll` とは異なり、ユーザエージェントはコンテンツが溢れた場合にのみスクロールバーを表示します。コンテンツが要素のパディングボックス内に収まる場合、`visible` と同じように見えますが、新しい整形コンテキストを確立します。要素ボックスはスクロールコンテナーになります。
 
-  - : {{Glossary("user agent", "ユーザーエージェント")}}に依存します。内容がパディングボックス内に収まる場合は `visible` と同じように表示されますが、新しいブロック整形コンテキストを生成します。デスクトップブラウザーは内容があふれる場合、スクロールバーを表示します。
-
-- `overlay` {{deprecated_inline}}
-  - : `auto` と同じ動作をしますが、場所を取る代わりに内容の先頭にスクロールバーを表示します。 WebKit ベース (例えば Safari) 及び Blink ベース (例えば Chrome 又は Opera) のブラウザーでのみ対応しています。
-
-#### Mozilla 拡張
-
-- `-moz-scrollbars-none` {{deprecated_inline}}
-  - : 代わりに `overflow: hidden` を使ってください。
-- `-moz-scrollbars-horizontal` {{deprecated_inline}}
-  - : `{{Cssxref("overflow-x")}}: scroll` および `{{Cssxref("overflow-y")}}: hidden`、または `overflow: scroll hidden` を代わりに使用してください。
-- `-moz-scrollbars-vertical` {{deprecated_inline}}
-  - : `{{Cssxref("overflow-x")}}: hidden` および `{{Cssxref("overflow-y")}}: scroll`、または `overflow: hidden scroll` を代わりに使用してください。
-- `-moz-hidden-unscrollable` {{deprecated_inline}}
-  - : 代わりに `overflow: clip` を使用してください。
-
-Firefox 63 において、 `-moz-scrollbars-none`, `-moz-scrollbars-horizontal`, `-moz-scrollbars-vertical` は機能設定で隠されています。 about:config の中で `layout.css.overflow.moz-scrollbars.enabled` を `true` に設定してください。
+> [!NOTE]
+> キーワード値 `overlay` は、`auto` の値の古い別名です。 `overlay` を使用すると、スクロールバーは空間を占有するのではなく、コンテンツの上に描画されます。
 
 ## 解説
 
-オーバーフローの選択肢としては、クリッピング、スクロールバーの表示、コンテナーの外側にはみ出して周囲の領域に表示するものがあります。
+overflow のオプションには、溢れたコンテンツを非表示にするもの、スクロールバーを表示して溢れたコンテンツが見られるようにするもの、溢れたコンテンツを要素ボックスの周囲の領域に流すもの、およびそれらの組み合わせがあります。
 
-値を (既定値の) `visible` 以外の値に指定すると、新たな[ブロック整形コンテキスト](/ja/docs/Web/Guide/CSS/Block_formatting_context)を生成します。これは技術的な理由で必要なものです。そうでなければ、もしスクロールする要素に浮動要素が交差している時、スクロールするごとに強制的に折り返し処理をやり直すことになり、スクロール操作が遅くなる原因になるからです。
+`overflow` の各キーワードを使用する際には、以下の点に留意してください。
 
-`overflow` の効果を得るには、ブロックレベルコンテナーに高さ (`height` または `max-height`) を設定するか、 `white-space` を `nowrap` に設定することが必要です。
-
-一方の軸を`visible` (既定値) に設定して、もう一方を<em>他の</em>値に設定すると、 `visible` は `auto` として動作する結果になります。
-
-JavaScript の {{domxref("Element.scrollTop")}} プロパティは、 `overflow` が `hidden` に設定されている場合でも HTML 要素をスクロールさせるために使うことができます。
+- `overflow` に `visible`（既定値）または `clip` 以外の値を指定すると、新しい[ブロック整形コンテキスト](/ja/docs/Web/CSS/CSS_display/Block_formatting_context)が作成されます。これは技術的な理由から必要です。浮動要素がスクロール要素と交差する場合、スクロールのステップごとにコンテンツが強制的に再配置されるため、スクロールの使い勝手が悪くなります。
+- `overflow` の設定で期待通りの効果を出すには、溢れる方向が垂直方向の場合は高さ（{{cssxref("height")}} または {{cssxref("max-height")}}）、溢れる方向が水平方向の場合は幅（{{cssxref("width")}} または {{cssxref("max-width")}}）、溢れる方向がブロック方向の場合はブロックサイズ（{{cssxref("block-size")}} または {{cssxref("max-block-size")}}）、溢れる方向がインライン方向の場合はインラインサイズ（{{cssxref("inline-size")}} または {{cssxref("max-inline-size")}}）に加えて {{cssxref("white-space")}} に `nowrap` を、いずれかをブロックレベル要素に設定する必要があります。
+- いずれかの方向で overflow を `visible`（すなわち、`overflow-x` または `overflow-y`）に設定する場合、もう一方の方向を `visible` または `clip` に設定する必要があり、そうしないと、`visible` の値は `auto` として動作します。
+- いずれかの方向で overflow を `clip` に設定する場合、もう一方の方向を `visible` または `clip` に設定する必要があり、そうしないと、`clip` の値は `hidden` として動作します。
+- JavaScript の {{domxref("Element.scrollTop")}} プロパティは、 `overflow` が `hidden` に設定されている場合でも HTML 要素をスクロールさせるために使うことができます。
 
 ## 公式定義
 
@@ -86,9 +75,15 @@ JavaScript の {{domxref("Element.scrollTop")}} プロパティは、 `overflow`
 
 {{csssyntax}}
 
+## アクセシビリティ
+
+スクロールするコンテンツ領域は、キーボードのみを使用するユーザーにはスクロールできません。ただし、Firefox を使用しているユーザーは例外です（Firefox では、コンテナーが既定ではキーボード操作可能に設定されています）。
+
+開発者として、Firefox 以外のキーボードのみ操作のユーザーにコンテナーのスクロールを許可するには、[`tabindex`](/ja/docs/Web/HTML/Global_attributes/tabindex) 属性を使用して `tabindex="0"` と指定する必要があります。残念ながら、スクリーンリーダーがこのタブストップに遭遇すると、それが何であるかのコンテキストを保有していないため、スクリーンリーダーはそのコンテンツ全体をアナウンスする可能性が高いです。適切な WAI-ARIA ロール（例えば `role="region"`）とアクセシブル名（[`aria-label`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-label) または [`aria-labelledby`](/ja/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) によって）を指定することで、この問題を軽減できます。
+
 ## 例
 
-### テキストに様々な overflow の値を設定
+### 様々な overflow キーワードの結果のデモ
 
 #### HTML
 
@@ -96,55 +91,86 @@ JavaScript の {{domxref("Element.scrollTop")}} プロパティは、 `overflow`
 <div>
   <code>visible</code>
   <p class="visible">
-    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
-    doloremque laudantium.
+    Maya Angelou: "I've learned that people will forget what you said, people
+    will forget what you did, but people will never forget how you made them
+    feel."
   </p>
 </div>
 
 <div>
   <code>hidden</code>
   <p class="hidden">
-    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
-    doloremque laudantium.
+    Maya Angelou: "I've learned that people will forget what you said, people
+    will forget what you did, but people will never forget how you made them
+    feel."
+  </p>
+</div>
+
+<div>
+  <code>clip</code>
+  <p class="clip">
+    Maya Angelou: "I've learned that people will forget what you said, people
+    will forget what you did, but people will never forget how you made them
+    feel."
   </p>
 </div>
 
 <div>
   <code>scroll</code>
   <p class="scroll">
-    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
-    doloremque laudantium.
+    Maya Angelou: "I've learned that people will forget what you said, people
+    will forget what you did, but people will never forget how you made them
+    feel."
   </p>
 </div>
 
 <div>
   <code>auto</code>
   <p class="auto">
-    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
-    doloremque laudantium.
+    Maya Angelou: "I've learned that people will forget what you said, people
+    will forget what you did, but people will never forget how you made them
+    feel."
+  </p>
+</div>
+
+<div>
+  <code>overlay</code>
+  <p class="overlay">
+    Maya Angelou: "I've learned that people will forget what you said, people
+    will forget what you did, but people will never forget how you made them
+    feel."
   </p>
 </div>
 ```
 
 #### CSS
 
-```css
+```css hidden
 body {
   display: flex;
-  justify-content: space-around;
+  flex-wrap: wrap;
+  justify-content: start;
 }
 
 div {
-  margin: 1em;
+  margin: 2em;
   font-size: 1.2em;
 }
 
 p {
-  width: 8em;
+  width: 5em;
   height: 5em;
   border: dotted;
+  margin-top: 0.5em;
 }
 
+div:nth-of-type(5),
+div:nth-of-type(6) {
+  margin-top: 200px;
+}
+```
+
+```css
 p.visible {
   overflow: visible;
 }
@@ -153,6 +179,11 @@ p.hidden {
   overflow: hidden;
 }
 
+p.clip {
+  overflow: clip;
+  overflow-clip-margin: 1em;
+}
+
 p.scroll {
   overflow: scroll;
 }
@@ -160,11 +191,15 @@ p.scroll {
 p.auto {
   overflow: auto;
 }
+
+p.overlay {
+  overflow: overlay;
+}
 ```
 
 #### 結果
 
-{{EmbedLiveSample("Setting_different_overflow_values_for_text", "600", "250")}}
+{{EmbedLiveSample("様々な_overflow_キーワードの結果のデモ", "500", "620")}}
 
 ## 仕様書
 
@@ -176,5 +211,8 @@ p.auto {
 
 ## 関連情報
 
-- 関連 CSS プロパティ: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("overflow-inline")}}, {{Cssxref("overflow-block")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}
-- [CSS オーバーフロー](/ja/docs/Web/CSS/CSS_Overflow) および [スクロール可能なオーバーフローのデバッグ](/ja/docs/Tools/Page_Inspector/How_to/Debug_Scrollable_Overflow)
+- {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}
+- {{Cssxref("overflow-block")}}, {{Cssxref("overflow-clip-margin")}}, {{Cssxref("overflow-inline")}}
+- {{Cssxref("clip")}}, {{Cssxref("display")}}, {{cssxref("text-overflow")}}, {{cssxref("white-space")}}
+- [CSS オーバーフロー](/ja/docs/Web/CSS/CSS_overflow)
+- [Keyboard-only scrolling areas](https://adrianroselli.com/2022/06/keyboard-only-scrolling-areas.html) on adrianroselli.com (2022)
diff --git a/files/ja/web/css/reference/index.md b/files/ja/web/css/reference/index.md
index a3fc7e07fbed34..d38d75f0e594bb 100644
--- a/files/ja/web/css/reference/index.md
+++ b/files/ja/web/css/reference/index.md
@@ -2,7 +2,7 @@
 title: CSS リファレンス
 slug: Web/CSS/Reference
 l10n:
-  sourceCommit: 62c5c3f5655002f230bf0153fbdf8a883611014a
+  sourceCommit: 583d48191a7a8605d831aff357bef6cc63aef2e3
 ---
 
 {{CSSRef}}
@@ -13,7 +13,7 @@ l10n:
 
 ### スタイルルールの構文
 
-```
+```css
 スタイルルール ::=
     セレクターリスト {
       プロパティリスト
@@ -22,7 +22,7 @@ l10n:
 
 ここで、
 
-```
+```css
 セレクターリスト ::=
     セレクター[:擬似クラス] [::擬似要素]
     [, セレクターリスト]
@@ -45,7 +45,7 @@ div.menu-bar li:hover > ul {
 }
 ```
 
-初心者レベルの CSS セレクター構文への入門については、 [CSS セレクターのガイド](/ja/docs/Learn/CSS/Building_blocks/Selectors)をご覧ください。ルール定義内での [CSS 構文](/ja/docs/Web/CSS/Syntax) エラーは、そのルール全体を無効にするので十分に注意してください。無効なルールはブラウザーにより無視されます。 CSS ルールの定義はすべて (ASCII) [テキストベース](https://www.w3.org/TR/css-syntax-3/#intro) であり、DOM-CSS / CSSOM (ルール管理システム) は [オブジェクトベース](https://www.w3.org/TR/cssom/#introduction) なので注意してください。
+初心者レベルの CSS セレクター構文への入門については、 [CSS セレクターのガイド](/ja/docs/Learn/CSS/Building_blocks/Selectors)をご覧ください。ルール定義内での [CSS 構文](/ja/docs/Web/CSS/Syntax) エラーは、そのルール全体を無効にするので十分に注意してください。無効なルールはブラウザーにより無視されます。 CSS ルールの定義はすべて ({{Glossary("ASCII")}}) [テキストベース](https://www.w3.org/TR/css-syntax-3/#intro) であり、DOM-CSS / CSSOM (ルール管理システム) は [オブジェクトベース](https://www.w3.org/TR/cssom/#introduction) なので注意してください。
 
 ### アットルールの構文
 
@@ -53,6 +53,9 @@ div.menu-bar li:hover > ul {
 
 ## 索引
 
+> [!NOTE]
+> この索引は、[SVG](/ja/docs/Web/SVG) 要素上で CSS プロパティとして使える SVG 専用プレゼンテーション属性を含んでいません。
+
 > [!NOTE]
 > この索引でのプロパティ名は、CSS 標準の名前と異なる JavaScript の名前は含んでいません。
 
@@ -60,7 +63,7 @@ div.menu-bar li:hover > ul {
 
 ## セレクター
 
-以下は様々な[セレクター](/ja/docs/Web/CSS/CSS_Selectors)で、 DOM 内の要素の様々な特徴に基づいた条件付きのスタイル付けを可能にします。
+以下は様々な[セレクター](/ja/docs/Web/CSS/CSS_selectors)で、DOM 内の要素の様々な特徴に基づいた条件付きのスタイル付けを可能にします。
 
 ### 基本セレクター
 
@@ -99,7 +102,7 @@ div.menu-bar li:hover > ul {
 - [擬似要素](/ja/docs/Web/CSS/Pseudo-elements) `::`
   - : HTML に含まれていないエンティティを表します。
 
-> **メモ:** **関連情報:** [Selectors Level 4 仕様書におけるセレクター](https://www.w3.org/TR/selectors/#overview)。
+> **注目:** [Selectors Level 4 仕様書におけるセレクター](https://www.w3.org/TR/selectors/#overview)および[擬似要素の仕様書](https://drafts.csswg.org/css-pseudo/)も参照してください。
 
 ## 概念
 
@@ -128,7 +131,7 @@ div.menu-bar li:hover > ul {
 
 ### レイアウト
 
-- [ブロック整形コンテキスト](/ja/docs/Web/Guide/CSS/Block_formatting_context)
+- [ブロック整形コンテキスト](/ja/docs/Web/CSS/CSS_display/Block_formatting_context)
 - [ボックスモデル](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)
 - [包含ブロック](/ja/docs/Web/CSS/Containing_block)
 - [レイアウトモード](/ja/docs/Web/CSS/Layout_mode)
@@ -142,11 +145,7 @@ div.menu-bar li:hover > ul {
 ### 主なオブジェクトの種類
 
 - {{DOMxRef("Document.styleSheets")}}
-- `{{DOMxRef("StyleSheetList", "styleSheets", "", 1)}}[i].{{DOMxRef("CSSRuleList", "cssRules", "", 1)}}`
-- `cssRules[i].{{DOMxRef("CSSRule.cssText", "cssText", "", 1)}}` (セレクターとスタイル)
-- `cssRules[i].{{DOMxRef("CSSStyleRule.selectorText", "selectorText", "", 1)}}`
 - {{DOMxRef("HTMLElement.style")}}
-- `HTMLElement.style.{{DOMxRef("CSSStyleDeclaration.cssText", "cssText", "", 1)}}` (スタイルのみ)
 - {{DOMxRef("Element.className")}}
 - {{DOMxRef("Element.classList")}}
 
@@ -162,4 +161,4 @@ div.menu-bar li:hover > ul {
 
 ## 外部リンク
 
-- [CSS 目次 (w3.org)](https://www.w3.org/TR/CSS/#indices)
+- [CSS 索引 (w3.org)](https://www.w3.org/TR/CSS/#indices)
diff --git a/files/ja/web/css/scrollbar-gutter/index.md b/files/ja/web/css/scrollbar-gutter/index.md
index d9fd88921a7c2d..7f6214348a8c7c 100644
--- a/files/ja/web/css/scrollbar-gutter/index.md
+++ b/files/ja/web/css/scrollbar-gutter/index.md
@@ -53,14 +53,14 @@ scrollbar-gutter: unset;
 
 ## 例
 
-The examples below show how the different values for the `scrollbar-gutter` property would affect a scrollable `div` element (`.container`) with one or more paragraphs contained within.
+次の例は、`scrollbar-gutter` プロパティの異なる値が、1 つ以上の段落を含むスクロール可能な `div` 要素（`.container`）にどのように影響するかを示しています。
 
 > [!NOTE]
-> In the images for the examples, the user's system settings are set to classic scrollbars (always shown).
+> 例の画像では、ユーザーのシステム設定は従来のスクロールバー（常に表示）に設定されています。
 
 ### 例 1
 
-Prevent unneeded layout changes as the content growing or shrinking causes the scrollbar to appear/disappear, a space is reserved for it.
+コンテンツが大きくなったり小さくなったりすることでスクロールバーが表示されたり消えたりするため、そのための空間が確保され、不要なレイアウト変更を防ぐことができます。
 
 ```css
 .container {
@@ -68,11 +68,11 @@ Prevent unneeded layout changes as the content growing or shrinking causes the s
 }
 ```
 
-![A containing div element with a paragraph of text inside and a space to the right where the scrollbar is](stable-no-scroll.png)
+![div 要素の中にテキストの段落があり、スクロールバーの右側に空間がある。](stable-no-scroll.png)
 
 ### 例 2
 
-Add symmetric spacing to both sides of the box so the content is centered:
+ボックスの両側に左右対称の空間を追加し、コンテンツが中央に来るようにします。
 
 ```css
 .container {
@@ -80,12 +80,12 @@ Add symmetric spacing to both sides of the box so the content is centered:
 }
 ```
 
-![A containing div element with a paragraph of text inside, a space to the right where the scrollbar is and a matching empty space to the left](stable-both-edges.png)
+![テキストの段落を含む div 要素で、スクロールバーがある右側に空間があり、左側に同じ空間がある。](stable-both-edges.png)
 
 ### 例 3
 
-Align the contents of a non-scrolling element and a scrolling one adjacent to it:
-This example shows two divs side by side. The one on the left has no scroll, but the one on the right does. Both have `scrollbar-gutter` applied, which also reserves space for the div on the left which doesn't have scrollable content. This is a good technique to use to keep the width of content consistent.
+スクロールしない要素と、それに隣接するスクロールする要素の内容を揃えます。
+この例では、2 つの div を横に並べています。左側のものはスクロールしませんが、右側のものはスクロールします。両方とも `scrollbar-gutter` が適用されており、スクロール可能なコンテンツを持たない左側の div のための空間も確保されています。これは、コンテンツの幅を一定に保つために使う良いテクニックです。
 
 ```css
 .container1 {
@@ -98,13 +98,13 @@ This example shows two divs side by side. The one on the left has no scroll, but
 }
 ```
 
-![Two adjacent divs containing text, both with space for a scrollbar](side-by-side.png)
+![テキストを含む 2 つの隣接する div で、両方ともスクロールバーのための空間がある。](side-by-side.png)
 
 ### スクロールバーのオーバーレイ
 
-For reference, this image shows the same div as above, but with the user's system settings set to overlay scrollbars. Note here the scrollbar will only show when the user is scrolling and on top of the content, so no space is reserved for it and the `scrollbar-gutter` property has no effect.
+参考までに、この画像は上記と同じ div を示していますが、ユーザーのシステム設定がスクロールバーをオーバーレイするように設定されています。ここでは、スクロールバーはユーザーがスクロールしているときだけ表示され、コンテンツの上に表示されるため、スクロールバーのための空間は確保されず、`scrollbar-gutter` プロパティは影響しないことに注意してください。
 
-![One div with text, no visible scrollbar](for-ref-no-scroll.png)
+![テキストを含む 1 つの div、スクロールバーなし](for-ref-no-scroll.png)
 
 ## 仕様書
 
diff --git a/files/ja/web/css/text-decoration/index.md b/files/ja/web/css/text-decoration/index.md
index ee2df68cdb6aa8..bb7cac187e31f2 100644
--- a/files/ja/web/css/text-decoration/index.md
+++ b/files/ja/web/css/text-decoration/index.md
@@ -1,6 +1,8 @@
 ---
 title: text-decoration
 slug: Web/CSS/text-decoration
+l10n:
+  sourceCommit: b782b7d57e7040d5d9644a19017f4683044b5c90
 ---
 
 {{CSSRef}}
@@ -108,7 +110,9 @@ text-decoration: unset;
 </p>
 ```
 
-{{EmbedLiveSample('Examples','auto','320')}}
+#### 結果
+
+{{EmbedLiveSample('Examples','auto','520')}}
 
 ## 仕様書
 
diff --git a/files/ja/web/css/text-overflow/index.md b/files/ja/web/css/text-overflow/index.md
index e62cc594b035fc..a92677b3dc5878 100644
--- a/files/ja/web/css/text-overflow/index.md
+++ b/files/ja/web/css/text-overflow/index.md
@@ -1,11 +1,13 @@
 ---
 title: text-overflow
 slug: Web/CSS/text-overflow
+l10n:
+  sourceCommit: 5bd9fe2b25c6eee2a14d0406ce7116998fa48c13
 ---
 
 {{CSSRef}}
 
-**`text-overflow`** は [CSS](/ja/docs/Web/CSS) のプロパティで、非表示のあふれた内容をどのようにユーザーに知らせるのかを設定します。切り取られるか、省略記号 ('`…`') を表示するか、独自の文字列を表示するかです。
+**`text-overflow`** は [CSS](/ja/docs/Web/CSS) のプロパティで、溢れた内容が非表示になる場合、それをどのようにユーザーに示すのかを設定します。切り取られるか、省略記号 (`…`) を表示するか、独自の文字列を表示するかです。
 
 {{EmbedInteractiveExample("pages/css/text-overflow.html")}}
 
@@ -16,12 +18,10 @@ overflow: hidden;
 white-space: nowrap;
 ```
 
-`text-overflow` プロパティは、*インライン*の進行方向にブロックコンテナー要素をはみ出す内容にのみ作用します (例えば、ボックスの下をあふれるテキストには作用しません)。
+`text-overflow` プロパティは、*インライン*の進行方向にブロックコンテナー要素をはみ出す内容にのみ作用します（例えば、ボックスの下にあふれるテキストには作用しません）。
 
 ## 構文
 
-`text-overflow` プロパティは、1 つまたは 2 つの値を使用して指定することができます。1 つの値が与えられた場合は、行末 (左書きの場合は右、右書きの場合は左) をあふれた動作を指定します。2 つの値が指定された場合は、最初の値が行の左端、2 番目の値が行の右端のあふれの動作を指定します。
-
 ```css
 text-overflow: clip;
 text-overflow: ellipsis ellipsis;
@@ -34,9 +34,7 @@ text-overflow: revert;
 text-overflow: unset;
 ```
 
-- キーワード値 `clip`, `ellipsis`, `fade` のうちの一つ
-- フェードの長さを制御するための `fade()` 関数に {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} が渡されたもの
-- `<string>`
+`text-overflow` プロパティは、1 つまたは 2 つの値を使用して指定することができます。1 つの値が与えられた場合は、行末（左書きの場合は右、右書きの場合は左）をあふれたときの動作を指定します。2 つの値が指定された場合は、最初の値が行の左端、2 番目の値が行の右端のあふれたときの動作を指定します。このプロパティは、キーワード値（`clip` または `ellipsis`）または `<string>` 値を受け入れます。
 
 ### 値
 
@@ -44,15 +42,8 @@ text-overflow: unset;
   - : このプロパティの既定値です。このキーワード値は[コンテンツ領域](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)の末端でテキストを切り取るので、文字の途中で切り取る可能性があります。文字と文字の間で切り取るには、対象のブラウザーが `text-overflow` の空文字列に対応していれば、 `text-overflow: '';` を指定することができます。
 - `ellipsis`
   - : このキーワード値は、切り取られたテキストを表現するために省略記号 (`'…'`, `U+2026 HORIZONTAL ELLIPSIS`) を表示します。省略記号は[コンテンツ領域](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)内に表示され、表示テキストのサイズを更に狭めます。省略記号を表示する場所がなければ、切り取られます。
-- `<string>` {{experimental_inline}}
+- `<string>`
   - : クリップされたテキストを表すために使われる {{cssxref("&lt;string&gt;")}} です。この文字列は[コンテンツ領域](/ja/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model)内に表示され、表示テキストのサイズをさらに狭めます。この文字列自身を表示する場所がなければ、切り取られます。
-- `fade` {{experimental_inline}}
-  - : このキーワードはあふれたインラインコンテンツを切り取り、行ボックスの端付近にフェードアウト効果を適用して、端が完全に透明になるようにします。
-- `fade( <length> | <percentage> )` {{experimental_inline}}
-
-  - : このキーワードはあふれたインラインコンテンツを切り取り、行ボックスの端付近にフェードアウト効果を適用して、端が完全に透明になるようにします。
-
-    引数はフェード効果が適用される範囲を指定します。 {{cssxref("&lt;percentage&gt;")}} は行ボックスの幅に対する割合になります。 `0` よりも小さい値は `0` に丸められます。行ボックスの幅よりも大きな値は、行ボックスの幅に丸められます。
 
 ## 公式定義
 
@@ -209,7 +200,7 @@ p {
 // それぞれの段落をスクロールされ、行頭が隠れるようにします
 const paras = document.querySelectorAll("p");
 
-for (let para of paras) {
+for (const para of paras) {
   para.scroll(100, 0);
 }
 ```
diff --git a/files/ja/web/css/text-transform/index.md b/files/ja/web/css/text-transform/index.md
index bf70fc781f3728..de39bbd6070295 100644
--- a/files/ja/web/css/text-transform/index.md
+++ b/files/ja/web/css/text-transform/index.md
@@ -2,12 +2,12 @@
 title: text-transform
 slug: Web/CSS/text-transform
 l10n:
-  sourceCommit: abf155210d826c2584d23433eb2eac45a6669d23
+  sourceCommit: dad91b2a7c51b05d98cd79e436f61565810a42a5
 ---
 
 {{CSSRef}}
 
-**`text-transform`** は CSS のプロパティで、要素のテキストを大文字表記する方法を指定します。テキストをすべて大文字にしたり、すべて小文字にしたり、各単語の先頭を大文字にしたりすることを指定します。フリガナの読みやすさを向上するのにも役立ちます。
+**`text-transform`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素のテキストを大文字表記する方法を指定します。テキストをすべて大文字にしたり、すべて小文字にしたり、各単語の先頭を大文字にしたりすることを指定します。フリガナの読みやすさを向上するのにも役立ちます。
 
 {{EmbedInteractiveExample("pages/css/text-transform.html")}}
 
@@ -35,6 +35,7 @@ text-transform: uppercase;
 text-transform: lowercase;
 text-transform: full-width;
 text-transform: full-size-kana;
+text-transform: math-auto;
 
 /* グローバル値 */
 text-transform: inherit;
@@ -46,11 +47,11 @@ text-transform: unset;
 
 - `capitalize`
 
-  - : それぞれの単語の最初の*文字*を強制的に大文字に変換させるキーワードです。ほかの文字は変更しません。すなわち、要素のテキストで記載した元の表記を維持します。文字とは、文字または数字の一般カテゴリーの一部である任意の Unicode 文字です {{experimental_inline}}。単語の先頭にある句読点や記号は無視されます。
+  - : それぞれの単語の最初の*文字*を強制的に大文字に変換させるキーワードです。ほかの文字は変更しません。すなわち、要素のテキストで記載した元の表記を維持します。文字とは、文字または数字の一般カテゴリーの一部である任意の Unicode 文字です。単語の先頭にある句読点や記号は無視されます。
 
     > **メモ:** `capitalize` が言語固有の先頭文字を大文字にする慣習 (英語で冠詞を除外するなど) に従うと期待するべきではありません。
 
-    > **メモ:** `capitalize` キーワードは CSS 1 および CSS 2.1 で定義されていたものでした。この結果、最初の文字を計算する方法は、ブラウザーによって異なっていました (Firefox は `-` および `_` を文字として捉えていましたが、他はそうではありませんでした。 Webkit 及び Gecko は `ⓐ` のような文字から作られた記号を、誤って文字として認識していました。 Internet Explorer 9 は最も CSS 2 の定義に近かったのですが、いくつかおかしいものがありました)。正しいふるまいを詳細に定義したので、 CSS Text Level 3 ではこれを一掃しました。ブラウザーの互換性表の `capitalize` の行は、それぞれのエンジンがこの詳細に定義された振る舞いに対応し始めたバージョンを記載しています。
+    > **メモ:** `capitalize` キーワードは CSS 1 および CSS 2.1 で定義されていたものでした。この結果、最初の文字を計算する方法は、ブラウザーによって異なっていました（Firefox は `-` および `_` を文字として捉えていましたが、他はそうではありませんでした。 Webkit 及び Gecko は `ⓐ` のような文字から作られた記号を、誤って文字として認識していました）。正しいふるまいを詳細に定義したので、 CSS Text Level 3 ではこれを一掃しました。ブラウザーの互換性表の `capitalize` の行は、それぞれのエンジンがこの詳細に定義された振る舞いに対応し始めたバージョンを記載しています。
 
 - `uppercase`
   - : すべての文字を大文字に変換させるキーワードです。
@@ -59,11 +60,14 @@ text-transform: unset;
 - `none`
   - : すべての文字を変換させないキーワードです。
 - `full-width`
-  - : 一般的な東アジアの文字 (中国語や日本語など) において、強制的に文字 — 主に記号やラテン文字 — を正方形の枠内に (全角で) 表記して、揃えて表示するキーワードです。
+  - : 一般的な東アジアの文字（中国語や日本語など）において、強制的に文字 — 主に記号やラテン文字 — を正方形の枠内に（全角で）表記して、揃えて表示するキーワードです。
 - `full-size-kana`
   - : このキーワードは一般に {{htmlelement("ruby")}} によるフリガナで使用され、すべての小文字の仮名文字を同等の大文字の仮名文字に変換することで、ルビで使われるフォントの大きさによる読みやすさの問題を解消します。
+- `math-auto`
+  - : 数学のイタリック体でテキストを適切に自動的にレンダリングするために使用されます。 これは、ラテン文字やギリシャ文字、他にもいくつか数学関連の記号を、[イタリック体の数学記号](https://www.unicode.org/charts/PDF/U1D400.pdf)に変換しますが、適用されるのは、1 文字を含むテキストノードの場合のみです。 例えば、"x" は "𝑥" (U+1D465) になりますが、"exp" は "exp" のままです。
+    主に、MathML の {{mathmlelement("mi")}} 要素の動作を指定するために使用されます。通常は、正しいスタイル設定が自動的に適用される MathML マークアップを使用しましょう。
 
-## アクセシビリティの考慮
+## アクセシビリティ
 
 テキストの長い区間に `text-transform` の値を `uppercase` で設定すると、失読症のような認知障碍を持つ人にとって読むのが難しくなることがあります。
 
@@ -80,18 +84,18 @@ text-transform: unset;
 
 ## 例
 
-### `none`
+### "none" の使用例
 
 ```html
 <p>
   Initial String
-  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
+  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
 </p>
 <p>
   text-transform: none
   <strong
     ><span
-      >Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span
+      >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
     ></strong
   >
 </p>
@@ -110,18 +114,18 @@ strong {
 
 {{ EmbedLiveSample('Example using "none"', '100%', '100px') }}
 
-### capitalize (一般的)
+### "capitalize" の使用例（一般的）
 
 ```html
 <p>
   Initial String
-  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
+  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
 </p>
 <p>
   text-transform: capitalize
   <strong
     ><span
-      >Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span
+      >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
     ></strong
   >
 </p>
@@ -140,7 +144,7 @@ strong {
 
 {{ EmbedLiveSample('Example using "capitalize" (general)', '100%', '100px') }}
 
-### capitalize (句読点)
+### "capitalize" の使用例（区切り文字）
 
 ```html
 <p>
@@ -174,7 +178,7 @@ strong {
 
 {{ EmbedLiveSample('Example using "capitalize" (punctuation)', '100%', '100px') }}
 
-### capitalize (記号)
+### "capitalize" の使用例（記号）
 
 ```html
 <p>
@@ -200,7 +204,7 @@ strong {
 
 {{ EmbedLiveSample('Example using "capitalize" (symbols)', '100%', '100px') }}
 
-### capitalize (オランダ語の二重音字 ij)
+### "capitalize" の使用例 (オランダ語の二重音字 ij)
 
 ```html
 <p>
@@ -230,18 +234,18 @@ strong {
 
 {{ EmbedLiveSample('Example using "capitalize" (Dutch ij digraph)', '100%', '100px') }}
 
-### uppercase (一般的)
+### "uppercase" の使用例（一般的）
 
 ```html
 <p>
   Initial String
-  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
+  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
 </p>
 <p>
   text-transform: uppercase
   <strong
     ><span
-      >Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span
+      >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
     ></strong
   >
 </p>
@@ -260,7 +264,7 @@ strong {
 
 {{ EmbedLiveSample('Example using "uppercase" (general)', '100%', '100px') }}
 
-### uppercase (ギリシャ語の母音字)
+### "uppercase" の使用例（ギリシャ語の母音字）
 
 ```html
 <p>
@@ -288,18 +292,18 @@ strong {
 
 {{ EmbedLiveSample('Example using "uppercase" (Greek vowels)', '100%', '100px') }}
 
-### lowercase (一般的)
+### "lowercase" の使用例（一般的）
 
 ```html
 <p>
   Initial String
-  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong>
+  <strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit…</strong>
 </p>
 <p>
   text-transform: lowercase
   <strong
     ><span
-      >Lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span
+      >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
     ></strong
   >
 </p>
@@ -318,7 +322,7 @@ strong {
 
 {{ EmbedLiveSample('Example using "lowercase" (general)', '100%', '100px') }}
 
-### lowercase (ギリシャ文字 Σ)
+### "lowercase" の使用例（ギリシャ文字 Σ）
 
 ```html
 <p>
@@ -348,7 +352,7 @@ strong {
 
 {{ EmbedLiveSample('Example using "lowercase" (Greek Σ)', '100%', '100px') }}
 
-### lowercase (リヒテンシュタイン語)
+### "lowercase" の使用例（リヒテンシュタイン語）
 
 ```html
 <p>
@@ -374,7 +378,7 @@ strong {
 
 {{ EmbedLiveSample('Example using "lowercase" (Lithuanian)', '100%', '100px') }}
 
-### full-width (一般)
+### "full-width"（一般）
 
 ```html
 <p>
@@ -407,7 +411,7 @@ strong {
 
 {{ EmbedLiveSample('Example using "full-width" (general)', '100%', '175px') }}
 
-### full-width (日本語の半角カタカナ)
+### "full-width"（日本語の半角カタカナ）
 
 ```html
 <p>
@@ -430,16 +434,15 @@ strong {
 }
 ```
 
-日本語の半角カタカナは、8 ビットの文字コードでカタカナを表現するために使われていました。通常の (全角の) カタカナ文字とは異なり、濁点の付いた文字は、文字本体と濁点の 2 つのコードポイントで表現されます。 `full-width` は、これらの文字を全角に変換する際に、1 つのコードポイントにまとめます。
+日本語の半角カタカナは、8 ビットの文字コードでカタカナを表現するために使われていました。通常の（全角の）カタカナ文字とは異なり、濁点の付いた文字は、文字本体と濁点の 2 つのコードポイントで表現されます。 `full-width` は、これらの文字を全角に変換する際に、1 つのコードポイントにまとめます。
 
 {{ EmbedLiveSample('Example using "full-width" (Japanese half-width katakana)', '100%', '175px') }}
 
-### full-size-kana
+### "full-size-kana" の使用例
 
 ```html
 <p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
 <p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
-</p>
 ```
 
 ```css
@@ -450,6 +453,63 @@ p:nth-of-type(2) {
 
 {{ EmbedLiveSample('Example using "full-size-kana"', '100%', '175px') }}
 
+### "math-auto" の使用例
+
+例えば、純粋な HTML マークアップを使用して数式を作成します。
+
+```html
+<div>
+  (<span class="math-id">sin</span>&#8198;<span class="math-id">x</span>)<sup
+    >2</sup
+  >
+  + (<span class="math-id">cos</span>&#8198;<span class="math-id">x</span>)<sup
+    >2</sup
+  >
+  = 1
+</div>
+```
+
+すべての `.math-id` 要素に `text-transform: math-auto` を指定しています。しかし、`x` の文字だけがイタリック体になり、`sin` や `cos` は変化しないことに注目してください。
+
+```css
+.math-id {
+  text-transform: math-auto;
+}
+```
+
+{{ EmbedLiveSample('Example using "math-auto"', '', '100px') }}
+
+ただし、数式には [MathML](/ja/docs/Web/MathML) を使用することをお勧めします。これは、数式コンテンツをより堅牢でアクセシビリティの高い方法で表します。以下は、同じ数式を MathML を使用して記述したものです。
+
+```xml
+<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
+  <semantics>
+    <mrow>
+      <mo stretchy="false">(</mo>
+      <mo lspace="0em" rspace="0em">sin</mo>
+      <mspace width="0.16666666666666666em"></mspace>
+      <mi>x</mi>
+      <msup>
+        <mo stretchy="false">)</mo>
+        <mn>2</mn>
+      </msup>
+      <mo>+</mo>
+      <mo stretchy="false">(</mo>
+      <mo lspace="0em" rspace="0em">cos</mo>
+      <mspace width="0.16666666666666666em"></mspace>
+      <mi>x</mi>
+      <msup>
+        <mo stretchy="false">)</mo>
+        <mn>2</mn>
+      </msup>
+      <mo>=</mo>
+      <mn>1</mn>
+    </mrow>
+    <annotation encoding="TeX">(\sin\,x)^2+(\cos\,x)^2=1</annotation>
+  </semantics>
+</math>
+```
+
 ## 仕様書
 
 {{Specifications}}
diff --git a/files/ja/web/css/transform/index.md b/files/ja/web/css/transform/index.md
index 6fca8d57f2a69d..1923b315e74184 100644
--- a/files/ja/web/css/transform/index.md
+++ b/files/ja/web/css/transform/index.md
@@ -2,7 +2,7 @@
 title: transform
 slug: Web/CSS/transform
 l10n:
-  sourceCommit: fca9bb892a6016c09620a1e3aed3d84ce3780615
+  sourceCommit: fc1cc5684c98d19816d5cc81702d70f2a0debbad
 ---
 
 {{CSSRef}}
@@ -11,7 +11,7 @@ l10n:
 
 {{EmbedInteractiveExample("pages/css/transform.html")}}
 
-このプロパティに `none` 以外の値が設定されていると、[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context)が作成されます。この場合、その要素はその中に含まれる `position: fixed;` または `position: absolute;` であるすべての要素の[包含ブロック](/ja/docs/Web/CSS/Containing_block)として扱われます。
+このプロパティに `none` とは異なる値が設定されていると、[重ね合わせコンテキスト](/ja/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context)が作成されます。この場合、その要素はその中に含まれる `position: fixed;` または `position: absolute;` であるすべての要素の[包含ブロック](/ja/docs/Web/CSS/Containing_block)として扱われます。
 
 > [!WARNING]
 > 座標変換可能な要素のみが `transform` の対象になります。つまり、レイアウトが CSS ボックスモデルによって管理される、[置換要素でないインラインボックス](/ja/docs/Glossary/Inline-level_content)、[表の列ボックス](/ja/docs/Web/HTML/Element/col)、[表の列グループボックス](/ja/docs/Web/HTML/Element/colgroup)を除くすべての要素です。
@@ -59,8 +59,6 @@ transform: unset;
 
 `transform` プロパティには、キーワード値 `none` か 1 つ以上の `<transform-function>` の値のいずれかが指定されます。
 
-複数の関数値に {{cssxref("transform-function/perspective", "perspective()")}} が含まれる場合は、先頭に置く必要があります。
-
 ### 値
 
 - {{cssxref("&lt;transform-function&gt;")}}
@@ -68,7 +66,7 @@ transform: unset;
 - `none`
   - : 座標変換を何も適用しないことを指定します。
 
-## アクセシビリティの考慮
+## アクセシビリティ
 
 拡大や縮小のアニメーションは、特定の種類の偏頭痛を引き起こす原因になりやすいので、アクセシビリティの問題になることがあります。ウェブサイトにこのようなアニメーションを含める必要がある場合は、できればサイト全体で、ユーザーがアニメーションを止める制御ができるようしてください。
 
diff --git a/files/ja/web/css/using_css_custom_properties/index.md b/files/ja/web/css/using_css_custom_properties/index.md
index 62bd5d90356ee5..e18b980cff98b0 100644
--- a/files/ja/web/css/using_css_custom_properties/index.md
+++ b/files/ja/web/css/using_css_custom_properties/index.md
@@ -2,31 +2,41 @@
 title: CSS カスタムプロパティ（変数）の使用
 slug: Web/CSS/Using_CSS_custom_properties
 l10n:
-  sourceCommit: 13c58b0430c3972566ea2d3a254129c18b1ed800
+  sourceCommit: bb48907e64eb4bf60f17efd7d39b46c771d220a0
 ---
 
 {{CSSRef}}
 
-**カスタムプロパティ**（**CSS 変数**や**カスケード変数**と呼ばれることもあります）は、CSS の作者によって作成され、文書全体で再利用可能な特定の値を含むエンティティです。カスタムプロパティ記法（たとえば、**`--main-color: black;`**）で設定し、{{cssxref("var", "var()")}} 関数（たとえば、 `color: var(--main-color);`）でアクセスします。
+**カスタムプロパティ**（**CSS 変数**や**カスケード変数**と呼ばれることもあります）は、CSS の作者によって作成され、文書全体で再利用可能な特定の値を表すエンティティです。これらは、{{cssxref("@property")}} アットルールまたはカスタムプロパティ構文（例: **`--primary-color: blue;`**）を使用して設定します。 カスタムプロパティは、CSS の {{cssxref("var", "var()")}} 関数（例: **`color: var(--primary-color);`**）を使用してアクセスします。
 
-複雑なウェブサイトには、膨大な量の CSS があり、しばしば同じ値が使われています。たとえば、同じ色が異なる場所で数百も使われており、色を変更する場合、グローバルに検索し、置き換えをしなくてはなりません。カスタムプロパティを使えば、一ヶ所に値を保存しておき、複数の場所から参照することができます。更なるメリットとして、意味的な識別をしやすくなります。たとえば、 `--main-text-color` は `#00ff00` より、とりわけ同じ色がさまざまな文脈で使われる場合は理解しやすいでしょう。
+複雑なウェブサイトには膨大な量の CSS が含まれており、その結果、CSS の値が重複することがよくあります。例えば、スタイルシートの異なる場所で同じ色が使用されていることはよくあります。多くの場所で重複している色を変更するには、すべてのルールと CSS ファイルを検索して置換する必要があります。カスタムプロパティを使用すると、値を 1 か所で定義し、他の複数の場所で参照できるため、作業が容易になります。また、可読性と意味づけも利点のひとつです。例えば、`--main-text-color` は 16 進数表記のカラーコード `#00ff00` よりも理解しやすく、特にその色が様々なコンテキストで使用される場合にはその傾向が顕著です。
 
-カスタムプロパティはカスケードの対象であり、親から値を継承します。
+[ダッシュ 2 本 (`--`) を使用して](/ja/docs/Web/CSS/--*)定義されたカスタムプロパティは、[カスケード](/ja/docs/Web/CSS/Cascade)の対象となり、親から値を継承します。
+{{cssxref("@property")}} アットルールを使用すると、カスタムプロパティをより詳細に制御でき、親から値を継承するかどうか、初期値をどうするか、適用すべき型制約をどうするかを指定できます。
 
 > [!NOTE]
-> 変数は、メディアクエリーやコンテナークエリーの中では動作しません。{{cssxref("var", "var()")}} 関数は、要素のすべてのプロパティの、任意の場所で使用することができます。{{cssxref("var", "var()")}} 関数はプロパティ名やセレクターなど、プロパティ値以外のところでは使用できません。従って、メディアクエリーやコンテナークエリーの中では使用できません。
+> 変数は、メディアクエリーやコンテナークエリーの中では動作しません。
+> {{cssxref("var", "var()")}} 関数は、要素のすべてのプロパティの、任意の場所で使用することができます。
+> {{cssxref("var", "var()")}} 関数はプロパティ名やセレクターなど、プロパティ値以外のところでは使用できません。従って、メディアクエリーやコンテナークエリーの中では使用できません。
 
-## 基本的な使用方法
+## カスタムプロパティの宣言
 
-カスタムプロパティの宣言は、ハイフン 2 つ (`--`) で始まるカスタムプロパティ名と、何らかの有効な CSS 値になるプロパティ値を使用することで行われます。他のプロパティと同様、これはルールセットの中で次のように書きます。
+CSS では、プロパティ名の接頭辞として ダッシュ 2 本を使用するか、{{cssxref("@property")}} アットルールを使用してカスタムプロパティを宣言できます。
+以下の項では、これら 2 つの方法について説明します。
+
+### ダッシュ 2 本 (`--`) の接頭辞の使用
+
+ダッシュ 2 本で始まるカスタムプロパティは、`--` で始まってプロパティ名（例: `--my-property`）が続くもので、[有効な CSS 値](/ja/docs/Learn/CSS/Building_blocks/Values_and_units)であればどのような値でも指定できます。
+他のプロパティと同様に、これはルールのセット内に記述します。次の例では、カスタムプロパティ `--main-bg-color` を作成し、[`<named-color>`](/ja/docs/Web/CSS/named-color) 値として `brown` を使用する方法を示しています。
 
 ```css
-element {
+section {
   --main-bg-color: brown;
 }
 ```
 
-なお、ルールセットに指定されたセレクターは、カスタムプロパティを使用することができるスコープを定義します。よく使われる方法は、カスタムプロパティを {{cssxref(":root")}} 擬似クラスで定義することで、これにより HTML 文書の全体にわたって適用することができます。
+ルールセットに指定されたセレクター（例えば、上記の例では [`<section>`](/ja/docs/Web/HTML/Element/section) 要素）は、カスタムプロパティを使用できるスコープを定義します。
+このため、カスタムプロパティを {{cssxref(":root")}} 擬似クラスで定義し、グローバルに参照できるようにすることが一般的です。
 
 ```css
 :root {
@@ -34,252 +44,465 @@ element {
 }
 ```
 
-但し、これは常にこうしなければならないわけではありません。カスタムプロパティのスコープを制限する良い理由があるかもしれません。
+常にこうしなければならないわけではありません。カスタムプロパティのスコープを制限する正当な理由があるかもしれません。
 
 > [!NOTE]
 > カスタムプロパティの名前は大文字小文字を区別します。 — `--my-color` は `--My-color` とは別なカスタムプロパティとして扱われます。
 
-前述の通り、普通のプロパティ値の代わりに {{cssxref("var", "var()")}} 関数の中でカスタムプロパティ名を使用することで、カスタムプロパティの値を使用することができます。
+### `@property` アットルールの使用
+
+{{cssxref("@property")}} アットルールを使用すると、カスタムプロパティの定義をより詳細に表現できるようになり、プロパティに関連付けられた型、既定値の設定、および継承の制御が可能にります。
+次の例では、`--logo-color` というカスタムプロパティが [`<color>`](/ja/docs/Web/CSS/color_value) を期待するものとして作成されます。
 
 ```css
-element {
+@property --logo-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #c0ffee;
+}
+```
+
+直接 CSS でなく JavaScript でカスタムプロパティを定義したり作業したりしたい場合は、そのために対応する API があります。
+どのように動作するかについては、 [CSS プロパティと値 API](/ja/docs/Web/API/CSS_Properties_and_Values_API) ページを参照してください。
+
+### `var()` によるカスタムプロパティの参照
+
+どの方法でカスタムプロパティを定義しても、標準プロパティ値の代わりに {{cssxref("var", "var()")}} 関数の中でそのプロパティを参照することができます。
+
+```css
+details {
   background-color: var(--main-bg-color);
 }
 ```
 
 ## カスタムプロパティの第一歩
 
-それぞれ異なるクラスの要素に同じ色を適用するシンプルな CSS から始めましょう。
+スタイルを設定する HTML から始めましょう。
+コンテナーとして機能する `<div>` があり、その中に子要素を記載します。その中には、入れ子になった要素もあります。
 
-```css
-.one {
+```html
+<div class="container">
+  <div class="one">
+    <p>One</p>
+  </div>
+  <div class="two">
+    <p>Two</p>
+    <div class="three">
+      <p>Three</p>
+    </div>
+  </div>
+  <input class="four" placeholder="Four" />
+  <textarea class="five">Five</textarea>
+</div>
+```
+
+次の CSS を使用すると、クラスに基づいていくつかの異なる要素をスタイル設定することができます（下記では、色に焦点を当てるため、一部のレイアウトルールは表示されていません）。
+クラスに応じて、`cornflowerblue` または `aquamarine` の要素に背景色を設定しています。
+
+```css hidden
+/* フォント、境界線、パディングを設定 */
+body {
+  font-family: sans-serif;
   color: white;
-  background-color: brown;
-  margin: 10px;
-  width: 50px;
-  height: 50px;
-  display: inline-block;
 }
 
+div,
+input,
+textarea {
+  border: 2px black solid;
+  padding: 4px;
+  margin: 4px;
+}
+
+.container {
+  display: grid;
+  gap: 10px;
+}
+```
+
+```css
+/* それぞれのクラスに、いくつかの色を設定 */
+.one {
+  background-color: cornflowerblue;
+}
 .two {
-  color: white;
-  background-color: black;
-  margin: 10px;
-  width: 150px;
-  height: 70px;
-  display: inline-block;
+  color: black;
+  background-color: aquamarine;
 }
 .three {
-  color: white;
-  background-color: brown;
-  margin: 10px;
-  width: 75px;
+  background-color: cornflowerblue;
 }
 .four {
-  color: white;
-  background-color: brown;
-  margin: 10px;
-  width: 100px;
+  background-color: cornflowerblue;
 }
-
 .five {
-  background-color: brown;
+  background-color: cornflowerblue;
 }
 ```
 
-これを下の HTML に適用します。
+このようになるはずです。
 
-```html
-<div>
-  <div class="one">1:</div>
-  <div class="two">2: Text <span class="five">5 - more text</span></div>
-  <input class="three" />
-  <textarea class="four">4: Lorem Ipsum</textarea>
-</div>
-```
+{{EmbedLiveSample("First_steps_with_custom_properties",600,360)}}
 
-このようになるはずです。
+これらのルール全体で繰り返される値をカスタムプロパティで置き換える機会があります。
+`.container` スコープで `--main-bg-color` を定義し、その値を複数の場所で参照した後、更新されたスタイルは次のようになります。
 
-{{EmbedLiveSample("First_steps_with_custom_properties",600,180)}}
+```css
+/* ここで --main-bg-color を定義 */
+.container {
+  --main-bg-color: cornflowerblue;
+}
+
+/* それぞれのクラスに、いくつかの色を設定 */
+.one {
+  background-color: var(--main-bg-color);
+}
+.two {
+  color: black;
+  background-color: aquamarine;
+}
+.three {
+  background-color: var(--main-bg-color);
+}
+.four {
+  background-color: var(--main-bg-color);
+}
+.five {
+  background-color: var(--main-bg-color);
+}
+```
 
 ## :root 擬似クラスの使用
 
-CSS 中に同じ宣言が繰り返し出てくることに注意してください。いろいろな場所で背景色が `brown` に設定されています。 CSS の宣言によっては、カスケードの上流でこれを宣言し、 CSS の継承によってこの問題を自然に解決することもできます。些末なプロジェクトを除いて、常にこの手法が使えるわけではありません。 {{cssxref(":root")}} 擬似クラスでカスタムプロパティを宣言し、文書内の必要な場所で使用することで、繰り返して書く必要性を減らすことができるのです。
+CSS 宣言の中には、カスケードのより上位で宣言し、CSS 継承でこの問題を解決することが可能なものもあります。複雑なプロジェクトでは、常に可能であるとは限りません。CSS 作者は、{{cssxref(":root")}} 擬似クラスにカスタムプロパティを宣言し、文書内の必要な箇所でそれを使用することで、繰り返し記述の必要性を減らすことができます。
 
 ```css
+/* ここで --main-bg-color を定義 */
 :root {
-  --main-bg-color: brown;
+  --main-bg-color: cornflowerblue;
 }
 
+/* それぞれのクラスに、いくつかの色を設定 */
 .one {
-  color: white;
   background-color: var(--main-bg-color);
-  margin: 10px;
-  width: 50px;
-  height: 50px;
-  display: inline-block;
 }
-
 .two {
-  color: white;
-  background-color: black;
-  margin: 10px;
-  width: 150px;
-  height: 70px;
-  display: inline-block;
+  color: black;
+  background-color: aquamarine;
 }
 .three {
-  color: white;
   background-color: var(--main-bg-color);
-  margin: 10px;
-  width: 75px;
 }
 .four {
-  color: white;
   background-color: var(--main-bg-color);
-  margin: 10px;
-  width: 100px;
 }
-
 .five {
   background-color: var(--main-bg-color);
 }
 ```
 
-```html hidden
-<div>
-  <div class="one"></div>
-  <div class="two">Text <span class="five">- more text</span></div>
-  <input class="three" />
-  <textarea class="four">Lorem Ipsum</textarea>
-</div>
-```
-
-この例では、前回の例と同じ結果になりますが、目的のプロパティ値の正規宣言を1つだけ行うことができます。後でページ全体の値を変更したい場合に、とても有益です。
+これは前回と同じ結果になりますが、望ましいプロパティ値の標準的な宣言（`--main-bg-color: cornflowerblue;`）が可能になり、これは後で自分のプロジェクト全体で値を変更したい場合にとても有益なものです。
 
 ## カスタムプロパティの継承
 
 カスタムプロパティは継承されます。これはつまり、もし与えられた要素にカスタムプロパティの値がない場合、その値は親の値を使用するということです。 HTML を見てみましょう。
 
-```html
+```html live-sample___dash-custom-property-inheritance
 <div class="one">
+  <p>One</p>
   <div class="two">
-    <div class="three"></div>
-    <div class="four"></div>
+    <p>Two</p>
+    <div class="three"><p>Three</p></div>
+    <div class="four"><p>Four</p></div>
   </div>
 </div>
 ```
 
-下記の CSS を適用するとします。
+```css hidden live-sample___dash-custom-property-inheritance
+div {
+  color: black;
+  font-family: sans-serif;
+  width: 75%;
+  height: 80%;
+  margin: 4px;
+  border: 2px black solid;
+  display: inline-block;
+}
+
+p {
+  margin: 0;
+}
+
+.one {
+  height: 250px;
+}
+
+.two {
+  height: 80%;
+}
+
+.three {
+  height: 40%;
+}
+
+.four {
+  height: 40%;
+}
+```
+
+```css live-sample___dash-custom-property-inheritance
+div {
+  background-color: var(--box-color);
+}
 
-```css
 .two {
-  --test: 10px;
+  --box-color: cornflowerblue;
 }
 
 .three {
-  --test: 2em;
+  --box-color: aquamarine;
 }
 ```
 
-この場合、 `var(--test)` の結果は以下の通りです。
+{{embedlivesample("dash-custom-property-inheritance", "100%", "280px")}}
+
+`var(--box-color)` の結果は次のように、継承状況によって変わります。
+
+- `class="one"`: _無効値_、これはすべてのカスタムプロパティの既定値です。
+- `class="two"`: `cornflowerblue`
+- `class="three"`: `aquamarine`
+- `class="four"`: `cornflowerblue`（親から継承）
+
+上記の例が示すカスタムプロパティの 1 つの側面は、他のプログラミング言語の変数とまったく同じには動作しないということです。
+この値は、必要とされる場所で計算され、このスタイルシートの他の場所に保存されて再利用されることはありません。
+例えば、プロパティの値を設定しても、兄弟の子孫のルールでその値を取得することはできません。
+プロパティは、一致するセレクターとその子孫に対してのみ設定されます。
 
-- `class="two"` の要素: `10px`
-- `class="three"` の要素: `2em`
-- `class="four"` の要素: `10px` (親から継承)
-- `class="one"` の要素: _無効な値_、これはすべてのカスタムプロパティの既定値です。
+### `@property` を使用して継承を制御
 
-これらはカスタムプロパティであり、実際には他のプログラミング言語で見られるような変数ではないことに留意してください。値は必要に応じて計算され、他のルールで使用するために格納されるわけではありません。例えば、要素にプロパティを設定して、兄弟の子孫のルールで受け取ることを期待することはできません。通常の CSS と同様、プロパティは一致するセレクターおよびその子孫に対してのみ設定されます。
+`@property` アットルールでは、プロパティを継承するかどうかを明示的に指定できます。
+次の例では、`@property` アットルールを使用してカスタムプロパティを作成しています。
+継承は無効になっており、[`<color>`](/ja/docs/Web/CSS/color_value) データ型が定義され、`cornflowerblue` が初期値として設定されています。
+
+親要素は、`--box-color` の値を緑に設定し、`--box-color` を背景色の値として使用します。
+子要素も `background-color: var(--box-color)` を使用しており、継承が有効になっている場合（または、ダッシュ 2 本の構文を使用して定義されている場合）には、`green` 色が設定されていることが期待されます。
+
+```html live-sample___at-property-inheritance
+<div class="parent">
+  <p>親要素</p>
+  <div class="child">
+    <p>子要素で、--box-color の継承が無効になっています。</p>
+  </div>
+</div>
+```
+
+```css hidden live-sample___at-property-inheritance
+div {
+  color: white;
+  font-family: sans-serif;
+  width: 200px;
+  height: 200px;
+  margin: 4px;
+  padding: 8px;
+  border: 2px black solid;
+  display: inline-block;
+}
+```
+
+```css live-sample___at-property-inheritance
+@property --box-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: cornflowerblue;
+}
+
+.parent {
+  --box-color: green;
+  background-color: var(--box-color);
+}
+
+.child {
+  width: 80%;
+  height: 40%;
+  background-color: var(--box-color);
+}
+```
+
+アットルールで `inherits: false;` が設定されており、`.child` スコープ内で `--box-color` プロパティの値が宣言されていないため、親から継承されるはずの `green` の代わりに `cornflowerblue` の初期値が使用されます。
+
+{{embedlivesample("at-property-inheritance", "100%", "250px")}}
 
 ## カスタムプロパティ代替値
 
-[`var()`](/ja/docs/Web/CSS/var) 関数を使用して、指定された変数が定義されていない場合の**代替値**を複数定義することができます。[カスタム要素](/ja/docs/Web/API/Web_components/Using_custom_elements)および[シャドウ DOM](/ja/docs/Web/API/Web_components/Using_shadow_DOM) で作業するときに便利なことがあります。
+カスタムプロパティの代替値は、`var()` 関数と `@property` アットルールの `initial-value` を使用して定義できます。
 
 > [!NOTE]
-> 代替値はブラウザーの互換性を修正するためには使用されません。ブラウザーが CSS カスタムプロパティに対応していない場合、代替値は助けになりません。これは CSS カスタムプロパティに対応しているブラウザーのための単なるバックアップであり、与えられた変数が定義されていなかったり、無効な値であったりした場合に別な値を選択させるためのものです。
+> 代替値はブラウザーの互換性を修正するためには使用されません。ブラウザーが CSS カスタムプロパティに対応していない場合、代替値は助けになりません。
+> これは CSS カスタムプロパティに対応しているブラウザーのための単なるバックアップであり、与えられた変数が定義されていなかったり、無効な値であったりした場合に別な値を選択させるためのものです。
 
-関数の最初の引数は、代替される[カスタムプロパティ](https://www.w3.org/TR/css-variables/#custom-property)の名前です。関数の二番目の引数は、もしあれば、参照された[カスタムプロパティ](https://www.w3.org/TR/css-variables/#custom-property)が無効であった場合に代わりに使用される代替値です。この関数は引数を 2 つだけ受け付けるので、最初のカンマの後のものは、すべて二番目の引数として割り当てます。二番目の引数が無効な場合、次のように代替処理は失敗します。
+### `var()` 関数の代替値の定義
+
+[`var()`](/ja/docs/Web/CSS/var) 関数を使用して、指定された変数が定義されていない場合の**代替値**を複数定義することができます。[カスタム要素](/ja/docs/Web/API/Web_components/Using_custom_elements)および[シャドウ DOM](/ja/docs/Web/API/Web_components/Using_shadow_DOM) で作業するときに便利なことがあります。
+
+関数の最初の引数は、カスタムプロパティの名前です。関数の 2 番目の引数は、省略可能で、参照されたカスタムプロパティが無効であった場合に代わりに使用される代替値です。
+この関数は引数を 2 つだけ受け付けるので、最初のカンマの後のものは、すべて 2 番目の引数として割り当てます。2 番目の引数が無効な場合、次のように代替処理は失敗します。
 
 ```css
-.two {
+.one {
   /* --my-var が定義されていなければ red */
   color: var(--my-var, red);
 }
 
-.three {
+.two {
   /* my-var 及び --my-background が定義されていなければ pink */
-  background-color: var(--my-var, var(--my-background, pink));
+  color: var(--my-var, var(--my-background, pink));
 }
 
 .three {
   /* 無効: "--my-background, pink" */
-  background-color: var(--my-var, --my-background, pink);
+  color: var(--my-var, --my-background, pink);
 }
 ```
 
-代替としてのカスタムプロパティを含めるには、上記の二番目の例のようにすることが、複数の代替値を提供するための正しい方法です。この技法は変数全体を解釈するのにより時間が掛かるので、性能上の問題が見られます。
+代替値としてのカスタムプロパティを含めるには、上記の 2 番目の例 (`var(--my-var, var(--my-background, pink))`) のようにすることが、`var()` で複数の代替値を提供するための正しい方法です。
+ただし、階層化された変数の解析に時間がかかるため、この方法によるパフォーマンスへの影響を認識しておく必要があります。
 
 > [!NOTE]
 > 代替値の構文は、[カスタムプロパティ](https://www.w3.org/TR/css-variables/#custom-property)の場合のように、カンマを使用することができます。例えば、 `var(--foo, red, blue)` は `red, blue` という代替値を定義します。最初のカンマから関数の終わりまでが代替値とみなされます。
 
-## 値と妥当性
+### `@property` の初期値を使用した代替値
 
-CSS の各プロパティには、定義された値のセットを割り当てることができます。プロパティに有効な値の集合から外れた値を割り当てた場合、そのプロパティは「無効」とみなされます。
+`var()` を使用する以外に、`@property` アットルールで定義された `initial-value` を代替メカニズムとして使用することができます。実際、これはすでに [`@property` の継承](#property_を使用して継承を制御)の節で見てきました。
 
-ブラウザーは、通常のプロパティに無効な値が設定された場合、その値を破棄し、要素には、その宣言が単に存在しない場合に設定されるはずの値が割り当てられます。
+次の例では、`@property` アットルールを使用して、`--box-color` の初期値を `cornflowerblue` に設定しています。
+アットルールに続くルールセットでは、`--box-color` を `aquamarine` に設定したいのですが、値の名前にタイプミスがあります。
+3 番目の `<div>` でも同じことが言有効な [`<color>` 値](/ja/docs/Web/CSS/color_value)を期待するカスタムプロパティに `2rem` を使用しています。
+`2rem` と `aqumarine` はどちらもカラー値として無効であるため、`cornflowerblue` の初期値が適用されます。
 
-しかし、カスタムプロパティの値が解釈されるとき、ブラウザーはその値がどこで使用されるかをまだ知らないので、ほとんどすべての値を*妥当*とみなす必要があります。
+```css live-sample___at-property-initial-value
+@property --box-color {
+  syntax: "<color>";
+  initial-value: cornflowerblue;
+  inherits: false;
+}
 
-残念なことに、これらの値は妥当であっても、意味のない可能性がある場所で `var()` 関数表記で使用することができてしまいます。プロパティとカスタム変数が無効な CSS 文を生成する可能性があることから、*計算時に妥当*という新しい概念が導かれます。
+.one {
+  --box-color: aquamarine;
+  background-color: var(--box-color);
+}
 
-ブラウザーが無効な `var()` の置き換えに遭遇した場合、プロパティの[初期値](/ja/docs/Web/CSS/initial_value)または[継承値](/ja/docs/Web/CSS/Inheritance)が使用されます。
+.two {
+  --box-color: aqumarine;
+  background-color: var(--box-color);
+}
 
-次の 2 つの例でこれを説明します。
+.three {
+  --box-color: 2rem;
+  background-color: var(--box-color);
+}
+```
 
-### 無効な通常プロパティ
+```css hidden live-sample___at-property-initial-value
+div {
+  color: white;
+  font-family: sans-serif;
+  width: 100px;
+  height: 100px;
+  margin: 4px;
+  padding: 8px;
+  border: 2px black solid;
+  display: inline-block;
+}
+.one {
+  color: black;
+}
+```
 
-この例では、`16px` という値を {{cssxref("color")}} プロパティに適用しようとしています。これは無効であるため、CSS は破棄され、結果はルールが存在しなかったかのようになり、代わりに前回の `color: blue` ルールが適用され、段落は青色となります。
+```html hidden live-sample___at-property-initial-value
+<div class="one">
+  <p>One</p>
+</div>
+<div class="two">
+  <p>Two.</p>
+</div>
+<div class="three">
+  <p>Three.</p>
+</div>
+```
 
-#### HTML
+{{embedlivesample("at-property-initial-value", "100%", "150px")}}
 
-```html
-<p>この段落は初期値で黒です。</p>
-```
+## 無効なカスタムプロパティ
 
-#### CSS
+CSS の各プロパティには、定義された[値のセット](/ja/docs/Learn/CSS/Building_blocks/Values_and_units)を割り当てることができます。
+プロパティに有効な値の集合から外れた値を割り当てた場合、そのプロパティは「無効」とみなされます。
 
-```css
+ブラウザーが通常の CSS プロパティの無効な値（例えば、{{cssxref("color")}} プロパティにおける `16px` という値）に遭遇すると、その宣言は破棄され、要素には宣言が存在しなかった場合の値が割り当てられます。
+次の例では、通常のCSS宣言が無効である場合の挙動を示しています。 `color: 16px;` は無視され、代わりに以前の `color: blue` ルールが適用されます。
+
+```html live-sample___invalid-property
+<p>この段落は初期状態で黒です。</p>
+```
+
+```css live-sample___invalid-property
 p {
   color: blue;
 }
 
 p {
+  /* おっと、有効な色ではない */
   color: 16px;
 }
 ```
 
-#### 結果
+{{EmbedLiveSample('invalid-property', 100, 50)}}
 
-{{EmbedLiveSample('Invalid normal properties', 100, 100)}}
+しかし、カスタムプロパティの値が解釈される際には、ブラウザーはまだそれらがどこで使用されるのかを知りません。そのため、ほぼすべての値を _有効_ とみなさなければなりません。
+残念ながら、これらの有効な値は、`var()` 関数記法によって、意味をなさない可能性のあるコンテキストで使用されてしまうことがあります。
+プロパティとカスタム変数は、無効な CSS 文につながる可能性があり、「計算時に有効」という概念につながります。
 
-### 無効なカスタムプロパティ
+ブラウザが無効な `var()` 置換に遭遇した場合は、プロパティの[初期値](/ja/docs/Web/CSS/initial_value)または[継承値](/ja/docs/Web/CSS/Inheritance)が使用されます。
+この例は、カスタムプロパティを使用している点を除いて、最後の例と同じです。
 
-この例は前回のものと同様ですが、カスタムプロパティを使用しています。
-
-期待通りに、ブラウザーは `--text-color` の値で `var(--text-color)` の場所を置き換えようとしますが、 `16px` は {{cssxref("color")}} に妥当なプロパティ値ではありません。置き換え後、プロパティは意味をなさなくなります。ブラウザーはこの状況を 2 段階で扱います。
+期待通りに、ブラウザーは `--text-color` の値で `var(--text-color)` の場所を置き換えようとしますが、 `16px` は {{cssxref("color")}} に妥当なプロパティ値ではありません。
+置き換え後、プロパティは意味をなさなくなります。ブラウザーはこの状況を 2 段階で扱います。
 
 1. {{cssxref("color")}} プロパティが継承可能であるかを確認します。可能ですが、 `<p>` には `color` プロパティを持つ親がありません。よって次の段階に進みます。
 2. 値を**既定の初期値**、つまり、黒に設定します。
 
-#### HTML
+```html live-sample___invalid-custom-property
+<p>この段落は初期状態で黒です。</p>
+```
 
-```html
-<p>この段落は初期値で黒です。</p>
+```css live-sample___invalid-custom-property
+:root {
+  --text-color: 16px;
+}
+
+p {
+  color: blue;
+}
+
+p {
+  color: var(--text-color);
+}
 ```
 
-#### CSS
+{{EmbedLiveSample('invalid-custom-property', 100, 50)}}
+
+このような場合、`@property` アットルールを使用してプロパティの初期値を定義することで、予期せぬ結果を防ぐことができます。
+
+```html live-sample___invalid-custom-property-fallbacks
+<p>この段落は初期状態で黒です。</p>
+```
+
+```css live-sample___invalid-custom-property-fallbacks
+@property --text-color {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: cornflowerblue;
+}
 
-```css
 :root {
   --text-color: 16px;
 }
@@ -293,9 +516,7 @@ p {
 }
 ```
 
-#### 結果
-
-{{EmbedLiveSample('Invalid custom properties', 100, 100)}}
+{{EmbedLiveSample('invalid-custom-property-fallbacks', 100, 50)}}
 
 ## JavaScript での値
 
@@ -315,4 +536,7 @@ element.style.setProperty("--my-var", jsVar + 4);
 ## 関連情報
 
 - [カスタムプロパティの構文](/ja/docs/Web/CSS/--*)
+- {{cssxref("@property")}} アットルール
 - [`var()`](/ja/docs/Web/CSS/var)
+- [CSS プロパティと値 API](/ja/docs/Web/API/CSS_Properties_and_Values_API)
+- [カスケード変数のための CSS カスタムプロパティ](/ja/docs/Web/CSS/CSS_cascading_variables)モジュール
diff --git a/files/ja/web/css/vertical-align/index.md b/files/ja/web/css/vertical-align/index.md
index 16fd436d35e997..57f1fc171f1d6b 100644
--- a/files/ja/web/css/vertical-align/index.md
+++ b/files/ja/web/css/vertical-align/index.md
@@ -1,6 +1,8 @@
 ---
 title: vertical-align
 slug: Web/CSS/vertical-align
+l10n:
+  sourceCommit: 583d48191a7a8605d831aff357bef6cc63aef2e3
 ---
 
 {{CSSRef}}
@@ -11,10 +13,10 @@ slug: Web/CSS/vertical-align
 
 vertical-align は、2 つの場面で使用することができます。
 
-- 包含する行ボックスの中で、インライン要素のボックスの垂直方向の配置を決める場合。例えば、[テキストの行の中で画像の垂直位置を決める](#vertical_alignment_in_a_line_box)ために使用することができます。
+- 包含する行ボックスの中で、インラインレベル要素のボックスの垂直方向の配置を決める場合。例えば、[テキストの行の中で画像の垂直位置を決める](#vertical_alignment_in_a_line_box)ために使用することができます。
 - [表のセルの内容](#vertical_alignment_in_a_table_cell)の垂直方向の配置を決める場合。
 
-`vertical-align` はインライン要素、インラインブロック要素、表のセル要素だけに適用されることに注意してください。つまり、[ブロックレベル要素](/ja/docs/Web/HTML/Block-level_elements)の垂直方向の配置には使用できません。
+`vertical-align` はインライン要素、インラインブロック要素、表のセル要素だけに適用されることに注意してください。つまり、[ブロックレベル要素](/ja/docs/Glossary/Block-level_content)の垂直方向の配置には使用できません。
 
 ## 構文
 
@@ -40,6 +42,7 @@ vertical-align: 20%;
 vertical-align: inherit;
 vertical-align: initial;
 vertical-align: revert;
+vertical-align: revert-layer;
 vertical-align: unset;
 ```
 
@@ -66,7 +69,7 @@ vertical-align: unset;
 - {{cssxref("&lt;length&gt;")}}
   - : 要素のベースラインを、親要素のベースラインの指定値分上に揃えます。負の値を使えます。
 - {{cssxref("&lt;percentage&gt;")}}
-  - : `<length>` 値と似ていますが、{{Cssxref("line-height")}} プロパティに対するパーセント値で指定します。負の値を使えます。
+  - : 要素のベースラインを、親要素のベースラインから指定されたパーセント値分上に配置します。値は、{{Cssxref("line-height")}} プロパティのパーセント値です。負の値も指定できます。
 
 #### 行との相対値
 
@@ -150,22 +153,22 @@ img.middle {
 
 #### HTML
 
-```html
+```html-nolint
 <p>
-  top: <img style="vertical-align: top" src="star.png" /> middle:
-  <img style="vertical-align: middle" src="star.png" /> bottom:
-  <img style="vertical-align: bottom" src="star.png" /> super:
-  <img style="vertical-align: super" src="star.png" /> sub:
-  <img style="vertical-align: sub" src="star.png" />
+top:         <img style="vertical-align: top" src="star.png" alt="star"/>
+middle:      <img style="vertical-align: middle" src="star.png" alt="star"/>
+bottom:      <img style="vertical-align: bottom" src="star.png" alt="star"/>
+super:       <img style="vertical-align: super" src="star.png" alt="star"/>
+sub:         <img style="vertical-align: sub" src="star.png" alt="star"/>
 </p>
 
 <p>
-  text-top: <img style="vertical-align: text-top" src="star.png" /> text-bottom:
-  <img style="vertical-align: text-bottom" src="star.png" /> 0.2em:
-  <img style="vertical-align: 0.2em" src="star.png" /> -1em:
-  <img style="vertical-align: -1em" src="star.png" /> 20%:
-  <img style="vertical-align: 20%" src="star.png" /> -100%:
-  <img style="vertical-align: -100%" src="star.png" />
+text-top:    <img style="vertical-align: text-top" src="star.png" alt="star"/>
+text-bottom: <img style="vertical-align: text-bottom" src="star.png" alt="star"/>
+0.2em:       <img style="vertical-align: 0.2em" src="star.png" alt="star"/>
+-1em:        <img style="vertical-align: -1em" src="star.png" alt="star"/>
+20%:         <img style="vertical-align: 20%" src="star.png" alt="star"/>
+-100%:       <img style="vertical-align: -100%" src="star.png" alt="star"/>
 </p>
 ```
 
@@ -195,24 +198,26 @@ p {
 
 ### 表のセル内での垂直方向の配置
 
+例えば、6 つのセルがある単一の行のある表があるとします。 この行は、既定値として `vertical-align` を `bottom` に設定します。
+
+- 最初の 4 つのセルはそれぞれ自分自身で `vertical-align` の値を設定し、これらの値は行の値を上書きします。
+- 5 番目のセルは `vertical-align` の値を設定しないので、行の値を継承します。
+
+6 番目のセルは、効果を確認するためにセルの高さを十分に確保することを保証するためにのみ使用します。
+
 #### HTML
 
 ```html
 <table>
-  <tr>
-    <td style="vertical-align: baseline">baseline</td>
-    <td style="vertical-align: top">top</td>
-    <td style="vertical-align: middle">middle</td>
-    <td style="vertical-align: bottom">bottom</td>
+  <tr class="bottom">
+    <td class="baseline">baseline</td>
+    <td class="top">top</td>
+    <td class="middle">middle</td>
+    <td>bottom</td>
+    <td>Row's style</td>
     <td>
-      <p>
-        There is a theory which states that if ever anyone discovers exactly
-        what the Universe is for and why it is here, it will instantly disappear
-        and be replaced by something even more bizarre and inexplicable.
-      </p>
-      <p>
-        There is another theory which states that this has already happened.
-      </p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+      pretium felis eu sem mattis vulputate.
     </td>
   </tr>
 </table>
@@ -237,6 +242,22 @@ td {
   padding: 0.5em;
   font-family: monospace;
 }
+
+.bottom {
+  vertical-align: bottom;
+}
+
+.baseline {
+  vertical-align: baseline;
+}
+
+.top {
+  vertical-align: top;
+}
+
+.middle {
+  vertical-align: middle;
+}
 ```
 
 #### 結果
@@ -253,7 +274,7 @@ td {
 
 ## 関連情報
 
-- [フレックスボックスの典型的な使用例の「アイテムの中央揃え」の節](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox#center_item)
+- [フレックスボックスの典型的な使用例の「アイテムの中央揃え」の節](/ja/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox#center_item)
 - {{Cssxref("line-height")}}, {{Cssxref("text-align")}}, {{Cssxref("margin")}}
-- [Understanding `vertical-align`, or "How (Not) To Vertically Center Content"](http://phrogz.net/css/vertical-align/index.html)
+- [Understanding `vertical-align`, or "How (Not) To Vertically Center Content"](https://phrogz.net/css/vertical-align/index.html)
 - [Vertical-Align: All You Need To Know](https://christopheraue.net/design/vertical-align)
diff --git a/files/ja/web/html/element/iframe/index.md b/files/ja/web/html/element/iframe/index.md
index ea84cf9638f7d9..1ecc86e47b72aa 100644
--- a/files/ja/web/html/element/iframe/index.md
+++ b/files/ja/web/html/element/iframe/index.md
@@ -206,7 +206,7 @@ DOM の {{domxref("HTMLIFrameElement")}} オブジェクトでは、スクリプ
   src="https://en.wikipedia.org/wiki/Avocado"></iframe>
 ```
 
-この title がないと、埋め込みコンテンツが何であるかを特定するために `<iframe>` の内容に移動しなければならなります。このコンテキストの移動は、特に複数の `<iframe>` が存在するページや、動画や音楽などの対話型コンテンツが埋め込まれているページでは、混乱を招き、時間のかかる作業になる可能性があります。
+この title がないと、埋め込みコンテンツが何であるかを特定するために `<iframe>` の内容に移動しなければならなくなります。このコンテキストの移動は、特に複数の `<iframe>` が存在するページや、動画や音楽などの対話型コンテンツが埋め込まれているページでは、混乱を招き、時間のかかる作業になる可能性があります。
 
 ## 例
 
diff --git a/files/ja/web/http/basics_of_http/index.md b/files/ja/web/http/basics_of_http/index.md
deleted file mode 100644
index 9e26061948e4d0..00000000000000
--- a/files/ja/web/http/basics_of_http/index.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-title: HTTP の基本
-slug: Web/HTTP/Basics_of_HTTP
----
-
-{{HTTPSidebar}}
-
-HTTP はとても拡張性のあるプロトコルです。リソースの記述や URI などわずかな基本概念に基づいており、メッセージ構造が単純で、コミュニケーションの流れはクライアント・サーバー構造です。これらの基本概念の上に、いくつもの拡張が何年にもわたって行われ、新しい機能や新しい意味が新しい HTTP メソッドやヘッダーによって追加されています。
-
-## 記事
-
-- [HTTP の概要](/ja/docs/Web/HTTP/Overview)
-  - : HTTP とは何であるか、そしてウェブアーキテクチャにおけるこのプロトコルの役割について説明します。
-- [HTTP の進化](/ja/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP)
-  - : HTTP は 1990 年代初めに作成され、何度も拡張されました。この記事では、 HTTP/0.9、 HTTP/1.0、 HTTP/1.1、現代の HTTP/2、および長年にわたり導入されている小さなノベルティについての歴史を説明します。
-- [HTTP バージョンのネゴシエーション](/ja/docs/Web/HTTP/Basics_of_HTTP/Negotiating_an_HTTP_version)
-  - : クライアントとサーバーが特定の HTTP バージョンをネゴシエートし、最終的に使用されたプロトコルバージョンをアップグレードする方法を説明します。
-- [リソースと URI](/ja/docs/Web/HTTP/Resources_and_URIs)
-  - : ウェブ上のリソース、識別子、および場所の概念を簡単に紹介します。
-- [ウェブ上のリソースの識別](/ja/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web)
-  - : ウェブリソースの参照方法とどのように配置されるのかについて説明します。
-- [データ URI](/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs)
-  - : それが表すリソースを直接埋め込む特定の種類の URI。データ URI はとても便利ですが、いくつかの注意点があります。
-- [リソース URL](/ja/docs/Web/HTTP/Basics_of_HTTP/Resource_URLs) {{Non-standard_Inline}}
-  - : `resource:` というスキームの接頭辞が付いた URL は、 Firefox と Firefox のブラウザー拡張機能によってリソースを内部的に読み込むために使用されますが、情報の一部はブラウザーが接続するサイトでも利用できます。
-- リソースの識別と場所の分離: Alt-Svc HTTP ヘッダー
-  - : ほとんどの場合、ウェブリソースの識別子と場所は共有されますが、これは {{HTTPHeader("Alt-Svc")}} ヘッダーで変更できます。
-- [MIME タイプ](/ja/docs/Web/HTTP/Basics_of_HTTP/MIME_types)
-  - : HTTP/1.0 以降では、様々なタイプのコンテンツを送信することができます。 この記事では {{HTTPHeader("Content-Type")}} ヘッダーと MIME 標準を使用してこれがどのように行われるかについて説明します。
-- [www URL とそうでない URL の選択](/ja/docs/Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs)
-  - : www という接頭辞のドメインを使うかどうかに関するアドバイスで、この記事では選択の結果とその作成方法について説明します。
-- [HTTP セッションの流れ](/ja/docs/Web/HTTP/Flow_of_an_HTTP_session)
-  - : この基本的な記事では典型的な HTTP セッションについて説明します。ブラウザーのリンクをクリックすると、何が起こるのでしょうか
-- [HTTP メッセージ](/ja/docs/Web/HTTP/Messages)
-  - : HTTP リクエストまたはレスポンス中に送信されるメッセージは、非常に明確な構造を持っています。この入門記事ではその構造、目的、可能性について説明します。
-- [HTTP/2 でのフレームとメッセージ構造](</ja/docs/Web/HTTP/Frame and message structure in HTTP_2>)
-  - : HTTP/2 は HTTP/1.x メッセージをカプセル化し、バイナリフレームで表現します。この記事ではフレームの構造、目的、エンコード方法について説明します。
-- [HTTP/1.x でのコネクション管理](/ja/docs/Web/HTTP/Connection_management_in_HTTP_1.x)
-  - : HTTP/1.1 は持続的な接続とパイプライン処理をサポートする HTTP の最初のバージョンでした。この記事ではこれらの 2 つの概念について説明します。
-- [HTTP/2 でのコネクション管理](/ja/docs/Web/HTTP/Connection_management_in_HTTP_2)
-  - : HTTP/2 では接続の作成方法とメンテナンス方法が完全に再考されました。この記事では HTTP フレームが多重化を許可し、以前の HTTP バージョンの 'head-of-line' ブロック問題を解決する方法について説明します。
-- [コンテンツネゴシエーション](/ja/docs/Web/HTTP/Content_negotiation)
-  - : HTTP はブラウザーが好みの形式、言語、またはエンコーディングをアナウンスするための方法として `Accept-` から始まる一連のヘッダを導入しています。この記事ではこの宣言がどのように起こるか、サーバがどのように反応すると予想され、どのように最も適切な応答を選択するかについて説明します。
diff --git a/files/ja/web/http/basics_of_http/evolution_of_http/index.md b/files/ja/web/http/evolution_of_http/index.md
similarity index 99%
rename from files/ja/web/http/basics_of_http/evolution_of_http/index.md
rename to files/ja/web/http/evolution_of_http/index.md
index 8d24072dcf4872..b94231d752da72 100644
--- a/files/ja/web/http/basics_of_http/evolution_of_http/index.md
+++ b/files/ja/web/http/evolution_of_http/index.md
@@ -1,6 +1,7 @@
 ---
 title: HTTP の進化
-slug: Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP
+slug: Web/HTTP/Evolution_of_HTTP
+original_slug: Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP
 l10n:
   sourceCommit: eb9eef29f1ccdaf1c8a464dbe4483c78f7a13b2a
 ---
diff --git a/files/ja/web/http/basics_of_http/mime_types/common_types/index.md b/files/ja/web/http/mime_types/common_types/index.md
similarity index 99%
rename from files/ja/web/http/basics_of_http/mime_types/common_types/index.md
rename to files/ja/web/http/mime_types/common_types/index.md
index 5d515c37752961..6250ec599ce122 100644
--- a/files/ja/web/http/basics_of_http/mime_types/common_types/index.md
+++ b/files/ja/web/http/mime_types/common_types/index.md
@@ -1,6 +1,7 @@
 ---
 title: よくある MIME タイプ
-slug: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+slug: Web/HTTP/MIME_types/Common_types
+original_slug: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
 ---
 
 {{HTTPSidebar}}
diff --git a/files/ja/web/http/basics_of_http/mime_types/index.md b/files/ja/web/http/mime_types/index.md
similarity index 99%
rename from files/ja/web/http/basics_of_http/mime_types/index.md
rename to files/ja/web/http/mime_types/index.md
index 2b14f4bcb4de4d..7a0fe3ef561e29 100644
--- a/files/ja/web/http/basics_of_http/mime_types/index.md
+++ b/files/ja/web/http/mime_types/index.md
@@ -1,6 +1,7 @@
 ---
 title: MIME タイプ（IANA メディア種別）
-slug: Web/HTTP/Basics_of_HTTP/MIME_types
+slug: Web/HTTP/MIME_types
+original_slug: Web/HTTP/Basics_of_HTTP/MIME_types
 l10n:
   sourceCommit: 592f6ec42e54981b6573b58ec0343c9aa8cbbda8
 ---
diff --git a/files/ja/web/javascript/closures/index.md b/files/ja/web/javascript/closures/index.md
index a2738f11179e33..a45ff79777219a 100644
--- a/files/ja/web/javascript/closures/index.md
+++ b/files/ja/web/javascript/closures/index.md
@@ -2,12 +2,12 @@
 title: クロージャ
 slug: Web/JavaScript/Closures
 l10n:
-  sourceCommit: 9c4fb236cd9ced12b1eb8e7696d8e6fcb8d8bad3
+  sourceCommit: 2463abc1ca0fb6588d182651f8f659ae0d618915
 ---
 
 {{jsSidebar("Intermediate")}}
 
-**クロージャ**は、組み合わされた（囲まれた）関数と、その周囲の状態（**レキシカル環境**）への参照の組み合わせです。言い換えれば、クロージャは内側の関数から外側の関数スコープへのアクセスを提供します。JavaScript では、関数が作成されるたびにクロージャが作成されます。
+**クロージャ**は、組み合わされた（囲まれた）関数と、その周囲の状態（**レキシカル環境**）への参照の組み合わせです。言い換えれば、クロージャは関数にその外側のスコープにアクセスする機能を提供します。JavaScript では、クロージャは関数が作成されるたびに、関数作成時点で作成されます。
 
 ## レキシカルスコープ
 
@@ -25,15 +25,13 @@ function init() {
 init();
 ```
 
-`init()` 関数はローカル変数 `name` を作成し、それから関数 `displayName()` を定義しています。`displayName()` は `init()` の中で定義されている内部関数で、その関数本体の内部でしか利用できません。`displayName()` 自体はローカル変数を持っていませんが、外側の関数で宣言された変数にアクセスできるので、`displayName()` では親関数 `init()` で宣言された変数 `name` を使用できます。しかし、 `displayName()` に同じローカル変数があればそれが使われます。
+`init()` 関数はローカル変数 `name` を作成し、それから関数 `displayName()` を定義しています。`displayName()` は `init()` の中で定義されている内部関数で、その関数本体の内部でしか利用できません。`displayName()` 自体はローカル変数を持っていませんが、外側のスコープで宣言された変数にアクセスできるので、`displayName()` では親関数 `init()` で宣言された変数 `name` を使用できます。しかし、 `displayName()` に同じローカル変数があればそれが使われます。
 
 [この JSFiddle リンク](https://jsfiddle.net/3dxck52m/)を使用してコードを実行すると、`displayName()` 関数内の `console.log()` 文が、その親関数で宣言されている `name` 変数の値を正常に表示していることに注意してください。これはレキシカルスコープの例で、関数が入れ子になっているときにパーサーがどのように変数名を解決するかを記述したものです。レキシカルという言葉は、レキシカルスコープがソースコード内で変数が宣言された場所を使用して、その変数が利用できる場所を決定するという事実を示しています。入れ子の関数は、その外側のスコープで宣言された変数にアクセスすることができます。
 
-この具体例では、変数が宣言された関数本体の中でしかアクセスできないため、スコープは関数スコープと呼ばれます。
-
 ### let と const のスコープ
 
-従来（ES6 以前）、JavaScript には関数スコープとグローバルスコープの 2 種類のスコープしかありませんでした。`var` で宣言された変数は、関数内で宣言されたか、関数外で宣言されたかによって、関数スコープかグローバルスコープかのどちらかになります。中括弧で囲まれたブロックはスコープを作成しないので、これはやっかいなことです。
+従来（ES6 以前）、JavaScript の変数には関数スコープとグローバルスコープの 2 種類のスコープしかありませんでした。`var` で宣言された変数は、関数内で宣言されたか、関数外で宣言されたかによって、関数スコープかグローバルスコープかのどちらかになります。中括弧で囲まれたブロックはスコープを作成しないので、これはやっかいなことです。
 
 ```js
 if (Math.random() > 0.5) {
@@ -80,7 +78,7 @@ myFunc();
 
 このコードが動作するということは直感的に理解できないかもしれません。いくつかのプログラミング言語では、関数内部のローカル変数はその関数が実行されている間だけ存在します。一旦 `makeFunc()` の実行が完了したら、name 変数はもう必要とされなくなると考えた方が筋は通っています。ただこのコードが期待したとおりに動くという事は、これは明らかに JavaScript にはあてはまりません。
 
-この理由は、JavaScript の関数はクロージャとなるためです。クロージャは関数とその関数が作られた環境という 2 つのものの組み合わせです。この環境は、クロージャが作られた時点でスコープ内部にあったあらゆる変数によって構成されています。この場合、`myFunc` は `makeFunc` が実行された時に作られた `displayName` 関数のインスタンスへの参照です。`displayName` のインスタンスはレキシカル環境への参照を保持し、そこに `name` 変数が存在します。このため、`makeFunc` が実行された時に、`name` 変数が残っていて "Mozilla" が `console.log` に渡されます。
+この理由は、JavaScript の関数はクロージャとなるためです。クロージャは関数とその関数が作られた環境という 2 つのものの組み合わせです。この環境は、クロージャが作られた時点でスコープ内部にあったあらゆるローカル変数によって構成されています。この場合、`myFunc` は `makeFunc` が実行された時に作られた `displayName` 関数のインスタンスへの参照です。`displayName` のインスタンスはレキシカル環境への参照を保持し、そこに `name` 変数が存在します。このため、`makeFunc` が実行された時に、`name` 変数が残っていて "Mozilla" が `console.log` に渡されます。
 
 ここにもう少し面白い例があります。`makeAdder` 関数です。
 
@@ -165,7 +163,7 @@ document.getElementById("size-16").onclick = size16;
 
 Java などの言語ではプライベートなメソッドを宣言することが出来ます。これは同じクラス内にあるほかのメソッドからのみ呼び出せるメソッドのことです。
 
-JavaScript には、[クラス](/ja/docs/Web/JavaScript/Reference/Classes)が登場するまで、[プライベートメソッド](/ja/docs/Web/JavaScript/Reference/Classes/Private_class_fields#プライベートメソッド)を宣言するネイティブの方法はありませんでしたが、クロージャを使うとプライベートメソッドを模倣することができます。プライベートメソッドはコードへのアクセスを制限するのに役立つだけではなく、コードのパブリックインターフェイスが不要なメソッドでいっぱいになるのを防ぐため、グローバル名前空間を管理するのに非常に有効です。
+JavaScript には、[クラス](/ja/docs/Web/JavaScript/Reference/Classes)が登場するまで、[プライベートメソッド](/ja/docs/Web/JavaScript/Reference/Classes/Private_properties#プライベートメソッド)を宣言するネイティブの方法はありませんでしたが、クロージャを使うとプライベートメソッドを模倣することができます。プライベートメソッドはコードへのアクセスを制限するのに役立つだけではなく、コードのパブリックインターフェイスが不要なメソッドでいっぱいになるのを防ぐため、グローバル名前空間を管理するのに非常に有効です。
 
 [モジュールパターン](https://www.google.com/search?q=javascript+module+pattern)としても知られるクロージャを使って、プライベートな関数と変数にアクセスできるパブリック関数を定義するにはこのようにします。
 
@@ -203,7 +201,7 @@ console.log(counter.value()); // 1.
 
 ここでは色々なことが行われています。前の例ではクロージャがそれぞれ独自の環境を持っていましたが、この例では環境が 1 つだけ作成され、その環境は `counter.increment`, `counter.decrement`, `counter.value` という 3 つの関数によって共有されています。
 
-この共有レキシカル環境は、_定義されるとすぐに実行される_（[IIFE](/ja/docs/Glossary/IIFE) とも呼ばれます）無名関数の本文で作成されています。この環境は変数 `privateCounter` と関数 `changeBy` という 2 つのプライベートアイテムを含んでいます。これらはどちらも無名関数の外側からは直接アクセス出来ません。その代わり、この無名ラッパー関数から返される 3 つのパブリック関数からはアクセスできます。
+この共有レキシカル環境は、_定義されるとすぐに実行される_（[IIFE](/ja/docs/Glossary/IIFE) とも呼ばれます）無名関数の本文で作成されています。この環境は変数 `privateCounter` と関数 `changeBy` という 2 つのプライベートアイテムを含んでいます。これらはどちらも無名関数の外側からは直接アクセス出来ません。その代わり、この無名ラッパー関数から返される 3 つのパブリック関数からは間接的にアクセスします。
 
 これら 3 つのパブリック関数は同じ環境を共有するクロージャです。JavaScript のレキシカルスコープにより、これらの関数はそれぞれが変数 `privateCounter` と関数 `changeBy` にアクセスできます。
 
@@ -249,13 +247,7 @@ console.log(counter2.value()); // 0.
 
 ## クロージャのスコープチェーン
 
-すべてのクロージャには 3 つのスコープがあります。
-
-- ローカルスコープ（独自のスコープ）
-- 外側の関数スコープ
-- グローバルスコープ
-
-よくある間違いは、外側の関数がネストされた関数である場合、外側の関数スコープへのアクセスにはさらに外側の関数スコープが含まれており。実質的にスコープチェーンが生じていることに気づかないことです。次のコードの例を考えてみましょう。
+入れ子になった関数が外側の関数のスコープにアクセスする際には、外側の関数の包含するスコープも含まれます。効果的に関数のスコープの連鎖を作成します。例えば、次の例のコードを考えてみましょう。
 
 ```js
 // グローバルスコープ
@@ -299,20 +291,22 @@ const result = sum4(4);
 console.log(result); // 20
 ```
 
-上記の例では、一連のネストされた関数があり、それらはすべて外側の関数スコープにアクセスできます。この文脈では、クロージャは*すべて*の外側の関数スコープにアクセスできると言えます。
+上記の例では、一連のネストされた関数があり、それらはすべて外側の関数スコープにアクセスできます。この文脈では、クロージャは*すべて*の外側のスコープにアクセスできると言えます。
 
 クロージャはブロックスコープやモジュールスコープの変数も取り込むことができます。例えば、以下はブロックスコープにある変数 `y` に対してクロージャを作成します。
 
 ```js
 function outer() {
-  const x = 5;
-  if (Math.random() > 0.5) {
+  let getY;
+  {
     const y = 6;
-    return () => console.log(x, y);
+    getY = () => y;
   }
+  console.log(typeof y); // undefined
+  console.log(getY()); // 6
 }
 
-outer()(); // Logs 5 6
+outer();
 ```
 
 モジュール上のクロージャは、もっと興味深いものになります。
@@ -336,7 +330,7 @@ setX(6);
 console.log(getX()); // 6
 ```
 
-クロージャはインポートされた値も隠蔽することができ、元の値が変わるとインポートされた値もそれに応じて変わるため、_ライブバインド_ と見なされます。
+クロージャはインポートされた値も隠蔽することができ、元の値が変わるとインポートされた値もそれに応じて変わるため、_ライブ{{Glossary("binding", "バインド")}}_ と見なされます。
 
 ```js
 // myModule.js
@@ -520,7 +514,7 @@ setupHelp();
 
 前回述べたように、それぞれの関数インスタンスは、独自のスコープとクロージャを管理します。したがって、クロージャが具体的なタスクに必要でない場合に、不必要に他の関数の中に関数を作成することは、処理速度とメモリー消費の両面でスクリプトのパフォーマンスに悪影響を与えるので、賢明ではありません。
 
-例えば、新しくオブジェクト/クラスを作成する時、一般的にメソッドはオブジェクトのコンストラクターの中で定義するのではなく、オブジェクトのプロトタイプに結びつけるべきです。コンストラクタの中で定義してしまうと、コンストラクターが呼び出されるたびに（つまりオブジェクトが作成されるたびに）メソッドが再代入されてしまうことになるからです。
+例えば、新しくオブジェクト/クラスを作成する時、一般的にメソッドはオブジェクトのコンストラクターの中で定義するのではなく、オブジェクトのプロトタイプに結びつけるべきです。コンストラクターの中で定義してしまうと、コンストラクターが呼び出されるたびに（つまりオブジェクトが作成されるたびに）メソッドが再代入されてしまうことになるからです。
 
 以下のケースを考えてみてください。
 
diff --git a/files/ja/web/javascript/data_structures/index.md b/files/ja/web/javascript/data_structures/index.md
index f0d481b13e653b..56a4890b6beb35 100644
--- a/files/ja/web/javascript/data_structures/index.md
+++ b/files/ja/web/javascript/data_structures/index.md
@@ -2,14 +2,14 @@
 title: JavaScript のデータ型とデータ構造
 slug: Web/JavaScript/Data_structures
 l10n:
-  sourceCommit: 97ad54b6eb1427c994ca15cae352850b71b154aa
+  sourceCommit: 0b0cac4814d37f8a62d69de1b0d76dbe20d085ec
 ---
 
 {{jsSidebar("More")}}
 
 プログラミング言語には、どれにも組み込みデータ構造がありますが、ふつうは言語ごとに異なります。この記事では、JavaScript で使用可能な組み込みデータ構造の一覧と、他のデータ構造の構築にも使えるように、それらがどのような性質を持ち合わせているかについて述べることにします。
 
-[言語概要](/ja/docs/Web/JavaScript/Language_Overview)では、一般的なデータ型を同様にまとめていますが、もっと他の言語との比較も行っています。
+[言語概要](/ja/docs/Web/JavaScript/Language_overview)では、一般的なデータ型を同様にまとめていますが、もっと他の言語との比較も行っています。
 
 ## 動的かつ弱い型付け
 
@@ -29,7 +29,7 @@ const result = foo + "1"; // JavaScript は、foo を文字列に変換し、他
 console.log(result); // 421
 ```
 
-暗黙の型変換はとても便利ですが、開発者が変換を意図していなかったり、他の方向への変換（例えば、数値から文字列ではなく文字列から数値）を意図していた場合、足かせになる可能性があります。[シンボル](#シンボル型)と[長整数](#長整数型)については、JavaScript は意図的に特定の暗黙の型変換を禁止してきました。
+暗黙の型変換はとても便利ですが、想定外の変換が発生したり、想定外の方向（例えば、文字列から数値ではなく、数値から文字列）で変換が発生したりすると、微妙なバグを作成する可能性があります。[シンボル](#シンボル型)と[長整数](#長整数型)については、JavaScript は意図的に特定の暗黙の型変換を禁止してきました。
 
 ## プリミティブ値
 
@@ -78,9 +78,9 @@ Undefined 型には、値が [`undefined`](/ja/docs/Web/JavaScript/Reference/Glo
 
 ### 数値型
 
-数値型 ({{jsxref("Number")}}) は [IEEE 754 の倍精度浮動小数点形式の値](https://ja.wikipedia.org/wiki/倍精度浮動小数点数)です。2<sup>-1074</sup> ({{jsxref("Number.MIN_VALUE")}}) から 2<sup>1024</sup> ({{jsxref("Number.MAX_VALUE")}}) までの正の浮動小数点数の値が格納できるようになっていますが、安全に格納できるのは -(2<sup>53</sup> − 1) ({{jsxref("Number.MIN_SAFE_INTEGER")}}) から 2<sup>53</sup> − 1 ({{jsxref("Number.MAX_SAFE_INTEGER")}}) の範囲です。この範囲を外れると、JavaScript は整数を安全に表現できなくなり、代わりに倍精度浮動小数点数の近似値で表現されます。数値が安全な整数の範囲内かどうかは {{jsxref("Number.isSafeInteger()")}} を用いて調べることができます。
+数値型 ({{jsxref("Number")}}) は [IEEE 754 の倍精度浮動小数点形式の値](https://ja.wikipedia.org/wiki/倍精度浮動小数点数)です。2<sup>-1074</sup> ({{jsxref("Number.MIN_VALUE")}}) から 2<sup>1023</sup> × (2 - 2<sup>-52</sup>) ({{jsxref("Number.MAX_VALUE")}}) の正の浮動小数点数、および同じ範囲の負の浮動小数点数の値が格納できるようになっていますが、安全に格納できるのは -(2<sup>53</sup> − 1) ({{jsxref("Number.MIN_SAFE_INTEGER")}}) から 2<sup>53</sup> − 1 ({{jsxref("Number.MAX_SAFE_INTEGER")}}) の範囲です。この範囲を外れると、JavaScript は整数を安全に表現できなくなり、代わりに倍精度浮動小数点数の近似値で表現されます。数値が安全な整数の範囲内かどうかは {{jsxref("Number.isSafeInteger()")}} を用いて調べることができます。
 
-±(2<sup>-1074</sup> to 2<sup>1024</sup>) の範囲を外れた値は、自動的に次のように変換されます。
+表現可能な範囲外の値は、自動的に次のように変換されます。
 
 - {{jsxref("Number.MAX_VALUE")}} より大きな正の数は `+Infinity` に変換されます。
 - {{jsxref("Number.MIN_VALUE")}} より小さな正の数は `+0` に変換されます。
@@ -128,7 +128,7 @@ Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2; // true。両方と
 
 ### 文字列型
 
-文字列型 ({{jsxref("String")}}) は、テキストデータを表し、[UTF-16 コード単位](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#utf-16_characters_unicode_codepoints_and_grapheme_cluster) を表す 16 ビット符号なし整数値のシーケンスとしてエンコードさます。文字列の各要素は、文字列の中の位置を占めます。最初の要素は位置 `0` にあり、次の要素は位置 `1` にある、という具合になります。文字列の [length](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/length) は、その中の UTF-16 コード単位の個数で、実際の Unicode 文字数とは異なる場合があります。詳細は [`String`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#utf-16_characters_unicode_codepoints_and_grapheme_clusters) を参照してください。
+文字列型 ({{jsxref("String")}}) は、テキストデータを表し、[UTF-16 コード単位](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#utf-16_文字、unicode_コードポイント、書記素クラスター) を表す 16 ビット符号なし整数値のシーケンスとしてエンコードさます。文字列の各要素は、文字列の中の位置を占めます。最初の要素は位置 `0` にあり、次の要素は位置 `1` にある、という具合になります。文字列の [length](/ja/docs/Web/JavaScript/Reference/Global_Objects/String/length) は、その中の UTF-16 コード単位の個数で、実際の Unicode 文字数とは異なる場合があります。詳細は [`String`](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#utf-16_文字、unicode_コードポイント、書記素クラスター) のリファレンスページを参照してください。
 
 JavaScriptの文字列は不変です。つまり、一度文字列が作成されると、それを変更することはできません。文字列メソッドは、現在の文字列の内容に基づいて新しい文字列を作成します。例えば、次のような場面です。
 
@@ -141,7 +141,7 @@ JavaScriptの文字列は不変です。つまり、一度文字列が作成さ
 
 - 結合することで、複合文字列を簡単に作成できます。
 - 文字列はデバッグしやすいです（出力される情報は常に文字列に含まれているものです）。
-- 文字列は多くの API（[入力フィールド](/ja/docs/Web/API/HTMLInputElement)、[ローカルストレージ](/ja/docs/Web/API/Web_Storage_API)の値、 [`XMLHttpRequest`](/ja/docs/Web/API/XMLHttpRequest) の `responseText` を使用したレスポンス、など）において共通分母であり、文字列だけで作業したいという誘惑に駆られることがあります。
+- 文字列は多くの API（[入力フィールド](/ja/docs/Web/API/HTMLInputElement)、[ローカルストレージ](/ja/docs/Web/API/Web_Storage_API)の値、[`fetch()`](/ja/docs/Web/API/Window/fetch) の {{domxref("Response.text()")}} を使用したレスポンス、など）において共通分母であり、文字列だけで作業したいという誘惑に駆られることがあります。
 
 規則さえあれば、どのようなデータ構造でも文字列で表現することが可能ですが、これは良い考えとは言えません。例えば、区切り文字を使用することでリストを模倣することができますが（JavaScript の配列の方が適しています）、残念なことに区切り文字がリストの要素で使用されてしまった場合、リストが壊れてしまいます。エスケープした文字を使用することでこの問題に対処することは可能ですが、その規則をすべてに用意する必要がある上、不必要なメンテナンスの負担を生み出します。
 
@@ -157,7 +157,7 @@ JavaScriptの文字列は不変です。つまり、一度文字列が作成さ
 
 ### プロパティ
 
-JavaScript では、オブジェクトはプロパティの集合として見ることができます。[オブジェクトリテラル構文](/ja/docs/Web/JavaScript/Guide/Grammar_and_types#オブジェクトリテラル)は、初期化される限定された一連のプロパティです。その後でプロパティは追加したり削除したりすることができます。プロパティのキーは、[文字列](#文字列型)または[シンボル](#シンボル型)のどちらかです。プロパティの値は、他のオブジェクトを含め、どのような種類の値でもよいので、複雑なデータ構造を構築することが可能です。
+JavaScript では、オブジェクトはプロパティの集合として見ることができます。[オブジェクトリテラル構文](/ja/docs/Web/JavaScript/Guide/Grammar_and_types#オブジェクトリテラル)は、初期化される限定された一連のプロパティです。その後でプロパティは追加したり削除したりすることができます。プロパティのキーは、[文字列](#文字列型)または[シンボル](#シンボル型)のどちらかです。他の型（数値など）を使用してオブジェクトに索引を付ける場合、値は暗黙的に文字列に変換されます。プロパティの値は、他のオブジェクトを含め、どのような種類の値でもよいので、複雑なデータ構造を構築することが可能です。
 
 オブジェクトプロパティには、[データプロパティ](#データプロパティ)と[アクセサープロパティ](#アクセサープロパティ)の 2 種類があります。それぞれのプロパティには、対応する属性があります。それぞれの属性は、JavaScript エンジンが内部でアクセスしますが、{{jsxref("Object.defineProperty()")}} で設定したり、{{jsxref("Object.getOwnPropertyDescriptor()")}} で読み取ったりすることができます。様々なニュアンスについては、{{jsxref("Object.defineProperty()")}} のページで詳しく解説しています。
 
@@ -206,7 +206,7 @@ JavaScript では、オブジェクトはプロパティの集合として見る
 
 さらに、配列は `Array.prototype` を継承しており、配列を操作するための便利なメソッドを提供しています。例えば、 [`indexOf()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf) (配列中の値の検索) や [`push()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/push) (配列への要素の追加) などです。これにより、配列はリストや集合を表現するのに最適な候補となります。
 
-[型付き配列](/ja/docs/Web/JavaScript/Typed_arrays)は、基盤となるバイナリーデータバッファーの配列風のビューを表現し、配列と同様の意味づけを持つメソッドを数多く提供します。「型付き配列」は `Int8Array`、`Float32Array` などの様々なデータ構造の総称である。より詳しい情報は[型付き配列](/ja/docs/Web/JavaScript/Typed_arrays)のページを調べてください。型付き配列は、よく {{jsxref("ArrayBuffer")}} や {{jsxref("DataView")}} と併用して使用します。
+[型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)は、基盤となるバイナリーデータバッファーの配列風のビューを表現し、配列と同様の意味づけを持つメソッドを数多く提供します。「型付き配列」は `Int8Array`、`Float32Array` などの様々なデータ構造の総称である。より詳しい情報は[型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)のページを調べてください。型付き配列は、よく {{jsxref("ArrayBuffer")}} や {{jsxref("DataView")}} と併用して使用します。
 
 ### キー付きコレクション: Map, Set, WeakMap, WeakSet
 
@@ -216,7 +216,7 @@ JavaScript では、オブジェクトはプロパティの集合として見る
 
 通常、DOM ノードにデータをバインドするには、オブジェクトに直接プロパティを設定するか、 `data-*` 属性を使用します。これらの手法は同じコンテクストで実行されるあらゆるスクリプトからデータの利用が可能であるため、不都合な面を持ち合わせていました。 `Map` や `WeakMap` を使うと、オブジェクトへの*プライベート*なデータバインドを簡単に行うことができます。
 
-`WeakMap` と `WeakSet` はオブジェクトのキーしか使用できず、キーが集合に残っていてもガベージコレクションの対象とすることができます。これらは、[メモリー使用の最適化](/ja/docs/Web/JavaScript/Memory_Management#メモリー管理を支援するデータ構造)に固有の仕様として使用します。
+`WeakMap` および `WeakSet` では、キーとしてオブジェクトまたは[未登録のシンボル](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol#shared_symbols_in_the_global_symbol_registry)のいずれかであるガベージコレクターで回収可能な値のみが許可され、キーがコレクション内に残っていても、キーが回収される場合があります。これらは、[メモリー使用の最適化](/ja/docs/Web/JavaScript/Memory_management#%e3%83%a1%e3%83%a2%e3%83%aa%e3%83%bc%e7%ae%a1%e7%90%86%e3%82%92%e6%94%af%e6%8f%b4%e3%81%99%e3%82%8b%e3%83%87%e3%83%bc%e3%82%bf%e6%a7%8b%e9%80%a0)に固有の仕様として使用します。
 
 ### 構造化データ: JSON
 
@@ -232,23 +232,23 @@ JavaScript には組み込みオブジェクトの標準ライブラリーがあ
 
 ### プリミティブ変換
 
-[プリミティブ変換](https://tc39.es/ecma262/#sec-toprimitive)処理は、プリミティブ値が期待されるものの、実際の入力する種類に強い希望がない場合に使用します。[文字列](#文字列型)、[数値](#数値型)、[長整数](#長整数型)が同じように受け入れられる場合がほとんどです。例を示します。
+[プリミティブ変換](https://tc39.es/ecma262/multipage/abstract-operations.html#sec-toprimitive)処理は、プリミティブ値が期待されるものの、実際の入力する種類に強い希望がない場合に使用します。[文字列](#文字列型)、[数値](#数値型)、[長整数](#長整数型)が同じように受け入れられる場合がほとんどです。例を示します。
 
 - [`Date()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/Date) コンストラクターは、`Date` インスタンスでない引数を 1 つ受け取ります。文字列は日付文字列を表し、数値はタイムスタンプを表します。
 - [`+`](/ja/docs/Web/JavaScript/Reference/Operators/Addition) 演算子は、一方のオペランドが文字列の場合、文字列の連結を行い、それ以外の場合は数値の加算を行います。
 - [`==`](/ja/docs/Web/JavaScript/Reference/Operators/Equality) 演算子は、オペランドの一方がプリミティブで、もう一方がオブジェクトの場合、オブジェクトは入力する種類が決まっていないプリミティブ値に変換されます。
 
-この操作は、値が既にプリミティブである場合、変換を行いません。オブジェクトは、その [`[@@toPrimitive]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive) （`"default"` をヒントとして）、`valueOf()`、`toString()` の順にメソッドが呼び出されてプリミティブに変換されます。プリミティブ変換では `toString()` の前に `valueOf()` が呼び出されますが、これは[数値変換](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#数値変換)の動作と同様であり、[文字列変換](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#文字列変換)とは異なっていることに注意ください。
+この操作は、値が既にプリミティブである場合、変換を行いません。オブジェクトは、その [`[Symbol.toPrimitive]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive) （`"default"` をヒントとして）、`valueOf()`、`toString()` の順にメソッドが呼び出されてプリミティブに変換されます。プリミティブ変換では `toString()` の前に `valueOf()` が呼び出されますが、これは[数値変換](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#数値変換)の動作と同様であり、[文字列変換](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#文字列変換)とは異なっていることに注意ください。
 
-`[@@toPrimitive]()` メソッドは、存在する場合、プリミティブを返す必要があります。オブジェクトを返すと {{jsxref("TypeError")}} になります。`valueOf()` と `toString()` については、一方がオブジェクトを返す場合、その返値は無視され、代わりにもう一方の返値が使用されます。どちらも存在しなかった場合、またはどちらもプリミティブ値を返さなかった場合は {{jsxref("TypeError")}} が発生します。例として、以下のコードで説明します。
+`[Symbol.toPrimitive]()` メソッドは、存在する場合、プリミティブを返す必要があります。オブジェクトを返すと {{jsxref("TypeError")}} になります。`valueOf()` と `toString()` については、一方がオブジェクトを返す場合、その返値は無視され、代わりにもう一方の返値が使用されます。どちらも存在しなかった場合、またはどちらもプリミティブ値を返さなかった場合は {{jsxref("TypeError")}} が発生します。例として、以下のコードで説明します。
 
 ```js
 console.log({} + []); // "[object Object]"
 ```
 
-`{}` にも `[]` にも `[@@toPrimitive]()` メソッドはありません。`{}` と `[]` は両方とも `valueOf()` を {{jsxref("Object.prototype.valueOf")}} から継承しており、これはオブジェクト自体を返します。返値がオブジェクトなので、これは無視されます。従って、代わりに `toString()` が呼び出されます。 [`{}.toString()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/toString) は `"[object Object]"` を返し、一方 [`[].toString()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/toString) っは `""` を返すので、結果はこれらを結合した `"[object Object]"` となります。
+`{}` にも `[]` にも `[Symbol.toPrimitive]()` メソッドはありません。`{}` と `[]` は両方とも `valueOf()` を {{jsxref("Object.prototype.valueOf")}} から継承しており、これはオブジェクト自体を返します。返値がオブジェクトなので、これは無視されます。従って、代わりに `toString()` が呼び出されます。 [`{}.toString()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/toString) は `"[object Object]"` を返し、一方 [`[].toString()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/toString) っは `""` を返すので、結果はこれらを結合した `"[object Object]"` となります。
 
-プリミティブ型に変換する場合は、常に `[@@toPrimitive]()` メソッドが優先されます。プリミティブ型の変換は、一般に `valueOf()` が優先的に呼び出されるため、数値の変換と同じように振る舞います。しかし、独自の `[@@toPrimitive]()` メソッドを持つオブジェクトは、任意のプリミティブ型を返すことができます。組み込みオブジェクトの中で、{{jsxref("Date")}} と {{jsxref("Symbol")}} オブジェクトのみが、`[@@toPrimitive]()` メソッドを上書きします。[`Date.prototype[@@toPrimitive]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive) は `"default"` ヒントを `"string"` であるかのように扱い、[`Symbol. prototype[@@toPrimitive]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/@@toPrimitive) はヒントを無視し、常にシンボルを返します。
+プリミティブ型に変換する場合は、常に `[Symbol.toPrimitive]()` メソッドが優先されます。プリミティブ型の変換は、一般に `valueOf()` が優先的に呼び出されるため、数値の変換と同じように振る舞います。しかし、独自の `[Symbol.toPrimitive]()` メソッドを持つオブジェクトは、任意のプリミティブ型を返すことができます。組み込みオブジェクトの中で、{{jsxref("Date")}} と {{jsxref("Symbol")}} オブジェクトのみが、`[Symbol.toPrimitive]()` メソッドを上書きします。[`Date.prototype[Symbol.toPrimitive]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/Symbol.toPrimitive) は `"default"` ヒントを `"string"` であるかのように扱い、[`Symbol. prototype[Symbol.toPrimitive]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/Symbol.toPrimitive) はヒントを無視し、常にシンボルを返します。
 
 ### 数値変換
 
@@ -262,15 +262,13 @@ console.log({} + []); // "[object Object]"
 
 お気づきかもしれませんが、オブジェクトをプリミティブに変換する経路は 3 つあります。
 
-- [プリミティブ変換](#プリミティブ変換): `[@@toPrimitive]("default")` → `valueOf()` → `toString()`
-- [数値変換](#数値変換)、[数値型への変換](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#number_coercion)、[長整数型への変換](/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt#bigint_coercion): `[@@toPrimitive]("number")` → `valueOf()` → `toString()`
-- [文字列変換](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#string_coercion): `[@@toPrimitive]("string")` → `toString()` → `valueOf()`
+- [プリミティブ変換](#プリミティブ変換): `[Symbol.toPrimitive]("default")` → `valueOf()` → `toString()`
+- [数値変換](#数値変換)、[数値型への変換](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#数値への変換)、[長整数型への変換](/ja/docs/Web/JavaScript/Reference/Global_Objects/BigInt#bigint_の変換): `[Symbol.toPrimitive]("number")` → `valueOf()` → `toString()`
+- [文字列変換](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#string_coercion): `[Symbol.toPrimitive]("string")` → `toString()` → `valueOf()`
 
-すべての場合において、`[@@toPrimitive]()` が存在する場合は、呼び出し可能でプリミティブを返す必要があり、`valueOf` や `toString` が呼び出し可能でないかオブジェクトを返さない場合は無視されます。この処理の終わりには、成功すれば結果がプリミティブであることが保証されます。結果として得られるプリミティブは、コンテキストに応じてさらなる変換が行われることがあります。
+すべての場合において、`[Symbol.toPrimitive]()` が存在する場合は、呼び出し可能でプリミティブを返す必要があり、`valueOf` や `toString` が呼び出し可能でないかオブジェクトを返さない場合は無視されます。この処理の終わりには、成功すれば結果がプリミティブであることが保証されます。結果として得られるプリミティブは、コンテキストに応じてさらなる変換が行われることがあります。
 
 ## 関連情報
 
-- [JavaScript Data Structures and Algorithms by Oleksii Trekhleb](https://github.com/trekhleb/javascript-algorithms)
-- [Nicholas Zakas による、JavaScript における一般的なデータ構造とアルゴリズムのまとめ](https://github.com/humanwhocodes/computer-science-in-javascript)
-- [Search Tre(i)es implemented in JavaScript](https://github.com/monmohan/dsjslib)
-- [Data Types and Values in the ECMAScript specification](https://tc39.es/ecma262/#sec-ecmascript-data-types-and-values)
+- [JavaScript Data Structures and Algorithms](https://github.com/trekhleb/javascript-algorithms) (Oleksii Trekhleb)
+- [Computer Science in JavaScript](https://github.com/humanwhocodes/computer-science-in-javascript) (Nicholas C. Zakas)
diff --git a/files/ja/web/javascript/guide/regular_expressions/character_classes/index.md b/files/ja/web/javascript/guide/regular_expressions/character_classes/index.md
index fff25b01827715..68f6ec7edb90f7 100644
--- a/files/ja/web/javascript/guide/regular_expressions/character_classes/index.md
+++ b/files/ja/web/javascript/guide/regular_expressions/character_classes/index.md
@@ -116,7 +116,7 @@ l10n:
       <td><code>\s</code></td>
       <td>
         <p>
-          ホワイトスペース 1 文字に一致します。例えば空白、タブ、改ページ、改行、その他の Unicode 空白文字などです。 <code>[\f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code> に相当します。例えば <code>/\s\w*/</code> は "foo bar" の " bar" に一致します。
+          ホワイトスペース 1 文字に一致します。例えば空白、タブ、改ページ、改行、その他の Unicode 空白文字などです。 <code>[\f\n\r\t\v\u0020\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]</code> に相当します。例えば <code>/\s\w*/</code> は "foo bar" の " bar" に一致します。
         </p>
       </td>
     </tr>
diff --git a/files/ja/web/javascript/index.md b/files/ja/web/javascript/index.md
index 6ea38fe9851e3a..b209d244c38aed 100644
--- a/files/ja/web/javascript/index.md
+++ b/files/ja/web/javascript/index.md
@@ -2,12 +2,12 @@
 title: JavaScript
 slug: Web/JavaScript
 l10n:
-  sourceCommit: b8e4922dacc3ce43e239f7984b61493568e93f59
+  sourceCommit: 26e2f9883e0e73def04c0e86fec6da3ec42e66b3
 ---
 
-{{JsSidebar}}
+{{jsSidebar}}
 
-**JavaScript** (**JS**) は軽量で、インタープリター型、あるいは[実行時](https://ja.wikipedia.org/wiki/実行時コンパイラ)コンパイルされる、{{Glossary("First-class Function", "第一級関数")}}を備えたプログラミング言語です。ウェブページでよく使用されるスクリプト言語として知られ、[多くのブラウザー以外の環境](https://ja.wikipedia.org/wiki/JavaScript#その他の環境での利用)、例えば {{Glossary("Node.js")}} や [Apache CouchDB](https://couchdb.apache.org/) や [Adobe Acrobat](https://opensource.adobe.com/dc-acrobat-sdk-docs/acrobatsdk/) などでも使用されています。 JavaScript は[プロトタイプベース](/ja/docs/Glossary/Prototype-based_programming)で、マルチパラダイムで、[シングルスレッド](/ja/docs/Glossary/Thread)で、[動的](/ja/docs/Glossary/Dynamic_typing)な言語であり、オブジェクト指向、命令型、宣言型（関数プログラミングなど）といったスタイルに対応しています。
+**JavaScript** (**JS**) は軽量でインタープリター型（あるいは[実行時](https://ja.wikipedia.org/wiki/実行時コンパイラ)コンパイルされる）{{Glossary("First-class Function", "第一級関数")}}を備えたプログラミング言語です。ウェブページでよく使用されるスクリプト言語として知られ、[多くのブラウザー以外の環境](https://ja.wikipedia.org/wiki/JavaScript#その他の環境での利用)、例えば {{Glossary("Node.js")}} や [Apache CouchDB](https://couchdb.apache.org/) や [Adobe Acrobat](https://opensource.adobe.com/dc-acrobat-sdk-docs/acrobatsdk/) などでも使用されています。 JavaScript は[プロトタイプベース](/ja/docs/Glossary/Prototype-based_programming)で、マルチパラダイムで、[シングルスレッド](/ja/docs/Glossary/Thread)で、[動的](/ja/docs/Glossary/Dynamic_typing)な言語であり、オブジェクト指向、命令型、宣言型（関数プログラミングなど）といったスタイルに対応しています。
 
 JavaScript の動的な機能には、ランタイムオブジェクトの構築、可変引数リスト、関数変数、動的スクリプトの作成（[`eval`](/ja/docs/Web/JavaScript/Reference/Global_Objects/eval) で）、オブジェクトの内包（[`for...in`](/ja/docs/Web/JavaScript/Reference/Statements/for...in) と [`Object` ユーティリティ](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object#静的メソッド)で）、ソースコードの復元（JavaScript 関数はそのソーステキストを格納し [`toString()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/toString) で復元可能）が含まれます。
 
@@ -24,12 +24,6 @@ JavaScript を[プログラミング言語 Java](https://ja.wikipedia.org/wiki/J
 
 JavaScript 仕様と関連技術に関する詳細は、 [JavaScript 技術概要](/ja/docs/Web/JavaScript/JavaScript_technologies_overview)を参照してください。
 
-> **注目:** **フロントエンドのウェブ開発者を目指している方へ**
->
-> ゴールに向かって頑張るために必要な情報をまとめたコースをご用意しました。
->
-> [**始めましょう**](/ja/docs/Learn/Front-end_web_developer)
-
 ## チュートリアル
 
 ガイドやチュートリアルを使って JavaScript をプログラムする方法を学びましょう。
@@ -63,7 +57,7 @@ JavaScript について学びたいと思っているが、JavaScript あるい
 - [JavaScript のデータ構造](/ja/docs/Web/JavaScript/Data_structures)
   - : JavaScript で利用可能なデータ構造の概要です。
 - [等値比較と同一性](/ja/docs/Web/JavaScript/Equality_comparisons_and_sameness)
-  - : JavaScript には 3 つの異なる値の比較演算子があります。 `===` を用いる厳格な等値性比較、 `==` を用いる緩い等値性比較、そして {{jsxref("Global_Objects/Object/is", "Object.is()")}} メソッドです。
+  - : JavaScript には 3 つの異なる値の比較演算子があります。 `===` を用いる厳格な等値性比較、 `==` を用いる緩い等値性比較、そして {{jsxref("Object.is()")}} メソッドです。
 - [プロパティの列挙と所有権](/ja/docs/Web/JavaScript/Enumerability_and_ownership_of_properties)
   - : オブジェクトプロパティのグループを1つずつ訪問する様々なメソッドが、プロパティの列挙可能性と所有権をどのように処理するかです。
 - [クロージャ](/ja/docs/Web/JavaScript/Closures)
@@ -75,8 +69,8 @@ JavaScript について学びたいと思っているが、JavaScript あるい
   - : よく誤解されたり過小評価されたりしているプロトタイプベースの継承に対する説明です。
 - [メモリー管理](/ja/docs/Web/JavaScript/Memory_management)
   - : JavaScript におけるメモリーのライフサイクルとガベージコレクションです。
-- [同時実行モデルとイベントループ](/ja/docs/Web/JavaScript/Event_loop)
-  - : JavaScript は「イベントループ」に基づく同時実行モデルを持っています。
+- [イベントループ](/ja/docs/Web/JavaScript/Event_loop)
+  - : JavaScript は「イベントループ」に基づく実行時モデルを持っています。
 
 ## リファレンス
 
diff --git a/files/ja/web/javascript/reference/global_objects/array/entries/index.md b/files/ja/web/javascript/reference/global_objects/array/entries/index.md
index 91f9fb2c07387e..20a7050b3ced78 100644
--- a/files/ja/web/javascript/reference/global_objects/array/entries/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/entries/index.md
@@ -2,7 +2,7 @@
 title: Array.prototype.entries()
 slug: Web/JavaScript/Reference/Global_Objects/Array/entries
 l10n:
-  sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de
+  sourceCommit: 6fbdb78c1362fae31fbd545f4b2d9c51987a6bca
 ---
 
 {{JSRef}}
@@ -109,6 +109,6 @@ for (const entry of Array.prototype.entries.call(arrayLike)) {
 - {{jsxref("Array")}}
 - {{jsxref("Array.prototype.keys()")}}
 - {{jsxref("Array.prototype.values()")}}
-- [`Array.prototype[@@iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator)
+- [`Array.prototype[Symbol.iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/Symbol.iterator)
 - {{jsxref("TypedArray.prototype.entries()")}}
 - [反復処理プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)
diff --git a/files/ja/web/javascript/reference/global_objects/array/foreach/index.md b/files/ja/web/javascript/reference/global_objects/array/foreach/index.md
index 686f9df7e6f5a4..12a98570e4572c 100644
--- a/files/ja/web/javascript/reference/global_objects/array/foreach/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/foreach/index.md
@@ -2,7 +2,7 @@
 title: Array.prototype.forEach()
 slug: Web/JavaScript/Reference/Global_Objects/Array/forEach
 l10n:
-  sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a
+  sourceCommit: 8421c0cd94fa5aa237c833ac6d24885edbc7d721
 ---
 
 {{JSRef}}
@@ -37,19 +37,10 @@ forEach(callbackFn, thisArg)
 
 ## 解説
 
-`forEach()` メソッドは[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)です。指定された関数 `callbackFn` を配列に含まれる各要素に対して一度ずつ、昇順で呼び出します。 {{jsxref("Array/map", "map()")}} と異なり、 `forEach()` は常に {{jsxref("undefined")}} を返し、連鎖させることはできません。典型的な使用する用途は、チェーンの終わりで副次効果を実行することです。
+`forEach()` メソッドは[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)です。指定された関数 `callbackFn` を配列に含まれる各要素に対して一度ずつ、昇順で呼び出します。 {{jsxref("Array/map", "map()")}} と異なり、 `forEach()` は常に {{jsxref("undefined")}} を返し、連鎖させることはできません。典型的な使用する用途は、チェーンの終わりで副次効果を実行することです。これらのメソッドが一般的にどのように動作するのかについての詳細は、[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)の節をご覧下さい。
 
 `callbackFn` は値が割り当てられている配列インデックスに対してのみ呼び出されます。[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)で空のスロットに対しては呼び出されません。
 
-`forEach()` メソッドは呼び出し元の配列を変更しませんが、 `callbackFn` に指定された関数は変更することがあります。ただし、配列の長さは `callbackFn` を最初に呼び出す前に保存されることに注意してください。したがって、
-
-- `callbackFn` は `forEach()` の呼び出しを始めたときの配列の長さを超えて追加された要素にはアクセスしません。
-- 既に訪問した位置を変更しても、 `callbackFn` が再度呼び出されることはありません。
-- まだ訪問していない既存の配列要素が `callbackFn` によって変更された場合、 `callbackFn` に渡される値はその要素が取得される時点の値になります。[削除](/ja/docs/Web/JavaScript/Reference/Operators/delete)された要素は `undefined` であるかのように処理されます。
-
-> [!WARNING]
-> 前項で説明したような、参照中の配列の同時進行での変更は（特殊な場合を除いて）普通は避けるべきです。多くの場合、理解しにくいコードになります。
-
 `forEach()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。これは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。
 
 例外を発生する以外の方法で、 `forEach()` ループを止めたり脱出したりする方法はありません。そのような動作を行う場合、 `forEach()` メソッドは適切な方法ではありません。
@@ -77,27 +68,6 @@ console.log(sum);
 
 ## 例
 
-### 不連続な配列に対する forEach() の使用
-
-```js-nolint
-const arraySparse = [1, 3, /* 空 */, 7];
-let numCallbackRuns = 0;
-
-arraySparse.forEach((element) => {
-  console.log({ element });
-  numCallbackRuns++;
-});
-
-console.log({ numCallbackRuns });
-
-// { element: 1 }
-// { element: 3 }
-// { element: 7 }
-// { numCallbackRuns: 3 }
-```
-
-3 と 7 の間の値がないところで、コールバック関数が呼び出されなかったことが分かります。
-
 ### for ループから forEach への変換
 
 ```js
@@ -118,7 +88,7 @@ items.forEach((item) => {
 ### 配列の内容の出力
 
 > [!NOTE]
-> 配列の内容をコンソールに表示するために、配列の整形済みのバージョンを表示する {{domxref("Console/table", "console.table()")}} を使用することができます。
+> 配列の内容をコンソールに表示するために、配列の整形済みのバージョンを表示する {{domxref("console/table_static", "console.table()")}} を使用することができます。
 >
 > 以下の例では同じことを `forEach()` を使用して行う他の方法を説明しています。
 
@@ -149,7 +119,7 @@ class Counter {
     this.count = 0;
   }
   add(array) {
-    // Only function expressions will have its own this binding
+    // Only function expressions have their own this bindings.
     array.forEach(function countEntry(entry) {
       this.sum += entry;
       ++this.count;
@@ -190,31 +160,9 @@ const obj1 = { a: 1, b: 2 };
 const obj2 = copy(obj1); // obj2 looks like obj1 now
 ```
 
-### 反復処理中の配列の変更
-
-次の例では `one`, `two`, `four` をログ出力します。
-
-値 `two` を含む項目に到達すると、配列全体の最初の項目が取り出され、残りのすべての項目が 1 つずつ繰り上がります。
-要素 `four` は配列の前の方の位置にあるので、 `three` は飛ばされます。
-
-`forEach()` は反復処理の前に配列のコピーを生成しません。
-
-```js
-const words = ["one", "two", "three", "four"];
-words.forEach((word) => {
-  console.log(word);
-  if (word === "two") {
-    words.shift(); // 'one' が配列から削除される
-  }
-}); // one // two // four
-
-console.log(words); // ['two', 'three', 'four']
-```
-
 ### 配列の平坦化
 
-次の例は学習目的だけのものです。
-組み込みメソッドを使用して配列を平坦化したい場合は、{{jsxref("Array.prototype.flat()")}} を使用することができます。
+次の例は学習目的だけのものです。組み込みメソッドを使用して配列を平坦化したい場合は、{{jsxref("Array.prototype.flat()")}} を使用することができます。
 
 ```js
 const flatten = (arr) => {
@@ -234,6 +182,47 @@ const nested = [1, 2, 3, [4, 5, [6, 7], 8, 9]];
 console.log(flatten(nested)); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
 ```
 
+### callbackFn の第 3 引数の使用
+
+`array` 引数は、配列の別の要素にアクセスしたい場合、特に配列を参照する既存の変数を保有していない場合に便利です。次の例では、最初の `filter()` を使用して正の値を抽出し、次に `forEach()` を使用してその付近をログに記録します。
+
+```js
+const numbers = [3, -1, 1, 4, 1, 5];
+numbers
+  .filter((num) => num > 0)
+  .forEach((num, idx, arr) => {
+    // arr 引数がない場合、変数に保存せずに中間配列に
+    // 簡単にアクセスする方法はない
+    console.log(arr[idx - 1], num, arr[idx + 1]);
+  });
+// undefined 3 1
+// 3 1 4
+// 1 4 1
+// 4 1 5
+// 1 5 undefined
+```
+
+### 疎配列に対する forEach() の使用
+
+```js-nolint
+const arraySparse = [1, 3, /* 空 */, 7];
+let numCallbackRuns = 0;
+
+arraySparse.forEach((element) => {
+  console.log({ element });
+  numCallbackRuns++;
+});
+
+console.log({ numCallbackRuns });
+
+// { element: 1 }
+// { element: 3 }
+// { element: 7 }
+// { numCallbackRuns: 3 }
+```
+
+3 と 7 の間の値がないところで、コールバック関数が呼び出されなかったことが分かります。
+
 ### 配列以外のオブジェクトに対する forEach() の呼び出し
 
 `forEach()` メソッドは `this` の `length` プロパティを読み込み、次にキーが `length` より小さい非負の整数である各プロパティにアクセスします。
diff --git a/files/ja/web/javascript/reference/global_objects/array/from/index.md b/files/ja/web/javascript/reference/global_objects/array/from/index.md
index 64a3240cf39110..e01c6db8b85c44 100644
--- a/files/ja/web/javascript/reference/global_objects/array/from/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/from/index.md
@@ -2,7 +2,7 @@
 title: Array.from()
 slug: Web/JavaScript/Reference/Global_Objects/Array/from
 l10n:
-  sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a
+  sourceCommit: 8421c0cd94fa5aa237c833ac6d24885edbc7d721
 ---
 
 {{JSRef}}
@@ -171,7 +171,7 @@ console.log(Array.from.call(NotArray, { length: 1, 0: "foo" }));
 // NotArray { '0': 'foo', length: 1 }
 ```
 
-`this` の値がコンストラクタでない場合は、プレーンな `Array` オブジェクトを返します。
+`this` の値がコンストラクターでない場合は、プレーンな `Array` オブジェクトを返します。
 
 ```js
 console.log(Array.from.call({}, { length: 1, 0: "foo" })); // [ 'foo' ]
diff --git a/files/ja/web/javascript/reference/global_objects/array/index.md b/files/ja/web/javascript/reference/global_objects/array/index.md
index 700ab80fc0e228..cb391061a70763 100644
--- a/files/ja/web/javascript/reference/global_objects/array/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/index.md
@@ -2,25 +2,25 @@
 title: Array
 slug: Web/JavaScript/Reference/Global_Objects/Array
 l10n:
-  sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a
+  sourceCommit: bb48907e64eb4bf60f17efd7d39b46c771d220a0
 ---
 
 {{JSRef}}
 
-**`Array`** オブジェクトは、他のプログラミング言語の配列と同様に、[複数の項目の集合を単一の変数名の下に格納](/ja/docs/Learn/JavaScript/First_steps/Arrays)することができ、[共通の配列操作を行う](#例)ためのメンバーを持っています。
+**`Array`** オブジェクトは、他のプログラミング言語の配列と同様に、[複数のアイテムの集合を単一の変数名の下に格納](/ja/docs/Learn/JavaScript/First_steps/Arrays)することができ、[共通の配列操作を行う](#例)ためのメンバーを持っています。
 
 ## 解説
 
 JavaScript では、配列は[プリミティブ](/ja/docs/Glossary/Primitive)ではなく、主に次のような性質を持つ `Array` オブジェクトです。
 
 - **JavaScript の配列はリサイズ可能**であり、**異なる[データ型](/ja/docs/Web/JavaScript/Data_structures)を交ぜて格納することができます**。（これらの性質が望ましくない場合は、代わりに[型付き配列](/ja/docs/Web/JavaScript/Guide/Typed_arrays)を使用してください）。
-- **JavaScript の配列は連想配列ではありません**。配列の要素はインデックスとして任意の文字列を使用してアクセスすることができません。非負の整数（またはそれぞれの文字列表現）をインデックスとして使用してアクセスする必要があります。
+- **JavaScript の配列は連想配列ではありません**。配列の要素は添字として任意の文字列を使用してアクセスすることができません。非負の整数（またはそれぞれの文字列表現）を添字として使用してアクセスする必要があります。
 - **JavaScript の配列は[ゼロオリジン](https://ja.wikipedia.org/wiki/オリジン)です**。配列の最初の要素は `0` の位置にあり、 2 番目の要素は `1` の位置にあるといった具合です。そして、最後の要素は配列の {{jsxref("Array/length", "length")}} プロパティの値から `1` を引いた位置になります。
 - **JavaScript の[配列コピー操作](#配列のコピー)は[シャローコピー](/ja/docs/Glossary/Shallow_copy)を生成します**。（JavaScript オブジェクトに対するすべての標準組み込みコピー操作は、[ディープコピー](/ja/docs/Glossary/Deep_copy)ではなく、シャローコピーを作成します）。
 
-### 配列のインデックス
+### 配列の添字
 
-`Array` オブジェクトは要素のインデックスとして任意の文字列を（[連想配列](https://en.wikipedia.org/wiki/Associative_array)のように）使用することはできません。非負の整数（またはその文字列形式）を使用しなければなりません。整数以外の値で設定したりアクセスしたりすると、配列のリスト自体の要素を設定したり取り出したりすることはできませんが、その配列の[オブジェクトプロパティの集合](/ja/docs/Web/JavaScript/Data_structures#プロパティ)に関連する変数を設定したりアクセスしたりすることができます。配列のオブジェクトプロパティと配列要素のリストは別個のものであり、配列の[探索や変更操作](/ja/docs/Web/JavaScript/Guide/Indexed_collections#配列のメソッド)はこれらの名前付きプロパティに適用することができません。
+`Array` オブジェクトは要素の添字として任意の文字列を（[連想配列](https://en.wikipedia.org/wiki/Associative_array)のように）使用することはできません。非負の整数（またはその文字列形式）を使用しなければなりません。整数以外の値で設定したりアクセスしたりすると、配列のリスト自体の要素を設定したり取り出したりすることはできませんが、その配列の[オブジェクトプロパティの集合](/ja/docs/Web/JavaScript/Data_structures#プロパティ)に関連する変数を設定したりアクセスしたりすることができます。配列のオブジェクトプロパティと配列要素のリストは別個のものであり、配列の[探索や変更操作](/ja/docs/Web/JavaScript/Guide/Indexed_collections#配列のメソッド)はこれらの名前付きプロパティに適用することができません。
 
 `toString` が一つのプロパティであるのと同様に（ただし厳密には `toString()` はメソッドですが）、配列における配列要素はオブジェクトのプロパティです。しかし、次のように配列にアクセスしようとすると、プロパティ名が妥当でないため、構文エラーが発生します。
 
@@ -28,7 +28,7 @@ JavaScript では、配列は[プリミティブ](/ja/docs/Glossary/Primitive)
 arr.0; // 構文エラー
 ```
 
-JavaScript の構文では、数字で始まるプロパティには[ブラケット記法](/ja/docs/Web/JavaScript/Guide/Working_with_objects#オブジェクトとプロパティ)を使う必要があり、[ドット記法](/ja/docs/Web/JavaScript/Reference/Operators/Property_accessors)を使うことはできません。また、配列のインデックスを引用符で囲むことができますが（`years[2]` の代わりに `years['2']` のように）、ふつうはそうする必要はありません。
+JavaScript の構文では、数字で始まるプロパティには[ブラケット記法](/ja/docs/Web/JavaScript/Guide/Working_with_objects#オブジェクトとプロパティ)を使う必要があり、[ドット記法](/ja/docs/Web/JavaScript/Reference/Operators/Property_accessors)を使うことはできません。また、配列の添字を引用符で囲むことができますが（`years[2]` の代わりに `years['2']` のように）、ふつうはそうする必要はありません。
 
 `years[2]` の `2` は最終的に、JavaScript エンジンが内部的に `toString` メソッドで型変換することで文字列にされます。これは '2' と '02' が `years` オブジェクトの異なる場所を指すようにするためでです。このため、以下の例は `true` がログ出力されます。
 
@@ -36,7 +36,7 @@ JavaScript の構文では、数字で始まるプロパティには[ブラケ
 console.log(years["2"] !== years["02"]);
 ```
 
-`years['2']` だけが実際の配列のインデックスです。 `years['02']` は自由な文字列のプロパティであり、配列の反復処理では処理されません。
+`years['2']` だけが実際の配列の添字です。 `years['02']` は自由な文字列のプロパティであり、配列の反復処理では処理されません。
 
 ### length と数値プロパティとの関係
 
@@ -52,7 +52,7 @@ fruits.push("バナナ", "りんご", "もも");
 console.log(fruits.length); // 3
 ```
 
-JavaScript の配列で、配列のインデックスとして妥当なプロパティであり、かつ現在の配列の範囲の外にあるインデックスを設定すると、エンジンは配列の {{jsxref("Array/length", "length")}} プロパティを更新します。
+JavaScript の配列で、配列の添字として妥当なプロパティであり、かつ現在の配列の範囲の外にある添字を設定すると、エンジンは配列の {{jsxref("Array/length", "length")}} プロパティを更新します。
 
 ```js
 fruits[5] = "マンゴー";
@@ -83,43 +83,44 @@ console.log(fruits.length); // 2
 
 ### 配列メソッドと空のスロット
 
-[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)において空のスロットは、配列のメソッド間で一貫性のない動作をします。一般に、古いメソッドは空のスロットをスキップしますが、新しいメソッドはそれを `undefined` として扱う傾向があります。
-
-複数の要素を反復処理するメソッドのうち、以下のものはインデックスにアクセスする前に [`in`](/ja/docs/Web/JavaScript/Reference/Operators/in) によるチェックを行い、空のスロットと `undefined` を混同しないようにします。
-
-- {{jsxref("Array/concat", "concat()")}}
-- {{jsxref("Array/copyWithin", "copyWithin()")}}
-- {{jsxref("Array/every", "every()")}}
-- {{jsxref("Array/filter", "filter()")}}
-- {{jsxref("Array/flat", "flat()")}}
-- {{jsxref("Array/flatMap", "flatMap()")}}
-- {{jsxref("Array/forEach", "forEach()")}}
-- {{jsxref("Array/indexOf", "indexOf()")}}
-- {{jsxref("Array/lastIndexOf", "lastIndexOf()")}}
-- {{jsxref("Array/map", "map()")}}
-- {{jsxref("Array/reduce", "reduce()")}}
-- {{jsxref("Array/reduceRight", "reduceRight()")}}
-- {{jsxref("Array/reverse", "reverse()")}}
-- {{jsxref("Array/slice", "slice()")}}
-- {{jsxref("Array/some", "some()")}}
-- {{jsxref("Array/sort", "sort()")}}
-- {{jsxref("Array/splice", "splice()")}}
-
-空のスロットを具体的にどのように扱うかについては、各メソッドのページを参照してください。
-
-以下のメソッドは、空のスロットを `undefined` であるかのように扱います。
-
-- {{jsxref("Array/entries", "entries()")}}
-- {{jsxref("Array/fill", "fill()")}}
-- {{jsxref("Array/find", "find()")}}
-- {{jsxref("Array/findIndex", "findIndex()")}}
-- {{jsxref("Array/findLast", "findLast()")}}
-- {{jsxref("Array/findLastIndex", "findLastIndex()")}}
-- {{jsxref("Array/includes", "includes()")}}
-- {{jsxref("Array/join", "join()")}}
-- {{jsxref("Array/keys", "keys()")}}
-- {{jsxref("Array/toLocaleString", "toLocaleString()")}}
-- {{jsxref("Array/values", "values()")}}
+[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)で空のスロットに遭遇した場合、配列メソッドの挙動はさまざまです。一般的に、古いメソッド（`forEach` など）では、空のスロットと `undefined` の値を格納する位置を異なる方法で処理します。
+
+空のスロットに特別な処理を行うメソッドには、 {{jsxref("Array/concat", "concat()")}}, {{jsxref("Array/copyWithin", "copyWithin()")}}, {{jsxref("Array/every", "every()")}}, {{jsxref("Array/filter", "filter()")}}, {{jsxref("Array/flat", "flat()")}}, {{jsxref("Array/flatMap", "flatMap()")}}, {{jsxref("Array/forEach", "forEach()")}}, {{jsxref("Array/indexOf", "indexOf()")}}, {{jsxref("Array/lastIndexOf", "lastIndexOf()")}}, {{jsxref("Array/map", "map()")}}, {{jsxref("Array/reduce", "reduce()")}}, {{jsxref("Array/reduceRight", "reduceRight()")}}, {{jsxref("Array/reverse", "reverse()")}}, {{jsxref("Array/slice", "slice()")}}, {{jsxref("Array/some", "some()")}}, {{jsxref("Array/sort", "sort()")}}, {{jsxref("Array/splice", "splice()")}} があります。`forEach` などの反復処理メソッドは、空のスロットをまったく処理しません。他にも `concat` や `copyWithin` など、コピーする際に空の要素を維持するメソッドもありますが、結局のところ配列は疎のままです。
+
+```js
+const colors = ["red", "yellow", "blue"];
+colors[5] = "purple";
+colors.forEach((item, index) => {
+  console.log(`${index}: ${item}`);
+});
+// 出力:
+// 0: red
+// 1: yellow
+// 2: blue
+// 5: purple
+
+colors.reverse(); // ['purple', 空 × 2, 'blue', 'yellow', 'red']
+```
+
+新しいメソッド（`keys` など）は、空のスロットを特別扱いせず、`undefined` が格納されているかのように扱います。空のスロットと `undefined` 要素を同一視するメソッドには、{{jsxref("Array/entries", "entries()")}}, {{jsxref("Array/fill", "fill()")}}, {{jsxref("Array/find", "find()")}}, {{jsxref("Array/findIndex", "findIndex()")}}, {{jsxref("Array/findLast", "findLast()")}}, {{jsxref("Array/findLastIndex", "findLastIndex()")}}, {{jsxref("Array/includes", "includes()")}}, {{jsxref("Array/join", "join()")}}, {{jsxref("Array/keys", "keys()")}}, {{jsxref("Array/toLocaleString", "toLocaleString()")}}, {{jsxref("Array/toReversed", "toReversed()")}}, {{jsxref("Array/toSorted", "toSorted()")}}, {{jsxref("Array/toSpliced", "toSpliced()")}}, {{jsxref("Array/values", "values()")}}, {{jsxref("Array/with", "with()")}} などがあります。
+
+```js
+const colors = ["red", "yellow", "blue"];
+colors[5] = "purple";
+const iterator = colors.keys();
+for (const key of iterator) {
+  console.log(`${key}: ${colors[key]}`);
+}
+// 出力t
+// 0: red
+// 1: yellow
+// 2: blue
+// 3: undefined
+// 4: undefined
+// 5: purple
+
+const newColors = colors.toReversed(); // ['purple', undefined, undefined, 'blue', 'yellow', 'red']
+```
 
 ### コピーメソッドと変更メソッド
 
@@ -130,24 +131,11 @@ console.log(fruits.length); // 2
 
 他にも、メソッドが呼び出された配列を変更するメソッドがあります。この場合、メソッドによって返値が異なります。あるものは同じ配列への参照を、あるものは新しい配列の長さを返します。
 
-以下のメソッドは、 [`this.constructor[Symbol.species]`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/@@species) にアクセスして使用するコンストラクターを決定し、新しい配列を作成します。
-
-- {{jsxref("Array/concat", "concat()")}}
-- {{jsxref("Array/filter", "filter()")}}
-- {{jsxref("Array/flat", "flat()")}}
-- {{jsxref("Array/flatMap", "flatMap()")}}
-- {{jsxref("Array/map", "map()")}}
-- {{jsxref("Array/slice", "slice()")}}
-- {{jsxref("Array/splice", "splice()")}}（返される要素を取り除いた配列を構成するため）
+[`this.constructor[Symbol.species]`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/Symbol.species) にアクセスして使用するコンストラクターを決定し、新しい配列を作成するメソッドは、{{jsxref("Array/concat", "concat()")}}, {{jsxref("Array/filter", "filter()")}}, {{jsxref("Array/flat", "flat()")}}, {{jsxref("Array/flatMap", "flatMap()")}}, {{jsxref("Array/map", "map()")}}, {{jsxref("Array/slice", "slice()")}}, {{jsxref("Array/splice", "splice()")}}（返される要素を取り除いた配列を構成するため）です。
 
-以下のメソッドは常に `Array` ベースのコンストラクターで新しい配列を作成します。
+常に `Array` ベースのコンストラクターで新しい配列を作成するメソッドは、{{jsxref("Array/toReversed", "toReversed()")}}, {{jsxref("Array/toSorted", "toSorted()")}}, {{jsxref("Array/toSpliced", "toSpliced()")}}, {{jsxref("Array/with", "with()")}} です。
 
-- {{jsxref("Array/toReversed", "toReversed()")}}
-- {{jsxref("Array/toSorted", "toSorted()")}}
-- {{jsxref("Array/toSpliced", "toSpliced()")}}
-- {{jsxref("Array/with", "with()")}}
-
-以下の表は、元の配列を変更メソッドと、それに対応する変更しない代替メソッドの一覧です。
+次の表は、元の配列を変更メソッドと、それに対応する変更しない代替メソッドの一覧です。
 
 | 変更メソッド                                   | 変更しない代替メソッド                                   |
 | ---------------------------------------------- | -------------------------------------------------------- |
@@ -182,7 +170,7 @@ method(callbackFn, thisArg)
 - `element`
   - : 配列の中で現在処理されている要素。
 - `index`
-  - : 配列の中で、現在処理中の要素のインデックス。
+  - : 配列の中で、現在処理中の要素の添字。
 - `array`
   - : メソッドが呼び出された配列。
 
@@ -190,33 +178,43 @@ method(callbackFn, thisArg)
 
 引数 `thisArg` （既定値は `undefined`）は、`callbackFn` を呼び出す際に `this` 値として使用されます。`callbackFn` から最終的に見える `this` 値は、[通常のルール](/ja/docs/Web/JavaScript/Reference/Operators/this)に従って決定します。もし `callbackFn` が[厳格モードではない](/ja/docs/Web/JavaScript/Reference/Strict_mode#no_this_substitution)のであれば、`this` の値がプリミティブ型であった場合はオブジェクトにラップされ、`undefined`/`null` の場合は [`globalThis`](/ja/docs/Web/JavaScript/Reference/Global_Objects/globalThis) に置き換わります。`callbackFn` が[アロー関数](/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)で定義されていた場合は、`thisArg` 引数は関係ありません。アロー関数には自分自身の `this` の{{Glossary("binding", "バインディング")}}がないためです。
 
-すべての反復可能オブジェクトは[コピー可能](#コピーメソッドと変更メソッド)で[汎用性](#汎用的な配列メソッド)がありますが、[空のスロット](#配列メソッドと空のスロット)では異なる形で動作します。
+`callbackFn` に渡される引数 `array` は、反復処理中に別の要素を読み込みたい場合に最も便利です。なぜなら、現在の配列を参照する既存の変数が常に存在するとは限らないからです。通常、反復処理中に配列を変更すべきではありません（[反復処理内での初期配列の変更](#反復処理内での初期配列の変更)を参照）。しかし、この引数を使用して変更することもできます。配列引数は、`map()`、`filter()`、`flatMap()` などのメソッドの場合、構築中の配列ではありません。構築中の配列にコールバック関数からアクセスする方法はありません。
 
-以下のメソッドは反復可能です。
+すべての反復可能オブジェクトは[コピー可能](#コピーメソッドと変更メソッド)で[汎用性](#汎用的な配列メソッド)がありますが、[空のスロット](#配列メソッドと空のスロット)では異なる形で動作します。
 
-- {{jsxref("Array/every", "every()")}}
-- {{jsxref("Array/filter", "filter()")}}
-- {{jsxref("Array/find", "find()")}}
-- {{jsxref("Array/findIndex", "findIndex()")}}
-- {{jsxref("Array/findLast", "findLast()")}}
-- {{jsxref("Array/findLastIndex", "findLastIndex()")}}
-- {{jsxref("Array/flatMap", "flatMap()")}}
-- {{jsxref("Array/forEach", "forEach()")}}
-- {{jsxref("Array/map", "map()")}}
-- {{jsxref("Array/some", "some()")}}
+反復処理可能なメソッドは、{{jsxref("Array/every", "every()")}}, {{jsxref("Array/filter", "filter()")}}, {{jsxref("Array/find", "find()")}}, {{jsxref("Array/findIndex", "findIndex()")}}, {{jsxref("Array/findLast", "findLast()")}}, {{jsxref("Array/findLastIndex", "findLastIndex()")}}, {{jsxref("Array/flatMap", "flatMap()")}}, {{jsxref("Array/forEach", "forEach()")}}, {{jsxref("Array/map", "map()")}}, {{jsxref("Array/some", "some()")}} です。
 
 具体的には、{{jsxref("Array/every", "every()")}}, {{jsxref("Array/find", "find()")}}, {{jsxref("Array/findIndex", "findIndex()")}}, {{jsxref("Array/findLast", "findLast()")}}, {{jsxref("Array/findLastIndex", "findLastIndex()")}}, {{jsxref("Array/some", "some()")}} は常にすべての要素に対して `callbackFn` を呼び出すわけではなく、返値が決定するとすぐに反復処理を停止します。
 
-他にもコールバック関数を受け取り、配列のそれぞれの要素に対して最大1回実行するメソッドが2種類ありますが、一般的な反復処理メソッドとは少し異なる形式を持っています（`thisArg` を受け入れないなど）。
+{{jsxref("Array/reduce", "reduce()")}} および {{jsxref("Array/reduceRight", "reduceRight()")}} メソッドもコールバック関数を取り、配列のそれぞれの要素に対して最大 1 回実行しますが、一般的な反復処理メソッドとは少し異なる形式を持っています（`thisArg` を受け入れないなど）。
+
+{{jsxref("Array/sort", "sort()")}} メソッドもコールバック関数を取りますが、反復処理するメソッドではありません。配列の配置を変更し、`thisArg` を受け入れず、1 つの要素に対して複数回コールバックを呼び出すことがあります。
 
-- {{jsxref("Array/reduce", "reduce()")}}
-- {{jsxref("Array/reduceRight", "reduceRight()")}}
+反復処理メソッドは、以下のように配列を反復処理します（技術的な詳細は省略します）。
 
-{{jsxref("Array/sort", "sort()")}} メソッドもコールバック関数を取りますが、反復処理するメソッドではありません。配列の配置を変更し、`thisArg` を受け入れず、1 つのインデックスに対して複数回コールバックを呼び出すことがあります。
+```js
+function method(callbackFn, thisArg) {
+  const length = this.length;
+  for (let i = 0; i < length; i++) {
+    if (i in this) {
+      const result = callbackFn.call(thisArg, this[i], i, this);
+      // 結果に対して何かをする。早く戻ることもある
+    }
+  }
+}
+```
+
+以下の点に注意してください。
+
+1. すべてのメソッドが `i in this` の検査を行うわけではありません。 `find`、`findIndex`、`findLast`、`findLastIndex` の核メソッドは行いませんが、他のメソッドは行います。
+2. `length` は、ループ開始前に記憶されます。これは、反復処理中の挿入や削除を処理する方法に影響します（[反復処理内での初期配列の変更](#反復処理内での初期配列の変更)を参照）。
+3. このメソッドは配列の要素を記憶しないため、反復処理中に要素が変更された場合、新しい値が取得される可能性があります。
+4. 上記のコードは、添字の昇順で配列を反復処理します。添字の降順で反復処理（`for (let i = length - 1; i >= 0; i--)`）するメソッドは `reduceRight()`、`findLast()`、`findLastIndex()` です。
+5. `reduce` と `reduceRight` は、シグネチャが若干異なり、常に最初の要素または最後の要素から始めるわけではありません。
 
 ### 汎用的な配列メソッド
 
-配列メソッドは常に汎用的であり、配列オブジェクトの内部データにはアクセスしません。配列の要素には `length` プロパティを通してアクセスし、インデックスの要素にはアクセスするだけです。つまり、配列風のオブジェクトに対しても呼び出すことができます。
+配列メソッドは常に汎用的であり、配列オブジェクトの内部データにはアクセスしません。配列の要素には `length` プロパティを通してアクセスし、その位置の要素をアクセスするだけです。つまり、配列風オブジェクトに対しても呼び出すことができます。
 
 ```js
 const arrayLike = {
@@ -247,7 +245,7 @@ console.log(a.length); // 0
 
 #### 配列風オブジェクト
 
-[配列風オブジェクト](/ja/docs/Web/JavaScript/Guide/Indexed_collections#配列風オブジェクトの扱い)とは、上記の `length` の処理で例外が発生しないオブジェクトのことです。具体的に言うと、このようなオブジェクトには実際に `length` プロパティがあり、`0` から `length - 1` までのインデックスつき要素を持つことが期待されます（すべてのインデックスが存在するわけではない場合は、機能的に[疎配列](#配列メソッドと空のスロット)と同等となります）。配列メソッドが配列風オブジェクトを処理するとき、 0 より小さいか `length - 1` より大きい整数インデックスは無視されます。
+[配列風オブジェクト](/ja/docs/Web/JavaScript/Guide/Indexed_collections#配列風オブジェクトの扱い)とは、上記の `length` の処理で例外が発生しないオブジェクトのことです。具体的に言うと、このようなオブジェクトには実際に `length` プロパティがあり、`0` から `length - 1` までの添字つき要素を持つことが期待されます（すべての要素が存在するわけではない場合は、機能的に[疎配列](#配列メソッドと空のスロット)と同等となります）。配列メソッドが配列風オブジェクトを処理するとき、 0 より小さいか `length - 1` より大きい整数の添字は無視されます。
 
 多くの DOM オブジェクトは、例えば [`NodeList`](/ja/docs/Web/API/NodeList) や [`HTMLCollection`](/ja/docs/Web/API/HTMLCollection) は配列風です。また、[`arguments`](/ja/docs/Web/JavaScript/Reference/Functions/arguments) オブジェクトも配列風です。自分自身に配列メソッドがなくても、その配列メソッドを呼び出すことができます。
 
@@ -266,7 +264,7 @@ f("a", "b"); // 'a+b'
 
 ## 静的プロパティ
 
-- {{jsxref("Array/@@species", "Array[@@species]")}}
+- [`Array[Symbol.species]`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/Symbol.species)
   - : `Array` コンストラクターを返します。
 
 ## 静的メソッド
@@ -286,7 +284,7 @@ f("a", "b"); // 'a+b'
 
 - {{jsxref("Object/constructor", "Array.prototype.constructor")}}
   - : このインスタンスオブジェクトを作成したコンストラクター関数です。 `Array` インスタンスの場合、初期値は {{jsxref("Array/Array", "Array")}} コンストラクターです。
-- {{jsxref("Array/@@unscopables", "Array.prototype[@@unscopables]")}}
+- [`Array.prototype[Symbol.unscopables]`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/Symbol.unscopables)
   - : ES2015 版以前の ECMAScript 標準に含まれておらず、 [`with`](/ja/docs/Web/JavaScript/Reference/Statements/with) による文のバインドの目的には無視されるプロパティ名を含みます。
 
 これらのプロパティはそれぞれの `Array` インスタンスが自分自身で持つプロパティです。
@@ -313,11 +311,11 @@ f("a", "b"); // 'a+b'
 - {{jsxref("Array.prototype.find()")}}
   - : 指定されたたテスト関数を満たす、配列の最初の要素の値を返します。適切な要素が見つからなかった場合は `undefined` を返します。
 - {{jsxref("Array.prototype.findIndex()")}}
-  - : 指定されたテスト関数を満たす、配列の最初の要素のインデックスを返します。適切な要素が見つからなかった場合は `-1` を返します。
+  - : 指定されたテスト関数を満たす、配列の最初の要素の添字を返します。適切な要素が見つからなかった場合は `-1` を返します。
 - {{jsxref("Array.prototype.findLast()")}}
   - : 指定されたたテスト関数を満たす、配列の最後の要素の値を返します。適切な要素が見つからなかった場合は `undefined` を返します。
 - {{jsxref("Array.prototype.findLastIndex()")}}
-  - : 指定されたテスト関数を満たす、配列の最後の要素のインデックスを返します。適切な要素が見つからなかった場合は `-1` を返します。
+  - : 指定されたテスト関数を満たす、配列の最後の要素の添字を返します。適切な要素が見つからなかった場合は `-1` を返します。
 - {{jsxref("Array.prototype.flat()")}}
   - : すべての部分配列の要素を指定された深さまで再帰的に連結した新しい配列を返します。
 - {{jsxref("Array.prototype.flatMap()")}}
@@ -327,13 +325,13 @@ f("a", "b"); // 'a+b'
 - {{jsxref("Array.prototype.includes()")}}
   - : この配列が特定の要素を含むかどうか判定し、その結果を `true` または `false` で返します。
 - {{jsxref("Array.prototype.indexOf()")}}
-  - : 指定された値と等しい値を持つ最初の（インデックスの一番小さい）要素のインデックスを返します。見つからない場合、`-1` を返します。
+  - : 指定された値と等しい値を持つ最初の（添字の一番小さい）要素の添字を返します。見つからない場合、`-1` を返します。
 - {{jsxref("Array.prototype.join()")}}
   - : 配列のすべての要素を結合した文字列を返します。
 - {{jsxref("Array.prototype.keys()")}}
-  - : 新しい[_配列イテレーター_](/ja/docs/Web/JavaScript/Guide/Iterators_and_generators)を返します。このオブジェクトは配列中の各インデックスのキーを保持します。
+  - : 新しい[_配列イテレーター_](/ja/docs/Web/JavaScript/Guide/Iterators_and_generators)を返します。このオブジェクトは配列中の各添字のキーを保持します。
 - {{jsxref("Array.prototype.lastIndexOf()")}}
-  - : 指定された値と等しい値を持つ最後の (インデックスの一番大きい) 要素のインデックスを返します。見つからない場合、`-1` を返します。
+  - : 指定された値と等しい値を持つ最後の (添字の一番大きい) 要素の添字を返します。見つからない場合、`-1` を返します。
 - {{jsxref("Array.prototype.map()")}}
   - : 配列内のすべての要素に対して与えられた関数を呼び出し、その結果を格納した新しい配列を生成します。
 - {{jsxref("Array.prototype.pop()")}}
@@ -369,10 +367,10 @@ f("a", "b"); // 'a+b'
 - {{jsxref("Array.prototype.unshift()")}}
   - : 配列の最初に 1 個以上の要素を追加し、配列の変更後の `length` を返します。
 - {{jsxref("Array.prototype.values()")}}
-  - : 新しい[_配列イテレーター_](/ja/docs/Web/JavaScript/Guide/Iterators_and_generators)オブジェクトを返します。このオブジェクトは、配列中の各インデックスの値を保持します。
+  - : 新しい[_配列イテレーター_](/ja/docs/Web/JavaScript/Guide/Iterators_and_generators)オブジェクトを返します。このオブジェクトは、配列中の各添字の値を保持します。
 - {{jsxref("Array.prototype.with()")}}
   - : 指定された位置の要素を指定された値で置き換えた新しい配列を、元の配列に変更を加えることなく返します。
-- [`Array.prototype[@@iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator)
+- [`Array.prototype[Symbol.iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/Symbol.iterator)
   - : 既定では [`values()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/values) 関数を返します。
 
 ## 例
@@ -414,31 +412,31 @@ console.log(fruitsString);
 // "りんご, バナナ"
 ```
 
-### インデックスによる配列の要素へのアクセス
+### 添字による配列の要素へのアクセス
 
-この例では配列 `fruits` 内の項目に、配列内の位置を示すインデックスを指定することでアクセスする方法を示しています。
+この例では配列 `fruits` 内の項目に、配列内の位置を示す添字を指定することでアクセスする方法を示しています。
 
 ```js
 const fruits = ["りんご", "バナナ"];
 
-// 配列の最初の要素のインデックスは必ず 0 です。
+// 配列の最初の要素の添字は必ず 0 です。
 fruits[0]; // りんご
 
-// 配列の 2 番目の要素のインデックスは必ず 1 です。
+// 配列の 2 番目の要素の添字は必ず 1 です。
 fruits[1]; // バナナ
 
-// 配列の末尾の要素のインデックスは、常に配列の長さよりも
+// 配列の末尾の要素の添字は、常に配列の長さよりも
 // 1 だけ小さいものです。
 fruits[fruits.length - 1]; // バナナ
 
-// 配列の長さよりも大きなインデックスを使用すると、
+// 配列の長さよりも大きな添字を使用すると、
 // 'undefined' が返されます。
 fruits[99]; // undefined
 ```
 
-### 配列内の項目のインデックスを検索
+### 配列内のアイテムの添字を検索
 
-この例では [`indexOf()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf) メソッドを使用して、文字列 `"バナナ"` の位置（インデックス）を配列 `fruits` の中から探します。
+この例では [`indexOf()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf) メソッドを使用して、文字列 `"バナナ"` の位置（添字）を配列 `fruits` の中から探します。
 
 ```js
 const fruits = ["りんご", "バナナ"];
@@ -448,7 +446,7 @@ console.log(fruits.indexOf("バナナ"));
 
 ### 配列内に特定の項目があるかどうかを検査
 
-この例では、配列 `fruits` が `"バナナ"` と `"さくらんぼ"` を含んでいるかどうかを確認する 2 つの方法を示しています。最初は [`includes()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) メソッドで、次に [`indexOf()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf) メソッドで、インデックスの値が `-1` でないことを確認します。
+この例では、配列 `fruits` が `"バナナ"` と `"さくらんぼ"` を含んでいるかどうかを確認する 2 つの方法を示しています。最初は [`includes()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes) メソッドで、次に [`indexOf()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf) メソッドで、添字の値が `-1` でないことを確認します。
 
 ```js
 const fruits = ["りんご", "バナナ"];
@@ -532,7 +530,7 @@ console.log(removedItem);
 
 > **メモ:** `shift()` は最初の項目を配列から取り除く場合にのみ使用できます。複数の項目を配列の先頭から取り除く場合は、次の例を参照してください。
 
-### 配列の先頭から複数の項目を取り除く
+### 配列の先頭から複数のアイテムを取り除く
 
 この例では [`splice()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) メソッドを使用して、配列 `fruits` から先頭の 3 項目を取り除きます。
 
@@ -547,9 +545,9 @@ console.log(removedItems);
 // ["りんご", "いちご", "さくらんぼ"]
 ```
 
-### 配列に最初の項目を追加
+### 配列に最初のアイテムを追加
 
-この例では [`unshift()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift) メソッドを使用して、配列 `fruits` のインデックス `0` に新しい項目を追加します。これを配列の新しい先頭の項目にします。
+この例では [`unshift()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift) メソッドを使用して、配列 `fruits` の要素 `0` に新しい項目を追加します。これを配列の新しい先頭の項目にします。
 
 ```js
 const fruits = ["バナナ", "マンゴー"];
@@ -560,9 +558,9 @@ console.log(newLength);
 // 3
 ```
 
-### インデックスを指定して単一の項目を取り除く
+### 添字を指定して単一の項目を取り除く
 
-この例では [`splice()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) メソッドを使用して、文字列 `"バナナ"` を配列 `fruits` から取り除きます。 `"バナナ"` の位置のインデックスを指定します。
+この例では [`splice()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) メソッドを使用して、文字列 `"バナナ"` を配列 `fruits` から取り除きます。 `"バナナ"` の位置の添字を指定します。
 
 ```js
 const fruits = ["いちご", "バナナ", "マンゴー"];
@@ -575,9 +573,9 @@ console.log(removedItems);
 // ["バナナ"]
 ```
 
-### インデックスを指定して複数の項目を取り除く
+### 添字を指定して複数の項目を取り除く
 
-この例では [`splice()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) メソッドを使用して、文字列 `"バナナ"` および `"いちご"` を配列 `fruits` から取り除きます。 `"バナナ"` の位置のインデックスと共に、取り除く項目の総数を指定します。
+この例では [`splice()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) メソッドを使用して、文字列 `"バナナ"` および `"いちご"` を配列 `fruits` から取り除きます。 `"バナナ"` の位置の添字と共に、取り除く項目の総数を指定します。
 
 ```js
 const fruits = ["りんご", "バナナ", "いちご", "マンゴー"];
@@ -628,7 +626,7 @@ for (const fruit of fruits) {
 
 ### 配列のそれぞれの要素に対して関数を呼び出す
 
-この例では [`forEach()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) メソッドを使用して、配列 `fruits` のそれぞれの要素に対して関数を呼び出しています。この関数ではそれぞれの項目を、その項目のインデックスの番号と共にコンソールへログ出力します。
+この例では [`forEach()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) メソッドを使用して、配列 `fruits` のそれぞれの要素に対して関数を呼び出しています。この関数ではそれぞれの項目を、その項目の添字の番号と共にコンソールへログ出力します。
 
 ```js
 const fruits = ["りんご", "マンゴー", "さくらんぼ"];
@@ -686,7 +684,7 @@ const fruitsCopy3 = fruits.slice();
 const fruitsDeepCopy = JSON.parse(JSON.stringify(fruits));
 ```
 
-また、 [`structuredClone()`](/ja/docs/Web/API/structuredClone) メソッドを使用してディープコピーを作成することもできます。これは、ソース内の[移譲可能オブジェクト](/ja/docs/Web/API/Web_Workers_API/Transferable_objects)を、コピーするのではなく、新しいコピーに移譲できる利点があります。
+また、 [`structuredClone()`](/ja/docs/Web/API/Window/structuredClone) メソッドを使用してディープコピーを作成することもできます。これは、ソース内の[移譲可能オブジェクト](/ja/docs/Web/API/Web_Workers_API/Transferable_objects)を、コピーするのではなく、新しいコピーに移譲できる利点があります。
 
 最後に、既存の配列を新しい変数に代入しても、配列やその要素のコピーは作成されないことを理解することが重要です。つまり、元の配列の名前と新しい変数の名前は、まったく同じオブジェクトの名前に過ぎません（したがって、常に[厳密等価](/ja/docs/Web/JavaScript/Equality_comparisons_and_sameness#_による厳密な等価性)であると評価されます）。したがって、元の配列の値や新しい変数の値に何らかの変更を加えると、もう片方も変更されます。
 
@@ -762,7 +760,7 @@ console.table(values);
 結果は次のようになります。
 
 ```plain
-// 最初の列はインデックスです
+// 最初の列は添字です
 0  1    0
 1  2    2
 2  4    8
@@ -796,6 +794,144 @@ console.log(execResult); // [ "dbBd", "bB", "d" ]
 
 照合結果についての詳しい情報は、 {{jsxref("RegExp.prototype.exec()")}} および {{jsxref("String.prototype.match()")}} のページを参照してください。
 
+### 反復処理内での初期配列の変更
+
+[反復処理メソッド](#反復処理メソッド)は、呼び出された配列を変更しませんが、`callbackFn` として提供される関数は変更することができます。覚えておくべき重要な原則は、0 から `arrayLength - 1` までの要素のみが参照されるということです。ここで、`arrayLength` は配列メソッドが最初に呼び出された時点での配列の長さですが、コールバックに渡される要素は、その要素が参照された時点での値です。したがって、
+
+- `callbackFn` は、反復処理メソッドの呼び出しが開始された際に、配列の初期長を超えて追加された要素を処理しません。
+- 既に処理した要素を変更しても、それらの位置で `callbackFn` が再度呼び出されることはありません。
+- 既存の、まだ処理されていない配列要素が `callbackFn` によって変更された場合、`callbackFn` に渡される値は、その要素が処理された時点での値となります。 除去された要素は処理されません。
+
+> [!WARNING]
+> 上記のような同時進行の変更は、理解しにくいコードにつながる可能性が高く、一般的に避けるべきです（特別な場合を除く）。
+
+次の例では、`forEach` メソッドを例として使用していますが、他にも昇順で要素を巡回するメソッドであれば、同じように動作します。 最初のヘルパー関数を定義します。
+
+```js
+function testSideEffect(effect) {
+  const arr = ["e1", "e2", "e3", "e4"];
+  arr.forEach((elem, index, arr) => {
+    console.log(`配列: [${arr.join(", ")}], 添字: ${index}, 要素: ${elem}`);
+    effect(arr, index);
+  });
+  console.log(`最終的な配列: [${arr.join(", ")}]`);
+}
+```
+
+まだ処理されていない要素を変更した場合、要素に到達したときに見えます。
+
+```js
+testSideEffect((arr, index) => {
+  if (index + 1 < arr.length) arr[index + 1] += "*";
+});
+// 配列: [e1, e2, e3, e4], 添字: 0, 要素: e1
+// 配列: [e1, e2*, e3, e4], 添字: 1, 要素: e2*
+// 配列: [e1, e2*, e3*, e4], 添字: 2, 要素: e3*
+// 配列: [e1, e2*, e3*, e4*], 添字: 3, 要素: e4*
+// 最終的な配列: [e1, e2*, e3*, e4*]
+```
+
+既に処理した位置の要素を変更しても、反復処理する挙動は変わりませんが、配列はその後で異なったものになります。
+
+```js
+testSideEffect((arr, index) => {
+  if (index > 0) arr[index - 1] += "*";
+});
+// 配列: [e1, e2, e3, e4], 添字: 0, 要素: e1
+// 配列: [e1, e2, e3, e4], 添字: 1, 要素: e2
+// 配列: [e1*, e2, e3, e4], 添字: 2, 要素: e3
+// 配列: [e1*, e2*, e3, e4], 添字: 3, 要素: e4
+// 最終的な配列: [e1*, e2*, e3*, e4]
+```
+
+未処理の要素に、初期配列の長さよりも小さい要素を _n_ 個挿入すると、それらの要素が処理済みになります。これで初期配列の長さを超える添字を持つようになった元の配列の最後の _n_ 個の要素は、処理されません。
+
+```js
+testSideEffect((arr, index) => {
+  if (index === 1) arr.splice(2, 0, "new");
+});
+// 配列: [e1, e2, e3, e4], 添字: 0, 要素: e1
+// 配列: [e1, e2, e3, e4], 添字: 1, 要素: e2
+// 配列: [e1, e2, new, e3, e4], 添字: 2, 要素: new
+// 配列: [e1, e2, new, e3, e4], 添字: 3, 要素: e3
+// 最終的な配列: [e1, e2, new, e3, e4]
+// e4 is not visited because it now has index 4
+```
+
+配列の最初の要素数よりも大きな添字を持つ要素を _n_ 個挿入しても、それらの要素が処理されることはありません。
+
+```js
+testSideEffect((arr) => arr.push("new"));
+// 配列: [e1, e2, e3, e4], 添字: 0, 要素: e1
+// 配列: [e1, e2, e3, e4, new], 添字: 1, 要素: e2
+// 配列: [e1, e2, e3, e4, new, new], 添字: 2, 要素: e3
+// 配列: [e1, e2, e3, e4, new, new, new], 添字: 3, 要素: e4
+// 最終的な配列: [e1, e2, e3, e4, new, new, new, new]
+```
+
+既に処理した要素に _n_ 個の要素を挿入しても、それらが処理されることはありませんが、残りの要素が _n_ 個分後ろにずれるため、現在の要素と、その前の _n - 1_ 個の要素が再び処理されることになります。
+
+```js
+testSideEffect((arr, index) => arr.splice(index, 0, "new"));
+// 配列: [e1, e2, e3, e4], 添字: 0, 要素: e1
+// 配列: [new, e1, e2, e3, e4], 添字: 1, 要素: e1
+// 配列: [new, new, e1, e2, e3, e4], 添字: 2, 要素: e1
+// 配列: [new, new, new, e1, e2, e3, e4], 添字: 3, 要素: e1
+// 最終的な配列: [new, new, new, new, e1, e2, e3, e4]
+// e1は、常にシフトバックされるため、処理され続けます。
+```
+
+未処理の要素から _n_ 個の要素を削除すると、それらはもはや処理されなくなります。配列が縮小したため、最後の _n_ 回の反復処理では、範囲外の添字が処理されます。メソッドが存在しない要素を無視する場合（[配列メソッドと空のスロット](#配列メソッドと空のスロット)を参照）、最後の _n_ 回の反復処理はスキップされます。そうでなければ、それらは `undefined` となります。
+
+```js
+testSideEffect((arr, index) => {
+  if (index === 1) arr.splice(2, 1);
+});
+// 配列: [e1, e2, e3, e4], 添字: 0, 要素: e1
+// 配列: [e1, e2, e3, e4], 添字: 1, 要素: e2
+// 配列: [e1, e2, e4], 添字: 2, 要素: e4
+// 最終的な配列: [e1, e2, e4]
+// 範囲外なので要素 3 は処理しません。
+
+// Compare this with find(), which treats nonexistent indexes as undefined:
+const arr2 = ["e1", "e2", "e3", "e4"];
+arr2.find((elem, index, arr) => {
+  console.log(`配列: [${arr.join(", ")}], 添字: ${index}, 要素: ${elem}`);
+  if (index === 1) arr.splice(2, 1);
+  return false;
+});
+// 配列: [e1, e2, e3, e4], 添字: 0, 要素: e1
+// 配列: [e1, e2, e3, e4], 添字: 1, 要素: e2
+// 配列: [e1, e2, e4], 添字: 2, 要素: e4
+// 配列: [e1, e2, e4], 添字: 3, 要素: undefined
+```
+
+既に処理した要素から _n_ 個の要素を削除しても、それらが削除される前に処理されていたという事実は変わりません。配列が縮小されたため、現在の要素の次の _n_ 個の要素はスキップされます。このメソッドが存在しない添字を無視する場合は、最後の _n_ 回の反復処理がスキップされます。そうでない場合は、`undefined` が返されます。
+
+```js
+testSideEffect((arr, index) => arr.splice(index, 1));
+// 配列: [e1, e2, e3, e4], 添字: 0, 要素: e1
+// e2 は処理されない。e2 の要素は 0 となり、既に処理されているため
+// 配列: [e2, e3, e4], 添字: 1, 要素: e3
+// e4 は処理されない。e4 の要素は 1 となり、既に処理されているため
+// 最終的な配列: [e2, e4]
+// 添字 2 は範囲外なので、アクセスされない
+
+// find() は、存在しない要素を undefined として扱います。これと比較してください。
+const arr2 = ["e1", "e2", "e3", "e4"];
+arr2.find((elem, index, arr) => {
+  console.log(`配列: [${arr.join(", ")}], 添字: ${index}, 要素: ${elem}`);
+  arr.splice(index, 1);
+  return false;
+});
+// 配列: [e1, e2, e3, e4], 添字: 0, 要素: e1
+// 配列: [e2, e3, e4], 添字: 1, 要素: e3
+// 配列: [e2, e4], 添字: 2, 要素: undefined
+// 配列: [e2, e4], 添字: 3, 要素: undefined
+```
+
+添字の降順で反復処理するメソッドでは、挿入により要素がスキップされ、削除により要素が複数回アクセスされます。 上記のコードを自分で調整して、効果を確認してください。
+
 ## 仕様書
 
 {{Specifications}}
diff --git a/files/ja/web/javascript/reference/global_objects/array/keys/index.md b/files/ja/web/javascript/reference/global_objects/array/keys/index.md
index 240bc760bee8ec..77f274cf9c6c6e 100644
--- a/files/ja/web/javascript/reference/global_objects/array/keys/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/keys/index.md
@@ -2,7 +2,7 @@
 title: Array.prototype.keys()
 slug: Web/JavaScript/Reference/Global_Objects/Array/keys
 l10n:
-  sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de
+  sourceCommit: 6fbdb78c1362fae31fbd545f4b2d9c51987a6bca
 ---
 
 {{JSRef}}
@@ -76,6 +76,6 @@ for (const entry of Array.prototype.keys.call(arrayLike)) {
 - {{jsxref("Array")}}
 - {{jsxref("Array.prototype.entries()")}}
 - {{jsxref("Array.prototype.values()")}}
-- [`Array.prototype[@@iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator)
+- [`Array.prototype[Symbol.iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/Symbol.iterator)
 - {{jsxref("TypedArray.prototype.keys()")}}
 - [Iteration protocols](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)
diff --git a/files/ja/web/javascript/reference/global_objects/array/lastindexof/index.md b/files/ja/web/javascript/reference/global_objects/array/lastindexof/index.md
index be096cc36cf551..0b04b64e7de465 100644
--- a/files/ja/web/javascript/reference/global_objects/array/lastindexof/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/lastindexof/index.md
@@ -2,7 +2,7 @@
 title: Array.prototype.lastIndexOf()
 slug: Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf
 l10n:
-  sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a
+  sourceCommit: 85d7482697cc2bf407c58e809a2a754180d6714c
 ---
 
 {{JSRef}}
@@ -24,7 +24,7 @@ lastIndexOf(searchElement, fromIndex)
   - : 検索する配列要素です。
 - `fromIndex` {{optional_inline}}
   - : 検索し始める位置のゼロから始まるインデックスで、[整数に変換されます](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)。
-    - インデックスが負の場合、配列の末尾からさかのぼって数えます。 `fromIndex < 0` の場合、 `fromIndex + array.length` が使用されます。
+    - インデックスが負の場合、配列の末尾からさかのぼって数えます。 `-array.length <= fromIndex < 0` の場合、 `fromIndex + array.length` が使用されます。
     - `fromIndex < -array.length` の場合、配列は検索が行われず、 `-1` が返されます。概念的には、配列の先頭より前の存在しない位置から始めて、そこから逆方向に進むと考えることができます。途中には配列要素はないので、 `searchElement` は決して見つかりません。
     - `fromIndex >= array.length` または `fromIndex` が省略された場合、 `array.length - 1` が使用され、配列全体が検索されます。概念的には、配列の末尾の先にある存在しない位置から始めて、そこから後方に進むと考えることができます。最終的に配列の本当の末尾に到達し、この点から実在する配列要素を逆探索し始めます。
 
@@ -82,7 +82,7 @@ console.log(indices);
 ```
 
 ここで `idx == 0` の場合を分けて扱わないといけないことに注意してください。
-なぜなら、もし検索する値が配列の最初の要素にあると、その値は `fromIndex` パラメータにかかわらずいつもヒットしてしまうのです。
+なぜなら、もし検索する値が配列の最初の要素にあると、その値は `fromIndex` パラメーターにかかわらずいつもヒットしてしまうのです。
 これは {{jsxref("Array/indexOf", "indexOf()")}} メソッドとは異なります。
 
 ### 疎配列に対する lastIndexOf() の使用
diff --git a/files/ja/web/javascript/reference/global_objects/array/of/index.md b/files/ja/web/javascript/reference/global_objects/array/of/index.md
index ca32caf1644953..0b4cb3ac939174 100644
--- a/files/ja/web/javascript/reference/global_objects/array/of/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/of/index.md
@@ -2,7 +2,7 @@
 title: Array.of()
 slug: Web/JavaScript/Reference/Global_Objects/Array/of
 l10n:
-  sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3
+  sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de
 ---
 
 {{JSRef}}
@@ -41,7 +41,7 @@ Array.of(1, 2, 3); // [1, 2, 3]
 Array(1, 2, 3); // [1, 2, 3]
 ```
 
-`Array.of()` メソッドは汎用ファクトリーメソッドです。例えば、 `Array` のサブクラスが `of()` メソッドを継承した場合、継承した `of()` メソッドは `Array` インスタンスではなく、サブクラスの新しいインスタンスを返します。実際には、 `this` 値には新しい配列の長さを表す単一の引数を受け入れる任意のコンストラクタ関数を指定することができ、コンストラクタは `of()` に渡された引数の数だけ呼び出されます。最終的な `length` は、すべての要素が代入されたときに再度設定されます。もし `this` の値がコンストラクター関数でない場合、代わりにプレーンな `Array` コンストラクターが使用されます。
+`Array.of()` メソッドは汎用ファクトリーメソッドです。例えば、 `Array` のサブクラスが `of()` メソッドを継承した場合、継承した `of()` メソッドは `Array` インスタンスではなく、サブクラスの新しいインスタンスを返します。実際には、 `this` 値には新しい配列の長さを表す単一の引数を受け入れる任意のコンストラクター関数を指定することができ、コンストラクターは `of()` に渡された引数の数だけ呼び出されます。最終的な `length` は、すべての要素が代入されたときに再度設定されます。もし `this` の値がコンストラクター関数でない場合、代わりにプレーンな `Array` コンストラクターが使用されます。
 
 ## 例
 
diff --git a/files/ja/web/javascript/reference/global_objects/array/splice/index.md b/files/ja/web/javascript/reference/global_objects/array/splice/index.md
index 3f06118401d6a4..5199ad7243451f 100644
--- a/files/ja/web/javascript/reference/global_objects/array/splice/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/splice/index.md
@@ -2,12 +2,12 @@
 title: Array.prototype.splice()
 slug: Web/JavaScript/Reference/Global_Objects/Array/splice
 l10n:
-  sourceCommit: fb85334ffa4a2c88d209b1074909bee0e0abd57a
+  sourceCommit: 6fbdb78c1362fae31fbd545f4b2d9c51987a6bca
 ---
 
 {{JSRef}}
 
-**`splice()`** は {{jsxref("Array")}} インスタンスのメソッドは、[その場 (in-place)](https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0) で既存の要素を取り除いたり、置き換えたり、新しい要素を追加したりすることで、配列の内容を変更します。
+**`splice()`** は {{jsxref("Array")}} インスタンスのメソッドで、[その場 (in-place)](https://ja.wikipedia.org/wiki/In-place%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0) で既存の要素を取り除いたり、置き換えたり、新しい要素を追加したりすることで、配列の内容を変更します。
 
 元の配列を変更せずに、ある部分を除去したり置き換えたりした新しい配列を作成するには {{jsxref("Array/toSpliced", "toSpliced()")}} を使用してください。配列を変更せずに配列の一部にアクセスするには {{jsxref("Array/slice", "slice()")}} を参照してください。
 
@@ -37,7 +37,7 @@ splice(start, deleteCount, item1, item2, /* …, */ itemN)
 
   - : 配列の `start` の位置から取り除く古い要素の個数を示す整数です。
 
-    `deleteCount` が省略された場合、または `deleteCount` の値が `start` で指定した位置より後の要素数以上の場合、 `start` から配列の末尾までのすべての要素が削除されます。ただし、任意の `itemN` 引数を渡したい場合は、 `start` より後の要素をすべて削除するために `deleteCount` として `Infinity` を渡す必要があります。明示的に `undefined` を渡すと、[変換](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#integer_conversion)されて `0` になるからです。
+    `deleteCount` が省略された場合、または `deleteCount` の値が `start` で指定した位置より後の要素数以上の場合、 `start` から配列の末尾までのすべての要素が削除されます。ただし、任意の `itemN` 引数を渡したい場合は、 `start` より後の要素をすべて削除するために `deleteCount` として `Infinity` を渡す必要があります。明示的に `undefined` を渡すと、[変換](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数への変換)されて `0` になるからです。
 
     `deleteCount` が `0` または負の数の場合、どの要素も取り除かれません。この場合、少なくとも 1 つの新しい要素を指定する必要があります（以下参照）。
 
@@ -57,9 +57,9 @@ splice(start, deleteCount, item1, item2, /* …, */ itemN)
 
 ## 解説
 
-`splice()` メソッドは[変更メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#コピーメソッドと変更メソッド)です。 `this` の内容を変更します。指定した挿入する要素数と除去される要素数が異なる場合、配列の `length` も変更されます。同時に、 [`@@species`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/@@species) を使用して、返す新しい配列インスタンスを作成します。
+`splice()` メソッドは[変更メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#コピーメソッドと変更メソッド)です。 `this` の内容を変更します。指定した挿入する要素数と除去される要素数が異なる場合、配列の `length` も変更されます。同時に、 [`[Symbol.species]`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/Symbol.species) を使用して、返す新しい配列インスタンスを作成します。
 
-削除された部分が[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)の場合、 `splice()` が返す配列も疎配列になり、対応するインデックスは空のスロットになります。
+削除された部分が[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)の場合、 `splice()` が返す配列も疎配列になり、対応するインデックスは空のスロットになります。
 
 `splice()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。このメソッドは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。文字列も配列風ですが、文字列は不変なので、このメソッドを適用するのには適していません。
 
@@ -85,6 +85,30 @@ const removed = myFish.splice(2, 0, "drum", "guitar");
 // removed は [] であり、どの要素も取り除かれていない
 ```
 
+### 0（ゼロ）個の要素を 0 の位置から削除して、"angel" を挿入
+
+`splice(0, 0, ...elements)` は、{{jsxref("Array/unshift", "unshift()")}} のように配列の先頭に要素を挿入します。
+
+```js
+const myFish = ["clown", "mandarin", "sturgeon"];
+const removed = myFish.splice(0, 0, "angel");
+
+// myFish は ["angel", "clown", "mandarin", "sturgeon"]
+// アイテムは削除されない
+```
+
+### 0（ゼロ）個の要素を末尾の位置から削除っして、"sturgeon" を挿入
+
+`splice(array.length, 0, ...elements)` は、{{jsxref("Array/push", "push()")}} のように配列の末尾に要素を挿入します。
+
+```js
+const myFish = ["angel", "clown", "mandarin"];
+const removed = myFish.splice(myFish.length, 0, "sturgeon");
+
+// myFish は ["angel", "clown", "mandarin", "sturgeon"]
+// アイテムは削除されない
+```
+
 ### 3 の位置から 1 つ取り除く
 
 ```js
diff --git a/files/ja/web/javascript/reference/global_objects/array/values/index.md b/files/ja/web/javascript/reference/global_objects/array/values/index.md
index 2f6749212ac673..516f1b3ba02a99 100644
--- a/files/ja/web/javascript/reference/global_objects/array/values/index.md
+++ b/files/ja/web/javascript/reference/global_objects/array/values/index.md
@@ -2,12 +2,12 @@
 title: Array.prototype.values()
 slug: Web/JavaScript/Reference/Global_Objects/Array/values
 l10n:
-  sourceCommit: e01fd6206ce2fad2fe09a485bb2d3ceda53a62de
+  sourceCommit: 8421c0cd94fa5aa237c833ac6d24885edbc7d721
 ---
 
 {{JSRef}}
 
-**`values()`** は {{jsxref("Array")}} インスタンスのメソッドで、配列の各インデックスの値を含む新しい「[配列イテレーター](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#イテレータープロトコル)」オブジェクトを返します。
+**`values()`** は {{jsxref("Array")}} インスタンスのメソッドで、配列の各要素の値を含む新しい[配列イテレーター](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)オブジェクトを返します。
 
 {{EmbedInteractiveExample("pages/js/array-values.html")}}
 
@@ -27,13 +27,13 @@ values()
 
 ## 解説
 
-`Array.prototype.values()` は [`Array.prototype[@@iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator) の既定の実装です。
+`Array.prototype.values()` は [`Array.prototype[Symbol.iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/Symbol.iterator) の既定の実装です。
 
 ```js
 Array.prototype.values === Array.prototype[Symbol.iterator]; // true
 ```
 
-[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#sparse_arrays)に使用された場合、 `values()` メソッドは空のスロットを `undefined` の値である可能用に反復処理します。
+[疎配列](/ja/docs/Web/JavaScript/Guide/Indexed_collections#疎配列)に使用された場合、 `values()` メソッドは空のスロットを `undefined` の値であるかのように反復処理します。
 
 `values()` メソッドは[汎用的](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#汎用的な配列メソッド)です。このメソッドは `this` 値に `length` プロパティと整数キーのプロパティがあることだけを期待します。
 
@@ -120,6 +120,16 @@ arr[1] = "n";
 console.log(iterator.next().value); // "n"
 ```
 
+[反復処理メソッド](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array#反復処理メソッド)とは異なり、配列イテレーターオブジェクトは作成時に配列の長さを保存せず、反復処理のたびに一度だけ読み込みます。そのため、反復処理中に配列が大きくなった場合、イテレーターは新しい要素も処理します。これにより、無限ループが発生する可能性があります。
+
+```js
+const arr = [1, 2, 3];
+for (const e of arr) {
+  arr.push(e * 10);
+}
+// RangeError: invalid array length
+```
+
 ### 疎配列の反復処理
 
 `values()` は空のスロットを `undefined` であるかのように処理します。
@@ -167,6 +177,6 @@ for (const entry of Array.prototype.values.call(arrayLike)) {
 - {{jsxref("Array")}}
 - {{jsxref("Array.prototype.entries()")}}
 - {{jsxref("Array.prototype.keys()")}}
-- [`Array.prototype[@@iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator)
+- [`Array.prototype[Symbol.iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/Symbol.iterator)
 - {{jsxref("TypedArray.prototype.values()")}}
 - [反復処理プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)
diff --git a/files/ja/web/javascript/reference/global_objects/date/symbol.toprimitive/index.md b/files/ja/web/javascript/reference/global_objects/date/symbol.toprimitive/index.md
index 9d1be11fe0d35e..f8197e35843f06 100644
--- a/files/ja/web/javascript/reference/global_objects/date/symbol.toprimitive/index.md
+++ b/files/ja/web/javascript/reference/global_objects/date/symbol.toprimitive/index.md
@@ -1,53 +1,56 @@
 ---
-title: Date.prototype[@@toPrimitive]
+title: Date.prototype[Symbol.toPrimitive]()
 slug: Web/JavaScript/Reference/Global_Objects/Date/Symbol.toPrimitive
-original_slug: Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive
 l10n:
-  sourceCommit: 968e6f1f3b6f977a09e116a0ac552459b741eac3
+  sourceCommit: 6fbdb78c1362fae31fbd545f4b2d9c51987a6bca
 ---
 
 {{JSRef}}
 
-**`[@@toPrimitive]()`** メソッドは、 `Date` オブジェクトをプリミティブ値に変換します。
+**`[Symbol.toPrimitive]()`** は {{jsxref("Date")}} インスタンスのメソッドで、この日付を表すプリミティブ値を返します。返される値は、指定されたヒントに応じて文字列または数値となります。
 
 {{EmbedInteractiveExample("pages/js/date-toprimitive.html")}}
 
 ## 構文
 
 ```js-nolint
-Date()[Symbol.toPrimitive](hint)
+date[Symbol.toPrimitive](hint)
 ```
 
+### 引数
+
+- `hint`
+  - : 文字列で、返すプリミティブ値の型を表します。以下の値が有効です。
+    - `"string"` または `"default"`: このメソッドは文字列を返さなければなりません。
+    - `"number"`: このメソッドは数値を返さなければなりません。
+
 ### 返値
 
-与えられた {{jsxref("Date")}} オブジェクトのプリミティブ値です。引数に応じて、このメソッドは文字列と数値のどちらかを返します。
+`hint` が `"string"` または `"default"` の場合、このメソッドは、[`this` 値を文字列に変換](/ja/docs/Web/JavaScript/Reference/Global_Objects/String#文字列変換)して文字列を返します（最初に `toString()` を、次に `valueOf()` を試します）。
 
-## 解説
+`hint` が `"number"` の場合、このメソッドは、[`this` 値を数値に変換](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#数値返還)して数値を返します（最初に `valueOf()` を試み、次に `toString()` を試みます）。
 
-{{jsxref("Date")}} オブジェクトの `[@@toPrimitive]()` メソッドは、プリミティブ値を返します。これは、数値型または文字列型です。
+### 例外
 
-`hint` が `string` または `default` の場合、`[@@toPrimitive]()` は {{jsxref("Object.prototype.toString()", "toString")}} メソッドを呼び出そうとします。 `toString` メソッドが存在しなければ、 {{jsxref("Object.prototype.valueOf()", "valueOf")}} メソッドを呼び出そうとします。 `valueOf` メソッドも存在しなければ、 `[@@toPrimitive]()` は {{jsxref("TypeError")}} を発生させます。
+- {{jsxref("TypeError")}}
+  - : `hint` 引数が有効な値の 3 つのうちのどれでもない場合に発生します。
 
-`hint` が `number` の場合、 `[@@toPrimitive]()` は初めに `valueOf` メソッドを呼び出そうとします。これが失敗した場合は、 `toString` メソッドを呼び出します。
+## 解説
 
-JavaScript は、 `[@@toPrimitive]()` メソッドを呼び出してオブジェクトをプリミティブ値に変換します。 `[@@toPrimitive]()` メソッドを自分で呼び出す必要はほとんどありません。 JavaScript は、プリミティブ値が期待されるオブジェクトに遭遇した時、自動的にこれを呼び出します。
+`[Symbol.toPrimitive]()` メソッドは、[型変換プロトコル](/ja/docs/Web/JavaScript/Data_structures#型変換)の一部です。JavaScript は、オブジェクトをプリミティブ値に変換する際に、常に `[Symbol.toPrimitive]()` メソッドを優先的に呼び出します。`[Symbol.toPrimitive]()` メソッドを自分で呼び出す必要があることはほとんどありません。JavaScript は、プリミティブ値が期待されるオブジェクトに遭遇した際に、自動的にこのメソッドを呼び出します。
+
+{{jsxref("Date")}} オブジェクトの `[Symbol.toPrimitive]()` メソッドは、{{jsxref("Date/valueOf", "this.valueOf()")}} を呼び出して数値を返すか、または {{jsxref("Date/toString", "this.toString()")}} を呼び出して文字列を返すことで、プリミティブ値を返します。これは、既定のプリミティブ変換処理を上書きして、数値ではなく文字列を返すために存在します。既定では、プリミティブ変換は {{jsxref("Date/valueOf", "valueOf()")}} を {{jsxref("Date/toString", "toString()")}} の前に呼び出します。独自の `[Symbol.toPrimitive]()` により、`new Date(0) + 1` は `1`（数値）ではなく `"Thu Jan 01 1970 09:00:00 GMT+0900 (日本標準時)1"`（文字列）を返します。
 
 ## 例
 
-### 日付プリミティブの返却
+### \[Symbol.toPrimitive]() の使用
 
 ```js
-const testDate = new Date(1590757517834);
-// "Date Fri May 29 2020 14:05:17 GMT+0100 (British Summer Time)"
-
-testDate[Symbol.toPrimitive]("string");
-// "Date Fri May 29 2020 14:05:17 GMT+0100 (British Summer Time)" を返す
-
-testDate[Symbol.toPrimitive]("number");
-// "1590757517834" を返す
+const d = new Date(0); // 1970-01-01T00:00:00.000Z
 
-testDate[Symbol.toPrimitive]("default");
-// "Date Fri May 29 2020 14:05:17 GMT+0100 (British Summer Time)" を返す
+d[Symbol.toPrimitive]("string"); // "Thu Jan 01 1970 09:00:00 GMT+0900 (日本標準時)"
+d[Symbol.toPrimitive]("number"); // 0
+d[Symbol.toPrimitive]("default"); // "Thu Jan 01 1970 09:00:00 GMT+0900 (日本標準時)"
 ```
 
 ## 仕様書
diff --git a/files/ja/web/javascript/reference/global_objects/map/entries/index.md b/files/ja/web/javascript/reference/global_objects/map/entries/index.md
index 760354ebbec483..d264bf4d38d236 100644
--- a/files/ja/web/javascript/reference/global_objects/map/entries/index.md
+++ b/files/ja/web/javascript/reference/global_objects/map/entries/index.md
@@ -2,12 +2,12 @@
 title: Map.prototype.entries()
 slug: Web/JavaScript/Reference/Global_Objects/Map/entries
 l10n:
-  sourceCommit: 2eb202adbe3d83292500ed46344d63fbbae410b5
+  sourceCommit: 27180875516cc311342e74b596bfb589b7211e0c
 ---
 
 {{JSRef}}
 
-**`entries()`** メソッドは、挿入順で `Map` オブジェクトのそれぞれの要素に対する `[key, value]` のペアを含む新しい [イテレーター](/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators) オブジェクトを返します。この具体的な例では、このイテレーターオブジェクトは反復可能オブジェクトでもあるので、 for-of ループを使用することができます。プロトコル `[Symbol.iterator]` が使用されると、呼び出されたときにこのイテレーター自身を返す関数を返します。
+**`entries()`** は {{jsxref("Map")}} インスタンスのメソッドで、挿入順でこの `Map` オブジェクトのそれぞれの要素に対する `[key, value]` のペアを含む新しい[イテレーター](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)オブジェクトを返します。
 
 {{EmbedInteractiveExample("pages/js/map-prototype-entries.html")}}
 
@@ -17,9 +17,13 @@ l10n:
 entries()
 ```
 
+### 引数
+
+なし。
+
 ### 返値
 
-新しい {{jsxref("Map")}} のイテレーターオブジェクトです。
+新しい[反復可能なイテレーターオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)です。
 
 ## 例
 
diff --git a/files/ja/web/javascript/reference/global_objects/map/index.md b/files/ja/web/javascript/reference/global_objects/map/index.md
index b0cf10953233ee..757df631d24665 100644
--- a/files/ja/web/javascript/reference/global_objects/map/index.md
+++ b/files/ja/web/javascript/reference/global_objects/map/index.md
@@ -2,12 +2,13 @@
 title: Map
 slug: Web/JavaScript/Reference/Global_Objects/Map
 l10n:
-  sourceCommit: 2b87789e97bfcdf33989e3b1504aec58c2106ba6
+  sourceCommit: 8421c0cd94fa5aa237c833ac6d24885edbc7d721
 ---
 
 {{JSRef}}
 
-**`Map`** オブジェクトはキーと値のペアを保持し、キーが最初に挿入された順序を覚えています。キーや値には任意の値（オブジェクトと{{glossary("Primitive", "プリミティブ値")}}）を使用することができます。
+**`Map`** オブジェクトはキーと値のペアを保持し、キーが最初に挿入された順序を覚えています。
+キーや値には任意の値（オブジェクトと{{Glossary("Primitive", "プリミティブ値")}}）を使用することができます。
 
 {{EmbedInteractiveExample("pages/js/map.html", "taller")}}
 
@@ -91,14 +92,7 @@ l10n:
         </p>
         <p>
           この順序は ECMAScript 2015 で初めて自身のプロパティに対してのみ定義されましたが、 ECMAScript 2020 では継承されたプロパティに対しても同様に順序が定義されています。
-          <a href="https://tc39.es/ecma262/#sec-ordinaryownpropertykeys"
-            >OrdinaryOwnPropertyKeys</a
-          >
-          と
-          <a href="https://tc39.es/ecma262/#sec-enumerate-object-properties"
-            >EnumerateObjectProperties</a
-          >
-          の抽象指定操作を参照してください。しかし、オブジェクトのプロパティが<strong>すべて</strong>反復処理される単一の単一のメカニズムはないことに注意してください。
+          しかし、オブジェクトのプロパティが<strong>すべて</strong>反復処理される単一の単一のメカニズムはないことに注意してください。
           （{{jsxref("Statements/for...in", "for-in")}} は列挙可能な文字列キーのプロパティのみを含む、 {{jsxref("Object.keys")}} は自分自身の列挙可能な文字列キーのプロパティのみを含む、 {{jsxref("Object.getOwnPropertyNames")}} は列挙不可能な場合でも自分自身の文字列キーのプロパティを含む、 {{jsxref("Object.getOwnPropertySymbols")}} は、
           <code>Symbol</code> キーを持つプロパティに対しても同じことを行う、など。）
         </p>
@@ -225,9 +219,9 @@ console.log(contacts.size); // 1
 
 **ブラウザーの `Map` 風オブジェクト** (または「Map 風オブジェクト」) は、多くの点で `Map` のようにふるまう [Web API](/ja/docs/Web/API) のインターフェイスです。
 
-`Map` と同様に、エントリーはオブジェクトに追加されたのと同じ順番で走査できます。
+`Map` と同様に、項目はオブジェクトに追加されたのと同じ順番で走査できます。
 また、`Map` 風オブジェクトと `Map` は同じ名前で同じ挙動のプロパティおよびメソッドを持ちます。
-しかし、`Map` と違い、各エントリーのキーと値には事前に定義された特定の型しか使用できません。
+しかし、`Map` と違い、各項目のキーと値には事前に定義された特定の型しか使用できません。
 
 使用可能な型は、仕様書の IDL 定義で設定されています。
 たとえば、{{domxref("RTCStatsReport")}} はキーには文字列を、値にはオブジェクトを用いなければならない `Map` 風オブジェクトです。
@@ -241,7 +235,7 @@ interface RTCStatsReport {
 
 `Map` 風オブジェクトは読み取り専用のことも、読み書き可能なこともあります。(上の IDL の `readonly` キーワードに注目してください)
 
-- 読み取り専用の `Map` 風オブジェクトは、プロパティ [`size`](#map.prototype.size) と、メソッド [`entries()`](#map.prototype.entries)、[`forEach()`](#map.prototype.foreach)、[`get()`](#map.prototype.get)、[`has()`](#map.prototype.has)、[`keys()`](#map.prototype.keys)、[`values()`](#map.prototype.values)、[`@@iterator`](#map.prototypeiterator) を持ちます。
+- 読み取り専用の `Map` 風オブジェクトは、プロパティ [`size`](#map.prototype.size) と、メソッド [`entries()`](#map.prototype.entries)、[`forEach()`](#map.prototype.foreach)、[`get()`](#map.prototype.get)、[`has()`](#map.prototype.has)、[`keys()`](#map.prototype.keys)、[`values()`](#map.prototype.values)、[`Symbol.iterator`](#map.prototypeiterator) を持ちます。
 - 書き込み可能な `Map` 風オブジェクトは、これに加えてメソッド [`clear()`](#map.prototype.clear)、[`delete()`](#map.prototype.delete)、[`set()`](#map.prototype.set) を持ちます。
 
 これらのメソッドとプロパティは、キーと値の型の制約を除いて、`Map` の対応するエンティティと同様にふるまいます。
@@ -262,38 +256,47 @@ interface RTCStatsReport {
 
 ## 静的プロパティ
 
-- {{jsxref("Map.@@species", "get Map[@@species]")}}
+- [`Map[Symbol.species]`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Map/Symbol.species)
   - : 派生クラスを生成するためのコンストラクター関数です。
 
+## 静的メソッド
+
+- {{jsxref("Map.groupBy()")}}
+  - : 与えられた反復可能な要素を、与えられたコールバック関数から返された値を使用してグループ化します。最後に返される `Map` は、テスト関数から得られた一意の値をキーとして使用しており、各グループの要素の配列を取得するために使用できます。
+
 ## インスタンスプロパティ
 
-- `Map.prototype[@@toStringTag]`
-  - : [`@@toStringTag`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) プロパティの初期値は文字列 `"Map"` です。このプロパティは {{jsxref("Object.prototype.toString()")}} で使用されます。
+これらのプロパティは `Map.prototype` で定義され、すべての `Map` インスタンスで共有されます。
+
+- {{jsxref("Object/constructor", "Map.prototype.constructor")}}
+  - : このインスタンスオブジェクトを作成したコンストラクター関数。`Map` インスタンスの場合、初期値は {{jsxref("Map/Map", "Map")}} コンストラクターです。
 - {{jsxref("Map.prototype.size")}}
   - : `Map` オブジェクトの中のキーと値のペアの数を返します。
+- `Map.prototype[Symbol.toStringTag]`
+  - : [`[Symbol.toStringTag]`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag) プロパティの初期値は文字列 `"Map"` です。このプロパティは {{jsxref("Object.prototype.toString()")}} で使用されます。
 
 ## インスタンスメソッド
 
 - {{jsxref("Map.prototype.clear()")}}
   - : `Map` オブジェクトからすべてのキーと値のペアを削除します。
 - {{jsxref("Map.prototype.delete()")}}
-  - : `Map` オブジェクトに要素が存在し、削除された場合は `true` を返します。要素が存在しなければ `false` を返します。その後では `Map.prototype.has(key)` が `false` を返すようになります。
+  - : `Map` オブジェクトに要素が存在し、削除された場合は `true` を返します。要素が存在しなければ `false` を返します。その後では `Map.has(key)` が `false` を返すようになります。
+- {{jsxref("Map.prototype.entries()")}}
+  - : `Map` オブジェクトの各要素の `[key, value]` からなる 2 つの要素の配列を挿入順で含む新しいイテレーターオブジェクトを返します。
+- {{jsxref("Map.prototype.forEach()")}}
+  - : `Map` オブジェクトに存在するキーと値のペアの数だけ、挿入順に `callbackFn` を呼び出します。 `thisArg` 引数が `forEach` に渡された場合、各コールバックの `this` 値として使用されます。
 - {{jsxref("Map.prototype.get()")}}
   - : `key` で指定されたキーに結び付けられた値を返します。存在しない場合は `undefined` を返します。
 - {{jsxref("Map.prototype.has()")}}
   - : 論理値で、渡されたキーに結び付けられた要素が `Map` オブジェクト内に存在するかどうかを返します。
-- {{jsxref("Map.prototype.set()")}}
-  - : `Map` オブジェクト内の `key` で指定されたキーの値を `value` に設定します。その `Map` オブジェクトを返します。
-- {{jsxref("Map/@@iterator", "Map.prototype[@@iterator]()")}}
-  - : `Map` オブジェクト内の各要素の `[key, value] の配列` が挿入順で含む、新しいイテレーターオブジェクトを返します。
 - {{jsxref("Map.prototype.keys()")}}
   - : `Map` オブジェクト内の各要素のキーが挿入順で含む、新しいイテレーターオブジェクトを返します。
+- {{jsxref("Map.prototype.set()")}}
+  - : `Map` オブジェクト内の渡されたキーを値に設定します。その `Map` オブジェクトを返します。
 - {{jsxref("Map.prototype.values()")}}
   - : `Map` オブジェクト内の各要素の値が挿入順で含む、新しいイテレーターオブジェクトを返します。
-- {{jsxref("Map.prototype.entries()")}}
-  - : `Map` オブジェクト内の要素に対して挿入順にすべての要素の `[key, value]` の配列を含む、新しいイテレーターオブジェクトを返します。
-- {{jsxref("Map.prototype.forEach()")}}
-  - : `callbackFn` を、 `Map` オブジェクトに存在するそれぞれのキーと値のペアに対して 1 回ずつ、挿入順に呼び出します。 `thisArg` 引数が `forEach` に与えられた場合は、それぞれのコールバックでこれを `this` の値として使用します。
+- [`Map.prototype[Symbol.iterator]()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Map/Symbol.iterator)
+  - : `Map` オブジェクト内の各要素の `[key, value] の配列` が挿入順で含む、新しいイテレーターオブジェクトを返します。
 
 ## 例
 
@@ -302,14 +305,14 @@ interface RTCStatsReport {
 ```js
 const myMap = new Map();
 
-const keyString = '文字列'
+const keyString = "文字列";
 const keyObj = {};
-const keyFunc  function() {};
+const keyFunc = function () {};
 
 // 値を設定する
 myMap.set(keyString, "'文字列' と結び付けられた値");
-myMap.set(keyObj, 'keyObj と結び付けられた値');
-myMap.set(keyFunc, 'keyFunc と結び付けられた値');
+myMap.set(keyObj, "keyObj と結び付けられた値");
+myMap.set(keyFunc, "keyFunc と結び付けられた値");
 
 console.log(myMap.size); // 3
 
@@ -318,9 +321,9 @@ console.log(myMap.get(keyString)); // "'文字列' と結び付けられた値"
 console.log(myMap.get(keyObj)); // "keyObj と結び付けられた値"
 console.log(myMap.get(keyFunc)); // "keyFunc と結び付けられた値"
 
-console.log(myMap.get('文字列')); // "'文字列' と結び付けられた値"。 keyString === '文字列' であるため
+console.log(myMap.get("文字列")); // "'文字列' と結び付けられた値"。 keyString === '文字列' であるため
 console.log(myMap.get({})); // undefined, keyObj !== {} であるため
-console.log(myMap.get(function() {})); // undefined, keyFunc !== function () {} であるため
+console.log(myMap.get(function () {})); // undefined, keyFunc !== function () {} であるため
 ```
 
 ### NaN を Map のキーとして使用
@@ -375,7 +378,7 @@ for (const [key, value] of myMap.entries()) {
 
 ### forEach() で Map を反復処理
 
-マップは {{jsxref("Map.prototype.forEach", "forEach()")}} メソッドを使用して反復できます。
+マップは {{jsxref("Map/forEach", "forEach()")}} メソッドを使用して反復できます。
 
 ```js
 myMap.forEach((value, key) => {
@@ -396,7 +399,7 @@ const kvArray = [
 // 通常の Map コンストラクターを使って、キーと値の 2 次元配列をマップに変換する
 const myMap = new Map(kvArray);
 
-console.log(myMap.get("キー1")); // "値1" を返す
+console.log(myMap.get("キー1")); // "値1"
 
 // 展開演算子を使って、マップをキー・値の 2 次元配列に変換する
 console.log(Array.from(myMap)); // kvArray とまったく同じ Array を表示する
@@ -421,7 +424,8 @@ console.log(clone.get(1)); // one
 console.log(original === clone); // false (useful for shallow comparison)
 ```
 
-> **メモ:** *データ自身*は複製されないことに注意しておいてください。
+> [!NOTE]
+> データ自身は複製されないことに注意しておいてください。
 
 マップはキーの固有性を保持しながら混合可能です。
 
@@ -478,7 +482,7 @@ console.log(merged.get(3)); // three
 
 ## 関連情報
 
-- `Map` のポリフィルは [`core-js`](https://github.com/zloirock/core-js#map) で利用できます
+- [`Map` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#map)
 - {{jsxref("Set")}}
 - {{jsxref("WeakMap")}}
 - {{jsxref("WeakSet")}}
diff --git a/files/ja/web/javascript/reference/global_objects/map/keys/index.md b/files/ja/web/javascript/reference/global_objects/map/keys/index.md
index 1150c01fc0765e..17db6a4dc74736 100644
--- a/files/ja/web/javascript/reference/global_objects/map/keys/index.md
+++ b/files/ja/web/javascript/reference/global_objects/map/keys/index.md
@@ -2,12 +2,12 @@
 title: Map.prototype.keys()
 slug: Web/JavaScript/Reference/Global_Objects/Map/keys
 l10n:
-  sourceCommit: 2eb202adbe3d83292500ed46344d63fbbae410b5
+  sourceCommit: 27180875516cc311342e74b596bfb589b7211e0c
 ---
 
 {{JSRef}}
 
-**`keys()`** メソッドは、 `Map` オブジェクトに挿入された要素のキーを挿入順に列挙する新しい[イテレーター](/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators)オブジェクトを返します。この具体的な用途では、このイテレーターオブジェクトは反復可能オブジェクトでもあるので、 [for...of](/ja/docs/Web/JavaScript/Reference/Statements/for...of) ループを使用することができます。
+**`keys()`** は {{jsxref("Map")}} インスタンスのメソッドで、この `Map` オブジェクトに挿入された要素のキーを挿入順に列挙する新しい[イテレーター](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)オブジェクトを返します。
 
 {{EmbedInteractiveExample("pages/js/map-prototype-keys.html")}}
 
@@ -17,9 +17,13 @@ l10n:
 keys()
 ```
 
+### 引数
+
+なし。
+
 ### 返値
 
-{{jsxref("Map")}} の新しいイテレーターオブジェクト。
+新しい[反復可能なイテレーターオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)です。
 
 ## 例
 
diff --git a/files/ja/web/javascript/reference/global_objects/map/map/index.md b/files/ja/web/javascript/reference/global_objects/map/map/index.md
index 030208a23a58a0..95ba01f927278c 100644
--- a/files/ja/web/javascript/reference/global_objects/map/map/index.md
+++ b/files/ja/web/javascript/reference/global_objects/map/map/index.md
@@ -1,29 +1,34 @@
 ---
 title: Map() コンストラクター
 slug: Web/JavaScript/Reference/Global_Objects/Map/Map
+l10n:
+  sourceCommit: 70f09675ddcfc75a3bb66d2dce4cf82738948a37
 ---
 
 {{JSRef}}
 
-**`Map()` コンストラクター**は、 {{jsxref("Map")}} オブジェクトを生成します。
+**`Map()`** コンストラクターは、 {{jsxref("Map")}} オブジェクトを生成します。
 
 ## 構文
 
+```js-nolint
+new Map()
+new Map(iterable)
 ```
-new Map([iterable])
-```
+
+> **メモ:** `Map()` は [`new`](/ja/docs/Web/JavaScript/Reference/Operators/new) でしか作成できません。`new` を省略して呼び出そうとすると、{{jsxref("TypeError")}} が発生します。
 
 ### 引数
 
-- `iterable`
-  - : {{jsxref("Array")}} または他の[反復処理可能](/ja/docs/Web/JavaScript/Guide/iterable)なオブジェクトで、要素はキーと値の組です。 (たとえば、 `[[ 1, 'one' ],[ 2, 'two' ]]` のような 2 つの要素を持つ配列。) それぞれのそれぞれのキーと値の組が新しい `Map` に追加されます。
+- `iterable` {{optional_inline}}
+  - : {{jsxref("Array")}} または他の[反復処理可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)なオブジェクトで、要素はキーと値の組です。 (たとえば、 `[[ 1, 'one' ],[ 2, 'two' ]]` のような 2 つの要素を持つ配列。) それぞれのそれぞれのキーと値の組が新しい `Map` に追加されます。
 
 ## 例
 
 ### 新しい Map の生成
 
 ```js
-let myMap = new Map([
+const myMap = new Map([
   [1, "one"],
   [2, "two"],
   [3, "three"],
@@ -40,6 +45,7 @@ let myMap = new Map([
 
 ## 関連情報
 
+- [`Map` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#map)
 - {{jsxref("Set")}}
 - {{jsxref("WeakMap")}}
 - {{jsxref("WeakSet")}}
diff --git a/files/ja/web/javascript/reference/global_objects/map/symbol.iterator/index.md b/files/ja/web/javascript/reference/global_objects/map/symbol.iterator/index.md
index b1c44bdb9706f7..cf562c32e40f32 100644
--- a/files/ja/web/javascript/reference/global_objects/map/symbol.iterator/index.md
+++ b/files/ja/web/javascript/reference/global_objects/map/symbol.iterator/index.md
@@ -1,16 +1,15 @@
 ---
-title: Map.prototype[@@iterator]()
+title: Map.prototype[Symbol.iterator]()
 slug: Web/JavaScript/Reference/Global_Objects/Map/Symbol.iterator
-original_slug: Web/JavaScript/Reference/Global_Objects/Map/@@iterator
 l10n:
-  sourceCommit: 2eb202adbe3d83292500ed46344d63fbbae410b5
+  sourceCommit: 6fbdb78c1362fae31fbd545f4b2d9c51987a6bca
 ---
 
 {{JSRef}}
 
-**`@@iterator`** は `Map` オブジェクトのプロパティで、[反復可能プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)を実装します。これにより、マップが反復可能プロトコルを受け入れるほとんどの構文、たとえば[スプレッド構文](/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)や [`for...of`](/ja/docs/Web/JavaScript/Reference/Statements/for...of) ループなどで使用できるようになります。マップのキーと値のペアを返すイテレーターを返します。
+**`[Symbol.iterator]()`** は `Map` オブジェクトのメソッドで、[反復可能プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)を実装します。これにより、`Map` オブジェクトが反復可能プロトコルを受け入れるほとんどの構文、たとえば[スプレッド構文](/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)や {{jsxref("Statements/for...of", "for...of")}} ループなどで使用できるようになります。マップのキーと値のペアを挿入順に返す[イテレーターオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)を返します。
 
-初期値は、 {{jsxref("Map.prototype.entries()", "entries")}} メソッドの初期値と同じ関数オブジェクトです。
+初期値は、 {{jsxref("Map.prototype.entries")}} メソッドの初期値と同じ関数オブジェクトです。
 
 {{EmbedInteractiveExample("pages/js/map-prototype-@@iterator.html")}}
 
@@ -20,15 +19,19 @@ l10n:
 map[Symbol.iterator]()
 ```
 
+### 引数
+
+なし。
+
 ### 返値
 
-返値は {{jsxref("Map.prototype.entries()")}} と同じ、マップのキーと値のペアを生成する新しい反復可能なイテレーターオブジェクトを返します。
+返値は {{jsxref("Map.prototype.entries()")}} と同じ、マップのキーと値のペアを生成する新しい[反復可能なイテレーターオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)を返します。
 
 ## 例
 
-### for..of を使用した反復処理
+### for...of を使用した反復処理
 
-このメソッドを直接呼び出す必要があることはめったにないことに注意してください。`iterator` メソッドが存在することで `Map` オブジェクトを[反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#反復可能プロトコル)にし、 `for...of` ループなどの反復処理構文が、自動的にこのメソッドを呼び出してループのためのイテレータを取得することができます。
+このメソッドを直接呼び出す必要があることはめったにないことに注意してください。`[Symbol.iterator]()` メソッドが存在することで `Map` オブジェクトを[反復可能](/ja/docs/Web/JavaScript/Reference/Iteration_protocols#反復可能プロトコル)にし、 `for...of` ループなどの反復処理構文が、自動的にこのメソッドを呼び出してループのためのイテレーターを取得することができます。
 
 ```js
 const myMap = new Map();
@@ -78,6 +81,9 @@ console.log(mapIter.next().value); // [Object, "baz"]
 
 ## 関連情報
 
+- {{jsxref("Map")}}
 - {{jsxref("Map.prototype.entries()")}}
 - {{jsxref("Map.prototype.keys()")}}
 - {{jsxref("Map.prototype.values()")}}
+- {{jsxref("Symbol.iterator")}}
+- [反復可能プロトコル](/ja/docs/Web/JavaScript/Reference/Iteration_protocols)
diff --git a/files/ja/web/javascript/reference/global_objects/map/symbol.species/index.md b/files/ja/web/javascript/reference/global_objects/map/symbol.species/index.md
index 5e43d0879187b0..bf3f53afa022c4 100644
--- a/files/ja/web/javascript/reference/global_objects/map/symbol.species/index.md
+++ b/files/ja/web/javascript/reference/global_objects/map/symbol.species/index.md
@@ -1,14 +1,13 @@
 ---
-title: get Map[@@species]
+title: Map[Symbol.species]
 slug: Web/JavaScript/Reference/Global_Objects/Map/Symbol.species
-original_slug: Web/JavaScript/Reference/Global_Objects/Map/@@species
 l10n:
-  sourceCommit: 8183cfa3a25c440ca4ff0f39fe941871ed495a7b
+  sourceCommit: 8421c0cd94fa5aa237c833ac6d24885edbc7d721
 ---
 
 {{JSRef}}
 
-**`Map[@@species]`** は静的アクセサープロパティで、 `Map` オブジェクトをコピーする方法を示す未使用のアクセサープロパティです。
+**`Map[Symbol.species]`** は静的アクセサープロパティで、 `Map` オブジェクトをコピーする方法を示す未使用のアクセサープロパティです。
 
 ## 構文
 
@@ -18,11 +17,11 @@ Map[Symbol.species]
 
 ### 返値
 
-`get @@species` が呼び出されたコンストラクター (`this`) の値です。返さる値は、 `Map` インスタンスのコピーを構築するために使用されます。
+`get [Symbol.species]` が呼び出されたコンストラクター (`this`) の値です。返される値は、`Map` インスタンスのコピーを構築するために使用されます。
 
 ## 解説
 
-species アクセサープロパティは `Map` オブジェクトのデフォルトコンストラクターを返します。サブクラスのコンストラクターは、コンストラクターに代入して変更することによりオーバーライドすることができます。
+species アクセサープロパティは `Map` オブジェクトの既定のコンストラクターを返します。サブクラスのコンストラクターは、コンストラクターに代入して変更することによりオーバーライドすることができます。
 
 > [!NOTE]
 > このプロパティは現在、どの `Map` のメソッドからも使われていません。
@@ -31,7 +30,7 @@ species アクセサープロパティは `Map` オブジェクトのデフォ
 
 ### 通常のオブジェクトの species
 
-species プロパティはデフォルトコンストラクター関数を返しますので、 `Map` オブジェクトには `Map` コンストラクターを返します。
+species プロパティは既定のコンストラクター関数を返しますので、`Map` オブジェクトには `Map` コンストラクターを返します。
 
 ```js
 Map[Symbol.species]; // function Map()
diff --git a/files/ja/web/javascript/reference/global_objects/map/values/index.md b/files/ja/web/javascript/reference/global_objects/map/values/index.md
index af098d76bd2b47..d57d1c1899219c 100644
--- a/files/ja/web/javascript/reference/global_objects/map/values/index.md
+++ b/files/ja/web/javascript/reference/global_objects/map/values/index.md
@@ -2,12 +2,12 @@
 title: Map.prototype.values()
 slug: Web/JavaScript/Reference/Global_Objects/Map/values
 l10n:
-  sourceCommit: 2eb202adbe3d83292500ed46344d63fbbae410b5
+  sourceCommit: 27180875516cc311342e74b596bfb589b7211e0c
 ---
 
 {{JSRef}}
 
-**`values()`** メソッドは、 `Map` オブジェクトに挿入された要素を挿入順に列挙する新しい **[イテレーター](/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators)** オブジェクトを返します。
+**`values()`** は {{jsxref("Map")}} インスタンスのメソッドで、この `Map` オブジェクトに挿入された要素の値を挿入順に列挙する新しい[イテレーター](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)オブジェクトを返します。
 
 {{EmbedInteractiveExample("pages/js/map-prototype-values.html")}}
 
@@ -17,9 +17,13 @@ l10n:
 values()
 ```
 
+### 引数
+
+なし。
+
 ### 返値
 
-{{jsxref("Map")}} の新しいイテレーターオブジェクト。
+新しい[反復可能なイテレーターオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator)です。
 
 ## 例
 
diff --git a/files/ja/web/javascript/reference/global_objects/number/tofixed/index.md b/files/ja/web/javascript/reference/global_objects/number/tofixed/index.md
index d3450c85287b4c..dd2d4e5f5a5519 100644
--- a/files/ja/web/javascript/reference/global_objects/number/tofixed/index.md
+++ b/files/ja/web/javascript/reference/global_objects/number/tofixed/index.md
@@ -79,7 +79,7 @@ numObj.toFixed(6); // '12345.678900'を返す。0 を追加
 
 ### toFixed() を負の数に使用
 
-メンバーアクセスは単項マイナスよりも[優先順位](/ja/docs/Web/JavaScript/Reference/Operators/Operator_precedence)が高いので、文字列を取得するためには。負の数の式全体をグループ化する必要があります。
+メンバーアクセスは単項マイナスよりも[優先順位](/ja/docs/Web/JavaScript/Reference/Operators/Operator_precedence)が高いので、文字列を取得するためには負の数の式全体をグループ化する必要があります。
 
 ```js-nolint
 -2.34.toFixed(1); // -2.3, a number
diff --git a/files/ja/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.md b/files/ja/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.md
deleted file mode 100644
index cbae9ee3f14356..00000000000000
--- a/files/ja/web/xslt/transforming_xml_with_xslt/the_netscape_xslt_xpath_reference/index.md
+++ /dev/null
@@ -1,103 +0,0 @@
----
-title: Netscape XSLT/XPath リファレンス
-slug: Web/XSLT/Transforming_XML_with_XSLT/The_Netscape_XSLT_XPath_Reference
-l10n:
-  sourceCommit: b6f343538eac4a803943b4e99b0c0545b372645a
----
-
-{{XsltSidebar}}
-
-次のリストは W3C の XSLT 1.0 勧告と、XPath 勧告に適したセクションの要素、axes、関数にアルファベット順に注釈をつけたものです。XSLT プロセッサーの開発は進行中です。また、機能の拡張と共にこのドキュメントも更新されます。
-
-### 要素
-
-- [xsl:apply-imports](/ja/docs/Web/XSLT/Element/apply-imports) _(対応済)_
-- [xsl:apply-templates](/ja/docs/Web/XSLT/Element/apply-templates) _(対応済)_
-- [xsl:attribute](/ja/docs/Web/XSLT/Element/attribute) _(対応済)_
-- [xsl:attribute-set](/ja/docs/Web/XSLT/Element/attribute-set) _(対応済)_
-- [xsl:call-template](/ja/docs/Web/XSLT/Element/call-template) _(対応済)_
-- [xsl:choose](/ja/docs/Web/XSLT/Element/choose) _(対応済)_
-- [xsl:comment](/ja/docs/Web/XSLT/Element/comment) _(対応済)_
-- [xsl:copy](/ja/docs/Web/XSLT/Element/copy) _(対応済)_
-- [xsl:copy-of](/ja/docs/Web/XSLT/Element/copy-of) _(対応済)_
-- [xsl:decimal-format](/ja/docs/Web/XSLT/Element/decimal-format) _(対応済)_
-- [xsl:element](/ja/docs/Web/XSLT/Element/element) _(対応済)_
-- [xsl:fallback](/ja/docs/Web/XSLT/Element/fallback) _(非対応)_
-- [xsl:for-each](/ja/docs/Web/XSLT/Element/for-each) _(対応済)_
-- [xsl:if](/ja/docs/Web/XSLT/Element/if) _(対応済)_
-- [xsl:import](/ja/docs/Web/XSLT/Element/import) _(ほとんど対応)_
-- [xsl:include](/ja/docs/Web/XSLT/Element/include) _(対応済)_
-- [xsl:key](/ja/docs/Web/XSLT/Element/key) _(対応済)_
-- [xsl:message](/ja/docs/Web/XSLT/Element/message) _(対応済)_
-- [xsl:namespace-alias](/ja/docs/Web/XSLT/Element/namespace-alias) _(非対応)_
-- [xsl:number](/ja/docs/Web/XSLT/Element/number) _(一部対応)_
-- [xsl:otherwise](/ja/docs/Web/XSLT/Element/otherwise) _(対応済)_
-- [xsl:output](/ja/docs/Web/XSLT/Element/output) _(一部対応)_
-- [xsl:param](/ja/docs/Web/XSLT/Element/param) _(対応済)_
-- [xsl:preserve-space](/ja/docs/Web/XSLT/Element/preserve-space) _(対応済)_
-- [xsl:processing-instruction](/ja/docs/Web/XSLT/Element/processing-instruction)
-- [xsl:sort](/ja/docs/Web/XSLT/Element/sort) _(対応済)_
-- [xsl:strip-space](/ja/docs/Web/XSLT/Element/strip-space) _(対応済)_
-- [xsl:stylesheet](/ja/docs/Web/XSLT/Element/stylesheet) _(一部対応)_
-- [xsl:template](/ja/docs/Web/XSLT/Element/template) _(対応済)_
-- [xsl:text](/ja/docs/Web/XSLT/Element/text) _(一部対応)_
-- [xsl:transform](/ja/docs/Web/XSLT/Element/transform) _(対応済)_
-- [xsl:value-of](/ja/docs/Web/XSLT/Element/value-of) _(一部対応)_
-- [xsl:variable](/ja/docs/Web/XSLT/Element/variable) _(対応済)_
-- [xsl:when](/ja/docs/Web/XSLT/Element/when) _(対応済)_
-- [xsl:with-param](/ja/docs/Web/XSLT/Element/with-param) _(対応済)_
-
-### Axes
-
-- [ancestor](/ja/docs/Web/XPath/Axes#ancestor)
-- [ancestor-or-self](/ja/docs/Web/XPath/Axes#ancestor-or-self)
-- [attribute](/ja/docs/Web/XPath/Axes#attribute)
-- [child](/ja/docs/Web/XPath/Axes#child)
-- [descendant](/ja/docs/Web/XPath/Axes#descendant)
-- [descendant-or-self](/ja/docs/Web/XPath/Axes#descendant-or-self)
-- [following](/ja/docs/Web/XPath/Axes#following)
-- [following-sibling](/ja/docs/Web/XPath/Axes#following-sibling)
-- [namespace](/ja/docs/Web/XPath/Axes#namespace) _(非対応)_
-- [parent](/ja/docs/Web/XPath/Axes#parent)
-- [preceding](/ja/docs/Web/XPath/Axes#preceding)
-- [preceding-sibling](/ja/docs/Web/XPath/Axes#preceding-sibling)
-- [self](/ja/docs/Web/XPath/Axes#self)
-
-### 関数
-
-- [boolean()](/ja/docs/Web/XPath/Functions/boolean) _(対応済)_
-- [ceiling()](/ja/docs/Web/XPath/Functions/ceiling) _(対応済)_
-- [concat()](/ja/docs/Web/XPath/Functions/concat) _(対応済)_
-- [contains()](/ja/docs/Web/XPath/Functions/contains) _(対応済)_
-- [count()](/ja/docs/Web/XPath/Functions/count) _(対応済)_
-- [current()](/ja/docs/Web/XPath/Functions/current) _(対応済)_
-- [document()](/ja/docs/Web/XPath/Functions/document) _(対応済)_
-- [element-available()](/ja/docs/Web/XPath/Functions/element-available) _(対応済)_
-- [false()](/ja/docs/Web/XPath/Functions/false) _(対応済)_
-- [floor()](/ja/docs/Web/XPath/Functions/floor) _(対応済)_
-- [format-number()](/ja/docs/Web/XPath/Functions/format-number) _(対応済)_
-- [function-available()](/ja/docs/Web/XPath/Functions/function-available) _(対応済)_
-- [generate-id()](/ja/docs/Web/XPath/Functions/generate-id) _(対応済)_
-- [id()](/ja/docs/Web/XPath/Functions/id) _(一部対応)_
-- [key()](/ja/docs/Web/XPath/Functions/key) _(対応済)_
-- [lang()](/ja/docs/Web/XPath/Functions/lang) _(対応済)_
-- [last()](/ja/docs/Web/XPath/Functions/last) _(対応済)_
-- [local-name()](/ja/docs/Web/XPath/Functions/local-name) _(対応済)_
-- [name()](/ja/docs/Web/XPath/Functions/name) _(対応済)_
-- [namespace-uri()](/ja/docs/Web/XPath/Functions/namespace-uri) _(対応済)_
-- [normalize-space()](/ja/docs/Web/XPath/Functions/normalize-space) _(対応済)_
-- [not()](/ja/docs/Web/XPath/Functions/not) _(対応済)_
-- [number()](/ja/docs/Web/XPath/Functions/number) _(対応済)_
-- [position()](/ja/docs/Web/XPath/Functions/position) _(対応済)_
-- [round()](/ja/docs/Web/XPath/Functions/round) _(対応済)_
-- [starts-with()](/ja/docs/Web/XPath/Functions/starts-with) _(対応済)_
-- [string()](/ja/docs/Web/XPath/Functions/string) _(対応済)_
-- [string-length()](/ja/docs/Web/XPath/Functions/string-length) _(対応済)_
-- [substring()](/ja/docs/Web/XPath/Functions/substring) _(対応済)_
-- [substring-after()](/ja/docs/Web/XPath/Functions/substring-after) _(対応済)_
-- [substring-before()](/ja/docs/Web/XPath/Functions/substring-before) _(対応済)_
-- [sum()](/ja/docs/Web/XPath/Functions/sum) _(対応済)_
-- [system-property()](/ja/docs/Web/XPath/Functions/system-property) _(対応済)_
-- [translate()](/ja/docs/Web/XPath/Functions/translate) _(対応済)_
-- [true()](/ja/docs/Web/XPath/Functions/true) _(対応済)_
-- [unparsed-entity-url()](/ja/docs/Web/XPath/Functions/unparsed-entity-url) _(非対応)_
diff --git a/files/ko/learn/common_questions/index.md b/files/ko/learn/common_questions/index.md
new file mode 100644
index 00000000000000..1159c1a56538a0
--- /dev/null
+++ b/files/ko/learn/common_questions/index.md
@@ -0,0 +1,17 @@
+---
+title: Common questions
+slug: Learn/Common_questions
+l10n:
+  sourceCommit: 751d58669499de0c6ea0d5b356e0e1448418c5d3
+---
+
+{{LearnSidebar}}
+
+해당 학습 영역의 섹션은 [HTML](/ko/docs/Learn/HTML)이나 [CSS](/ko/docs/Learn/CSS)와 같은 구조화된 핵심 학습 경로의 일부는 아니지만, 자주 묻는 질문에 대한 답변을 제공하기 위해 만들어졌습니다. 아래의 글들은 독립적으로 읽고 이해할 수 있도록 작성되었습니다.
+
+- [HTML 관련 질문](/ko/docs/Learn/HTML/Howto)
+- [CSS 관련 질문](/ko/docs/Learn/CSS/Howto)
+- [JavaScript 관련 질문](/ko/docs/Learn/JavaScript/Howto)
+- [웹 메커니즘](/ko/docs/Learn/Common_questions/Web_mechanics)
+- [도구 및 설정](/ko/docs/Learn/Common_questions/Tools_and_setup)
+- [디자인 및 접근성](/ko/docs/Learn/Common_questions/Design_and_accessibility)
diff --git a/files/ko/learn/javascript/building_blocks/event_bubbling/index.md b/files/ko/learn/javascript/building_blocks/event_bubbling/index.md
new file mode 100644
index 00000000000000..c1fdd5a269d22f
--- /dev/null
+++ b/files/ko/learn/javascript/building_blocks/event_bubbling/index.md
@@ -0,0 +1,417 @@
+---
+title: 이벤트 버블링
+slug: Learn/JavaScript/Building_blocks/Event_bubbling
+l10n:
+  sourceCommit: bc0d0d1ef796435e969f6d65c7e5d3c08f4023aa
+---
+
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Events","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
+
+웹 페이지는 제목, 텍스트 단락, 이미지, 버튼 등 "요소"로 구성되어 있으며 이러한 요소에 발생하는 이벤트를 수신할 수 있다는 것을 살펴보았습니다. 예를 들어, 버튼에 수신기를 추가하면 사용자가 버튼을 클릭했을 때 실행됩니다.
+
+또한 이러한 요소가 서로 "중첩"될 수 있다는 것을 보았습니다. 예를 들어, {{htmlelement("button")}}은 {{htmlelement("div")}} 요소 안에 놓일 수 있습니다. 이 때 `<div>` 요소를 "부모" 요소라고 부르고 `<button>`을 "자식" 요소라고 부릅니다.
+
+이번 장에서는 부모 요소에 이벤트 수신기를 추가했을 때 사용자가 자식 요소를 클릭하면 어떤 일이 일어나는지 살펴보겠습니다.
+
+## 이벤트 버블링 소개
+
+### 부모 요소에 수신기 설정하기
+
+다음과 같은 웹 페이지가 있다고 가정해 봅시다.
+
+```html
+<div id="container">
+  <button>여기를 클릭하세요!</button>
+</div>
+<pre id="output"></pre>
+```
+
+여기서 버튼은 다른 요소인 {{HTMLElement("div")}} 안에 있습니다. 이 `<div>` 요소는 내부에 포함된 요소의 **부모**라고 합니다. 부모에 클릭 이벤트 처리기를 추가한 다음 버튼을 클릭하면 어떻게 될까요?
+
+```js
+const output = document.querySelector("#output");
+function handleClick(e) {
+  output.textContent += `${e.currentTarget.tagName} 요소를 클릭했습니다.\n`;
+}
+
+const container = document.querySelector("#container");
+container.addEventListener("click", handleClick);
+```
+
+{{ EmbedLiveSample('Setting a listener on a parent element', '100%', 200, "", "") }}
+
+사용자가 버튼을 클릭하면 부모가 클릭 이벤트를 방출하는 것을 볼 수 있습니다.
+
+```plain
+DIV 요소를 클릭했습니다.
+```
+
+버튼이 `<div>` 안에 있으므로 버튼을 클릭하면 암시적으로 버튼 안에 있는 요소도 클릭하게 됩니다.
+
+### 버블링 예제
+
+버튼과 부모 "둘 다" 이벤트 수신기를 추가하면 어떻게 될까요?
+
+```html
+<body>
+  <div id="container">
+    <button>여기를 클릭하세요!</button>
+  </div>
+  <pre id="output"></pre>
+</body>
+```
+
+버튼과 부모(`<div>`), 그리고 두 요소를 모두 포함하는 {{HTMLElement("body")}} 요소에 클릭 이벤트 처리기를 추가해 보겠습니다.
+
+```js
+const output = document.querySelector("#output");
+function handleClick(e) {
+  output.textContent += `${e.currentTarget.tagName} 요소를 클릭했습니다.\n`;
+}
+
+const container = document.querySelector("#container");
+const button = document.querySelector("button");
+
+document.body.addEventListener("click", handleClick);
+container.addEventListener("click", handleClick);
+button.addEventListener("click", handleClick);
+```
+
+{{ EmbedLiveSample('Bubbling example', '100%', 200, "", "") }}
+
+사용자가 버튼을 클릭하면 세 요소 모두 클릭 이벤트를 방출하는 것을 볼 수 있습니다.
+
+```plain
+BUTTON 요소를 클릭했습니다.
+DIV 요소를 클릭했습니다.
+BODY 요소를 클릭했습니다.
+```
+
+이 경우는 다음과 같습니다.
+
+- 버튼 클릭이 먼저 일어납니다.
+- 그 다음에 부모(`<div>` 요소) 클릭이 일어납니다.
+- 그리고 `<div>` 요소의 부모(`<body>` 요소) 클릭이 일어납니다.
+
+이를 이벤트가 클릭한 가장 안쪽의 요소에서 **상위로 버블링**된다고 설명할 수 있습니다.
+
+이 동작은 유용할 수도 있고 예상치 못한 문제를 일으킬 수도 있습니다. 다음 섹션에서는 이로 인해 발생하는 문제를 살펴보고 해결책을 찾아보겠습니다.
+
+### 동영상 플레이어 예제
+
+이 예제에서 페이지에 처음에는 숨겨져있는 동영상과 "동영상 표시"라는 버튼이 있습니다. 우리는 다음과 같은 상호작용을 원합니다.
+
+- 사용자가 "동영상 표시" 버튼을 클릭하면 동영상이 포함된 상자를 표시하지만 재생하지는 않습니다.
+- 사용자가 동영상을 클릭하면 재생합니다.
+- 사용자가 동영상 외부의 상자 어딘가를 클릭하면 상자를 숨깁니다.
+
+HTML은 다음과 같습니다.
+
+```html
+<button>동영상 표시</button>
+
+<div class="hidden">
+  <video>
+    <source
+      src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
+      type="video/webm" />
+    <p>
+      이 브라우저는 HTML 동영상을 지원하지 않습니다. 대신
+      <a href="rabbit320.mp4">동영상 링크</a>를 제공합니다.
+    </p>
+  </video>
+</div>
+```
+
+HTML에는 다음이 포함됩니다.
+
+- `<button>` 요소
+- 초기에 `class="hidden"` 특성을 갖는 `<div>` 요소
+- `<div>` 요소 내부에 중첩된 `<video>` 요소.
+
+CSS 를 사용해 `"hidden"` 클래스를 설정한 요소를 숨기고 있습니다.
+
+```css hidden
+div {
+  width: 100%;
+  height: 100%;
+  background-color: #eee;
+}
+
+.hidden {
+  display: none;
+}
+
+div video {
+  padding: 40px;
+  display: block;
+  width: 400px;
+  margin: 40px auto;
+}
+```
+
+JavaScript는 다음과 같습니다.
+
+```js
+const btn = document.querySelector("button");
+const box = document.querySelector("div");
+const video = document.querySelector("video");
+
+btn.addEventListener("click", () => box.classList.remove("hidden"));
+video.addEventListener("click", () => video.play());
+box.addEventListener("click", () => box.classList.add("hidden"));
+```
+
+이렇게 하면 세 개의 `'click'` 이벤트 수신기가 추가됩니다.
+
+- 하나는 `<button>`에 있으며, `<video>`를 포함하는 `<div>`를 표시합니다.
+- 하나는 `<video>`에 있으며, 동영상을 재생합니다.
+- 하나는 `<div>`에 있으며, 동영상을 숨깁니다.
+
+예제가 어떻게 동작하는지 살펴보겠습니다.
+
+{{ EmbedLiveSample('Video_player_example', '100%', 500) }}
+
+버튼을 클릭하면 컨테이너와 그 안에 있는 동영상이 표시됩니다. 하지만 동영상을 클릭하면 동영상은 재생되지만 상자는 다시 숨겨집니다!
+
+동영상은 `<div>` 안에 있으며 그 일부입니다. 따라서 동영상을 클릭하면 두 이벤트 처리기가 "모두" 실행되어 이런 동작이 일어납니다.
+
+### stopPropagation() 으로 문제 해결하기
+
+이전 섹션에서 보았듯이 이벤트 버블링은 때때로 문제를 일으킬 수 있지만 이를 방지하는 방법이 있습니다.
+[`Event`](/ko/docs/Web/API/Event) 객체에는 [`stopPropagation()`](/ko/docs/Web/API/Event/stopPropagation)이라는 함수가 있으며 이벤트 처리기 내에서 호출되면 이벤트가 다른 요소로 버블링되는 것을 방지합니다.
+
+JavaScript를 다음과 같이 변경하여 현재 문제를 해결할 수 있습니다.
+
+```js
+const btn = document.querySelector("button");
+const box = document.querySelector("div");
+const video = document.querySelector("video");
+
+btn.addEventListener("click", () => box.classList.remove("hidden"));
+
+video.addEventListener("click", (event) => {
+  event.stopPropagation();
+  video.play();
+});
+
+box.addEventListener("click", () => box.classList.add("hidden"));
+```
+
+`<video>` 요소의 `'click'` 이벤트 처리기에서 이벤트 객체에 `stopPropagation()`을 호출하기만 하면 됩니다. 이렇게 하면 해당 이벤트가 상위 박스로 버블링되는 것을 멈출 수 있습니다. 이제 버튼을 클릭하고 동영상을 클릭해 보세요.
+
+{{EmbedLiveSample("Fixing the problem with stopPropagation()", '100%', 500)}}
+
+```html hidden
+<button>동영상 보기</button>
+
+<div class="hidden">
+  <video>
+    <source
+      src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
+      type="video/webm" />
+    <p>
+      이 브라우저는 HTML 동영상을 지원하지 않습니다. 대신
+      <a href="rabbit320.mp4">동영상 링크</a>를 제공합니다.
+    </p>
+  </video>
+</div>
+```
+
+```css hidden
+div {
+  width: 100%;
+  height: 100%;
+  background-color: #eee;
+}
+
+.hidden {
+  display: none;
+}
+
+div video {
+  padding: 40px;
+  display: block;
+  width: 400px;
+  margin: 40px auto;
+}
+```
+
+## 이벤트 캡처
+
+이벤트 전파의 또 다른 형태로 "이벤트 캡처"가 있습니다. 이것은 이벤트 버블링과 비슷하지만 순서가 반대입니다. 즉, 이벤트가 대상의 가장 안쪽의 대상 요소에서 발생해서 그 다음으로 중첩이 적은 요소순으로 전파되는게 아니라, 반대로 "가장 적게 중첩된" 요소에서 발생해서 그 다음으로 중첩이 많은 요소순으로 대상에 도달할 때까지 전파됩니다.
+
+이벤트 캡처는 기본적으로 비활성화되어 있습니다. 활성화하려면 `addEventListener()`에서 `capture` 옵션을 전달해야 합니다.
+
+이 예제는 `capture` 옵션을 사용한다는 점을 제외하면 앞서 본 [버블링 예제](#버블링_예제)와 동일합니다.
+
+```html
+<body>
+  <div id="container">
+    <button>클릭해주세요!</button>
+  </div>
+  <pre id="output"></pre>
+</body>
+```
+
+```js
+const output = document.querySelector("#output");
+function handleClick(e) {
+  output.textContent += `${e.currentTarget.tagName} 요소를 클릭했습니다.\n`;
+}
+
+const container = document.querySelector("#container");
+const button = document.querySelector("button");
+
+document.body.addEventListener("click", handleClick, { capture: true });
+container.addEventListener("click", handleClick, { capture: true });
+button.addEventListener("click", handleClick);
+```
+
+{{ EmbedLiveSample('Event capture', '100%', 200, "", "") }}
+
+이 경우 메시지 순서는 반대입니다. `<body>` 이벤트 처리기가 먼저 실행되고, 그 다음에 `<div>` 이벤트 처리기가 실행되고, 그 다음에 `<button>` 이벤트 처리기가 실행됩니다.
+
+```plain
+BODY 요소를 클릭했습니다.
+DIV 요소를 클릭했습니다.
+BUTTON 요소를 클릭했습니다.
+```
+
+굳이 왜 버블링과 캡처링을 둘 다 쓰는걸까요? 브라우저 간의 호환성이 지금보다 훨씬 낮았던 예전에 Netscape는 이벤트 캡처링만 사용했고 Internet Explorer는 이벤트 버블링만 사용했습니다. W3C가 동작을 표준화하기로 결정하고 합의할 때, 최신 브라우저에 구현된 것처럼 둘 다 포함하는 시스템이 되었습니다.
+
+기본적으로 거의 모든 이벤트 처리기는 버블링 단계에서 등록되며, 대부분의 경우 이 동작이 더 합리적입니다.
+
+## 이벤트 위임
+
+이전 섹션에서는 이벤트 버블링으로 인해 발생하는 문제와 그 해결 방법을 살펴보았습니다. 이벤트 버블링은 성가신게 아니라 매우 유용할 수도 있습니다. 특히, **이벤트 위임**을 가능하게 합니다. 많은 자식 요소 중 하나와 사용자가 상호 작용할 때 특정 코드를 실행하려면, 부모 요소에 이벤트 수신기를 설정하고 자식 요소에서 발생한 이벤트가 부모로 버블링되도록 하면 됩니다. 이렇게 하면 각 자식 요소에 개별적으로 이벤트 수신기를 설정할 필요가 없습니다.
+
+사용자가 버튼을 클릭했을 때 전체 페이지의 배경색을 설정했던 첫 번째 예제로 돌아갑시다. 이번엔 페이지를 16개의 타일로 나누고 사용자가 해당 타일을 클릭했을 때 각 타일을 임의의 색상으로 설정하려고 합니다.
+
+HTML은 다음과 같습니다.
+
+```html
+<div id="container">
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+  <div class="tile"></div>
+</div>
+```
+
+타일의 크기와 위치를 설정하기 위해 간단한 CSS를 설정합니다.
+
+```css
+.tile {
+  height: 100px;
+  width: 25%;
+  float: left;
+}
+```
+
+JavaScript에서 모든 타일에 클릭 이벤트 처리기를 추가할 수 있습니다. 그러나 보다 간단하고 효율적인 옵션은 부모에 클릭 이벤트 처리기를 설정하고 이벤트 버블링을 사용하여 사용자가 타일을 클릭할 때 처리기가 실행되도록 하는 것입니다.
+
+```js
+function random(number) {
+  return Math.floor(Math.random() * number);
+}
+
+function bgChange() {
+  const rndCol = `rgb(${random(255)} ${random(255)} ${random(255)})`;
+  return rndCol;
+}
+
+const container = document.querySelector("#container");
+
+container.addEventListener("click", (event) => {
+  event.target.style.backgroundColor = bgChange();
+});
+```
+
+출력은 다음과 같습니다 (클릭해보십시오).
+
+{{ EmbedLiveSample('Event delegation', '100%', 430, "", "") }}
+
+> [!NOTE]
+> 이 예제에서, 우리는 `event.target`을 사용하여 이벤트의 대상이었던 요소(즉, 가장 안쪽 요소)를 가져오고 있습니다. 이 이벤트를 처리한 요소(이 경우 컨테이너)에 접근하고싶다면 `event.currentTarget`을 사용할 수 있습니다.
+
+> [!NOTE]
+> 전체 소스 코드는 [useful-eventtarget.html](https://github.com/mdn/learning-area/blob/main/javascript/building-blocks/events/useful-eventtarget.html)에서 볼 수 있습니다. 또한 [라이브 실행](https://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html)도 참고하십시오.
+
+## `target` 과 `currentTarget`
+
+이 페이지에서 소개한 예제를 자세히 살펴보면, 클릭한 요소에 접근하기 위해 이벤트 객체의 두 가지 속성을 사용하고 있음을 알 수 있습니다. [부모 요소에 수신기 설정하기](#부모_요소에_수신기_설정하기)에서 {{domxref("Event.currentTarget", "event.currentTarget")}}을 사용하고, [이벤트 위임](#이벤트_위임)에서는 {{domxref("Event.target", "event.target")}}을 사용하고 있습니다.
+
+`target`이 이벤트가 처음 발생한 요소를 참조하는 반면 `currentTarget`은 이 이벤트 처리기가 연결된 요소를 참조하는 차이가 있습니다.
+
+이벤트가 상위로 버블링되는 동안 `target`은 동일하게 유지되는 반면, `currentTarget`은 계층구조 내 서로 다른 요소에 연결된 이벤트 처리기에 따라 달라집니다.
+
+위의 [버블링 예제](#버블링_예제)를 약간 변형하면 이를 확인할 수 있습니다. 이전과 같은 HTML을 사용하고 있습니다.
+
+```html
+<body>
+  <div id="container">
+    <button>클릭해주세요!</button>
+  </div>
+  <pre id="output"></pre>
+</body>
+```
+
+JavaScript는 `target`과 `currentTarget`을 모두 로깅하는것 외에는 거의 같습니다.
+
+```js
+const output = document.querySelector("#output");
+function handleClick(e) {
+  const logTarget = `Target: ${e.target.tagName}`;
+  const logCurrentTarget = `Current target: ${e.currentTarget.tagName}`;
+  output.textContent += `${logTarget}, ${logCurrentTarget}\n`;
+}
+
+const container = document.querySelector("#container");
+const button = document.querySelector("button");
+
+document.body.addEventListener("click", handleClick);
+container.addEventListener("click", handleClick);
+button.addEventListener("click", handleClick);
+```
+
+버튼을 클릭했을 때, 이벤트 처리기가 버튼 자체나 `<div>` 또는 `<body>` 에 연결되어 있어도 `target` 은 항상 버튼 요소라는 점을 주의하세요. 그러나 `currentTarget`은 현재 실행중인 이벤트 처리기의 요소로 식별됩니다.
+
+{{embedlivesample("target and currentTarget")}}
+
+`target` 속성은 위의 [이벤트 위임](#이벤트_위임) 예제처럼 이벤트 위임에서 자주 사용합니다.
+
+## 스킬 테스트!
+
+이 문서의 마지막까지 왔습니다. 그런데 가장 중요한 정보를 기억하고 있나요? 계속하기 전에 이 정보를 기억했는지 확인하려면 [스킬 테스트: 이벤트](/ko/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Events)를 참조하세요.
+
+## 요약
+
+이제 이 초기 단계에서 웹 이벤트에 대해 알아야 할 모든 것을 알게 되었을 것입니다.
+앞서 언급했듯이 이벤트는 코어 JavaScript의 일부가 아니며 브라우저 웹 API에서 정의되어 있습니다.
+
+또한 웹 API에서부터 브라우저 WebExtensions, Node.js(서버 측 JavaScript)와 같은 다른 영역에 이르기까지 JavaScript를 사용하는 맥락에 따라 다양한 이벤트 모델이 있다는 것을 이해하는 것이 중요합니다.
+지금 당장 이 모든 영역을 이해할 것으로 기대하지는 않지만 웹 개발을 배우면서 이벤트의 기본을 이해하는 데 확실히 도움이 됩니다.
+
+> [!NOTE]
+> 진행중에 막혔다면 [커뮤니케이션 채널](/ko/docs/MDN/Community/Communication_channels)에서 도움을 요청하세요.
+
+## 같이 보기
+
+- [domevents.dev](https://domevents.dev/) — 탐색을 통해 DOM 이벤트 시스템의 동작에 대해 학습할 수 있는 매우 유용한 대화형 놀이터 앱입니다.
+- [이벤트 참고서](/ko/docs/Web/Events)
+- [이벤트 순서](https://www.quirksmode.org/js/events_order.html) (캡처링과 버블링에 대한 논의) — 피터-폴 코흐가 매우 자세하게 설명한 글입니다.
+
+{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Events","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
diff --git a/files/ko/mozilla/add-ons/webextensions/user_interface/index.md b/files/ko/mozilla/add-ons/webextensions/user_interface/index.md
new file mode 100644
index 00000000000000..c2662e022bacdd
--- /dev/null
+++ b/files/ko/mozilla/add-ons/webextensions/user_interface/index.md
@@ -0,0 +1,215 @@
+---
+title: 사용자 인터페이스
+slug: Mozilla/Add-ons/WebExtensions/user_interface
+l10n:
+  sourceCommit: 668b38a4f6cd96609b9a969fe4653b46aec4e712
+---
+
+{{AddonSidebar}}
+
+WebExtension API를 사용하는 확장 프로그램은 사용자에게 기능을 제공할 수 있도록 몇몇 사용자 인터페이스 옵션을 제공합니다. 이러한 옵션들의 요약은 아래에 제공되며, 각 사용자 인터페이스 옵션에 대한 자세한 소개는 이 섹션에서 다룹니다.
+
+> [!NOTE]
+> 확장 프로그램에서 UI 컴포넌트를 사용해 훌륭한 사용자 경험을 만들기 위한 조언을 얻고 싶다면 [User experience best practices](https://extensionworkshop.com/documentation/develop/user-experience-best-practices/)를 참고하세요.
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">UI 옵션</th>
+      <th scope="col">내용</th>
+      <th scope="col">예시</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <a
+          href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Toolbar_button"
+          >툴바 버튼</a
+        >
+        (브라우저 동작)
+      </td>
+      <td>
+        클릭했을 때 확장 프로그램에 이벤트를 전달하는 브라우저 툴바의 버튼입니다. 이 버튼은 기본적으로 모든 탭에서 보입니다.
+      </td>
+      <td>
+        <img
+          alt="툴바(브라우저 동작) 버튼을 보여주는 예시"
+          src="browser-action.png"
+        />
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">팝업</a>이 있는 툴바 버튼
+      </td>
+      <td>
+       브라우저 툴바의 버튼을 클릭하면 열리는 팝업입니다. 팝업은 HTML 문서에 정의되어 사용자 상호작용을 처리합니다.
+      </td>
+      <td>
+        <img
+          alt="툴바 버튼의 팝업 예시"
+          src="popup-shadow.png"
+        />
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Page_actions"
+          >주소 바 버튼</a
+        >
+        (페이지 동작)
+      </td>
+      <td>
+        클랙했을 때 확장 프로그램에 이벤트를 전달하는 브라우저 주소 바의 버튼입니다. 이 버튼은 기본적으로 모든 탭에서 보이지 않습니다.
+      </td>
+      <td>
+        <img
+          alt="주소 바 버튼(페이지 액션)을 보여주는 예시"
+          src="address_bar_button.png"
+        />
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">팝업</a>이 있는 주소 바 버튼
+      </td>
+      <td>
+        주소 바의 버튼을 클릭하면 열리는 팝업입니다. 팝업은 HTML 문서에 정의되어 사용자 상호작용을 처리합니다.
+      </td>
+      <td>
+        <img
+          alt="주소 바 버튼의 팝업 예시"
+          src="page_action_popup.png"
+        />
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items"
+          >맥락 메뉴 항목</a
+        >
+      </td>
+      <td>
+        하나 이상의 브라우저 맥락 메뉴의 메뉴 항목, 체크박스, 라디오 버튼입니다. 또한, 구분선을 추가하여 메뉴를 구조화할 수도 있습니다. 메뉴 항목들이 클릭되면 이벤트가 확장 프로그램에 전달됩니다.
+      </td>
+      <td>
+         <img
+          alt="context-menu-demo 예제에서 WebExtension이 추가한 컨텍스트 메뉴 항목의 예시"
+          src="context_menu_example.png"
+        />
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars"
+          >사이드바</a
+        >
+      </td>
+      <td>
+         <p>
+          웹 페이지 옆에 표시되는 HTML 문서로 페이지마다 고유한 콘텐츠를 표시할 수 있습니다. 사이드바는 확장 프로그램이 설치될 때 열리며, 이후 사용자의 사이드바 가시성 선택을 따릅니다. 사이드바 내의 사용자 상호작용은 해당 HTML 문서에서 처리됩니다.
+        </p>
+      </td>
+      <td><img alt="사이드바의 예시" src="bookmarks-sidebar.png" /></td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages"
+          >옵션 페이지</a
+        >
+      </td>
+       <td>
+        확장 프로그램의 설정을 정의할 수 있는 페이지로 사용자가 이 설정을 변경할 수 있습니다.
+        사용자는 브라우저의 애드온 관리자에서 이 페이지에 접근할 수 있습니다.
+      </td>
+      <td>
+        <img
+          alt="즐겨찾는 색상 예시에서 옵션 페이지에 추가된 내용을 보여주는 예시."
+          src="options_page.png"
+        />
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages"
+          >확장 프로그램 페이지</a
+        >
+      </td>
+       <td>
+       확장 프로그램에 포함된 웹 페이지를 사용하여 창이나 탭 내에서 양식, 도움말 또는 필요한 기타 콘텐츠를 제공할 수 있습니다.
+      </td>
+      <td>
+        <img
+          alt="분리된 패널로 표시되는 간단한 번들 페이지의 예시"
+          src="bundled_page_as_panel_small.png"
+        />
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications"
+          >알림</a
+        >
+      </td>
+      <td>
+        운영체제의 알림 메커니즘을 통해 사용자에게 표시되는 일시적인 알림입니다. 사용자가 알림을 클릭하거나 알림이 자동으로 또는 사용자의 요청으로 닫힐 때, 확장 프로그램으로 이벤트가 전달됩니다.
+      </td>
+      <td>
+        <img
+          alt="확장 프로그램에 의해 트리거된 시스템 알림의 예시"
+          src="notify-shadowed.png"
+        />
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox"
+          >주소 바 제안</a
+        >
+      </td>
+      <td>
+        사용자가 키워드를 입력할 때 맞춤 주소 표시줄 제안을 제공합니다.
+      </td>
+      <td>
+        <img
+          alt="firefox_code_search 확장 프로그램이 주소 표시줄 제안을 커스터마이즈한 결과를 보여주는 예시."
+          src="omnibox_example_small.png"
+        />
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a
+          href="/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels"
+          >개발자 도구 패널</a
+        >
+      </td>
+      <td>
+        브라우저의 개발자 도구에 표시되는 HTML 문서가 연결된 탭.
+      </td>
+      <td>
+        <img
+          alt="Example showing the result of the firefox_code_search WebExtension&#x27;s customization of the address bar suggestions."
+          src="developer_panel_tab.png"
+        />
+      </td>
+    </tr>
+
+  </tbody>
+</table>
+
+다음의 사용 방법 가이드에서는 이러한 사용자 인터페이스 옵션 중 일부를 만드는 방법을 단계별로 안내합니다.
+
+- [접근성 가이드라인](https://extensionworkshop.com/documentation/develop/build-an-accessible-extension/)
+- [툴바에 버튼 추가하기](/ko/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar)
+- [브라우저 스타일](/ko/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles)
+- [개발자 도구 확장하기](/ko/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools)
+- [설정 페이지 구현하기](/ko/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page)
diff --git a/files/ko/web/api/battery_status_api/index.md b/files/ko/web/api/battery_status_api/index.md
index 1035888a4ab79f..b9b943d93e4b7d 100644
--- a/files/ko/web/api/battery_status_api/index.md
+++ b/files/ko/web/api/battery_status_api/index.md
@@ -1,38 +1,74 @@
 ---
 title: Battery Status API
 slug: Web/API/Battery_Status_API
+l10n:
+  sourceCommit: be8f7f155a48e11b30c240f8731afb1845f85378
 ---
 
-{{DefaultAPISidebar("Battery API")}}
+{{DefaultAPISidebar("Battery API")}}{{securecontext_header}}
 
 **Battery API** 만큼이나 자주 언급되는 **Battery Status API**는 시스템의 배터리 충전 상태에 대한 정보를 제공하고, 배터리 상태에 따라 발생하는 이벤트를 다룰 수 있도록 해 줍니다. 배터리가 얼마남지 않은 상황에서, 앱에서 배터리의 소모를 줄인다거나 배터리가 방전되기 전에 데이터를 저장하거나 하는 것들이 가능합니다.
 
-Battery Status API 는 {{domxref("window.navigator.battery")}} 를 제공 합니다. 이는 {{domxref("BatteryManager")}} 객체이며 배터리 상태를 감시하고 전달받아 처리할 수 있는 이벤트를 가지고 있습니다.
+> [!NOTE]
+> 이 API는 [Web Workers](/ko/docs/Web/API/Web_Workers_API) 에서 사용이 불가능합니다. ({{domxref("WorkerNavigator")}} 에 포함되어 있지 않음)
+
+## 인터페이스
+
+- {{domxref("BatteryManager")}}
+  - : 시스템의 배터리 충전 상태에 대한 정보를 제공합니다.
+
+### 다른 인터페이스로의 확장
+
+- {{domxref("Navigator.getBattery()")}}
+  - : {{DOMxRef("BatteryManager")}} 객체를 이행하는 {{JSxRef("Promise")}}를 리턴합니다.
 
 ## 예제
 
-아래 예제에서는 배터리가 충전중인 상태 (전원 케이블을 연결하여 충전 중인지) 와 배터리 수준의 변화를 감시합니다. 각각 {{domxref("BatteryManager.chargingchange_event", "chargingchange")}} 와 {{domxref("BatteryManager.levelchange_event", "levelchange")}} 이벤트가 발생하면 완료 됩니다.
+이 예제에서는 배터리가 충전중인 상태(전원 케이블을 연결하여 충전 중인지)와 배터리 잔량 및 타이밍의 변화를 모두 관찰합니다. 이 작업은 {{domxref("BatteryManager.chargingchange_event", "chargingchange")}}, {{domxref("BatteryManager.levelchange_event", "levelchange")}}, {{domxref("BatteryManager.chargingtimechange_event", "chargingtimechange")}}, {{domxref("BatteryManager.dischargingtimechange_event", "dischargingtimechange")}} 이벤트를 수신하는 방식으로 수행됩니다.
 
 ```js
-var battery =
-  navigator.battery || navigator.mozBattery || navigator.webkitBattery;
+navigator.getBattery().then((battery) => {
+  function updateAllBatteryInfo() {
+    updateChargeInfo();
+    updateLevelInfo();
+    updateChargingInfo();
+    updateDischargingInfo();
+  }
+  updateAllBatteryInfo();
 
-function updateBatteryStatus() {
-  console.log("Battery status: " + battery.level * 100 + " %");
+  battery.addEventListener("chargingchange", () => {
+    updateChargeInfo();
+  });
+  function updateChargeInfo() {
+    console.log(`Battery charging? ${battery.charging ? "Yes" : "No"}`);
+  }
+
+  battery.addEventListener("levelchange", () => {
+    updateLevelInfo();
+  });
+  function updateLevelInfo() {
+    console.log(`Battery level: ${battery.level * 100}%`);
+  }
 
-  if (battery.charging) {
-    console.log("Battery is charging");
+  battery.addEventListener("chargingtimechange", () => {
+    updateChargingInfo();
+  });
+  function updateChargingInfo() {
+    console.log(`Battery charging time: ${battery.chargingTime} seconds`);
   }
-}
 
-battery.addEventListener("chargingchange", updateBatteryStatus);
-battery.addEventListener("levelchange", updateBatteryStatus);
-updateBatteryStatus();
+  battery.addEventListener("dischargingtimechange", () => {
+    updateDischargingInfo();
+  });
+  function updateDischargingInfo() {
+    console.log(`Battery discharging time: ${battery.dischargingTime} seconds`);
+  }
+});
 ```
 
-명세서의 예제도 [**확인**](http://dev.w3.org/2009/dap/system-info/battery-status.html#introduction)해보세요.
+[명세서의 예시도](https://www.w3.org/TR/battery-status/#examples) 참조하세요.
 
-## 명세
+## 명세서
 
 {{Specifications}}
 
@@ -40,8 +76,6 @@ updateBatteryStatus();
 
 {{Compat}}
 
-## 더보기
+## 같이 보기
 
-- [Hacks blog post - Using the Battery API](http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/)
-- {{domxref("BatteryManager")}}
-- {{domxref("window.navigator.battery","navigator.battery")}}
+- [Hacks blog post - Using the Battery API](https://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/)
diff --git a/files/ko/web/api/document/scripts/index.md b/files/ko/web/api/document/scripts/index.md
new file mode 100644
index 00000000000000..3d91925219767b
--- /dev/null
+++ b/files/ko/web/api/document/scripts/index.md
@@ -0,0 +1,34 @@
+---
+title: Document.scripts
+slug: Web/API/Document/scripts
+l10n:
+  sourceCommit: 904f8c3d9c8a54e917f8db565bcfe58f976d859c
+---
+
+{{APIRef("DOM")}}
+
+**`scripts`** 는 {{domxref("Document")}}인터페이스의 속성으로 문서 중{{HTMLElement("script")}} 요소의 목록을 반환합니다. 반환되는 객체는 단일 {{domxref("HTMLCollection")}} 객체입니다.
+
+## 값
+
+{{domxref("HTMLCollection")}}입니다. 이를 사용하여 목록의 모든 요소를 배열처럼 가져올 수 있습니다.
+
+## 예제
+
+다음은 페이지 내 {{HTMLElement("script")}} 요소의 존재를 확인하는 예시입니다.
+
+```js
+let scripts = document.scripts;
+
+if (scripts.length) {
+  alert("This page has scripts!");
+}
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
diff --git a/files/ko/web/api/htmlelement/tabindex/index.md b/files/ko/web/api/htmlelement/tabindex/index.md
new file mode 100644
index 00000000000000..3c1db6a1af5f95
--- /dev/null
+++ b/files/ko/web/api/htmlelement/tabindex/index.md
@@ -0,0 +1,46 @@
+---
+title: "HTMLElement: tabIndex 속성"
+slug: Web/API/HTMLElement/tabIndex
+l10n:
+  sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18
+---
+
+{{APIRef("HTML DOM")}}
+
+**`tabIndex`** 는 현재 요소의 탭 순서를 나타내는 {{DOMxRef("HTMLElement")}} 인터페이스입니다.
+
+탭 순서는 다음과 같습니다.
+
+1. `tabIndex`가 양수인 요소인 경우.
+   동일한 `tabIndex`값을 가진 요소들은 나타나는 순서대로 탐색되어야 합니다.
+   탐색은 가장 낮은 `tabIndex`에서 가장 높은 `tabIndex`로 진행됩니다.
+2. `tabIndex` 속성을 지원하지 않거나 지원하면서 `tabIndex`를 `0`으로 지정한 요소들은 나타나는 순서대로 탐색됩니다.
+
+비활성화된 요소들은 탭 순서에 참여하지 않습니다.
+
+값은 순차적일 필요가 없으며, 특정 값으로 시작할 필요도 없습니다. 값은 음수일 수도 있지만, 각 브라우저는 매우 큰 값을 잘라냅니다.
+
+## 값
+
+정수
+
+## 예제
+
+```js
+const b1 = document.getElementById("button1");
+
+b1.tabIndex = 1;
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- [Accessibility of keyboard-navigable JavaScript widgets](/ko/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets)
+- HTML 전역 특성 [`tabindex`](/ko/docs/Web/HTML/Global_attributes/tabindex)
diff --git a/files/ko/web/css/css_counter_styles/using_css_counters/index.md b/files/ko/web/css/css_counter_styles/using_css_counters/index.md
index 54c6ede2189fea..05390bd39c64c2 100644
--- a/files/ko/web/css/css_counter_styles/using_css_counters/index.md
+++ b/files/ko/web/css/css_counter_styles/using_css_counters/index.md
@@ -1,59 +1,213 @@
 ---
 title: CSS 카운터 사용하기
 slug: Web/CSS/CSS_counter_styles/Using_CSS_counters
+l10n:
+  sourceCommit: f75fd658f627b5730a14ada901120cfa4ee01bda
 ---
 
 {{CSSRef}}
 
-**CSS counters**를 사용하면 문서에서의 위치에 따라 콘텐츠의 모양을 조정할 수 있습니다. 예를 들어, counters를 사용해 웹페이지의 제목에 자동으로 번호를 매길 수 있습니다. Counters는 요소가 몇 번이나 사용되었는지 추적하여 CSS 규칙에 따라 증가하며, 본질적으로 변수입니다.
+**CSS counters**를 사용하면 문서에서의 위치에 따라 콘텐츠의 모양을 조정할 수 있습니다. 예를 들어, 카운터를 사용해 웹페이지의 제목에 자동으로 번호를 매기거나 순서가 있는 목록의 서수를 변경할 수 있습니다.
+
+카운터는 요소가 몇 번이나 사용되었는지 추적하여 CSS 규칙에 따라 증가하거나 감소하며, 본질적으로 변수입니다.
+카운터에 사용자 지정 이름을 적용할 수 있고, 모든 순서가 있는 목록에 대해 기본적으로 생성되는 `list-item` 카운터도 조작할 수 있습니다.
 
 ## Counters 사용하기
 
+CSS 카운터를 사용하려면 먼저 {{cssxref("counter-reset")}} 속성을 사용하여 초기화 해야합니다. 카운터의 값은 {{cssxref("counter-increment")}} 속성을 이용하여 증가하거나 감소시킬 수 있습니다. 카운터의 현재 값은 {{cssxref("counter", "counter()")}} 혹은 {{cssxref("counters", "counters()")}} 함수로 표시되는데, 일반적으로 [가상 요소](/ko/docs/Web/CSS/Pseudo-elements)인 {{CSSxRef("content")}} 속성 내에서 쓰입니다.
+
+카운터는 박스를 생성하는 요소에 대해서만 설정, 재설정, 혹은 증가시킬 수 있습니다.
+예를 들어, 요소에 `display: none` 가 설정되어 있다면, 해당 요소에서 적용되는 카운터는 모두 무시됩니다.
+
+카운터의 속성은 {{cssxref("contain")}} 속성에 상세하게 설명된 스타일 격리를 사용하여 특정 요소 내에서 범위를 지정할 수 있습니다.
+
 ### 카운터 값 조작하기
 
-CSS counter를 사용하려면 먼저 {{cssxref("counter-reset")}} 속성(초깃값 `0`)을 사용하여 초기화 해야합니다. 동일한 속성으로 값을 특정 값으로 바꿀 수도 있습니다. 초기화 된 counter의 값은 {{cssxref("counter-increment")}}에 따라 증가하거나 감소합니다. counter의 이름으로 "none", "inherit", "initial"은 사용불가합니다. 이런 이름을 사용하면 선언은 무시됩니다.
+CSS 카운터를 사용하려면 먼저 {{cssxref("counter-reset")}} 속성을 사용하여 초기화 해야합니다.
+이 속성은 카운터의 값을 아무 숫자로 변경하는 데에 사용됩니다.
+
+아래 예제에서는 `section` 이라고 명명된 카운터를 기본값 (0)으로 초기화합니다.
+
+```css
+counter-reset: section;
+```
+
+각각에 대해 초기값을 특정한다면 여러 개의 카운터를 초기화할 수도 있습니다.
+아래 예제에서는 `section` 과 `topic` 카운터를 기본값으로 초기화하고, `page` 카운터는 3으로 설정합니다.
+
+```css
+counter-reset: section page 3 topic;
+```
+
+한번 초기화가 되면 카운터의 값은 {{cssxref("counter-increment")}} 을 사용하여 증가하거나 감소시킬 수 있습니다.
+예를 들어, 아래 선언에서는 모든 `h3` 태그에 대해 `section` 카운터를 하나씩 증가시킵니다.
+
+```css
+h3::before {
+  counter-increment: section; /* section 카운터를 1씩 증가 */
+}
+```
+
+카운터의 이름 뒤에 양수나 음수를 사용함으로써증가하거나 감소시킬 값을 설정할 수 있습니다.
+
+카운터의 이름으로 `none`, `inherit`, 또는 `initial` 는 사용 불가하고, 이런 이름을 사용하면 선언은 무시됩니다.
 
 ### 카운터 표시하기
 
-Counter의 값은 {{cssxref("content")}} 속성에서 {{cssxref("counter()")}}나 {{cssxref("counters()")}} 함수를 사용하여 표시할 수 있습니다.
+카운터의 값은 {{cssxref("content")}} 속성에서 {{cssxref("counter()")}}나 {{cssxref("counters()")}} 함수를 사용하여 표시할 수 있습니다.
+
+예를 들어, 다음 선언에서는 `counter()` 를 사용하여 각각의 `h3` 제목 앞에 `Section <number>:` 라는 텍스트를 추가하고, 여기서의 `<number>` 는 십진수로 카운트된 값입니다. (기본으로 표시되는 스타일)
+
+```css
+h3::before {
+  counter-increment: section; /* section 카운터를 1씩 증가 */
+  content: "Section " counter(section) ": "; /* 기본 스타일(십진수)로 카운터 값 표시 */
+}
+```
+
+{{cssxref("counter", "counter()")}} 함수는 중첩된 단계의 번호 매기기가 부모 단계의 맥락을 포함하지 않을 때에 사용됩니다.
+여기 각각의 중첩 단계가 1부터 시작하는 예제가 있습니다.
+
+```plain
+1 One
+  1 Nested one
+  2 Nested two
+2 Two
+  1 Nested one
+  2 Nested two
+  3 Nested three
+3 Three
+```
+
+{{cssxref("counters", "counters()")}} 함수는 중첩된 단계의 카운트가 부모 단계의 카운트를 포함해야 할 때 사용됩니다.
+예를 들어, 다음과 같이 섹션을 레이아웃하는 데에 사용할 수 있습니다.
+
+```plain
+1 One
+  1.1 Nested one
+  1.2 Nested two
+2 Two
+  2.1 Nested one
+  2.2 Nested two
+  2.3 Nested three
+3 Three
+```
+
+{{cssxref("counter", "counter()")}} 함수는 `counter(<counter-name>)` 와 `counter(<counter-name>, <counter-style>)` 처럼 두 가지 형태로 사용될 수 있습니다.
+생성된 텍스트는 의사 요소의 범위 내에서 주어진 이름의 가장 안쪽의 카운터 값입니다.
+
+{{cssxref("counters", "counters()")}} 함수 또한 두 가지 형태를 가지는데, `counters(<counter-name>, <separator>)` 와 `counters(<counter-name>, <separator>, <counter-style>)` 입니다.
+생성된 텍스트는 의사 요소의 범위 내에서 주어진 이름의 모든 카운터 값이고, 가장 바깥쪽부터 가장 안쪽까지를 문자열 (`<separator>`)를 사용하여 분리합니다.
+
+카운터는 두 가지 방법 모두에서 지정된 `<counter-style>` 로 렌더링됩니다. (기본값은 `decimal`)
+{{cssxref("list-style-type")}} 값들을 사용하거나 사용자 지정의 [맞춤 스타일](/ko/docs/Web/CSS/CSS_counter_styles)을 사용할 수도 있습니다.
+
+`counter()` 와 `counters()` 의 사용에 대한 예제는 아래 [기본 예제](#기본_예제) 그리고 [중첩 카운터 예제](#중첩_카운터_예제)에서 확인할 수 있습니다.
+
+### 역순 카운터
+
+역순 카운터는 증가가 아닌 감소를 목적으로 하는 카운터입니다.
+역순 카운터는 {{cssxref("counter-reset")}} 에서 카운터의 이름을 지정할 때 `reversed()` 함수 표기를 사용하여 생성할 수 있습니다.
+
+역순 카운터는 기본 초기값을 가지고 있는데, 이는 요소의 수와 동일합니다. (기본값이 0인 일반적인 카운터와는 다릅니다.)
+이는 요소의 수에서 하나까지 감소시키는 카운터의 구현을 더 쉽게 만듭니다.
 
-`counter()` 함수는 'counter(name)'와 'counter(name, style)' 두 가지 형태로 사용할 수 있습니다. 생성된 텍스트는 가상 요소가 속한 범위에 있는 이름(name)의 가장 안쪽 counter의 값입니다. 텍스트는 지정된 서식(기본값은 십진수`decimal`)으로 뿌려집니다.
+예를 들어, `section` 이라는 이름의 역순 카운터를 기본 초기값으로 생성하기 위해서는 아래 문법처럼 작성할 수 있습니다.
 
-`counters()` 함수도 'counters(name, string)'나 'counters(name, string, style)' 두 가지 형태로 사용할 수 있습니다. 생성된 텍스트는 가상 요소가 속한 모든 범위에서 지정된 이름을 가진 counters의 값으로, 바깥 쪽부터 안쪽까지 값이 주어지며 지정된 문자열로 구분됩니다. counters는 지정된 스타일(기본값은 십진수`decimal`)로 렌더링 됩니다.
+```css
+counter-reset: reversed(section);
+```
+
+물론 원하는 초기값을 지정할 수도 있습니다.
+
+카운터의 값은 {{cssxref("counter-increment")}} 의 음수값을 특정함에 따라 감소하게 됩니다.
+
+> **참고:** {{cssxref("counter-increment")}} 를 사용하여 역순이 아닌 카운터를 감소시킬 수 있습니다.
+> 역순 카운터의 주요 이점은 기본 초기값이며,`list-item` 카운터가 역순 카운터를 자동으로 감소시킨다는 점입니다.
+
+### 목록 요소의 카운터
+
+{{HTMLElement("ol")}} 요소로 생성된 것과 같은 순서가 있는 목록에서, 카운터는 암묵적으로 `list-item` 라는 이름을 갖습니다.
+
+다른 카운터들처럼 이 또한 0의 기본 초기값을 가지게 되는데, "요소의 숫자" 역시 역순 카운터의 초기값으로 쓰입니다.
+사용자가 지정한 카운터가 아니라면 `list-item` 은 카운터가 역순인지 아닌지 여부에 따라 자동적으로 각각의 요소에 대하여 1씩 증가하거나 감소하게 됩니다.
+
+`list-item` 카운터는 CSS 를 사용한 순서가 있는 목록의 기본 동작을 조작할 수도 있습니다.
+예를 들어 기본 초기값을 변경하거나, {{cssxref("counter-increment")}} 를 사용하여 목록 요소가 증가하거나 감소되는 것을 변경할 수 있습니다.
+
+## 예제
 
 ### 기본 예제
 
-여기서는 제목 앞에 숫자를 붙여봅니다.
+이 예제는 각 제목의 시작 부분에 "Section \[카운터 값]:"을 추가합니다.
 
 #### CSS
 
 ```css
 body {
-  counter-reset: section; /* counter 이름을 'section'으로 지정합니다.
-                                                   초깃값은 0입니다. */
+  counter-reset: section; /* 카운터의 이름을 'section' 으로 지정하며, 초기값은 0이 됩니다. */
 }
 
 h3::before {
-  counter-increment: section; /* section의 카운터 값을 1씩 증가시킵니다. */
-  content: "Section " counter(section) ": "; /* section의 카운터 값을 표시합니다. */
+  counter-increment: section; /* section 카운터를 1씩 증가 */
+  content: "Section " counter(section) ": "; /* 'Section ' 단어를 표시하고,
+                                                각 h3의 내용 앞에 섹션 카운터 값과
+                                                콜론을 추가합니다. */
 }
 ```
 
 #### HTML
 
 ```html
-<h3>Introduction</h3>
-<h3>Body</h3>
-<h3>Conclusion</h3>
+<h3>도입</h3>
+<h3>본문</h3>
+<h3>결론</h3>
 ```
 
 #### 결과
 
 {{EmbedLiveSample("Basic_example", "100%", 150)}}
 
-### 더 정교한 예시
+### 기본 예제: 역순 카운터
 
-카운터가 증가 할 때마다 반드시 표시되어야 하는 것은 아닙니다. 이 예시는 모든 링크를 계산하지만 카운터는 링크에 텍스트가 없는 경우에만 표시되므로 편리한 대체제입니다.
+이 예제는 위에서 본 예제와 동일하지만, 역순 카운터를 사용한다는 점만 다릅니다.
+만일 브라우저가 `reversed()` 함수 표기법을 지원한다면, 결과는 아래와 같이 보일 것입니다.
+
+![역순 카운터](reversed_headings_basic.png)
+
+#### CSS
+
+```css
+body {
+  counter-reset: reversed(
+    section
+  ); /* 카운터의 이름을 'section' 으로 지정하며, 초기값은 0이 됩니다. */
+}
+
+h3::before {
+  counter-increment: section -1; /* section 카운터를 1씩 감소 */
+  content: "Section " counter(section) ": "; /* 'Section ' 단어를 표시하고,
+                                                각 h3의 내용 앞에 섹션 카운터 값과
+                                                콜론을 추가합니다. */
+}
+```
+
+#### HTML
+
+```html
+<h3>도입</h3>
+<h3>본문</h3>
+<h3>결론</h3>
+```
+
+#### 결과
+
+{{EmbedLiveSample("Basic example: reversed counter", "100%", 150)}}
+
+### 더 정교한 예제
+
+카운터는 증가할 때마다 반드시 표시될 필요는 없습니다.
+이 예제는 모든 링크를 세면서, 링크에 텍스트가 없을 때만 카운터를 표시하여 편리한 대체 방법으로 사용합니다.
 
 #### CSS
 
@@ -74,21 +228,20 @@ a[href]:empty::after {
 #### HTML
 
 ```html
-<p>See <a href="https://www.mozilla.org/"></a></p>
-<p>Do not forget to <a href="contact-me.html">leave a message</a>!</p>
-<p>See also <a href="https://developer.mozilla.org/"></a></p>
+<p>보기 <a href="https://www.mozilla.org/"></a></p>
+<p><a href="contact-me.html">메시지를 남기는 것을</a> 잊지 마세요!</p>
+<p>같이 보기 <a href="https://developer.mozilla.org/"></a></p>
 ```
 
-#### Result
+#### 결과
 
 {{EmbedLiveSample("A_more_sophisticated_example", "100%", 150)}}
 
-## 중첩 카운터
-
-CSS 카운터는 자식 요소 안에서 새 인스턴스를 자동으로 만들어주어 목차를 만드는데 유용합니다. {{cssxref("counters()")}} 함수를 사용해 중첩된 다른 레벨의 카운터 사이를 분리하는 글자를 지정할 수 있습니다.
-
 ### 중첩 카운터 예제
 
+CSS 카운터는 자식 요소 안에서 새 인스턴스를 자동으로 만들어주어 목차를 만드는데 유용합니다.
+{{cssxref("counters", "counters()")}} 함수를 사용해 중첩된 다른 레벨의 카운터 사이를 분리하는 글자를 지정할 수 있습니다.
+
 #### CSS
 
 ```css
@@ -123,9 +276,9 @@ li::before {
           <li>item</li>  <!-- 2.3.2 -->
         </ol>
         <ol>
-          <li>item</li>  <!-- 2.4.1 -->
-          <li>item</li>  <!-- 2.4.2 -->
-          <li>item</li>  <!-- 2.4.3 -->
+          <li>item</li>  <!-- 2.3.1 -->
+          <li>item</li>  <!-- 2.3.2 -->
+          <li>item</li>  <!-- 2.3.3 -->
         </ol>
       </li>
       <li>item</li>      <!-- 2.4   -->
@@ -148,8 +301,12 @@ li::before {
 
 {{Specifications}}
 
-## See also
+## 같이 보기
 
+- {{cssxref("contain")}}
 - {{cssxref("counter-reset")}}
+- {{cssxref("counter-set")}}
 - {{cssxref("counter-increment")}}
 - {{cssxref("@counter-style")}}
+- [CSS 카운터 스타일](/ko/docs/Web/CSS/CSS_counter_styles) 모듈
+- [CSS 목록과 카운터](/ko/docs/Web/CSS/CSS_lists) 모듈
diff --git a/files/ko/web/css/css_logical_properties_and_values/basic_concepts_of_logical_properties_and_values/index.md b/files/ko/web/css/css_logical_properties_and_values/basic_concepts_of_logical_properties_and_values/index.md
new file mode 100644
index 00000000000000..6c50778fae1b05
--- /dev/null
+++ b/files/ko/web/css/css_logical_properties_and_values/basic_concepts_of_logical_properties_and_values/index.md
@@ -0,0 +1,55 @@
+---
+title: 논리적 속성과 값의 기본 개념
+slug: Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values
+l10n:
+  sourceCommit: a08c1d8b4022ffbd69d4fd3097d0a30716f5fde7
+---
+
+{{CSSRef}}
+
+[CSS 논리적 속성과 값 모듈](/ko/docs/Web/CSS/CSS_logical_properties_and_values#properties) 은 CSS 에서의 {{glossary("physical properties")}} 의 대열 상대적인 매핑과 값을 정의합니다. 이 안내서에서는 모듈에 대해 다루며, {{glossary("flow relative values")}} 값과 속성에 대해 설명합니다.
+
+## 논리적 속성이 유용한 이유
+
+CSS 2.1과 이전 버전에서는 화면의 물리적 크기를 따라 요소의 크기를 설정해왔습니다. 그렇기 떄문에 박스를 {{CSSxRef("width")}} 와 {{CSSxRef("height")}} 로 표현했고, 아이템은 `top` 과 `left` 에서부터 위치시키고, 테두리, 바깥 여백, 그리고 안쪽 여백을 `top`, `right`, `bottom`, `left` 등에 할당했습니다. 논리적 속성과 값 모듈은 이러한 {{glossary("physical properties")}} 와 값을 논리적이거나 흐름 상대적인 값에 매핑합니다. 예로 `left`와 `right`, `top` 과 `bottom` 대신에 `start`와 `end`를 이용합니다.
+
+이러한 매핑은 원래의 레이아웃과 다른 쓰기 모드의 언어로 번역되는 사이트에서 매우 유용합니다. 예를 들어, CSS 그리드 레이아웃에서는, 만일 그리드 컨테이너가 그리드 요소들을 정렬하기 위해 {{CSSxRef("align-self")}} 와 {{CSSxRef("justify-self")}} 속성이 적용된 너비를 가지고 있을 때, 이 속성은 대열 상대적이기 때문에 `justify-self: start` 는 요소를 인라인 차원의 시작 지점에 요소들을 정렬하고, `align-self: start` 는 블록 차원에서의 시작 지점에 요소들을 정렬합니다.
+
+![가로 쓰기 모드에서의 그리드](grid-horizontal-width-sm.png)
+
+만일 컴포넌트의 쓰기 모드가 {{CSSxRef("writing-mode")}} 속성을 사용하여 `vertical-rl` 로 변경될 때, 정렬은 여전히 같은 방식으로 동작합니다. 인라인 차원은 세로로 동작하며, 블록 차원은 가로로 동작합니다. 그러나 그리드가 동일하게 보이지는 않는데, 이는 컨테이너에 지정된 너비는 가로로 측정되었으며, 이 측정은 텍스트의 논리나 상대 대열이 아닌 물리적인 측정이기 때문입니다.
+
+![세로 쓰기 모드에서의 그리드](grid-vertical-width-sm.png)
+
+`width` 속성을 사용하는 대신 논리적 속성인 {{CSSxRef("inline-size")}} 가 사용되었다면, 쓰기 모드에 관계 없이 컴포넌트가 동일한 방식으로 작동합니다.
+
+![세로 쓰기 모드에서의 그리드 레이아웃](grid-vertical-inline-size-small.png)
+
+아래의 실제 예제를 이용하여 시연해 볼 수 있습니다. `grid` 의 `writing-mode` 를 `vertical-rl` 에서 `horizontal-tb` 로 변경하여 다른 속성들이 레이아웃을 어떻게 변화시키는지 확인해 보세요.
+
+{{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}}
+
+창의적인 이유로 가로 방향이 아닌 위에서 아래 방향의 쓰기 모드를 사용할 때 콘텐츠의 대열을 연관지을 수 있다는 것은 매우 중요한 일입니다.
+
+## 블록과 인라인 차원
+
+대열 상대적인 속성과 값의 핵심 개념은 블록과 인라인 두 개의 차원입니다. 플렉스박스와 그리드 레이아웃과 같은 CSS 레이아웃 메서드는 요소를 정렬하기 위해 `right` 및 `left`/`top` 및 `bottom` 를 대신하여 `block` 과 `inline` 개념을 사용합니다.
+
+`inline` 차원은 현재 사용 중인 쓰기 모드에서 텍스트가 따르는 차원입니다. 즉, 텍스트가 왼쪽에서 오른쪽의 가로 방향을 따르는 영어 문서나 텍스트가 오른쪽에서 왼쪽의 가로 방향을 따라는 아랍어 문서에서 인라인 차원은 수평입니다. 세로 쓰기 모드 (예시. 일어 문서) 로 전환되면 해당 쓰기 모드에서는 줄이 세로를 따르므로 인라인 차원은 수직이 됩니다.
+
+블록 차원은 다른 차원이고, 단락과 같은 블록 방향에서는 하나의 요소가 다른 요소 뒤에 배치됩니다. 영어나 아랍어 문서에서는 이들이 세로 방향을 따르고, 세로 쓰기 모드에서는 가로로 표시됩니다.
+
+아래 도표는 가로 쓰기 모드에서의 인라인과 블록 방향을 나타냅니다.
+
+![인라인 축이 가로로, 블록 축이 세로로 실행되는 것을 나타내는 도표](mdn-horizontal.png)
+
+아래 도표는 세로 쓰기 모드에서의 인라인과 블록 방향을 나타냅니다.
+
+![블록 축이 가로로, 인라인 축이 세로로 실행되는 것을 나타내는 도표](mdn-vertical.png)
+
+## 같이 보기
+
+- [그리드 레이아웃에서의 박스 정렬](/ko/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout)
+- [플렉스 레이아웃에서의 박스 정렬](/ko/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox)
+- [대열 레이아웃과 쓰기 모드](/ko/docs/Web/CSS/CSS_flow_layout/Flow_layout_and_writing_modes)
+- Smashing Magazine (2018)의 [논리적 속성과 값 이해하기](https://www.smashingmagazine.com/2018/03/understanding-logical-properties-values/)
diff --git a/files/ko/web/css/fit-content/index.md b/files/ko/web/css/fit-content/index.md
new file mode 100644
index 00000000000000..e607b1374b2d9b
--- /dev/null
+++ b/files/ko/web/css/fit-content/index.md
@@ -0,0 +1,73 @@
+---
+title: fit-content
+slug: Web/CSS/fit-content
+l10n:
+  sourceCommit: 14515827c44f3cb814261a1c6bd487ae8bfcde1b
+---
+
+{{CSSRef}}
+
+**`fit-content`** 키워드는 {{cssxref("fit-content_function", "fit-content(stretch)")}}와 동일합니다. 실제로 이는 박스가 사용 가능한 공간을 사용하되, 절대 {{cssxref("max-content")}}보다 크지는 않음을 의미합니다.
+
+{{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} 및 {{cssxref("max-height")}} 가 레이아웃된 박스의 크기로 사용된 경우, 최대 크기와 최소 크기는 콘텐츠의 크기를 참조합니다.
+
+> [!NOTE]
+> CSS Sizing 명세는 {{cssxref("fit-content_function", "fit-content()")}} 함수도 정의합니다. 이 페이지에서는 해당 키워드에 대해 설명합니다.
+
+## 구문
+
+```css
+width: fit-content;
+block-size: fit-content;
+```
+
+## 예제
+
+### fit-content를 사용해 박스 크기 설정하기
+
+#### HTML
+
+```html
+<div class="container">
+  <div class="item">항목</div>
+  <div class="item">더 많은 텍스트가 포함된 항목입니다.</div>
+  <div class="item">
+    텍스트가 더 많이 포함된 항목입니다. 텍스트가 줄바꿈되기를 기대하며 충분한
+    양의 텍스트를 추가했습니다.
+  </div>
+</div>
+```
+
+#### CSS
+
+```css
+.container {
+  border: 2px solid #ccc;
+  padding: 10px;
+  width: 20em;
+}
+
+.item {
+  width: fit-content;
+  background-color: #8ca0ff;
+  padding: 5px;
+  margin-bottom: 1em;
+}
+```
+
+#### 결과
+
+{{EmbedLiveSample("fit-content를 사용해 박스 크기 설정하기", "100%", 200)}}
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- 연관된 크기 설정 키워드: {{cssxref("min-content")}}, {{cssxref("max-content")}}
+- [CSS box sizing](/ko/docs/Web/CSS/CSS_box_sizing) 모듈
diff --git a/files/ko/web/css/image/image-set/index.md b/files/ko/web/css/image/image-set/index.md
new file mode 100644
index 00000000000000..0cc3a6932f0c1d
--- /dev/null
+++ b/files/ko/web/css/image/image-set/index.md
@@ -0,0 +1,111 @@
+---
+title: image-set()
+slug: Web/CSS/image/image-set
+l10n:
+  sourceCommit: 14515827c44f3cb814261a1c6bd487ae8bfcde1b
+---
+
+{{CSSRef}}
+
+**`image-set()`** [CSS](/ko/docs/Web/CSS) [함수형](/ko/docs/Web/CSS/CSS_Functions) 표기법은 브라우저가 높은 해상도를 위해 주어진 이미지 집합 안에서 가장 적합한 CSS를 선택하도록 할 수 있는 방법입니다.
+
+해상도와 대역폭은 기기와 네트워크 접근에 따라 달라집니다. `image-set()` 함수는 가장 적합한 해상도의 이미지를 사용자의 기기로 전달하여 기기와 설정에 따른 적합한 이미지를 선택할 수 있도록 하는데, 이는 해상도와 이미지 옵션의 집합을 제공하고 각 이미지에는 해상도 정의도 연관되어 있습니다. 해상도는 파일 크기에 따라 프록시로도 사용될 수 있습니다. 느린 모바일 연결이지만 높은 해상도의 화면을 가진 사용자 에이전트는 고해상도 이미지의 로드를 기다리는 것보다 저해상도 이미지를 선호할 수도 있습니다.
+
+`image-set()` 은 각각의 사용자가 필요로 하는 것을 결정하기 보다는 선택할 수 있는 옵션을 제공합니다.
+
+## 구문
+
+```css-nolint
+/* 해상도를 기반으로 이미지 선택하기 */
+image-set(
+  "image1.jpg" 1x,
+  "image2.jpg" 2x
+);
+
+image-set(
+  url("image1.jpg") 1x,
+  url("image2.jpg") 2x
+);
+
+/* 해상도를 기반으로 그라디언트 선택하기 */
+image-set(
+  linear-gradient(blue, white) 1x,
+  linear-gradient(blue, green) 2x
+);
+
+/* 지원하는 확장자를 기반으로 이미지 선택하기 */
+image-set(
+  url("image1.avif") type("image/avif"),
+  url("image2.jpg") type("image/jpeg")
+);
+```
+
+### 값
+
+- `<image>`
+  - : [`<image>`](/ko/docs/Web/CSS/image) 태그는 이미지 집합을 제외하고서는 어떠한 이미지 타입도 될 수 있습니다. `image-set()` 함수는 다른 `image-set()` 함수 내에 중첩될 수 없습니다.
+- `<string>`
+  - : 이미지의 URL입니다.
+- `<resolution>` {{optional_inline}}
+  - : [`<resolution>`](/ko/docs/Web/CSS/resolution) 태그는 픽셀 당 도트 단위인 `x` 혹은 `dppx` 를 포함하여 인치 당 도트 단위인 `dpi`, 센티미터 당 도트 단위인 `dpcm` 등 단위를 나타냅니다. `image-set()` 내의 모든 이미지는 고유한 해상도를 가져야 합니다.
+- `type(<string>)` {{optional_inline}}
+  - : "image/jpeg" 와 같은 유효한 MIME 타입의 문자열입니다.
+
+### 형식 구문
+
+{{csssyntax}}
+
+## 접근성
+
+브라우저는 배경 이미지에 대한 특수한 정보를 보조 기술로 제공하지 않습니다. 이는 주로 화면 리더기를 위한 기능인데, 스크린 리더는 배경 이미지의 존재를 알리지 않기 때문에 사용자는 아무런 정보를 전달 받을 수 없습니다. 만일 이미지에 페이지의 전반적인 목적을 이해하는 데에 중요한 정보가 포함되어 있다면 이를 문서 안에서 의미론적으로 설명하는 것이 좋습니다.
+
+- [MDN WCAG 이해하기, 가이드라인 1.1 설명](/ko/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_—_providing_text_alternatives_for_non-text_content)
+- [Success Criterion 1.1.1 이해하기 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
+
+## 예제
+
+### background-image 옵션으로 대안으로 image-set()를 사용하기
+
+이 예제는 [`image-set()`](https://drafts.csswg.org/css-images-4/#funcdef-image-set) 가 두 개의 {{cssxref("background-image")}} 옵션의 대안, 즉 일반적인 버전과 고해상도 버전의 해상도를 어떻게 제공하는지에 대해 설명합니다.
+
+{{EmbedGHLiveSample("css-examples/images/image-set.html", '100%', 600)}}
+
+> [!NOTE]
+> 위 예제에서처럼, `-webkit` 접미사는 크롬과 사파리에서도 사용할 수 있습니다. 파이어폭스 90에서는 (개발자가 표준 속성을 추가하지 않은 경우 호환성을 제공하기 위해) `-webkit-image-set()` 가 `image-set()` 의 별칭으로 사용됩니다.
+
+### 이미지 확장자의 대안으로 image-set()를 사용하기
+
+다음 예제에서는 `type()` 함수가 AVIF 와 JPEG 확장자를 전달하기 위해 사용될 수도 있음을 설명합니다. 만일 브라우저가 avif를 지원한다면 이는 해당 버전을 선택하게 되고, 그렇지 않다면 jpeg 버전을 사용하게 됩니다.
+
+{{EmbedGHLiveSample("css-examples/images/image-set-type.html", '100%', 600)}}
+
+#### 폴백 제공하기
+
+`image-set()` 을 위한 내장 폴백은 존재하지 않습니다. 이 기능을 지원하지 않는 브라우저를 위해 {{cssxref("background-image")}} 를 포합하려면 `image-set()` 를 사용하는 줄 앞에 별도의 정의가 필요합니다.
+
+```css
+.box {
+  background-image: url("large-balloons.jpg");
+  background-image: image-set(
+    "large-balloons.avif" type("image/avif"),
+    "large-balloons.jpg" type("image/jpeg")
+  );
+}
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{cssxref("image")}}
+- {{cssxref("image/image", "image()")}}
+- {{cssxref("element", "element()")}}
+- {{cssxref("url", "url()")}}
+- {{cssxref("&lt;gradient&gt;")}}
+- {{cssxref("cross-fade", "cross-fade()")}}
diff --git a/files/ko/web/css/layout_cookbook/center_an_element/index.md b/files/ko/web/css/layout_cookbook/center_an_element/index.md
new file mode 100644
index 00000000000000..a1c12ce0aa6bff
--- /dev/null
+++ b/files/ko/web/css/layout_cookbook/center_an_element/index.md
@@ -0,0 +1,98 @@
+---
+title: 요소의 중앙 정렬
+slug: Web/CSS/Layout_cookbook/Center_an_element
+l10n:
+  sourceCommit: 70f49e78d0f6830748fcaa490d98b4ae3e2da161
+---
+
+{{CSSRef}}
+
+이 조리법에서는 [flex 박스](#using_flexbox)와 [그리드](#using_grid)를 사용해서 박스를 다른 박스 내부에 중앙 정렬하는 방법을 배울 수 있습니다. 수평과 수직으로 중앙 정렬하는 것은 간단하고 직관적입니다.
+
+![an element centered inside a larger box](cookbook-center.png)
+
+## 요구 사항
+
+박스 내부의 아이템을 수평과 수직 방향으로 중앙 정렬합니다.
+
+## 조리법
+
+{{EmbedGHLiveSample("css-examples/css-cookbook/center.html", '100%', 720)}}
+
+> [!CALLOUT]
+>
+> [Download this example](https://github.com/mdn/css-examples/blob/main/css-cookbook/center--download.html)
+
+## 플렉스박스 사용하기
+
+박스를 다른 박스 내부에서 중앙 정렬하기 위해서는 먼저 감싸고 있는 박스에 {{cssxref("display")}} 속성을 `flex`로 지정해서 [flex 컨테이너](/ko/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox#the_flex_container) 로 바꿔줍니다. 그 다음에 {{cssxref("align-items")}}를 `center`로 지정하여 수직 방향의 중앙 정렬(블록 축)을 하고, {{cssxref("justify-content")}}를 `center`로 설정하여 수평 방향의 중앙 정렬(인라인 축)을 합니다. 그러면 박스를 다른 박스 내부에서 중앙 정렬하는 데 필요한 모든 작업이 완료됩니다!
+
+### HTML
+
+```html
+<div class="container">
+  <div class="item">I am centered!</div>
+</div>
+```
+
+### CSS
+
+```css
+div {
+  border: solid 3px;
+  padding: 1em;
+  max-width: 75%;
+}
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 8em;
+}
+```
+
+컨테이너의 높이를 지정하면 컨테이너 내부의 아이템이 실제로 수직 방향으로 중앙 정렬된 것을 확인할 수 있습니다.
+
+### 결과
+
+{{ EmbedLiveSample('Using_flexbox', 400, 200) }}
+
+컨테이너에 `align-items: center;`를 적용하는 대신, 내부 아이템에 {{cssxref("align-self")}}를 `center`로 지정해서 내부 아이템 자체를 수직으로 중앙 정렬할 수 있습니다.
+
+## 그리드 사용
+
+박스를 다른 박스 내부에서 중앙 정렬하는 또 다른 방법은 감싸고 있는 박스를 [그리드 컨테이너](/ko/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#grid_container)로 만들고 {{cssxref("place-items")}} 속성을 `center`로 지정해서 내부의 아이템들을 블록과 인라인 축에서 중앙 정렬 하는 것입니다.
+
+### HTML
+
+```html
+<div class="container">
+  <div class="item">I am centered!</div>
+</div>
+```
+
+### CSS
+
+```css
+div {
+  border: solid 3px;
+  padding: 1em;
+  max-width: 75%;
+}
+.container {
+  display: grid;
+  place-items: center;
+  height: 8em;
+}
+```
+
+### 결과
+
+{{ EmbedLiveSample('Using_grid', 400, 200) }}
+
+컨테이너에 `place-items: center;`를 적용하는 대신, 컨테이너에 {{cssxref("place-content", "place-content: center;")}}를 지정하거나 내부 아이템 자체에 {{cssxref("place-self", "place-self: center")}} 또는 {{cssxref("margin", "margin: auto;")}}를 지정하여 동일하게 중앙 정렬을 할 수 있습니다.
+
+## MDN 관련 문서
+
+- [Box alignment in flexbox](/ko/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox)
+- [CSS box alignment guide](/ko/docs/Web/CSS/CSS_box_alignment)
diff --git a/files/ko/web/css/scale/index.md b/files/ko/web/css/scale/index.md
new file mode 100644
index 00000000000000..e986aa361ae411
--- /dev/null
+++ b/files/ko/web/css/scale/index.md
@@ -0,0 +1,114 @@
+---
+title: scale
+slug: Web/CSS/scale
+l10n:
+  sourceCommit: 024449e686746a0d036edeb2323bfe21adfa2155
+---
+
+{{CSSRef}}
+
+[CSS](/ko/docs/Web/CSS) **`scale`** 속성은 {{CSSxRef("transform")}} 속성과는 독립적으로 개별적인 크기 변형을 지정할 수 있게 합니다. 이는 일반적인 사용자 인터페이스 사용에 더 알맞고, `transform` 값을 사용할 때처럼 정확한 순서를 기억해야 할 필요가 없습니다.
+
+{{EmbedInteractiveExample("pages/css/scale.html")}}
+
+## 구문
+
+```css
+/* 키워드 값 */
+scale: none;
+
+/* 단일 값 */
+/* 값이 1 혹은 100% 보다 크면 요소가 확대됩니다. */
+scale: 2;
+/* 값이 1 혹은 100% 보다 작으면 요소가 수축됩니다. */
+scale: 50%;
+
+/* 두 개의 값 */
+scale: 2 0.5;
+
+/* 세 개의 값 */
+scale: 200% 50% 200%;
+
+/* 전역 값 */
+scale: inherit;
+scale: initial;
+scale: revert;
+scale: revert-layer;
+scale: unset;
+```
+
+### 값
+
+- 단일 값
+  - : X축과 Y축 모두에서 동일한 비율의 영향을 받는 요소의 크기 비율을 지정하기 위해 {{cssxref("&lt;number&gt;")}} 혹은 {{cssxref("&lt;percentage&gt;")}} 값을 사용합니다. `scale()` (2D 크기 조정)이 단일 값으로 설정되었을 때와 동일한 동작입니다.
+- 두 개의 값
+  - : 2D 크기 조정의 X축과 Y축 값을 각각 지정하는 두 개의 {{cssxref("&lt;number&gt;")}} 혹은 {{cssxref("&lt;percentage&gt;")}} 값입니다. `scale()` (2D 크기 조정)이 두 개의 값으로 설정되었을 때와 동일한 동작입니다.
+- 세 개의 값
+  - : 3D 크기 조정의 X축, Y축, Z축 값을 각각 지정하는 세 개의 {{cssxref("&lt;number&gt;")}} 혹은 {{cssxref("&lt;percentage&gt;")}} 값입니다. `scale3d()` (3D 크기 조정) 함수와 동일한 동작입니다.
+- `none`
+  - : 어떠한 크기 조정도 지정하지 않습니다.
+
+## 형식 정의
+
+{{cssinfo}}
+
+## 형식 구문
+
+{{csssyntax}}
+
+## 예제
+
+### 호버 시 요소의 크기 조정하기
+
+아래 예제는 호버 시 요소의 크기를 어떻게 지정하는지를 나타냅니다.
+두 개의 박스가 있으며 하나는 단일 `scale` 값을 사용하여 양축으로 크기가 지정됩니다.
+두 번째 박스는 두 개의 `scale` 값을 사용하여 X축과 Y축을 독립적으로 조정합니다.
+
+#### HTML
+
+```html
+<div class="box" id="box1">단일 값</div>
+<div class="box" id="box2">두 개의 값</div>
+```
+
+#### CSS
+
+```css
+.box {
+  float: left;
+  margin: 1em;
+  width: 7em;
+  line-height: 7em;
+  text-align: center;
+  transition: 0.5s ease-in-out;
+  border: 3px dotted;
+}
+
+#box1:hover {
+  scale: 1.25;
+}
+
+#box2:hover {
+  scale: 1.25 0.75;
+}
+```
+
+#### 결과
+
+{{EmbedLiveSample("Scaling_an_element_on_hover", "100%", 150)}}
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{cssxref('translate')}}
+- {{cssxref('rotate')}}
+- {{cssxref('transform')}}
+
+Note: skew는 독립적인 변형 값이 아닙니다.
diff --git a/files/ko/web/javascript/guide/indexed_collections/index.md b/files/ko/web/javascript/guide/indexed_collections/index.md
index 438c7dd8d8566f..71a94155cd841a 100644
--- a/files/ko/web/javascript/guide/indexed_collections/index.md
+++ b/files/ko/web/javascript/guide/indexed_collections/index.md
@@ -559,7 +559,7 @@ const a = Array(5); // [ <5 empty items> ]
 // 배열 리터럴의 연속된 쉼표
 const b = [1, 2, , , 5]; // [ 1, 2, <2 empty items>, 5 ]
 
-// array.length보다 큰 인덱스의 슬록에 직접적으로 값 설정하기
+// array.length보다 큰 인덱스의 슬롯에 직접적으로 값 설정하기
 const c = [1, 2];
 c[4] = 5; // [ 1, 2, <2 empty items>, 5 ]
 
diff --git a/files/ko/web/javascript/reference/global_objects/regexp/unicodesets/index.md b/files/ko/web/javascript/reference/global_objects/regexp/unicodesets/index.md
new file mode 100644
index 00000000000000..c858de8b3b00f5
--- /dev/null
+++ b/files/ko/web/javascript/reference/global_objects/regexp/unicodesets/index.md
@@ -0,0 +1,55 @@
+---
+title: RegExp.prototype.unicodeSets
+slug: Web/JavaScript/Reference/Global_Objects/RegExp/unicodeSets
+l10n:
+  sourceCommit: 8421c0cd94fa5aa237c833ac6d24885edbc7d721
+---
+
+{{JSRef}}
+
+**`unicodeSets`** 접근자 속성은 {{jsxref("RegExp")}} 인스턴스의 속성으로, 이 정규 표현식에 `v` 플래그가 사용되었는지 여부를 반환합니다.
+
+## 설명
+
+`RegExp.prototype.unicodeSets`는 `v` 플래그가 사용된 경우 `true` 값을 가지며, 그렇지 않으면 `false`입니다. `v` 플래그는 [`u`](/ko/docs/Web/JavaScript/Reference/Global_Objects/RegExp/unicode) 플래그의 업그레이드 버전으로, 더 많은 유니코드 관련 기능을 활성화합니다. ("v"는 알파벳에서 "u" 다음 글자입니다.) `u`와 `v`는 동일한 정규식을 호환되지 않는 방식으로 해석하기 때문에, 두 플래그를 모두 사용하면 {{jsxref("SyntaxError")}}가 발생합니다. `v` 플래그를 사용하면 `u` 플래그 설명에 언급된 모든 기능과 함께 다음과 같은 추가 기능을 사용할 수 있습니다.
+
+- [`\p`](/ko/docs/Web/JavaScript/Reference/Regular_expressions/Unicode_character_class_escape) 이스케이프 시퀀스를 문자뿐만 아니라 문자열의 속성과도 일치시키는 데 사용할 수 있습니다.
+- [문자 클래스](/ko/docs/Web/JavaScript/Reference/Regular_expressions/Character_class) 구문이 업그레이드되어 교집합, 합집합, 차집합 구문을 허용하며, 여러 유니코드 문자와 일치시킬 수 있습니다.
+- 문자 클래스 보수 구문 `[^...]`은 일치 결과를 부정하는 대신 보수 클래스를 구성하여 대소문자 구분 없는 일치에서 일부 혼란스러운 동작을 피합니다. 자세한 내용은 [보수 클래스와 대소문자 구분 없는 일치](/ko/docs/Web/JavaScript/Reference/Regular_expressions/Character_class#complement_classes_and_case-insensitive_matching)를 참조하세요.
+
+`u` 모드에서 유효했던 일부 정규식은 `v` 모드에서 유효하지 않습니다. 특히 문자 클래스 구문이 다르고 일부 문자는 더 이상 문자 그대로 나타날 수 없습니다. 자세한 내용은 [`v` 모드 문자 클래스](/ko/docs/Web/JavaScript/Reference/Regular_expressions/Character_class#v-mode_character_class)를 참조하세요.
+
+> [!NOTE] > `v` 모드는 문자소를 단일 문자로 해석하지 않습니다. 여전히 다수의 코드 포인트입니다. 예를 들어, `/[🇺🇳]/v`는 여전히 `"🇺"`와 일치할 수 있습니다.
+
+`unicodeSets`의 설정자는 `undefined`입니다. 이 속성을 직접 변경할 수 없습니다.
+
+## 예제
+
+### unicodeSets 속성 사용하기
+
+```js
+const regex = /[\p{Script_Extensions=Greek}&&\p{Letter}]/v;
+
+console.log(regex.unicodeSets); // true
+```
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 같이 보기
+
+- {{jsxref("RegExp.prototype.lastIndex")}}
+- {{jsxref("RegExp.prototype.dotAll")}}
+- {{jsxref("RegExp.prototype.global")}}
+- {{jsxref("RegExp.prototype.hasIndices")}}
+- {{jsxref("RegExp.prototype.ignoreCase")}}
+- {{jsxref("RegExp.prototype.multiline")}}
+- {{jsxref("RegExp.prototype.source")}}
+- {{jsxref("RegExp.prototype.sticky")}}
+- {{jsxref("RegExp.prototype.unicode")}}
+- [문자열의 표기법 및 속성을 설정하는 RegExp v 플래그](https://v8.dev/features/regexp-v-flag) - v8.dev (2022)
diff --git a/files/ko/web/javascript/reference/global_objects/string/at/index.md b/files/ko/web/javascript/reference/global_objects/string/at/index.md
index f9e503496fbb0e..6a98427da6e9c4 100644
--- a/files/ko/web/javascript/reference/global_objects/string/at/index.md
+++ b/files/ko/web/javascript/reference/global_objects/string/at/index.md
@@ -1,11 +1,13 @@
 ---
 title: String.prototype.at()
 slug: Web/JavaScript/Reference/Global_Objects/String/at
+l10n:
+  sourceCommit: c2445ce1dc3a0170e2fbfdbee10e18a7455c2282
 ---
 
 {{JSRef}}
 
-**`at()`** 메서드는 정수 값을 받아서 지정된 오프셋에 있는 단일 UTF-16 코드 단위로 구성된 새 {{jsxref('String')}}을 반환합니다. 이 방법은 양의 정수와 음의 정수를 허용합니다. 음의 정수는 문자열의 마지막부터 셉니다.
+{{jsxref("String")}} 값의 **`at()`** 메서드는 정수 값을 받아 지정된 오프셋에 위치한 단일 UTF-16 코드 유닛으로 구성된 새로운 {{jsxref("String")}}을 반환합니다. 이 메서드는 양의 정수와 음의 정수를 모두 허용합니다. 음의 정수는 문자열의 마지막 문자부터 거꾸로 세어 위치를 지정합니다.
 
 {{EmbedInteractiveExample("pages/js/string-at.html")}}
 
@@ -18,11 +20,11 @@ at(index)
 ### 매개변수
 
 - `index`
-  - : 문자열에서 반환할 문자의 인덱스(위치)입니다. 인덱스로 음수를 전달할 때 문자열의 끝에서 상대적인 색인을 지원합니다. 즉, 음수가 사용되면 반환할 문자는 문자열의 끝에서 역으로 계산하여 찾습니다.
+  - : 반환할 문자열 문자의 인덱스(위치)입니다. 음수 인덱스를 전달하면 문자열 끝에서부터의 상대적 인덱싱을 지원합니다. 즉, 음수가 사용되면 반환되는 문자는 문자열의 끝에서부터 거꾸로 세어 찾아집니다.
 
 ### 반환 값
 
-지정된 위치에 있는 단일 UTF-16 코드 단위로 구성된 새 {{jsxref('String')}}. 만약 주어진 인덱스를 찾을 수 없는 경우 {{jsxref('undefined')}}을 반환합니다.
+지정된 위치에 있는 단일 UTF-16 코드 유닛으로 구성된 {{jsxref("String")}}을 반환합니다. 주어진 인덱스를 찾을 수 없으면 {{jsxref("undefined")}}를 반환합니다.
 
 ## 예제
 
@@ -35,6 +37,7 @@ at(index)
 function returnLast(arr) {
   return arr.at(-1);
 }
+
 let invoiceRef = "myinvoice01";
 
 console.log(returnLast(invoiceRef)); // '1'
@@ -46,7 +49,7 @@ console.log(returnLast(invoiceRef)); // '2'
 
 ### 메서드 비교하기
 
-여기서 {{jsxref('String')}}의 끝에서 두 번째 문자를 선택하는 다양한 방법을 비교하겠습니다. 아래의 모든 방법이 유효하며, 싱대적으로 `at()`의 간결함과 가독성이 돋보입니다.
+여기서는 {{jsxref("String")}}의 끝에서 두 번째(마지막에서 하나 앞) 문자를 선택하는 다양한 방법을 비교합니다. 아래의 모든 방법이 유효하지만, 이는 `at()` 메서드의 간결성과 가독성을 강조합니다.
 
 ```js
 const myString = "Every green bus drives fast.";
@@ -64,7 +67,7 @@ const atWay = myString.at(-2);
 console.log(atWay); // 't'
 ```
 
-## 명세
+## 명세서
 
 {{Specifications}}
 
@@ -74,8 +77,7 @@ console.log(atWay); // 't'
 
 ## 같이 보기
 
-- [Polyfill of `String.prototype.at` in `core-js`](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
-- [A polyfill for the at() method](https://github.com/tc39/proposal-relative-indexing-method#polyfill).
+- [`core-js`에서의 `String.prototype.at` 폴리필](https://github.com/zloirock/core-js#ecmascript-string-and-regexp)
 - {{jsxref("String.prototype.indexOf()")}}
 - {{jsxref("String.prototype.lastIndexOf()")}}
 - {{jsxref("String.prototype.charCodeAt()")}}
diff --git a/files/ko/web/javascript/reference/global_objects/weakset/index.md b/files/ko/web/javascript/reference/global_objects/weakset/index.md
index a12c11d5da6dca..02297c449b1228 100644
--- a/files/ko/web/javascript/reference/global_objects/weakset/index.md
+++ b/files/ko/web/javascript/reference/global_objects/weakset/index.md
@@ -99,7 +99,7 @@ ws.has(foo); // true
 ws.has(bar); // true
 
 ws.delete(foo); // set에서 foo를 제거
-ws.has(foo); // false, foo 는 이미 제거has been removed
+ws.has(foo); // false, foo 는 이미 제거
 ws.has(bar); // true, bar 는 유지 됨
 ```
 
diff --git a/files/ko/web/javascript/reference/statements/try...catch/index.md b/files/ko/web/javascript/reference/statements/try...catch/index.md
new file mode 100644
index 00000000000000..30ba3a337c7a0e
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/try...catch/index.md
@@ -0,0 +1,314 @@
+---
+title: try...catch
+slug: Web/JavaScript/Reference/Statements/try...catch
+l10n:
+  sourceCommit: 4e947e81afc753bedcaaba75f262a07b92511849
+---
+
+{{jsSidebar("Statements")}}
+
+**`try...catch`** 문은 `try` 블록과 `catch` 블록, `finally` 블록 중 하나 혹은 두 블록으로 구성됩니다. `try` 블록 내 코드가 먼저 실행되고, 만약 그 안에서 예외가 발생한다면 `catch` 블록 내 코드가 실행됩니다. `finally` 블록 내 코드는 항상 실행되며, 제어 흐름이 전체 구문을 종료하기 전에 실행됩니다.
+
+{{EmbedInteractiveExample("pages/js/statement-trycatch.html")}}
+
+## 문법
+
+```js-nolint
+try {
+  tryStatements
+} catch (exceptionVar) {
+  catchStatements
+} finally {
+  finallyStatements
+}
+```
+
+- `tryStatements`
+  - : `try` 블록에서 실행될 구문들입니다.
+- `catchStatements`
+  - : `try` 블록에서 예외가 발생했을 때 실행될 구문들입니다.
+- `exceptionVar` {{optional_inline}}
+  - : 해당 `catch` 블록에서 잡힌 예외를 담는 선택적 [식별자 혹은 패턴](#catch_binding)입니다. 만약 `catch` 블록에서 예외 값을 사용하지 않는 경우 `exceptionVar` 과 괄호를 생략할 수 있습니다.
+- `finallyStatements`
+  - : `try...catch...finally` 구문에서 제어 흐름이 빠져나가기 전에 실행되는 구문들입니다. 예외가 발생했는지 여부와 관계없이 항상 실행됩니다.
+
+## 설명
+
+`try` 문은 항상 `try` 블록으로 시작합니다. 그리고 `catch` 블록 또는 `finally` 블록 중 하나가 반드시 존재해야 합니다. `catch` 블록과 `finally` 블록을 모두 가질 수도 있습니다. 이렇게 해서 `try` 문에는 다음과 같은 세 가지 형태가 있습니다.
+
+- `try...catch`
+- `try...finally`
+- `try...catch...finally`
+
+다른 구조인 [`if`](/ko/docs/Web/JavaScript/Reference/Statements/if...else) 나 [`for`](/ko/docs/Web/JavaScript/Reference/Statements/for)와 달리, `try`, `catch`, `finally` 블록은 반드시 단일 구문이 아닌 중괄호 {} 로 감싸진 블록이어야 합니다.
+
+```js-nolint example-bad
+try doSomething(); // SyntaxError
+catch (e) console.log(e);
+```
+
+`catch` 블록에는 `try` 블록에서 예외가 발생했을 때 어떻게 처리할지에 대한 구문들이 포함됩니다. 만약 `try` 블록 내의 어떤 구문(또는 `try` 블록 내에서 호출된 함수)에서 예외가 발생하면, 제어 흐름이 즉시 `catch` 블록으로 전환됩니다. `try` 블록에서 예외가 발생하지 않으면 `catch` 블록은 실행되지 않습니다.
+
+`finally` 블록은 `try...catch...finally` 구문에서 제어 흐름이 빠져나가기 전에 항상 실행됩니다. 즉 예외가 발생했는지 여부와 관계없이, `finally` 블록은 항상 실행됩니다.
+
+하나 이상의 `try` 문을 중첩해서 사용할 수 있습니다. 내부 `try` 문에 `catch` 블록이 없는 경우, 외부 `try` 문의 `catch` 블록이 대신 사용됩니다. 즉, 즉, 중첩된 `try` 문 내에서 예외가 발생하면, 가장 가까운 상위 `catch` 블록이 해당 예외를 처리하게 됩니다.
+
+또한, `try` 문을 사용하여 JavaScript 예외를 처리할 수 있습니다. JavaScript 예외 처리에 대한 자세한 정보는 [JavaScript 안내서](/ko/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#exception_handling_statements)를 참고하시면 됩니다.
+
+### Catch 바인딩
+
+`try` 블록에서 예외가 발생하면, `exceptionVar`(즉, `catch (e)` 에서의 `e`)에 예외 값이 저장됩니다. 이 {{Glossary("binding")}}을 이용해 발생한 예외에 대한 정보를 얻을 수 있습니다. 이 {{Glossary("binding")}}은 `catch` 블록의 {{Glossary("Scope", "scope")}} 내에서만 사용할 수 있습니다.
+
+`exceptionVar`는 반드시 단일 식별자일 필요가 없습니다. [구조 분해 할당](/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)을 사용하여 여러 개의 식별자를 한 번에 할당할 수 있습니다.
+
+```js
+try {
+  throw new TypeError("oops");
+} catch ({ name, message }) {
+  console.log(name); // "TypeError"
+  console.log(message); // "oops"
+}
+```
+
+`catch` 절에 의해 생성된 바인딩은 `catch` 블록과 동일한 범위에 존재합니다. 따라서 catch 블록 내에서 선언된 변수는 `catch` 절에 의해 생성된 바인딩과 동일한 이름을 가질 수 없습니다. ([이 규칙에 한가지 예외가 있지만](/ko/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features#statements), 이는 더 이상 사용되지 않는 문법입니다.)
+
+```js-nolint example-bad
+try {
+  throw new TypeError("oops");
+} catch ({ name, message }) {
+  var name; // SyntaxError: Identifier 'name' has already been declared
+  let message; // SyntaxError: Identifier 'message' has already been declared
+}
+```
+
+예외 바인딩은 쓰기 가능합니다. 예를 들어, 예외 값을 정규화하여 {{jsxref("Error")}} 객체인지 확인할 수 있습니다.
+
+```js
+try {
+  throw "Oops; this is not an Error object";
+} catch (e) {
+  if (!(e instanceof Error)) {
+    e = new Error(e);
+  }
+  console.error(e.message);
+}
+```
+
+예외 값이 필요 없는 경우에는 괄호와 함께 예외 변수 자체를 생략할 수 있습니다.
+
+```js
+function isValidJSON(text) {
+  try {
+    JSON.parse(text);
+    return true;
+  } catch {
+    return false;
+  }
+}
+```
+
+### finally 블록
+
+`finally` 블록은 `try` 블록과 `catch` 블록(들)이 실행된 후에 실행할 구문들을 포함하지만, `try...catch...finally` 블록 다음의 구문들보다 먼저 실행됩니다. 제어 흐름은 항상 `finally` 블록으로 진입하며, 다음과 같은 방식 중 하나로 진행될 수 있습니다.
+
+- `try` 블록이 정상적으로 실행을 마치고 (예외가 발생하지 않은 경우)
+- `catch` 블록이 정상적으로 실행을 마치고
+- `try` 블록이나 `catch` 블록에서 제어 흐름 구문(`return`, `throw`, `break`, `continue`)이 실행되어 해당 블록을 벗어나기 직전에
+
+예외를 처리할 `catch` 블록이 없더라도 `try` 블록에서 예외가 발생한다면 `finally` 블록은 실행됩니다. 이러한 경우 `finally` 블록이 실행을 마친 직후 해당 예외가 다시 던져집니다.
+
+다음 예제는 finally 블록의 한 가지 사용 사례를 보여줍니다. 이 코드는 파일을 열고 그 파일을 사용하는 구문들을 실행합니다. 그리고 `finally` 블록은 예외가 발생했더라도 파일이 항상 닫히도록 보장합니다.
+
+```js
+openMyFile();
+try {
+  // tie up a resource
+  writeMyFile(theData);
+} finally {
+  closeMyFile(); // always close the resource
+}
+```
+
+`finally` 블록 내의 제어 흐름 구문(`return`, `throw`, `break`, `continue`)은 `try` 블록이나 `catch` 블록의 완료 값을 "가립니다". 아래 예시에서, `try`블록에서 1을 반환하려고 하지만, 반환하기 전에 제어 흐름이 `finally`블록에 먼저 전달되어 `finally` 블록의 반환 값(2)이 대신 반환됩니다.
+
+```js
+function doIt() {
+  try {
+    return 1;
+  } finally {
+    return 2;
+  }
+}
+
+doIt(); // returns 2
+```
+
+`finally` 블록 내에 제어 흐름 구문을 사용하는 것은 일반적으로 좋지 않은 생각입니다. `finally` 블록은 오직 정리 작업을 위한 코드에만 사용해야 합니다.
+
+## 예시
+
+### 무조건적 catch 블록
+
+`catch` 블록을 사용하면 `try` 블록 내에서 어떤 예외가 발생하든 `catch` 블록이 실행됩니다. 예를 들어, 다음 코드에서 예외가 발생하면 제어 흐름이 `catch` 블록으로 전달됩니다.
+
+```js
+try {
+  throw "myException"; // generates an exception
+} catch (e) {
+  // statements to handle any exceptions
+  logMyErrors(e); // pass exception object to error handler
+}
+```
+
+`catch` 블록에서는 식별자(`e`와 같은)를 지정하여 예외 객체의 값을 캡처할 수 있습니다. 이 식별자가 참조하는 예외 객체의 값은 `catch` 블록의 {{Glossary("Scope", "범위")}} 내에서만 사용할 수 있습니다.
+
+### 조건적 catch 블록
+
+여러 개의 `try...catch` 블록과 `if...else if...else` 구문을 조합하면 "조건부 `catch` 블록"을 만들 수 있습니다. 예를 들어, 다음과 같은 코드를 작성할 수 있습니다.
+
+```js
+try {
+  myroutine(); // may throw three types of exceptions
+} catch (e) {
+  if (e instanceof TypeError) {
+    // statements to handle TypeError exceptions
+  } else if (e instanceof RangeError) {
+    // statements to handle RangeError exceptions
+  } else if (e instanceof EvalError) {
+    // statements to handle EvalError exceptions
+  } else {
+    // statements to handle any unspecified exceptions
+    logMyErrors(e); // pass exception object to error handler
+  }
+}
+```
+
+조건부 `catch` 블록의 일반적인 사용 사례는 예상되는 일부 오류만 포착하고 억제한 후, 다른 경우에는 오류를 다시 던지는 것입니다.
+
+```js
+try {
+  myRoutine();
+} catch (e) {
+  if (e instanceof RangeError) {
+    // statements to handle this very common expected error
+  } else {
+    throw e; // re-throw the error unchanged
+  }
+}
+```
+
+이것은 Java와 같은 다른 프로그래밍 언어와 유사한 형태를 취할 수 있습니다.
+
+```java
+try {
+  myRoutine();
+} catch (RangeError e) {
+  // statements to handle this very common expected error
+}
+// Other errors are implicitly re-thrown
+```
+
+### 중첩 try 블록
+
+먼저, 다음과 같은 코드가 어떻게 되는지 살펴보겠습니다.
+
+```js
+try {
+  try {
+    throw new Error("oops");
+  } finally {
+    console.log("finally");
+  }
+} catch (ex) {
+  console.error("outer", ex.message);
+}
+
+// Logs:
+// "finally"
+// "outer" "oops"
+```
+
+이제 `catch` 블록을 추가하여 내부 `try` 블록에서 이미 예외를 포착한다면:
+
+```js
+try {
+  try {
+    throw new Error("oops");
+  } catch (ex) {
+    console.error("inner", ex.message);
+  } finally {
+    console.log("finally");
+  }
+} catch (ex) {
+  console.error("outer", ex.message);
+}
+
+// Logs:
+// "inner" "oops"
+// "finally"
+```
+
+이제 오류를 다시 발생시키겠습니다.
+
+```js
+try {
+  try {
+    throw new Error("oops");
+  } catch (ex) {
+    console.error("inner", ex.message);
+    throw ex;
+  } finally {
+    console.log("finally");
+  }
+} catch (ex) {
+  console.error("outer", ex.message);
+}
+
+// Logs:
+// "inner" "oops"
+// "finally"
+// "outer" "oops"
+```
+
+예외는 가장 가까운 `catch` 블록에서 한 번만 잡히게 되며, 다시 던져지지 않는 한 외부 `catch` 블록에서는 잡히지 않습니다. 물론 "내부" 블록(즉, `catch` 블록 내부)에서 새로운 예외가 발생한다면, "외부" 블록에서 해당 예외를 잡을 수 있습니다.
+
+### finally 블록에서의 반환하기
+
+만약 `finally` 블록에서 값을 반환하면, 해당 값이 전체 `try-catch-finally` 문의 반환 값이 됩니다. 이는 `try` 블록이나 `catch` 블록 내에 있는 `return` 문에 관계없이 적용됩니다. 이는 `catch` 블록 내에서 발생한 예외에도 포함합니다.
+
+```js
+(() => {
+  try {
+    try {
+      throw new Error("oops");
+    } catch (ex) {
+      console.error("inner", ex.message);
+      throw ex;
+    } finally {
+      console.log("finally");
+      return;
+    }
+  } catch (ex) {
+    console.error("outer", ex.message);
+  }
+})();
+
+// Logs:
+// "inner" "oops"
+// "finally"
+```
+
+`finally` 블록에서 값을 반환했기 때문에 (이는 전체 `try-catch-finally` 문의 반환 값) 외부로 "oops"는 전파되지 않습니다. 이는 `catch` 블록에서 반환된 어떤 값에도 동일하게 적용됩니다.
+
+## 명세서
+
+{{Specifications}}
+
+## 브라우저 호환성
+
+{{Compat}}
+
+## 관련 항목
+
+- {{jsxref("Error")}}
+- {{jsxref("Statements/throw", "throw")}}
diff --git a/files/pt-br/_redirects.txt b/files/pt-br/_redirects.txt
index fe8690bdb4140c..848ca531656020 100644
--- a/files/pt-br/_redirects.txt
+++ b/files/pt-br/_redirects.txt
@@ -638,7 +638,7 @@
 /pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/atob	/pt-BR/docs/Web/API/Window/atob
 /pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout	/pt-BR/docs/Web/API/clearTimeout
 /pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/fetch	/pt-BR/docs/Web/API/Window/fetch
-/pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/setInterval	/pt-BR/docs/Web/API/setInterval
+/pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/setInterval	/pt-BR/docs/Web/API/Window/setInterval
 /pt-BR/docs/Web/API/WindowTimers.clearTimeout	/pt-BR/docs/Web/API/clearTimeout
 /pt-BR/docs/Web/API/WindowTimers/clearTimeout	/pt-BR/docs/Web/API/clearTimeout
 /pt-BR/docs/Web/API/XMLDocument/async	/pt-BR/docs/conflicting/Web/API/XMLDocument
@@ -670,6 +670,7 @@
 /pt-BR/docs/Web/API/notificacoes	/pt-BR/docs/Web/API/Notification
 /pt-BR/docs/Web/API/origin	/pt-BR/docs/Web/API/Window/origin
 /pt-BR/docs/Web/API/performance_property	/pt-BR/docs/Web/API/Window/performance
+/pt-BR/docs/Web/API/setInterval	/pt-BR/docs/Web/API/Window/setInterval
 /pt-BR/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role	/pt-BR/docs/Web/Accessibility/ARIA/Roles/alert_role
 /pt-BR/docs/Web/Accessibility/ARIA/ARIA_Techniques/Utilizando_o_alert_role	/pt-BR/docs/Web/Accessibility/ARIA/Roles/alert_role
 /pt-BR/docs/Web/Accessibility/ARIA/ARIA_Test_Cases	/pt-BR/docs/Web/Accessibility/ARIA
@@ -814,11 +815,14 @@
 /pt-BR/docs/Web/HTML/ReferenciaHTML	/pt-BR/docs/Web/HTML/Reference
 /pt-BR/docs/Web/HTML/formatos_midia_suportados	/pt-BR/docs/Web/Media/Formats
 /pt-BR/docs/Web/HTML/microformatos	/pt-BR/docs/Web/HTML/microformats
-/pt-BR/docs/Web/HTTP/Basico_sobre_HTTP	/pt-BR/docs/Web/HTTP/Basics_of_HTTP
+/pt-BR/docs/Web/HTTP/Basico_sobre_HTTP	/pt-BR/docs/conflicting/Web/HTTP
 /pt-BR/docs/Web/HTTP/Basico_sobre_HTTP/Identifying_resources_on_the_Web	/pt-BR/docs/orphaned/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web
-/pt-BR/docs/Web/HTTP/Basico_sobre_HTTP/MIME_types	/pt-BR/docs/Web/HTTP/Basics_of_HTTP/MIME_types
-/pt-BR/docs/Web/HTTP/Basico_sobre_HTTP/MIME_types/Complete_list_of_MIME_types	/pt-BR/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+/pt-BR/docs/Web/HTTP/Basico_sobre_HTTP/MIME_types	/pt-BR/docs/Web/HTTP/MIME_types
+/pt-BR/docs/Web/HTTP/Basico_sobre_HTTP/MIME_types/Complete_list_of_MIME_types	/pt-BR/docs/Web/HTTP/MIME_types/Common_types
+/pt-BR/docs/Web/HTTP/Basics_of_HTTP	/pt-BR/docs/conflicting/Web/HTTP
 /pt-BR/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web	/pt-BR/docs/orphaned/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web
+/pt-BR/docs/Web/HTTP/Basics_of_HTTP/MIME_types	/pt-BR/docs/Web/HTTP/MIME_types
+/pt-BR/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types	/pt-BR/docs/Web/HTTP/MIME_types/Common_types
 /pt-BR/docs/Web/HTTP/Cabecalhos_HTTP	/pt-BR/docs/Web/HTTP/Headers
 /pt-BR/docs/Web/HTTP/Compressão	/pt-BR/docs/Web/HTTP/Compression
 /pt-BR/docs/Web/HTTP/Controle_Acesso_CORS	/pt-BR/docs/Web/HTTP/CORS
diff --git a/files/pt-br/_wikihistory.json b/files/pt-br/_wikihistory.json
index f6a8bc497c8211..111cbd07d6699a 100644
--- a/files/pt-br/_wikihistory.json
+++ b/files/pt-br/_wikihistory.json
@@ -4092,6 +4092,10 @@
     "modified": "2019-03-23T22:04:49.012Z",
     "contributors": ["jika"]
   },
+  "Web/API/Window/setInterval": {
+    "modified": "2020-10-15T22:16:56.864Z",
+    "contributors": ["luan0ap"]
+  },
   "Web/API/Window/storage_event": {
     "modified": "2019-03-23T22:03:39.969Z",
     "contributors": ["GPrimola", "gustavoverasmorais"]
@@ -4237,10 +4241,6 @@
     "modified": "2019-03-18T21:45:25.881Z",
     "contributors": ["raduq"]
   },
-  "Web/API/setInterval": {
-    "modified": "2020-10-15T22:16:56.864Z",
-    "contributors": ["luan0ap"]
-  },
   "Web/Accessibility": {
     "modified": "2019-09-09T14:18:55.700Z",
     "contributors": [
@@ -6187,18 +6187,6 @@
     "modified": "2019-03-18T20:54:05.177Z",
     "contributors": ["ViniciusMatias"]
   },
-  "Web/HTTP/Basics_of_HTTP": {
-    "modified": "2019-03-18T20:54:14.334Z",
-    "contributors": ["mauromattos00", "wdot789"]
-  },
-  "Web/HTTP/Basics_of_HTTP/MIME_types": {
-    "modified": "2019-12-16T17:35:45.160Z",
-    "contributors": ["JpOnline", "hugojunior", "marcusedu"]
-  },
-  "Web/HTTP/Basics_of_HTTP/MIME_types/Common_types": {
-    "modified": "2019-03-23T22:04:21.860Z",
-    "contributors": ["khalid_ait", "berbare", "lpdouglas"]
-  },
   "Web/HTTP/CORS": {
     "modified": "2020-10-15T21:51:46.835Z",
     "contributors": [
@@ -6643,6 +6631,14 @@
     "modified": "2020-10-15T22:31:47.343Z",
     "contributors": ["FernandoKGA"]
   },
+  "Web/HTTP/MIME_types": {
+    "modified": "2019-12-16T17:35:45.160Z",
+    "contributors": ["JpOnline", "hugojunior", "marcusedu"]
+  },
+  "Web/HTTP/MIME_types/Common_types": {
+    "modified": "2019-03-23T22:04:21.860Z",
+    "contributors": ["khalid_ait", "berbare", "lpdouglas"]
+  },
   "Web/HTTP/Messages": {
     "modified": "2020-04-19T17:43:58.667Z",
     "contributors": ["satoLG", "jamrocha"]
@@ -10635,6 +10631,10 @@
     "modified": "2019-03-23T22:43:02.407Z",
     "contributors": ["expalmer", "fellyph"]
   },
+  "conflicting/Web/HTTP": {
+    "modified": "2019-03-18T20:54:14.334Z",
+    "contributors": ["mauromattos00", "wdot789"]
+  },
   "conflicting/Web/HTTP/CORS": {
     "modified": "2020-04-19T11:26:06.291Z",
     "contributors": ["marcio1002"]
diff --git a/files/pt-br/web/http/basics_of_http/index.md b/files/pt-br/conflicting/web/http/index.md
similarity index 98%
rename from files/pt-br/web/http/basics_of_http/index.md
rename to files/pt-br/conflicting/web/http/index.md
index 00a26fc059eb1c..ad60f9956ab7d4 100644
--- a/files/pt-br/web/http/basics_of_http/index.md
+++ b/files/pt-br/conflicting/web/http/index.md
@@ -1,6 +1,7 @@
 ---
 title: Básico sobre HTTP
-slug: Web/HTTP/Basics_of_HTTP
+slug: conflicting/Web/HTTP
+original_slug: Web/HTTP/Basics_of_HTTP
 ---
 
 {{HTTPSidebar}}
diff --git a/files/pt-br/web/api/setinterval/index.md b/files/pt-br/web/api/window/setinterval/index.md
similarity index 99%
rename from files/pt-br/web/api/setinterval/index.md
rename to files/pt-br/web/api/window/setinterval/index.md
index 074b70005bccee..629cfc8f13d6ce 100644
--- a/files/pt-br/web/api/setinterval/index.md
+++ b/files/pt-br/web/api/window/setinterval/index.md
@@ -1,6 +1,7 @@
 ---
 title: WindowOrWorkerGlobalScope.setInterval()
-slug: Web/API/setInterval
+slug: Web/API/Window/setInterval
+original_slug: Web/API/setInterval
 ---
 
 {{APIRef("HTML DOM")}}
diff --git a/files/pt-br/web/http/basics_of_http/mime_types/common_types/index.md b/files/pt-br/web/http/mime_types/common_types/index.md
similarity index 99%
rename from files/pt-br/web/http/basics_of_http/mime_types/common_types/index.md
rename to files/pt-br/web/http/mime_types/common_types/index.md
index 5880ec623ddd2a..ae09b8dfd5f3f9 100644
--- a/files/pt-br/web/http/basics_of_http/mime_types/common_types/index.md
+++ b/files/pt-br/web/http/mime_types/common_types/index.md
@@ -1,6 +1,7 @@
 ---
 title: Lista Incompleta de tipos MIME
-slug: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+slug: Web/HTTP/MIME_types/Common_types
+original_slug: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
 ---
 
 {{HTTPSidebar}}
diff --git a/files/pt-br/web/http/basics_of_http/mime_types/index.md b/files/pt-br/web/http/mime_types/index.md
similarity index 99%
rename from files/pt-br/web/http/basics_of_http/mime_types/index.md
rename to files/pt-br/web/http/mime_types/index.md
index 204083d2679e9c..28fbccc5b38915 100644
--- a/files/pt-br/web/http/basics_of_http/mime_types/index.md
+++ b/files/pt-br/web/http/mime_types/index.md
@@ -1,6 +1,7 @@
 ---
 title: MIME types
-slug: Web/HTTP/Basics_of_HTTP/MIME_types
+slug: Web/HTTP/MIME_types
+original_slug: Web/HTTP/Basics_of_HTTP/MIME_types
 ---
 
 {{HTTPSidebar}}
diff --git a/files/ru/_redirects.txt b/files/ru/_redirects.txt
index 3d7f7e146b5eac..1d85f8101e2f8d 100644
--- a/files/ru/_redirects.txt
+++ b/files/ru/_redirects.txt
@@ -521,6 +521,7 @@
 /ru/docs/Web/API/origin	/ru/docs/Web/API/Window/origin
 /ru/docs/Web/API/performance_property	/ru/docs/Web/API/Window/performance
 /ru/docs/Web/API/range.getBoundingClientRect	/ru/docs/Web/API/Range/getBoundingClientRect
+/ru/docs/Web/API/setInterval	/ru/docs/Web/API/Window/setInterval
 /ru/docs/Web/API/Видимость_страницы_API	/ru/docs/Web/API/Page_Visibility_API
 /ru/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video	/ru/docs/Web/Media/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video
 /ru/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/buffering_seeking_time_ranges	/ru/docs/Web/Media/Audio_and_video_delivery/buffering_seeking_time_ranges
@@ -682,11 +683,14 @@
 /ru/docs/Web/HTML/Общие_атрибуты/style	/ru/docs/Web/HTML/Global_attributes/style
 /ru/docs/Web/HTML/Общие_атрибуты/tabindex	/ru/docs/Web/HTML/Global_attributes/tabindex
 /ru/docs/Web/HTML/Ссылки	/ru/docs/Web/HTML/Reference
+/ru/docs/Web/HTTP/Basics_of_HTTP	/ru/docs/conflicting/Web/HTTP
 /ru/docs/Web/HTTP/Basics_of_HTTP/Data_URIs	/ru/docs/Web/URI/Schemes/data
 /ru/docs/Web/HTTP/Basics_of_HTTP/Data_URLs	/ru/docs/Web/URI/Schemes/data
 /ru/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web	/ru/docs/orphaned/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web
 /ru/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web_RU	/ru/docs/orphaned/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web
-/ru/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Полный_список_типов_MIME	/ru/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+/ru/docs/Web/HTTP/Basics_of_HTTP/MIME_types	/ru/docs/Web/HTTP/MIME_types
+/ru/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types	/ru/docs/Web/HTTP/MIME_types/Common_types
+/ru/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Полный_список_типов_MIME	/ru/docs/Web/HTTP/MIME_types/Common_types
 /ru/docs/Web/HTTP/Feature_Policy	/ru/docs/Web/HTTP/Permissions_Policy
 /ru/docs/Web/HTTP/Response_codes	/ru/docs/Web/HTTP/Status
 /ru/docs/Web/HTTP/Авторизация	/ru/docs/Web/HTTP/Authentication
diff --git a/files/ru/_wikihistory.json b/files/ru/_wikihistory.json
index 8e11f1df59e2f7..93a8b67bda11dd 100644
--- a/files/ru/_wikihistory.json
+++ b/files/ru/_wikihistory.json
@@ -7486,6 +7486,10 @@
       "shimopus"
     ]
   },
+  "Web/API/Window/setInterval": {
+    "modified": "2020-11-18T12:13:20.493Z",
+    "contributors": ["kosarev_va", "WhiteApfel", "lilka9", "AliaksandrZahorski"]
+  },
   "Web/API/Window/stop": {
     "modified": "2019-03-23T22:28:10.946Z",
     "contributors": ["maximTorba"]
@@ -7791,10 +7795,6 @@
     "modified": "2020-10-15T22:00:31.979Z",
     "contributors": ["ekirpichyov", "ArtemPolanskiy"]
   },
-  "Web/API/setInterval": {
-    "modified": "2020-11-18T12:13:20.493Z",
-    "contributors": ["kosarev_va", "WhiteApfel", "lilka9", "AliaksandrZahorski"]
-  },
   "Web/API/setTimeout": {
     "modified": "2020-11-18T12:03:29.649Z",
     "contributors": [
@@ -10549,31 +10549,6 @@
       "deniskoronets"
     ]
   },
-  "Web/HTTP/Basics_of_HTTP": {
-    "modified": "2020-07-14T17:05:38.093Z",
-    "contributors": ["vladimir.i.kuropatka", "enonotugh", "cissoid"]
-  },
-  "Web/HTTP/Basics_of_HTTP/MIME_types": {
-    "modified": "2019-10-21T06:21:06.123Z",
-    "contributors": [
-      "ismorozs",
-      "dartraiden",
-      "wcoder",
-      "vfr5cv",
-      "dawsonbotsford"
-    ]
-  },
-  "Web/HTTP/Basics_of_HTTP/MIME_types/Common_types": {
-    "modified": "2020-02-28T13:11:18.234Z",
-    "contributors": [
-      "chrisdavidmills",
-      "SphinxKnight",
-      "nickvoronin",
-      "MineDen",
-      "vladkras",
-      "david.orbelian"
-    ]
-  },
   "Web/HTTP/CORS": {
     "modified": "2020-10-21T11:45:01.641Z",
     "contributors": [
@@ -10850,6 +10825,27 @@
     "modified": "2020-10-15T22:01:31.139Z",
     "contributors": ["n00b"]
   },
+  "Web/HTTP/MIME_types": {
+    "modified": "2019-10-21T06:21:06.123Z",
+    "contributors": [
+      "ismorozs",
+      "dartraiden",
+      "wcoder",
+      "vfr5cv",
+      "dawsonbotsford"
+    ]
+  },
+  "Web/HTTP/MIME_types/Common_types": {
+    "modified": "2020-02-28T13:11:18.234Z",
+    "contributors": [
+      "chrisdavidmills",
+      "SphinxKnight",
+      "nickvoronin",
+      "MineDen",
+      "vladkras",
+      "david.orbelian"
+    ]
+  },
   "Web/HTTP/Messages": {
     "modified": "2020-05-02T15:29:40.125Z",
     "contributors": ["Excent163", "Sarox", "registoo", "mariag"]
@@ -15942,6 +15938,10 @@
     "modified": "2019-06-12T07:08:20.267Z",
     "contributors": ["deadblackclover", "vkorniiko"]
   },
+  "conflicting/Web/HTTP": {
+    "modified": "2020-07-14T17:05:38.093Z",
+    "contributors": ["vladimir.i.kuropatka", "enonotugh", "cissoid"]
+  },
   "orphaned/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web": {
     "modified": "2020-01-09T21:04:16.499Z",
     "contributors": ["rshmelev"]
diff --git a/files/ru/web/http/basics_of_http/index.md b/files/ru/conflicting/web/http/index.md
similarity index 98%
rename from files/ru/web/http/basics_of_http/index.md
rename to files/ru/conflicting/web/http/index.md
index 26fb583f654e84..cf64c61c5038f5 100644
--- a/files/ru/web/http/basics_of_http/index.md
+++ b/files/ru/conflicting/web/http/index.md
@@ -1,6 +1,7 @@
 ---
 title: Basics of HTTP
-slug: Web/HTTP/Basics_of_HTTP
+slug: conflicting/Web/HTTP
+original_slug: Web/HTTP/Basics_of_HTTP
 ---
 
 {{HTTPSidebar}}
diff --git a/files/ru/learn/html/tables/advanced/index.md b/files/ru/learn/html/tables/advanced/index.md
index 383a6cdaaa20ab..6ad640e8b48440 100644
--- a/files/ru/learn/html/tables/advanced/index.md
+++ b/files/ru/learn/html/tables/advanced/index.md
@@ -30,18 +30,18 @@ slug: Learn/HTML/Tables/Advanced
 Заголовок помещают сразу после тега `<table>`.
 
 > [!NOTE]
-> Атрибут [`summary`](/ru/docs/Web/HTML/Element/table#summary) также может быть использован в `<table>` элементе предоставляя описание — это также читается скринридерами. Однако мы рекомендуем вместо этого использовать `<caption>` элемент, так как `summary` {{glossary("deprecated")}} в HTML5 спецификации и не может быть прочитан зрячими пользователями (он не отображается на странице).
+> Атрибут [`summary`](/ru/docs/Web/HTML/Element/table#summary) также может быть использован в элементе `<table>` для добавления описания, которое также будет распознано программами для чтения с экрана. Однако мы рекомендуем вместо этого использовать элемент `<caption>`, так как `summary` является устаревшим и не может быть прочитан зрячими пользователями (он не отображается на странице).
 
 ### Упражнение: Добавление заголовка
 
 Давайте попробуем это, вернёмся к примеру который мы ранее встретили в прошлой статье.
 
-1. Откройте расписание занятий школьного учителя по языку в конце статьи [HTML таблицы основы](/ru/docs/Learn/HTML/Tables/Basics#Active_learning_colgroup_and_col), или сделайте копию нашего [timetable-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html) файла.
+1. Откройте расписание занятий школьного учителя по языку в конце статьи [HTML таблицы основы](/ru/docs/Learn/HTML/Tables/Basics#active_learning_colgroup_and_col) или сделайте копию нашего [timetable-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html) файла.
 2. Добавьте подходящий заголовок к таблице.
 3. Сохраните свой код и откройте его в браузере, чтобы посмотреть как это выглядит.
 
 > [!NOTE]
-> Этот пример можно найти на GitHub по ссылке [timetable-caption.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html) ([живой пример](http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html)).
+> Этот пример можно найти на GitHub по ссылке [timetable-caption.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html) ([живой пример](https://mdn.github.io/learning-area/html/tables/advanced/timetable-caption.html)).
 
 ## Добавление структуры с помощью \<thead>, \<tfoot> и \<tbody>
 
@@ -55,7 +55,7 @@ slug: Learn/HTML/Tables/Advanced
 - Элементом `<tfoot>` нужно обернуть ту часть, которая относится к footer таблицы — например, это может быть последняя строка в которой отражаются суммы по столбцам таблицы. Вы можете включить сюда footer таблицы, как и следовало ожидать, или чуть ниже заголовка таблицы (браузер всё равно отобразит его внизу таблицы).
 - Элементом `<tbody>` необходимо обернуть остальную часть содержимого таблицы которая не находится в header или footer таблицы. Этот блок располагают ниже заголовка таблицы или иногда footer таблицы, зависит от того какую структуру вы решите использовать (читать выше по тексту).
 
-> **Примечание:** `<tbody>` всегда включён в каждой таблице, неявно если не укажете его в коде. Проверьте это, открыв один из предыдущих примеров в котором не используется `<tbody>` и посмотрите HTML код в [browser developer tools](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools) — вы увидите, что браузер добавил этот тег самостоятельно. Вы могли бы задаться вопросом почему мы должны волноваться о его включении, но вы должны, потому что это даёт больше контроля над структурой таблицы и стилем.
+> **Примечание:** `<tbody>` всегда есть в каждой таблице, даже если он не указывается коде явно. Вы можете убедиться в этом, открыв один из предыдущих примеров в котором не используется `<tbody>` и посмотрев HTML код в [Developer Tools браузера](/ru/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools) — вы увидите, что браузер добавил этот тег самостоятельно. Вы могли бы задаться вопросом почему мы должны волноваться о его включении, но вы должны, потому что это даёт больше контроля над структурой таблицы и стилем.
 
 ### Упражнение: Добавление структуры таблицы
 
@@ -82,7 +82,7 @@ slug: Learn/HTML/Tables/Advanced
 7. Сохраните, обновите и вы увидите результат. Если `<tbody>` и `<tfoot>` элементы не были установлены, то вам придётся писать много сложных селекторов/правил для применения одного и того же стиля.
 
 > [!NOTE]
-> Мы не ожидаем что сейчас вы полностью поймёте CSS. Вы узнаете больше когда пройдёте наши CSS курсы (например, [Вступление в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS) это хорошее место для начала; у нас также есть статья конкретно о [стилизации таблиц](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)).
+> Мы не ожидаем что сейчас вы полностью поймёте CSS. Вы узнаете больше когда пройдёте наши CSS курсы (например, [Введение в CSS](/ru/docs/Learn/CSS/First_steps) это хорошее место для начала; у нас также есть статья конкретно о [стилизации таблиц](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)).
 
 Ваша готовая таблица должна выглядеть примерно так:
 
@@ -198,7 +198,7 @@ slug: Learn/HTML/Tables/Advanced
 {{ EmbedLiveSample('Hidden_example', '100%', 300) }}
 
 > [!NOTE]
-> Этот пример можно также найти на GitHub по ссылке [spending-record-finished.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html) ([живой пример](http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html)).
+> Этот пример можно также найти на GitHub по ссылке [spending-record-finished.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html) ([живой пример](https://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html)).
 
 ## Вложенные таблицы
 
@@ -389,16 +389,10 @@ slug: Learn/HTML/Tables/Advanced
 3. И наконец попробуем сделать другую копию изначальных файлов, на этот раз делая таблицу более доступной используя атрибуты `id` и `headers`.
 
 > [!NOTE]
-> Вы можете проверить как работает последние примеры здесь [items-sold-scope.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html) ([also see this live](http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html)) и [items-sold-headers.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html) ([see this live too](http://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html)).
+> Вы можете проверить как работает последние примеры здесь [items-sold-scope.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html) ([живой пример](https://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html)) и [items-sold-headers.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html) ([живой пример](https://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html)).
 
 ## Заключение
 
-Есть ещё некоторые вещи которые можно узнать о HTML таблицах, но мы действительно дали всё что нужно на настоящий момент. Дальше вы возможно захотите больше узнать о стилизации HTML таблиц, посмотрите статью ["Стилизация таблиц"](/ru/docs/Learn/CSS/Styling_boxes/Styling_tables).
+Есть ещё некоторые вещи которые можно узнать о HTML таблицах, но мы действительно дали всё что нужно на настоящий момент. Дальше вы возможно захотите больше узнать о стилизации HTML таблиц, посмотрите статью ["Стилизация таблиц"](/ru/docs/Learn/CSS/Building_blocks/Styling_tables).
 
 {{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
-
-## В этом блоке
-
-- [HTML таблицы основы](/ru/docs/Learn/HTML/Tables/Basics)
-- [HTML таблицы продвинутые возможности и доступность](/ru/docs/Learn/HTML/Tables/Advanced)
-- [Структурирование данных о планетах](/ru/docs/Learn/HTML/Tables/Structuring_planet_data)
diff --git a/files/ru/learn/javascript/building_blocks/event_bubbling/index.md b/files/ru/learn/javascript/building_blocks/event_bubbling/index.md
index 109a274c6d3164..8f43d6d64f8fe0 100644
--- a/files/ru/learn/javascript/building_blocks/event_bubbling/index.md
+++ b/files/ru/learn/javascript/building_blocks/event_bubbling/index.md
@@ -4,10 +4,6 @@ slug: Learn/JavaScript/Building_blocks/Event_bubbling
 original_slug: Web/API/Event/Comparison_of_Event_Targets
 ---
 
-{{ ApiRef() }}
-
-### Event targets
-
 Легко запутаться в том, какую цель (target) следует изучить при написании обработчика событий. В этой статье разъяснено использование свойств target.
 
 Существуют 5 целей для рассмотрения:
diff --git a/files/ru/web/api/animation/cancel/index.md b/files/ru/web/api/animation/cancel/index.md
index 9ee818ece042e0..546dd27227d8d7 100644
--- a/files/ru/web/api/animation/cancel/index.md
+++ b/files/ru/web/api/animation/cancel/index.md
@@ -1,32 +1,34 @@
 ---
-title: Animation.cancel()
+title: "Animation: метод cancel()"
 slug: Web/API/Animation/cancel
+l10n:
+  sourceCommit: ec1006afdf68a5808a48ab6301f9ccff3cd7ecc2
 ---
 
-{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}
+{{ APIRef("Web Animations") }}
 
-Метод **`cancel()`** API Web Animation интерфейса {{domxref("Animation")}} очищает все {{domxref("KeyframeEffect")}} вызванной этой анимацией и прекращает его воспроизведение.
+Метод **`cancel()`** Web Animation API интерфейса {{domxref("Animation")}} очищает все {{domxref("KeyframeEffect")}}, вызванные этой анимацией и прекращает воспроизведение.
 
 > [!NOTE]
 > Когда анимация отменена, её {{domxref("Animation.startTime", "startTime")}} и {{domxref("Animation.currentTime", "currentTime")}} устанавливаются в `null`.
 
-## Syntax
+## Синтаксис
 
-```
-Animation.cancel();
+```js-nolint
+cancel()
 ```
 
-### Parameters
+### Параметры
 
-None.
+Нет.
 
-### Return value
+### Возвращаемое значение
 
-None.
+Нет ({{jsxref("undefined")}}).
 
-### Exceptions
+### Исключения
 
-Этот метод не выбрасывает напрямую исключения; однако, если {{domxref("Animation.playState", "playState")}} анимации во время отмены ничего кроме `"idle"`, {{domxref("Animation.finished", "current finished promise", "", 1)}} отклоняется с помощью {{domxref("DOMException")}} названным `AbortError`.
+Этот метод напрямую не выбрасывает исключения, однако, если {{domxref("Animation.playState", "playState")}} анимации во время отмены является `"idle"`, то {{domxref("Animation.finished", "промис завершения текущей анимации", "", 1)}} отклоняется с {{domxref("DOMException")}} и именем `AbortError`.
 
 ## Спецификации
 
@@ -42,4 +44,4 @@ None.
 - {{domxref("KeyframeEffect")}}
 - {{domxref("Animation")}}
 - {{domxref("Animation.playState")}}
-- {{domxref("Animation.finished")}} returns the promise this action will reject if the animation's `playState` is not `"idle"`.
+- {{domxref("Animation.finished")}} возвращает промис, который отменит это действие, если `playState` анимации не `"idle"`.
diff --git a/files/ru/web/api/document/createattribute/index.md b/files/ru/web/api/document/createattribute/index.md
index 8e2a3a4cc22134..3479f8cac58f0b 100644
--- a/files/ru/web/api/document/createattribute/index.md
+++ b/files/ru/web/api/document/createattribute/index.md
@@ -1,38 +1,42 @@
 ---
-title: Document.createAttribute()
+title: "Document: метод createAttribute()"
 slug: Web/API/Document/createAttribute
+l10n:
+  sourceCommit: be8f7f155a48e11b30c240f8731afb1845f85378
 ---
 
-{{APIRef("DOM")}}
+{{ ApiRef("DOM") }}
 
-Метод **`Document.createAttribute()`** создаёт новый атрибут узла и возвращает его. Созданный объект узла реализует {{domxref("Attr")}} интерфейс . DOM не указывает, какие атрибуты могут быть добавлены к определённому элементу таким способом.
+Метод **`Document.createAttribute()`** создаёт новый атрибут и возвращает его. Созданный объект является узлом и реализует интерфейс {{domxref("Attr")}}. DOM не накладывает ограничений на тип атрибутов, которые могут быть добавлены к определённому элементу таким способом.
 
 > [!NOTE]
 > Строка, заданная в параметре, преобразуется в нижний регистр.
 
-## Syntax
+## Синтаксис
 
-```
-attribute = document.createAttribute(name)
+```js-nolint
+createAttribute(name)
 ```
 
-### Parameters
+### Параметры
 
-- `name` строка, содержащая имя атрибута.
+- `name`
+  - : строка, содержащая имя атрибута.
 
-### Return value
+### Возвращаемое значение
 
-A {{domxref("Attr")}} node.
+Узел {{domxref("Attr")}}.
 
-### Exceptions
+### Исключения
 
-- `INVALID_CHARACTER_ERR` если параметр содержит недопустимые символы для атрибута XML.
+- `InvalidCharacterError` {{domxref("DOMException")}}
+  - : Вызывается если значение [`name`](#name) не является корректным [именем XML](https://www.w3.org/TR/REC-xml/#dt-name) (например, начинается с цифры, дефиса или точки, или содержит символы, отличные от букв и цифр, подчёркиваний, дефисов и точек).
 
-## Example
+## Примеры
 
 ```js
-var node = document.getElementById("div1");
-var a = document.createAttribute("my_attrib");
+const node = document.getElementById("div1");
+const a = document.createAttribute("my_attrib");
 a.value = "newVal";
 node.setAttributeNode(a);
 console.log(node.getAttribute("my_attrib")); // "newVal"
@@ -48,4 +52,7 @@ console.log(node.getAttribute("my_attrib")); // "newVal"
 
 ## Смотрите также
 
+- {{domxref("Document.createAttributeNS()")}}
 - {{domxref("Document.createElement()")}}
+- {{domxref("Element.setAttribute()")}}
+- {{domxref("Element.setAttributeNode()")}}
diff --git a/files/ru/web/api/document/defaultview/index.md b/files/ru/web/api/document/defaultview/index.md
index 535033af175295..059caf01c0580c 100644
--- a/files/ru/web/api/document/defaultview/index.md
+++ b/files/ru/web/api/document/defaultview/index.md
@@ -5,7 +5,7 @@ l10n:
   sourceCommit: 0a881eea07f0cec6ca4ed85a24af43b367a9f80d
 ---
 
-{{ApiRef}}
+{{APIRef}}
 
 В браузерах **`document.defaultView`** возвращает объект
 {{domxref("Window", "window")}}, связанный с {{Glossary("Browsing_context", "документом")}}, или `null` если документ не доступен.
diff --git a/files/ru/web/api/settimeout/index.md b/files/ru/web/api/settimeout/index.md
index 580bf91e16063e..aab96f1831ddc0 100644
--- a/files/ru/web/api/settimeout/index.md
+++ b/files/ru/web/api/settimeout/index.md
@@ -1,9 +1,9 @@
 ---
-title: WindowTimers.setTimeout()
+title: Глобальная функция setTimeout()
 slug: Web/API/setTimeout
 ---
 
-{{ APIRef() }}
+{{APIRef("HTML DOM")}} {{AvailableInWorkers}}
 
 ## Краткое изложение
 
diff --git a/files/ru/web/api/window/scrollby/index.md b/files/ru/web/api/window/scrollby/index.md
index ae7b652510e17b..a927f714dc8fd5 100644
--- a/files/ru/web/api/window/scrollby/index.md
+++ b/files/ru/web/api/window/scrollby/index.md
@@ -1,37 +1,69 @@
 ---
-title: Window.scrollBy()
+title: "Window: метод scrollBy()"
 slug: Web/API/Window/scrollBy
+l10n:
+  sourceCommit: 62cedc63226017e9e7d0718b6fea3529ca8dbf37
 ---
 
-{{ APIRef() }}
+{{APIRef}}
 
-## Описание
-
-Прокручивает документ на указанные величины.
+Метод **`Window.scrollBy()`** прокручивает документ в окне на указанную величину.
 
 ## Синтаксис
 
-```
-window.scrollBy(X, Y);
+```js-nolint
+scrollBy(x-coord, y-coord)
+scrollBy(options)
 ```
 
 ### Параметры
 
-- `X` - смещение в пикселях по горизонтали.
-- `Y` - смещение в пикселях по вертикали.
+- `x-coord` смещение в пикселях по горизонтали.
+- `y-coord` смещение в пикселях по вертикали.
 
-Положительные значения приведут к прокрутке страницы вправо и вниз. Отрицательные координаты прокрутят страницу влево и вверх.
+\- или -
 
-## Пример
+- `options`
 
-```
-// Прокрутка на один экран вертикально вниз.
+  - : Объект, содержащий следующие свойства:
+    - `top`
+      - : Указывает количество пикселей по оси Y для прокрутки окна или элемента.
+    - `left`
+      - : Указывает количество пикселей по оси X для прокрутки окна или элемента.
+    - `behavior`
+      - : Указывает, нужно ли анимировать прокрутку плавно (`smooth`), быстрым перемещением (`instant`) или предоставить выбор браузеру (`auto`, по умолчанию).
+
+### Возвращаемое значение
+
+Нет ({{jsxref("undefined")}}).
+
+## Примеры
+
+Для прокрутки вниз страницы:
+
+```js
 window.scrollBy(0, window.innerHeight);
 ```
 
+Для прокрутки вверх:
+
+```js
+window.scrollBy(0, -window.innerHeight);
+```
+
+С использованием `options`:
+
+```js
+window.scrollBy({
+  top: 100,
+  left: 100,
+  behavior: "smooth",
+});
+```
+
 ## Примечания
 
-[window.scrollBy](/ru/docs/DOM/Window.scrollBy) прокручивает страницу на указанное количество пикселей, в то время как метод [window.scroll](/ru/docs/DOM/Window.scroll) указывает абсолютную позицию в документе, на которую надо сместиться. Смотрите также [window.scrollByLines](/ru/docs/DOM/Window.scrollByLines), [window.scrollByPages](/ru/docs/DOM/Window.scrollByPages)
+`window.scrollBy()` прокручивает страницу на указанное количество пикселей, в то время как метод {{domxref("window.scroll()")}} прокручивает к абсолютной позиции в документе. Смотрите также {{domxref("window.scrollByLines()")}} и {{domxref("window.scrollByPages()")}}.
 
 ## Спецификации
 
diff --git a/files/ru/web/api/window/self/index.md b/files/ru/web/api/window/self/index.md
index 5f24950a8e5cfc..5531b31177a845 100644
--- a/files/ru/web/api/window/self/index.md
+++ b/files/ru/web/api/window/self/index.md
@@ -1,31 +1,32 @@
 ---
-title: Window.self
+title: "Window: свойство self"
 slug: Web/API/Window/self
+l10n:
+  sourceCommit: cc070123f72376faec06e36622c4fc723a75325f
 ---
 
-{{ APIRef() }}
+{{APIRef}}
 
-Свойство **`Window.self`** доступно только для чтения и возвращает объект window в виде объекта {{domxref("WindowProxy")}}. Для доступа к данному свойству возможно использовать точечную нотацию и объект `window` (`window.self`) или переменную `self`. Преимущество доступа через переменную `self` заключается в том, что её можно использовать в окружениях, в которых нет window, например {{domxref("Worker", "Web Workers")}}. Использование `self` даёт возможность обращаться к глобальному объекту не только в окружениях где есть window (в таком случае `self` эквивалентна `window.self`), но также в воркерах (в случае воркера `self` эквивалентна {{domxref("WorkerGlobalScope.self")}}).
+Доступное только для чтения свойство **`Window.self`** возвращает само окно в виде объекта {{domxref("WindowProxy")}}. Оно может быть использовано вместе с точечной нотацией на объекте `window` (как `window.self`) или просто `self`. Преимущество доступа через `self` заключается в том, что такую нотацию можно использовать в окружениях, в которых нет объекта `window`, например {{domxref("Worker", "Web Workers")}}. Использование `self` даёт возможность обращаться к глобальному объекту не только в окружениях где есть `window` (в таком случае `self` эквивалентно `window.self`), но также в контексте воркерах (тогда `self` будет эквивалентно {{domxref("WorkerGlobalScope.self")}}).
 
-## Пример
+## Примеры
 
-В следующем примере `window.self` точно также может быть заменено на `window`.
+В следующем примере `window.self` может быть заменено на `window`.
 
 ```js
 if (window.parent.frames[0] != window.self) {
-  // этот window не является первым frame в списке
+  // это окно не является первым в списке
 }
 ```
 
-Кроме того, когда код выполняется в активном документе браузера, объект `window` является ссылкой на текущий глобальный объект и таким образом:
+Кроме того, когда код выполняется в активном документе браузера, объект `window` является ссылкой на текущий глобальный объект, и поэтому всё следующее эквивалентно:
 
 ```js
-var w1 = window;
-var w2 = self;
-var w3 = window.window;
-var w4 = window.self;
-// Значения переменных w1, w2, w3, w4 строго равны между собой
-// Но только переменная w2 будет работать в workers
+const w1 = window;
+const w2 = self;
+const w3 = window.window;
+const w4 = window.self;
+// w1, w2, w3, w4 равнозначны, но только w2 будет работать в workers
 ```
 
 ## Спецификации
@@ -38,4 +39,4 @@ var w4 = window.self;
 
 ## Смотрите также
 
-- Its `Worker` equivalent, {{domxref("WorkerGlobalScope.self")}}.
+- {{domxref("WorkerGlobalScope.self")}} — эквивалент для' `Worker`.
diff --git a/files/ru/web/api/window/sessionstorage/index.md b/files/ru/web/api/window/sessionstorage/index.md
index 1f8e0dec74fc36..b7604875e894c8 100644
--- a/files/ru/web/api/window/sessionstorage/index.md
+++ b/files/ru/web/api/window/sessionstorage/index.md
@@ -1,9 +1,9 @@
 ---
-title: Window.sessionStorage
+title: "Window: свойство sessionStorage"
 slug: Web/API/Window/sessionStorage
 ---
 
-{{APIRef()}}
+{{APIRef("Web Storage API")}}
 
 `Свойство sessionStorage` позволяет получить доступ к объекту {{domxref("Storage")}} текущей сессии. Свойство sessionStorage очень похоже на свойство {{domxref("Window.localStorage")}}, единственное различие заключается в том, что все данные, сохранённые в localStorage не имеют определённого времени жизни, а данные в sessionStorage очищаются в момент окончания сессии текущий страницы. Сессия страницы остаётся активной все время пока окно браузера открыто и сохраняется между перезагрузками страниц. **Открытие той же страницы в новом окне браузера или новой вкладке приводит к созданию новой сессии страницы,** что отличается от поведения session cookies**.**
 
diff --git a/files/ru/web/api/setinterval/index.md b/files/ru/web/api/window/setinterval/index.md
similarity index 99%
rename from files/ru/web/api/setinterval/index.md
rename to files/ru/web/api/window/setinterval/index.md
index e0ffae5659b38a..daeb52a644f412 100644
--- a/files/ru/web/api/setinterval/index.md
+++ b/files/ru/web/api/window/setinterval/index.md
@@ -1,6 +1,7 @@
 ---
 title: Глобальная функция setInterval()
-slug: Web/API/setInterval
+slug: Web/API/Window/setInterval
+original_slug: Web/API/setInterval
 ---
 
 {{APIRef("HTML DOM")}}{{AvailableInWorkers}}
diff --git a/files/ru/web/http/basics_of_http/mime_types/common_types/index.md b/files/ru/web/http/mime_types/common_types/index.md
similarity index 99%
rename from files/ru/web/http/basics_of_http/mime_types/common_types/index.md
rename to files/ru/web/http/mime_types/common_types/index.md
index 5d19b8f4c4c671..7b2591a39726f9 100644
--- a/files/ru/web/http/basics_of_http/mime_types/common_types/index.md
+++ b/files/ru/web/http/mime_types/common_types/index.md
@@ -1,6 +1,6 @@
 ---
 title: Неполный список типов MIME
-slug: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+slug: Web/HTTP/MIME_types/Common_types
 ---
 
 {{HTTPSidebar}}Здесь представлен исчерпывающий список типов MIME, соотнесённых с типами документов и отсортированных по расширению.Два ключевых типа MIME, использующихся в качестве типов по умолчанию:
diff --git a/files/ru/web/http/basics_of_http/mime_types/index.md b/files/ru/web/http/mime_types/index.md
similarity index 99%
rename from files/ru/web/http/basics_of_http/mime_types/index.md
rename to files/ru/web/http/mime_types/index.md
index 6921d156c682f9..1e0f22d235748d 100644
--- a/files/ru/web/http/basics_of_http/mime_types/index.md
+++ b/files/ru/web/http/mime_types/index.md
@@ -1,6 +1,6 @@
 ---
 title: MIME types
-slug: Web/HTTP/Basics_of_HTTP/MIME_types
+slug: Web/HTTP/MIME_types
 ---
 
 {{HTTPSidebar}}
diff --git a/files/ru/web/javascript/reference/global_objects/date/toutcstring/index.md b/files/ru/web/javascript/reference/global_objects/date/toutcstring/index.md
index 873114ae0515e1..c7a723e994320a 100644
--- a/files/ru/web/javascript/reference/global_objects/date/toutcstring/index.md
+++ b/files/ru/web/javascript/reference/global_objects/date/toutcstring/index.md
@@ -1,31 +1,57 @@
 ---
 title: Date.prototype.toUTCString()
 slug: Web/JavaScript/Reference/Global_Objects/Date/toUTCString
+l10n:
+  sourceCommit: 77e46a5b43f828fcc6bd30facddc6fc4bfe84f9b
 ---
 
 {{JSRef}}
 
 ## Сводка
 
-Метод **`toUTCString()`** преобразует дату в строку, используя часовой пояс UTC.
+Метод **`toUTCString()`** экземпляров {{jsxref("Date")}} возвращает строку, представляющую дату в формате [RFC 7231](https://datatracker.ietf.org/doc/html/rfc7231#section-7.1.1.1), отрицательные значения допускаются. Временная зона всегда UTC. `toGMTString()` является синонимом этого метода.
+
+{{EmbedInteractiveExample("pages/js/date-toutcstring.html", "shorter")}}
 
 ## Синтаксис
 
-```
-dateObj.toUTCString()
+```js-nolint
+toUTCString()
 ```
 
 ### Параметры
 
 Нет.
 
+### Возвращаемое значение
+
+Строка, представляющая дату, используя временную зону UTC (смотрите описание формата). Возвращает `"Invalid Date"` если дата [недопустима](/ru/docs/Web/JavaScript/Reference/Global_Objects/Date#the_epoch_timestamps_and_invalid_date).
+
 ## Описание
 
-Значение, возвращаемое методом `toUTCString()`, является человеко-читаемой строкой в часовом поясе UTC. Формат возвращаемого значения зависит от платформы. Наиболее распространённым значением является форматированная по RFC-1123 временная метка, которая является немного обновлённой версией временной метки RFC-822.
+Значение, возвращаемое методом `toUTCString()`, является строкой в формате `Www, dd Mmm yyyy HH:mm:ss GMT`, где:
+
+| Строка | Значение                                                            |
+| ------ | ------------------------------------------------------------------- |
+| `Www`  | День недели в виде трёх букв (например, `Sun`, `Mon`)               |
+| `dd`   | День месяца в виде двух цифр, с ведущим нулём, если требуется       |
+| `Mmm`  | Месяц в виде трёх букв (например, `Jan`, `Feb`)                     |
+| `yyyy` | Год в виде четырёх или более цифр с ведущими нулями, если требуется |
+| `HH`   | Час в виде двух цифр с ведущим нулём если требуется                 |
+| `mm`   | Минута в виде двух цифр с ведущим нулём если требуется              |
+| `ss`   | Секунды в виде двух цифр с ведущим нулём, если требуется            |
+
+### Псевдонимы
+
+`Date` API в JavaScript был создан под влиянием библиотеки `java.util.Date` из языка Java (которая впоследствии стала устаревшей, начиная с версии Java 1.1 в 1997 году). В частности, у класса `Date` в Java есть метод `toGMTString`, который был неудачно назван, потому что [Среднее время по Гринвичу](https://ru.wikipedia.org/wiki/Среднее_время_по_Гринвичу) не эквивалентно [Всемирному координированному времени](https://ru.wikipedia.org/wiki/Всемирное_координированное_время), тогда как даты в JavaScript оперируют временем UTC. В целях совместимости `toGMTString` остаётся псевдонимом `toUTCString`, и они ссылаются на один и тот же объект. То есть:
+
+```js
+Date.prototype.toGMTString.name === "toUTCString";
+```
 
 ## Примеры
 
-### Пример: использование метода `toUTCString()`
+### Использование toUTCString()
 
 ```js
 const d = new Date(0);
diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt
index 1380fbf848ab74..3ac40c5cc84ce0 100644
--- a/files/zh-cn/_redirects.txt
+++ b/files/zh-cn/_redirects.txt
@@ -425,7 +425,7 @@
 /zh-CN/docs/DOM/window.btoa	/zh-CN/docs/Web/API/Window/btoa
 /zh-CN/docs/DOM/window.cancelAnimationFrame	/zh-CN/docs/Web/API/Window/cancelAnimationFrame
 /zh-CN/docs/DOM/window.clearImmediate	/zh-CN/docs/Web/API/Window/clearImmediate
-/zh-CN/docs/DOM/window.clearInterval	/zh-CN/docs/Web/API/clearInterval
+/zh-CN/docs/DOM/window.clearInterval	/zh-CN/docs/Web/API/Window/clearInterval
 /zh-CN/docs/DOM/window.close	/zh-CN/docs/Web/API/Window/close
 /zh-CN/docs/DOM/window.content	/zh-CN/docs/Web/API/Window
 /zh-CN/docs/DOM/window.document	/zh-CN/docs/Web/API/Window/document
@@ -463,9 +463,8 @@
 /zh-CN/docs/DOM/window.requestAnimationFrame	/zh-CN/docs/Web/API/Window/requestAnimationFrame
 /zh-CN/docs/DOM/window.scrollByPages	/zh-CN/docs/Web/API/Window/scrollByPages
 /zh-CN/docs/DOM/window.setImmediate	/zh-CN/docs/Web/API/Window/setImmediate
-/zh-CN/docs/DOM/window.setInterval	/zh-CN/docs/Web/API/setInterval
-/zh-CN/docs/DOM/window.setTimeout	/zh-CN/docs/Web/API/setTimeout
-/zh-CN/docs/DOM/window.setTimeout12	/zh-CN/docs/Web/API/setTimeout
+/zh-CN/docs/DOM/window.setInterval	/zh-CN/docs/Web/API/Window/setInterval
+/zh-CN/docs/DOM/window.setTimeout	/zh-CN/docs/Web/API/Window/setTimeout
 /zh-CN/docs/DOM/文件系统API的基本概念	/zh-CN/docs/Web/API/File_and_Directory_Entries_API/Introduction
 /zh-CN/docs/DOM:HTMLDocument	/zh-CN/docs/Web/API/HTMLDocument
 /zh-CN/docs/DOM:XMLDocument	/zh-CN/docs/Web/API/XMLDocument
@@ -1822,7 +1821,7 @@
 /zh-CN/docs/Web/API/Window.btoa	/zh-CN/docs/Web/API/Window/btoa
 /zh-CN/docs/Web/API/Window.cancelAnimationFrame	/zh-CN/docs/Web/API/Window/cancelAnimationFrame
 /zh-CN/docs/Web/API/Window.clearImmediate	/zh-CN/docs/Web/API/Window/clearImmediate
-/zh-CN/docs/Web/API/Window.clearInterval	/zh-CN/docs/Web/API/clearInterval
+/zh-CN/docs/Web/API/Window.clearInterval	/zh-CN/docs/Web/API/Window/clearInterval
 /zh-CN/docs/Web/API/Window.close	/zh-CN/docs/Web/API/Window/close
 /zh-CN/docs/Web/API/Window.document	/zh-CN/docs/Web/API/Window/document
 /zh-CN/docs/Web/API/Window.find	/zh-CN/docs/Web/API/Window/find
@@ -1862,12 +1861,11 @@
 /zh-CN/docs/Web/API/Window.scrollY	/zh-CN/docs/Web/API/Window/scrollY
 /zh-CN/docs/Web/API/Window.self	/zh-CN/docs/Web/API/Window/self
 /zh-CN/docs/Web/API/Window.setImmediate	/zh-CN/docs/Web/API/Window/setImmediate
-/zh-CN/docs/Web/API/Window.setInterval	/zh-CN/docs/Web/API/setInterval
+/zh-CN/docs/Web/API/Window.setInterval	/zh-CN/docs/Web/API/Window/setInterval
 /zh-CN/docs/Web/API/Window.showModalDialog	/zh-CN/docs/Web/API/Window/showModalDialog
 /zh-CN/docs/Web/API/Window.top	/zh-CN/docs/Web/API/Window/top
 /zh-CN/docs/Web/API/Window/DOMContentLoaded_event	/zh-CN/docs/Web/API/Document/DOMContentLoaded_event
 /zh-CN/docs/Web/API/Window/Window.blur()	/zh-CN/docs/Web/API/Window/blur
-/zh-CN/docs/Web/API/Window/clearInterval	/zh-CN/docs/Web/API/clearInterval
 /zh-CN/docs/Web/API/Window/content	/zh-CN/docs/Web/API/Window
 /zh-CN/docs/Web/API/Window/minimize	/zh-CN/docs/Web/API/Window
 /zh-CN/docs/Web/API/Window/mozPaintCount	/zh-CN/docs/Web/API/Window
@@ -1884,8 +1882,6 @@
 /zh-CN/docs/Web/API/Window/openDialog	/zh-CN/docs/Web/API/Window
 /zh-CN/docs/Web/API/Window/pageXOffset	/zh-CN/docs/Web/API/Window/scrollX
 /zh-CN/docs/Web/API/Window/pageYOffset	/zh-CN/docs/Web/API/Window/scrollY
-/zh-CN/docs/Web/API/Window/setInterval	/zh-CN/docs/Web/API/setInterval
-/zh-CN/docs/Web/API/Window/setTimeout	/zh-CN/docs/Web/API/setTimeout
 /zh-CN/docs/Web/API/WindowBase64/Base64_encoding_and_decoding	/zh-CN/docs/Glossary/Base64
 /zh-CN/docs/Web/API/WindowBase64/atob	/zh-CN/docs/Web/API/Window/atob
 /zh-CN/docs/Web/API/WindowBase64/btoa	/zh-CN/docs/Web/API/Window/btoa
@@ -1901,18 +1897,18 @@
 /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/atob	/zh-CN/docs/Web/API/Window/atob
 /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/btoa	/zh-CN/docs/Web/API/Window/btoa
 /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/caches	/zh-CN/docs/Web/API/Window/caches
-/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval	/zh-CN/docs/Web/API/clearInterval
-/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout	/zh-CN/docs/Web/API/clearTimeout
-/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap	/zh-CN/docs/Web/API/createImageBitmap
+/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval	/zh-CN/docs/Web/API/Window/clearInterval
+/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout	/zh-CN/docs/Web/API/Window/clearTimeout
+/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap	/zh-CN/docs/Web/API/Window/createImageBitmap
 /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated	/zh-CN/docs/Web/API/Window/crossOriginIsolated
 /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch	/zh-CN/docs/Web/API/Window/fetch
 /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/indexedDB	/zh-CN/docs/Web/API/Window/indexedDB
 /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/isSecureContext	/zh-CN/docs/Web/API/Window/isSecureContext
 /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/origin	/zh-CN/docs/Web/API/Window/origin
 /zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask	/zh-CN/docs/Web/API/Window/queueMicrotask
-/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setInterval	/zh-CN/docs/Web/API/setInterval
-/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout	/zh-CN/docs/Web/API/setTimeout
-/zh-CN/docs/Web/API/WindowTimers/clearTimeout	/zh-CN/docs/Web/API/clearTimeout
+/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setInterval	/zh-CN/docs/Web/API/Window/setInterval
+/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout	/zh-CN/docs/Web/API/Window/setTimeout
+/zh-CN/docs/Web/API/WindowTimers/clearTimeout	/zh-CN/docs/Web/API/Window/clearTimeout
 /zh-CN/docs/Web/API/Worker/onmessage	/zh-CN/docs/Web/API/Worker/message_event
 /zh-CN/docs/Web/API/Worker/onmessageerror	/zh-CN/docs/Web/API/Worker/messageerror_event
 /zh-CN/docs/Web/API/XMLDocument.load	/zh-CN/docs/Web/API/XMLDocument
@@ -1933,6 +1929,8 @@
 /zh-CN/docs/Web/API/atob	/zh-CN/docs/Web/API/Window/atob
 /zh-CN/docs/Web/API/btoa	/zh-CN/docs/Web/API/Window/btoa
 /zh-CN/docs/Web/API/caches	/zh-CN/docs/Web/API/Window/caches
+/zh-CN/docs/Web/API/clearInterval	/zh-CN/docs/Web/API/Window/clearInterval
+/zh-CN/docs/Web/API/clearTimeout	/zh-CN/docs/Web/API/Window/clearTimeout
 /zh-CN/docs/Web/API/console.dir	/zh-CN/docs/Web/API/console/dir_static
 /zh-CN/docs/Web/API/console.group	/zh-CN/docs/Web/API/console/group_static
 /zh-CN/docs/Web/API/console.groupCollapsed	/zh-CN/docs/Web/API/console/groupCollapsed_static
@@ -1961,6 +1959,7 @@
 /zh-CN/docs/Web/API/console/timeStamp	/zh-CN/docs/Web/API/console/timeStamp_static
 /zh-CN/docs/Web/API/console/trace	/zh-CN/docs/Web/API/console/trace_static
 /zh-CN/docs/Web/API/console/warn	/zh-CN/docs/Web/API/console/warn_static
+/zh-CN/docs/Web/API/createImageBitmap	/zh-CN/docs/Web/API/Window/createImageBitmap
 /zh-CN/docs/Web/API/crossOriginIsolated	/zh-CN/docs/Web/API/Window/crossOriginIsolated
 /zh-CN/docs/Web/API/crypto_property	/zh-CN/docs/Web/API/Window/crypto
 /zh-CN/docs/Web/API/document.URL	/zh-CN/docs/Web/API/Document/URL
@@ -2038,6 +2037,8 @@
 /zh-CN/docs/Web/API/range.getBoundingClientRect	/zh-CN/docs/Web/API/Range/getBoundingClientRect
 /zh-CN/docs/Web/API/range.startOffset	/zh-CN/docs/Web/API/Range/startOffset
 /zh-CN/docs/Web/API/range.surroundContents	/zh-CN/docs/Web/API/Range/surroundContents
+/zh-CN/docs/Web/API/setInterval	/zh-CN/docs/Web/API/Window/setInterval
+/zh-CN/docs/Web/API/setTimeout	/zh-CN/docs/Web/API/Window/setTimeout
 /zh-CN/docs/Web/API/structuredClone	/zh-CN/docs/Web/API/Window/structuredClone
 /zh-CN/docs/Web/API/window.requestAnimationFrame	/zh-CN/docs/Web/API/Window/requestAnimationFrame
 /zh-CN/docs/Web/API/剪贴板_API	/zh-CN/docs/Web/API/Clipboard_API
@@ -2426,10 +2427,14 @@
 /zh-CN/docs/Web/HTML/动作	/zh-CN/docs/Glossary/Speculative_parsing
 /zh-CN/docs/Web/HTML/属性	/zh-CN/docs/Web/HTML/Attributes
 /zh-CN/docs/Web/HTTP/Access_control_CORS	/zh-CN/docs/Web/HTTP/CORS
+/zh-CN/docs/Web/HTTP/Basics_of_HTTP	/zh-CN/docs/Web/HTTP
 /zh-CN/docs/Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs	/zh-CN/docs/Web/URI/Authority/Choosing_between_www_and_non-www_URLs
 /zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URIs	/zh-CN/docs/Web/URI/Schemes/data
 /zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URLs	/zh-CN/docs/Web/URI/Schemes/data
-/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types	/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP	/zh-CN/docs/Web/HTTP/Evolution_of_HTTP
+/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types	/zh-CN/docs/Web/HTTP/MIME_types
+/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types	/zh-CN/docs/Web/HTTP/MIME_types/Common_types
+/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types	/zh-CN/docs/Web/HTTP/MIME_types/Common_types
 /zh-CN/docs/Web/HTTP/Basics_of_HTTP/选择_www_或非_www_URL_作为域名	/zh-CN/docs/Web/URI/Authority/Choosing_between_www_and_non-www_URLs
 /zh-CN/docs/Web/HTTP/CORS/Errors/CORS错误允许凭证	/zh-CN/docs/Web/HTTP/CORS/Errors/CORSMIssingAllowCredentials
 /zh-CN/docs/Web/HTTP/Caching_FAQ	/zh-CN/docs/Web/HTTP/Caching
@@ -2465,7 +2470,7 @@
 /zh-CN/docs/Web/HTTP/Link_prefetching_FAQ	/zh-CN/docs/Glossary/Prefetch
 /zh-CN/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file	/zh-CN/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_PAC_file
 /zh-CN/docs/Web/HTTP/Public_Key_Pinning	/zh-CN/docs/Web/Security/Certificate_Transparency
-/zh-CN/docs/Web/HTTP/Resources_and_URIs	/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types
+/zh-CN/docs/Web/HTTP/Resources_and_URIs	/zh-CN/docs/Web/HTTP/MIME_types
 /zh-CN/docs/Web/HTTP/Response_codes	/zh-CN/docs/Web/HTTP/Status
 /zh-CN/docs/Web/HTTP/Response_codes/100	/zh-CN/docs/Web/HTTP/Status/100
 /zh-CN/docs/Web/HTTP/Response_codes/204	/zh-CN/docs/Web/HTTP/Status/204
diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json
index ca036768227942..be10bbcd471247 100644
--- a/files/zh-cn/_wikihistory.json
+++ b/files/zh-cn/_wikihistory.json
@@ -15153,6 +15153,21 @@
     "modified": "2019-03-23T23:32:55.452Z",
     "contributors": ["teoli", "AshfaqHossain", "ziyunfei", "movinghorse"]
   },
+  "Web/API/Window/clearInterval": {
+    "modified": "2020-10-15T21:21:33.193Z",
+    "contributors": [
+      "RainCruise",
+      "RainSlide",
+      "luojia",
+      "teoli",
+      "khalid32",
+      "ziyunfei"
+    ]
+  },
+  "Web/API/Window/clearTimeout": {
+    "modified": "2020-06-09T04:49:33.480Z",
+    "contributors": ["Humilitas", "zhangchen", "luojia", "paddingme"]
+  },
   "Web/API/Window/close": {
     "modified": "2020-10-15T21:06:33.538Z",
     "contributors": [
@@ -15180,6 +15195,10 @@
     "modified": "2020-10-15T22:30:15.212Z",
     "contributors": ["Jee"]
   },
+  "Web/API/Window/createImageBitmap": {
+    "modified": "2019-03-18T20:44:01.174Z",
+    "contributors": ["fanerge", "varcat"]
+  },
   "Web/API/Window/crossOriginIsolated": {
     "modified": "2020-10-15T22:26:03.129Z",
     "contributors": ["Fulgrim"]
@@ -15722,6 +15741,62 @@
       "ziyunfei"
     ]
   },
+  "Web/API/Window/setInterval": {
+    "modified": "2020-11-25T18:16:55.949Z",
+    "contributors": [
+      "RayTang-hub",
+      "cellinlab",
+      "Jiangmenghao",
+      "TXYjing",
+      "Soul",
+      "fengbin",
+      "RainSlide",
+      "brandonhyc",
+      "xgqfrms-GitHub",
+      "shery",
+      "xgqfrms",
+      "teoli",
+      "khalid32",
+      "ziyunfei",
+      "sonicview"
+    ]
+  },
+  "Web/API/Window/setTimeout": {
+    "modified": "2020-10-15T21:19:52.746Z",
+    "contributors": [
+      "SnowGojira",
+      "iyow",
+      "johnao",
+      "chrisdavidmills",
+      "csga31971",
+      "baijingfeng",
+      "Reci-z",
+      "horrylala",
+      "Adashuai5",
+      "LilyWakana",
+      "Mars687",
+      "pinpinye",
+      "Lby876176278",
+      "Chancefeng",
+      "fscholz",
+      "xiazhe",
+      "Frorice",
+      "yhtml5",
+      "righttoe",
+      "Toxni",
+      "piemonSong",
+      "xgqfrms-GitHub",
+      "heke2929",
+      "SnowOnion",
+      "Chimen",
+      "hbkdsm",
+      "paddingme",
+      "teoli",
+      "khalid32",
+      "Meteormatt",
+      "ziyunfei"
+    ]
+  },
   "Web/API/Window/showModalDialog": {
     "modified": "2019-07-21T23:38:59.262Z",
     "contributors": ["fanyue", "SphinxKnight", "teoli", "ziyunfei", "c_king"]
@@ -16115,21 +16190,6 @@
     "modified": "2020-10-15T22:15:17.137Z",
     "contributors": ["CarmeloXue", "Sebastianz"]
   },
-  "Web/API/clearInterval": {
-    "modified": "2020-10-15T21:21:33.193Z",
-    "contributors": [
-      "RainCruise",
-      "RainSlide",
-      "luojia",
-      "teoli",
-      "khalid32",
-      "ziyunfei"
-    ]
-  },
-  "Web/API/clearTimeout": {
-    "modified": "2020-06-09T04:49:33.480Z",
-    "contributors": ["Humilitas", "zhangchen", "luojia", "paddingme"]
-  },
   "Web/API/console": {
     "modified": "2020-11-05T03:30:21.247Z",
     "contributors": [
@@ -16267,10 +16327,6 @@
     "modified": "2019-03-23T22:12:15.122Z",
     "contributors": ["pluwen", "choukin"]
   },
-  "Web/API/createImageBitmap": {
-    "modified": "2019-03-18T20:44:01.174Z",
-    "contributors": ["fanerge", "varcat"]
-  },
   "Web/API/notification": {
     "modified": "2020-09-28T00:03:47.900Z",
     "contributors": [
@@ -16284,62 +16340,6 @@
       "Hawkeyes_Wind"
     ]
   },
-  "Web/API/setInterval": {
-    "modified": "2020-11-25T18:16:55.949Z",
-    "contributors": [
-      "RayTang-hub",
-      "cellinlab",
-      "Jiangmenghao",
-      "TXYjing",
-      "Soul",
-      "fengbin",
-      "RainSlide",
-      "brandonhyc",
-      "xgqfrms-GitHub",
-      "shery",
-      "xgqfrms",
-      "teoli",
-      "khalid32",
-      "ziyunfei",
-      "sonicview"
-    ]
-  },
-  "Web/API/setTimeout": {
-    "modified": "2020-10-15T21:19:52.746Z",
-    "contributors": [
-      "SnowGojira",
-      "iyow",
-      "johnao",
-      "chrisdavidmills",
-      "csga31971",
-      "baijingfeng",
-      "Reci-z",
-      "horrylala",
-      "Adashuai5",
-      "LilyWakana",
-      "Mars687",
-      "pinpinye",
-      "Lby876176278",
-      "Chancefeng",
-      "fscholz",
-      "xiazhe",
-      "Frorice",
-      "yhtml5",
-      "righttoe",
-      "Toxni",
-      "piemonSong",
-      "xgqfrms-GitHub",
-      "heke2929",
-      "SnowOnion",
-      "Chimen",
-      "hbkdsm",
-      "paddingme",
-      "teoli",
-      "khalid32",
-      "Meteormatt",
-      "ziyunfei"
-    ]
-  },
   "Web/Accessibility": {
     "modified": "2020-08-04T10:11:09.882Z",
     "contributors": [
@@ -22375,61 +22375,6 @@
       "thomastao0215"
     ]
   },
-  "Web/HTTP/Basics_of_HTTP": {
-    "modified": "2020-05-07T23:19:31.676Z",
-    "contributors": [
-      "Filon",
-      "HardcorePhysician",
-      "Yayure",
-      "695919451",
-      "BobGreen",
-      "magiclyde",
-      "cissoid"
-    ]
-  },
-  "Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP": {
-    "modified": "2020-02-20T03:41:08.272Z",
-    "contributors": [
-      "Babyfaceqian",
-      "XFJGitHub",
-      "lc-soft",
-      "BobGreen",
-      "enjolras1205",
-      "zihengCat",
-      "GuoShuai",
-      "Haruhi",
-      "huangchanghuan",
-      "keifergu",
-      "JsonLi",
-      "WeijieZhu"
-    ]
-  },
-  "Web/HTTP/Basics_of_HTTP/MIME_types": {
-    "modified": "2020-11-04T00:16:29.009Z",
-    "contributors": [
-      "lujjjh",
-      "andysongs",
-      "rascalquan",
-      "BobGreen",
-      "NewbieAndy",
-      "zhangchen",
-      "xgqfrms-GitHub",
-      "w11th",
-      "YuriTu"
-    ]
-  },
-  "Web/HTTP/Basics_of_HTTP/MIME_types/Common_types": {
-    "modified": "2020-02-28T13:11:23.222Z",
-    "contributors": [
-      "chrisdavidmills",
-      "RainSlide",
-      "qq58553442",
-      "sam-dingkang",
-      "xgqfrms-GitHub",
-      "choury",
-      "pasturn"
-    ]
-  },
   "Web/HTTP/Browser_detection_using_the_user_agent": {
     "modified": "2019-03-23T22:26:23.825Z",
     "contributors": ["xgqfrms-GitHub", "konrumi", "Leogh", "jianyi1995"]
@@ -22655,6 +22600,23 @@
       "charlie"
     ]
   },
+  "Web/HTTP/Evolution_of_HTTP": {
+    "modified": "2020-02-20T03:41:08.272Z",
+    "contributors": [
+      "Babyfaceqian",
+      "XFJGitHub",
+      "lc-soft",
+      "BobGreen",
+      "enjolras1205",
+      "zihengCat",
+      "GuoShuai",
+      "Haruhi",
+      "huangchanghuan",
+      "keifergu",
+      "JsonLi",
+      "WeijieZhu"
+    ]
+  },
   "Web/HTTP/Headers": {
     "modified": "2020-05-20T02:33:50.716Z",
     "contributors": [
@@ -23230,6 +23192,32 @@
       "xgqfrms-GitHub"
     ]
   },
+  "Web/HTTP/MIME_types": {
+    "modified": "2020-11-04T00:16:29.009Z",
+    "contributors": [
+      "lujjjh",
+      "andysongs",
+      "rascalquan",
+      "BobGreen",
+      "NewbieAndy",
+      "zhangchen",
+      "xgqfrms-GitHub",
+      "w11th",
+      "YuriTu"
+    ]
+  },
+  "Web/HTTP/MIME_types/Common_types": {
+    "modified": "2020-02-28T13:11:23.222Z",
+    "contributors": [
+      "chrisdavidmills",
+      "RainSlide",
+      "qq58553442",
+      "sam-dingkang",
+      "xgqfrms-GitHub",
+      "choury",
+      "pasturn"
+    ]
+  },
   "Web/HTTP/Messages": {
     "modified": "2020-04-19T05:44:17.609Z",
     "contributors": [
diff --git a/files/zh-cn/games/anatomy/index.md b/files/zh-cn/games/anatomy/index.md
index 0118810568c48e..e3cc95c2698ac9 100644
--- a/files/zh-cn/games/anatomy/index.md
+++ b/files/zh-cn/games/anatomy/index.md
@@ -209,17 +209,17 @@ var tNow = window.performance.now();
 
 一种常见的技术是以恒定的频率更新模拟，然后绘制尽可能多的（或尽可能少的）实际帧。更新方法可以继续循环，而不用考虑用户看到的内容。绘图方法可以查看最后的更新以及发生的时间。由于绘制知道何时表示，以及上次更新的模拟时间，它可以预测为用户绘制一个合理的框架。这是否比官方更新循环更频繁（甚至更不频繁）无关紧要。更新方法设置检查点，并且像系统允许的那样频繁地，渲染方法画出周围的时间。在 Web 标准中分离更新方法有很多种方法：
 
-- 绘制 `requestAnimationFrame` 并更新 {{domxref("setInterval()")}} 或 {{domxref("setTimeout()")}}。
+- 在 `requestAnimationFrame()` 中绘制，并在 {{domxref("Window.setInterval", "setInterval()")}} 或 {{domxref("Window.setTimeout", "setTimeout()")}} 中更新。
 
   - 即使在未聚焦或最小化的情况下，使用处理器时间，也可能是主线程，并且可能是传统游戏循环的工件（但是很简单）。
 
-- 绘制 `requestAnimationFrame` 并在 [Web Worker](/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers) 的 `setInterval` 或 `setTimeout` 中对其进行更新。
+- 在 `requestAnimationFrame()` 中绘制，并在 [Web Worker](/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers) 的 {{domxref("WorkerGlobalScope.setInterval", "setInterval()")}} 或 {{domxref("WorkerGlobalScope.setTimeout", "setTimeout()")}} 中对其进行更新。
 
   - 这与上述相同，除了更新不会使主线程（主线程也没有）。这是一个更复杂的解决方案，并且对于简单更新可能会有太多的开销。
 
-- 绘制 `requestAnimationFrame` 并使用它来戳一个包含更新方法的 Web Worker，其中包含要计算的刻度数（如果有的话）。
+- 在 `requestAnimationFrame()` 中绘制，并使用它来戳一个包含更新方法的 Web Worker，其中包含要计算的刻度数（如果有的话）。
 
-  - 这个睡眠直到 `requestAnimationFrame` 被调用并且不会污染主线程，加上你不依赖于老式的方法。再次，这比以前的两个选项更复杂一些，并且*开始*每个更新将被阻止，直到浏览器决定启动 rAF 回调。
+  - 这个睡眠直到 `requestAnimationFrame()` 被调用并且不会污染主线程，加上你不依赖于老式的方法。再次，这比以前的两个选项更复杂一些，并且*开始*每个更新将被阻止，直到浏览器决定启动 rAF 回调。
 
 这些方法中的每一种都有类似的权衡：
 
diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md
index c449e4a25f5133..885a1614e38eb3 100644
--- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md
+++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md
@@ -66,10 +66,10 @@ drawLives();
 
 ## 用 requestAnimationFrame() 优化渲染
 
-现在让我们处理一些与游戏机制无关，但与画面渲染相关的东西。和我们目前使用{{domxref("windowTimers.setInterval()", "setInterval()")}} 实现的固定帧率渲染相比，{{domxref("window.requestAnimationFrame", "requestAnimationFrame")}} 能让浏览器更好地渲染画面。让我们把下面这行代码：
+现在让我们处理一些与游戏机制无关，但与画面渲染相关的东西。和我们目前使用 {{domxref("Window.setInterval", "setInterval()")}} 实现的固定帧率渲染相比，{{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} 能让浏览器更好地渲染画面。让我们把下面这行代码：
 
 ```js
-var interval = setInterval(draw, 10);
+interval = setInterval(draw, 10);
 ```
 
 替换为：
diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md
index 3d5d87bc8ce903..4d89c0167b8c84 100644
--- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md
+++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md
@@ -9,7 +9,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball
 
 从上一节中你已经知道如何去绘制一个球。现在让我们使它动起来。从技术上讲，我们将在画布上绘制一个球，之后让它消失，然后在一个稍微不用的位置上再绘制一个一样的球。就想电影里的每一帧动起来的感觉。
 
-我们需要定义一个绘图函数，每次使用一组不同的变量改变球体的位置；循环调用以保持画布上每一帧不断更新。你可以使用 JavaScript 时间函数 {{domxref("WindowTimers.setInterval()", "setInterval()")}} 或者 {{domxref("window.requestAnimationFrame()")}}。
+我们需要定义一个绘图函数，每次使用一组不同的变量改变球体的位置；循环调用以保持画布上每一帧不断更新。你可以使用 JavaScript 时间函数 {{domxref("Window.setInterval", "setInterval()")}} 或者 {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}}。
 
 在你的 HTML 文件只保留前两行，删除其他所有的 JavaScript 代码并在 draw() 函数中添加以下内容保证每 10 毫秒执行一次 draw() 函数：
 
diff --git a/files/zh-cn/glossary/callback_function/index.md b/files/zh-cn/glossary/callback_function/index.md
index 68449527ed5a7b..8ea7b8d21c8292 100644
--- a/files/zh-cn/glossary/callback_function/index.md
+++ b/files/zh-cn/glossary/callback_function/index.md
@@ -27,7 +27,7 @@ console.log(value);
 
 如果 `doSomething` 同步调用回调，则最后一条语句将记录 `2`，因为 `value = 2` 是同步执行的；如果回调是异步的，最后一条语句将记录 `1`，因为 `value = 2` 将在 `console.log` 语句之后执行。
 
-同步回调的示例包括传递给 {{jsxref("Array.prototype.map()")}}、{{jsxref("Array.prototype.forEach()")}} 等的回调。异步回调的示例包括传递给 [`setTimeout()`](/zh-CN/docs/Web/API/setTimeout) 和 {{jsxref("Promise.prototype.then()")}} 的回调。
+同步回调的示例包括传递给 {{jsxref("Array.prototype.map()")}}、{{jsxref("Array.prototype.forEach()")}} 等的回调。异步回调的示例包括传递给 {{domxref("Window.setTimeout", "setTimeout()")}} 和 {{jsxref("Promise.prototype.then()")}} 的回调。
 
 [使用 Promise](/zh-CN/docs/Web/JavaScript/Guide/Using_promises#时序) 指南提供了有关异步回调时序的更多信息。
 
diff --git a/files/zh-cn/glossary/http_2/index.md b/files/zh-cn/glossary/http_2/index.md
index 6d1800ef640c5e..e6d4d0ab654597 100644
--- a/files/zh-cn/glossary/http_2/index.md
+++ b/files/zh-cn/glossary/http_2/index.md
@@ -2,14 +2,14 @@
 title: HTTP/2
 slug: Glossary/HTTP_2
 l10n:
-  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+  sourceCommit: f75b2c86ae4168e59416aed4c7121f222afc201d
 ---
 
 {{GlossarySidebar}}
 
-**HTTP/2** 是 [HTTP 网络协议](/zh-CN/docs/Web/HTTP/Basics_of_HTTP)的一个主要版本。
+**HTTP/2** 是 [HTTP 网络协议](/zh-CN/docs/Web/HTTP)的一个主要版本。
 
-它的主要目标是通过启用完整的请求和响应多路复用来降低{{glossary("latency", "延迟")}}，通过有效压缩 HTTP 标头字段来最小化协议开销，增加对请求优先级和服务器推送的支持。
+它的主要目标是通过启用完整的请求和响应多路复用来降低{{glossary("latency", "延迟")}}和队头阻塞，通过有效压缩 HTTP 标头字段来最小化协议开销，增加对请求优先级和服务器推送的支持。
 
 HTTP/2 不会修改 HTTP 协议的语义。HTTP 1.1 中的所有核心概念（例如 HTTP 方法、状态码、URI 和标头）都得以保留。而是修改了 HTTP/2 数据在客户端和服务器之间的格式（帧）和传输方式，这两者都管理整个过程，并在新的框架层内隐藏了应用程序的复杂性。所以，所有现有的应用程序都可以不经修改地交付。
 
diff --git a/files/zh-cn/glossary/http_3/index.md b/files/zh-cn/glossary/http_3/index.md
index 9e4cbb7a8f015b..87407baddecdb5 100644
--- a/files/zh-cn/glossary/http_3/index.md
+++ b/files/zh-cn/glossary/http_3/index.md
@@ -1,21 +1,21 @@
 ---
 title: HTTP/3
 slug: Glossary/HTTP_3
+l10n:
+  sourceCommit: f75b2c86ae4168e59416aed4c7121f222afc201d
 ---
 
 {{GlossarySidebar}}
 
-**HTTP/3**是继{{glossary("HTTP 2", "HTTP/2")}}即将到来的[HTTP 网络协议的](/zh-CN/docs/Web/HTTP/Basics_of_HTTP)主要修订版。HTTP/3 的要点是它使用名为 QUIC 的新{{glossary("UDP")}}协议代替{{glossary("TCP")}}。
+**HTTP/3** 是继 {{glossary("HTTP 2", "HTTP/2")}} 之后的 [HTTP 网络协议](/zh-CN/docs/Web/HTTP)的主要修订版。
 
-## 参见
-
-- 基础知识
+HTTP/3 的最大不同之处在于它使用了一种名为 QUIC 的协议（基于 {{glossary("UDP")}} 而不是 {{glossary("TCP")}}）。
 
-  - [HTTP on MDN](/zh-CN/docs/Web/HTTP)
-  - [HTTP/3](https://zh.wikipedia.org/wiki/HTTP/3)
-
-- 词汇表
+## 参见
 
+- [HTTP 文档](/zh-CN/docs/Web/HTTP)
+- 维基百科上的 [HTTP/3](https://zh.wikipedia.org/wiki/HTTP/3)
+- 相关术语：
   - {{glossary("HTTP")}}
   - {{glossary("HTTP 2")}}
   - {{glossary("Latency")}}
diff --git a/files/zh-cn/glossary/lossy_compression/index.md b/files/zh-cn/glossary/lossy_compression/index.md
index ccad67ddfc2dbb..ba42a77a4b3374 100644
--- a/files/zh-cn/glossary/lossy_compression/index.md
+++ b/files/zh-cn/glossary/lossy_compression/index.md
@@ -9,7 +9,7 @@ l10n:
 
 **有损压缩**，又称为不可逆压缩，是一种数据压缩方法，它使用不精确的近似值和部分数据丢弃来表示内容。简单来说：有损压缩导致原始文件中的数据丢失，可能导致质量下降。这种压缩过程是不可逆的；一旦对内容进行了有损压缩，就无法将内容恢复到原始状态。因此，经过有损压缩的内容通常不应再进一步编辑。
 
-有损压缩在诸如 {{glossary("JPEG")}}、{{glossary("WebP")}} 等图像格式以及音频和视频格式（如 [MP3、MP4、H.264 等](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types)）中被广泛使用。像 {{glossary("WebP")}} 这样的压缩方法可以根据压缩级别或在编码过程中使用的选项进行[无损和有损压缩](https://developers.google.com/speed/webp/docs/compression)。
+有损压缩在诸如 {{glossary("JPEG")}}、{{glossary("WebP")}} 等图像格式以及音频和视频格式（如 [MP3、MP4、H.264 等](/zh-CN/docs/Web/HTTP/MIME_types/Common_types)）中被广泛使用。像 {{glossary("WebP")}} 这样的压缩方法可以根据压缩级别或在编码过程中使用的选项进行[无损和有损压缩](https://developers.google.com/speed/webp/docs/compression)。
 
 ![有损压缩的图像](2019-11-18.png)
 
diff --git a/files/zh-cn/glossary/mime_type/index.md b/files/zh-cn/glossary/mime_type/index.md
index c3687f10e255dd..f3fe2769c12b37 100644
--- a/files/zh-cn/glossary/mime_type/index.md
+++ b/files/zh-cn/glossary/mime_type/index.md
@@ -2,12 +2,12 @@
 title: MIME 类型
 slug: Glossary/MIME_type
 l10n:
-  sourceCommit: ada5fa5ef15eadd44b549ecf906423b4a2092f34
+  sourceCommit: f75b2c86ae4168e59416aed4c7121f222afc201d
 ---
 
 {{GlossarySidebar}}
 
-**MIME 类型**（现在正式地称作“媒体类型”，但有时也被称作“内容类型”）是指示文件类型的会与文件同时发送出去的字符串，描述了内容的格式（例如，一个声音文件可能被标记为 `audio/ogg` ，一个图像文件可能是 `image/png`）。
+**MIME 类型**（现在正式地称作“媒体类型”，但有时也被称作“内容类型”）是指示文件类型的会与文件同时发送出去的字符串，描述了内容的格式（例如，一个声音文件可能被标记为 `audio/ogg`，一个图像文件可能是 `image/png`）。
 
 它与传统 Windows 上的文件扩展名有相同目的。这个术语的名字源于最初用于电子邮件的 {{glossary("mime","MIME")}} 标准。
 
@@ -16,6 +16,6 @@ l10n:
 - 维基百科上的[互联网媒体类型](https://zh.wikipedia.org/wiki/互联网媒体类型)
 - [MIME 类型列表](https://www.iana.org/assignments/media-types/media-types.xhtml)
 - [正确配置服务器 MIME 类型](/zh-CN/docs/Learn/Server-side/Configuring_server_MIME_types)
-- 有关在 Web 环境中使用 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)的详细信息。
-- [MIME 类型的不完整列表](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types)
+- 有关在 Web 环境中使用 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types)的详细信息。
+- [MIME 类型的不完整列表](/zh-CN/docs/Web/HTTP/MIME_types/Common_types)
 - [MediaRecorder.mimeType](/zh-CN/docs/Web/API/MediaRecorder/mimeType)
diff --git a/files/zh-cn/learn/accessibility/wai-aria_basics/index.md b/files/zh-cn/learn/accessibility/wai-aria_basics/index.md
index 2c62835d8b10a6..3aeb247028a917 100644
--- a/files/zh-cn/learn/accessibility/wai-aria_basics/index.md
+++ b/files/zh-cn/learn/accessibility/wai-aria_basics/index.md
@@ -7,7 +7,7 @@ slug: Learn/Accessibility/WAI-ARIA_basics
 
 紧接上文继续，有时候，我们制作涉及非语义 HTML 和动态的 JavaScript 内容更新的复杂 UI 控件可能很困难。**WAI-ARIA** 是一项技术，它可以通过浏览器和一些辅助技术来帮助我们进一步地识别以及实现语义化，这样一来能帮助我们解决问题，也让用户可以了解发生了什么。接下来我们将展示如何运用它来优化无障碍体验：
 
-<table class="learn-box standard-table">
+<table>
   <tbody>
     <tr>
       <th scope="row">前提要求：</th>
@@ -36,7 +36,7 @@ slug: Learn/Accessibility/WAI-ARIA_basics
 
 当 Web 应用开始变得越来越复杂和动态化，一堆全新的无障碍访问问题和特性接踵而至。
 
-例如，HTML5 提出了几种语义化标签用于定义常规页面的特性 (例如 nav, footer 等等) 。在这些标签可用之前，我们一般简单地用 div 带上 ID 抑或是 class 来解决问题，例如：`<div class="nav">`。但是这种实践是问题丛生的，因为没有简单的方法可以轻松地用可编程的方法找到特定页面功能，例如主导航。
+例如，HTML5 提出了几种语义化标签用于定义常规页面的特性（例如 nav、footer 等等）。在这些标签可用之前，我们一般简单地用 div 带上 ID 抑或是 class 来解决问题，例如：`<div class="nav">`。但是这种实践是问题丛生的，因为没有简单的方法可以轻松地用可编程的方法找到特定页面功能，例如主导航。
 
 最早的解决方案是加一个或者多个隐藏的链接来跳转到我们想要的位置，例如（这里用导航举例）：
 
@@ -214,20 +214,20 @@ WAI-ARIA 给浏览器增加了 [`role`](https://www.w3.org/TR/wai-aria-1.1/#role
 </section>
 ```
 
-我们的 JavaScript 从 [`XMLHttpRequest`](/zh-CN/docs/Web/API/XMLHttpRequest) 加载一个 JSON 文件里头包含了一系列的名人名言，一旦完成我们就开始用一个 [`setInterval()`](/zh-CN/docs/Web/API/WindowTimers/setInterval) 循环以十秒一次的频率显示出来。
+我们的 JavaScript 使用 {{domxref("Window.fetch", "fetch()")}} API 加载一个 JSON 文件（里头包含了一系列的名人名言），一旦完成我们就开始用一个 {{domxref("Window.setInterval", "setInterval()")}} 循环以十秒一次的频率显示出来。
 
 ```js
-var intervalID = window.setInterval(showQuote, 10000);
+const intervalID = setInterval(showQuote, 10000);
 ```
 
 这当然是可行的，但是对于无障碍可不友善——这种内容变化是不会被屏幕阅读器察觉到的，所以用户不会发现发生了什么。这是一个简单的例子，但你可以想象一下：如果你开发的一个复杂 UI 而且内容频繁变化的应用，例如聊天室，或者一个策略游戏的界面，或者一个实时更新的购物车展示。如果没有某种方式提示用户有内容更新，那就不可能以任何有效的方式来使用应用。
 
 幸运的是，WAI-ARIA 提供了一种有效的机制来发起提示——[`aria-live`](https://www.w3.org/TR/wai-aria-1.1/#aria-live)。将此应用于元素会让屏幕阅读器读出更新的内容。读取内容的紧急程度取决于属性值：
 
-- `off`: 默认值，更新不会提醒。
-- `polite`: 只有用户空闲的情况下提醒。
-- `assertive`: 尽快提醒。
-- `rude`: 会以打断用户操作的方式直接提醒。
+- `off`：默认值，更新不会提醒。
+- `polite`：只有用户空闲的情况下提醒。
+- `assertive`：尽快提醒。
+- `rude`：会以打断用户操作的方式直接提醒。
 
 通常来说 `assertive` 设置足以让你的更新在显示时按时序读出，因此，如果改变多次，那么他只会念出最后一个改变。除非紧急程度高到需要覆盖其他的更新才选择使用 `rude` 。
 
@@ -333,7 +333,7 @@ var intervalID = window.setInterval(showQuote, 10000);
 
 ```js
 function toggleMusician(bool) {
-  var instruItem = formItems[formItems.length - 1];
+  const instruItem = formItems[formItems.length - 1];
   if (bool) {
     instruItem.input.disabled = false;
     instruItem.label.style.color = "#000";
diff --git a/files/zh-cn/learn/forms/basic_native_form_controls/index.md b/files/zh-cn/learn/forms/basic_native_form_controls/index.md
index 6a7dcf5144fb3f..5847c8a0cb71fc 100644
--- a/files/zh-cn/learn/forms/basic_native_form_controls/index.md
+++ b/files/zh-cn/learn/forms/basic_native_form_controls/index.md
@@ -62,7 +62,7 @@ slug: Learn/Forms/Basic_native_form_controls
 
 单行文本框只有一个真正的约束：如果你输入带有换行符的文本，浏览器会在发送数据之前删除这些换行符。
 
-_以下截图现实了 macOS 上的 Firefox 71 和 Safair 以及 Windows 10 上的 Chrome 79 和 Edge 18 中的默认、聚焦和禁用的文本输入框。_
+_以下截图现实了 macOS 上的 Firefox 71 和 Safari 以及 Windows 10 上的 Chrome 79 和 Edge 18 中的默认、聚焦和禁用的文本输入框。_
 
 ![Screenshot of the disabled attribute and default :focus styles on a text input in Firefox, Safari, Chrome and Edge.](disabled.png)
 
@@ -141,7 +141,7 @@ HTML5 中添加了其他的文本输入类型，如：{{HTMLElement("input/searc
 </fieldset>
 ```
 
-_以下截图显示了 macOS 上的 Firefox 71 和 Safair 13 以及 Windows 10 上的 Chrome 79 和 Edge 18 中的默认、聚焦和禁用的复选框。_
+_以下截图显示了 macOS 上的 Firefox 71 和 Safari 13 以及 Windows 10 上的 Chrome 79 和 Edge 18 中的默认、聚焦和禁用的复选框。_
 
 ![Default, focused and disabled Checkboxes in Firefox 71 and Safari 13 on Mac and Chrome 79 and Edge 18 on Windows 10](checkboxes.png)
 
diff --git a/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.md b/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.md
index 819d7916fbc51a..834f6e8763f984 100644
--- a/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.md
+++ b/files/zh-cn/learn/forms/sending_and_retrieving_form_data/index.md
@@ -7,7 +7,7 @@ slug: Learn/Forms/Sending_and_retrieving_form_data
 
 本文将讨论当用户提交表单时发生了什么——数据去了哪，以及当它到达时该如何处理？我们还研究了与发送表单数据相关的一些安全问题。
 
-<table class="learn-box standard-table">
+<table>
   <tbody>
     <tr>
       <th scope="row">前提：</th>
@@ -16,7 +16,7 @@ slug: Learn/Forms/Sending_and_retrieving_form_data
           基本计算机素养，对<a
             href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML"
             >HTML 的理解</a
-          >，对<a href="/zh-CN/docs/Web/HTTP/Basics_of_HTTP">HTTP</a> 和<a
+          >，对<a href="/zh-CN/docs/Web/HTTP">HTTP</a> 和<a
             href="/zh-CN/docs/Learn/Server-side/First_steps"
             >服务器端编程</a
           >的基础知识。
diff --git a/files/zh-cn/learn/forms/sending_forms_through_javascript/index.md b/files/zh-cn/learn/forms/sending_forms_through_javascript/index.md
index 5c4e9fae05141e..d965effa6becb2 100644
--- a/files/zh-cn/learn/forms/sending_forms_through_javascript/index.md
+++ b/files/zh-cn/learn/forms/sending_forms_through_javascript/index.md
@@ -2,380 +2,125 @@
 title: 使用 JavaScript 发送表单
 slug: Learn/Forms/Sending_forms_through_JavaScript
 l10n:
-  sourceCommit: 402d8cd44691881e55bf214a7c0cb02bcb817305
+  sourceCommit: 4414bc297a05373570250fe1fb154eab197f29ca
 ---
 
 {{LearnSidebar}}
 
-HTML 表单可以声明式地发送一个 [HTTP](/zh-CN/docs/Web/HTTP) 请求。但也可以通过 JavaScript 来为表单准备用于发送的 HTTP 请求（例如通过 `XMLHttpRequest`）。本文对这些方法进行了探讨。
+当用户提交 HTML 表单（如通过点击{{glossary("Submit_button", "提交按钮")}}）时，浏览器会发出 [HTTP](/zh-CN/docs/Web/HTTP) 请求，来发送表单中的数据。但是，web 应用有时会使用 JavaScript API（如 {{domxref("Window/fetch", "fetch()")}}），以编程方式将数据发送到期望提交表单的端点，而不是采用这种声明式方法。本文将解释为什么这是一个重要的用例，并说明如何实现它。
 
-## 表单不总是表单
+## 为什么使用 JavaScript 提交表单数据？
 
-在渐进式 Web 应用、单页应用和基于框架的应用中，通常会使用 [HTML 表单](/zh-CN/docs/Learn/Forms)来发送数据，而不会在收到响应数据时加载新文档。让我们先来谈谈为什么这需要一种不同的方法。
+根据文章[发送表单数据](/zh-CN/docs/Learn/Forms/Sending_and_retrieving_form_data)中的描述，标准 HTML 表单提交会加载发送数据的目标 URL，这意味着浏览器窗口将以加载整个页面的方式进行导航。
 
-### 获得整体界面的控制
+然而，许多 web 应用（特别是{{glossary("progressive web apps","渐进式 web 应用")}}和{{glossary("SPA","单页面应用")}}）都使用 JavaScript API 向服务器请求数据，并更新页面的相关部分，从而避免加载整个页面的开销。
 
-如前一篇文章所述，标准 HTML 表单提交会加载发送数据的 URL，这意味着浏览器窗口会以全页面加载的方式进行导航。避免全页面加载可以避免网络延迟和可能出现的视觉问题（如闪烁），从而提供更流畅的体验。
+因此，当这些 web 应用想要提交表单数据时，仅使用 HTML 表单来收集用户输入，而不提交数据。当用户尝试发送数据时，应用会接管控制权并使用 JavaScript API（如 {{domxref("Window/fetch", "fetch()")}}）来发送数据。
 
-许多现代用户界面只使用 HTML 表单来收集用户输入，而不是用于数据提交。当用户尝试发送数据时，应用程序会控制并在后台异步传输数据，只更新用户界面中需要更改的部分。
+## JavaScript 表单提交的问题
 
-### 表单提交和 AJAX 请求之间的区别？
+如果 Web 应用的服务器端点由开发人员控制，那么他们可以选择任意方式发送表单数据，例如以 JSON 对象的形式。
 
-{{domxref("XMLHttpRequest")}}（XHR）DOM 对象可以构建 HTTP 请求、发送请求并获取结果。从历史上看，{{domxref("XMLHttpRequest")}} 是为获取和发送 [XML](/zh-CN/docs/Web/XML) 作为交换格式而设计的，后来这种格式被 [JSON](/zh-CN/docs/Glossary/JSON) 所取代。但是，XML 和 JSON 都不适合表单数据请求编码。表单数据（`application/x-www-form-urlencoded`）由键/值对的 URL 编码列表组成。为了传输二进制数据，HTTP 请求被重塑为 `multipart/form-data`。
+然而，如果服务器端点希望提交表单，web 应用就必须以特定方式对数据进行编码。例如，如果数据仅为文本，则可以由 URL 编码的键/值对列表组成，并以 `application/x-www-form-urlencoded` 的 {{httpheader("Content-Type")}} 发送。如果表单包含二进制数据，则必须使用 `multipart/form-data` 内容类型发送。
 
-> [!NOTE]
-> 如今 [Fetch API](/zh-CN/docs/Web/API/Fetch_API) 常用于取代 XHR——它是 XHR 的更现代、更新的版本，工作原理类似，但有一些优点。你在本文中看到的大部分 XHR 代码都可以换成 Fetch。
+{{domxref("FormData")}} 接口以上述方式对数据进行编码，在本文的其余部分，我们将对 `FormData` 进行简要介绍。更多详情，请参阅[使用 FormData 对象](/zh-CN/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects)指南。
 
-如果你控制了前端（在浏览器中执行的代码）和后端（在服务器上执行的代码），就可以发送 JSON/XML，并随心所欲地处理它们。
+## 手动创建 `FormData` 对象
 
-但如果要使用第三方服务，就需要按照服务要求的格式发送数据。
+可以为要添加的每个字段调用其 {{domxref("FormData.append()", "append()")}} 方法（传入字段的名称和值），以此来填充 `FormData` 对象。对于文本字段，值可以是字符串；对于二进制字段（包括 {{domxref("File")}} 对象），值可以是 {{domxref("Blob")}}。
 
-那么我们应该如何发送这些数据呢？下面将介绍所需要的不同技术。
-
-## 发送表单数据
-
-一共有三种方式来发送表单数据：
-
-- 手工构建 `XMLHttpRequest`。
-- 使用独立的 `FormData` 对象。
-- 使用绑定到 `<form>` 元素的 `FormData`。
-
-让我们仔细看一下。
-
-### 手工构建 XMLHttpRequest
-
-{{domxref("XMLHttpRequest")}} 是进行 HTTP 请求的最安全可靠的方式。要使用 {{domxref("XMLHttpRequest")}} 发送表单数据，请通过 URL 编码准备数据，并遵守表单数据请求的具体规定。
-
-让我们看个示例：
-
-```html
-<button>点我！</button>
-```
-
-这是 JavaScript 代码部分：
-
-```js
-const btn = document.querySelector("button");
-
-function sendData(data) {
-  console.log("Sending data");
-
-  const XHR = new XMLHttpRequest();
-
-  const urlEncodedDataPairs = [];
-
-  // 将数据对象转换为 URL 编码的键/值对数组。
-  for (const [name, value] of Object.entries(data)) {
-    urlEncodedDataPairs.push(
-      `${encodeURIComponent(name)}=${encodeURIComponent(value)}`,
-    );
-  }
-
-  // 将配对合并为单个字符串，并将所有 % 编码的空格替换为
-  // “+”字符；匹配浏览器表单提交的行为。
-  const urlEncodedData = urlEncodedDataPairs.join("&").replace(/%20/g, "+");
-
-  // 定义成功数据提交时发生的情况
-  XHR.addEventListener("load", (event) => {
-    alert("耶！已发送数据并加载响应。");
-  });
-
-  // 定义错误提示
-  XHR.addEventListener("error", (event) => {
-    alert("哎呀！出问题了。");
-  });
-
-  // 建立我们的请求
-  XHR.open("POST", "https://example.com/cors.php");
-
-  // 为表单数据 POST 请求添加所需的 HTTP 头
-  XHR.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-
-  // 最后，发送我们的数据。
-  XHR.send(urlEncodedData);
-}
-
-btn.addEventListener("click", () => {
-  sendData({ test: "ok" });
-});
-```
-
-这里是实时演示效果：
-
-{{EmbedLiveSample("构建_xmlhttprequest", "100%", 50)}}
-
-> [!NOTE]
-> 当你想要往第三方网站传输数据时，使用 {{domxref("XMLHttpRequest")}} 会受到{{glossary('same-origin policy', '同源策略')}}的影响。如果你需要执行跨源请求，你需要熟悉一下 [CORS 和 HTTP 访问控制](/zh-CN/docs/Web/HTTP/CORS)。
-
-### 使用 XMLHttpRequest 和 FormData 对象
-
-手动建立一个 HTTP 请求非常困难。幸运的是，[XMLHttpRequest 规范](https://www.w3.org/TR/XMLHttpRequest/)提供了一种方便简单的方法——利用 {{domxref("FormData","FormData")}} 对象来处理表单数据请求。
-
-{{domxref("FormData","FormData")}} 对象可以用来构建用于传输的表单数据，或是获取表单元素中的数据来管理它的发送方式。
-
-该对象的使用详见[使用 FormData 对象](/zh-CN/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects)，下面是两个示例：
-
-#### 使用一个独立的 FormData 对象
-
-```html
-<button>点我！</button>
-```
-
-你应该会觉得那个 HTML 示例很熟悉，现在来展示 JavaScript 代码：
+在下面的示例中，当用户点击按钮时，将以表单提交的形式发送数据：
 
 ```js
-const btn = document.querySelector("button");
-
-function sendData(data) {
-  const XHR = new XMLHttpRequest();
-  const FD = new FormData();
-
-  // 把我们的数据添加到这个 FormData 对象中
-  for (const [name, value] of Object.entries(data)) {
-    FD.append(name, value);
+async function sendData(data) {
+  // 构建一个 FormData 实例
+  const formData = new FormData();
+
+  // 添加一个文本字段
+  formData.append("name", "Pomegranate");
+
+  // 添加一个文件
+  const selection = await window.showOpenFilePicker();
+  if (selection.length > 0) {
+    const file = await selection[0].getFile();
+    formData.append("file", file);
   }
 
-  // 定义数据成功发送并返回后执行的操作
-  XHR.addEventListener("load", (event) => {
-    alert("耶！已发送数据并加载响应。");
-  });
-
-  // 定义发生错误时执行的操作
-  XHR.addEventListener("error", (event) => {
-    alert("Oops! 出错了。");
-  });
-
-  // 设置请求地址和方法
-  XHR.open("POST", "https://example.com/cors.php");
-
-  // 发送这个 formData 对象，HTTP 请求头会自动设置
-  XHR.send(FD);
-}
-
-btn.addEventListener("click", () => {
-  sendData({ test: "ok" });
-});
-```
-
-这里是实时演示效果：
-
-{{EmbedLiveSample("使用一个独立的_FormData_对象", "100%", 50)}}
-
-#### 使用绑定到表单元素上的 FormData
-
-你也可以把一个 `FormData` 对象绑定到一个 {{HTMLElement("form")}} 元素上。这会创建一个 `FormData` 对象，表示表单中包含的数据。
-
-这段 HTML 是典型的情况：
-
-```html
-<form id="myForm">
-  <label for="myName">告诉我你的名字：</label>
-  <input id="myName" name="name" value="小明" />
-  <input type="submit" value="提交" />
-</form>
-```
-
-但是 JavaScript 接管了这个表单：
-
-```js
-window.addEventListener("load", () => {
-  function sendData() {
-    const XHR = new XMLHttpRequest();
-
-    // 我们把这个 FormData 和表单元素绑定在一起。
-    const FD = new FormData(form);
-
-    // 我们定义了数据成功发送时会发生的事件
-    XHR.addEventListener("load", (event) => {
-      alert(event.target.responseText);
+  try {
+    const response = await fetch("https://example.org/post", {
+      method: "POST",
+      // 将 FormData 实例设置为请求正文
+      body: formData,
     });
-
-    // 我们定义了失败的情形下会发生的事件
-    XHR.addEventListener("error", (event) => {
-      alert("哎呀！出了一些问题。");
-    });
-
-    // 我们设置了我们的请求
-    XHR.open("POST", "https://example.com/cors.php");
-
-    // 发送的数据是由用户在表单中提供的
-    XHR.send(FD);
+    console.log(await response.json());
+  } catch (e) {
+    console.error(e);
   }
+}
 
-  // 获取表单元素
-  const form = document.getElementById("myForm");
-
-  // 接管表单的 submit 事件
-  form.addEventListener("submit", (event) => {
-    event.preventDefault();
-
-    sendData();
-  });
-});
+const send = document.querySelector("#send");
+send.addEventListener("click", sendData);
 ```
 
-这里是实时演示效果：
-
-{{EmbedLiveSample("使用绑定到表单元素上的_FormData", "100%", 50)}}
-
-你甚至可以通过使用表单的 {{domxref("HTMLFormElement.elements", "elements")}} 属性来更多的参与此过程，来得到一个包含表单里所有数据元素的列表，并且逐一手动管理它们。想了解更多，请参见示例[访问表单控件](/zh-CN/docs/Web/API/HTMLFormElement/elements#访问表单控件)。
-
-## 处理二进制数据
+1. 首先，构建一个新的、空的 `FormData` 对象。
+2. 接下来，调用 `append()` 两次，向 `FormData` 对象添加两个项目：一个文本字段和一个文件。
+3. 最后，我们使用 `fetch()` API 发出 {{httpmethod("POST")}} 请求，并将 `FormData` 对象设置为请求体。
 
-如果你使用一个含有 `<input type="file">` 组件的 {{domxref("FormData","FormData")}} 表单对象，数据会被自动处理。但是要手动发送二进制数据的话，还有额外的工作要做。
+请注意，不必设置 {{httpheader("Content-Type")}} 标头：当将 `FormData` 对象传入 `fetch()` 时，会自动设置正确的标头。
 
-在现代网络上，二进制数据有很多来源：例如 {{domxref("FileReader")}}、{{domxref("HTMLCanvasElement","Canvas")}}、[WebRTC](/zh-CN/docs/Web/API/Navigator/getUserMedia)，等等。不幸的是，一些过时的浏览器无法访问二进制数据，或是需要非常复杂的工作环境。这些遗留问题已经超出了本文的涵盖范围。如果你想了解更多关于 `FileReader` API 的知识，参见[如何在 web 应用程序中使用文件](/zh-CN/docs/Web/API/File_API/Using_files_from_web_applications)。
+## 关联 `FormData` 对象和 `<form>`
 
-发送二进制数据最简单的方法是使用 {{domxref("FormData", "FormData")}} 的 `append()` 方法，如上图所示。如果必须手工操作，就比较麻烦了。
+如果提交的数据来自 {{htmlelement("form")}}，则可以通过将表单传入 `FormData` 构造函数来填充 `FormData` 实例。
 
-在下面的例子中，我们使用了{{domxref("FileReader")}} API 来访问二进制数据，然后手动构建多部分表单数据请求：
+假设我们的 HTML 声明了一个 `<form>` 元素：
 
 ```html
-<form id="myForm">
+<form id="userinfo">
   <p>
-    <label for="theText">文本数据：</label>
-    <input id="theText" name="myText" value="一些文本数据" type="text" />
+    <label for="username">输入你的姓名：</label>
+    <input type="text" id="username" name="username" value="Dominic" />
   </p>
   <p>
-    <label for="theFile">文件数据：</label>
-    <input id="theFile" name="myFile" type="file" />
+    <label for="avatar">选择一个头像</label>
+    <input type="file" id="avatar" name="avatar" required />
   </p>
-  <button>提交！</button>
+  <input type="submit" value="Submit" />
 </form>
 ```
 
-如你所见，这个 HTML 只是一个标准的 `<form>`，没有什么神奇的事情。“魔法”都在 JavaScript 里：
+表单包含一个文本输入、一个文件输入和一个提交按钮。
+
+JavaScript 如下：
 
 ```js
-// 因为我们想获取 DOM 节点，
-// 我们在页面加载时初始化我们的脚本。
-window.addEventListener("load", () => {
-  // 这些变量用于存储表单数据
-  const text = document.getElementById("theText");
-  const file = {
-    dom: document.getElementById("theFile"),
-    binary: null,
-  };
-
-  // 使用 FileReader API 获取文件内容
-  const reader = new FileReader();
-
-  // 因为 FileReader 是异步的，会在完成读取文件时存储结果
-  reader.addEventListener("load", () => {
-    file.binary = reader.result;
-  });
-
-  // 页面加载时，如果一个文件已经被选择，那么读取该文件。
-  if (file.dom.files[0]) {
-    reader.readAsBinaryString(file.dom.files[0]);
-  }
+const form = document.querySelector("#userinfo");
 
-  // 如果没有被选择，一旦用户选择了它，就读取文件。
-  file.dom.addEventListener("change", () => {
-    if (reader.readyState === FileReader.LOADING) {
-      reader.abort();
-    }
-
-    reader.readAsBinaryString(file.dom.files[0]);
-  });
-
-  // 发送数据是我们需要的主要功能
-  function sendData() {
-    // 如果存在被选择的文件，等待它读取完成
-    // 如果没有，延迟函数的执行
-    if (!file.binary && file.dom.files.length > 0) {
-      setTimeout(sendData, 10);
-      return;
-    }
-
-    // 要构建我们的多部分表单数据请求，
-    // 我们需要一个 XMLHttpRequest 实例
-    const XHR = new XMLHttpRequest();
-
-    // 我们需要一个分隔符来定义请求的每一部分。
-    const boundary = "blob";
-
-    // 将我们的主体请求存储于一个字符串中
-    let data = "";
-
-    // 所以，如果用户已经选择了一个文件
-    if (file.dom.files[0]) {
-      // 在请求体中开始新的一部分
-      data += `--${boundary}\r\n`;
-
-      // 把它描述成表单数据
-      data +=
-        "content-disposition: form-data; " +
-        // 定义表单数据的名称
-        `name="${file.dom.name}"; ` +
-        // 提供文件的真实名字
-        `filename="${file.dom.files[0].name}"\r\n`;
-      // 和文件的 MIME 类型
-      data += `Content-Type: ${file.dom.files[0].type}\r\n`;
-
-      // 元数据和数据之间有一条空行。
-      data += "\r\n";
-
-      // 将二进制数据添加到主体请求中
-      data += file.binary + "\r\n";
-    }
-
-    // 文本数据更简单一些
-    // 在主体请求中开始一个新的部分
-    data += `--${boundary}\r\n`;
-
-    // 假设这是表单数据，并命名它
-    data += `content-disposition: form-data; name="${text.name}"\r\n`;
-    // 元数据和数据之间有一条空行。
-    data += "\r\n";
-
-    // 添加文本数据到主体请求中
-    data += text.value + "\r\n";
-
-    // 一旦完成，“关闭”主体请求
-    data += `--${boundary}--`;
-
-    // 定义成功提交数据执行的语句
-    XHR.addEventListener("load", (event) => {
-      alert("耶！已发送数据并加载响应。");
-    });
+async function sendData() {
+  // 将 FormData 对象与表单元素关联起来
+  const formData = new FormData(form);
 
-    // 定义发生错误时做的事
-    XHR.addEventListener("error", function (event) {
-      alert("哎呀！出现了一些问题。");
+  try {
+    const response = await fetch("https://example.org/post", {
+      method: "POST",
+      // 将 FormData 实例设置为请求正文
+      body: formData,
     });
-
-    // 建立请求
-    XHR.open("POST", "https://example.com/cors.php");
-
-    // 添加需要的 HTTP 头部来处理多部分表单数据 POST 请求
-    XHR.setRequestHeader(
-      "Content-Type",
-      `multipart/form-data; boundary=${boundary}`,
-    );
-
-    // 最后，发送数据。
-    XHR.send(data);
+    console.log(await response.json());
+  } catch (e) {
+    console.error(e);
   }
+}
 
-  // 获取表单元素
-  const form = document.getElementById("theForm");
-
-  // 添加 submit 事件处理器
-  form.addEventListener("submit", (event) => {
-    event.preventDefault();
-    sendData();
-  });
+// 接管表单提交
+form.addEventListener("submit", (event) => {
+  event.preventDefault();
+  sendData();
 });
 ```
 
-这里是实时演示效果：
-
-{{EmbedLiveSample("处理二进制数据", "100%", 150)}}
-
-## 总结
+为表单元素添加了一个提交事件处理程序。首先调用 {{domxref("Event.preventDefault()", "preventDefault()")}} 阻止浏览器内置的表单提交，这样我们就可以接手了。然后，调用 `sendData()` 来获取表单元素并将其传递给 `FormData` 构造函数。
 
-取决于不同的浏览器和正在处理数据的类型，通过 JavaScript 发送数据可能会很简单，也可能会很困难。{{domxref("FormData","FormData")}} 对象是通用的答案，所以请毫不犹豫地在旧浏览器上通过 [polyfill](https://github.com/jimmywarting/FormData) 使用它：
+之后，我们使用 `fetch()` 以 HTTP `POST` 请求的形式发送 `FormData` 实例。
 
 ## 参见
 
diff --git a/files/zh-cn/learn/getting_started_with_the_web/dealing_with_files/index.md b/files/zh-cn/learn/getting_started_with_the_web/dealing_with_files/index.md
index 74b0956e0bb0d0..6a4bcc9adf9911 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/dealing_with_files/index.md
+++ b/files/zh-cn/learn/getting_started_with_the_web/dealing_with_files/index.md
@@ -1,46 +1,55 @@
 ---
 title: 处理文件
 slug: Learn/Getting_started_with_the_web/Dealing_with_files
+l10n:
+  sourceCommit: 865acb22b74a49927b98267566369d4677414f53
 ---
 
 {{LearnSidebar}}{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
 
-一个网站包含许多文件：文本内容、代码、样式表、媒体内容，等等。当你建立一个网站时，你需要在计算机上将这些文件以合理的结构组织起来，确保文件之间交互畅通，并在你最终[将它们上传到服务器](/zh-CN/docs/Learn/Getting_started_with_the_web/Publishing_your_website)之前使你的所有内容看起来正确。*处理文件*讨论了一些你应该注意的问题，以便你能为你的网站建立一个合理的文件结构。
+一个网站包含许多文件：文本内容、代码、样式表、媒体内容，等等。在建立一个网站时，你需要在计算机上将这些文件以合理的结构组织起来，确保文件之间交互畅通，并在最终[将它们上传到服务器](/zh-CN/docs/Learn/Getting_started_with_the_web/Publishing_your_website)之前使所有内容看起来正确。*处理文件*讨论了一些你应该注意的问题，以便你能为你的网站建立一个合理的文件结构。
 
 ## 网站应该保存在何处？
 
-对于本地网站，应将所有相关文件放在一个单独文件夹中，可以映射出服务器端站点文件结构。这个文件夹可以放在任何你喜欢的地方，但你应该把它放在你能轻易找到的地方，也许是在你的桌面上，在你的主页文件夹里，或者在你的硬盘根目录下。
+当你在本地计算机上构建网站时，应该将所有的相关文件放在一个映射出服务器端线上站点文件结构的单独文件夹中。这个文件夹可以放在你喜欢的任何地方，但你应该把它放在能轻易找到的地方，也许是在桌面上，在家目录里，或者在硬盘根目录下。
 
-1. 选择一个地方来存储你的网站项目。在你选择的地方，创建一个名为 `web-projects`（或类似）的新文件夹。这是你所有的网站项目的存放地。
-2. 在这个文件夹中，创建另一个文件夹来存放你的第一个网站。称之为 `test-site`（或更有想象力的东西）。
+1. 选择一个存放网站项目的地方。在你选择的地方，创建一个名为 `web-projects`（或类似）的新文件夹。这是你所有的网站项目的存放地。
+2. 在这个文件夹中，创建另一个存放你的第一个网站的文件夹。称之为 `test-site`（或更有想象力的名字）。
 
 ## 关于大小写和空格的提示
 
-你会注意到，在这篇文章中，我们要求你完全用小写字母命名文件夹和文件，没有空格。这是因为：
+你会注意到，在本文中，我们要求你完全用小写字母且不带空格命名文件夹和文件。这是因为：
 
-1. 许多计算机，特别是网络服务器，是区分大小写的。因此，假如你把一张图片放在你的网站上 `test-site/MyImage.jpg`，然后在一个不同的文件中，你试图以 `test-site/myimage.jpg` 来调用该图片，它可能无法工作。
-2. 浏览器、网络服务器和编程语言对空格的处理并不一致。例如，如果你在文件名中使用空格，一些系统可能将其视为两个文件名。一些服务器会用“%20”（URL 中空格的字符代码）替换文件名中的区域，导致所有链接被破坏。最好用连字符而不是下划线来分隔单词。对比 `my-file.html` 与 `my_file.html`。
+1. 许多计算机，特别是 Web 服务器，是区分大小写的。因此，假如把你的网站上的一张图片放在 `test-site/MyImage.jpg`，然后在一个不同的文件中，你试图以 `test-site/myimage.jpg` 调用该图片，它可能无法工作。
+2. 许多情况下，带有空格的文件名会出现问题：
 
-简言之，文件名中应使用连字符。谷歌搜索引擎把连字符当作单词的分隔符，但不会识别下划线。基于此，最好在一开始就养成习惯，文件夹和文件名使用小写，用短横线来分隔。这可以避免许多问题。
+   - 在终端中调用命令时，你不得不在带有空格的文件名的周围包裹引号，否则这个路径会解释成两个不同的项。
+   - 一些编程语言（如 Python）在导入模块文件时，不能很好地处理文件名中的空格。
+
+文件名也会映射为 URL。例如，假设在你的服务器提供服务的根目录下有一个名为 `my_file.html` 的文件，根据大多数 Web 服务器的默认行为，一般是可以通过 `https://example.com/my_file.html` 访问这个文件。一些服务器会将文件名中的空格替换为“%20”（URL 中空格的字符代码），在假定文件名和 URL 完全匹配的情况下，会出现一些难以捉摸的服务器端逻辑错误。
+
+也建议文件名使用连字符分割单词，而不是下划线：对比 `my-file.html` 和 `my_file.html`。[谷歌搜索引擎把连字符当作单词的分隔符，但不会把下划线当作单词的分隔符](https://developers.google.com/search/docs/crawling-indexing/url-structure)。通过服务器配置将下划线替换为连字符能避免这种情况，但那是额外的工作并且文件名和 URL 不一致更容易出错。
+
+基于这些原因，最好养成文件夹名和文件名使用小写、不带空格、用连字符分隔单词的习惯，至少直到你清楚自己在做什么的那个时候。那样的话，在接下来的旅程中，你遇到的问题会更少。
 
 ## 网站应该使用什么结构？
 
-接下来，让我们看看我们的测试网站应该是什么结构。在我们创建的任何网站项目中，最常见的是一个主页 HTML 文件和包含图像、样式文件和脚本文件的文件夹。现在让我们来创建这些：
+接下来，让我们看看测试网站应该使用什么结构。在我们创建的任何网站项目中，最常见的是一个主页 HTML 文件和包含图像、样式文件和脚本文件的文件夹。现在让我们创建这些：
 
-1. **`index.html`**：这个文件一般会包含主页内容，也就是人们第一次进入网站时看到的文字和图片。使用文本编辑器，创建一个名为`index.html`的新文件，并将其保存在`test-site`文件夹内。
+1. **`index.html`**：这个文件一般包含主页内容，也就是用户第一次访问网站时看到的文字和图片。使用文本编辑器，创建一个名为 `index.html` 的新文件，并将其保存在 `test-site` 文件夹内。
 2. **`images` 文件夹**：这个文件夹包含网站上使用的所有图片。在 `test-site` 文件夹内创建一个名为 `images` 的文件夹。
-3. **`styles` 文件夹**：这个文件夹包含用于设置内容样式的 CSS 代码（例如，设置文本和背景颜色）。在你的 `test-site` 文件夹内创建一个名为 `styles` 的文件夹。
+3. **`styles` 文件夹**：这个文件夹包含为内容提供样式的 CSS 代码（例如，设置文本和背景的颜色）。在 `test-site` 文件夹内创建一个名为 `styles` 的文件夹。
 4. **`scripts` 文件夹**：这个文件夹包含所有用于向网站添加交互功能的 JavaScript 代码（例如，点击时加载数据的按钮）。在 `test-site` 文件夹内创建一个名为 `scripts` 的文件夹。
 
 > [!NOTE]
-> 在 Windows 上你可能看不到文件扩展名，因为 Windows 有一个默认开启的**隐藏已知文件类型的扩展名**的选项。一般来说，你可以通过 Windows 资源管理器，选择**文件夹选项**选项，取消勾选**隐藏已知文件类型的扩展名**复选框，然后点击**确认**将其关闭。对于涉及你的 Windows 版本的更多具体信息，你可以在网上搜索。
+> 在 Windows 上你可能看不到文件扩展名，因为 Windows 有一个默认开启的**隐藏已知文件类型的扩展名**的选项。一般来说，你可以通过 Windows 资源管理器，选择**文件夹选项**选项，取消勾选**隐藏已知文件类型的扩展名**复选框，然后点击**确认**将其关闭。你可以在网上搜索涉及你的 Windows 版本的更多具体信息。
 
 ## 文件路径
 
-为使文件间正常交互，应为每个文件提供访问路径，所以一个文件知道另一个文件的位置。为作为演示，我们将在 `index.html` 中插入一小段 HTML，并使其显示你在[“你的网站会是什么样？“](/zh-CN/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like)一文中选择的图片。或者，你可以在你的电脑上或从网上选择一个现有的图片，并在下面的步骤中使用它：
+为使文件之间交互通畅，你必须提供一个文件间的文件路径，让一个文件知道另一个文件的位置。作为演示，我们将在 `index.html` 中插入一小段 HTML，显示在[“你的网站会是什么样子？“](/zh-CN/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like)一文中选择的图片。或者，你可以在电脑上或从网上选择一张现有的图片，并在下面的步骤中使用它：
 
-1. 将你之前选择的图片复制到你的 `images` 文件夹。
-2. 打开你的 `index.html` 文件，并准确地将以下代码插入该文件中。当下不要对其感到困惑——我们将在本系列的后面更详细地研究这些结构。
+1. 将前面选择的图片复制到 `images` 文件夹。
+2. 打开 `index.html` 文件，准确无误地将下列代码插入该文件中。现在不用担心它是什么意思——我们将在本系列后面的文章中更详细地研究这些结构。
 
    ```html
    <!doctype html>
@@ -56,17 +65,18 @@ slug: Learn/Getting_started_with_the_web/Dealing_with_files
    </html>
    ```
 
-3. 该行代码 `<img src="" alt="My test image">` 用于向页面中插入图片。我们需要告知 HTML 图片的位置。这张图片位于 _images_ 目录下，与 `index.html` 处于同一目录。为了从 `index.html` 访问到我们的图像，我们需要的文件路径是 `images/your-image-filename`。例如，这里的图像叫做 `firefox-icon.png`，那么文件路径就是 `images/firefox-icon.png`。
-4. 在 HTML 代码 `src=""` 的双引号之间插入文件路径。
-5. 保存 HTML 文件，然后使用浏览器打开（双击该文件）。你应该看到新网页显示了新的图像！
+3. 该行 HTML 代码 `<img src="" alt="My test image">` 用于向页面插入图片。我们需要告知 HTML 图片的位置。这张图片位于与 `index.html` 处于同一目录的 _images_ 目录下。为了从 `index.html` 访问到图片，我们需要的文件路径是 `images/your-image-filename`。假如图片叫做 `firefox-icon.png`，那么文件路径就是 `images/firefox-icon.png`。
+4. 在代码 `src=""` 的双引号之间插入文件路径。
+5. 将 `alt` 属性的内容改成引入的[图片的描述信息](/zh-CN/docs/Web/HTML/Element/img#使用有实际意义的备用描述)。在这个例子中，就是 `alt="Firefox 标志：一只盘旋在地球上的火狐"`。
+6. 保存 HTML 文件，然后使用浏览器打开（双击该文件）。你应该看到显示图片的新网页！
 
-![A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world](website-screenshot.png)
+![一张只显示 firefox 标志的基础网站的截图——一只盘旋在地球上的火狐](website-screenshot.png)
 
-文件路径的一些通用规则：
+一些通用的文件路径规则：
 
 - 若引用的目标文件与 HTML 文件同级，只需直接使用文件名，例如：`my-image.jpg`。
 - 要引用子目录中的文件，请在路径前面写上目录名，再加上一个正斜杠。例如：`subdirectory/my-image.jpg`。
-- 若引用的目标文件位于 HTML 文件的**上级**，需要加上两个点。举个例子，如果 `index.html` 在 `test-site` 的一个子文件夹内，而 `my-image.jpg` 在 `test-site` 内，你可以使用`../my-image.jpg` 从 `index.html` 引用 `my-image.jpg`。
+- 若引用的目标文件位于 HTML 文件的**上级**，需要加上两个点。举个例子，如果 `index.html` 在 `test-site` 的一个子文件夹内，而 `my-image.jpg` 在 `test-site` 内，你可以使用 `../my-image.jpg` 从 `index.html` 引用 `my-image.jpg`。
 - 以上方法可以随意组合，比如：`../subdirectory/another-subdirectory/my-image.jpg`。
 
 这是你目前需要知道的全部内容。
@@ -76,8 +86,8 @@ slug: Learn/Getting_started_with_the_web/Dealing_with_files
 
 ## 还应该做些什么？
 
-现在你的文件夹结构应该看起来像这样：
+这就是本文目前的全部内容。现在你的文件夹结构应该看起来像这样：
 
-![A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file](file-structure.png)
+![macOS 访达中的文件结构，包含：有一张图片的 images 文件夹，空的 scripts 和 styles 文件夹和一个 index.html 文件](file-structure.png)
 
 {{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
diff --git a/files/zh-cn/learn/getting_started_with_the_web/how_the_web_works/index.md b/files/zh-cn/learn/getting_started_with_the_web/how_the_web_works/index.md
index c82ac91514b81e..e949f2b339f500 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/how_the_web_works/index.md
+++ b/files/zh-cn/learn/getting_started_with_the_web/how_the_web_works/index.md
@@ -1,100 +1,83 @@
 ---
 title: 万维网是如何工作的
 slug: Learn/Getting_started_with_the_web/How_the_Web_works
+l10n:
+  sourceCommit: 530c1f54e63834411aa38789b1ac82e3831c4dfa
 ---
 
 {{LearnSidebar}}
 
 {{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
 
-这篇文章简单描述了你在计算机或手机上通过浏览器访问网页时发生了什么。
+*万维网是如何工作的*简单描述了你在计算机或手机上通过 Web 浏览器访问网页时发生了什么。
 
-这个理论在短期内对你编写网页代码不会有实质性的帮助，但是不久之后你就会真正受益于理解了后台究竟发生了什么。
+这个理论在短期内对你编写 Web 代码不会有实质性的帮助，但是不久之后你就会真正从理解了后台究竟发生了什么中受益。
 
 ## 客户端和服务器
 
-连接到互联网的计算机被称作客户端和服务器。下面是一个简单描述它们如何交互的图表：
+连接到互联网的计算机被称作**客户端**和**服务器**。下面是一个简单描述它们如何交互的图表：
 
-![Two circles representing client and server. An arrow labelled request is going from client to server, and an arrow labelled responses is going from server to client](simple-client-server.png)
+![两个圆圈代表客户端和服务器。带有请求标签的箭头是指从客户端到服务器，带有相应标签的箭头是指从服务器到客户端](simple-client-server.png)
 
-- 客户端是典型的 Web 用户入网设备（比如，你连接了 Wi-Fi 的电脑，或接入移动网络的手机）和设备上可联网的软件（通常使用像 Firefox 和 Chrome 的浏览器）。
-- 服务器是存储网页，站点和应用的计算机。当一个客户端设备想要获取一个网页时，一份网页的拷贝将从服务器上下载到客户端机器上来在用户浏览器上显示。
+- 客户端是典型的 Web 用户入网设备（比如，你连接了 Wi-Fi 的电脑，或接入移动网络的手机）和设备上能访问 Web 的软件（通常是一个 Web 浏览器，如 Firefox 或者 Chrome）。
+- 服务器是存储网页、站点或应用程序的计算机。当一个客户端设备想要获取一个网页时，一份网页副本将从服务器上下载到客户端机器上，在用户的 Web 浏览器上显示。
 
 ## 其他部分
 
-上文所述的客户端和服务器并不能完成全部工作。还有其他必要的部分，我们将在下面讲述。
+上文所述的客户端和服务器并不能完成全部工作。还涉及许多其他的部分，我们将在下面讲述。
 
-现在，让我们假设 Web 就是一条路。路的一端是客户端，就像你的家。另一端则是服务器，就像你想去的商店。
+现在，让我们假设 Web 就是一条路。路的一端是客户端，就像你的家。另一端则是服务器，就像你想去买东西的商店。
 
-![A black-and-white photo of a person crossing a road at a crosswalk](road.jpg)
+![一张正在穿过斑马线的行人的黑白照片](road.jpg)
 
 除了客户端和服务器，我们还需要了解：
 
-> [!NOTE]
-> 我感觉下面的比喻还不是很契合。我感觉再合理一点的比喻：
->
-> 假如你生活在一个封闭的村子叫做“盘溪新村”，村子盛产苹果。
->
-> - **互联网**：好比地球上纵横交错的道路。
-> - **网络连接**：道路通到了村子路口。从此，村子里的苹果就可以运出去卖了。
-> - **TCP/IP**：为了将村里的苹果能规范有效的运卖出去而不出问题，村长作出如下规定：“用规格刚好 20 cm \* 20 cm \* 20 cm 的泡沫箱来装，之后外面又用相应规格的纸箱包裹上，最后打上透明胶”。并且要求，对方收到时，一定要外包装完好，不然就会补发。而且还给对方发了一张发货单，明确说明了，苹果有多少，是用什么方法包装的，只有货和发货单对上了，对方才会确认收货。
-> - **DNS**：突然一天，郭德纲想吃苹果，就跟于谦说，“我听说盘溪新村（域名）的苹果好，要他们那个套餐一选项啊！”，于谦一听，得，也不知道盘溪新村在哪，打开地图查（DNS）吧，一查，好嘛，江苏省苏州市（IP 地址），于是于谦去了苏州，找了村子，告诉村长，要套餐一，要用顺丰快递，并且留下了北京德云社的地址。
-> - **HTTP**：过了几天，德云社的人一看，有快递来了，来了这么一句，“只收‘顺丰’，拒收其他快递”。司机忙说，“是顺丰，是顺丰”，这才对上暗号，德云社的人收下了货。
-> - **组成文件**：送来的货可不止一车，而且也不止一种苹果，这车是红富士，那车黄富士的。
->
->   - **代码**：有点像，村长事先安排的说明书，让司机到了地方，如何卸车，货放到什么位置，而德云社的看说明书，知道什么样的苹果放到什么位置上，什么样苹果如何食用最佳，等等。
->   - **资源**：不同种类的苹果。
->
-> 一点拙见，在下抛砖引玉，希望有更好理解的比喻。
-
-- **网络连接**: 允许你在互联网上发送和接受数据。基本上和你家到商店的街道差不多。
-- **TCP/IP**: 传输控制协议和因特网互连协议是定义数据如何传输的通信协议。这就像你去商店购物所使用的交通方式，比如汽车或自行车（或是你能想到的其他可能）。
-- **DNS**: 域名系统服务器像是一本网站通讯录。当你在浏览器内输入一个网址时，浏览器获取网页之前将会查看域名系统。浏览器需要找到存放你想要的网页的服务器，才能发送 HTTP 请求到正确的地方。就像你要知道商店的地址才能到达那。
-- **HTTP**: 超文本传输协议是一个定义客户端和服务器间交流的语言的协议（{{Glossary("Protocol" , "protocol")}} ）。就像你下订单时所说的话一样。
-- **组成文件**: 一个网页由许多文件组成，就像商店里不同的商品一样。这些文件有两种类型：
-
-  - **代码** : 网页大体由 HTML、CSS、JavaScript 组成，不过你会在后面看到不同的技术。
-  - **资源** : 这是其他组成网页的东西的集合，比如图像、音乐、视频、Word 文档、PDF 文件。
+- **网络连接**：允许你在 Web 上发送和接受数据。基本上和你家到商店的街道差不多。
+- **TCP/IP**：传输控制协议和互联网协议是定义数据如何在互联网上传输的通信协议。这就像你去商店购物所使用的交通方式，比如汽车或自行车（或是你能想到的其他可能）。
+- **DNS**：域名系统像是一本网站地址簿。当你在浏览器内输入一个网址时，浏览器通过 DNS 找到网站的 IP 地址，然后获取网站。浏览器需要找到网站所在的服务器，这样才能发送 HTTP 消息到正确的地方（参见下方）。就像你要知道商店的地址才能到达那。
+- **HTTP**：超文本传输协议是一个定义客户端和服务器之间如何交流的应用层{{Glossary("Protocol" , "协议")}}。就像你下订单时所说的话一样。
+- **组成文件**：一个网站由许多文件组成，就像商店里不同的商品一样。这些文件有两种主要的类型：
+
+  - **代码文件**：网页大体由 HTML、CSS、JavaScript 组成，不过你会在后面看到其他的技术。
+  - **资源**：这是其他组成网页的东西的集合，比如图像、音频、视频、Word 文档、PDF 文件。
 
 ## 到底发生了什么？
 
 当你在浏览器里输入一个网址时（在我们的例子里就是走向商店的路上时）：
 
-1. 浏览器在域名系统（DNS）服务器上找出存放网页的服务器的实际地址（找出商店的位置）。
-2. 浏览器发送 HTTP 请求信息到服务器来请拷贝一份网页到客户端（你走到商店并下订单）。这条消息，包括其他所有在客户端和服务器之间传递的数据都是通过互联网使用 TCP/IP 协议传输的。
-3. 服务器同意客户端的请求后，会返回一个“200 OK”信息，意味着“你可以查看这个网页，给你～”，然后开始将网页的文件以数据包的形式传输到浏览器（商店给你商品，你将商品带回家）。
+1. 浏览器在域名系统服务器上找出存放网页的服务器的实际地址（找出商店的位置）。
+2. 浏览器发送 HTTP 请求信息到服务器，请求服务器发送一份网站的副本到客户端（你走到商店并下订单）。这条消息，包括其他所有在客户端和服务器之间传递的数据都是通过互联网使用 TCP/IP 协议传输的。
+3. 假设服务器同意客户端的请求，服务器会返回一个“200 OK”信息，意味着“你可以查看这个网页，给你～”，然后开始将网页的文件以数据包的形式传输到浏览器（商店给你商品，你将商品带回家）。
 4. 浏览器将数据包聚集成完整的网页然后将网页呈现给你（商品到了你的门口——新东西，好棒！）。
 
 ## 解析组成文件的顺序
 
-当浏览器向服务器发送请求获取 HTML 文件时，HTML 文件通常包含 {{htmlelement("link")}} 和 {{htmlelement("script")}} 元素，这些元素分别指向了外部的 [CSS](/zh-CN/docs/Learn/CSS) 样式表文件和 [JavaScript](/zh-CN/docs/Learn/JavaScript) 脚本文件。了解这些文件被[浏览器解析](/zh-CN/docs/Web/Performance/How_browsers_work#解析)的顺序是很重要的：
+当浏览器向服务器发送请求获取 HTML 文件时，HTML 文件通常包含 {{htmlelement("link")}} 和 {{htmlelement("script")}} 元素，这些元素分别指向了外部的 [CSS](/zh-CN/docs/Learn/CSS) 样式表文件和 [JavaScript](/zh-CN/docs/Learn/JavaScript) 脚本文件。了解页面加载时[浏览器解析](/zh-CN/docs/Web/Performance/How_browsers_work#解析)这些文件的顺序是很重要的：
 
-- 浏览器首先解析 HTML 文件，并从中识别出所有的 `<link>` 和 `<script>` 元素，获取它们指向的外部文件的链接。
-- 继续解析 HTML 文件的同时，浏览器根据外部文件的链接向服务器发送请求，获取并解析 CSS 文件和 JavaScript 脚本文件。
-- 接着浏览器会给解析后的 HTML 文件生成一个 [DOM](/zh-CN/docs/Web/API/Document_Object_Model) 树（在内存中），会给解析后的 CSS 文件生成一个 [CSSOM](/zh-CN/docs/Glossary/CSSOM) 树（在内存中），并且会[编译和执行](/zh-CN/docs/Web/Performance/How_browsers_work#其他过程)解析后的 JavaScript 脚本文件。
-- 伴随着构建 DOM 树、应用 CSSOM 树的样式、以及执行 JavaScript 脚本文件，浏览器会在屏幕上绘制出网页的界面；用户看到网页界面也就可以跟网页进行交互了。
+- 浏览器首先解析 HTML 文件，并从中识别出所有的指向外部 CSS 样式表的 `<link>` 和指向脚本的 `<script>` 元素引用。
+- 继续解析 HTML 文件的同时，浏览器继续向服务器发送请求以获取 `<link>` 元素中找到的 CSS 文件以及 `<script>` 元素中找到的 JavaScript 文件，然后解析 CSS 和 JavaScript。
+- 接着浏览器会给解析后的 HTML 文件生成一个 [DOM](/zh-CN/docs/Web/API/Document_Object_Model) 树（在内存中），会给解析后的 CSS 文件生成一个 [CSSOM](/zh-CN/docs/Glossary/CSSOM) 树（在内存中），并且会[编译和执行](/zh-CN/docs/Web/Performance/How_browsers_work#javascript_编译)解析后的 JavaScript 脚本文件。
+- 伴随着构建 DOM 树、应用 CSSOM 树的样式，以及执行 JavaScript 脚本文件，浏览器会在屏幕上绘制出网页的界面；用户看到网页界面也就可以跟网页进行交互了。
 
 ## DNS 解析
 
-真正的网址看上去并不像你输入到地址框中的那样美好且容易记忆。它们是一串数字，像 `63.245.217.105`。
+真正的网址看上去并不像你输入到地址栏中的那样美好且容易记忆。它们是特殊的数字，像 `192.0.2.172`。
 
-这叫做 {{Glossary("IP Address", "IP 地址")}}，它代表了一个互联网上独特的位置。然而，它并不容易记忆，不是吗？那就是域名系统（DNS）被发明的原因。它们是将你输入浏览器的地址（像 "mozilla.org"）与实际 IP 地址相匹配的特殊的服务器。
+这叫做 {{Glossary("IP Address", "IP 地址")}}，它代表的是 Web
+上独一无二的位置。然而，它并不容易记忆，不是吗？那就是发明域名系统（DNS）的原因。这个系统使用特殊的服务器将你输入到浏览器（如“mozilla.org”）的网址匹配到网站真实的（IP）地址。
 
-网页可以通过 IP 地址直接访问。你可以通过在 [DNS 查询工具](https://www.nslookup.io/website-to-ip-lookup/) 等工具中输入域名来查找网站的 IP 地址。
+网站可以通过 IP 地址直接访问。你可以使用 [DNS 查询工具](https://www.nslookup.io/website-to-ip-lookup/)查找网站的 IP 地址。
 
 ## 数据包详解
 
-前面我们用“包”来描述了数据从服务器到客户端传输的格式。这是什么意思？基本上，当数据在 Web 上传输时，是以成千上万的小数据块的形式传输的。大量不同的用户都可以同时下载同一个网页。如果网页以单个大的数据块形式传输，一次就只有一个用户下载，无疑会让 Web 非常没有效率并且失去很多乐趣。
+前面我们用术语“包”描述从服务器到客户端传输的数据的格式。这是什么意思？基本上，在 Web 上传输数据时，是以成千上万的小分块的形式传输的。数据以小包的形式传输有多个理由。数据有时候会被丢弃或者损坏，这种情况发生时，小分块更容易被替换。此外，包可以沿着不同的路径进行路由，能使得交换更快并允许大量不同的用户同时下载同一个网站。如果每个网站以单个大的分块形式传输，一次就只有一个用户下载，无疑会让 Web 非常没有效率并且失去很多乐趣。
 
-## 扩展阅读
+## 参见
 
-- [互联网是如何工作的](/zh-CN/docs/learn/How_the_Internet_works)
-- [HTTP — 一种应用级协议](https://dev.opera.com/articles/http-basic-introduction/)
-- [HTTP：让我们开始吧！](https://dev.opera.com/articles/http-lets-get-it-on/)
-- [HTTP：响应代码](https://dev.opera.com/articles/http-response-codes/)
+- [互联网是如何工作的](/zh-CN/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work)
 
 ## 感谢
 
-由 [Kevin D](https://www.flickr.com/photos/kdigga/) 提供的街景图片 [Street composing](https://www.pinterest.com/pin/400538960580676851/)。
+由 [kevin digga](https://www.pinterest.com/kevindigga/) 提供的街景图片 [Street composing](https://www.pinterest.com/pin/400538960580676851/)。
 
 {{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
diff --git a/files/zh-cn/learn/getting_started_with_the_web/html_basics/index.md b/files/zh-cn/learn/getting_started_with_the_web/html_basics/index.md
index 0de0e4c75e43ba..a9655b09e09c47 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/html_basics/index.md
+++ b/files/zh-cn/learn/getting_started_with_the_web/html_basics/index.md
@@ -1,23 +1,25 @@
 ---
 title: HTML 基础
 slug: Learn/Getting_started_with_the_web/HTML_basics
+l10n:
+  sourceCommit: 88467d31d2ad7bdfade8b38ec69f6702fee080d1
 ---
 
 {{LearnSidebar}}
 
 {{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}
 
-超文本标记语言（英语：**H**yper**T**ext **M**arkup **L**anguage，简称：HTML）是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。正如标题所示，本文将对 HTML 及其功能做一个基本介绍。
+超文本标记语言（英语：**H**yper**T**ext **M**arkup **L**anguage，简称：HTML）是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表格。正如标题所示，本文将对 HTML 及其功能做一个基本介绍。
 
 ## HTML 到底是什么？
 
-HTML 不是一门编程语言，而是一种用于定义内容结构的*标记语言*。HTML 由一系列的{{Glossary("element", "元素")}}组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对{{Glossary("tag", "标签")}}可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。例如，键入下面一行内容：
+HTML 是一种用于定义内容结构的*标记语言*。HTML 由一系列的[**元素**](/zh-CN/docs/Glossary/Element)组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对{{Glossary("tag", "标签")}}可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。例如，键入下面一行内容：
 
 ```plain
 My cat is very grumpy
 ```
 
-可以将这行文字封装成一个段落元素来使其在单独一行呈现：
+可以将这行文字封装成一个段落元素来使其独立成行：
 
 ```html
 <p>My cat is very grumpy</p>
@@ -27,59 +29,59 @@ My cat is very grumpy
 
 让我们深入探索一下这个段落元素。
 
-![HTML 元素](grumpy-cat-small.png)
+![段落元素，包含：开始标签，‘my cat is very grumpy’的内容，结束标签](grumpy-cat-small.png)
 
 这个元素的主要部分有：
 
-1. **开始标签**（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用——在本例中即段落由此开始。
-2. **结束标签**（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾——在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
+1. **开始标签**（Opening tag）：包含元素的名称（本例为 p），及一对包围名称的**尖括号**。这表示元素从这里开始或者开始起作用——在本例中即段落由此开始。
+2. **结束标签**（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个*正斜杠*。这表示元素到这里结束——在本例中即段落在此结束。初学者常常会犯忘记添加结束标签的错误，这可能会产生一些奇怪的结果。
 3. **内容**（Content）：元素的内容，本例中就是所输入的文本本身。
 4. **元素**（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。
 
-元素也可以有属性（Attribute）：
+元素也可以有下图中那样的属性（Attribute）：
 
-![HTML 属性](grumpy-cat-attribute-small.png)
+![段落开始标签，以及高亮的 class 属性：class=editor-note](grumpy-cat-attribute-small.png)
 
-属性包含了关于元素的一些额外信息，这些信息本身不应显现在内容中。本例中，`class` 是属性名称，`editor-note` 是属性的值。`class` 属性可为元素提供一个标识名称，以便进一步为元素指定样式或进行其他操作时使用。
+属性包含的是不想在真正的内容中出现的和元素有关的额外信息。本例中，`class` 是属性*名*，`editor-note` 是属性*值*。`class` 属性是可以用于定位元素（以及任何其他有相同 `class` 值的元素）的标识名称，以便进一步为元素指定样式或进行其他操作时使用。一些属性没有值，如 [`required`](/zh-CN/docs/Web/HTML/Attributes/required)。
 
-属性应该包含：
+有值的属性应该包含：
 
-1. 在属性与元素名称（或上一个属性，如果有超过一个属性的话）之间的空格符。
-2. 属性的名称，并接上一个等号。
-3. 由引号所包围的属性值。
+1. 属性与元素名称（或上一个属性，如果元素有超过一个属性的话）之间的一个空格。
+2. 属性名，后接一个等号。
+3. 一对引号包围的属性值。
 
 > [!NOTE]
-> 不包含 ASCII 空格（以及 `"` `'` `` ` `` `=` `<` `>`）的简单属性值可以不使用引号，但是建议将所有属性值用引号括起来，这样的代码一致性更佳，更易于阅读。
+> 不包含 {{Glossary("ASCII")}} 空格（以及 `"` `'` `` ` `` `=` `<` `>`）的简单属性值可以不使用引号，但是建议将所有属性值用引号括起来，这样的代码一致性更佳，更易于阅读。
 
 ### 嵌套元素
 
-也可以将一个元素置于其他元素之中——称作**嵌套**。要表明猫咪非常暴躁，可以将“very”用 {{htmlelement("strong")}} 元素包围，“very”将突出显示：
+也可以将一个元素置于其他元素之中——称作**嵌套**。要表明猫咪**非常**暴躁，可以将“very”用 {{htmlelement("strong")}} 元素包围，“very”将突出显示：
 
 ```html
 <p>My cat is <strong>very</strong> grumpy.</p>
 ```
 
-必须保证元素嵌套次序正确：本例首先使用 {{htmlelement("p")}} 标签，然后是 {{htmlelement("strong")}} 标签，因此要先结束 {{htmlelement("strong")}} 标签，最后再结束 {{htmlelement("p")}} 标签。这样是不对的：
+必须保证元素的嵌套次序正确：在上面的例子中，首先使用 {{htmlelement("p")}} 标签，然后是 {{htmlelement("strong")}} 标签，因此要先结束 {{htmlelement("strong")}} 标签，最后再结束 {{htmlelement("p")}} 标签。这样是不对的：
 
-```html example-bad
+```html-nolint example-bad
 <p>My cat is <strong>very grumpy.</p></strong>
 ```
 
-元素必须正确地开始和结束，才能清楚地显示出正确的嵌套层次。否则浏览器就得自己猜测，虽然它会竭尽全力，但很大程度不会给你期望的结果。所以一定要避免！
+元素必须正确地开始和结束，才能清楚地显示出正确的嵌套层次。要是像上面那样交叠使用，浏览器就得自己猜测，虽然它会竭尽全力，但很大程度不会给你期望的结果。所以一定要避免！
 
 ### 空元素
 
-不包含任何内容的元素称为空元素。比如 {{htmlelement("img")}} 元素：
+不包含任何内容的元素称为[**空元素**](/zh-CN/docs/Glossary/Void_element)。我们以 HTML 页面中已有的 {{htmlelement("img")}} 元素为例：
 
 ```html
 <img src="images/firefox-icon.png" alt="My test image" />
 ```
 
-本元素包含两个属性，但是并没有 `</img>` 结束标签，元素里也没有内容。这是因为图像元素不需要通过内容来产生效果，它的作用是向其所在的位置嵌入一个图像。
+本元素包含两个属性，但是并没有 `</img>` 结束标签，元素里也没有内容。这是因为图像元素不需要通过内容来产生效果，它的作用是向其所在的位置嵌入一张图片。
 
 ### HTML 文档详解
 
-以上介绍了一些基本的 HTML 元素，但孤木不成林。现在来看看单个元素如何彼此协同构成一个完整的 HTML 页面。回顾 [文件处理](/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files) 小节中创建的 `index.html` 示例：
+以上把 HTML 元素作为个体进行介绍，但孤木不成林。现在来看看单个元素如何彼此协同构成一个完整的 HTML 页面。回顾[处理文件](/zh-CN/docs/Learn/Getting_started_with_the_web/Dealing_with_files)文章中创建的 `index.html` 示例：
 
 ```html
 <!doctype html>
@@ -97,11 +99,11 @@ My cat is very grumpy
 
 这里有：
 
-- `<!DOCTYPE html>`——[文档类型](/zh-CN/docs/Glossary/Doctype)。这是必不可少的开头。混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，这个元素用来关联 HTML 编写规范，以供自动查错等功能所用。而在当今，它作用有限，可以说仅用于保证文档正常读取。现在知道这些就足够了。
-- `<html></html>`——{{htmlelement("html")}} 元素。该元素包含整个页面的所有内容，有时候也称作根元素。里面也包含了 `lang` 属性，写明了页面的主要语种。
-- `<head></head>`——{{htmlelement("head")}} 元素。所有那些你加到页面中，且*不*向用户展示的页面内容，都以这个元素为容器。其中包含诸如提供给搜索引擎的{{Glossary("keyword", "关键字")}}和页面描述、用于设置页面样式的 CSS、字符集声明等等。
+- `<!doctype html>`——[文档类型](/zh-CN/docs/Glossary/Doctype)。这是必不可少的开头。混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，这个元素用来关联 HTML 编写规范，以供自动查错等功能所用。而在当今，它作用有限，可以说仅用于保证文档正常读取。现在知道这些就足够了。
+- `<html></html>`——{{htmlelement("html")}} 元素。该元素包含整个页面的所有内容，有时候也称作根元素。它还包含 `lang` 属性，设置页面的主要语种。
+- `<head></head>`——{{htmlelement("head")}} 元素。该元素作为想在 HTML 页面中包含但不想向用户显示的内容的容器。包括想在搜索结果中显示的{{Glossary("keyword", "关键字")}}和页面描述、用于设置页面样式的 CSS、字符集声明等等。
 - `<meta charset="utf-8">`——该元素指明你的文档使用 UTF-8 字符编码，UTF-8 包括世界绝大多数书写语言的字符。它基本上可以处理任何文本内容。以它为编码还可以避免以后出现某些问题，没有理由再选用其他编码。
-- `<meta name="viewport" content="width=device-width">`——[视口元素](/zh-CN/docs/Web/CSS/Viewport_concepts#移动设备的视口)可以确保页面以视口宽度进行渲染，避免移动端浏览器上因页面过宽导致缩放。
+- `<meta name="viewport" content="width=device-width">`——[视口元素](/zh-CN/docs/Web/CSS/Viewport_concepts#移动设备的视口)可以确保页面以视口宽度进行渲染，避免移动端浏览器以比视口更宽的宽度渲染内容，导致内容缩小。
 - `<title></title>`——{{htmlelement("title")}} 元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
 - `<body></body>`——{{htmlelement("body")}} 元素。该元素包含期望让用户在访问页面时看到的*全部*内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。
 
@@ -113,41 +115,45 @@ My cat is very grumpy
 <img src="images/firefox-icon.png" alt="My test image" />
 ```
 
-像之前所讲，该元素通过包含图像文件路径的地址属性 `src`，可在所在位置嵌入图像。
+正如之前讲的那样，该元素通过在属性 `src` 中包含图像文件路径的地址，可在所在位置嵌入图像。
 
-该元素还包括一个替换文字属性 `alt`，是图像的描述内容，用于当图像不能被用户看见时显示，不可见的原因可能是：
+该元素还包括一个替换文字属性 `alt`。在 [`alt` 属性](/zh-CN/docs/Web/HTML/Element/img#使用有实际意义的备用描述)中，是图像的描述内容，用于当图像不能被用户看见时显示，不可见的原因可能是：
 
-1. 用户有视觉障碍。视障用户可以使用屏幕阅读器来朗读 `alt` 属性的内容。
+1. 用户有视觉障碍。有严重视觉障碍的用户可以使用屏幕阅读器来朗读 alt 属性的内容。
 2. 有些错误使图像无法显示。可以试着故意将 `src` 属性里的路径改错。保存并刷新页面就可以在图像位置看到：
 
 ![图片内容为文字“测试图片”](alt-text-example.png)
 
-`alt` 属性的关键字即“描述文本”。`alt` 文本应向用户完整地传递图像要表达的意思。用 "测试图片" 来描述 Firefox 标志并不合适，修改成 "Firefox 标志：一只盘旋在地球上的火狐" 就好多了。
+alt 文本的关键字即“描述文本”。alt 文本应向用户完整地传递图像要表达的意思。用“测试图片”来描述 Firefox 标志并不合适，修改成“Firefox 标志：一只盘旋在地球上的火狐”就好多了。
 
-可以试着为图像编写一些更好的 `alt` 文本。
+可以试着为图像编写一些更好的 alt 文本。
 
 > [!NOTE]
-> 更多信息请参阅 [无障碍访问](/zh-CN/docs/learn/Accessibility)。
+> 更多信息请参阅[无障碍学习模块](/zh-CN/docs/learn/Accessibility)。
 
 ## 标记文本
 
-本段包含了一些最常用的文本标记 HTML 元素。
+本小节包含了一些最常用的文本标记 HTML 元素。
 
 ### 标题（Heading）
 
-标题元素可用于指定内容的标题和子标题。就像一本书的书名、每章的大标题、小标题，等。HTML 文档也是一样。HTML 包括六个级别的标题， {{htmlelement("h1")}}–{{htmlelement("h6")}} ，一般最多用到 3-4 级标题。
+标题元素可用于指定内容的标题和子标题。就像一本书的书名、每章的大标题、小标题，等。HTML 文档也是一样。HTML 包括六个级别的标题，{{htmlelement("Heading_Elements", "&lt;h1&gt; - &lt;h6&gt;")}}，一般最多用到 3-4 级标题。
 
 ```html
+<!-- 4 个级别的标题 -->
 <h1>主标题</h1>
 <h2>顶层标题</h2>
 <h3>子标题</h3>
 <h4>次子标题</h4>
 ```
 
+> [!NOTE]
+> 在 HTML 中，`<!--` 和 `-->` 之间的任何内容都是 **HTML 注释**。浏览器在渲染代码时，会忽略掉注释。换句话说，注释在页面上不可见——仅停留在代码中。HTML 注释是你书写与代码有关的注解或逻辑的一种方式。
+
 可以尝试在 {{htmlelement("img")}} 元素上面添加一个合适的标题。
 
 > [!NOTE]
-> 你可以看到第一级标题是有隐式的主题样式。不要使用标题元素来加大、加粗字体，因为标题对于 [无障碍访问](/zh-CN/docs/learn/Accessibility) 和 [搜索引擎优化](/zh-CN/docs/learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#为什么我们需要结构化？) 等问题非常有意义。要保持页面结构清晰，标题整洁，不要发生标题级别跳跃。
+> 你可以看到第一级标题是有隐式的主题样式。不要使用标题元素来加大、加粗文本，因为标题对于[无障碍](/zh-CN/docs/Learn/Accessibility/HTML#文本内容)和[搜索引擎优化](/zh-CN/docs/learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#为什么我们需要结构化？)非常有意义。要保持页面结构清晰，标题整洁，不要发生标题级别跳跃。
 
 ### 段落（Paragraph）
 
@@ -157,7 +163,7 @@ My cat is very grumpy
 <p>这是一个段落</p>
 ```
 
-试着添加一些文本（在 [设计网站的外观](/zh-CN/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like) 小节）到一个或几个段落中，并把它们放在你的 {{htmlelement("img")}} 元素下方。
+试着向一个或几个段落中添加一些文本（[_你的网站会是什么样子？_](/zh-CN/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like)文章中有这些文本），并把它们放在你的 {{htmlelement("img")}} 元素下方。
 
 ### 列表（List）
 
@@ -195,7 +201,7 @@ Web 上的许多内容都是列表，HTML 有一些特别的列表元素。标
 
 ## 链接
 
-链接非常重要 — 它们赋予 Web 网络属性。要植入一个链接，我们需要使用一个简单的元素 — {{htmlelement("a")}} — a 是 "anchor" （锚）的缩写。要将一些文本添加到链接中，只需如下几步：
+链接非常重要 — 它们赋予 Web 网络属性。要植入一个链接，我们需要使用一个简单的元素 — {{htmlelement("a")}} — “a”是“anchor”（锚）的缩写。要将一些文本添加到链接中，只需如下几步：
 
 1. 选择一些文本。比如“Mozilla Manifesto”。
 2. 将文本包含在 {{htmlelement("a")}} 元素内，就像这样：
@@ -213,14 +219,14 @@ Web 上的许多内容都是列表，HTML 有一些特别的列表元素。标
 4. 把属性的值设置为所需网址：
 
    ```html
-   <a href="https://www.mozilla.org/zh-CN/about/manifesto/"
-     >Mozilla Manifesto</a
-   >
+   <a href="https://www.mozilla.org/zh-CN/about/manifesto/">
+     Mozilla Manifesto
+   </a>
    ```
 
-如果网址开始部分省略了 `https://` 或者 `http://`，可能会得到错误的结果。在完成一个链接后，可以试着点击它来确保指向正确。
+如果网址开始部分省略了 `https://` 或者 `http://`（称作*协议*），可能会得到错误的结果。在完成一个链接后，可以试着点击它来确保指向正确。
 
-> **备注：** `href` 这个名字可能开始看起来有点令人费解，代表超文本引用（ **h**ypertext **ref**erence）。
+> **备注：** `href` 这个名字可能一开始看起来有点令人费解。如果它很难记忆的话，记住它代表的是超文本引用（_**h**ypertext **ref**erence_）。
 
 现在就为页面添加一个链接吧。
 
@@ -228,10 +234,10 @@ Web 上的许多内容都是列表，HTML 有一些特别的列表元素。标
 
 如果你一直跟着这篇文章里的指导做的话，你应该完成了一个像下面这样的页面（也可以[查看这里](https://mdn.github.io/beginner-html-site/)）：
 
-![](finished-test-page-small.png)
+![一张网页截图，包含：Firefox 标志，写着 Mozilla 很酷的标题以及两个文本段落](finished-test-page-small.png)
 
-如果你遇到困难，你可以将 Github 上的[完整示例代码](https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html)与你的文件进行比较。
+如果你遇到困难，你可以将 Github 上的[完整示例代码](https://github.com/mdn/beginner-html-site/blob/main/index.html)与你的文件进行比较。
 
-在这里，我们只是介绍了一点点 HTML。要学习更多，访问我们的 [HTML 学习主题页面](/zh-CN/docs/Learn/HTML) 。
+在这里，我们只是介绍了一点点 HTML。想学习更多，访问我们的[学习 HTML](/zh-CN/docs/Learn/HTML) 主题。
 
 {{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}
diff --git a/files/zh-cn/learn/getting_started_with_the_web/publishing_your_website/index.md b/files/zh-cn/learn/getting_started_with_the_web/publishing_your_website/index.md
index af09b30e5f8b6c..7d6fd7cf2dd46c 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/publishing_your_website/index.md
+++ b/files/zh-cn/learn/getting_started_with_the_web/publishing_your_website/index.md
@@ -1,83 +1,84 @@
 ---
-title: 发布网站
+title: 发布你的网站
 slug: Learn/Getting_started_with_the_web/Publishing_your_website
+l10n:
+  sourceCommit: d71da812ee94c20658cb1916a123a42254ea545c
 ---
 
 {{LearnSidebar}}{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}
 
-在你已经写好了代码并且整理好了你网站的全部文件后，你需要将它们全部上线，这样别人才能看到。这篇文章将向你展示如何轻松地将你简单的示例代码传到网上。
+一旦完成了代码编写和构成网站的文件的组织工作，你就需要把它们全部放在网上，这样人们才能找到它。本文描述如何以最简便的方式将你的简单示例上线至网络。
 
 ## 有哪些方法可供选择？
 
-发布一个网页并不是三言两语就能简单说明的，这主要是因为我们有很多种方法去完成它。在这篇文章里我们并不准备讲述所有方法，而是从初学者的视角讨论以下三种常见的方式的利弊，然后带你看看我们将要使用的一种方法。
+发布一个网站并不是三言两语就能简单说明的，这主要是因为我们有很多种方法去完成它。本文并不试图讲述所有可能的方法，而是先阐述三种适合初学者的方法的优缺点。然后实操一种对许多读者而言立马能用的方法。
 
-### 获取主机服务和域名
+### 获取托管服务和域名
 
-如果你想要完全控制你发布的网页，那么你将需要花钱购置：
+想要对内容和网站外观拥有更多的控制，大多数人会选择购买 Web 托管服务和域名：
 
-- 主机服务——在主机服务提供商的 [Web 服务器](/zh-CN/docs/Learn/Common_questions/What_is_a_web_server)上租用文件空间。将你网站的文件上传到这里，然后服务器会提供 Web 用户需求的内容。
-- [域名](/zh-CN/docs/Learn/Common_questions/What_is_a_domain_name)——一个可以让人们访问的独一无二的地址，比如 `http://www.mozilla.org` 或 `http://www.bbc.co.uk`。你可以从**域名注册商**租借域名。
+- Web 托管服务是指在托管服务提供商的 [Web 服务器](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server)上租用的文件空间。你将网站文件上传到 Web 服务器，然后 Web 服务器向网站用户提供网站内容。
+- [域名](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name)是一个可以让人们访问的独一无二的地址，比如 `https://www.mozilla.org` 或 `https://www.bbc.co.uk`。你可以从**域名注册商**租借域名，年限自定。
 
 许多专业的网站通过这种方法接入互联网。
 
-此外，你将需要一个{{Glossary("FTP", "文件传输协议")}}程序（点击[钻研在网络上做某些事情要花费多少：软件](/zh-CN/docs/Learn/Common_questions/How_much_does_it_cost#软件)查看详细信息）来将网站文件上传到服务器。不同的 FTP 程序涵盖了不同的范围，但是你通常需要使用主机服务提供商给你的详细信息（比如用户名、密码、主机名）登录到 Web 服务器。然后程序在两个窗口里分别显示本地文件和服务器文件，这样你就可以在它们之间进行传输：
+此外，你需要一个{{Glossary("FTP", "文件传输协议")}}程序（更多详情请参见[在互联网上做一件事要花费多少？：软件](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost#软件)）将网站文件上传到服务器。不同的 FTP 程序使用方式不一样，但通常情况下，你需要使用托管服务提供商给你的详细信息（比如用户名、密码、主机名）登录到 Web 服务器。然后程序会在两个窗口里分别显示本地文件和服务器文件，这样你就可以来回传输文件：
 
-![](ftp.jpg)
+![显示网站全部的文件和文件夹并上传至服务器的 FTP 客户端](ftp.jpg)
 
-#### 寻找主机服务和域名的建议
+#### 寻找托管服务和域名的建议
 
-- 我们不会推荐任何商业化的主机公司。要找到主机公司和域名注册商，只需要搜索 "网络主机服务" 和 "域名" 来找到一家出售域名的公司。所有这种类型的公司都允许你查看你想要的域名是否可用。
-- 你的家庭或办公的{{Glossary("ISP", "网络服务提供商")}}可能会提供一些受限制的小型主机空间。它们的能使用的功能都会受到限制，但是它们会非常适合你的第一个实验的——联系一下他们！
-- 有一些免费服务比如 [Neocities](https://neocities.org/)、[Blogspot](https://www.blogger.com) 和 [Wordpress](https://wordpress.com/)。重复一遍，一分钱一分货，不过它们对于你的初次实验可能会是很理想的。免费服务大部分也不需要 FTP 软件来上传文件——你只需要将文件拖入到它们网页的界面里。
-- 有时公司会打包提供主机服务和域名。
+- 我们不会推荐任何商业化的托管服务提供商或域名注册商。要找到托管服务提供商和域名注册商，只需要搜索“Web 托管服务”和“域名”。所有这种类型的公司都允许你查看你想要的域名是否可用。
+- 你的家庭或办公的{{Glossary("ISP", "网络服务提供商")}}可能会为小型的网站提供一些受限的托管服务。尽管能使用的功能有限，但非常适合你的第一次实验。
+- 也有一些可用的免费服务比如 [Neocities](https://neocities.org/)、[Google Sites](https://sites.google.com/)、[Blogger](https://www.blogger.com) 和 [WordPress](https://wordpress.com/)。重复一遍，一分钱一分货，不过它们对于你的第一个网站是很理想的。
+- 许多公司会提供托管服务和域名。
 
 ### 使用在线工具如 GitHub 或 Google App Engine
 
-有一些工具能使你在线发布网站 :
+有一些工具能让你在线发布网站：
 
-- [GitHub](https://github.com/) 是一个“社交编程”网站。它允许你上传代码库并储存在 [Git](http://git-scm.com/) 版本控制系统里。然后你可以协作代码项目，系统是默认开源的，也就是说世界上任何人都可以找到你 GitHub 上的代码。去使用 GitHub，从中学习并且提高自己吧！你也可以对别人的代码那样做！这是一个非常重要、有用的社区，而且 Git/GitHub 是非常流行的 [版本控制系统](https://git-scm.com/book/zh/v2/%E8%B5%B7%E6%AD%A5-%E5%85%B3%E4%BA%8E%E7%89%88%E6%9C%AC%E6%8E%A7%E5%88%B6) — 大部分科技公司在工作中使用它。GitHub 有一个非常有用的特点叫 [GitHub pages](https://pages.github.com/)，允许你将网站代码放在网上。
-- Google App Engine 是一个让你可以在 Google 的基础架构上构建和运行应用的强劲平台——无论你是需要从头开始构建多级 web 应用还是托管一个静态网站。参阅[How do you host your website on Google App Engine?](/zh-CN/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine)以获取更多信息。
+- [GitHub](https://github.com/) 是一个“社交编程”网站。它允许你上传代码库并将其储存在 [Git](https://git-scm.com/) 版本控制系统里。然后你可以在代码项目上进行协作，系统默认是开源的，也就是说世界上任何人都可以找到你 GitHub 上的代码，并进行使用、学习和改善。GitHub 有一个非常有用的特性叫 [GitHub Pages](https://pages.github.com/)，允许你发布网站。
+- [Google App Engine](https://cloud.google.com/appengine/) 是一个让你在 Google 的基础架构上构建和运行应用程序的强大的平台——无论你是需要从头开始构建一个多级的 Web 应用程序还是托管一个静态网站。更多信息请参阅[如何在 Google App Engine 上托管你的网站？](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/How_do_you_host_your_website_on_Google_App_Engine)。
 
-不同于大部分其他托管服务，这类工具通常是免费的，不过你只能使用有限的功能。
+尽管这类工具通常是免费的，但你只能使用有限的功能。
 
 ### 使用像 CodePen 这样基于 Web 的集成开发环境
 
-有许多 web 应用能够仿真一个网站开发环境。你可以在这种应用——通常只有一个标签页——里输入 HTML、CSS 和 JavaScript 代码然后像显示网页一样显示代码的结果。通常这些工具都很简单，对学习很有帮助，而且至少有免费的基本功能，它们在一个独特的网址显示你提交的网页。不过，这些应用的基础功能很有限，而且应用通常不提供空间来存储图像等内容。
+有许多仿真一个网站开发环境的 Web 应用，能够输入 HTML、CSS 和 JavaScript 代码然后像显示网页一样显示代码的结果——都在一个浏览器标签页中。一般来说，这些工具相对简单，对学习很有帮助，便于分享代码（例如，你想向其他办公室的同事分享技术或者寻求除错帮助），以及免费（基础特性免费）。它们在一个独一无二的网址显示你提交的网页。不过，功能有限并且这些应用程序通常不提供资源（如图像）的托管空间。
 
 使用一下以下几种工具，看看你最喜欢哪一个：
 
 - [JSFiddle](https://jsfiddle.net/)
 - [Glitch](https://glitch.com/)
-- [JSBin](https://jsbin.com/)
+- [JS Bin](https://jsbin.com/)
 - [CodePen](https://codepen.io/)
 
-![](jsbin-screen.png)
+![基于 Web 的集成开发环境 JS Bin 的截图](jsbin-screen.png)
 
 ## 通过 GitHub 发布
 
-现在，让我们通过 Github 页面告诉你公布的你的代码是如此的简单。
+现在，让我们通过 GitHub Pages 向你演示发布网站是如此的简单。
 
-1. 首先， [注册一个 GitHub 账号，](https://github.com/join) 并确认你的邮箱地址。
-2. 接下来，你需要创建一个新的资源库 ( repository ) 来存放你的文件。
-3. 在这个页面上，在 _Repository name_ 输入框里输入 _username_.github.io，username 是你的用户名。比如，我们的朋友 bobsmith 会输入 _bobsmith.github.io。同时勾选_ _Initialize this repository with a README_，然后点击 _Create repository_。![](github-create-repo.png)
-4. 然后，将你的网站文件夹里的内容拖拽到你的资源库 ( repository )，再点击 _Commit changes_。
+1. 首先，[注册一个 GitHub 账号](https://github.com/)，并验证你的邮箱地址。
+2. 接下来，你需要[创建一个仓库](https://github.com/new)来存放文件。
+3. 在这个页面上，在 _Repository name_ 输入框里输入 _username_.github.io，_username_ 是你的用户名。比如，我们的朋友 Bob Smith 会输入 _bobsmith.github.io_。同时勾选“_Initialize this repository with a README_”，然后点击 _Create repository_。![一个 GitHub 仓库页的示例](github-create-repo.png)
+4. 然后，将你的网站文件夹里的内容拖拽到你的仓库，再点击 _Commit changes_。
 
    > [!NOTE]
-   > 确保你的文件夹有一个 _index.html_ 文件。
+   > 确保你的文件夹有一个 `index.html` 文件。
 
-5. 现在将你的浏览器转到 _username_.github.io 来在线查看你的网站。比如，_如果用户名为 chrisdavidmills_, 请转到 [chrisdavidmills.github.io](http://chrisdavidmills.github.io/)。
+5. 现在将你的浏览器转到 _username_.github.io 在线查看你的网站。假如用户名为 _chrisdavidmills_, 请转到 [_chrisdavidmills_.github.io](https://chrisdavidmills.github.io/)。
 
    > [!NOTE]
-   > 你的网站可能需要几分钟的时间才能投入使用。如果它不能立即工作，你可能需要等待几分钟，然后再试一次。
+   > 你的网站可能需要几分钟的时间才能投入使用。如果它不能立即工作，等待几分钟，然后再试一次。
 
-想要了解更多，请看 [GitHub Pages Help](https://help.github.com/categories/github-pages-basics/).
+想要了解更多，请看 [GitHub Pages 帮助](https://docs.github.com/zh/pages/getting-started-with-github-pages)。
 
 ## 延展阅读
 
-- [什么是网络服务器？](/zh-CN/docs/Learn/Common_questions/What_is_a_web_server)
-- [什么是域名？](/zh-CN/docs/Learn/Common_questions/What_is_a_domain_name)
-- [钻研在网络上做某些事情要花费多少？](/zh-CN/docs/Learn/Common_questions/How_much_does_it_cost)
-- [Deploy a Website](https://www.codecademy.com/learn/deploy-a-website)（英文）：来自 Codeacademy 的一个很好的教程，它比本教程更进一步，并展示了一些其他技术。
-- Scott Murray 的 [Cheap or free static web hosting](http://alignedleft.com/resources/cheap-web-hosting) （价格低廉或免费的静态 Web 主机服务）包含一些对可用的 Web 主机服务的建议。
+- [什么是 Web 服务器？](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_web_server)
+- [什么是域名？](/zh-CN/docs/Learn/Common_questions/Web_mechanics/What_is_a_domain_name)
+- [在互联网上做一件事要花费多少？](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost)
+- [Deploy a Website](https://www.codecademy.com/learn/deploy-a-website)：Codeacademy 提供的一个很好的教程，它比本文更深入一些，还展示了一些其他技术。
 
 {{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}
diff --git a/files/zh-cn/learn/getting_started_with_the_web/the_web_and_web_standards/index.md b/files/zh-cn/learn/getting_started_with_the_web/the_web_and_web_standards/index.md
index dc040f6804d2b0..f20fc251409a53 100644
--- a/files/zh-cn/learn/getting_started_with_the_web/the_web_and_web_standards/index.md
+++ b/files/zh-cn/learn/getting_started_with_the_web/the_web_and_web_standards/index.md
@@ -1,43 +1,45 @@
 ---
 title: Web 和 Web 标准
 slug: Learn/Getting_started_with_the_web/The_web_and_web_standards
+l10n:
+  sourceCommit: f75b2c86ae4168e59416aed4c7121f222afc201d
 ---
 
 {{learnsidebar}}
 
-这篇文章提供了一些有用的 Web 背景知识——它是如何产生的，什么是 Web 标准技术，它们是如何协同工作的，为什么“Web 开发人员”是一个很好的职业选择，以及你将在本课程中学习哪些最佳做法。
+本文提供一些实用的和 Web 相关的背景故事——Web 是如何诞生的、什么是 Web 标准技术、Web 和 Web 标准技术是如何一起工作的、为什么“Web 开发者”是一个很好的职业选择，以及在课程中你将学习什么样的最佳实践。
 
 ## Web 简史
 
-我们会简单叙述，因为别处已有很多关于 Web 历史的详尽说明，稍后我们会链接到它们（如果那你对更多细节内容感兴趣，也请试着在你惯用的搜索引擎中搜索“Web 的历史”以获取相关内容。）
+我们会简单叙述，因为别处已有很多关于 Web 历史的详尽说明，稍后我们会提供相关链接（如果你对更多细节感兴趣，也请试着在你惯用的搜索引擎中搜索“Web 的历史”以获取相关内容。）
 
-在 20 世纪 60 年代末期，美国军方开发了一个名为 [ARPANET](/zh-CN/docs/Glossary/Arpanet) 的通信网络。这可以认为是 Web 的先驱，因为它基于 [分组交换（packet switching）](https://en.wikipedia.org/wiki/Packet_switching) 进行工作，并且首次实现了 [TCP/IP 协议族（TCP/IP protocol suite）](https://en.wikipedia.org/wiki/Internet_protocol_suite) 。这两种技术构成了互联网基础设施的基础。
+在 20 世纪 60 年代末期，美国军方开发了一个名为 [ARPANET](/zh-CN/docs/Glossary/Arpanet) 的通信网络。这可以认为是 Web 的先驱，因为它基于[分组交换](https://zh.wikipedia.org/wiki/分组交换)进行工作，并且首次实现了 [TCP/IP](https://zh.wikipedia.org/wiki/TCP/IP协议族) 协议族。这两种技术构成了互联网基础设施的基础。
 
 1980 年，Tim Berners-Lee（通常称之为 TimBL）写了一个叫 ENQUIRE 的笔记本程序，这个程序实现了不同节点之间链接的概念。听起来有点熟悉对吧？
 
-快进到 1989 年，TimBL 在 CERN 撰写了 [《Information Management: A Proposal》](https://www.w3.org/History/1989/proposal.html) 和《HyperText》 ；这两个出版物共同为 Web 将如何工作做了铺垫。两个出版物获得了极大的关注，这足以说服 TimBL 的上司让他继续前进，并创建一个全球超文本系统。
+快进到 1989 年，TimBL 在 CERN 撰写了[《Information Management: A Proposal》](https://www.w3.org/History/1989/proposal.html)和《HyperText》；这两个出版物共同为 Web 的工作方式做了铺垫。两个出版物获得了极大的关注，这足以说服 TimBL 的上司让他继续前进，并创建一个全球超文本系统。
 
-到 1990 年底，TimBL 已经创建了运行第一个版本的 Web 所需的所有东西——[HTTP](/zh-CN/docs/Web/HTTP)、[HTML](/zh-CN/docs/Web/HTML)、名为 [WorldWideWeb](https://zh.wikipedia.org/wiki/WorldWideWeb) 的第一个 Web 浏览器、一个 HTTP 服务器和一些用于查看的网页。
+到 1990 年底，TimBL 创建了运行第一个版本的 Web 所需的所有东西——[HTTP](/zh-CN/docs/Web/HTTP)、[HTML](/zh-CN/docs/Web/HTML)、名为 [WorldWideWeb](https://zh.wikipedia.org/wiki/WorldWideWeb) 的第一个 Web 浏览器、一个 HTTP 服务器和一些用于查看的网页。
 
-在随后的几年中，随着多个浏览器的发布，数以千计 Web 服务器的建立，上百万网页的生成，Web 爆发式发展。OK，这只是对事件非常粗略的描述，但我向你说过会简单叙述。
+在随后的几年中，随着多个浏览器的发布、数以千计 Web 服务器的建立、上百万网页的生成，Web 爆发式发展。好吧，这只是对事件非常粗略的描述，但我向你说过会简单叙述。
 
-最后一个值得分享的重要事件在 1994 年，TimBL 建立了[万维网联盟（World Wide Web Consortium，W3C）](https://en.wikipedia.org/wiki/World_Wide_Web_Consortium)，该组织汇集了来自许多不同技术公司的代表，共同制定 Web 技术规范。随后其他的技术像 [CSS](/zh-CN/docs/Web/CSS) 和 [JavaScript](/zh-CN/docs/Web/JavaScript) 出现了，Web 开始看起来更像我们现在所了解的 Web。
+最后一个值得分享的重要事件发生在 1994 年，TimBL 建立了[万维网联盟](https://zh.wikipedia.org/wiki/万维网联盟)（W3C），该组织汇集了来自许多不同技术公司的代表，共同制定 Web 技术规范。随后其他的技术像 [CSS](/zh-CN/docs/Web/CSS) 和 [JavaScript](/zh-CN/docs/Web/JavaScript) 出现了，Web 开始看起来更像我们现在所了解的 Web。
 
 ## Web 标准
 
-**Web 标准**是我们用来建立 Web 网站的技术。这些标准存在于名为规范的较长的技术文档中，该文档详细说明了技术应如何工作。这些文档对于学习如何使用它们所描述的技术并不是很有用（这就是我们建立像 MDN Web Docs 这样的网站的原因），而是旨在供软件工程师用来实现这些技术（通常在 Web 浏览器中）。
+**Web 标准**是我们用来建立网站的技术。这些标准以名为规范的长技术文档的形式存在，这些文档非常详细地说明了技术的工作方式。这些文档对于学习如何使用它们所描述的技术并不是很有用（这就是我们建立像 MDN Web 文档这样的网站的原因），相反是供软件工程师用来实现这些技术（通常在 Web 浏览器中）。
 
-例如，[HTML Living Standard](https://html.spec.whatwg.org/multipage/) 描述了应如何实现 HTML（所有 HTML 元素及其关联的 API 和其他相关技术）。
+例如，[HTML 现行标准](https://html.spec.whatwg.org/multipage/)详细地描述了 HTML 的实现方式（所有 HTML 元素及其关联的 API 和其他相关技术）。
 
-Web 标准是由标准机构创建的——这些机构邀请不同技术公司的人员聚集在一起，并就如何以最佳方式实现所有用例达成共识。W3C 是最著名的 Web 标准组织，但还有其他组织，例如[WHATWG](https://whatwg.org/)（负责 HTML 语言的现代化），[ECMA](https://www.ecma-international.org/)（发布基于 JavaScript 的 ECMAScript 标准），[Khronos](https://www.khronos.org/)（发布 3D 图形技术，例如 Web GL）等。
+Web 标准是由标准机构创建的——这些机构邀请不同技术公司的人员聚集在一起，并就如何以最佳方式实现所有用例达成共识。W3C 是最著名的 Web 标准组织，但还有其他组织，例如 [WHATWG](https://whatwg.org/)（负责 HTML 语言的现行标准）、[ECMA](https://www.ecma-international.org/)（发布 ECMAScript 标准，JavaScript 基于该标准）、[Khronos](https://www.khronos.org/)（发布 3D 图形技术，例如 WebGL）等。
 
 ### “开放”标准
 
-Web 标准的关键方面之一，TimBL 和 W3C 从一开始就认同的一点，Web（和 Web 技术）应该自由地贡献和使用，并且不受专利/许可的约束。因此，任何人都可以编写代码免费建立网站，并且任何人都可以为编写规范的标准创建过程做出贡献。
+TimBL 和 W3C 从一开始就认同的 Web 标准的关键特性之一就是：Web（和 Web 技术）应该自由地贡献和使用，并且不受专利/许可的约束。因此，任何人都可以编写代码免费建立网站，并且任何人都可以为形成规范的标准建立过程做出贡献。
 
-由于 Web 技术是开放的，因此在许多不同公司之间的协作中，这意味着没有一家公司可以控制它，这确实是一件好事。你不会希望任何一家公司突然决定将整个 Web 置于付费壁垒之后，或者发布每个人都必须购买以继续制作网站的新版 HTML，或者更糟糕的是，仅仅将他们不再感兴趣的网站关闭。
+由于 Web 技术是开放的，因此在许多不同公司之间的协作中，这意味着没有一家公司可以控制它，这确实是一件好事。你不会希望任何一家公司突然决定将整个 Web 置于付费壁垒之后，或者发布一个每个人都必须购买以继续制作网站的新版 HTML，或者更糟糕的是，仅仅将他们不再感兴趣的网站关闭。
 
-这一点允许 Web 保持免费可用，使其成为公共资源。
+这一点让 Web 保持是免费、可用的公共资源。
 
 ### 不要破坏 Web
 
@@ -45,43 +47,43 @@ Web 标准的关键方面之一，TimBL 和 W3C 从一开始就认同的一点
 
 ## Web 开发者是一个很好的选择
 
-如果你正在寻找工作，网络行业是一个非常有吸引力的市场。最新公布的数据表明，目前全球大约有 1900 万网络开发人员，并且这个数字在接下来的十年中将增长两倍以上。同时，该行业存在技能短缺的问题，那么还有什么更好的时间来学习 Web 开发呢？
+如果你正在寻找工作，Web 行业是一个非常有吸引力的市场。最新公布的数据表明，目前全球大约有 1900 万 Web 开发人员，并且这个数字在接下来的十年中将增长两倍以上。同时，该行业存在技能短缺的问题，那么还有什么更好的时间来学习 Web 开发呢？
 
-然而，这并不仅仅是娱乐或者游戏——建立网站比以前要复杂得多，并且你必须花一些时间来研究要用到的所有不同的技术，所有你需要了解的技巧和最佳的技术做法，以及所有需要实现的典型模式。真正起步需要花几个月的时间，然后你需要继续学习，继续练习和完善自己的技术，以使你的知识与 Web 平台上出现的所有新工具和功能步调一致。
+然而，这并不仅仅是娱乐或者游戏——建立网站比以前要复杂得多，并且你必须花一些时间来研究要用到的所有不同的技术，所有你需要了解的技巧和最佳实践，以及所有需要实现的典型模式。真正起步需要花几个月的时间，然后你需要继续学习，继续练习和完善自己的技术，以使你的知识与 Web 平台上出现的所有新工具和功能步调一致。
 
 _唯一不变的就是变化。_
 
-这听起来很难？不用担心——我们致力于为你提供入门所需的一切，事情将会变得更加轻松。一旦你适应了网络的不断变化和不确定性，你将开始享受乐趣。作为 Web 社区的一员，你将拥有整个 Web 的联系人和有用的资料来帮助你，并且你将开始享受它所带来的创造的可能性。
+这听起来很难？不用担心——我们致力于为你提供入门所需的一切，事情将会变得更加轻松。一旦你适应了 Web 的不断变化和不确定性，你将开始享受乐趣。作为 Web 社区的一员，你将从整个 Web 联系和有用的资料中获得帮助，并且你将开始享受它所带来的创造的可能性。
 
 你现在是数字创意家了。享受这种体验和谋生的可能性吧。
 
-## 现代网络技术概述
+## 现代 Web 技术概述
 
-如果你想成为前端 Web 开发人员，可以学习多种技术。在本节中，我们将简要描述它们。有关其中某些功能是如何协同工作的详尽说明，请阅读我们的文章 [Web 是如何工作的](/zh-CN/docs/Learn/Getting_started_with_the_web/How_the_Web_works)。
+如果你想成为前端 Web 开发人员，要学习多种技术。在本节中，我们将简要描述它们。有关其中某些功能是如何协同工作的详尽说明，请阅读我们的文章 [Web 是如何工作的](/zh-CN/docs/Learn/Getting_started_with_the_web/How_the_Web_works)。
 
 ### 浏览器
 
-你可能此刻正在 Web 浏览器中阅读这些文字（除非你已将其打印出来，或正在使用辅助技术，例如屏幕阅读器将其读给你听）。Web 浏览器是人们用来浏览 Web 的软件程序，包括 [Firefox](https://www.mozilla.org/en-US/firefox/)、[Chrome](https://www.google.com/chrome/)、[Opera](https://www.opera.com/)、[Safari](https://www.apple.com/safari/) 和 [Edge](https://www.microsoft.com/en-us/windows/microsoft-edge).
+你可能此刻正在 Web 浏览器中阅读这些文字（除非你已将其打印出来，或正在使用辅助技术读给你听，例如屏幕阅读器）。Web 浏览器是人们用来浏览 Web 的软件程序，包括 [Firefox](https://www.mozilla.org/zh-CN/firefox/)、[Chrome](https://www.google.cn/chrome/)、[Opera](https://www.opera.com/)、[Safari](https://www.apple.com/safari/) 和 [Edge](https://www.microsoft.com/zh-cn/edge)。
 
 ### HTTP
 
-超文本传输协议（Hypertext Transfer Protocol，[HTTP](/zh-CN/docs/Web/HTTP/Basics_of_HTTP)），它允许 Web 浏览器与 Web 服务器（存储网站的位置）进行通信。典型的通信就像这样
+超文本传输协议（[HTTP](/zh-CN/docs/Web/HTTP)）是一个允许 Web 浏览器与 Web 服务器（存储网站的位置）进行通信的消息传输协议。典型的通信就像这样
 
 ```plain
-"你好 Web 服务器。你可以给我用于渲染 bbc.co.uk 的文件吗？"
+“你好 Web 服务器。你可以给我用于渲染 bbc.co.uk 的文件吗？”
 
-"当然啦 Web 浏览器——给你"
+“当然啦 Web 浏览器——给你”
 
 [下载文件并渲染 Web 页面]
 ```
 
 HTTP 消息（称为请求和响应）的实际语法不是人类可读的，但这个例子为你提供了基本概念。
 
-### HTML , CSS , 和 JavaScript
+### HTML、CSS 和 JavaScript
 
-[HTML](/zh-CN/docs/Web/HTML)，[CSS](/zh-CN/docs/Web/CSS)，和 [JavaScript](/zh-CN/docs/Web/JavaScript) 是你用来建立网站的三种主要技术：
+[HTML](/zh-CN/docs/Web/HTML)、[CSS](/zh-CN/docs/Web/CSS) 和 [JavaScript](/zh-CN/docs/Web/JavaScript) 是你用来建立网站的三种主要技术：
 
-- 超文本标记语言（HTML）是一种标记语言，由可以包装（标记）内容以赋予其含义（语义）和结构的各种元素组成。简单的 HTML 看起来像这样：
+- 超文本标记语言（**HTML**）是一种标记语言，由可以包装（标记）内容以赋予其含义（语义）和结构的各种元素组成。简单的 HTML 看起来像这样：
 
   ```html
   <h1>这是一个顶级标题</h1>
@@ -93,7 +95,7 @@ HTTP 消息（称为请求和响应）的实际语法不是人类可读的，但
 
   如果我们采用房屋建筑类比的话，HTML 就像房屋的地基和墙壁一样，赋予房屋结构并将其结合在一起。
 
-- 级联样式表（Cascading Style Sheets，CSS）是一种基于规则的语言，用于将样式应用于 HTML，例如，设置文本和背景颜色，添加边框，设置动画效果或以某种方式布置页面。作为一个简单的示例，以下代码会将我们的 HTML 段落变为红色：
+- 层叠样式表（CSS）是一种基于规则的语言，用于将样式应用于 HTML，例如，设置文本和背景的颜色、添加边框、设置动画效果或以某种方式对页面进行布局。作为一个简单的示例，以下代码会将我们的 HTML 段落变为红色：
 
   ```css
   p {
@@ -101,58 +103,58 @@ HTTP 消息（称为请求和响应）的实际语法不是人类可读的，但
   }
   ```
 
-  在房屋类比中，CSS 就像用来使房屋看起来更漂亮的油漆，墙纸，地毯和油画。
+  在房屋类比中，CSS 就像用来使房屋看起来更漂亮的油漆、墙纸、地毯和油画。
 
-- 从动态样式切换到从服务器获取更新，再到复杂的 3D 图形， **JavaScript** 是我们用来向网站添加交互性的编程语言。以下简单的 JavaScript 将在内存中存储对我们段落的引用，并更改其中的文本：
+- 从动态样式切换到从服务器获取更新，再到复杂的 3D 图形，**JavaScript** 是我们用来向网站添加交互性的编程语言。以下简单的 JavaScript 将在内存中存储一个对我们段落的引用，并更改其中的文本：
 
   ```js
   let pElem = document.querySelector("p");
   pElem.textContent = "我们改变了文本！";
   ```
 
-  在房屋类比中，JavaScript 就像炊具，电视，微波炉或吹风机，这些东西为你的房屋提供了有用的功能。
+  在房屋类比中，JavaScript 就像炊具、电视、微波炉或吹风机，这些东西为你的房屋提供了有用的功能。
 
 ### 开发工具
 
-一旦了解了可用于构建网页的“原始”技术（例如 HTML，CSS 和 JavaScript），你很快就会发现各种可用于使工作更轻松或更有效的工具。例如：
+一旦了解了可用于构建网页的“原始”技术（例如 HTML、CSS 和 JavaScript），你很快就会遇到各种让工作更轻松或更有效的工具。例如：
 
-- 现代浏览器中的 [开发人员工具（developer tools）](/zh-CN/docs/Learn/Common_questions/What_are_browser_developer_tools)可用于调试代码。
-- 可用于运行测试以显示你的代码是否按预期运行的 [测试工具（Testing tools）](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing)。
-- 建立在 JavaScript 之上的库和框架，使你可以更快，更有效地构建某些类型的网站。
-- 所谓的“Linters” ，它包含了一组规则，检查你的代码之后，会突出显示你未正确遵循规则的地方。
-- Minifiers，它将代码文件中的所有空格删除以使其更小，从而可以更快地从服务器下载。
+- 现代浏览器中的[开发人员工具](/zh-CN/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools)可用于调试代码。
+- 可用于运行测试以显示你的代码是否按预期运行的[测试工具](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing)。
+- 建立在 JavaScript 之上的库和框架，使你可以更快，更有效地构建特定类型的网站。
+- 所谓的“linter”，它包含了一组规则，检查你的代码之后，会突出显示你未正确遵循规则的地方。
+- 极简化器（minifier），它将代码文件中的所有空格删除以使其更小，从而可以更快地从服务器下载。
 
 ### 服务器端语言和框架
 
-HTML，CSS 和 JavaScript 是前端（或客户端）语言，这意味着它们由浏览器运行以生成用户可以使用的网站前端。
+HTML、CSS 和 JavaScript 是前端（或客户端）语言，这意味着浏览器运行它们生成用户可以使用的网站前端。
 
-还有另一类语言，称为后端（或服务器端）语言，这意味着它们先在服务器上运行，然后再将结果发送到浏览器进行显示。服务器端语言的一种典型用法是从数据库中获取一些数据并生成一些 HTML 以包含该数据，然后再将 HTML 发送给浏览器以将其显示给用户。
+还有另一类语言，称为后端（或服务器端）语言，这意味着它们先在服务器上运行，然后再将结果发送到浏览器进行显示。服务器端语言的一种典型用法是从数据库中获取数据并生成包含该数据的 HTML，然后再将 HTML 发送给浏览器并向用户显示。
 
-服务器端语言的例子包括 ASP.NET，Python，PHP 和 NodeJS。
+服务器端框架的例子包括 ASP.NET（C#）、Django（Python）、Laravel（PHP）和 Next.js（JavaScript）。
 
-## Web 最佳做法
+## Web 最佳实践
 
-我们已经简要讨论了用于构建网站的技术。现在，让我们讨论应该采用的最佳做法，以确保以最佳方式使用这些技术。
+我们已经简要讨论了用于构建网站的技术。现在，让我们讨论应该采用的最佳实践，以确保用最佳方式使用这些技术。
 
 在进行 Web 开发时，不确定性的主要原因来自以下实际情况：你不知道每个用户将使用哪类技术条件来查看你的网站：
 
 - 用户 1 可能正在带有狭窄屏幕的 iPhone 上观看它。
 - 用户 2 可能正在连接了宽屏显示器的 Windows 笔记本电脑上查看它。
 - 用户 3 可能是盲人，并且使用屏幕阅读器向他们朗读网页。
-- 用户 4 可能正在使用无法运行现代浏览器的旧台式机。
+- 用户 4 可能正在使用相当旧的无法运行现代浏览器的台式机。
 
-因为你不完全知道用户将使用什么，所以你需要进行防御性设计——使你的网站尽可能灵活，以便上述所有用户都可以使用它，即使他们可能得到并不完全相同的体验。简而言之，我们正在努力使所有人都能使用 Web。
+因为你不完全知道用户要用什么，所以你需要进行防御性设计——使你的网站尽可能灵活，以便上述所有用户都可以使用它，即使他们可能得到并不完全相同的体验。简而言之，我们正在努力使所有人都能使用 Web。
 
-在学习的某些时候，你将遇到以下概念。
+在你的学习过程中，你将遇到以下概念。
 
-- **跨浏览器兼容性**（Cross-browser compatibility）是一种确保你的网页能够在尽可能多的设备上运行的做法。这包括使用所有浏览器都支持的技术，为可以处理这些浏览器的浏览器提供更好的体验（逐步增强），和/或编写代码，从而使之退回到较旧的浏览器中更简单但仍可用的体验（平稳降级）。它还涉及大量测试，以查看某些浏览器是否有任何故障，然后进行更多工作来修复这些故障。
-- **响应式网页设计**（Responsive Web design）是一种使功能和布局变得灵活以便它们可以自动适应不同的浏览器的做法。一个明显的例子是在桌面上的宽屏浏览器中以一种方式进行布局，但在手机浏览器中以另一种更紧凑的单列布局的网站。现在请尝试调整浏览器窗口的宽度，然后看看会发生什么。
+- **跨浏览器兼容性**（Cross-browser compatibility）是一种确保你的网页能够在尽可能多的设备上运行的实践。这包括使用所有浏览器都支持的技术，为能提供这些功能（渐进增强）的浏览器提供更好的体验，和/或编写在较旧的浏览器中能回退到更简单但仍可用的体验（平稳降级）的代码。它还涉及大量测试，以查看某些浏览器是否有任何故障，然后进行更多工作来修复这些故障。
+- **响应式 Web 设计**（Responsive Web design）是一种使功能和布局变得灵活的实践，这样它们可以自动适应不同的浏览器。一个明显的例子是在桌面上的宽屏浏览器中以一种方式进行布局、但在手机浏览器中以另一种更紧凑的单列布局的网站。现在请尝试调整浏览器窗口的宽度，然后看看会发生什么。
 - **性能**（Performance）意味着要尽快加载网站，而且还应使其直观易用，以使用户不会碰壁离开。
 - **无障碍**（Accessibility）意味着使你的网站可供尽可能多的不同类型的人使用（相关概念是多样性和包容性，以及包容性设计）。这包括视力障碍，听力障碍，认知障碍或肢体障碍的人。它也不仅仅局限于残疾人——也包含年轻人或老年人、来自不同文化的人、使用移动设备的人、或网络连接不可靠或缓慢的人。
-- **国际化**（Internationalization）意味着使网站可以供来自不同文化背景的人使用，这些人会说和你不同的语言。这一点可以考虑一些技术手段（例如，更改布局以使其对于从右到左甚至垂直的语言仍然可以正常使用）和人为手段（例如，使用简单的非俚语，以便使以你的语言作为第二或第三语言的人更可能理解你的文字）。
+- **国际化**（Internationalization）意味着使网站可以供来自不同文化背景、讲着不同语言的人使用。这一点可以考虑一些技术手段（例如，更改布局以使其对于从右到左甚至垂直的语言仍然可以正常使用）和人为手段（例如，使用简单的非俚语，以便使以你的语言作为第二或第三语言的人更可能理解你的文字）。
 - **隐私与安全**（Privacy & Security）这两个概念相关但不同。隐私是指允许人们私下从事其业务，而不是监视他们或收集你绝对不需要的更多数据。安全性是指以安全的方式构建你的网站，以使恶意用户无法从你或你的用户那里窃取信息。
 
 ## 参见
 
-- [History of the World Wide Web](https://en.wikipedia.org/wiki/History_of_the_World_Wide_Web)
-- [How does the internet work?](/zh-CN/docs/Learn/Common_questions/How_does_the_Internet_work)
+- [万维网的历史](https://en.wikipedia.org/wiki/History_of_the_World_Wide_Web)
+- [互联网是如何工作的](/zh-CN/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work)
diff --git a/files/zh-cn/learn/html/tables/basics/index.md b/files/zh-cn/learn/html/tables/basics/index.md
index 26546d3d0220c0..b9efbf0fec9ddf 100644
--- a/files/zh-cn/learn/html/tables/basics/index.md
+++ b/files/zh-cn/learn/html/tables/basics/index.md
@@ -7,12 +7,13 @@ slug: Learn/HTML/Tables/Basics
 
 本文将从 HTML 表格开始，介绍一些基本的内容，如行和单元格、标题、使单元格跨越多个列和行，以及如何将列中的所有单元组合在一起进行样式化。
 
-<table class="learn-box standard-table">
+<table>
   <tbody>
     <tr>
-      <th scope="row">前置知识：</th>
+      <th scope="row">前提：</th>
       <td>
-        HTML 基本概念（参见<a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML 介绍</a>）。
+        HTML 基本概念（参见
+        <a href="/zh-CN/docs/Learn/HTML/Introduction_to_HTML">HTML 介绍</a>）。
       </td>
     </tr>
     <tr>
@@ -24,95 +25,198 @@ slug: Learn/HTML/Tables/Basics
 
 ## 什么是表格？
 
-表格是由行和列组成的结构化数据集（表格数据），它让你快速简单地查找某个表示不同类型数据之间的某种关系的值。比如说，某个人和他的年龄，一天或是一周，当地游泳池的时间表。
+表格是由行和列（**表格数据**）组成的结构化数据集，它让你快速简单地查找某个表示不同类型数据之间的某种关系的值。比如说，某个人和他的年龄，一天或是一周，当地游泳池的时间表。
 
-![A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47.](numbers-table.png)
+![示例表格显示了一些人的姓名和年龄：Chris 38 岁、Dennis 45 岁、Sarah 29 岁、Karen 47 岁。](numbers-table.png)
 
-![A swimming timetable showing a sample data table](swimming-timetable.png)
+![显示了游泳时间表的示例数据表格](swimming-timetable.png)
 
 表格在人类社会中很常见，而且已经存在很长时间了，下面这张 1800 年的美国人口普查文件中就可以证明：
 
-![A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.](1800-census.jpg)
+![一份非常古老的羊皮纸文件；上面的数据不易读，但它清楚地显示了正在使用的数据表。](1800-census.jpg)
 
 因此，HTML 的创建者们提供了一种方法来构建和呈现 web 上的表格数据，这也就不足为奇了。
 
 ### 表格如何工作？
 
-表格的一个特点就是严格。通过在行和列的标题之间进行视觉关联的方法，就可以让信息能够很简单地被解读出来。观察下面的示例表格，然后找一个单数人称代词，这个单数人称代词是用于第三人称的，用于女性的，用作句子中的对象。你可以把相应的行和列的标题关联起来，找到答案。
-
-人称代词
+表格的一个特点就是固定不变。通过在行标题和列标题之间建立视觉关联，信息可以容易地被解读。例如，请看下表，找到一个拥有 62 颗卫星的类木气态巨行星。可以通过关联相关行标题和列标题找到答案。
 
+```html hidden
 <table>
+  <caption>
+    关于太阳系行星的数据（来源：<a
+      href="https://nssdc.gsfc.nasa.gov/planetary/factsheet/"
+      >NASA 的行星概况表 - 公制单位</a
+    >）
+  </caption>
+  <thead>
+    <tr>
+      <td colspan="2"></td>
+      <th scope="col">名称</th>
+      <th scope="col">质量（10<sup>24</sup>kg）</th>
+      <th scope="col">直径（km）</th>
+      <th scope="col">密度（kg/m<sup>3</sup>）</th>
+      <th scope="col">重力（m/s<sup>2</sup>）</th>
+      <th scope="col">昼夜长度（小时）</th>
+      <th scope="col">与太阳的距离（10<sup>6</sup>km）</th>
+      <th scope="col">平均温度（°C）</th>
+      <th scope="col">卫星数量</th>
+      <th scope="col">备注</th>
+    </tr>
+  </thead>
   <tbody>
     <tr>
-      <th colspan="3"></th>
-      <th scope="col">Subject</th>
-      <th scope="col">Object</th>
+      <th colspan="2" rowspan="4" scope="rowgroup">类地行星</th>
+      <th scope="row">水星</th>
+      <td>0.330</td>
+      <td>4,879</td>
+      <td>5427</td>
+      <td>3.7</td>
+      <td>4222.6</td>
+      <td>57.9</td>
+      <td>167</td>
+      <td>0</td>
+      <td>最靠近太阳</td>
     </tr>
     <tr>
-      <th rowspan="5" scope="rowgroup">单数</th>
-      <th colspan="2" scope="row">第一人称</th>
-      <td>I</td>
-      <td>me</td>
+      <th scope="row">金星</th>
+      <td>4.87</td>
+      <td>12,104</td>
+      <td>5243</td>
+      <td>8.9</td>
+      <td>2802.0</td>
+      <td>108.2</td>
+      <td>464</td>
+      <td>0</td>
+      <td></td>
     </tr>
     <tr>
-      <th colspan="2" scope="row">第二人称</th>
-      <td>you</td>
-      <td>you</td>
+      <th scope="row">地球</th>
+      <td>5.97</td>
+      <td>12,756</td>
+      <td>5514</td>
+      <td>9.8</td>
+      <td>24.0</td>
+      <td>149.6</td>
+      <td>15</td>
+      <td>1</td>
+      <td>我们的世界</td>
     </tr>
     <tr>
-      <th rowspan="3" scope="rowgroup">第三人称</th>
-      <th class="symbol" scope="row">♂</th>
-      <td>he</td>
-      <td>him</td>
+      <th scope="row">火星</th>
+      <td>0.642</td>
+      <td>6,792</td>
+      <td>3933</td>
+      <td>3.7</td>
+      <td>24.7</td>
+      <td>227.9</td>
+      <td>-65</td>
+      <td>2</td>
+      <td>红色行星</td>
     </tr>
     <tr>
-      <th class="symbol" scope="row">♀</th>
-      <td>she</td>
-      <td>her</td>
+      <th rowspan="4" scope="rowgroup">类木行星</th>
+      <th rowspan="2" scope="rowgroup">气态巨行星</th>
+      <th scope="row">木星</th>
+      <td>1898</td>
+      <td>142,984</td>
+      <td>1326</td>
+      <td>23.1</td>
+      <td>9.9</td>
+      <td>778.6</td>
+      <td>-110</td>
+      <td>67</td>
+      <td>最大的行星</td>
     </tr>
     <tr>
-      <th class="symbol" scope="row">o</th>
-      <td>it</td>
-      <td>it</td>
+      <th scope="row">土星</th>
+      <td>568</td>
+      <td>120,536</td>
+      <td>687</td>
+      <td>9.0</td>
+      <td>10.7</td>
+      <td>1433.5</td>
+      <td>-140</td>
+      <td>62</td>
+      <td></td>
     </tr>
     <tr>
-      <th rowspan="3" scope="rowgroup">复数</th>
-      <th colspan="2" scope="row">第一人称</th>
-      <td>we</td>
-      <td>us</td>
+      <th rowspan="2" scope="rowgroup">冰巨行星</th>
+      <th scope="row">天王星</th>
+      <td>86.8</td>
+      <td>51,118</td>
+      <td>1271</td>
+      <td>8.7</td>
+      <td>17.2</td>
+      <td>2872.5</td>
+      <td>-195</td>
+      <td>27</td>
+      <td></td>
     </tr>
     <tr>
-      <th colspan="2" scope="row">第二人称</th>
-      <td>you</td>
-      <td>you</td>
+      <th scope="row">海王星</th>
+      <td>102</td>
+      <td>49,528</td>
+      <td>1638</td>
+      <td>11.0</td>
+      <td>16.1</td>
+      <td>4495.1</td>
+      <td>-200</td>
+      <td>14</td>
+      <td></td>
     </tr>
     <tr>
-      <th colspan="2" scope="row">第三人称</th>
-      <td>they</td>
-      <td>them</td>
+      <th colspan="2" scope="rowgroup">矮行星</th>
+      <th scope="row">冥王星</th>
+      <td>0.0146</td>
+      <td>2,370</td>
+      <td>2095</td>
+      <td>0.7</td>
+      <td>153.3</td>
+      <td>5906.4</td>
+      <td>-225</td>
+      <td>5</td>
+      <td>
+        于 2006 年从行星除名，但这<a
+          href="https://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/"
+          >仍然存在争议</a
+        >
+      </td>
     </tr>
   </tbody>
 </table>
+```
 
-正确完成后，即使是盲人也可以解析 HTML 表格中的数据，一个成功的 HTML 表格应该做到无论用户是视力正常还是视力受损，都能提高用户的体验。
+```css hidden
+table {
+  border-collapse: collapse;
+  border: 2px solid black;
+}
 
-### 表格风格
+th,
+td {
+  padding: 5px;
+  border: 1px solid black;
+}
+```
 
-你可以在 GitHub 上找到上面表格的 [HTML 源码](https://github.com/mdn/learning-area/blob/main/html/tables/basic/personal-pronouns.html)；先去看看，当然也可以[看看这个在线示例](http://mdn.github.io/learning-area/html/tables/basic/personal-pronouns.html)！你也许会注意到一件事情，那就是这个表格看上去可读性不是很好，那是因为现在这个页面上面的那个表格通过 MDN 站点添加了一些样式，而 GitHub 上面的并没有添加。
+{{EmbedLiveSample("表格如何工作？", 100, 560)}}
 
-不要幻想；为了能够让表格在网页上有效，你需要提供一些 CSS 的样式信息，以及尽可能好的 HTML 固定结构。在这个模块中，我们将专注于 HTML 部分；在你完成这里的内容之后，你可以浏览 [样式化表格](/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables) 来了解 CSS 的部分。
+正确使用时，HTML 表格可以很好地通过屏幕阅读器等辅助工具进行处理，因此一个成功的 HTML 表格应该能为视力正常和视力受损的用户带来更好的体验。
 
-虽然在这个模块中我们不会专注于 CSS，但是我们提供了一个较小的 CSS 样式表让你使用，和默认的没有采用任何 CSS 样式的表相比，表格会更加可读。你可以在[这里](https://github.com/mdn/learning-area/blob/main/html/tables/basic/minimal-table.css)获取样式表，以及在 [HTML template](https://github.com/mdn/learning-area/blob/main/html/tables/basic/blank-template.html) 获取 HTML 文件来应用样式表，这些会让你在“测试 HTML 表格”中有一个好的起点。
+### 表格风格
 
-> [!NOTE]
-> 也可以看下 [personal_pronouns table with this styling applied](http://mdn.github.io/learning-area/html/tables/basic/personal-pronouns-styled.html) 这个版本，这个是应用了 CSS 以后表格看上去的样子。
+可以在 GitHub 上[查看这个在线示例](https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html)！你会注意到，这里的表格看起来可读性更好，这是因为你在本页上面看到的表格只使用了最少的样式，而 GitHub 版本则使用了更多的 CSS。
+
+不要幻想；为了能够让表格在 web 上有效，你需要用 CSS 提供一些样式信息，以及尽可能好的 HTML 固定结构。在本模块中，我们将专注于 HTML 部分；在你完成这里的内容之后，你可以浏览[样式化表格](/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables)来了解 CSS 的部分。
+
+虽然在本模块中我们不会专注于 CSS，但是我们提供了一个较小的 CSS 样式表让你使用，和默认的没有采用任何 CSS 样式的表相比，表格会更加可读。你可以在[这里](https://github.com/mdn/learning-area/blob/main/html/tables/basic/minimal-table.css)获取样式表，还可以找到一个应用样式表的 [HTML 模板](https://github.com/mdn/learning-area/blob/main/html/tables/basic/blank-template.html)，它们将为你提供一个尝试使用 HTML 表格的良好起点。
 
 ### 什么时候你不应该使用 HTML 表格？
 
 HTML 表格应该用于表格数据，这正是 HTML 表格设计出来的用途。不幸的是，许多人习惯用 HTML 表格来实现网页布局，例如：一行包含头部，一行包含几列内容，一行包含尾部。你可以在我们的[无障碍学习模块](/zh-CN/docs/Learn/Accessibility)中的[页面布局](/zh-CN/docs/Learn/Accessibility/HTML#页面布局)章节获得更多细节内容和一个示例。这种做法以前是很常见的，因为以前 CSS 在不同浏览器上的兼容性比较糟糕；表格布局现在不太普遍，但你可能仍然会在网络的某些角落看到它们。
 
-简单来说，使用表格布局而不使用 [CSS 布局技巧](/zh-CN/docs/Learn/CSS/CSS_layout) 是很糟糕的。主要的理由有以下几个：
+简单来说，使用表格布局而不使用 [CSS 布局技巧](/zh-CN/docs/Learn/CSS/CSS_layout)是很糟糕的。主要的理由有以下几个：
 
 1. **表格布局减少了视觉受损的用户的无障碍**: 盲人所使用的[屏幕阅读器](/zh-CN/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#屏幕阅读器)会解析存在于 HTML 页面上的标签，然后为用户读出其中的内容。因为对于布局来说，表格不是一个正确的工具，使用的标记比使用 CSS 布局技术更复杂，所以屏幕阅读器的输出会让他们的用户感到困惑。
 2. **表格会产生很多标签**: 正如刚才提到的，表格布局通常会比正确的布局技术涉及更复杂的标签结构，这会导致代码变得更难于编写、维护、调试。
@@ -127,16 +231,16 @@ HTML 表格应该用于表格数据，这正是 HTML 表格设计出来的用途
 3. 在表格中，最小的内容容器是单元格，是通过 **[`<td>`](/zh-CN/docs/Web/HTML/Element/td)** 元素创建的（其中“td”代表“table data”）。把下面的内容添加到你的表格标签中：
 
    ```html
-   <td>Hi, I'm your first cell.</td>
+   <td>我是第一个单元格</td>
    ```
 
 4. 如果我们想要一行四个单元格，我们需要把这组标签拷贝三次，更新你表中的内容，让它看起来是这样的：
 
    ```html
-   <td>Hi, I'm your first cell.</td>
-   <td>I'm your second cell.</td>
-   <td>I'm your third cell.</td>
-   <td>I'm your fourth cell.</td>
+   <td>我是第一个单元格</td>
+   <td>我是第二个单元格</td>
+   <td>我是第三个单元格</td>
+   <td>我是第四个单元格</td>
    ```
 
 你会看到，单元格不会放置在彼此的下方，而是自动与同一行上的其他单元格对齐。每个 `<td>` 元素 创建一个单独单元格，它们共同组成了第一行。我们添加的每个单元格都使行的长度变长。
@@ -147,14 +251,14 @@ HTML 表格应该用于表格数据，这正是 HTML 表格设计出来的用途
 
    ```html
    <tr>
-     <td>Hi, I'm your first cell.</td>
-     <td>I'm your second cell.</td>
-     <td>I'm your third cell.</td>
-     <td>I'm your fourth cell.</td>
+     <td>我是第一个单元格</td>
+     <td>我是第二个单元格</td>
+     <td>我是第三个单元格</td>
+     <td>我是第四个单元格</td>
    </tr>
    ```
 
-2. 现在你已经实现了一行，可以继续增加至两行、三行。每一行都需要一个额外的 `<tr>` 元素来包装，每个单元格的内容都应该写在 `<td>`中。
+2. 现在你已经实现了一行，可以继续增加至两行、三行。每一行都需要一个额外的 `<tr>` 元素来包装，每个单元格的内容都应该写在 `<td>` 中。
 
 ### 结果
 
@@ -163,17 +267,17 @@ HTML 表格应该用于表格数据，这正是 HTML 表格设计出来的用途
 ```html hidden
 <table>
   <tr>
-    <td>Hi, I'm your first cell.</td>
-    <td>I'm your second cell.</td>
-    <td>I'm your third cell.</td>
-    <td>I'm your fourth cell.</td>
+    <td>我是第一个单元格</td>
+    <td>我是第二个单元格</td>
+    <td>我是第三个单元格</td>
+    <td>我是第四个单元格</td>
   </tr>
 
   <tr>
-    <td>Second row, first cell.</td>
-    <td>Cell 2.</td>
-    <td>Cell 3.</td>
-    <td>Cell 4.</td>
+    <td>第二行，第一个单元格</td>
+    <td>单元格 2</td>
+    <td>单元格 3</td>
+    <td>单元格 4</td>
   </tr>
 </table>
 ```
@@ -192,52 +296,63 @@ th {
 {{EmbedLiveSample("结果")}}
 
 > [!NOTE]
-> 你也可以在 GitHub 中查看 [simple-table.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/simple-table.html) ([也可以查看在线示例](https://mdn.github.io/learning-area/html/tables/basic/simple-table.html)).
+> 你也可以在 GitHub 中查看 [simple-table.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/simple-table.html)（[也可以查看在线示例](https://mdn.github.io/learning-area/html/tables/basic/simple-table.html)）。
 
 ## 使用 \<th> 元素添加标题
 
-现在，让我们把注意力转向表格标题，表格中的标题是特殊的单元格，通常在行或列的开始处，定义行或列包含的数据类型（举个例子，看到本篇文章中第一个示例中的 "单数" 或者 "Object"）。为了说明它们为什么这么有用，来看下面这个例子，首先是源代码：
+现在，让我们把注意力转向表格标题，位于行或列开头的特殊单元格，定义了行或列包含的数据类型（例如，本文第一个示例中的“人员”和“年龄”单元格）。为了说明它们为什么这么有用，来看下面这个例子，首先是源代码：
 
 ```html
 <table>
   <tr>
     <td>&nbsp;</td>
-    <td>Knocky</td>
-    <td>Flor</td>
-    <td>Ella</td>
-    <td>Juan</td>
+    <td>诺基</td>
+    <td>弗洛尔</td>
+    <td>艾拉</td>
+    <td>胡安</td>
   </tr>
   <tr>
-    <td>Breed</td>
-    <td>Jack Russell</td>
-    <td>Poodle</td>
-    <td>Streetdog</td>
-    <td>Cocker Spaniel</td>
+    <td>品种</td>
+    <td>杰克罗斯犬</td>
+    <td>贵宾犬</td>
+    <td>流浪犬</td>
+    <td>可卡犬</td>
   </tr>
   <tr>
-    <td>Age</td>
+    <td>年龄</td>
     <td>16</td>
     <td>9</td>
     <td>10</td>
     <td>5</td>
   </tr>
   <tr>
-    <td>Owner</td>
-    <td>Mother-in-law</td>
-    <td>Me</td>
-    <td>Me</td>
-    <td>Sister-in-law</td>
+    <td>主人</td>
+    <td>岳母</td>
+    <td>我</td>
+    <td>我</td>
+    <td>嫂子</td>
   </tr>
   <tr>
-    <td>Eating Habits</td>
-    <td>Eats everyone's leftovers</td>
-    <td>Nibbles at food</td>
-    <td>Hearty eater</td>
-    <td>Will eat till he explodes</td>
+    <td>饮食习惯</td>
+    <td>吃掉所有人的剩菜</td>
+    <td>啃咬食物</td>
+    <td>吃得多</td>
+    <td>吃到爆炸为止</td>
   </tr>
 </table>
 ```
 
+```css hidden
+table {
+  border-collapse: collapse;
+}
+td,
+th {
+  border: 1px solid black;
+  padding: 10px 20px;
+}
+```
+
 这是表格实际呈现的效果：
 
 {{EmbedLiveSample("使用_th_元素添加标题", "", "250")}}
@@ -249,11 +364,11 @@ th {
 让我们来改进这个表格。
 
 1. 首先，把 [dogs-table.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/dogs-table.html) 和 [minimal-table.css](https://github.com/mdn/learning-area/blob/main/html/tables/basic/minimal-table.css) 文件保存到你的本地环境，HTML 文件包含上文你看到的几种狗的数据。
-2. 为了将表格的标题在视觉上和语义上都能被识别为标题，你可以使用 **[`<th>`](/zh-CN/docs/Web/HTML/Element/th)** 元素（其中 'th' 代表 'table header'），用法和 `<td>`是一样的，除了它表示为标题，不是普通的单元格以外。进入你的 HTML 文件，将表格中应该是标题的 `<td>` 元素标记的内容，都改为用 `<th>` 元素标记。
+2. 为了将表格的标题在视觉上和语义上都能被识别为标题，你可以使用 **[`<th>`](/zh-CN/docs/Web/HTML/Element/th)** 元素（其中“th”代表“table header”），用法和 `<td>`是一样的，除了它表示为标题，不是普通的单元格以外。进入你的 HTML 文件，将表格中应该是标题的 `<td>` 元素标记的内容，都改为用 `<th>` 元素标记。
 3. 保存你的 HTML 文件，然后在浏览器中加载，然后你应该会看到，现在的标题更像标题了。
 
 > [!NOTE]
-> 你可以在 GitHub 中找到完成的版本 [dogs-table-fixed.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/dogs-table-fixed.html) ([也可以查看在线示例](https://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html))。
+> 你可以在 GitHub 中找到完成的版本 [dogs-table-fixed.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/dogs-table-fixed.html)（[也可以查看在线示例](https://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html)）。
 
 ### 为什么标题是有用的？
 
@@ -262,38 +377,38 @@ th {
 > [!NOTE]
 > 即使你不给表格添加你自己的样式，表格标题也会带有一些默认样式：加粗和居中，让标题可以突出显示。
 
-表格标题也有额外的好处，随着 `scope` 属性 (我们将在下一篇文章中了解到)，这个属性允许你让表格变得更加无障碍，每个标题与相同行或列中的所有数据相关联。屏幕阅读设备能一次读出一列或一行的数据，这是非常有帮助的。
+表格标题也有额外的好处，随着 `scope` 属性（我们将在下一篇文章中了解到），这个属性允许你让表格变得更加无障碍，每个标题与相同行或列中的所有数据相关联。屏幕阅读设备能一次读出一列或一行的数据，这是非常有帮助的。
 
 ## 允许单元格跨越多行和列
 
-有时我们希望单元格跨越多行或多列。以下是一个简单的例子，显示了一些常见动物的名字。在某些情况下，我们要显示动物名称旁边的男性和女性的名字。有时候我们又不需要，那不需要的情况下，我们希望写着动物的名字的单元格的宽度可以是两个单元格的宽度 (因为写着名字的行会有两列，而没有写名字的行只有一列，行的宽度是不一样的)。
+有时候希望单元格跨越多行或多列。下面是一个显示常见动物名字的简单示例。在某些情况下，希望在动物名称旁边显示雄性和雌性的名称。有时候又不需要，这种情况下，只希望动物名称横跨整个表格。
 
 一开始的标记写法是这样的：
 
 ```html
 <table>
   <tr>
-    <th>Animals</th>
+    <th>动物</th>
   </tr>
   <tr>
-    <th>Hippopotamus</th>
+    <th>河马</th>
   </tr>
   <tr>
-    <th>Horse</th>
-    <td>Mare</td>
+    <th>马</th>
+    <td>公马</td>
   </tr>
   <tr>
-    <td>Stallion</td>
+    <td>母马</td>
   </tr>
   <tr>
-    <th>Crocodile</th>
+    <th>鳄鱼</th>
   </tr>
   <tr>
-    <th>Chicken</th>
-    <td>Hen</td>
+    <th>鸡</th>
+    <td>母鸡</td>
   </tr>
   <tr>
-    <td>Rooster</td>
+    <td>公鸡</td>
   </tr>
 </table>
 ```
@@ -313,39 +428,42 @@ th {
 
 {{EmbedLiveSample("允许单元格跨越多行和列", "", "350")}}
 
-我们需要一个方法，让 "Animals"、"Hippopotamus" 和 "Crocodile" 的单元格的宽度变为两个单元格， "Horse" 和 "Chicken" 的高度变为两行 (因为要拥有一个男性名字和女性名字，可以先看效果图)。幸好，表格中的标题和单元格有 `colspan` 和 `rowspan` 属性，这两个属性可以帮助我们实现这些效果。这两个属性接受一个没有单位的数字值，数字决定了它们的宽度或高度是几个单元格。比如，`colspan="2"` 使一个单元格的宽度是两个单元格。
+需要一个方法，让“动物”、“河马”和“鳄鱼”横跨两列，让“马”和“鸡”竖跨两行。幸好，表格中的标题和单元格有 `colspan` 和 `rowspan` 属性，可以实现这些效果。这两个属性接受一个没有单位的数字值，数字决定了它们的宽度或高度是几个单元格。比如，`colspan="2"` 会使单元格横跨两列。
 
 让我们使用 `colspan` 和 `rowspan` 来改进现有的表格。
 
 1. 首先，把 [animals-table.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/animals-table.html) 和 [minimal-table.css](https://github.com/mdn/learning-area/blob/main/html/tables/basic/minimal-table.css) 文件复制到你的本地环境，HTML 文件中包含了你刚才看到的动物示例的数据。
-2. 接着，使用 `colspan` 让 "Animals"、"Hippopotamus" 和 "Crocodile" 占 2 个单元格的宽度。
-3. 最后，使用 `rowspan` 让 "Horse" 和 "Chicken" 占 2 个单元格的高度。
+2. 接着，使用 `colspan` 让“动物”、“河马”和“鳄鱼”横跨两列。
+3. 最后，使用 `rowspan` 让“马”和“鸡”竖跨两行。
 4. 保存后，用浏览器打开你写的 HTML 文件，看看改进的地方。
 
 > [!NOTE]
-> 你也可以在 GitHub 上找到完成的版本 [animals-table-fixed.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/animals-table-fixed.html) ([see it live also](https://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html)).
+> 你也可以在 GitHub 上找到完成的版本 [animals-table-fixed.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/animals-table-fixed.html)（[也可以查看在线示例](https://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html)）。
 
 ## 为表格中的列提供共同的样式
 
 ### 不使用 \<col> 应用样式
 
-在我们继续介绍之前，我们将介绍本文中的最后一个功能。HTML 有一种方法可以定义整列数据的样式信息：就是 **[`<col>`](/zh-CN/docs/Web/HTML/Element/col)** 和 **[`<colgroup>`](/zh-CN/docs/Web/HTML/Element/colgroup)** 元素。它们存在是因为如果你想让一列中的每个数据的样式都一样，那么你就要为每个数据都添加一个样式，这样的做法是令人厌烦和低效的。你通常需要在列中的每个 `<td>` 或 `<th>` 上定义样式，或者使用一个复杂的选择器，比如 {{cssxref(":nth-child()")}}。
+在继续阅读之前，我们将在本文介绍最后一个特性。HTML 有一种为整列数据的定义样式信息的方法：就是 **[`<col>`](/zh-CN/docs/Web/HTML/Element/col)** 和 **[`<colgroup>`](/zh-CN/docs/Web/HTML/Element/colgroup)** 元素。它们存在是因为如果你想让一列中的每个数据的样式都一样，那么你就要为每个数据都添加一个样式，这样的做法是令人厌烦和低效的。你通常需要在列中的每个 `<td>` 或 `<th>` 上定义样式，或者使用一个复杂的选择器，比如 {{cssxref(":nth-child()")}}。
+
+> [!NOTE]
+> 这样设计列的样式[仅限于几个属性](https://www.w3.org/TR/CSS22/tables.html#columns)：[`border`](/zh-CN/docs/Web/CSS/border)、[`background`](/zh-CN/docs/Web/CSS/background)、[`width`](/zh-CN/docs/Web/CSS/width) 和 [`visibility`](/zh-CN/docs/Web/CSS/visibility)。要设置其他属性，必须对列中的每个 `<td>` 或 `<th>` 进行样式设置，或者使用复杂的选择器，如 {{cssxref(":nth-child")}}。
 
 下面是一个简单的示例：
 
 ```html
 <table>
   <tr>
-    <th>Data 1</th>
-    <th style="background-color: yellow">Data 2</th>
+    <th>数据 1</th>
+    <th style="background-color: yellow">数据 2</th>
   </tr>
   <tr>
-    <td>Calcutta</td>
-    <td style="background-color: yellow">Orange</td>
+    <td>加尔各答</td>
+    <td style="background-color: yellow">橙汁</td>
   </tr>
   <tr>
-    <td>Robots</td>
-    <td style="background-color: yellow">Jazz</td>
+    <td>机器人</td>
+    <td style="background-color: yellow">爵士乐</td>
   </tr>
 </table>
 ```
@@ -354,10 +472,12 @@ th {
 
 {{EmbedLiveSample("不使用_col_应用样式", "", "200")}}
 
-这样不太理想，因为我们不得不在列中的每个单元格中重复那些样式信息（在真实的项目中，我们或许会设置一个 `class` 包含那三个单元格，然后在一个单独的样式表中定义样式）。为了舍弃这种做法，我们可以只定义一次，在 `<col>` 元素中。`<col>` 元素被规定包含在 `<colgroup>` 容器中，而 `<colgroup>`就在 `<table>` 标签的下方。我们可以通过如下的做法来创建与上面相同的效果：
+这并不理想，因为必须在列中的所有三个单元格中重复样式信息（在实际项目中，可能会在所有单元格中设置一个 `class`，并在单独的样式表中指定样式）。
 
 ### 使用 \<col> 应用样式
 
+可以在 `<col>` 元素上一次性指定信息，而不是像上面这样做。`<colgroup>` 容器就在开始标记 `<table>` 下面，`<col>` 元素在 `<colgroup>` 容器内指定。可以通过如下方式指定表格，来创建与上述相同的效果：
+
 ```html
 <table>
   <colgroup>
@@ -365,23 +485,23 @@ th {
     <col style="background-color: yellow" />
   </colgroup>
   <tr>
-    <th>Data 1</th>
-    <th>Data 2</th>
+    <th>数据 1</th>
+    <th>数据 2</th>
   </tr>
   <tr>
-    <td>Calcutta</td>
-    <td>Orange</td>
+    <td>加尔各答</td>
+    <td>橙汁</td>
   </tr>
   <tr>
-    <td>Robots</td>
-    <td>Jazz</td>
+    <td>机器人</td>
+    <td>爵士乐</td>
   </tr>
 </table>
 ```
 
-我们使用了两个 `<col>` 来定义“列的样式”，每一个 `<col>` 都会指定每列的样式，对于第一列，我们没有采取任何样式，但是我们仍然需要添加一个空的 `<col>` 元素，如果不这样做，那么我们的样式就会应用到第一列上，这和我们预想的不一样。
+定义了两个“样式列”，其中一个为第二列每列指定样式信息。没有为第一列设计样式，但仍必须包含一个空白的 `<col>` 元素，否则样式将只应用于第一列。
 
-如果你想把这种样式信息应用到每一列，我们可以只使用一个 `<col>` 元素，不过需要包含 span 属性，像这样：
+如果想将样式信息应用于两列，只需包含一个带有 `span` 属性的 `<col>` 元素即可，就像这样：
 
 ```html
 <colgroup>
@@ -391,29 +511,32 @@ th {
 
 就像 `colspan` 和 `rowspan` 一样，`span` 需要一个无单位的数字值，用来指定让这个样式应用到表格中多少列。
 
+> [!NOTE]
+> 如果表格、列和列中的单元格都是单独样式化的，那么应用于单元格的样式将绘制在列样式之上，而列样式将绘制在表格之上。这是因为先渲染表格层，然后渲染列层，[单元格层渲染在所有其他表格层之上](/zh-CN/docs/Web/HTML/Element/table#table_layers_and_transparency)。
+
 ### 动手练习：colgroup 和 col
 
 又到了需要你自己独立完成的时间了。
 
-下面你可以看到一位语言老师的时间表。星期五，她有一个新的课程，全天教荷兰语，但是在星期二和星期四的几个时间点，她也教德语。她想把那些包含她教学的日子的列高亮显示。
+下面是一位语言教师的课程表。星期五，她有一门新的课程，全天教授荷兰语，但她也在周二和周四教授几节德语课。她希望突出显示包含她授课天数的栏目。
 
-{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}
+{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 350)}}
 
 通过下面这些步骤来重构这个表格。
 
 1. 首先，把 [timetable.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/timetable.html) 文件复制到你的本地环境。这个 HTML 文件包含你在上文中看到的表格，不过是减去样式信息的。
-2. 在 table 的顶部添加一个 `<colgroup>` 元素，就放在 `<table>` 标签下面，`<colgroup>`可以添加 `<col>` 元素 (继续看下面剩余的步骤)。
+2. 在表格的顶部添加一个 `<colgroup>` 元素，就放在 `<table>` 标签下面，`<colgroup>`可以添加 `<col>` 元素（继续看下面剩余的步骤）。
 3. 第一列和第二列不需要应用样式。
 4. 为第三列添加一个背景颜色。`style` 属性是 `background-color:#97DB9A;`
-5. 为第四列设置一个独立的宽度，`style` 属性是 `width: 42px;`
+5. 为第四列设置一个独立的宽度，`style` 属性是 `width: 100px;`
 6. 为第五列添加一个背景颜色。`style` 属性是 `background-color: #97DB9A;`
-7. 为第六列添加不同的背景颜色和边框，表示这是一个特殊的日子，表示她正在教一个新的课。 `style` 属性是 `background-color:#DCC48E; border:4px solid #C1437A;`
-8. 最后两天是休息日，所以只需将它们设置为无背景颜色，但需要设置宽度；`style` 属性是 `width: 42px;`
+7. 为第六列添加不同的背景颜色和边框，表示这是一个特殊的日子，她要教一门新课。`style` 属性是 `background-color:#DCC48E; border:4px solid #C1437A;`
+8. 最后两天是休息日，所以只需将它们设置为无背景颜色，但需要设置宽度；`style` 属性是 `width: 100px;`
 
-看看你是否能完成这个示例，如果你遇到了困难，或想要核对你完成的作品，你可以在 GitHub 上找到完成的版本 [timetable-fixed.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/timetable-fixed.html) ([也可以查看在线示例](https://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html))。
+看看你是否能完成这个示例，如果你遇到了困难，或想要核对你完成的作品，你可以在 GitHub 上找到完成的版本 [timetable-fixed.html](https://github.com/mdn/learning-area/blob/main/html/tables/basic/timetable-fixed.html)（[也可以查看在线示例](https://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html)）。
 
-## 小结
+## 总结
 
-本章节仅仅包含了 HTML 表格的基础。在下一篇文章中，我们将介绍一些稍微更高级的表格功能，并开始考虑方便视力障碍的人士的访问。
+本章节仅仅包含了 HTML 表格的基础。在下一篇文章中，我们将介绍一些[表格进阶特性](/zh-CN/docs/Learn/HTML/Tables/Advanced)，并开始考虑方便视力障碍的人士的访问。
 
 {{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
diff --git a/files/zh-cn/learn/javascript/asynchronous/implementing_a_promise-based_api/index.md b/files/zh-cn/learn/javascript/asynchronous/implementing_a_promise-based_api/index.md
index 157b08497dcd32..694edf93ed7579 100644
--- a/files/zh-cn/learn/javascript/asynchronous/implementing_a_promise-based_api/index.md
+++ b/files/zh-cn/learn/javascript/asynchronous/implementing_a_promise-based_api/index.md
@@ -32,7 +32,7 @@ slug: Learn/JavaScript/Asynchronous/Implementing_a_promise-based_API
 
 ### 用 setTimeout() 包裹
 
-我们将会使用 {{domxref("setTimeout()")}} 来实现 `alarm()` 函数。`setTimeout()` 以一个回调函数和一个以毫秒为单位的延迟作为参数。当调用 `setTimeout()` 时，它将启动一个设置为给定延迟的计时器，当时间过期时，它就会调用给定的回调函数。
+我们将会使用 {{domxref("Window.setTimeout", "setTimeout()")}} 来实现 `alarm()` 函数。`setTimeout()` 以一个回调函数和一个以毫秒为单位的延迟作为参数。当调用 `setTimeout()` 时，它将启动一个设置为给定延迟的计时器，当时间过期时，它就会调用给定的回调函数。
 
 在下面的例子中，我们使用一个回调函数和一个 1000 毫秒的延迟调用 `setTimeout()`：
 
@@ -205,7 +205,7 @@ button.addEventListener("click", async () => {
 
 ## 参见
 
-- [Promise() 构造器](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise)
-- [使用 Promises](/zh-CN/docs/Web/JavaScript/Guide/Using_promises)
+- [`Promise()` 构造函数](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise)
+- [使用 promise](/zh-CN/docs/Web/JavaScript/Guide/Using_promises)
 
 {{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Introducing_workers", "Learn/JavaScript/Asynchronous")}}
diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md
index 5f5285c0c971d2..51792b33468f66 100644
--- a/files/zh-cn/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md
+++ b/files/zh-cn/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md
@@ -349,7 +349,7 @@ button:before {
    1. 我们清除在快进功能上设置的所有类和时间间隔。这样做是因为如果我们在按下 `fwd`（快进）按钮后再按下 `rwd`（快退）按钮，就可以取消任何快进的功能并将其替换为快退功能。如果我们试图同时做到这两点，播放器就会暂停。
    2. 使用 `if` 语句检查是否已在 `rwd` 按钮上设置了用来指示它已被按下的 `active` 类。{{domxref("classList")}} 是一个存在于每个元素上的非常方便的属性。它包含元素上设置的所有类的列表，以及添加/删除类的方法等。使用 `classList.contains()` 方法检查列表是否包含 `active` 类，将返回布尔值 `true`/`false` 结果。
    3. 如果在 `rwd` 按钮上设置了 `active`，我们将使用 `classList.remove()` 删除它，清除第一次按下按钮时设置的时间间隔（参见下面的更多解释），并调用 {{domxref("HTMLMediaElement.play()")}} 取消快退并开始正常播放视频。
-   4. 如果尚未设置，使用 `classList.add()` 将 `active` 类添加到 `rwd` 按钮，调用 {{domxref("HTMLMediaElement.pause()")}} 暂停视频，然后设置 `intervalRwd` 变量为 {{domxref("setInterval()")}} 的调用结果。调用时，`setInterval()` 会创建一个时间间隔。这意味着它每隔 x 毫秒运行一个作为第一个参数给出的函数，其中 x 是第二个参数的值。所以这里我们每 200 毫秒运行一次 `windBackward()` 函数——我们将使用此函数不断快退视频。要停止 {{domxref("setInterval()")}} 运行，你必须调用 {{domxref("clearInterval()")}}，并给出要清除的时间间隔的标识名，在本例中是变量名称 `intervalRwd`（请参阅函数中较早的一个 `clearInterval()` 调用）。
+   4. 如果尚未设置，使用 `classList.add()` 将 `active` 类添加到 `rwd` 按钮，调用 {{domxref("HTMLMediaElement.pause()")}} 暂停视频，然后设置 `intervalRwd` 变量为 {{domxref("Window.setInterval", "setInterval()")}} 的调用结果。调用时，`setInterval()` 会创建一个时间间隔。这意味着它每隔 x 毫秒运行一个作为第一个参数给出的函数，其中 x 是第二个参数的值。所以这里我们每 200 毫秒运行一次 `windBackward()` 函数——我们将使用此函数不断快退视频。要停止 {{domxref("Window.setInterval", "setInterval()")}} 运行，你必须调用 {{domxref("Window.clearInterval", "clearInterval()")}}，并给出要清除的时间间隔的标识名，在本例中是变量名称 `intervalRwd`（请参阅函数中较早的一个 `clearInterval()` 调用）。
 
 3. 最后，对于本节，定义在 `setInterval()` 调用中需要调用的 `windBackward()` 和 `windForward()` 函数。在以上两个函数下面添加以下内容：
 
diff --git a/files/zh-cn/learn/performance/javascript/index.md b/files/zh-cn/learn/performance/javascript/index.md
index ac66ac02799ef9..47327bc3d9f3ac 100644
--- a/files/zh-cn/learn/performance/javascript/index.md
+++ b/files/zh-cn/learn/performance/javascript/index.md
@@ -239,7 +239,7 @@ async function main() {
 
 对于关键的 DOM 动画，建议尽可能使用 [CSS 动画](/zh-CN/docs/Web/CSS/CSS_animations/Using_CSS_animations)，而不是 JavaScript 动画（[Web 动画 API](/zh-CN/docs/Web/API/Web_Animations_API) 提供了一种通过 JavaScript 直接连接到 CSS 动画的方式）。直接使用浏览器执行 DOM 动画而不是使用 JavaScript 操纵内联样式表的效率更高。另请参阅 [CSS 性能优化 > 处理动画](/zh-CN/docs/Learn/Performance/CSS#处理动画)。
 
-对于无法在 JavaScript 中处理的动画，例如在 HTML {{htmlelement("canvas")}} 上创建动画，建议使用 {{domxref("Window.requestAnimationFrame()")}} 而不是旧的选项，例如 {{domxref("setInterval()")}}。`requestAnimationFrame()` 方法专门设计用于高效、一致地处理动画帧，以获得流畅的用户体验。基本模式如下所示：
+对于无法在 JavaScript 中处理的动画，例如在 HTML {{htmlelement("canvas")}} 上创建动画，建议使用 {{domxref("Window.requestAnimationFrame()")}} 而不是旧的选项，例如 {{domxref("Window.setInterval()")}}。`requestAnimationFrame()` 方法专门设计用于高效、一致地处理动画帧，以获得流畅的用户体验。基本模式如下所示：
 
 ```js
 function loop() {
diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_reactivity_lifecycle_accessibility/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_reactivity_lifecycle_accessibility/index.md
index 7a4bc4ba8cc098..66b39998fe76b3 100644
--- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_reactivity_lifecycle_accessibility/index.md
+++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_reactivity_lifecycle_accessibility/index.md
@@ -506,7 +506,7 @@ const checkAllTodos = (completed) => {
 
 在这种情况下，当 `editing` 是 `false` 时，编辑 `<input>` 不可见，因为它不存在于 DOM 中。在 `onEdit()` 函数中，我们将 `editing` 设置为 `true`，然后立即尝试访问 `nameEl` 变量并执行 `nameEl.focus()`。问题在于，Svelte 还没有更新 DOM。
 
-解决这个问题的一种方法是使用 [`setTimeout()`](/zh-CN/docs/Web/API/setTimeout) 函数，延迟调用 `nameEl.focus()`，直到下一个事件循环，并给 Svelte 更新 DOM 的机会。
+解决这个问题的一种方法是使用 {{domxref("Window.setTimeout", "setTimeout()")}} 函数，延迟调用 `nameEl.focus()`，直到下一个事件循环，并给 Svelte 更新 DOM 的机会。
 
 现在尝试一下这个解决方案：
 
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/alarms/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/alarms/index.md
index ff1d1a381ed780..99ea93cf84e1a6 100644
--- a/files/zh-cn/mozilla/add-ons/webextensions/api/alarms/index.md
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/alarms/index.md
@@ -2,12 +2,12 @@
 title: alarms
 slug: Mozilla/Add-ons/WebExtensions/API/alarms
 l10n:
-  sourceCommit: eec174a08a5003da32f53e694c45eda3377b4d18
+  sourceCommit: 1b4e6d1156e8471d38deeea1567c35ef412c5f42
 ---
 
 {{AddonSidebar}}
 
-在未来一个特定的时间运行的计划任务代码。这很像 [`setTimeout()`](/zh-CN/docs/Web/API/WindowTimers/setTimeout) 和 [`setInterval()`](/zh-CN/docs/Web/API/WindowTimers/setInterval)，不过这些函数仅可以按需使用而不能在后台页面工作。
+在未来一个特定的时间运行的计划任务代码。这很像 {{domxref("Window.setTimeout()")}}、{{domxref("Window.setInterval()")}}，不过这些函数仅可以按需使用而不能在后台页面工作。
 
 闹钟不会在浏览器会话之间持续存在。它们在单个扩展的所有上下文中全局创建。例如，在后台脚本中创建的闹钟将在后台脚本、选项页面、弹出页面和扩展标签页中触发 [`onAlarm`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/alarms/onAlarm) 事件（反之亦然）。闹钟 API 在[内容脚本](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#webextension_apis)中不可用。
 
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/extension/geturl/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/extension/geturl/index.md
new file mode 100644
index 00000000000000..5cbd8c9e7e5dfb
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/extension/geturl/index.md
@@ -0,0 +1,80 @@
+---
+title: extension.getURL()
+slug: Mozilla/Add-ons/WebExtensions/API/extension/getURL
+l10n:
+  sourceCommit: b8a0743ca8b1e1b1b1a95cc93a4413c020f11262
+---
+
+{{AddonSidebar}}
+
+> [!WARNING]
+> 该函数已被弃用。请改用 [`runtime.getURL`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/runtime/getURL)。
+
+转换扩展安装目录中的相对路径为完全限定的 URL。
+
+## 语法
+
+```js-nolint
+browser.extension.getURL(
+  path // 字符串
+)
+```
+
+### 参数
+
+- `path`
+  - : `string`，扩展内相对于其安装目录的资源路径。
+
+### 返回值
+
+`string`，指向资源的完全限定 URL。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 示例
+
+给定一个打包在附加组件中的文件，路径为“beasts/frog.html”，可以这样获取完整的 URL：
+
+```js
+let fullURL = browser.extension.getURL("beasts/frog.html");
+
+// -> 类似于这样的 URL：
+// moz-extension://2c127fa4-62c7-7e4f-90e5-472b45eecfdc/beasts/frog.html
+```
+
+{{WebExtExamples}}
+
+> [!NOTE]
+> 此 API 基于 Chromium 的 [`chrome.extension`](https://developer.chrome.google.cn/docs/extensions/reference/api/extension/#method-getURL) API。该文档衍生自 Chromium 代码中的 [`extension.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/extension.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/extension/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/extension/index.md
new file mode 100644
index 00000000000000..8a7393724e166e
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/extension/index.md
@@ -0,0 +1,89 @@
+---
+title: extension
+slug: Mozilla/Add-ons/WebExtensions/API/extension
+l10n:
+  sourceCommit: b8a0743ca8b1e1b1b1a95cc93a4413c020f11262
+---
+
+{{AddonSidebar}}
+
+有关插件的工具；获取你的插件的资源包的 URL；获取你的插件页面的 [`Window`](/zh-CN/docs/Web/API/Window) 对象；获取各种设置的值。
+
+> **备注：** **该模块中的消息 API 被弃用**，取而代之的是 [`runtime`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/runtime) 模块中相应的 API。
+
+## 类型
+
+- {{WebExtAPIRef("extension.ViewType")}}
+  - : 用于指定要获取的视图类型的字符串。
+
+## 属性
+
+- {{WebExtAPIRef("extension.lastError")}} {{deprecated_inline}}
+  - : 如果异步扩展 API 中出现错误，将在回调的调用中将该属性设置为那一错误。若没有发生错误，`lastError` 将为 {{jsxref("undefined")}}。
+- {{WebExtAPIRef("extension.inIncognitoContext")}}
+  - : 对在隐身模式标签中运行的内容脚本、在隐身模式进程中运行的扩展页面返回 `true`。（仅适用于 `incognito_behavior` 取值为“`split`”的扩展。）
+
+## 函数
+
+- {{WebExtAPIRef("extension.getBackgroundPage()")}}
+  - : 返回当前扩展内运行的后台页面的 [`Window`](/zh-CN/docs/Web/API/Window) 对象。如果扩展不存在后台页面，则返回 [`null`](/zh-CN/docs/Web/JavaScript/Reference/Operators/null)。
+- {{WebExtAPIRef("extension.getExtensionTabs()")}} {{deprecated_inline}}
+  - : 返回当前扩展内运行的每个标签的 JavaScript [`Window`](/zh-CN/docs/Web/API/Window) 对象的数组。
+- {{WebExtAPIRef("extension.getURL()")}} {{deprecated_inline}}
+  - : 将扩展安装目录内的相对路径转换为完全限定的 URL。
+- {{WebExtAPIRef("extension.getViews()")}}
+  - : 返回当前扩展内运行的每个页面的 [`Window`](/zh-CN/docs/Web/API/Window) 对象的数组。
+- {{WebExtAPIRef("extension.isAllowedIncognitoAccess()")}}
+  - : 获取扩展对隐身模式的访问权限的状态（由用户控制的“_允许在隐身模式中_”复选框确定）。
+- {{WebExtAPIRef("extension.isAllowedFileSchemeAccess()")}}
+  - : 获取扩展对 `file://` 协议的访问权限的状态（由用户控制的“_允许访问文件 URL_”复选框确定）。
+- {{WebExtAPIRef("extension.sendRequest()")}} {{deprecated_inline}}
+  - : 发送单一请求到扩展中的其他监听器。
+- {{WebExtAPIRef("extension.setUpdateUrlData()")}}
+  - : 设置扩展的更新 URL 中使用的 ap CGI 参数的值。对于托管在浏览器供应商商店中的扩展，此值将被忽略。
+
+## 事件
+
+- {{WebExtAPIRef("extension.onRequest")}} {{deprecated_inline}}
+  - : 当从扩展进程或内容脚本发送请求时触发。
+- {{WebExtAPIRef("extension.onRequestExternal")}} {{deprecated_inline}}
+  - : 当从另一个扩展发送请求时触发。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples("h2")}}
+
+> [!NOTE]
+> 此 API 基于 Chromium 的 [`chrome.extension`](https://developer.chrome.google.cn/docs/extensions/reference/api/extension/) API。该文档衍生自 Chromium 代码中的 [`extension.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/extension.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/extension/isallowedincognitoaccess/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/extension/isallowedincognitoaccess/index.md
new file mode 100644
index 00000000000000..b4c4c579a859a0
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/extension/isallowedincognitoaccess/index.md
@@ -0,0 +1,76 @@
+---
+title: extension.isAllowedIncognitoAccess()
+slug: Mozilla/Add-ons/WebExtensions/API/extension/isAllowedIncognitoAccess
+l10n:
+  sourceCommit: b8a0743ca8b1e1b1b1a95cc93a4413c020f11262
+---
+
+{{AddonSidebar}}
+
+检查插件是否允许访问在“隐私浏览”模式下打开的标签页。
+
+这是返回 [`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) 的异步函数。
+
+## 语法
+
+```js-nolint
+let isAllowed = browser.extension.isAllowedIncognitoAccess()
+```
+
+### 参数
+
+无。
+
+### 返回值
+
+[`Promise`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)，将会兑现布尔值：如果插件被允许访问隐私标签页，则为 `true`，否则为 `false`。
+
+## 示例
+
+```js
+function logIsAllowed(answer) {
+  console.log(`是否被允许：${answer}`);
+}
+
+let isAllowed = browser.extension.isAllowedIncognitoAccess();
+isAllowed.then(logIsAllowed);
+```
+
+{{WebExtExamples}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+> [!NOTE]
+> 此 API 基于 Chromium 的 [`chrome.extension`](https://developer.chrome.google.cn/docs/extensions/reference/api/extension#method-isAllowedIncognitoAccess) API。该文档衍生自 Chromium 代码中的 [`extension.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/extension.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/extension/sendrequest/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/extension/sendrequest/index.md
new file mode 100644
index 00000000000000..b5b41560987262
--- /dev/null
+++ b/files/zh-cn/mozilla/add-ons/webextensions/api/extension/sendrequest/index.md
@@ -0,0 +1,77 @@
+---
+title: extension.sendRequest()
+slug: Mozilla/Add-ons/WebExtensions/API/extension/sendRequest
+l10n:
+  sourceCommit: 5f090dea2cacee4ff4f654241f017a9f6649124e
+---
+
+{{AddonSidebar}}{{Deprecated_Header}}
+
+> [!WARNING]
+> 该方法已被弃用。请改用 {{WebExtAPIRef("runtime.sendMessage")}}。
+
+向插件中其他的监听器发送请求。该方法类似于 {{WebExtAPIRef('runtime.connect')}}，但它只能发送可选地带有响应的单一请求。发送请求后在扩展的每个页面中，{{WebExtAPIRef('extension.onRequest')}} 事件都会触发。
+
+## 语法
+
+```js-nolint
+chrome.extension.sendRequest(
+  extensionId,             // 可选的字符串
+  request,                 // 任意类型
+  (response) => {/* … */}  // 可选的函数
+)
+```
+
+该 API 的返回 promise 的版本同样以 `browser.extension.sendRequest()` 的形式可用。
+
+### 参数
+
+- `extensionId` {{optional_inline}}
+  - : `string`，你所希望连接到的扩展的 ID。如果省略，则默认为你自己的扩展。
+- `request`
+  - : `any`。
+- `responseCallback` {{optional_inline}}
+
+  - : `function`，将传递如下参数的函数：
+
+    - `response`
+      - : `any`，由请求处理器发送的 JSON 响应对象。如果在连接到插件时发生错误，回调函数将不带参数地被调用，且 {{WebExtAPIRef('runtime.lastError')}} 将被设置为错误消息。
+
+## 浏览器兼容性
+
+{{Compat}}
+
+{{WebExtExamples}}
+
+> [!NOTE]
+> 此 API 基于 Chromium 的 [`chrome.extension`](https://developer.chrome.google.cn/docs/extensions/reference/api/extension/#method-sendRequest) API。该文档衍生自 Chromium 代码中的 [`extension.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/extension.json)。
+
+<!--
+// Copyright 2015 The Chromium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+-->
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/content_scripts/index.md b/files/zh-cn/mozilla/add-ons/webextensions/content_scripts/index.md
index 10a8953ebd8b9d..dd542fdc2def9a 100644
--- a/files/zh-cn/mozilla/add-ons/webextensions/content_scripts/index.md
+++ b/files/zh-cn/mozilla/add-ons/webextensions/content_scripts/index.md
@@ -600,22 +600,25 @@ In page script, window.x: 1
 In page script, window.y: undefined
 ```
 
-上述内容同样适用于 [`setTimeout()`](/zh-CN/docs/Web/API/setTimeout), [`setInterval()`](/zh-CN/docs/Web/API/setInterval), and [`Function()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function).
+上述内容同样适用于 {{domxref("Window.setTimeout", "setTimeout()")}}、{{domxref("Window.setInterval", "setInterval()")}} 和 [`Function()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function)。
 
-当在页面的上下文中运行代码时，适用于上面所提到的"[Sharing content script objects with page scripts](/zh-CN/Add-ons/WebExtensions/Content_scripts#Sharing_objects_with_page_scripts)" 这一部分的警告：页面的环境可能会被恶意的网页所控制，这可能会导致你所交互的对象会有意想不到的行为：
-
-```js
-// page.js redefines console.log
-
-var original = console.log;
-
-console.log = function () {
-  original(true);
-};
-```
-
-```js
-// content-script.js calls the redefined version
-
-window.eval("console.log(false)");
-```
+> [!WARNING]
+> 在页面的上下文中运行代码时要非常小心！
+>
+> 页面的环境由潜在的恶意网页控制，这些网页可以重新定义与你交互的对象，使其以意想不到的方式运行：
+>
+> ```js example-bad
+> // page.js 重新定义 console.log
+>
+> let original = console.log;
+>
+> console.log = () => {
+>   original(true);
+> };
+> ```
+>
+> ```js example-bad
+> // content-script.js 调用了重新定义的版本
+>
+> window.eval("console.log(false)");
+> ```
diff --git a/files/zh-cn/mozilla/firefox/releases/65/index.md b/files/zh-cn/mozilla/firefox/releases/65/index.md
index 79579fef50e787..7011828d6f92e2 100644
--- a/files/zh-cn/mozilla/firefox/releases/65/index.md
+++ b/files/zh-cn/mozilla/firefox/releases/65/index.md
@@ -57,9 +57,9 @@ _无变化。_
 #### Service workers
 
 - The {{domxref("Response.redirect()")}} method now correctly throws a `TypeError` if a non-valid URL is specified as the first parameter ([Firefox bug 1503276](https://bugzil.la/1503276)).
-- The {{domxref("ServiceWorkerContainer.register()")}} and {{domxref("WorkerGlobalScope.importScripts()")}} (when used by a service worker) methods will now accept any files with a valid [JavaScript MIME type](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types#JavaScript_types) ([Firefox bug 1354577](https://bugzil.la/1354577)).
+- The {{domxref("ServiceWorkerContainer.register()")}} and {{domxref("WorkerGlobalScope.importScripts()")}} (when used by a service worker) methods will now accept any files with a valid [JavaScript MIME type](/zh-CN/docs/Web/HTTP/MIME_types#textjavascript) ([Firefox bug 1354577](https://bugzil.la/1354577)).
 
-#### Media, Web Audio, 和 WebRTC
+#### Media、Web Audio 和 WebRTC
 
 - 增加了对 [WebP](/zh-CN/docs/Glossary/webp) Google 压缩图像文件的支持 ([bug 1294490](https://bugzilla.mozilla.org/show_bug.cgi?id=1294490)) 。
 
diff --git a/files/zh-cn/web/api/background_tasks_api/index.md b/files/zh-cn/web/api/background_tasks_api/index.md
index f8a105eee17b9a..f1a0531e0504eb 100644
--- a/files/zh-cn/web/api/background_tasks_api/index.md
+++ b/files/zh-cn/web/api/background_tasks_api/index.md
@@ -26,47 +26,6 @@ slug: Web/API/Background_Tasks_API
 - **避免运行时间无法预测的任务**。你的空闲回调必须避免做任何占用时间不可预测的事情。比如说，应该避免做任何会影响页面布局的事情。你也必须避免 执行{{domxref("Promise")}} 的 `resolve` 和 `reject`，因为这会在你的回调函数返回后立即引用 Promise 对象对 `resolve` 和 `reject` 的处理程序。
 - **在你需要的时候要用 timeout，但记得只在需要的时候才用**。使用 timeout 可以保证你的代码按时执行，但是在剩余时间不足以强制执行你的代码的同时保证浏览器的性能表现的情况下，timeout 就会造成延迟或者动画不流畅。
 
-### 回退到 setTimeout
-
-因为后台任务 API 还是相当新的，而你的代码可能需要在那些不仍不支持此 API 的浏览器上运行。你可以把 {{domxref("WindowTimers.setTimeout()", "setTimeout()")}} 用作回调选项来做这样的事。这个并不是 {{Glossary("polyfill")}} ，因为它在功能上并不相同；`setTimeout()` 并不会让你利用空闲时段，而是使你的代码在情况允许时执行你的代码，以使我们可以尽可能地避免造成用户体验性能表现延迟的后果。
-
-```js
-window.requestIdleCallback =
-  window.requestIdleCallback ||
-  function (handler) {
-    let startTime = Date.now();
-
-    return setTimeout(function () {
-      handler({
-        didTimeout: false,
-        timeRemaining: function () {
-          return Math.max(0, 50.0 - (Date.now() - startTime));
-        },
-      });
-    }, 1);
-  };
-```
-
-如果 {{domxref("Window.requestIdleCallback", "window.requestIdleCallback")}} 是 undefined, 我们在这里把它创建出来。这个函数首先会记录我们调用具体实现的时间。我们将用它计算填充程序 {{domxref("IdleDeadline.timeRemaining()", "timeRemaining()")}} 返回的值。
-
-接着，我们调用 {{domxref("WindowTimers.setTimeout", "setTimeout()")}}，并给它传一个函数，在这个函数里，我们传给 `requestIdleCallback()` 的具体实现的回调会得以执行。这个回调会接收一个和 {{domxref("IdleDeadline")}} 相符合的 object，此 object 的 {{domxref("IdleDeadline.didTimeout", "didTimeout")}} 被设定为 false，并拥有一个 {{domxref("IdleDeadline.timeRemaining", "timeRemaining()")}} 方法，用来给回调函数 50 毫秒的开始时间。每次调用 `timeRemaining()`，它都会从开始的 50 毫秒中减去已逝去的时间，来确定还剩余的时间。
-
-结果是，虽然我们的填充程序不会像真正的 `requestIdleCallback()` 将自己限制在当前事件循环传递中的空闲时间内，但它至少将每次传递的运行时间限制为不超过 50 毫秒。
-
-我们 {{domxref("Window.cancelIdleCallback", "cancelIdleCallback()")}} 的具体实现要简单的多。
-
-```js
-window.cancelIdleCallback =
-  window.cancelIdleCallback ||
-  function (id) {
-    clearTimeout(id);
-  };
-```
-
-如果 `cancelIdleCallback()` 没有定义，它将创建一个来简单地把指定回调 ID 传递给 {{domxref("WindowTimers.clearTimeout", "clearTimeout()")}}。
-
-现在，尽管效率不高，你的代码也可以在不支持后台任务 API 的浏览器上运行了。
-
 ## 接口
 
 后台任务 API 只添加了一个新的接口：
diff --git a/files/zh-cn/web/api/canvas_api/tutorial/basic_animations/index.md b/files/zh-cn/web/api/canvas_api/tutorial/basic_animations/index.md
index 83932c1ba21b6e..38dbd2ec20bbdf 100644
--- a/files/zh-cn/web/api/canvas_api/tutorial/basic_animations/index.md
+++ b/files/zh-cn/web/api/canvas_api/tutorial/basic_animations/index.md
@@ -30,16 +30,16 @@ slug: Web/API/Canvas_API/Tutorial/Basic_animations
 
 ### 有安排地更新画布
 
-首先，可以用{{domxref("window.setInterval()")}}, {{domxref("window.setTimeout()")}},和{{domxref("window.requestAnimationFrame()")}}来设定定期执行一个指定函数。
+首先，可以用 {{domxref("Window.setInterval", "setInterval()")}}、{{domxref("Window.setTimeout", "setTimeout()")}} 和 {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} 来设定定期执行一个指定函数。
 
-- {{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}
+- {{domxref("Window.setInterval", "setInterval()")}}
   - : 当设定好间隔时间后，function 会定期执行。
-- {{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}
+- {{domxref("Window.setTimeout", "setTimeout()")}}
   - : 在设定好的时间之后执行函数
-- {{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}
+- {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}}
   - : 告诉浏览器你希望执行一个动画，并在重绘之前，请求浏览器执行一个特定的函数来更新动画。
 
-如果你并不需要与用户互动，你可以使用 setInterval() 方法，它就可以定期执行指定代码。如果我们需要做一个游戏，我们可以使用键盘或者鼠标事件配合上 setTimeout() 方法来实现。通过设置事件监听，我们可以捕捉用户的交互，并执行相应的动作。
+如果你并不需要与用户互动，你可以使用 `setInterval()` 方法，它就可以定期执行指定代码。如果我们需要做一个游戏，我们可以使用键盘或者鼠标事件配合上 `setTimeout()` 方法来实现。通过设置事件监听，我们可以捕捉用户的交互，并执行相应的动作。
 
 > [!NOTE]
 > 下面的例子，采用 {{domxref("window.requestAnimationFrame()")}}实现动画效果。这个方法提供了更加平缓并更加有效率的方式来执行动画，当系统准备好了重绘条件的时候，才调用绘制动画帧。一般每秒钟回调函数执行 60 次，也有可能会被降低。想要了解更多关于动画循环的信息，尤其是游戏，可以在[Game development zone](/zh-CN/docs/Games) 参考这篇文章 [Anatomy of a video game](/zh-CN/docs/Games/Anatomy)。
diff --git a/files/zh-cn/web/api/canvas_api/tutorial/basic_usage/index.md b/files/zh-cn/web/api/canvas_api/tutorial/basic_usage/index.md
index 7252853cfab26e..90d17a85e5ecb2 100644
--- a/files/zh-cn/web/api/canvas_api/tutorial/basic_usage/index.md
+++ b/files/zh-cn/web/api/canvas_api/tutorial/basic_usage/index.md
@@ -105,7 +105,7 @@ if (canvas.getContext) {
 </html>
 ```
 
-上面的脚本中包含一个叫做 draw() 的函数，当页面加载结束的时候就会执行这个函数。通过使用在文档上加载事件来完成。只要页面加载结束，这个函数，或者像是这个的，同样可以使用 {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}， {{domxref("WindowTimers.setInterval", "window.setInterval()")}}，或者其他任何事件处理程序来调用。
+上面的脚本中包含一个叫做 draw() 的函数，当页面加载结束的时候就会执行这个函数。通过使用在文档上加载事件来完成。只要页面加载结束，这个函数，或者像是这个的，同样可以使用 {{domxref("Window.setTimeout", "setTimeout()")}}、{{domxref("Window.setInterval", "setInterval()")}}，或者其他任何事件处理程序来调用。
 
 模板看起来会是这样。如这里所示，它最初是空白的。
 
diff --git a/files/zh-cn/web/api/canvas_api/tutorial/optimizing_canvas/index.md b/files/zh-cn/web/api/canvas_api/tutorial/optimizing_canvas/index.md
index d1a41ce9639f20..5d572f88c1356a 100644
--- a/files/zh-cn/web/api/canvas_api/tutorial/optimizing_canvas/index.md
+++ b/files/zh-cn/web/api/canvas_api/tutorial/optimizing_canvas/index.md
@@ -108,7 +108,7 @@ var ctx = canvas.getContext("2d", { alpha: false });
 - 尽可能避免 {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}特性
 - 尽可能避免[text rendering](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_text)
 - 尝试不同的方法来清除画布 ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} vs. {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} vs. 调整 canvas 大小)
-- 有动画，请使用{{domxref("window.requestAnimationFrame()")}} 而非{{domxref("window.setInterval()")}}
+- 有动画，请使用 {{domxref("Window.requestAnimationFrame()")}} 而非 {{domxref("Window.setInterval", "setInterval()")}}
 - 请谨慎使用大型物理库
 
 ## 参见
diff --git a/files/zh-cn/web/api/clearinterval/index.md b/files/zh-cn/web/api/clearinterval/index.md
deleted file mode 100644
index 65a7409c545663..00000000000000
--- a/files/zh-cn/web/api/clearinterval/index.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-title: WindowTimers.clearInterval()
-slug: Web/API/clearInterval
----
-
-{{ApiRef("HTML DOM")}}
-
-`WindowOrWorkerGlobalScope` mixin 的 **`clearInterval()`** 方法可取消先前通过 {{domxref("setInterval()")}} 设置的重复定时任务。
-
-## 语法
-
-```plain
-scope.clearInterval(intervalID)
-```
-
-### Parameters
-
-- `intervalID`
-  - : 要取消的定时器的 ID。是由 `setInterval()` 返回的。
-
-值得一提的是，{{domxref("setInterval()")}} 和 {{domxref("setTimeout()")}} 共用其定义的 IDs，即可以使用 `clearInterval()` 和 {{domxref("clearTimeout()")}} 中的任意一个。然而，为了使代码可读性更强，你应该尽量避免这种用法。
-
-### 返回值
-
-{{jsxref("undefined")}}
-
-## 示例
-
-查看 [`setInterval()` 的示例](/zh-CN/docs/DOM/window.setInterval#Example)。
-
-## 规范
-
-{{Specifications}}
-
-## 浏览器兼容性
-
-{{Compat}}
-
-## 参见
-
-- [JavaScript 定时器](/zh-CN/docs/JavaScript/Timers)
-- {{domxref("setTimeout")}}
-- {{domxref("setInterval")}}
-- {{domxref("clearTimeout")}}
-- {{domxref("Window.requestAnimationFrame")}}
-- [_Daemons_ management](/zh-CN/docs/JavaScript/Timers/Daemons)
diff --git a/files/zh-cn/web/api/cleartimeout/index.md b/files/zh-cn/web/api/cleartimeout/index.md
deleted file mode 100644
index 36e78ca6ab0c16..00000000000000
--- a/files/zh-cn/web/api/cleartimeout/index.md
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: clearTimeout()
-slug: Web/API/clearTimeout
----
-
-{{APIRef("HTML DOM")}}
-
-`WindowOrWorkerGlobalScope` 内置的 **`clearTimeout()`** 方法取消了先前通过调用{{domxref("setTimeout()")}}建立的定时器。
-
-## 语法
-
-```plain
-scope.clearTimeout(timeoutID)
-```
-
-### Parameters
-
-- `timeoutID`
-  - : 你要取消定时器的标识符。该 ID 由相应的`setTimeout()`调用返回。
-
-值得注意的是，{{domxref("setTimeout()")}} 和 {{domxref("setInterval()")}} 使用共享的 ID 池，意味着在技术上可以混用 `clearTimeout()` 和 {{domxref("clearInterval()")}}。但是，为了清楚起见，你应该避免这样做。
-
-## 示例
-
-在一个网页中运行如下脚本，并且点击一次页面。一秒钟后你会看见弹出一条信息。如果你在一秒内不停点击页面，弹出框将不再出现。
-
-```js
-var alarm = {
-  remind: function (aMessage) {
-    alert(aMessage);
-    delete this.timeoutID;
-  },
-
-  setup: function () {
-    this.cancel();
-    var self = this;
-    this.timeoutID = window.setTimeout(
-      function (msg) {
-        self.remind(msg);
-      },
-      1000,
-      "Wake up!",
-    );
-  },
-
-  cancel: function () {
-    if (typeof this.timeoutID == "number") {
-      window.clearTimeout(this.timeoutID);
-      delete this.timeoutID;
-    }
-  },
-};
-window.onclick = function () {
-  alarm.setup();
-};
-```
-
-## 注意
-
-传入一个错误的 ID 给 `clearTimeout()`不会有任何影响；也不会抛出异常。
-
-## 规范
-
-{{Specifications}}
-
-## 浏览器兼容性
-
-{{Compat}}
-
-## 更多
-
-- {{domxref("WindowTimers.setTimeout()")}}
-- {{domxref("WindowTimers.setInterval()")}}
-- {{domxref("WindowTimers.clearInterval()")}}
-- {{domxref("Window.requestAnimationFrame()")}}
-- [_Daemons_ management](/zh-CN/docs/JavaScript/Timers/Daemons)
diff --git a/files/zh-cn/web/api/createimagebitmap/index.md b/files/zh-cn/web/api/createimagebitmap/index.md
deleted file mode 100644
index 0c4ff5eef8efa2..00000000000000
--- a/files/zh-cn/web/api/createimagebitmap/index.md
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: self.createImageBitmap()
-slug: Web/API/createImageBitmap
----
-
-{{APIRef("Canvas API")}}
-
-**`createImageBitmap`** 方法存在 windows 和 workers 中。它接受各种不同的图像来源，并返回一个{{domxref("Promise")}}, resolve 为{{domxref("ImageBitmap")}}. 可选地参数，图像被剪裁成自（sx，sy）且宽度为 sw，高度为 sh 的像素的矩形。
-
-## 语法
-
-```js-nolint
-createImageBitmap(image)
-createImageBitmap(image, options)
-createImageBitmap(image, sx, sy, sw, sh)
-createImageBitmap(image, sx, sy, sw, sh, options)
-```
-
-### 参数
-
-- `image`
-  - : 一个图像源，可以是一个 {{HTMLElement("img")}}, SVG {{SVGElement("image")}}, {{HTMLElement("video")}}, {{HTMLElement("canvas")}}, {{domxref("HTMLImageElement")}}, {{domxref("SVGImageElement")}}, {{domxref("HTMLVideoElement")}}, {{domxref("HTMLCanvasElement")}}, {{domxref("Blob")}}, {{domxref("ImageData")}}, {{domxref("ImageBitmap")}}, 或 {{domxref("OffscreenCanvas")}} 对象。
-- `sx`
-  - : 裁剪点 x 坐标。
-- `sy`
-  - : 裁剪点 y 坐标。
-- `sw`
-  - : 裁剪宽度，值可为负数。
-- `sh`
-  - : 裁剪高度，值可为负数。
-- options {{optional_inline}}
-
-  - : 为其设置选项的对象。可用的选项是：
-
-    - `imageOrientation`: 指示图像是按原样呈现还是垂直翻转。`none` (默认不翻转) 或 `flipY`.
-    - `premultiplyAlpha`: 指示位图颜色通道由 alpha 通道预乘。选择其一：`none`, `premultiply`, 或 `default` (默认).
-    - `colorSpaceConversion`: 指示图像是否使用色彩空间转换进行解码。`none` 或 `default` (默认). The value `default` indicates that implementation-specific behavior is used.
-    - `resizeWidth`: 指示新宽度的长整数。
-    - `resizeHeight`: 指示新高度的长整数。
-    - `resizeQuality`: 指定图像缩放算法。选择其一`pixelated`, `low` (默认), `medium`, 或 `high`.
-
-### 返回值
-
-返回一个解决 ImageBitmap 的{{domxref("Promise")}} ，当 Promise 成功时 resolves 接收一个包含所得到的矩形的位图数据{{domxref("ImageBitmap")}}。
-
-## 示例
-
-```js
-var canvas = document.getElementById("myCanvas"),
-  ctx = canvas.getContext("2d"),
-  image = new Image();
-
-image.onload = function () {
-  Promise.all([
-    createImageBitmap(this, 0, 0, 32, 32),
-    createImageBitmap(this, 32, 0, 32, 32),
-  ]).then(function (sprites) {
-    ctx.drawImage(sprites[0], 0, 0);
-    ctx.drawImage(sprites[1], 32, 32);
-  });
-};
-
-image.src = "sprites.png";
-```
-
-## 规范
-
-{{Specifications}}
-
-## 浏览器兼容性
-
-{{Compat}}
-
-## 参见
-
-- {{domxref("CanvasRenderingContext2D.drawImage()")}}
-- {{domxref("ImageData")}}
diff --git a/files/zh-cn/web/api/datatransferitem/type/index.md b/files/zh-cn/web/api/datatransferitem/type/index.md
index 856c45cb33c44c..5016fdb19f9bc6 100644
--- a/files/zh-cn/web/api/datatransferitem/type/index.md
+++ b/files/zh-cn/web/api/datatransferitem/type/index.md
@@ -2,7 +2,7 @@
 title: DataTransferItem：type 属性
 slug: Web/API/DataTransferItem/type
 l10n:
-  sourceCommit: b5583a21df2aeaebddd7e0eeb58ff690b013546b
+  sourceCommit: f75b2c86ae4168e59416aed4c7121f222afc201d
 ---
 
 {{APIRef("HTML Drag and Drop API")}}
@@ -59,4 +59,4 @@ function dropHandler(ev) {
 ## 参见
 
 - {{domxref("DataTransfer.types()")}}
-- [常见 MIME 类型列表](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types)
+- [常见 MIME 类型列表](/zh-CN/docs/Web/HTTP/MIME_types/Common_types)
diff --git a/files/zh-cn/web/api/document/exitpointerlock/index.md b/files/zh-cn/web/api/document/exitpointerlock/index.md
index 7c95839c5b6c68..f7b2a103ba9748 100644
--- a/files/zh-cn/web/api/document/exitpointerlock/index.md
+++ b/files/zh-cn/web/api/document/exitpointerlock/index.md
@@ -1,22 +1,33 @@
 ---
-title: Document.exitPointerLock()
+title: Document：exitPointerLock() 方法
 slug: Web/API/Document/exitPointerLock
+l10n:
+  sourceCommit: be8f7f155a48e11b30c240f8731afb1845f85378
 ---
 
-{{ apiref("DOM") }}
+{{APIRef("Pointer Lock API")}}
 
-{{ seeCompatTable }}
+{{domxref("Document")}} 接口的 **`exitPointerLock()`** 方法异步释放先前通过 {{domxref("Element.requestPointerLock")}} 请求的指针锁定。
 
-`exitPointerLock` 方法可异步的解锁鼠标（通过{{domxref("Element.requestPointerLock")}}锁定的）。
+> [!NOTE]
+> 在文档上调用 **`exitPointerLock()`** 方法，在元素上调用 **`requestPointerLock()`** 方法。
 
-追踪是否解锁成功，需要监听[`pointerlockchange`](/zh-CN/docs/Web/API/Document/pointerlockchange_event) 和[`pointerlockerror`](/zh-CN/docs/Web/API/Document/pointerlockerror_event) 事件。
+要跟踪请求的成功或失败，需要监听 {{domxref("Document/pointerlockchange_event", "pointerlockchange")}} 事件和 {{domxref("Document/pointerlockerror_event", "pointerlockerror")}} 事件。
 
 ## 语法
 
-```plain
-document.exitPointerLock();
+```js-nolint
+exitPointerLock()
 ```
 
+### 参数
+
+无。
+
+### 返回值
+
+无（{{jsxref("undefined")}}）。
+
 ## 规范
 
 {{Specifications}}
@@ -29,4 +40,4 @@ document.exitPointerLock();
 
 - {{ domxref("Document.pointerLockElement") }}
 - {{ domxref("Element.requestPointerLock()") }}
-- [Pointer Lock](/zh-CN/docs/WebAPI/Pointer_Lock)
+- [指针锁定](/zh-CN/docs/Web/API/Pointer_Lock_API)
diff --git a/files/zh-cn/web/api/document/hasstorageaccess/index.md b/files/zh-cn/web/api/document/hasstorageaccess/index.md
index 7f64bcea5b066e..f853db18ea8bcb 100644
--- a/files/zh-cn/web/api/document/hasstorageaccess/index.md
+++ b/files/zh-cn/web/api/document/hasstorageaccess/index.md
@@ -1,49 +1,73 @@
 ---
-title: Document.hasStorageAccess()
+title: Document：hasStorageAccess() 方法
 slug: Web/API/Document/hasStorageAccess
+l10n:
+  sourceCommit: be8f7f155a48e11b30c240f8731afb1845f85378
 ---
 
-{{APIRef}}{{seecompattable}}{{domxref("Document")}}的**`hasStorageAccess()`** 方法返回了一个{{jsxref("Promise")}}来判断该文档是否有访问第一方储存的权限。
+{{APIRef("Storage Access API")}}
 
-通过 [Storage Access API](/zh-CN/docs/Web/API/Storage_Access_API) 获取更多信息。
+{{domxref("Document")}} 接口的 **`hasStorageAccess()`** 方法返回一个会兑现为指示文档是否有权访问[第三方](/zh-CN/docs/Web/Privacy/Third-party_cookies)[未分区](/zh-CN/docs/Web/API/Storage_Access_API#未分区_cookie_与分区_cookie_的对比) cookie 的布尔值的 {{jsxref("Promise")}}。
+
+此方法属于[存储访问 API](/zh-CN/docs/Web/API/Storage_Access_API)。
+
+> [!NOTE]
+> 此方法是 {{DOMxRef("Document.hasUnpartitionedCookieAccess()")}} 的别名。目前没有计划删除此方法而采用 {{DOMxRef("Document.hasUnpartitionedCookieAccess()")}}。
 
 ## 语法
 
-```plain
-var promise = document.hasStorageAccess();
+```js-nolint
+hasStorageAccess()
 ```
 
 ### 参数
 
-None.
+无。
 
 ### 返回值
 
-一个用来判断文档是否有权利访问其第一方存储的{{jsxref("Promise")}} 。
+一个 {{jsxref("Promise")}}，会兑现一个指示文档是否有权访问第三方 cookie 的布尔值——如果可以，则返回 `true`，否则返回 `false`。
+
+在以下几种情况下，此方法返回的结果可能不准确：
+
+1. 用户可能激活了浏览器的阻止第三方 cookie 的设置；在这种情况下，即使第三方 cookie 仍然无法访问，也可能返回 `true`。要处理这种情况，你应该优雅地处理由于无法检索 cookie 值而导致的任何错误；例如，通知用户他们的个性化设置被阻止访问，并邀请他们重新登录以使用这些设置。
+2. 浏览器可能不会默认阻止第三方 cookie 的访问；在这种情况下，即使第三方 cookie 可以访问，也可能返回 `false`，并且不需要请求存储访问权限（例如通过 {{domxref("Document.requestStorageAccess()")}}）。要解决这个问题，你可以查询 {{domxref("Document.cookie")}} 来确定是否可以访问 cookie，如果不可访问，则调用 {{domxref("Document.requestStorageAccess()")}}。
 
-If the promise gets resolved and a user gesture event was being processed when the function was originally called, the resolve handler will run as if a user gesture was being processed, so it will be able to call APIs that require user activation.
+> [!NOTE]
+> 如果 promise 得到兑现，并且在最初调用函数时正在处理用户手势事件，则兑现处理器运行的时候就好像正在处理用户手势，因此它将能够调用需要用户激活的 API。
 
-## Examples
+### 异常
+
+- `InvalidStateError` {{domxref("DOMException")}}
+  - : 如果当前{{domxref("Document", "文档", "", 1)}}尚未激活，则抛出此异常。
+
+## 示例
 
 ```js
 document.hasStorageAccess().then((hasAccess) => {
   if (hasAccess) {
-    // storage access has been granted already.
+    // 已获得存储访问权限。
+    console.log("已获得 cookie 访问权限");
   } else {
-    // storage access hasn't been granted already;
-    // you may want to call requestStorageAccess().
+    // 尚未获得存储访问权限；你可能需要调用 requestStorageAccess()。
+    console.log("尚未获得 cookie 访问权限");
   }
 });
 ```
 
-## Specifications
+> [!NOTE]
+> 参见[使用存储访问 API](/zh-CN/docs/Web/API/Storage_Access_API/Using) 以获取更完整的示例。
+
+## 规范
 
-The API is currently only at the proposal stage — the standardization process has yet to begin. You can currently find specification details of the API at Apple's [Introducing Storage Access API](https://webkit.org/blog/8124/introducing-storage-access-api/) blog post, and [WHATWG HTML issue 3338 — Proposal: Storage Access API](https://github.com/whatwg/html/issues/3338).
+{{Specifications}}
 
-## Browser compatibility
+## 浏览器兼容性
 
 {{Compat}}
 
-## See also
+## 参见
 
-[Storage Access API](/zh-CN/docs/Web/API/Storage_Access_API)
+- {{domxref("Document.hasUnpartitionedCookieAccess()")}}、{{domxref("Document.requestStorageAccess()")}}、{{domxref("Document.requestStorageAccessFor()")}}
+- [使用存储访问 API](/zh-CN/docs/Web/API/Storage_Access_API/Using)
+- [介绍存储访问 API](https://webkit.org/blog/8124/introducing-storage-access-api/)（WebKit 博客）
diff --git a/files/zh-cn/web/api/document/scroll_event/index.md b/files/zh-cn/web/api/document/scroll_event/index.md
index 5c06c21a89ec2c..c61668b3397b6a 100644
--- a/files/zh-cn/web/api/document/scroll_event/index.md
+++ b/files/zh-cn/web/api/document/scroll_event/index.md
@@ -27,7 +27,7 @@ onscroll = (event) => {};
 
 ### Scroll 事件限流
 
-由于 `scroll` 事件可被高频触发，事件处理器不应该执行高性能消耗的操作，如 DOM 操作。而更推荐的做法是使用 {{DOMxRef("Window.requestAnimationFrame()", "requestAnimationFrame()")}}、{{DOMxRef("setTimeout()")}} 或 {{DOMxRef("CustomEvent")}} 给事件限流，如下所述。
+由于 `scroll` 事件可被高频触发，事件处理器不应该执行高性能消耗的操作，如 DOM 操作。而更推荐的做法是使用 {{DOMxRef("Window.requestAnimationFrame()", "requestAnimationFrame()")}}、{{DOMxRef("Window.setTimeout", "setTimeout()")}} 或 {{DOMxRef("CustomEvent")}} 给事件限流，如下所述。
 
 然而需要注意的是，输入事件和动画帧的触发速度大致相同，因此通常不需要下述优化。此示例使用 `requestAnimationFrame` 优化 `scroll` 事件。
 
diff --git a/files/zh-cn/web/api/document_picture-in-picture_api/using/index.md b/files/zh-cn/web/api/document_picture-in-picture_api/using/index.md
new file mode 100644
index 00000000000000..7408b10474b270
--- /dev/null
+++ b/files/zh-cn/web/api/document_picture-in-picture_api/using/index.md
@@ -0,0 +1,230 @@
+---
+title: 使用 Document Picture-in-Picture API
+slug: Web/API/Document_Picture-in-Picture_API/Using
+l10n:
+  sourceCommit: d0b23f3f26637aa405ee9ee0a0892fc6e9b742ef
+---
+
+{{SeeCompatTable}}{{DefaultAPISidebar("Document Picture-in-Picture API")}}{{securecontext_header}}
+
+本指南提供了 {{domxref("Document Picture-in-Picture API", "Document Picture-in-Picture API", "", "nocode")}} 典型用法的详细指导。
+
+> [!NOTE]
+> 你可以在 [Document Picture-in-Picture API 示例](https://mdn.github.io/dom-examples/document-picture-in-picture/)中看到特性演示（另请参阅完整的[源代码](https://github.com/mdn/dom-examples/tree/main/document-picture-in-picture)）。
+
+## 示例 HTML
+
+以下 HTML 设置了一个基本的视频播放器。
+
+```html
+<div id="container">
+  <p class="in-pip-message">视频播放器当前位于单独的画中画窗口中。</p>
+  <div id="player">
+    <video
+      src="assets/bigbuckbunny.mp4"
+      id="video"
+      controls
+      width="320"></video>
+
+    <div id="credits">
+      <a href="https://peach.blender.org/download/" target="_blank">
+        Blender 的视频
+      </a>
+      ;
+      <a href="https://peach.blender.org/about/" target="_blank">
+        许可 CC-BY 3.0
+      </a>
+    </div>
+
+    <div id="controlbar">
+      <p class="no-picture-in-picture">
+        Document Picture-in-Picture API 不可用
+      </p>
+
+      <p></p>
+    </div>
+  </div>
+</div>
+```
+
+## 特性检测
+
+要检查是否支持 Document Picture-in-Picture API，你可以测试 `window` 上的 `documentPictureInPicture` 属性是否可用：
+
+```js
+if ("documentPictureInPicture" in window) {
+  document.querySelector(".no-picture-in-picture").remove();
+
+  const togglePipButton = document.createElement("button");
+  togglePipButton.textContent = "切换画中画";
+  togglePipButton.addEventListener("click", togglePictureInPicture, false);
+
+  document.getElementById("controlbar").appendChild(togglePipButton);
+}
+```
+
+如果可用，我们将删除“Document Picture-in-Picture API 不可用”消息，并添加 {{htmlelement("button")}} 元素以在文档画中画窗口中打开视频播放器。
+
+## 打开画中画窗口
+
+以下 JavaScript 调用 {{domxref("DocumentPictureInPicture.requestWindow", "window.documentPictureInPicture.requestWindow()")}} 打开一个空白的画中画窗口。返回的 {{jsxref("Promise")}} 兑现画中画 {{domxref("Window")}} 对象。使用 {{domxref("Element.append()")}} 将视频播放器移动到该窗口，然后我们显示消息通知用户它已被移动。
+
+`requestWindow()` 的 `width` 和 `height` 选项将画中画窗口设置为所需大小。如果选项值太大或太小而无法适应用户友好的窗口大小，浏览器可能会限制选项值。
+
+```js
+async function togglePictureInPicture() {
+  // 如果已经打开画中画窗口，则提前返回
+  if (window.documentPictureInPicture.window) {
+    return;
+  }
+
+  // 打开画中画窗口。
+  const pipWindow = await window.documentPictureInPicture.requestWindow({
+    width: videoPlayer.clientWidth,
+    height: videoPlayer.clientHeight,
+  });
+
+  // ...
+
+  // 将播放器移至画中画窗口。
+  pipWindow.document.body.append(videoPlayer);
+
+  // 显示一条消息表明它已被移动
+  inPipMessage.style.display = "block";
+}
+```
+
+## 将样式表复制到画中画窗口
+
+要从原始窗口复制所有 CSS 样式表，请循环遍历文档中明确链接或嵌入的所有样式表（通过 {{domxref("Document.styleSheets")}}），然后将其附加到画中画窗口。请注意，这是一次性复制。
+
+```js
+// ...
+
+// 从初始文档复制样式表，以便播放器看起来相同。
+[...document.styleSheets].forEach((styleSheet) => {
+  try {
+    const cssRules = [...styleSheet.cssRules]
+      .map((rule) => rule.cssText)
+      .join("");
+    const style = document.createElement("style");
+
+    style.textContent = cssRules;
+    pipWindow.document.head.appendChild(style);
+  } catch (e) {
+    const link = document.createElement("link");
+
+    link.rel = "stylesheet";
+    link.type = styleSheet.type;
+    link.media = styleSheet.media;
+    link.href = styleSheet.href;
+    pipWindow.document.head.appendChild(link);
+  }
+});
+
+// ...
+```
+
+## 画中画模式下目标样式
+
+{{cssxref("@media/display-mode", "display-mode")}} [媒体特性](/zh-CN/docs/Web/CSS/@media#媒体特性) 的 `picture-in-picture` 值允许开发人员根据文档是否以画中画模式显示来将 CSS 应用于文档。基本用法如下：
+
+```css
+@media (display-mode: picture-in-picture) {
+  body {
+    background: red;
+  }
+}
+```
+
+仅当以画中画模式显示时，此代码片段才会将文档 `<body>` 的背景变为红色。
+
+在[我们的演示](https://mdn.github.io/dom-examples/document-picture-in-picture/)中，我们将 `display-mode: picture-in-picture` 值与 {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} 媒体特性相结合，以根据用户的配色方案偏好创建仅当应用以画中画模式显示时才应用的明暗配色方案。
+
+```css
+@media (display-mode: picture-in-picture) and (prefers-color-scheme: light) {
+  body {
+    background: antiquewhite;
+  }
+}
+
+@media (display-mode: picture-in-picture) and (prefers-color-scheme: dark) {
+  body {
+    background: #333;
+  }
+
+  a {
+    color: antiquewhite;
+  }
+}
+```
+
+## 处理画中画窗口关闭时的情况
+
+当第二次按下按钮时，切换画中画窗口再次关闭的代码如下所示：
+
+```js
+inPipMessage.style.display = "none";
+playerContainer.append(videoPlayer);
+window.documentPictureInPicture.window.close();
+```
+
+在这里，我们恢复 DOM 更改——隐藏消息并将视频播放器放回主应用窗口中的播放器容器中。我们还使用 {{domxref("Window.close()")}} 方法以编程方式关闭画中画窗口。
+
+但是，你还需要考虑用户通过按下窗口本身上浏览器提供的关闭（X）按钮来关闭画中画窗口的情况。你可以通过使用 [`pagehide`](/zh-CN/docs/Web/API/Window/pagehide_event) 事件检测窗口何时关闭来处理这种情况：
+
+```js
+pipWindow.addEventListener("pagehide", (event) => {
+  inPipMessage.style.display = "none";
+  playerContainer.append(videoPlayer);
+});
+```
+
+## 监听网站何时进入画中画模式
+
+监听 `DocumentPictureInPicture` 实例上的 {{domxref("DocumentPictureInPicture.enter_event", "enter")}} 事件，了解画中画窗口何时打开。
+
+在我们的演示中，我们使用 `enter` 事件向画中画窗口添加静音切换按钮：
+
+```js
+documentPictureInPicture.addEventListener("enter", (event) => {
+  const pipWindow = event.window;
+  console.log("视频播放器已进入画中画窗口");
+
+  const pipMuteButton = pipWindow.document.createElement("button");
+  pipMuteButton.textContent = "静音";
+  pipMuteButton.addEventListener("click", () => {
+    const pipVideo = pipWindow.document.querySelector("#video");
+    if (!pipVideo.muted) {
+      pipVideo.muted = true;
+      pipMuteButton.textContent = "取消静音";
+    } else {
+      pipVideo.muted = false;
+      pipMuteButton.textContent = "静音";
+    }
+  });
+
+  pipWindow.document.body.append(pipMuteButton);
+});
+```
+
+> **备注：** {{domxref("DocumentPictureInPictureEvent")}} 事件对象包含一个 `window` 属性，用于访问画中画窗口。
+
+## 访问元素并处理事件
+
+你可以通过多种不同的方式访问画中画窗口中的元素：
+
+- {{domxref("DocumentPictureInPicture.requestWindow()")}} 方法返回的 {{domxref("Window")}} 实例，如上所示。
+- 通过 {{domxref("DocumentPictureInPictureEvent")}} 事件对象的 `window` 属性（在 {{domxref("DocumentPictureInPicture.enter_event", "enter")}} 事件上），如上所示。
+- 通过 {{domxref("DocumentPictureInPicture.window")}} 属性：
+
+```js
+const pipWindow = window.documentPictureInPicture.window;
+if (pipWindow) {
+  // 使画中画窗口中播放的视频静音。
+  const pipVideo = pipWindow.document.querySelector("#video");
+  pipVideo.muted = true;
+}
+```
+
+一旦获得了对画中画 `window` 实例的引用，你就可以操作 DOM（例如创建按钮）并响应用户输入事件（例如 [`click`](/zh-CN/docs/Web/API/Element/click_event) 事件），就像在常规浏览器窗口上下文中正常执行一样。
diff --git a/files/zh-cn/web/api/element/requestpointerlock/index.md b/files/zh-cn/web/api/element/requestpointerlock/index.md
index 847ad5f3450edb..638db70a911289 100644
--- a/files/zh-cn/web/api/element/requestpointerlock/index.md
+++ b/files/zh-cn/web/api/element/requestpointerlock/index.md
@@ -1,20 +1,77 @@
 ---
-title: Element.requestPointerLock()
+title: Element：requestPointerLock() 方法
 slug: Web/API/Element/requestPointerLock
+l10n:
+  sourceCommit: d0b23f3f26637aa405ee9ee0a0892fc6e9b742ef
 ---
 
-{{ APIRef("DOM") }}{{ seeCompatTable }}
+{{APIRef("Pointer Lock API")}}
 
-**`Element.requestPointerLock()`** 方法允许你异步地请求将鼠标指针锁定在指定元素上。
+{{domxref("Element")}} 接口的 **`requestPointerLock()`** 方法允许你异步请求在给定元素上锁定指针。
 
-若想追踪请求成功还是失败，则需要在 {{domxref("Document")}} 级别监听 [`pointerlockchange`](/zh-CN/docs/Web/API/Document/pointerlockchange_event) 和 [`pointerlockerror`](/zh-CN/docs/Web/API/Document/pointerlockerror_event) 事件。
+要跟踪请求的成功或失败，必须在 {{domxref("Document")}} 级别监听 {{domxref("Document/pointerlockchange_event", "pointerlockchange")}} 事件和 {{domxref("Document/pointerlockerror_event", "pointerlockerror")}} 事件。
+
+> [!NOTE]
+> 在当前规范中，`requestPointerLock()` 仅通过触发 {{domxref("Document/pointerlockchange_event", "pointerlockchange")}} 事件或 {{domxref("Document/pointerlockerror_event", "pointerlockerror")}} 事件来传达请求的成功或失败。 [对规范的拟议更新](https://github.com/w3c/pointerlock/pull/49)更新了 `requestPointerLock()`，以返回 {{jsxref("Promise")}} 来传达成功或失败。此页面记录了返回 {{jsxref("Promise")}} 的版本。但请注意，此版本尚未成为标准，并且并非所有浏览器都实现此版本。有关更多信息，请参阅[浏览器兼容性](#浏览器兼容性)。
 
 ## 语法
 
-```plain
-instanceOfElement.requestPointerLock();
+```js-nolint
+requestPointerLock()
+requestPointerLock(options)
 ```
 
+### 参数
+
+- `options` {{optional_inline}}
+  - : 选项对象，可以包含以下属性：
+    - `unadjustedMovement` {{optional_inline}}
+      - : 禁用操作系统级别的鼠标加速调整，而是访问原始鼠标输入。默认值为 `false`；将其设置为 `true` 将禁用鼠标加速。
+
+### 返回值
+
+兑现 {{jsxref("undefined")}} 的 {{jsxref("Promise")}}。
+
+## 安全
+
+调用 `requestPointerLock()` 时需要{{Glossary("Transient activation", "瞬态激活")}}。用户必须与页面或 UI 元素进行交互才能使此特性正常工作。此外，目标元素的关联文档必须处于活动状态。
+
+如果在通过默认解锁手势释放指针锁后立即调用 `requestPointerLock()`（而不是通过 `exitPointerLock()` 调用），即使有{{Glossary("Transient activation", "瞬态激活")}}，调用也会失败。
+
+如果使用 {{domxref("Element.requestFullscreen()", "requestFullscreen()")}} 调用 `requestPointerLock()`，则必须先调用 `requestPointerLock()`，因为 {{domxref("Element.requestFullscreen()", "requestFullscreen()")}} 将消耗{{Glossary("Transient activation", "瞬态激活")}}的状态。
+
+在 {{htmlelement("iframe")}} 元素中调用 `requestPointerLock()` 时，必须添加 `allow-pointer-lock` [沙盒令牌](/zh-CN/docs/Web/HTML/Element/iframe#sandbox)。此外，其他 {{htmlelement("iframe")}} 元素中的其他元素不得处于指针锁定模式。
+
+## 示例
+
+指针锁定通常用于在线游戏中，当你希望鼠标移动专注于控制游戏时，不会因鼠标指针四处移动、超出游戏区域或到达窗口边缘而分散注意力。
+
+要启用指针锁定，你需要让用户以某种方式与 UI 进行交互，例如按下按钮或游戏画布本身。
+
+```js
+canvas.addEventListener("click", async () => {
+  await canvas.requestPointerLock();
+});
+```
+
+操作系统默认启用鼠标加速，这在你有时想要缓慢精确的移动（例如，你可能会使用图形包）但又想以更快的鼠标移动移动很远的距离（例如，滚动和选择多个文件）时非常有用。然而，对于某些第一人称视角游戏，原始鼠标输入数据更适合控制相机旋转——相同距离的移动（快速或慢速）都会导致相同的旋转。专业游戏玩家表示，这会带来更好的游戏体验和更高的准确度。
+
+要禁用操作系统级鼠标加速并访问原始鼠标输入，你可以将 `unadjustedMovement` 设置为 `true`：
+
+```js
+canvas.addEventListener("click", async () => {
+  await canvas.requestPointerLock({
+    unadjustedMovement: true,
+  });
+});
+```
+
+更多示例代码请参见：
+
+- [指针锁定演示](https://mdn.github.io/dom-examples/pointer-lock/)（[查看源代码](https://github.com/mdn/dom-examples/tree/main/pointer-lock)）
+- {{domxref("Pointer Lock API", "指针锁定 API", "", "nocode")}}
+- [禁用鼠标加速以提供更好的 FPS 游戏体验](https://web.dev/articles/disable-mouse-acceleration)
+
 ## 规范
 
 {{Specifications}}
@@ -27,4 +84,4 @@ instanceOfElement.requestPointerLock();
 
 - {{ domxref("Document.pointerLockElement") }}
 - {{ domxref("Document.exitPointerLock()") }}
-- [Pointer Lock](/zh-CN/docs/Web/API/Pointer_Lock_API)
+- [指针锁定](/zh-CN/docs/Web/API/Pointer_Lock_API)
diff --git a/files/zh-cn/web/api/file/index.md b/files/zh-cn/web/api/file/index.md
index 8dbaf7f9afe65e..7e3eb3a671dbbd 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: 58ad1df59f2ffb9ecab4e27fe1bdf1eb5a55f89b
+  sourceCommit: 58d79e9c2206e0a604cd4d7f6fba5181262af420
 ---
 
 {{APIRef("File API")}}{{AvailableInWorkers}}
@@ -11,7 +11,13 @@ l10n:
 
 `File` 对象通常从用户使用 {{HTMLElement("input")}} 元素选择文件返回的 {{DOMxRef("FileList")}} 对象中检索，或者从拖放操作返回的 {{DOMxRef("DataTransfer")}} 对象中检索。
 
-`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` 对象。
+`File` 对象是一种特定类型的 {{DOMxRef("Blob")}}，并且可以在 Blob 可以使用的任何上下文中使用。特别地，以下 API 都接受 `Blob` 对象和 `File` 对象：
+
+- {{DOMxRef("FileReader")}}
+- {{DOMxRef("URL.createObjectURL_static", "URL.createObjectURL()")}}
+- {{DOMxRef("Window.createImageBitmap()")}} 和 {{DOMxRef("WorkerGlobalScope.createImageBitmap()")}}
+- {{domxref("Window/fetch", "fetch()")}} 方法的 [`body`](/zh-CN/docs/Web/API/RequestInit#body) 选项
+- {{DOMxRef("XMLHttpRequest.send()")}}
 
 参见[在 Web 应用程序使用文件](/zh-CN/docs/Web/API/File_API/Using_files_from_web_applications)了解更多信息和例子。
 
diff --git a/files/zh-cn/web/api/html_dom_api/microtask_guide/in_depth/index.md b/files/zh-cn/web/api/html_dom_api/microtask_guide/in_depth/index.md
index 80dae2da6338f6..7afe23565a56da 100644
--- a/files/zh-cn/web/api/html_dom_api/microtask_guide/in_depth/index.md
+++ b/files/zh-cn/web/api/html_dom_api/microtask_guide/in_depth/index.md
@@ -11,7 +11,7 @@ JavaScript 本质上是一门单线程语言。对于在它被设计出来的那
 
 当然，随着时间的流逝，计算机已经发展成为强大的多核系统，而 JavaScript 已经成为计算世界中使用最广泛的语言之一。大量最流行的应用程序至少有一部分是基于 JavaScript 代码的。为了支持这一点，有必要找到方法让项目摆脱单线程语言的限制。
 
-自从定时器（{{domxref("setTimeout()")}} 和 {{domxref("setInterval()")}}）加入到 Web API 后，浏览器提供的 JavaScript 环境就已经逐渐发展到包含任务调度、多线程应用开发等强大的特性。了解 JavaScript 运行时是如何安排和运行代码的对了解 `queueMicrotask()` 会非常有作用。
+自从定时器（{{domxref("Window.setTimeout", "setTimeout()")}} 和 {{domxref("Window.setInterval", "setInterval()")}}）加入到 Web API 后，浏览器提供的 JavaScript 环境就已经逐渐发展到包含任务调度、多线程应用开发等强大的特性。了解 JavaScript 运行时是如何安排和运行代码的对了解 `queueMicrotask()` 会非常有作用。
 
 ## JavaScript 执行上下文
 
@@ -118,7 +118,7 @@ greetUser("Veronica");
 
 #### 任务 vs 微任务
 
-一个**任务**就是指计划由标准机制来执行的任何 JavaScript，如程序的初始化、事件触发的回调等。除了使用事件，你还可以使用 {{domxref("setTimeout()")}} 或者 {{domxref("setInterval()")}} 来添加任务。
+一个**任务**就是指计划由标准机制来执行的任何 JavaScript，如程序的初始化、事件触发的回调等。除了使用事件，你还可以使用 {{domxref("Window.setTimeout", "setTimeout()")}} 或者 {{domxref("Window.setInterval", "setInterval()")}} 来添加任务。
 
 任务队列和微任务队列的区别很简单，但却很重要：
 
diff --git a/files/zh-cn/web/api/html_dom_api/microtask_guide/index.md b/files/zh-cn/web/api/html_dom_api/microtask_guide/index.md
index 04adaff6dd73ee..8b93083e3ec4ec 100644
--- a/files/zh-cn/web/api/html_dom_api/microtask_guide/index.md
+++ b/files/zh-cn/web/api/html_dom_api/microtask_guide/index.md
@@ -13,21 +13,21 @@ JavaScript 中的 [promise](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/
 
 为了正确地讨论微任务，首先最好知道什么是一个 JavaScript 任务以及微任务如何区别于任务。这里是一个快速、简单的解释，但若你想了解更多细节，可以阅读这篇文章中的信息 [In depth: Microtasks and the JavaScript runtime environment](/zh-CN/docs/Web/API/HTML_DOM_API/Microtask_guide/In_depth).
 
-### 任务（Tasks）
+### 任务
 
-一个**任务**就是由执行诸如从头执行一段程序、执行一个事件回调或一个 interval/timeout 被触发之类的标准机制而被调度的任意 JavaScript 代码。这些都在**任务队列**（task queue）上被调度。
+一个**任务**（task）就是由执行诸如从头执行一段程序、执行一个事件回调或一个 interval/timeout 被触发之类的标准机制而被调度的任意 JavaScript 代码。这些都在**任务队列**（task queue）上被调度。
 
 在以下时机，任务会被添加到任务队列：
 
 - 一段新程序或子程序被直接执行时（比如从一个控制台，或在一个 {{HTMLElement("script")}} 元素中运行代码）。
 - 触发了一个事件，将其回调函数添加到任务队列时。
-- 执行到一个由 {{domxref("setTimeout()")}} 或 {{domxref("setInterval()")}} 创建的 timeout 或 interval，以致相应的回调函数被添加到任务队列时。
+- 执行到一个由 {{domxref("Window.setTimeout", "setTimeout()")}} 或 {{domxref("Window.setInterval", "setInterval()")}} 创建的 timeout 或 interval，以致相应的回调函数被添加到任务队列时。
 
 事件循环驱动你的代码按照这些任务排队的顺序，一个接一个地处理它们。在事件循环的单次迭代中，将执行任务队列中最旧的可运行任务。之后，微任务将被执行，直到微任务队列为空，然后浏览器可以选择更新渲染。然后浏览器继续进行事件循环的下一次迭代。
 
-### 微任务（Microtasks）
+### 微任务
 
-起初微任务和任务之间的差异看起来不大。它们很相似；都由位于某个队列的 JavaScript 代码组成并在合适的时候运行。但是，只有在迭代开始时队列中存在的任务才会被事件循环一个接一个地运行，这和处理微任务队列是殊为不同的。
+起初微任务（microtask）和任务之间的差异看起来不大。它们很相似；都由位于某个队列的 JavaScript 代码组成并在合适的时候运行。但是，只有在迭代开始时队列中存在的任务才会被事件循环一个接一个地运行，这和处理微任务队列是殊为不同的。
 
 有两点关键的区别。
 
diff --git a/files/zh-cn/web/api/htmltablecellelement/abbr/index.md b/files/zh-cn/web/api/htmltablecellelement/abbr/index.md
new file mode 100644
index 00000000000000..69bd1260d1916a
--- /dev/null
+++ b/files/zh-cn/web/api/htmltablecellelement/abbr/index.md
@@ -0,0 +1,89 @@
+---
+title: HTMLTableCellElement：abbr 属性
+slug: Web/API/HTMLTableCellElement/abbr
+l10n:
+  sourceCommit: 4dec42ed700040565e8af0e14ff104054ebc20f5
+---
+
+{{ APIRef("HTML DOM") }}
+
+{{domxref("HTMLTableCellElement")}} 接口的 **`abbr`** 属性指示与单元格相关联的缩写。如果单元格不是表头单元格 {{HTMLElement("th")}}，则忽略该属性。
+
+它反映 {{HTMLElement("th")}} 元素的 `abbr` 属性。
+
+> [!NOTE]
+> 此属性在浏览器中不具有视觉效果。它添加信息以帮助辅助技术（像屏幕阅读器）能够使用这个缩写。
+
+## 值
+
+一个字符串。
+
+## 示例
+
+此示例将每个第一单元格的行表头相关联的缩写添加为前缀。
+
+### HTML
+
+```html
+<table>
+  <thead>
+    <tr>
+      <th abbr="Maker">制造商</th>
+      <th abbr="Model">汽车型号</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>特斯拉</td>
+      <td>3</td>
+    </tr>
+    <tr>
+      <td>比亚迪</td>
+      <td>海豚</td>
+    </tr>
+    <tr>
+      <td>大众</td>
+      <td>ID.3</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+```css hidden
+table {
+  border-collapse: collapse;
+}
+
+th,
+td,
+table {
+  border: 1px solid black;
+}
+
+button {
+  margin: 1em 1em 1em 0;
+}
+```
+
+### JavaScript
+
+```js
+const rows = document.querySelectorAll("thead tr");
+const cells = rows[0].cells;
+
+for (const cell of cells) {
+  cell.textContent = `${cell.textContent}（${cell.abbr}）`;
+}
+```
+
+### 结果
+
+{{EmbedLiveSample("示例", "100%", 220)}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/web/api/htmltablecellelement/align/index.md b/files/zh-cn/web/api/htmltablecellelement/align/index.md
new file mode 100644
index 00000000000000..1ad54268954f43
--- /dev/null
+++ b/files/zh-cn/web/api/htmltablecellelement/align/index.md
@@ -0,0 +1,41 @@
+---
+title: HTMLTableCellElement：align 属性
+slug: Web/API/HTMLTableCellElement/align
+l10n:
+  sourceCommit: d16706e4e930c57161d473287374a9286c663147
+---
+
+{{APIRef("HTML DOM")}}{{deprecated_header}}
+
+{{domxref("HTMLTableCellElement")}} 接口的 **`align`** 属性是一个指示如何在 {{htmlelement("th")}} 或 {{htmlelement("td")}} 表格单元格水平对齐文本的字符串。
+
+> [!NOTE]
+> 此属性已弃用，应使用 CSS 在单元格中水平对齐文本。使用 CSS {{cssxref("text-align")}} 属性，其用于水平对齐单元格中文本，且优先级更高。
+
+## 值
+
+可能的值：
+
+- `left`
+  - : 将文本向左对齐。使用 `text-align: left` 代替。
+- `right`
+  - : 将文本向右对齐。使用 `text-align: right` 代替。
+- `center`
+  - : 将文本居中对齐。使用 `text-align: center` 代替。
+
+## 示例
+
+使用 CSS `text-align` 替代，{{cssxref("text-align")}} 页面有一个[示例](/zh-CN/docs/Web/CSS/text-align#表格对齐)。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{cssxref("text-align")}}
+- [样式化表格](/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables)
diff --git a/files/zh-cn/web/api/htmltablecellelement/bgcolor/index.md b/files/zh-cn/web/api/htmltablecellelement/bgcolor/index.md
new file mode 100644
index 00000000000000..a879f9a349a347
--- /dev/null
+++ b/files/zh-cn/web/api/htmltablecellelement/bgcolor/index.md
@@ -0,0 +1,39 @@
+---
+title: HTMLTableCellElement：bgColor 属性
+slug: Web/API/HTMLTableCellElement/bgColor
+l10n:
+  sourceCommit: 245715b48674c1729cb63417e4a27628e30ae28c
+---
+
+{{APIRef("HTML DOM")}}{{deprecated_header}}
+
+**`HTMLTableCellElement.bgColor`** 属性用于设置单元格的背景色或者检索已弃用的 [`bgColor`](/zh-CN/docs/Web/HTML/Element/td#bgcolor) 属性的值（如果存在）。
+
+> [!NOTE]
+> 此属性已弃用，且应使用 CSS 设置背景色。使用 {{cssxref("background-color")}} 属性代替。
+
+## 值
+
+可以使用以下值类型之一：
+
+- 命名的颜色，像 `red` 或 `blue`
+- 十六进制代码，像 `#0000dd` 或 `#00d`
+
+> [!NOTE]
+> 这里接受的值是 CSS 颜色值的子集。仅限 {{cssxref("named-color")}} 和 3 位 或 6 位 {{cssxref("hex-color")}}（没有 alpha 通道）。虽然所有 HTML 颜色值在 CSS 中都是有效的，但在另一个方向上并非如此。
+
+## 示例
+
+使用 CSS `background-color` 代替。在 {{cssxref("background-color")}} 页面有个[带有 HTML 表格元素的 `background-color`](/zh-CN/docs/Web/CSS/background-color#着色表) 可用。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("HTMLTableRowElement.bgColor")}}
diff --git a/files/zh-cn/web/api/htmltablecellelement/cellindex/index.md b/files/zh-cn/web/api/htmltablecellelement/cellindex/index.md
new file mode 100644
index 00000000000000..3372348635154c
--- /dev/null
+++ b/files/zh-cn/web/api/htmltablecellelement/cellindex/index.md
@@ -0,0 +1,80 @@
+---
+title: HTMLTableCellElement：cellIndex 属性
+slug: Web/API/HTMLTableCellElement/cellIndex
+l10n:
+  sourceCommit: 3466b077e26ce0293b7b95cba0bd05559c3a3194
+---
+
+{{ APIRef("HTML DOM") }}
+
+{{domxref("HTMLTableCellElement")}} 接口的 **`cellIndex`** 只读属性表示单元格在其所在行（{{htmlelement("tr")}}）中的位置。第一个单元格的索引是 `0`。
+
+## 值
+
+返回单元格的索引，或如果单元格不属于任何行，则返回 `-1`。
+
+## 示例
+
+此示例为 `tbody` 中第一行的所有单元格编号添加标签。
+
+### HTML
+
+```html
+<table>
+  <thead>
+    <tr>
+      <th>商品</th>
+      <th>价格</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>香蕉</td>
+      <td>$2</td>
+    </tr>
+    <tr>
+      <td>大米</td>
+      <td>$2.5</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+```css hidden
+table {
+  border-collapse: collapse;
+}
+
+th,
+td,
+table {
+  border: 1px solid black;
+}
+
+button {
+  margin: 1em 1em 1em 0;
+}
+```
+
+### JavaScript
+
+```js
+const rows = document.querySelectorAll("tbody tr");
+const cells = rows[0].cells;
+
+for (const cell of cells) {
+  cell.textContent = `${cell.textContent}（单元格 #${cell.cellIndex}）`;
+}
+```
+
+### 结果
+
+{{EmbedLiveSample("示例")}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/web/api/htmltablecellelement/ch/index.md b/files/zh-cn/web/api/htmltablecellelement/ch/index.md
new file mode 100644
index 00000000000000..334c7295d8949c
--- /dev/null
+++ b/files/zh-cn/web/api/htmltablecellelement/ch/index.md
@@ -0,0 +1,31 @@
+---
+title: HTMLTableCellElement：ch 属性
+slug: Web/API/HTMLTableCellElement/ch
+l10n:
+  sourceCommit: d16706e4e930c57161d473287374a9286c663147
+---
+
+{{APIRef("HTML DOM")}}{{deprecated_header}}
+
+{{domxref("HTMLTableCellElement")}} 接口的 **`ch`** 属性什么都不做，它反映单元格元素的 `char` 属性。
+
+> [!NOTE]
+> 此属性旨在支持将表格单元格内容对齐到特定字符（通常是小数点），但浏览器从未实现过。
+>
+> 要实现这种对齐，请注意 {{cssxref("text-align")}} CSS 属性对字符串值的支持。
+
+## 值
+
+单个字符。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{cssxref("text-align")}}
diff --git a/files/zh-cn/web/api/htmltablecellelement/choff/index.md b/files/zh-cn/web/api/htmltablecellelement/choff/index.md
new file mode 100644
index 00000000000000..53ea58c259124b
--- /dev/null
+++ b/files/zh-cn/web/api/htmltablecellelement/choff/index.md
@@ -0,0 +1,31 @@
+---
+title: HTMLTableCellElement：chOff 属性
+slug: Web/API/HTMLTableCellElement/chOff
+l10n:
+  sourceCommit: d16706e4e930c57161d473287374a9286c663147
+---
+
+{{APIRef("HTML DOM")}}{{deprecated_header}}
+
+{{domxref("HTMLTableCellElement")}} 接口的 **`chOff`** 属性什么都不做，它反映单元格元素的 `charoff` 属性。
+
+> [!NOTE]
+> 此属性旨在支持将表格单元格内容对齐到特定字符（通常是小数点），但浏览器从未实现过。
+>
+> 要实现这种对齐，请注意 {{cssxref("text-align")}} CSS 属性对字符串值的支持。
+
+## 值
+
+一个数字。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{cssxref("text-align")}}
diff --git a/files/zh-cn/web/api/htmltablecellelement/colspan/index.md b/files/zh-cn/web/api/htmltablecellelement/colspan/index.md
new file mode 100644
index 00000000000000..ad63edbe5374bd
--- /dev/null
+++ b/files/zh-cn/web/api/htmltablecellelement/colspan/index.md
@@ -0,0 +1,113 @@
+---
+title: HTMLTableCellElement：colSpan 属性
+slug: Web/API/HTMLTableCellElement/colSpan
+l10n:
+  sourceCommit: d16706e4e930c57161d473287374a9286c663147
+---
+
+{{ APIRef("HTML DOM") }}
+
+{{domxref("HTMLTableCellElement")}} 接口的 **`colSpan`** 只读属性表示此单元格必须跨越的列数；这允许单元格在表格的多列之间占据空间。它反映 [`colspan`](/zh-CN/docs/Web/HTML/Element/td#colspan) 属性。
+
+## 值
+
+一个表示列数的正数。
+
+> [!NOTE]
+> 当设置新值时，该值会被*钳制*到最接近的严格正数。
+
+## 示例
+
+示例提供了两个按钮来修改主体第一个单元格的列跨度。
+
+### HTML
+
+```html
+<table>
+  <thead>
+    <tr>
+      <th>列 1</th>
+      <th>列 2</th>
+      <th>列 3</th>
+      <th>列 4</th>
+      <th>列 5</th>
+      <th>列 6</th>
+      <th>列 7</th>
+      <th>列 8</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td colspan="2">1</td>
+      <td>2</td>
+      <td>3</td>
+      <td>4</td>
+      <td>5</td>
+      <td>6</td>
+      <td>7</td>
+      <td>8</td>
+    </tr>
+  </tbody>
+</table>
+<button id="increase">增加列跨度</button>
+<button id="decrease">减少列跨度</button>
+<div>第一个单元格跨越 <output>2</output> 列。</div>
+```
+
+```css hidden
+table {
+  border-collapse: collapse;
+}
+
+th,
+td,
+table {
+  border: 1px solid black;
+}
+
+button {
+  margin: 1em 1em 1em 0;
+}
+```
+
+### JavaScript
+
+```js
+// 获取相关接口元素
+const cell = document.querySelectorAll("tbody tr td")[0];
+const output = document.querySelectorAll("output")[0];
+
+const increaseButton = document.getElementById("increase");
+const decreaseButton = document.getElementById("decrease");
+
+increaseButton.addEventListener("click", () => {
+  cell.colSpan = cell.colSpan + 1;
+
+  // 更新显示
+  output.textContent = cell.colSpan;
+});
+
+decreaseButton.addEventListener("click", () => {
+  cell.colSpan = cell.colSpan - 1;
+
+  // 更新显示
+  output.textContent = cell.colSpan;
+});
+```
+
+### 结果
+
+{{EmbedLiveSample("示例", "100%", 175)}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("HTMLTableCellElement.rowSpan")}}
+- {{domxref("HTMLTableColElement.span")}}
diff --git a/files/zh-cn/web/api/htmltablecellelement/headers/index.md b/files/zh-cn/web/api/htmltablecellelement/headers/index.md
new file mode 100644
index 00000000000000..6dd4494a365166
--- /dev/null
+++ b/files/zh-cn/web/api/htmltablecellelement/headers/index.md
@@ -0,0 +1,87 @@
+---
+title: HTMLTableCellElement：headers 属性
+slug: Web/API/HTMLTableCellElement/headers
+l10n:
+  sourceCommit: 3466b077e26ce0293b7b95cba0bd05559c3a3194
+---
+
+{{ APIRef("HTML DOM") }}
+
+{{domxref("HTMLTableCellElement")}} 接口的 **`headers`** 属性包含一组为此特定单元格充当*表头*的 {{HTMLElement("th")}} 元素的 ID 列表。
+
+## 值
+
+一个包含由空格分割的 ID 的字符串。
+
+## 示例
+
+此示例列出表格中最后一次被点击的单元格的 ID：
+
+### HTML
+
+```html
+<table>
+  <tr>
+    <th rowspan="2" id="h">家庭作业（ID = h）</th>
+    <th colspan="3" id="e">考试（ID = e）</th>
+    <th colspan="3" id="p">项目（ID = p）</th>
+  </tr>
+  <tr>
+    <th id="e1" headers="e">1（ID = e1）</th>
+    <th id="e2" headers="e">2（ID = e2）</th>
+    <th id="ef" headers="e">期末（ID = ef）</th>
+    <th id="p1" headers="p">1（ID = p1）</th>
+    <th id="p2" headers="p">2（ID = p2）</th>
+    <th id="pf" headers="p">期末（ID = pf）</th>
+  </tr>
+  <tr>
+    <td headers="h">15%</td>
+    <td headers="e e1">15%</td>
+    <td headers="e e2">15%</td>
+    <td headers="e ef">20%</td>
+    <td headers="p p1">10%</td>
+    <td headers="p p2">10%</td>
+    <td headers="p pf">15%</td>
+  </tr>
+</table>
+最后一次点击的单元格的表头 ID：<output>无</output>。
+```
+
+```css hidden
+table {
+  border-collapse: collapse;
+}
+
+th,
+td,
+table {
+  border: 1px solid black;
+}
+
+button {
+  margin: 1em 1em 1em 0;
+}
+```
+
+### JavaScript
+
+```js
+const table = document.querySelector("table");
+const output = document.querySelector("output");
+
+table.addEventListener("click", (ev) => {
+  output.textContent = ev.target.headers ? ev.target.headers : "无";
+});
+```
+
+### 结果
+
+{{EmbedLiveSample("示例")}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/web/api/htmltablecellelement/index.md b/files/zh-cn/web/api/htmltablecellelement/index.md
new file mode 100644
index 00000000000000..8b5eeff07833b1
--- /dev/null
+++ b/files/zh-cn/web/api/htmltablecellelement/index.md
@@ -0,0 +1,69 @@
+---
+title: HTMLTableCellElement
+slug: Web/API/HTMLTableCellElement
+l10n:
+  sourceCommit: d16706e4e930c57161d473287374a9286c663147
+---
+
+{{ APIRef("HTML DOM") }}
+
+**`HTMLTableCellElement`** 接口提供用于操作 HTML 文档中表格单元格、表头单元格（{{HTMLElement("th")}}）或者数据单元格（{{HTMLElement("td")}}）的布局和呈现的特定属性和方法（除了常规 {{domxref("HTMLElement")}} 接口之外，它还可以通过继承来使用）。
+
+{{InheritanceDiagram}}
+
+## 实例属性
+
+_从其父接口 {{domxref("HTMLElement")}} 继承属性。_
+
+- {{domxref("HTMLTableCellElement.abbr")}}
+  - : 一个可以使用在 `<th>` 元素（不可用于 {{HTMLElement("td")}}）的字符串，它为表头单元格指定备选的标签。此标签可以在其他上下文中使用，例如在描述适用于数据单元格的表头时。它特别用于为屏幕阅读器提供一个更短的术语；并且是一个有价值的无障碍工具。通常，`abbr` 的值是一个缩写或首字母缩略词，但也可以是任何在上下文中合适的文本。
+- {{domxref("HTMLTableCellElement.cellIndex")}} {{ReadOnlyInline}}
+  - : 一个表示单元格在其所属的 {{HTMLElement("tr")}} 元素的 {{domxref("HTMLTableRowElement.cells", "cells")}} 集合中的位置。如果单元格不属于任何 `<tr>`，则返回 `-1`。
+- {{domxref("HTMLTableCellElement.colSpan")}}
+  - : 一个指示此单元格必须跨越列数的正数；这允许单元格在表格的多列之间占据空间。它反映 [`colspan`](/zh-CN/docs/Web/HTML/Element/td#colspan) 属性。
+- {{domxref("HTMLTableCellElement.headers")}} {{ReadOnlyInline}}
+  - : 一个描述与单元格相关联的由 {{HTMLElement("th")}} 的 `id` 构成的表头列表的 {{domxref("DOMTokenList")}}。它反映 [`headers`](/zh-CN/docs/Web/HTML/Element/td#headers) 属性。
+- {{domxref("HTMLTableCellElement.rowSpan")}}
+  - : 一个指示此单元格必须跨越行数的正数；这允许单元格在表格的多行之间占据空间。它反映 [`rowspan`](/zh-CN/docs/Web/HTML/Element/td#rowspan) 属性。
+- {{domxref("HTMLTableCellElement.scope")}}
+  - : 一个指示 {{HTMLElement("th")}} 单元格范围的字符串。`scope` 可能的值有：`col`、`colgroup`、`row`、`rowgroup` 或空字符串（`""`）。
+
+## 实例方法
+
+_没有特定的方法，从其父接口 {{domxref("HTMLElement")}} 继承方法。_
+
+## 已弃用的属性
+
+> [!WARNING]
+> 这些属性已弃用，不应再使用。它们被记录下来主要是为了帮助理解旧的代码库。
+
+- {{domxref("HTMLTableCellElement.align")}} {{deprecated_inline}}
+  - : 一个包含 [`align`](/zh-CN/docs/Web/HTML/Element/td#align) 属性的值的字符串（如果存在），或者如果未设置，则为空字符串。其用于设置元素内容相对于周围 `"left"`、`"right"` 和 `"center"` 上下文的对齐方式。请使用 CSS {{cssxref("text-align")}} 属性代替。
+- {{domxref("HTMLTableCellElement.axis")}} {{deprecated_inline}}
+  - : 一个包含虚拟中单元格分组名称的字符串。它反映已过时的 [`axis`](/zh-CN/docs/Web/HTML/Element/td#axis) 属性。
+- {{domxref("HTMLTableCellElement.bgColor")}} {{deprecated_inline}}
+  - : 一个包含单元格背景色的字符串。它反映已过时的 [`bgColor`](/zh-CN/docs/Web/HTML/Element/td#bgcolor) 属性。
+- {{domxref("HTMLTableCellElement.ch")}} {{deprecated_inline}}
+  - : 一个包含单字符的字符串。这个字符是用来对齐某一列所有单元格内容的基准。它反映 [`char`](/zh-CN/docs/Web/HTML/Element/td#char) 并默认为与语言相关的小数点，例如，英语的默认值为 `'.'`，法语的默认值为 `','`。此属性是可选的，而且没有得到很好的支持。
+- {{domxref("HTMLTableCellElement.chOff")}} {{deprecated_inline}}
+  - : 一个包含整数的字符串，表示由 `HTMLTableRowElement.ch` 定义的字符的右侧（对于从左到右的文本；或者对于从右到左的文本的左侧）必须保留多少个字符。此属性是可选的，并没有得到很好的支持。
+- {{domxref("HTMLTableCellElement.height")}} {{deprecated_inline}}
+  - : 一个包含单元格提示高度的像素长度的字符串。此属性反映已过时的 [`height`](/zh-CN/docs/Web/HTML/Element/td#height) 属性。
+- {{domxref("HTMLTableCellElement.noWrap")}} {{deprecated_inline}}
+  - : 一个反映 `nowrap` 属性，且支持是否单元格内容可以分成几行的布尔值。
+- {{domxref("HTMLTableCellElement.vAlign")}} {{deprecated_inline}}
+  - : 一个表示枚举值的字符串，指示单元格内容必须如何对齐。它反映 [`valign`](/zh-CN/docs/Web/HTML/Element/td#valign) 属性，可以为以下值之一：`"top"`、`"middle"`、`"bottom"` 或 `"baseline"`。请使用 CSS {{cssxref("vertical-align")}} 属性代替。
+- {{domxref("HTMLTableCellElement.width")}} {{deprecated_inline}}
+  - : 如果可能的话，是一个指定应绘制单元格宽度的像素数的字符串。此属性反映已过时的 [`width`](/zh-CN/docs/Web/HTML/Element/td#width) 属性。使用 CSS {{cssxref("width")}} 属性代替。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- 实现此接口的 HTML 元素：{{HTMLElement("tr")}} 和 {{HTMLElement("td")}}。
diff --git a/files/zh-cn/web/api/htmltablecellelement/nowrap/index.md b/files/zh-cn/web/api/htmltablecellelement/nowrap/index.md
new file mode 100644
index 00000000000000..0694774053e8a5
--- /dev/null
+++ b/files/zh-cn/web/api/htmltablecellelement/nowrap/index.md
@@ -0,0 +1,29 @@
+---
+title: HTMLTableCellElement：noWrap 属性
+slug: Web/API/HTMLTableCellElement/noWrap
+l10n:
+  sourceCommit: d16706e4e930c57161d473287374a9286c663147
+---
+
+{{APIRef("HTML DOM API")}}{{deprecated_header}}
+
+{{domxref("HTMLTableCellElement")}} 接口的 **`noWrap`** 属性返回一个指示单元格的文本是否可以换行的布尔值。
+
+> [!NOTE]
+> 此属性已弃用，且应使用值为 `nowrap` 的 CSS {{cssxref("white-space")}} 属性代替。
+
+## 值
+
+一个布尔值。
+
+## 示例
+
+使用 CSS `white-space` 代替，在 {{cssxref("white-space")}} 页面有一个可用的[示例](/zh-CN/docs/Web/CSS/white-space#控制表格中的换行)。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/web/api/htmltablecellelement/rowspan/index.md b/files/zh-cn/web/api/htmltablecellelement/rowspan/index.md
new file mode 100644
index 00000000000000..91225b9a3dd87b
--- /dev/null
+++ b/files/zh-cn/web/api/htmltablecellelement/rowspan/index.md
@@ -0,0 +1,114 @@
+---
+title: HTMLTableCellElement：rowSpan 属性
+slug: Web/API/HTMLTableCellElement/rowSpan
+l10n:
+  sourceCommit: d16706e4e930c57161d473287374a9286c663147
+---
+
+{{ APIRef("HTML DOM") }}
+
+{{domxref("HTMLTableCellElement")}} 接口的 **`rowSpan`** 只读属性表示此单元格必须跨越的行数；这允许单元格在表格的多行之间占据空间。它反映 [`rowSpan`](/zh-CN/docs/Web/HTML/Element/td#rowSpan) 属性。
+
+## 值
+
+一个表示行数的正数。如果是 `0`，则表示该列中所有剩余行。
+
+> [!NOTE]
+> 当设置新值时，任何不是 0 的值会被*钳制*到最接近的严格正数。
+
+## 示例
+
+示例提供了两个按钮来修改主体第一个单元格的行跨度。
+
+### HTML
+
+```html
+<table>
+  <thead>
+    <tr>
+      <th>列 1</th>
+      <th>列 2</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>1</td>
+      <td>1</td>
+    </tr>
+    <tr>
+      <td rowspan="2">2</td>
+      <td>2</td>
+    </tr>
+    <tr>
+      <td>3</td>
+      <td>3</td>
+    </tr>
+    <tr>
+      <td>4</td>
+      <td>4</td>
+    </tr>
+  </tbody>
+</table>
+<button id="increase">增加列跨度</button>
+<button id="decrease">减少列跨度</button>
+<div>第一个列的第二个单元格跨越<output> 2 </output>行。</div>
+```
+
+```css hidden
+table {
+  border-collapse: collapse;
+}
+
+th,
+td,
+table {
+  border: 1px solid black;
+}
+
+button {
+  margin: 1em 1em 1em 0;
+}
+```
+
+### JavaScript
+
+```js
+// 获取相关接口元素
+const row = document.querySelectorAll("tbody tr")[1];
+const cell = row.cells[0];
+const output = document.querySelectorAll("output")[0];
+
+const increaseButton = document.getElementById("increase");
+const decreaseButton = document.getElementById("decrease");
+
+increaseButton.addEventListener("click", () => {
+  cell.rowSpan = cell.rowSpan + 1;
+
+  // 更新显示
+  output.textContent = ` ${cell.rowSpan} `;
+});
+
+decreaseButton.addEventListener("click", () => {
+  cell.rowSpan = cell.rowSpan - 1;
+
+  // 更新显示
+  output.textContent = `${cell.rowSpan == 0 ? "所有剩余的" : " " + cell.rowSpan + " "}`;
+});
+```
+
+### 结果
+
+{{EmbedLiveSample("示例", "100%", 200)}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("HTMLTableCellElement.colSpan")}}
+- {{domxref("HTMLTableColElement.span")}}
diff --git a/files/zh-cn/web/api/htmltablecellelement/scope/index.md b/files/zh-cn/web/api/htmltablecellelement/scope/index.md
new file mode 100644
index 00000000000000..8b6cc2753b17e7
--- /dev/null
+++ b/files/zh-cn/web/api/htmltablecellelement/scope/index.md
@@ -0,0 +1,104 @@
+---
+title: HTMLTableCellElement：scope 属性
+slug: Web/API/HTMLTableCellElement/scope
+l10n:
+  sourceCommit: 4dec42ed700040565e8af0e14ff104054ebc20f5
+---
+
+{{ APIRef("HTML DOM") }}
+
+{{domxref("HTMLTableCellElement")}} 接口的 **`scope`** 属性指示 {{HTMLElement("th")}} 单元格的范围。
+
+使用 `scope` 属性对表头单元格进行配置，以应用于指定的行或者列，或者应用于当前行组（即相同的祖先 {{HTMLElement("thead")}}、{{HTMLElement("tbody")}} 或 {{HTMLElement("tfoot")}} 元素）内尚未指定范围的单元格。如果未为 `scope` 指定值，则表头不会以这种方式与单元格相关联。`scope` 的允许值有：
+
+> [!NOTE]
+> 此属性在浏览器中不具有视觉效果。它添加语义信息以辅助技术（像屏幕阅读器）以更连贯的方式呈现表格。
+
+## 值
+
+以下值之一：
+
+- `col`
+  - : 表头单元格适用于同一列（如果同时使用 `colspan`，则为列组）下单元格，直至列尾或该列中另一个 `<th>` 设定新的范围。
+- `colgroup`
+  - : 表头单元格适用于当前列组中所有尚未设定范围的单元格。此值仅在单元格位于列组时允许使用。
+- `row`
+  - : 表头单元格适用于同一行（如果同时使用 `rowspan`，则为行组）中的单元格，直至行尾或同一行中另一个 `<th>` 设定新的范围。
+- `rowgroup`
+  - : 表头单元格适用于当前行组中所有尚未设定范围的单元格。此值仅在单元格位于行组时允许使用。
+- 空字符串（`""`）
+  - : 表头单元格没有预定义的范围；用户代理将根据上下文线索确定范围。
+
+## 示例
+
+此示例为 `tbody` 第一行的所有单元格编号添加标签。
+
+### HTML
+
+```html
+<table>
+  <caption>
+    最高的大坝
+  </caption>
+  <tr>
+    <td></td>
+    <th scope="col">大坝</th>
+    <th scope="col">国家</th>
+    <th scope="col">高度</th>
+  </tr>
+  <tr>
+    <td>1.</td>
+    <th scope="row">锦屏一级水电站</th>
+    <td>中国</td>
+    <td>305 m</td>
+  </tr>
+  <tr>
+    <td>2.</td>
+    <th scope="row">努列克坝</th>
+    <td>塔吉克斯坦</td>
+    <td>300 m</td>
+  </tr>
+  <tr>
+    <td>3.</td>
+    <th scope="row">两河口水电站</th>
+    <td>中国</td>
+    <td>295 m</td>
+  </tr>
+  <tr>
+    <td>4.</td>
+    <th scope="row">小湾水电站</th>
+    <td>中国</td>
+    <td>292 m</td>
+  </tr>
+  <tr>
+    <td>5.</td>
+    <th scope="row">白鹤滩水电站</th>
+    <td>中国</td>
+    <td>289 m</td>
+  </tr>
+  <tr>
+    <td>6.</td>
+    <th scope="row">溪洛渡水电站</th>
+    <td>中国</td>
+    <td>285.5 m</td>
+  </tr>
+  <tr>
+    <td>7.</td>
+    <th scope="row">大迪克桑斯坝</th>
+    <td>瑞士</td>
+    <td>285 m</td>
+  </tr>
+</table>
+```
+
+### 结果
+
+{{EmbedLiveSample("示例", "100%", 260)}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/web/api/htmltablecellelement/valign/index.md b/files/zh-cn/web/api/htmltablecellelement/valign/index.md
new file mode 100644
index 00000000000000..420f40b77ce156
--- /dev/null
+++ b/files/zh-cn/web/api/htmltablecellelement/valign/index.md
@@ -0,0 +1,45 @@
+---
+title: HTMLTableCellElement：vAlign 属性
+slug: Web/API/HTMLTableCellElement/vAlign
+l10n:
+  sourceCommit: d16706e4e930c57161d473287374a9286c663147
+---
+
+{{APIRef("HTML DOM")}}{{deprecated_header}}
+
+{{domxref("HTMLTableCellElement")}} 接口的 **`vAlign`** 属性是一个指示如何在表格 {{htmlelement("th")}} 或 {{htmlelement("td")}} 表格单元格中垂直对齐文本的字符串。
+
+> [!NOTE]
+> 此属性已弃用。请使用 CSS {{cssxref("vertical-align")}} 属性来垂直对齐分段单元格中的文本。
+
+## 值
+
+可能的值有：`"top"`、`"middle"`、`"bottom"` 或 `"baseline"`。
+
+- `top`
+  - : 将文本与单元格顶部对齐。使用 `vertical-align: top` 代替。
+- `center`
+  - : 将文本与单元格垂直居中对齐，`middle` 的同义词。使用 `vertical-align: middle` 代替。
+- `middle`
+  - : 将文本与单元格垂直居中对齐。使用 `vertical-align: middle` 代替。
+- `bottom`
+  - : 将文本与单元格底部对齐。使用 `vertical-align:  bottom` 代替。
+- `baseline`
+  - : 与 `top` 相似，但使文本的基线贴近顶部，这样字符的任何部分都不会超出单元格。
+
+## 示例
+
+使用 CSS {{cssxref("vertical-align")}} 替代，它的优先级更高，如[垂直对齐表格单元格](/zh-CN/docs/Web/CSS/vertical-align#表格单元格中的垂直对齐)示例所示。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{cssxref("vertical-align")}}
+- [样式化表格](/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables)
diff --git a/files/zh-cn/web/api/htmltablecolelement/align/index.md b/files/zh-cn/web/api/htmltablecolelement/align/index.md
new file mode 100644
index 00000000000000..c97f8f6769d598
--- /dev/null
+++ b/files/zh-cn/web/api/htmltablecolelement/align/index.md
@@ -0,0 +1,47 @@
+---
+title: HTMLTableColElement：align 属性
+slug: Web/API/HTMLTableColElement/align
+l10n:
+  sourceCommit: d16706e4e930c57161d473287374a9286c663147
+---
+
+{{APIRef("HTML DOM")}}{{deprecated_header}}
+
+{{domxref("HTMLTableColElement")}} 接口的 **`align`** 属性是一个指示如何在表格 {{htmlelement("col")}} 列元素中水平对齐文本的字符串。
+
+> [!NOTE]
+> 此属性已弃用，应使用 CSS 在单元格中水平对齐文本。使用 CSS {{cssxref("text-align")}} 属性，其用于水平对齐单元格中文本，且优先级更高。
+>
+> 由于 {{htmlelement("td")}} 不是 {{htmlelement("col")}} 的子元素，因此不能直接在 {{HTMLElement("col")}} 上设置它，需要使用 `td:nth-last-child(n)` 或类似值（`n` 是列号，从末尾开始计数）来选择列的单元格。
+
+## 值
+
+可能的值有：
+
+- `left`
+  - : 将文本向左对齐。使用直接应用于 {{HTMLElement("td")}} 或 {{HTMLElement("th")}} 的 `text-align: left` 代替。
+- `right`
+  - : 将文本向右对齐。使用直接应用于 `<td>` 或 `<th>` 的 `text-align: right` 代替。
+- `center`
+  - : 将文本居中对齐。使用 `text-align: center` 代替。
+
+## 示例
+
+在 {{htmlelement("td")}} 和 {{htmlelement("th")}} 元素上使用 CSS `text-align`。由于列的 {{htmlelement("td")}} 元素不是 {{htmlelement("col")}} 的子元素，在 HTML 中设置 `align` 属性或在 CSS 中对 {{HTMLElement("col")}} 元素设置 `text-align` 属性将不起作用。相反，使用 [`:is(td, tr):nth-child(n)`](/zh-CN/docs/Web/CSS/:nth-child) 选择列的单元格，其中 `n` 是列号，或类似值。
+
+{{cssxref(":nth-child()")}} 页面有一个[示例](/zh-CN/docs/Web/CSS/:nth-child#为表格列添加样式)。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{cssxref("text-align")}}
+- {{cssxref(":nth-child()")}}
+- {{cssxref(":nth-last-child()")}}
+- [样式化表格](/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables)
diff --git a/files/zh-cn/web/api/htmltablecolelement/ch/index.md b/files/zh-cn/web/api/htmltablecolelement/ch/index.md
new file mode 100644
index 00000000000000..fd707c8d847f74
--- /dev/null
+++ b/files/zh-cn/web/api/htmltablecolelement/ch/index.md
@@ -0,0 +1,31 @@
+---
+title: HTMLTableColElement：ch 属性
+slug: Web/API/HTMLTableColElement/ch
+l10n:
+  sourceCommit: d16706e4e930c57161d473287374a9286c663147
+---
+
+{{APIRef("HTML DOM")}}{{deprecated_header}}
+
+{{domxref("HTMLTableColElement")}} 接口的 **`ch`** 属性什么都不做，它反映 {{HTMLElement("col")}} 元素的 `char` 属性。
+
+> [!NOTE]
+> 此属性旨在支持将表格单元格内容对齐到特定字符（通常是小数点），但浏览器从未实现过。
+>
+> 要实现这种对齐，请注意 {{cssxref("text-align")}} CSS 属性对字符串值的支持。
+
+## 值
+
+单个字符。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{cssxref("text-align")}}
diff --git a/files/zh-cn/web/api/htmltablecolelement/choff/index.md b/files/zh-cn/web/api/htmltablecolelement/choff/index.md
new file mode 100644
index 00000000000000..c1eb5b5f682004
--- /dev/null
+++ b/files/zh-cn/web/api/htmltablecolelement/choff/index.md
@@ -0,0 +1,31 @@
+---
+title: HTMLTableColElement：chOff 属性
+slug: Web/API/HTMLTableColElement/chOff
+l10n:
+  sourceCommit: d16706e4e930c57161d473287374a9286c663147
+---
+
+{{APIRef("HTML DOM")}}{{deprecated_header}}
+
+{{domxref("HTMLTableColElement")}} 接口的 **`chOff`** 属性什么都不做，它反映 {{HTMLElement("col")}} 元素的 `charoff` 属性。
+
+> [!NOTE]
+> 此属性旨在支持将表格单元格内容对齐到特定字符（通常是小数点），但浏览器从未实现过。
+>
+> 要实现这种对齐，请注意 {{cssxref("text-align")}} CSS 属性对字符串值的支持。
+
+## 值
+
+一个整数。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{cssxref("text-align")}}
diff --git a/files/zh-cn/web/api/htmltablecolelement/index.md b/files/zh-cn/web/api/htmltablecolelement/index.md
new file mode 100644
index 00000000000000..368e0330de8b45
--- /dev/null
+++ b/files/zh-cn/web/api/htmltablecolelement/index.md
@@ -0,0 +1,45 @@
+---
+title: HTMLTableColElement
+slug: Web/API/HTMLTableColElement
+l10n:
+  sourceCommit: 61c822f0731f674d6a2551716ad3f271c22fe837
+---
+
+{{ APIRef("HTML DOM") }}
+
+**`HTMLTableColElement`** 接口提供用于操作表格单个列元素或列组元素的特定属性。
+
+{{InheritanceDiagram}}
+
+## 实例属性
+
+_从其父接口 {{domxref("HTMLElement")}} 继承属性。_
+
+- {{domxref("HTMLTableColElement.align")}} {{deprecated_inline}}
+  - : 一个表示列中单元格数据水平对齐的字符串。
+- {{domxref("HTMLTableColElement.ch")}} {{deprecated_inline}}
+  - : 一个表示单元格数据对齐字符的字符串。
+- {{domxref("HTMLTableColElement.chOff")}} {{deprecated_inline}}
+  - : 一个表示对齐字符偏移量的字符串。
+- {{domxref("HTMLTableColElement.span")}}
+  - : 一个反映 [`span`](/zh-CN/docs/Web/HTML/Element/col#span) HTML 属性的正数，指示要应用此对象属性的列数。
+- {{domxref("HTMLTableColElement.vAlign")}} {{deprecated_inline}}
+  - : 一个表示列中单元格数据垂直对齐的字符串。
+- {{domxref("HTMLTableColElement.width")}} {{deprecated_inline}}
+  - : 一个表示默认列宽的字符串。
+
+## 实例方法
+
+_没有特定的方法，从其父接口 {{domxref("HTMLElement")}} 继承方法。_
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- 实现此接口的 HTML 元素：{{HTMLElement("col")}} 和 {{HTMLElement("colgroup")}}。
diff --git a/files/zh-cn/web/api/htmltablecolelement/span/index.md b/files/zh-cn/web/api/htmltablecolelement/span/index.md
new file mode 100644
index 00000000000000..6994836af4288b
--- /dev/null
+++ b/files/zh-cn/web/api/htmltablecolelement/span/index.md
@@ -0,0 +1,116 @@
+---
+title: HTMLTableColElement：span 属性
+slug: Web/API/HTMLTableColElement/span
+l10n:
+  sourceCommit: d16706e4e930c57161d473287374a9286c663147
+---
+
+{{ APIRef("HTML DOM") }}
+
+{{domxref("HTMLTableColElement")}} 接口的 **`span`** 只读属性表示 {{htmlelement("col")}} 或 {{htmlelement("colgroup")}} 必须横跨的列数；这使得该列占据表中多列的空间。它反映 [`span`](/zh-CN/docs/Web/HTML/Element/col#span) 属性。
+
+## 值
+
+一个表示列数的正数。
+
+> [!NOTE]
+> 设置新值时，该值将被*限制为*最接近的严格正数（最多 1000）。
+
+## 示例
+
+示例提供了两个按钮来修正主体第一个单元格的列跨度。
+
+### HTML
+
+```html
+<table>
+  <colgroup>
+    <col />
+    <col span="2" class="multiColumn" />
+  </colgroup>
+  <thead>
+    <th></th>
+    <th scope="col">C1</th>
+    <th scope="col">C2</th>
+    <th scope="col">C3</th>
+    <th scope="col">C4</th>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">行 1</th>
+      <td>cell</td>
+      <td>cell</td>
+      <td>cell</td>
+      <td>cell</td>
+    </tr>
+  </tbody>
+</table>
+<button id="increase">增加列跨度</button>
+<button id="decrease">减少列跨度</button>
+<div>第一个 &lt;col&gt; 横跨 <output>2</output> 个实际列。</div>
+```
+
+```css hidden
+table {
+  border-collapse: collapse;
+}
+
+th,
+td,
+table {
+  border: 1px solid black;
+}
+
+button {
+  margin: 1em 1em 1em 0;
+}
+```
+
+### CSS
+
+```css
+.multiColumn {
+  background-color: #d7d9f2;
+}
+```
+
+### JavaScript
+
+```js
+// 获取相关接口元素
+const col = document.querySelectorAll("col")[1];
+const output = document.querySelectorAll("output")[0];
+
+const increaseButton = document.getElementById("increase");
+const decreaseButton = document.getElementById("decrease");
+
+increaseButton.addEventListener("click", () => {
+  col.span = col.span + 1;
+
+  // 更新显示
+  output.textContent = col.span;
+});
+
+decreaseButton.addEventListener("click", () => {
+  col.span = col.span - 1;
+
+  // 更新显示
+  output.textContent = col.span;
+});
+```
+
+### 结果
+
+{{EmbedLiveSample("示例", "100%", 175)}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("HTMLTableCellElement.colSpan")}}
diff --git a/files/zh-cn/web/api/htmltablecolelement/valign/index.md b/files/zh-cn/web/api/htmltablecolelement/valign/index.md
new file mode 100644
index 00000000000000..62492bdb640089
--- /dev/null
+++ b/files/zh-cn/web/api/htmltablecolelement/valign/index.md
@@ -0,0 +1,50 @@
+---
+title: HTMLTableColElement：vAlign 属性
+slug: Web/API/HTMLTableColElement/vAlign
+l10n:
+  sourceCommit: bb48907e64eb4bf60f17efd7d39b46c771d220a0
+---
+
+{{APIRef("HTML DOM")}}{{deprecated_header}}
+
+{{domxref("HTMLTableColElement")}} 接口的 **`vAlign`** 属性是一个指示如何在表格 {{htmlelement("col")}} 列元素中垂直对齐文本的字符串。
+
+> [!NOTE]
+> 此属性已弃用，应使用 CSS 在表格列中垂直对齐文本。使用 CSS {{cssxref("vertical-align")}} 属性，其用于垂直对齐列单元格中文本，且优先级更高。
+>
+> 由于 {{htmlelement("td")}} 不是 {{htmlelement("col")}} 的子元素，因此不能直接在 {{HTMLElement("col")}} 上设置它，需要使用 `td:nth-child(n)` 或类似值（`n` 是列号）来选择列的单元格。
+
+## 值
+
+可能的值有：`"top"`、`"middle"`、`"bottom"` 或 `"baseline"`。
+
+- `top`
+  - : 将文本与单元格顶部对齐。使用 `vertical-align: top` 代替。
+- `center`
+  - : 将文本与单元格垂直居中对齐，`middle` 的同义词。使用 `vertical-align: middle` 代替。
+- `middle`
+  - : 将文本与单元格垂直居中对齐。使用 `vertical-align: middle` 代替。
+- `bottom`
+  - : 将文本与单元格底部对齐。使用 `vertical-align: bottom` 代替。
+- `baseline`
+  - : 与 `top` 相似，但使文本的基线贴近顶部，这样字符的任何部分都不会超出单元格。
+
+## 示例
+
+使用 CSS `vertical-align`。由于 {{htmlelement("td")}} 不是 {{htmlelement("col")}} 的子元素，因此不能直接在 {{HTMLElement("col")}} 上设置它，需要使用 `td:nth-child(n)` 或类似值（`n` 是列号）来选择列的单元格。
+
+{{cssxref(":nth-child()")}} 页面有一个[示例](/zh-CN/docs/Web/CSS/:nth-child#为表格列添加样式)。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{cssxref("vertical-align")}}
+- {{cssxref(":nth-child()")}}
+- [样式化表格](/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables)
diff --git a/files/zh-cn/web/api/htmltablesectionelement/valign/index.md b/files/zh-cn/web/api/htmltablesectionelement/valign/index.md
index 739f9882e3d6e4..780206f84b399d 100644
--- a/files/zh-cn/web/api/htmltablesectionelement/valign/index.md
+++ b/files/zh-cn/web/api/htmltablesectionelement/valign/index.md
@@ -29,7 +29,7 @@ l10n:
 
 ## 示例
 
-使用 CSS {{cssxref("vertical-align")}} 替代，它的优先级更高，如[垂直对齐表格单元格](/zh-CN/docs/Web/CSS/vertical-align#vertical_alignment_in_a_table_cell)示例所示。
+使用 CSS {{cssxref("vertical-align")}} 替代，它的优先级更高，如[垂直对齐表格单元格](/zh-CN/docs/Web/CSS/vertical-align#表格单元格中的垂直对齐)示例所示。
 
 ## 规范
 
diff --git a/files/zh-cn/web/api/imagebitmap/index.md b/files/zh-cn/web/api/imagebitmap/index.md
index 061a63f0243333..af699517edd09d 100644
--- a/files/zh-cn/web/api/imagebitmap/index.md
+++ b/files/zh-cn/web/api/imagebitmap/index.md
@@ -5,7 +5,7 @@ slug: Web/API/ImageBitmap
 
 {{APIRef("Canvas API")}}
 
-**`ImageBitmap`** 接口表示能够被绘制到 {{HTMLElement("canvas")}} 上的位图图像，具有低延迟的特性。运用 {{domxref("ImageBitmapFactories.createImageBitmap", "createImageBitmap()")}} 工厂方法模式，它可以从多种源中生成。 `ImageBitmap`提供了一种异步且高资源利用率的方式来为 WebGL 的渲染准备基础结构。
+**`ImageBitmap`** 接口表示能够被绘制到 {{HTMLElement("canvas")}} 上的位图图像，具有低延迟的特性。运用 {{domxref("Window.createImageBitmap()")}} 或 {{domxref("WorkerGlobalScope.createImageBitmap()")}} 工厂方法模式，它可以从多种源中生成。`ImageBitmap` 提供了一种异步且高资源利用率的方式来为 WebGL 的渲染准备基础结构。
 
 ## 属性
 
@@ -29,7 +29,8 @@ slug: Web/API/ImageBitmap
 
 ## 参见
 
-- {{domxref("ImageBitmapFactories.createImageBitmap()")}}
+- {{domxref("Window.createImageBitmap()")}}
+- {{domxref("WorkerGlobalScope.createImageBitmap()")}}
 - {{domxref("CanvasRenderingContext2D.drawImage()")}}
 - {{domxref("WebGLRenderingContext.texImage2D()")}}
-- {{domxref("OffScreenCanvas.transferToImageBitmap()")}}
+- {{domxref("OffscreenCanvas.transferToImageBitmap()")}}
diff --git a/files/zh-cn/web/api/keyboard/getlayoutmap/index.md b/files/zh-cn/web/api/keyboard/getlayoutmap/index.md
new file mode 100644
index 00000000000000..f299d385443ca1
--- /dev/null
+++ b/files/zh-cn/web/api/keyboard/getlayoutmap/index.md
@@ -0,0 +1,53 @@
+---
+title: Keyboard：getLayoutMap() 方法
+slug: Web/API/Keyboard/getLayoutMap
+l10n:
+  sourceCommit: 165d921f6f96711117be2b6513944ce36c70703f
+---
+
+{{APIRef("Keyboard API")}}{{SeeCompatTable}}{{securecontext_header}}
+
+{{domxref("Keyboard")}} 接口的 **`getLayoutMap()`** 方法返回一个 {{jsxref('Promise')}}，其会兑现一个 {{domxref('KeyboardLayoutMap')}} 实例，该实例是一个类 map 的对象，具有检索与特定物理键关联的字符串的功能。
+
+## 语法
+
+```js-nolint
+getLayoutMap()
+```
+
+### 参数
+
+无。
+
+### 返回值
+
+一个 {{jsxref('Promise')}}，其会兑现一个 {{domxref('KeyboardLayoutMap')}} 实例。
+
+### 异常
+
+- `SecurityError` {{domxref("DOMException")}}
+  - : 如果调用被[权限策略](/zh-CN/docs/Web/HTTP/Permissions_Policy)阻止，则抛出此异常。
+
+## 示例
+
+下面的示例演示如何获取与英语 QWERTY 键盘上“W”键对应的键关联的位置或布局的特定字符串。
+
+```js
+const keyboard = navigator.keyboard;
+keyboard.getLayoutMap().then((keyboardLayoutMap) => {
+  const upKey = keyboardLayoutMap.get("KeyW");
+  window.alert(`按下 ${upKey} 以向上移动。`);
+});
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{jsxref("Intl")}}
diff --git a/files/zh-cn/web/api/keyboard/index.md b/files/zh-cn/web/api/keyboard/index.md
new file mode 100644
index 00000000000000..7149e0c5661a93
--- /dev/null
+++ b/files/zh-cn/web/api/keyboard/index.md
@@ -0,0 +1,65 @@
+---
+title: Keyboard
+slug: Web/API/Keyboard
+l10n:
+  sourceCommit: d2dfabf734bc4dbba589eae6f40227b9b2068adc
+---
+
+{{SeeCompatTable}}{{APIRef("Keyboard API")}}{{securecontext_header}}
+
+{{domxref("Keyboard API", "", "", "nocode")}} 的 **`Keyboard`** 接口提供检索键盘布局图和切换从物理键盘捕获按键的功能。
+
+在 [UI 事件 KeyboardEvent 代码值](https://www.w3.org/TR/uievents-code/#key-alphanumeric-writing-system)规范中可以找到有效的代码值列表。
+
+{{InheritanceDiagram}}
+
+## 实例属性
+
+_还从其父接口 {{DOMxRef("EventTarget")}} 继承属性。_
+
+## 实例方法
+
+_还从其父接口 {{DOMxRef("EventTarget")}} 继承方法。_
+
+- {{domxref('Keyboard.getLayoutMap()')}} {{experimental_inline}}
+  - : 返回一个 {{jsxref('Promise')}}，兑现 {{domxref('KeyboardLayoutMap')}} 实例，该实例是一个类 map 对象，具有检索与特定物理键关联的字符串的功能。
+- {{domxref('Keyboard.lock()')}} {{experimental_inline}}
+  - : 返回一个 {{jsxref('Promise')}}，在启用对物理键盘上任意或所有按键的按键捕获后兑现。
+- {{domxref('Keyboard.unlock()')}} {{experimental_inline}}
+  - : 解锁 `lock()` 方法捕获的所有键并同步返回。
+
+## 示例
+
+### 键盘映射
+
+下面的示例说明如何获取与英语 QWERTY 键盘上“W”键对应的键关联的位置或布局特定字符串。
+
+```js
+if (navigator.keyboard) {
+  const keyboard = navigator.keyboard;
+  keyboard.getLayoutMap().then((keyboardLayoutMap) => {
+    const upKey = keyboardLayoutMap.get("KeyW");
+    window.alert(`按 ${upKey} 向上移动。`);
+  });
+} else {
+  // 做点别的事。
+}
+```
+
+### 键盘锁定
+
+以下示例捕获 <kbd>W</kbd>、<kbd>A</kbd>、<kbd>S</kbd> 和 <kbd>D</kbd> 键，并使用包含每个键的键代码属性值的列表调用 `lock()`：
+
+```js
+navigator.keyboard.lock(["KeyW", "KeyA", "KeyS", "KeyD"]);
+```
+
+无论按键时使用了哪些修饰键，此操作都会捕获这些键。假设采用标准的美国 QWERTY 布局，注册 `KeyW` 可确保 <kbd>W</kbd>、<kbd>Shift+W</kbd>、<kbd>Control+W</kbd>、<kbd>Control+Shift+W</kbd> 以及所有其他带有 <kbd>W</kbd> 的修饰键组合都发送到应用。这同样适用于 `KeyA`、`KeyS` 和 `KeyD`。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/web/api/keyboardlayoutmap/index.md b/files/zh-cn/web/api/keyboardlayoutmap/index.md
new file mode 100644
index 00000000000000..f5e96a8b37f736
--- /dev/null
+++ b/files/zh-cn/web/api/keyboardlayoutmap/index.md
@@ -0,0 +1,55 @@
+---
+title: KeyboardLayoutMap
+slug: Web/API/KeyboardLayoutMap
+l10n:
+  sourceCommit: e92950d09467164afc9dfd8b35be9c909b63a8ab
+---
+
+{{SeeCompatTable}}{{APIRef("Keyboard API")}}
+
+{{domxref("Keyboard API", "", "", "nocode")}} 的 **`KeyboardLayoutMap`** 接口是一个只读对象，具有检索与特定物理按键关联的字符串的功能。
+
+`KeyboardLayoutMap` 实例是一个只读的[类 `Map` 对象](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map#类_map_浏览器_api)，其中每个按键都是一个字符串，用于标识键盘上唯一的物理按键（“按键代码”），相应的值是关联的按键属性值（可能受键盘布局等影响）。
+
+在 [UI 事件 KeyboardEvent 代码值](https://www.w3.org/TR/uievents-code/#key-alphanumeric-writing-system)规范中可以找到有效按键的列表。
+
+## 实例属性
+
+- {{domxref('KeyboardLayoutMap.size')}} {{ReadOnlyInline}} {{experimental_inline}}
+  - : 返回 `KeyboardLayoutMap` 对象中的元素数量。
+
+## 实例方法
+
+- `KeyboardLayoutMap[Symbol.iterator]()` {{experimental_inline}}
+  - : 返回一个包含键/值对的新 [Iterator](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Iterator) 对象。
+- {{domxref('KeyboardLayoutMap.entries()')}} {{experimental_inline}}
+  - : 返回一个包含键/值对的新 [Iterator](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Iterator) 对象。
+- {{domxref('KeyboardLayoutMap.forEach()')}} {{experimental_inline}}
+  - : 为 `KeyboardLayoutMap` 的每个元素执行一次提供的函数。
+- {{domxref('KeyboardLayoutMap.get()')}} {{experimental_inline}}
+  - : 从 `KeyboardLayoutMap` 对象返回具有给定键的元素。
+- {{domxref('KeyboardLayoutMap.has()')}} {{experimental_inline}}
+  - : 返回一个布尔值，指示 `KeyboardLayoutMap` 对象是否具有带指定键的元素。
+- {{domxref('KeyboardLayoutMap.keys()')}} {{experimental_inline}}
+  - : 返回一个新的 [Iterator](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Iterator) 对象，该对象包含 `KeyboardLayoutMap` 对象中每个索引的键。
+- {{domxref('KeyboardLayoutMap.values()')}} {{experimental_inline}}
+  - : 返回一个新的 [Iterator](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Iterator) 对象，该对象包含 `KeyboardLayoutMap` 对象中每个索引的值。
+
+## 示例
+
+以下示例说明如何获取与英语 QWERTY 键盘上“W”键对应的键盘代码关联的位置或布局特定字符串。
+
+```js
+navigator.keyboard.getLayoutMap().then((keyboardLayoutMap) => {
+  const upKey = keyboardLayoutMap.get("KeyW");
+  window.alert(`按 ${upKey} 向上移动。`);
+});
+```
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/web/api/ndefmessage/ndefmessage/index.md b/files/zh-cn/web/api/ndefmessage/ndefmessage/index.md
index 535e4c8433e730..2795916b01cdc6 100644
--- a/files/zh-cn/web/api/ndefmessage/ndefmessage/index.md
+++ b/files/zh-cn/web/api/ndefmessage/ndefmessage/index.md
@@ -2,7 +2,7 @@
 title: NDEFMessage：NDEFMessage() 构造函数
 slug: Web/API/NDEFMessage/NDEFMessage
 l10n:
-  sourceCommit: 7793383ec44ad25f522b96cda00f8a745b27d865
+  sourceCommit: f75b2c86ae4168e59416aed4c7121f222afc201d
 ---
 
 {{SecureContext_Header}}{{APIRef("Web NFC API")}}{{SeeCompatTable}}
@@ -30,7 +30,7 @@ new NDEFMessage(records)
     - `lang` {{optional_inline}}
       - : 根据 {{RFC(5646, "用于标识语言的标记（又称 BCP 47）")}}规定的有效语言标签。
     - `mediaType` {{optional_inline}}
-      - : 有效的 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)。
+      - : 有效的 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types)。
     - `recordType`
 
       - : 指示存储在 `data` 中的数据类型的字符串。必须是以下值之一：
@@ -44,7 +44,7 @@ new NDEFMessage(records)
           - : 一个空的 {{domxref("NDEFRecord")}}。
 
         - `"mime"`
-          - : 有效的 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)。
+          - : 有效的 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types)。
         - `"smart-poster"`
           - : 一个由 [NDEF-SMARTPOSTER](https://w3c.github.io/web-nfc/#bib-ndef-smartposter) 规范定义的智能海报。
         - `"text"`
diff --git a/files/zh-cn/web/api/ndefreader/write/index.md b/files/zh-cn/web/api/ndefreader/write/index.md
index 137864953edcac..217938df230c9c 100644
--- a/files/zh-cn/web/api/ndefreader/write/index.md
+++ b/files/zh-cn/web/api/ndefreader/write/index.md
@@ -2,7 +2,7 @@
 title: NDEFReader：write() 方法
 slug: Web/API/NDEFReader/write
 l10n:
-  sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc
+  sourceCommit: f75b2c86ae4168e59416aed4c7121f222afc201d
 ---
 
 {{SecureContext_Header}}{{SeeCompatTable}}{{APIRef("Web NFC API")}}
@@ -20,7 +20,7 @@ write(message, options)
 
 - `message`
 
-  - : 要写入的消息，可以是字符串对象或字面量、{{jsxref("ArrayBuffer")}}、{{jsxref("TypedArray")}}、{{jsxref("DataView")}}，或者是记录数组。具有以下成员：
+  - : 要写入的消息，可以是字符串、{{jsxref("ArrayBuffer")}}、{{jsxref("TypedArray")}}、{{jsxref("DataView")}}，或者是记录数组。具有以下成员：
 
     - `data` {{optional_inline}}
       - : 包含要传输的数据；可以是字符串、{{jsxref("ArrayBuffer")}}、{{jsxref("TypedArray")}}、{{jsxref("DataView")}} 或嵌套记录数组之一。
@@ -31,7 +31,7 @@ write(message, options)
     - `lang` {{optional_inline}}
       - : 根据 {{RFC(5646, "用于标识语言的标记（又称 BCP 47）")}}规定的有效语言标签。
     - `mediaType` {{optional_inline}}
-      - : 有效的 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)。
+      - : 有效的 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types)。
     - `recordType`
 
       - : 指示存储在 `data` 中的数据类型的字符串。必须是以下值之一：
@@ -41,7 +41,7 @@ write(message, options)
         - `"empty"`
           - : 一个空的 {{domxref("NDEFRecord")}}。
         - `"mime"`
-          - : 有效的 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)。
+          - : 有效的 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types)。
         - `"smart-poster"`
           - : 一个由 [NDEF-SMARTPOSTER](https://w3c.github.io/web-nfc/#bib-ndef-smartposter) 规范定义的智能海报。
         - `"text"`
@@ -64,7 +64,7 @@ write(message, options)
 
 一个 {{JSxRef("Promise")}}，当消息成功写入标签时兑现，或者在遇到硬件或权限错误时拒绝。
 
-## 异常
+### 异常
 
 此方法不抛出异常；相反，它会拒绝返回的 promise，并传入一个 {{domxref("DOMException")}}，其 `name` 属性是以下值之一：
 
diff --git a/files/zh-cn/web/api/notifications_api/using_the_notifications_api/index.md b/files/zh-cn/web/api/notifications_api/using_the_notifications_api/index.md
index db5f8dcd850215..67199fd5747e8d 100644
--- a/files/zh-cn/web/api/notifications_api/using_the_notifications_api/index.md
+++ b/files/zh-cn/web/api/notifications_api/using_the_notifications_api/index.md
@@ -2,7 +2,7 @@
 title: 使用 Notifications API
 slug: Web/API/Notifications_API/Using_the_Notifications_API
 l10n:
-  sourceCommit: 83ec73ac6fec9cae23c54b729e6481f50a0a45e7
+  sourceCommit: 1b4e6d1156e8471d38deeea1567c35ef412c5f42
 ---
 
 {{DefaultAPISidebar("Web Notifications")}}{{securecontext_header}}
@@ -109,7 +109,7 @@ const notification = new Notification("待办列表", { body: text, icon: img })
 
 ## 关闭通知
 
-使用 {{domxref("Notification.close","close()")}} 删除不再与用户相关的通知（例如，对于消息应用程序，用户已经阅读了网页上的通知） ，或者以下歌曲已在音乐应用程序中播放以通知歌曲更改）。大多数现代浏览器会在一段时间（大约四秒）后自动关闭通知，但这不是你通常应该关心的事情，因为它取决于用户和用户代理。删除通知也可能发生在操作系统级别，用户应该对此保持控制。旧版本的 Chrome 不会自动删除通知，因此你可以在 {{domxref("setTimeout()")}} 之后执行此操作，以免从其他浏览器的通知托盘中删除通知。
+使用 {{domxref("Notification.close","close()")}} 删除不再与用户相关的通知（例如，对于消息应用程序，用户已经阅读了网页上的通知） ，或者以下歌曲已在音乐应用程序中播放以通知歌曲更改）。大多数现代浏览器会在一段时间（大约四秒）后自动关闭通知，但这不是你通常应该关心的事情，因为它取决于用户和用户代理。删除通知也可能发生在操作系统级别，用户应该对此保持控制。旧版本的 Chrome 不会自动删除通知，因此你可以在 {{domxref("Window.setTimeout", "setTimeout()")}} 之后执行此操作，以免从其他浏览器的通知托盘中删除通知。
 
 ```js
 const n = new Notification("我的歌");
diff --git a/files/zh-cn/web/api/page_visibility_api/index.md b/files/zh-cn/web/api/page_visibility_api/index.md
index 8cea8d75463c9c..141ecb20b48473 100644
--- a/files/zh-cn/web/api/page_visibility_api/index.md
+++ b/files/zh-cn/web/api/page_visibility_api/index.md
@@ -34,20 +34,20 @@ slug: Web/API/Page_Visibility_API
 在页面可见性 API 之外，用户代理会采取许多策略来减轻后台或隐藏选项卡对性能的影响。这些可能包括：
 
 - 大多数浏览器会停止向后台标签页或隐藏的 {{ HTMLElement("iframe") }} 发送 {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} 回调，以提高性能和电池寿命。
-- 在后台或不活动标签页中，{{domxref("setTimeout()")}} 等计时器会被节流，以帮助提高性能。详情请参阅[延迟时间超过指定时间的原因](/zh-CN/docs/Web/API/setTimeout#实际延时比设定值更久的原因：最小延迟时间)。
-- 浏览器实施基于预算的后台超时节流。现代浏览器的操作方式大同小异，具体细节如下：
+- 在后台或不活动标签页中，{{domxref("Window.setTimeout", "setTimeout()")}} 等计时器会被限流，以帮助提高性能。详情请参阅[延迟时间超过指定时间的原因](/zh-CN/docs/Web/API/Window/setTimeout#延时比指定值更长的原因)。
+- 浏览器实施基于预算的后台超时限流。现代浏览器的操作方式大同小异，具体细节如下：
 
   - 在 Firefox 中，后台标签页中的每个窗口都有自己的时间预算（以毫秒为单位），最大值和最小值分别为 +50 毫秒和 -150 毫秒。Chrome 浏览器与之非常相似，只是预算以秒为单位。
-  - 窗口在 30 秒后会受到节流，节流延迟规则与为窗口定时器指定的规则相同（请再次参阅[延迟时间超过指定时间的原因](/zh-CN/docs/Web/API/setTimeout#实际延时比设定值更久的原因：最小延迟时间)）。在 Chrome 浏览器中，该值为 10 秒。
+  - 窗口在 30 秒后会受到限流，限流延迟规则与为窗口定时器指定的规则相同（请再次参阅[延迟时间超过指定时间的原因](/zh-CN/docs/Web/API/Window/setTimeout#延时比指定值更长的原因)）。在 Chrome 浏览器中，该值为 10 秒。
   - 只有当预算为非负数时，才允许执行定时器任务。
   - 定时器代码一旦运行完毕，其执行时间就会从窗口的超时预算中扣除。
   - 在 Firefox 和 Chrome 浏览器中，预算以每秒 10 毫秒的速度重新生成。
 
-某些进程不受这种节流行为的影响。在这种情况下，可以使用页面可见性 API 来减少标签页隐藏时对性能的影响。
+某些进程不受这种限流行为的影响。在这种情况下，可以使用页面可见性 API 来减少标签页隐藏时对性能的影响。
 
-- 正在播放音频的标签页被视为前台进程，不会被节流。
-- 运行使用实时网络连接（[WebSocket](/zh-CN/docs/Web/API/WebSockets_API) 和 [WebRTC](/zh-CN/docs/Web/API/WebRTC_API)）的代码的标签页不会被节流，以避免关闭这些连接时超时和意外关闭。
-- 为了避免超时，[IndexedDB](/zh-CN/docs/Web/API/IndexedDB_API) 进程也没有节流。
+- 正在播放音频的标签页被视为前台进程，不会被限流。
+- 运行使用实时网络连接（[WebSocket](/zh-CN/docs/Web/API/WebSockets_API) 和 [WebRTC](/zh-CN/docs/Web/API/WebRTC_API)）的代码的标签页不会被限流，以避免关闭这些连接时超时和意外关闭。
+- 为了避免超时，[IndexedDB](/zh-CN/docs/Web/API/IndexedDB_API) 进程也没有限流。
 
 ## 对其他接口的扩展
 
diff --git a/files/zh-cn/web/api/permissions/index.md b/files/zh-cn/web/api/permissions/index.md
index a277033bdb522b..684cb7e671be3f 100644
--- a/files/zh-cn/web/api/permissions/index.md
+++ b/files/zh-cn/web/api/permissions/index.md
@@ -2,7 +2,7 @@
 title: Permissions
 slug: Web/API/Permissions
 l10n:
-  sourceCommit: ee253ac58d71b2ed336b705ab97dbe93122b3e04
+  sourceCommit: 805d398f95c9d1ad8769e65d56bbfe2a31205021
 ---
 
 {{APIRef("Permissions API")}}{{AvailableInWorkers}}
@@ -13,10 +13,6 @@ l10n:
 
 - {{domxref("Permissions.query","Permissions.query()")}}
   - : 返回给定 API 的用户权限状态。
-- {{domxref("Permissions.request","Permissions.request()")}} {{Experimental_Inline}}
-  - : 请求使用给定 API 的权限。目前任何浏览器都不支持此功能。
-- {{domxref("Permissions.requestAll","Permissions.requestAll()")}} {{Experimental_Inline}} {{Non-standard_Inline}}
-  - : 请求使用一组给定 API 的权限。目前任何浏览器都不支持此功能。
 - {{domxref("Permissions.revoke","Permissions.revoke()")}} {{Deprecated_Inline}}
   - : 撤消当前在给定 API 上设置的权限。
 
diff --git a/files/zh-cn/web/api/permissions/query/index.md b/files/zh-cn/web/api/permissions/query/index.md
index 81d68ff3f7f150..f062e813d1b3ba 100644
--- a/files/zh-cn/web/api/permissions/query/index.md
+++ b/files/zh-cn/web/api/permissions/query/index.md
@@ -2,13 +2,17 @@
 title: Permissions：query() 方法
 slug: Web/API/Permissions/query
 l10n:
-  sourceCommit: ee253ac58d71b2ed336b705ab97dbe93122b3e04
+  sourceCommit: 3fde60e07c74ad4954a0c77fdd80958c7d07f088
 ---
 
 {{APIRef("Permissions API")}}{{AvailableInWorkers}}
 
 {{domxref("Permissions")}} 接口的 **`query()`** 方法会返回全局作用域中用户权限的状态。
 
+用户权限名称在每个功能的各自规范中定义。不同浏览器版本支持的权限在 [`Permissions` 接口的兼容性数据](/zh-CN/docs/Web/API/Permissions#浏览器兼容性)中列出（另请参阅 [Firefox 值](https://searchfox.org/mozilla-central/source/dom/webidl/Permissions.webidl#10)、[Chromium 值](https://chromium.googlesource.com/chromium/src/+/refs/heads/main/third_party/blink/renderer/modules/permissions/permission_descriptor.idl)和 [WebKit 值](https://github.com/WebKit/WebKit/blob/main/Source/WebCore/Modules/permissions/PermissionName.idl)的相关源代码）。
+
+每个权限所控制的 API 在[权限 API](/zh-CN/docs/Web/API/Permissions_API) 概述主题中的[权限相关的 API](/zh-CN/docs/Web/API/Permissions_API#权限相关的_api) 中列出。
+
 ## 语法
 
 ```js-nolint
@@ -19,23 +23,24 @@ query(permissionDescriptor)
 
 - `permissionDescriptor`
 
-  - : 一个为 `query` 操作设置选项的对象，由一个以逗号分隔的键——值对列表组成。可用的选项有：
+  - : 设置 `query` 操作选项的对象。此描述符的可用选项取决于权限类型。所有权限都有一个名称：
 
     - `name`
-      - : 要查询权限的 API 名称。每个浏览器支持不同的值集。Firefox 的值在[这里](https://searchfox.org/mozilla-central/source/dom/webidl/Permissions.webidl#10)，Chromium 的值在[这里](https://chromium.googlesource.com/chromium/src/+/refs/heads/main/third_party/blink/renderer/modules/permissions/permission_descriptor.idl)，WebKit 的值在[这里](https://github.com/WebKit/WebKit/blob/main/Source/WebCore/Modules/permissions/PermissionName.idl)。
-    - `userVisibleOnly`
-      - : （仅推送，不被 Firefox 所支持——请参阅下面的“浏览器兼容性”部分）表示是否希望为每条消息显示通知或发送静默推送通知。默认为 `false`。
-    - `sysex`（仅限 MIDI）
-      - : 表示是否需要接收系统专有信息。默认为 `false`。
+      - : 包含要查询其权限的 API 名称的字符串，例如 `camera`、`bluetooth`、`camera`、`geolocation`（有关更完整的列表，请参阅 [`Permissions`](/zh-CN/docs/Web/API/Permissions#浏览器兼容性)）。如果浏览器不支持权限名称，则返回的 {{jsxref("Promise")}} 将使用 {{jsxref("TypeError")}} 拒绝。
+
+    对于 `push` 权限，你还可以指定：
+
+    - `userVisibleOnly` {{optional_inline}}
+      - : （仅推送，Firefox 不支持——请参阅下面的浏览器支持部分）表示你是否要为每条消息显示通知或能够发送静默推送通知。默认值为 `false`。
 
-> [!NOTE]
-> 从 Firefox 44 开始，[Notifications](/zh-CN/docs/Web/API/Notifications_API) 和 [Push](/zh-CN/docs/Web/API/Push_API) 的权限已经合并。如果权限已授予（例如由用户在相关权限对话框中授予），`navigator.permissions.query()` 将为 `notifications` 和 `push` 返回 `true`。
+    对于 `midi` 权限，你还可以指定：
 
-> **备注：** `persistent-storage`权限允许根据 [Storage API](https://storage.spec.whatwg.org/) 使用持久盒（即[持久存储](https://storage.spec.whatwg.org/#persistence)）来进行存储。
+    - `sysex` {{optional_inline}}
+      - : 指示是否需要接收系统独有消息。默认值为 `false`。
 
 ### 返回值
 
-一个会兑现为 {{domxref("PermissionStatus")}} 对象的 {{jsxref("Promise")}}。
+一个兑现为 {{domxref("PermissionStatus")}} 对象的 {{jsxref("Promise")}}。
 
 ### 异常
 
diff --git a/files/zh-cn/web/api/permissions/revoke/index.md b/files/zh-cn/web/api/permissions/revoke/index.md
index 6535c7d1742d59..f2b72976e1b1bb 100644
--- a/files/zh-cn/web/api/permissions/revoke/index.md
+++ b/files/zh-cn/web/api/permissions/revoke/index.md
@@ -2,38 +2,43 @@
 title: Permissions：revoke() 方法
 slug: Web/API/Permissions/revoke
 l10n:
-  sourceCommit: afdbe078d7c0357430ff360538edafba3af5496d
+  sourceCommit: 3fde60e07c74ad4954a0c77fdd80958c7d07f088
 ---
 
 {{APIRef("Permissions API")}}{{AvailableInWorkers}}{{deprecated_header}}
 
 {{domxref("Permissions")}} 接口的 **`revoke()`** 方法可将当前设置的权限还原为默认状态，即通常的 `prompt` 状态。该方法在全局 {{domxref("Permissions")}} 对象 {{domxref("navigator.permissions")}} 上调用。
 
+此方法已从主要权限 API 规范中删除，因为其用例不明确。权限由浏览器管理，当前权限模型不涉及网站开发人员能够强制请求或撤销权限。浏览器已以首选项形式提供此 API，但它不太可能达到标准轨道。有关更多上下文，请参阅[删除 `permissions.revoke()` 的原始讨论](https://github.com/w3c/permissions/issues/46)。
+
 ## 语法
 
 ```js-nolint
-revoke(descriptor)
+revoke(permissionDescriptor)
 ```
 
 ### 参数
 
-- `descriptor`
-  - : 一个基于 `PermissionDescriptor` 字典的对象，用于设置由逗号分隔的键——值对列表组成的操作选项。可用的选项有：
+- `permissionDescriptor`
+
+  - : 设置 `revoke` 操作选项的对象。此描述符的可用选项取决于权限类型。所有权限都有一个名称：
+
     - `name`
-      - : 要查询其权限的 API 的名称。每个浏览器支持不同的值集。你可以查阅 [Firefox 的值](https://searchfox.org/mozilla-central/source/dom/webidl/Permissions.webidl#10)、[Chromium 的值](https://chromium.googlesource.com/chromium/src/+/refs/heads/main/third_party/blink/renderer/modules/permissions/permission_descriptor.idl)、[WebKit 的值](https://github.com/WebKit/WebKit/blob/main/Source/WebCore/Modules/permissions/PermissionName.idl)。
-    - `userVisibleOnly`
-      - : （仅限推送，Firefox 不支持——请参阅下面的[浏览器兼容性](#浏览器兼容性)部分）表示是否要为每条信息显示通知，还是能够发送静默推送通知。默认为 `false`。
-    - `sysex`（仅限 MIDI）
-      - : 表示是否需要接收系统专用消息。默认为 `false`。
+      - : 包含要查询其权限的 API 名称的字符串。如果浏览器不支持该权限名称，则返回的 {{jsxref("Promise")}} 将使用 {{jsxref("TypeError")}} 拒绝。
+
+    对于 `push` 权限，你还可以指定：
+
+    - `userVisibleOnly` {{optional_inline}}
+      - : （仅推送，Firefox 不支持——请参阅下面的浏览器支持部分）表示你是否要为每条消息显示通知或能够发送静默推送通知。默认值为 `false`。
 
-> [!NOTE]
-> 从 Firefox 44 开始，[Notifications](/zh-CN/docs/Web/API/Notifications_API) 和 [Push](/zh-CN/docs/Web/API/Push_API) 的权限已经合并。如果权限已授予（例如由用户在相关权限对话框中授予），`navigator.permissions.query()` 将为 `notifications` 和 `push` 返回 `true`。
+    对于 `midi` 权限，你还可以指定：
 
-> **备注：** `persistent-storage` 权限允许使用持久盒（即[持久存储](https://storage.spec.whatwg.org/#persistence)）进行存储，如 [Storage API](https://storage.spec.whatwg.org/) 所述。
+    - `sysex` {{optional_inline}}
+      - : 指示是否需要接收系统独有消息。默认值为 `false`。
 
 ### 返回值
 
-一个 {{jsxref("Promise")}}，其会在调用兑现处理器时传入指示请求的结果的 {{domxref("PermissionStatus")}} 对象。
+使用 {{domxref("PermissionStatus")}} 对象调用其兑现处理器以指示请求的结果的 {{jsxref("Promise")}}。
 
 ### 异常
 
diff --git a/files/zh-cn/web/api/permissions_api/index.md b/files/zh-cn/web/api/permissions_api/index.md
index f053a1393550d3..a922709ebb0489 100644
--- a/files/zh-cn/web/api/permissions_api/index.md
+++ b/files/zh-cn/web/api/permissions_api/index.md
@@ -2,29 +2,48 @@
 title: 权限 API
 slug: Web/API/Permissions_API
 l10n:
-  sourceCommit: ee253ac58d71b2ed336b705ab97dbe93122b3e04
+  sourceCommit: 3fde60e07c74ad4954a0c77fdd80958c7d07f088
 ---
 
 {{DefaultAPISidebar("Permissions API")}}{{AvailableInWorkers}}
 
-**权限 API**（Permissions API）提供一致的编程方式来查询归因于当前上下文的 API 权限的状态。例如，权限 API 可用于确定是否已授予或拒绝访问特定 API 的权限，或者是否需要特定的用户权限。
-
-请注意，此 API 的权限有效地聚合了上下文的所有安全限制，包括在安全上下文中使用 API 的任何要求，[Permissions-Policy](/zh-CN/docs/Web/HTTP/Headers/Permissions-Policy) 应用于文档的限制以及用户提示。因此，例如，如果 API 受到权限策略的限制，则返回的权限将被“拒绝”，并且不会提示用户访问。
+**权限 API** 提供了一种一致的编程方式来查询当前上下文（例如网页或 worker）的 API 权限状态。例如，它可用于确定访问特定功能或 API 的权限是否已被授予、被拒绝或需要特定用户权限。
 
 ## 概念和用法
 
-历史上不同的 API 对自己的权限的处理方式不一致——例如，[Notifications API](/zh-CN/docs/Web/API/Notifications_API) 提供了自己的方法来请求权限和检查权限状态，而 [Geolocation API](/zh-CN/docs/Web/API/Geolocation) 没有。权限 API 提供的工具允许开发者在使用权限时实现一致且更好的用户体验。
+历史上不同的 API 对自己的权限的处理方式不一致——例如，[Notifications API](/zh-CN/docs/Web/API/Notifications_API) 提供了自己的方法来请求权限和检查权限状态，而 [Geolocation API](/zh-CN/docs/Web/API/Geolocation) 没有。权限 API 提供的工具允许开发者在使用权限时实现一致的用户体验。
+
+此 API 的权限有效地汇总了上下文的所有安全限制，包括在安全上下文中使用 API 的任何要求、应用于文档的 [Permissions-Policy](/zh-CN/docs/Web/HTTP/Headers/Permissions-Policy) 限制、用户交互要求和用户提示。因此，例如，如果 API 受到权限策略的限制，则返回的权限将会为 `denied`，并且不会提示用户访问。
+
+`permissions` 属性已在 {{domxref("Navigator")}} 对象上可用，在标准浏览上下文和 worker 上下文中均可用（{{domxref("WorkerNavigator")}}——因此可在 worker 内进行权限检查），并返回 {{domxref("Permissions")}} 对象，该对象提供对权限 API 功能的访问。
+
+一旦你有了这个对象，你就可以使用 {{domxref("Permissions.query()")}} 方法返回一个通过 {{domxref("PermissionStatus")}} 兑现特定 API 的 promise。
+
+### 请求权限
+
+如果权限状态为 `prompt`，则用户必须确认提示以授予对该特性的访问权限。
+
+触发此提示的机制将取决于特定 API——它未定义为权限 API 的一部分。通常，触发器是调用方法来访问或打开该特性的代码，或者注册随后将访问该特性的通知的代码。
+
+请注意，并非所有功能都需要提示。权限可能由 `Permission Policy` 授予，由{{glossary("transient activation", "瞬态激活")}}隐式授予，或通过其他机制授予。
+
+### 撤销权限
 
-`permissions` 属性已在标准浏览上下文和 worker 上下文（{{domxref("WorkerNavigator")}} ——因此可以在 worker 内部进行权限检查）中的 {{domxref("Navigator")}} 对象上可用，并返回一个提供对权限 API 功能的访问的 {{domxref("Permissions")}} 对象。
+权限撤销不由 API 管理。更具体地说，{{domxref("Permissions.revoke()")}} 方法曾被提出，但此后已从实施该方法的浏览器中删除。
 
-获得此对象后，你可以使用 {{domxref("Permissions.query()")}} 方法返回一个 promise，该 promise 为特定的 API 解析 {{domxref("PermissionStatus")}} 对象。请注意，如果状态为 `prompt`，则用户必须在访问该功能之前确认提示，并且启动此提示的机制将取决于特定的 API——它并未定义为权限 API 的一部分。
+用户可以使用浏览器设置手动删除特定网站的权限：
+
+- **Firefox**：_菜单 > 设置 > 隐私和安全 > 权限_（然后选择感兴趣的权限的**设置**按钮）。
+- **Chrome**：_菜单 > 设置 > 显示高级设置_。在*隐私*部分中，单击*内容设置*。在出现的对话框中，找到*位置*部分并选择*当网站尝试... 时询问*。最后，单击*管理例外*并删除你授予你感兴趣的网站的权限。
 
 ### 权限相关的 API
 
 并非所有 API 的权限状态都可以通过权限 API 查询。权限相关的 API 的非详尽列表包括：
 
 - [Background Synchronization API](/zh-CN/docs/Web/API/Background_Synchronization_API)：`background-sync`（应当总是被授予）
-- [Geolocation API](/zh-CN/docs/Web/API/Geolocation_API)：`geolocation`
+- [Clipboard API](/zh-CN/docs/Web/API/Clipboard_API#安全考虑)：`clipboard-read`、`clipboard-write`
+- [Compute Pressure API](/zh-CN/docs/Web/API/Compute_Pressure_API)：`compute-pressure`
+- [Geolocation API](/zh-CN/docs/Web/API/Geolocation_API#security_considerations)：`geolocation`
 - [Local Font Access API](/zh-CN/docs/Web/API/Local_Font_Access_API)：`local-fonts`
 - [Media Capture and Streams API](/zh-CN/docs/Web/API/Media_Capture_and_Streams_API)：`microphone`、`camera`
 - [Notifications API](/zh-CN/docs/Web/API/Notifications_API)：`notifications`
@@ -34,15 +53,10 @@ l10n:
 - [Sensor APIs](/zh-CN/docs/Web/API/Sensor_APIs)：`accelerometer`、`gyroscope`、`magnetometer`、`ambient-light-sensor`
 - [Storage Access API](/zh-CN/docs/Web/API/Storage_Access_API)：`storage-access`、`top-level-storage-access`
 - [Storage API](/zh-CN/docs/Web/API/Storage_API)：`persistent-storage`
+- [Web Bluetooth API](/zh-CN/docs/Web/API/Web_Bluetooth_API)：`bluetooth`
 - [Web MIDI API](/zh-CN/docs/Web/API/Web_MIDI_API)：`midi`
 - [Window Management API](/zh-CN/docs/Web/API/Window_Management_API)：`window-management`
 
-## 示例
-
-我们创建了一个名为 Location Finder 的简单示例。你可以[实时运行示例](https://chrisdavidmills.github.io/location-finder-permissions-api/)，或[在 GitHub 上查看源代码](https://github.com/chrisdavidmills/location-finder-permissions-api/tree/gh-pages)。
-
-有关其工作原理的更多信息，请阅读我们的文章[使用权限 API](/zh-CN/docs/Web/API/Permissions_API/Using_the_Permissions_API)。
-
 ## 接口
 
 - {{domxref("Permissions")}}
@@ -55,6 +69,12 @@ l10n:
 - {{domxref("Navigator.permissions")}} 和 {{domxref("WorkerNavigator.permissions")}} {{ReadOnlyInline}}
   - : 分别用于访问主上下文和 worker 上下文的 {{domxref("Permissions")}} 对象。
 
+## 示例
+
+我们创建了一个名为 Location Finder 的简单示例。你可以[实时运行示例](https://chrisdavidmills.github.io/location-finder-permissions-api/)、[在 GitHub 上查看源代码](https://github.com/chrisdavidmills/location-finder-permissions-api/tree/gh-pages)，或者在我们的文章[使用权限 API](/zh-CN/docs/Web/API/Permissions_API/Using_the_Permissions_API)中阅读有关其工作原理的更多信息。
+
+[`Permissions.query()` 示例](/zh-CN/docs/Web/API/Permissions/query#测试对不同权限的支持)也展示了在当前浏览器上测试大多数权限并记录结果的代码。
+
 ## 规范
 
 {{Specifications}}
diff --git a/files/zh-cn/web/api/permissions_api/using_the_permissions_api/index.md b/files/zh-cn/web/api/permissions_api/using_the_permissions_api/index.md
index 276fbb9d77a124..2cc53eec70f687 100644
--- a/files/zh-cn/web/api/permissions_api/using_the_permissions_api/index.md
+++ b/files/zh-cn/web/api/permissions_api/using_the_permissions_api/index.md
@@ -1,27 +1,25 @@
 ---
-title: 使用 Permissions API
+title: 使用权限 API
 slug: Web/API/Permissions_API/Using_the_Permissions_API
 l10n:
-  sourceCommit: 3dbfd299e6f34873d6355bae4b12b5c1c69242f1
+  sourceCommit: 3fde60e07c74ad4954a0c77fdd80958c7d07f088
 ---
 
 {{DefaultAPISidebar("Permissions API")}}
 
-本文提供了使用 W3C [Permissions API](/zh-CN/docs/Web/API/Permissions_API)——它提供了一种用于查询当前上下文的 API 权限授权状态的编程方式——的基本指南。
+本文提供了使用[权限 API](/zh-CN/docs/Web/API/Permissions_API)——它提供了一种用于查询当前上下文的 API 权限授权状态的编程方式——的基本指南。
 
 ## 申请权限面临的困境
 
-惨淡的事实是，权限在 Web 开发中是令人厌恶却不得不面对的问题，对于开发者而言，处理它毫无乐趣。
+Web 上的权限是令人厌恶却不得不面对的问题，但对于开发人员来说，处理它们并不是一件有趣的事。
 
 由于历史原因，不同的 API 使用各自不同的方式来处理自己的权限──例如，[Notification API](/zh-CN/docs/Web/API/Notifications_API) 允许显式地检查权限状态和申请权限，然而，[Geolocation API](/zh-CN/docs/Web/API/Geolocation_API) 却不能。
 
-[Permissions API](/zh-CN/docs/Web/API/Permissions_API) 提供了一系列工具来让开发者在权限方面实现更好的用户体验。具体来说，开发人员可以使用 {{domxref("Permissions.query()")}} 来检查在当前上下文中使用特定 API 的权限是已授予、已拒绝还是需要通过提示获得特定用户权限。在主线程中查询权限是被[广泛支持](/zh-CN/docs/Web/API/Permissions_API#api.navigator.permissions)的，在 [Worker](/zh-CN/docs/Web/API/Permissions_API#api.workernavigator.permissions) 中也是如此（但有一个明显的例外）。
+[权限 API](/zh-CN/docs/Web/API/Permissions_API) 提供了一系列工具来让开发者在权限方面实现更好的用户体验。具体来说，开发人员可以使用 {{domxref("Permissions.query()")}} 来检查在当前上下文中使用特定 API 的权限是已授予、已拒绝还是需要通过提示获得特定用户权限。在主线程中查询权限是被[广泛支持](/zh-CN/docs/Web/API/Permissions_API#api.navigator.permissions)的，在 [Worker](/zh-CN/docs/Web/API/Permissions_API#api.workernavigator.permissions) 中也是如此（但有一个明显的例外）。
 
-许多 API 现在都能进行权限查询，例如 [Clipboard API](/zh-CN/docs/Web/API/Clipboard_API)、[Notifications API](/zh-CN/docs/Web/API/Notifications_API)
+许多 API 现已启用权限查询，例如 [Clipboard API](/zh-CN/docs/Web/API/Clipboard_API)、[Notifications API](/zh-CN/docs/Web/API/Notifications_API)、[Push API](/zh-CN/docs/Web/API/Push_API) 和 [Web MIDI API](/zh-CN/docs/Web/API/Web_MIDI_API)。[API 概览](/zh-CN/docs/Web/API/Permissions_API#权限相关的_api)中提供了许多权限启用的 API 列表，你可以在[此处的兼容性表](/zh-CN/docs/Web/API/Permissions_API#api.permissions)中了解浏览器支持情况。
 
-- [Push API](/zh-CN/docs/Web/API/Push_API)、[Web MIDI API](/zh-CN/docs/Web/API/Web_MIDI_API)。[API 概览](/zh-CN/docs/Web/API/Permissions_API#permission-aware_apis)中提供了许多启用权限的 API 的列表，你可以在[此处的兼容性表](/zh-CN/docs/Web/API/Permissions_API#api.permissions)中了解浏览器的支持情况。
-
-{{domxref("Permissions")}} 还有其他方法可用于专门请求使用 API 的权限和撤销权限，但这些方法已被弃用（非标准及不被广泛支持）。
+{{domxref("Permissions")}} 还有其他方法可用于专门请求使用 API 的权限和撤销权限，但这些方法已被弃用（非标准且不被广泛支持）。
 
 ## 一个简单的例子
 
@@ -29,22 +27,22 @@ l10n:
 
 ![英国格林菲尔德地图的截图](location-finder-with-permissions-api.png)
 
-你可以[在线运行示例](https://chrisdavidmills.github.io/location-finder-permissions-api/)，或[在 Github 查看源代码](https://github.com/chrisdavidmills/location-finder-permissions-api/tree/gh-pages)。大部分代码都很简单且常见──所以接下来我们会重点关注和 Permissions API 有关的代码，如果你想学习其他部分，请自行阅读。
+你可以[在线运行示例](https://chrisdavidmills.github.io/location-finder-permissions-api/)，或[在 Github 查看源代码](https://github.com/chrisdavidmills/location-finder-permissions-api/tree/gh-pages)。大部分代码都很简单且常见──所以接下来我们会重点关注和权限 API 有关的代码，如果你想学习其他部分，请自行阅读。
 
-### 访问 Permissions API
+### 访问权限 API
 
-浏览器现已包含 {{domxref("Navigator.permissions")}} 属性使开发者可以访问全局的 {{domxref("Permissions")}} 对象。这个对象最终将包含用来查询、申请和重置权限的方法，尽管，目前只有 {{domxref("Permissions.query()")}}; 我们接下来会讨论它。
+浏览器现已包含 {{domxref("Navigator.permissions")}} 属性使开发者可以访问全局的 {{domxref("Permissions")}} 对象。这个对象最终将包含用来查询、申请和撤销权限的方法，尽管，目前只有 {{domxref("Permissions.query()")}}；我们接下来会讨论它。
 
 ### 查询权限状态
 
-在我们的例子中，权限功能使用一个函数来处理— `handlePermission()`. 它开始于使用 {{domxref("Permissions.query()")}} 查询权限状态。根据 Promise resolve 后返回的 {{domxref("PermissionStatus")}} 对象的 {{domxref("PermissionStatus.state", "state")}} 属性，做出不同的处理：
+在我们的例子中，权限功能使用一个函数来处理——`handlePermission()`。它开始于使用 {{domxref("Permissions.query()")}} 查询权限状态。根据 Promise 兑现后返回的 {{domxref("PermissionStatus")}} 对象的 {{domxref("PermissionStatus.state", "state")}} 属性，做出不同的处理：
 
 - `"granted"`
-  - : "Enable Geolocation" 按钮被隐藏掉了，因为 Geolocation 已经被允许了，不需要这个按钮了。
+  - : “Enable Geolocation”按钮被隐藏掉了，因为 Geolocation 已经被允许了，不需要这个按钮了。
 - `"prompt"`
-  - : 隐藏 "Enable Geolocation" 按钮，因为用户会被（浏览器）引导授权 Geolocation 权限，所以它不需要了。接下来 {{domxref("Geolocation.getCurrentPosition()")}} 函数会运行，它会引导用户授权；如果用户授权了，它会继续执行 `revealPosition()` 函数（会显示地图）；如果用户拒绝了， `positionDenied()` 函数会被执行（这会让 "Enable Geolocation" 按钮显示出来）。
+  - : 隐藏“Enable Geolocation”按钮，因为用户会被（浏览器）引导授权 Geolocation 权限，所以它不需要了。接下来 {{domxref("Geolocation.getCurrentPosition()")}} 函数会运行，它会引导用户授权；如果用户授权了，它会继续执行 `revealPosition()` 函数（会显示地图）；如果用户拒绝了， `positionDenied()` 函数会被执行（这会让“Enable Geolocation”按钮显示出来）。
 - `"denied"`
-  - : "Enable Geolocation" 按钮会被显示（这段代码也需要放在这里，以防在页面首次加载时，这个源的权限状态就已经被设置为拒绝了）。
+  - : “Enable Geolocation”按钮会显示（这段代码也需要放在这里，以防在页面首次加载时，这个源的权限状态就已经被设置为拒绝了）。
 
 ```js
 function handlePermission() {
@@ -79,42 +77,8 @@ handlePermission();
 
 ### 权限描述符
 
-{{domxref("Permissions.query()")}} 方法接受一个 `PermissionDescriptor` 字典作为参数 — 它包含你感兴趣的 API 的名称。一些 API 有继承自默认的 `PermissionDescriptor` 的更加复杂的 `PermissionDescriptor`s 以包含更多额外的信息。例如，`PushPermissionDescriptor` 也包含一个比尔值指定 [`userVisibleOnly`](/zh-CN/docs/Web/API/PushManager/subscribe#Parameters) 是 `true` 还是 `false`.
-
-### 重置权限
-
-从 Firefox 47 开始，你可以使用 {{domxref("Permissions.revoke()")}} 方法重置现有权限。它的调用方式和 {{domxref("Permissions.query()")}} 方法几乎一模一样，区别是，当 promise 成功 resolve 时，它会让一个现有的权限恢复默认状态（通常是 `prompt`）。让我们看看 demo 中的代码：
-
-```js
-const revokeBtn = document.querySelector(".revoke");
-
-// ...
-
-revokeBtn.onclick = () => {
-  revokePermission();
-};
-
-// ...
-
-function revokePermission() {
-  navigator.permissions.revoke({ name: "geolocation" }).then((result) => {
-    report(result.state);
-  });
-}
-```
-
-> [!NOTE]
-> 自 Firefox 51 开始 `revoke()` 函数被默认关闭了，因为它的设计带来了 [Web Applications Security Working Group](https://www.w3.org/2011/webappsec/) 中提到的问题。可以通过将设置项 `dom.permissions.revoke.enable` 置为 `true` 来重新开启它。
+{{domxref("Permissions.query()")}} 方法接受一个 `PermissionDescriptor` 字典作为参数——它包含你感兴趣的 API 的名称。一些 API 有更复杂的 `PermissionDescriptor` 结构，该结构继承自默认的 `PermissionDescriptor`，包含更多额外的信息。例如，`PushPermissionDescriptor` 也包含一个布尔值指定 [`userVisibleOnly`](/zh-CN/docs/Web/API/PushManager/subscribe#参数) 是 `true` 还是 `false`。
 
 ### 响应权限状态变化
 
 你会注意到，在上面的代码中，在 {{domxref("PermissionStatus")}} 对象上有一个 `onchange` 事件回调——这让我们可以对感兴趣的 API 的状态变化做出响应。目前，我们只是上报了状态的变化。
-
-## 总结和展望未来
-
-目前，较之我们已有的，这个 API 并没有提供太多额外内容。如果在浏览器询问时，我们选择了从不分享我们的位置，那么不使用浏览器菜单选项的话，我们将无法返回权限的初始状态（询问）：
-
-- **Firefox**：_工具 > 页面信息 > 权限 > 访问你的位置_。选择“总是询问”。
-- **Chrome**：_汉堡菜单 > 设置 > 显示高级设置。在隐私部分，点击“内容设置”。在出现的对话框中，找到“位置”部分，选择“当网站试图访问时询问”...最后，点击“管理特例”_，移除你对特定网站的授权。
-
-但是，未来浏览器会提供 `request()` 方法，他让我们可以在任何时候以编程的方式来请求权限。这非常值得期待尽快被实现。
diff --git a/files/zh-cn/web/api/pointer_lock_api/index.md b/files/zh-cn/web/api/pointer_lock_api/index.md
index 01f9f5b021c2ab..f045793de86648 100644
--- a/files/zh-cn/web/api/pointer_lock_api/index.md
+++ b/files/zh-cn/web/api/pointer_lock_api/index.md
@@ -1,214 +1,253 @@
 ---
-title: Pointer Lock API
+title: 指针锁定 API
 slug: Web/API/Pointer_Lock_API
+l10n:
+  sourceCommit: 802b6063046dffb7634d2138aadcd92cb22ed40c
 ---
 
-{{DefaultAPISidebar("Pointer Lock API")}}{{ SeeCompatTable() }}
+{{DefaultAPISidebar("Pointer Lock API")}}
 
-**指针锁定**(以前叫做鼠标锁定) 提供了一种输入方法，这种方法是基于鼠标随着时间推移的运动的（也就是，deltas），而不仅是鼠标光标的绝对位置。通过它可以访问原始的鼠标运动，把鼠标事件的目标锁定到一个单独的元素，这就消除了鼠标在一个单独的方向上到底可以移动多远这方面的限制，并从视图中删去光标。
+**指针锁定 API**（Pointer Lock API，以前叫做 _Mouse Lock API_）提供了一种基于鼠标随着时间推移（也就是增量）的运动的输入方法，而不仅是鼠标光标在视口中的绝对位置。通过它可以访问原始的鼠标运动，把鼠标事件的目标锁定到一个单独的元素，这就消除了鼠标在一个单独的方向上到底可以移动多远这方面的限制，并从视图中删去光标。例如，它是第一人称 3D 游戏的理想选择。
 
-这个 API 对于需要大量的鼠标输入来控制运动，旋转物体，以及更改项目的应用程序来说非常有用。对高度视觉化的应用程序尤其重要，例如那些使用第一人称视角的应用程序，以及 3D 视图和建模。
+不仅如此，该 API 对于需要大量鼠标输入来控制移动、旋转对象和更改条目的任何应用程序都非常有用，例如，允许用户通过移动鼠标来控制视角，而无需单击任何按钮。然后释放按钮以执行其他操作。其他示例包括用于查看地图或卫星图像的应用程序。
 
-举例来说，你可以创建让你的用户简单地通过移动鼠标而不需要点击任何按钮就可以控制视角的应用。那么这些按钮就可以被用作其他动作。这类鼠标输入对于查看地图，卫星图像，或者第一人称场景（例如在一个游戏中或者一个全景视频中）是非常方便使用的。
-
-即使在光标移到浏览器或者屏幕区域之外，指针锁定也能够让你访问鼠标事件。例如，你的用户可以通过不断地移动鼠标来持续旋转或操纵一个 3D 模型。如果没有指针锁定的话，这些旋转或操纵会在指针到达浏览器或者屏幕边缘的那一刻停止。尤其是游戏玩家将会因为此功能而兴奋不已，因为他们可以疯狂地点击按钮，来回地滑动鼠标光标，而不必担心离开了游戏区域，进而不小心误点到另外一个应用程序上，结果将鼠标焦点移离了游戏。杯具了！
+指针锁定让你即使光标超出浏览器或屏幕的边界也能访问鼠标事件。例如，你的用户可以通过无休止地移动鼠标来继续旋转或操作 3D 模型。如果没有指针锁定，旋转或操作会在指针到达浏览器或屏幕的边缘时停止。游戏玩家现在可以点击按钮并来回滑动鼠标光标，而不必担心离开游戏区域并意外点击另一个应用程序而导致鼠标焦点从游戏中移开。
 
 ## 基本概念
 
-指针锁定和[鼠标捕获](/zh-CN/DOM/element.setCapture)有关。鼠标捕获在一个鼠标被拖曳时可以向一个目标元素持续传递有关事件，但是当鼠标按钮被放开时就会停止。指针锁定和鼠标捕获在以下方面有所不同：
+指针锁定和[指针捕获](/zh-CN/docs/Web/API/Pointer_events#指针捕捉)有关。指针捕获在鼠标被拖曳时可以向一个目标元素持续传递有关事件，但是当鼠标按钮被放开时就会停止。指针锁定和指针捕获在以下方面有所不同：
 
 - 它是持久性的。指针锁定不释放鼠标，直到作出一个显式的 API 调用或是用户使用一个专门的释放手势。
 - 它不局限于浏览器或者屏幕边界。
 - 它持续发送事件，而不管鼠标按钮状态如何。
 - 它隐藏光标。
 
-## 示例
+## 方法/属性概述
 
-下面是一个如何在你的网页中设置指针锁定的示例。
+本小节对与指针锁定规范相关的每个属性和方法进行了简要说明。
 
-```js
-<button onclick="lockPointer();">锁住它！</button>
-<div id="pointer-lock-element"></div>
-<script>
-// 注意：截止本文撰写时，仅有 Mozilla 和 WebKit 支持指针锁定。
-
-// 我们将要使之全屏并指针锁定的元素。
-var elem;
-
-document.addEventListener("mousemove", function(e) {
-  var movementX = e.movementX       ||
-                  e.mozMovementX    ||
-                  e.webkitMovementX ||
-                  0,
-      movementY = e.movementY       ||
-                  e.mozMovementY    ||
-                  e.webkitMovementY ||
-                  0;
-
-  // 打印鼠标移动的增量值。
-  console.log("movementX=" + movementX, "movementY=" + movementY);
-}, false);
-
-function fullscreenChange() {
-  if (document.webkitFullscreenElement === elem ||
-      document.mozFullscreenElement === elem ||
-      document.mozFullScreenElement === elem) { // 较旧的 API 大写 'S'.
-    // 元素进入全屏模式了，现在我们可以请求指针锁定。
-    elem.requestPointerLock = elem.requestPointerLock    ||
-                              elem.mozRequestPointerLock ||
-                              elem.webkitRequestPointerLock;
-    elem.requestPointerLock();
-  }
-}
+### requestPointerLock()
 
-document.addEventListener('fullscreenchange', fullscreenChange, false);
-document.addEventListener('mozfullscreenchange', fullscreenChange, false);
-document.addEventListener('webkitfullscreenchange', fullscreenChange, false);
+指针锁定 API 与[全屏 API](/zh-CN/docs/Web/API/Fullscreen_API) 类似，通过添加新方法 {{domxref("Element.requestPointerLock", "re​​questPointerLock()")}} 来扩展 DOM 元素。以下示例请求对 {{htmlelement("canvas")}} 元素进行指针锁定：
 
-function pointerLockChange() {
-  if (document.mozPointerLockElement === elem ||
-      document.webkitPointerLockElement === elem) {
-    console.log("指针锁定成功了。");
-  } else {
-    console.log("指针锁定已丢失。");
-  }
-}
+```js
+canvas.addEventListener("click", async () => {
+  await canvas.requestPointerLock();
+});
+```
 
-document.addEventListener('pointerlockchange', pointerLockChange, false);
-document.addEventListener('mozpointerlockchange', pointerLockChange, false);
-document.addEventListener('webkitpointerlockchange', pointerLockChange, false);
+> [!NOTE]
+> 如果用户通过[默认解锁手势](https://w3c.github.io/pointerlock/#dfn-default-unlock-gesture)退出指针锁定，或者之前未为此文档输入指针锁定，则文档必须收到[参与手势](https://w3c.github.io/pointerlock/#dfn-engagement-gesture)生成的事件，[`requestPointerLock`](https://w3c.github.io/pointerlock/#dom-element-requestpointerlock) 才会成功。（来自 <https://w3c.github.io/pointerlock/#extensions-to-the-element-interface>）
 
-function pointerLockError() {
-  console.log("锁定指针时出错。");
-}
+操作系统默认启用鼠标加速，这在你有时想要缓慢精确移动（想想你可能会使用图形包）时很有用，但也希望通过更快的鼠标移动移动很远的距离（想想滚动和选择多个文件）。然而，对于一些第一人称视角游戏，原始鼠标输入数据更适合用于控制相机旋转——相同距离的移动（无论快或慢）都会导致相同的旋转。专业游戏玩家表示，这会带来更好的游戏体验和更高的准确度。
 
-document.addEventListener('pointerlockerror', pointerLockError, false);
-document.addEventListener('mozpointerlockerror', pointerLockError, false);
-document.addEventListener('webkitpointerlockerror', pointerLockError, false);
-
-function lockPointer() {
-  elem = document.getElementById("pointer-lock-element");
-  // 开始于使元素进入全屏模式。目前的实现
-  // 要求元素在请求指针锁定前要处于全屏模式下
-  // -- 这在以后可能会发生改变。
-  elem.requestFullscreen = elem.requestFullscreen    ||
-                           elem.mozRequestFullscreen ||
-                           elem.mozRequestFullScreen || // 较旧的 API 把‘S’大写
-                           elem.webkitRequestFullscreen;
-  elem.requestFullscreen();
-}
-</script>
+要禁用操作系统级鼠标加速并访问原始鼠标输入，你可以将 `unadjustedMovement` 设置为 `true`：
+
+```js
+canvas.addEventListener("click", async () => {
+  await canvas.requestPointerLock({
+    unadjustedMovement: true,
+  });
+});
 ```
 
-## 方法/属性 概述
+## 处理 requestPointerLock() 的 promise 版本和非 promise 版本
+
+上述代码片段在不支持基于 promise 的 `requestPointerLock()` 版本或 `unadjustedMovement` 选项的浏览器中仍可正常工作——允许在不返回 promise 的函数前面使用 [`await`](/zh-CN/docs/Web/JavaScript/Reference/Operators/await) 运算符，并且选项对象将在不支持的浏览器中被忽略。
 
-Pointer lock API，和 Fullscreen API 类似，通过添加新方法来扩展 DOM 元素，`requestPointerLock`, 目前还是厂商前缀。按下面这样来写：
+但是，这可能会造成混淆，并且有其他潜在的副作用（例如，尝试使用 `requestPointerLock().then()` 会在不支持的浏览器中引发错误），因此你可能需要使用以下代码明确处理此问题：
 
 ```js
-element.webkitRequestPointerLock(); // Chrome
+function requestPointerLockWithUnadjustedMovement() {
+  const promise = myTargetElement.requestPointerLock({
+    unadjustedMovement: true,
+  });
+
+  if (!promise) {
+    console.log("不支持禁用鼠标加速");
+    return;
+  }
 
-element.mozRequestPointerLock(); // Firefox
+  return promise
+    .then(() => console.log("指针被锁定"))
+    .catch((error) => {
+      if (error.name === "NotSupportedError") {
+        // 有些平台可能不支持未调整的移动。你可以重新请求常规指针锁定。
+        return myTargetElement.requestPointerLock();
+      }
+    });
+}
 ```
 
-目前 `requestPointerLock` 的实现还是和 `requestFullScreen` 以及 Fullscreen API 紧紧地绑在一起的。一个元素在能够被指针锁定之前，必须首先进入全屏模式。就像上面演示的那样，锁定指针的过程是异步的，使用 (`pointerlockchange`, `pointerlockerror`) 事件来表明请求是成功还是失败了。这和 Fullscreen API 的工作方式是一致的，它使用 `requestFullScreen` 方法，以及 `fullscreenchange` 和 `fullscreenerror` 事件。
+### pointerLockElement 和 exitPointerLock()
+
+指针锁定 API 还扩展了 {{domxref("Document")}} 接口，添加了一个新属性和一个新方法：
+
+- {{domxref("Document.pointerLockElement","pointerLockElement")}} 用于访问当前锁定的元素（如果有）。
+- {{domxref("Document.exitPointerLock","exitPointerLock()")}} 用于退出指针锁定。
 
-Pointer lock API 还扩展了 `document` 接口，添加了一个新的属性和一个新的方法。新的属性被用于访问当前被锁定的元素（如果有的话），并被命名为 `pointerLockElement`，目前也使用厂商前缀。 `document` 添加的新方法是 `exitPointerLock` ，顾名思义，它是用来退出指针锁定的。
+{{domxref("Document.pointerLockElement","pointerLockElement")}} 属性可用于确定任何元素当前是否被指针锁定（例如，进行布尔检查），也可用于获取对锁定元素的引用（如果有）。
 
-`pointerLockElement` 属性适用于确定当前是否有被指针锁定的元素（例如，用来做一个布尔检查），以及当有元素被锁定时获取该元素的一个引用。下面是这两种用法的一个例子：
+以下是使用 `pointerLockElement` 的示例：
 
 ```js
-document.pointerLockElement =
-  document.pointerLockElement ||
-  document.mozPointerLockElement ||
-  document.webkitPointerLockElement;
-
-// 1) 用于布尔检查 -- 我们被指针锁定了吗？
-if (!!document.pointerLockElement) {
-  // 指针被锁定
+if (document.pointerLockElement === canvas) {
+  console.log("指针锁定状态现已锁定");
 } else {
-  // 指针未被锁定
+  console.log("指针锁定状态现已解锁");
 }
+```
 
-// 2) 用于访问指针锁定的元素
-if (document.pointerLockElement === someElement) {
-  // someElement 当前被指针锁定
-}
+{{domxref("Document.exitPointerLock()")}} 方法用于退出指针锁定，与 {{domxref("Element.requestPointerLock","re​​questPointerLock")}} 一样，使用 {{domxref("Document/pointerlockchange_event", "pointerlockchange")}} 和 {{domxref("Document/pointerlockerror_event", "pointerlockerror")}} 事件异步运行，你将在下面看到更多相关内容。
+
+```js
+document.exitPointerLock();
 ```
 
-`document` 的 `exitPointerLock` 方法被用来退出指针锁定，而且和 requestPointerLock 一样，使用 `pointerlockchange` 和 `pointerlockerror`事件以异步方式工作：
+## pointerlockchange 事件
+
+当指针锁定状态改变时——例如，当调用 {{domxref("Element.requestPointerLock","requestPointerLock()")}} 或 {{domxref("Document.exitPointerLock","exitPointerLock()")}}，用户按下 ESC 键，等等——{{domxref("Document/pointerlockchange_event", "pointerlockchange")}} 事件在 `document` 上触发。这是一个不包含任何的额外数据的简单事件。
 
 ```js
-document.exitPointerLock =
-  document.exitPointerLock ||
-  document.mozExitPointerLock ||
-  document.webkitExitPointerLock;
-
-function pointerLockChange() {
-  document.pointerLockElement =
-    document.pointerLockElement ||
-    document.mozPointerLockElement ||
-    document.webkitPointerLockElement;
-
-  if (!!document.pointerLockElement) {
-    console.log("目前还是被锁定。");
+document.addEventListener("pointerlockchange", lockChangeAlert, false);
+
+function lockChangeAlert() {
+  if (document.pointerLockElement === canvas) {
+    console.log("指针锁定状态现已锁定");
+    // 做一些有用的事情作为回应
   } else {
-    console.log("已经退出锁定。");
+    console.log("指针锁定状态现已解锁");
+    // 做一些有用的事情作为回应
   }
 }
+```
 
-document.addEventListener("pointerlockchange", pointerLockChange, false);
-document.addEventListener("mozpointerlockchange", pointerLockChange, false);
-document.addEventListener("webkitpointerlockchange", pointerLockChange, false);
+## pointerlockerror 事件
 
-// 试图解除锁定
-document.exitPointerLock();
+当调用 {{domxref("Element.requestPointerLock","requestPointerLock()")}} 或 {{domxref("Document.exitPointerLock","exitPointerLock()")}} 而引发错误时， {{domxref("Document/pointerlockerror_event", "pointerlockerror")}} 事件在 `document` 上触发。这是一个简单事件所以不包含任何的额外数据。
+
+```js
+document.addEventListener("pointerlockerror", lockError, false);
+
+function lockError(e) {
+  alert("指针锁定失败");
+}
 ```
 
-## pointerlockchange 事件
+## 鼠标事件的扩展
 
-当指针锁定状态改变时 - 例如，当调用 `requestPointerLock`, `exitPointerLock`，用户按下 ESC 键，等等。— `pointerlockchange` 事件被分发到 `document`。这是一个简单事件所以不包含任何的额外数据。
+指针锁定 API 扩展了普通的 {{domxref("MouseEvent")}} 接口，使其具有 movement 属性。鼠标事件的两个新属性——{{domxref("MouseEvent.movementX","movementX")}} 和 {{domxref("MouseEvent.movementY","movementY")}}——提供鼠标位置的变化。参数的值与 {{domxref("MouseEvent")}} 属性值 {{domxref("MouseEvent.screenX","screenX")}} 和 {{domxref("MouseEvent.screenY","screenY")}} 之间的差值相同，它们存储在两个后续 {{domxref("Element/mousemove_event", "mousemove")}} 事件 `eNow` 和 `ePrevious` 中。换句话说，指针锁定参数 `movementX = eNow.screenX - ePrevious.screenX`。
 
-> [!NOTE]
-> 该事件目前在 Firefox 中使用前缀的格式是 `mozpointerlockchange` ，在 Chrome 中是 `webkitpointerlockchange`。
+### 锁定状态
 
-## pointerlockerror 事件
+当指针锁定被启动之后，标准的 {{domxref("MouseEvent")}} 属性 {{domxref("MouseEvent.clientX","clientX")}}、{{domxref("MouseEvent.clientY","clientY")}}、{{domxref("MouseEvent.screenX","screenX")}} 和 {{domxref("MouseEvent.screenY","screenY")}} 属性保持不变，就像鼠标未移动一样。{{domxref("MouseEvent.movementX","movementX")}} 和 {{domxref("MouseEvent.movementY","movementY")}} 属性继续提供鼠标的位置变化。如果鼠标持续朝一个方向移动，则 {{domxref("MouseEvent.movementX","movementX")}} 和 {{domxref("MouseEvent.movementY","movementY")}} 值不受限制。鼠标光标的概念不存在，并且光标不能移出窗口或被屏幕边缘夹住。
 
-当调用 `requestPointerLock` 或 `exitPointerLock`而引发错误时， `pointerlockerror` 事件被分发到 `document`。这是一个简单事件所以不包含任何的额外数据。
+### 未锁定状态
 
-> [!NOTE]
-> 该事件目前在 Firefox 中被加上前缀为 `mozpointerlockerror` ，在 Chrome 中为 `webkitpointerlockerror`。
+无论鼠标是否处于锁定状态，参数 {{domxref("MouseEvent.movementX","movementX")}} 和 {{domxref("MouseEvent.movementY","movementY")}} 均有效，并且即使鼠标解锁后也可用，以方便使用。
+
+当鼠标解锁时，系统光标可以退出并重新进入浏览器窗口。如果发生这种情况，可以将 {{domxref("MouseEvent.movementX","movementX")}} 和 {{domxref("MouseEvent.movementY","movementY")}} 设置为零。
+
+## 简单示例演示
 
-## 鼠标事件扩展
+我们编写了一个[指针锁定演示](https://mdn.github.io/dom-examples/pointer-lock/)（[查看源代码](https://github.com/mdn/dom-examples/tree/main/pointer-lock)），向你展示如何使用它来设置一个简单的控制系统。此演示使用 JavaScript 在 {{ htmlelement("canvas") }} 元素上绘制一个球。当你单击画布时，指针锁定将用于移除鼠标指针，并允许你直接使用鼠标移动球。让我们看看它是如何工作的。
 
-Pointer lock API 使用 movement 属性扩展了标准的 `MouseEvent`。
+我们在画布上设置 x 和 y 的初始位置：
 
-```webidl
-partial interface MouseEvent {
-    readonly attribute long movementX;
-    readonly attribute long movementY;
-};
+```js
+let x = 50;
+let y = 50;
+```
+
+接下来，我们设置一个事件监听器，当单击画布时，在画布上运行 `requestPointerLock()` 方法，从而启动指针锁定。`document.pointerLockElement` 检查是为了查看是否已经有一个活动的指针锁定——如果已经有指针锁定，我们不想每次单击画布时都继续调用 `requestPointerLock()`。
+
+```js
+canvas.addEventListener("click", async () => {
+  if (!document.pointerLockElement) {
+    await canvas.requestPointerLock({
+      unadjustedMovement: true,
+    });
+  }
+});
 ```
 
 > [!NOTE]
-> movement 属性目前在 Firefox 中被加上前缀为 `.mozMovementX` 和 `.mozMovementY` , 在 Chrome 中为`.webkitMovementX` 和 `.webkitMovementY`。
+> 上述代码片段在不支持 `requestPointerLock()` 的 promise 版本的浏览器中有效。请参阅[处理 requestPointerLock() 的 promise 版本和非 promise 版本](#处理_requestpointerlock_的_promise_版本和非_promise_版本)了解详细说明。
 
-鼠标事件的两个新参数—`movementX` 和 `movementY`—提供了鼠标位置的变化情况。这两个参数的值，等于两个[`MouseEvent`](/zh-CN/DOM/MouseEvent) 属性（ `screenX` 和 `screenY）`之间值的变化程度，这些 MouseEvent 属性被存储在两个连续的鼠标移动事件（ `eNow` 和 `ePrevious`）中。换言之，指针锁定参数 `movementX = eNow.screenX - ePrevious.screenX`。（译注：不存在名为 eNow 或 ePrevious 的事件或属性，eNow 代指当前的鼠标移动事件，ePrevious 代指前一个鼠标移动事件）
+现在来看看专用的指针锁定事件监听器：`pointerlockchange`。当这种情况发生时，我们运行一个名为 `lockChangeAlert()` 的函数来处理变化。
 
-### 锁定状态
+```js
+document.addEventListener("pointerlockchange", lockChangeAlert, false);
+```
 
-当指针锁定被启动之后，正常的 `MouseEvent` 属性 `clientX`, `clientY`, `screenX`, 和 `screenY` ，保持不变，就像鼠标没有在移动一样。 `movementX` 和 `movementY` 属性持续提供鼠标的位置变化。如果鼠标在一个方向上持续移动，`movementX` 和 `movementY`的值是没有限制的。不存在鼠标光标的概念，而且光标无法移到窗口之外，而且也不会被屏幕边缘所固定。
+此函数检查 `pointerLockElement` 属性以查看它是否是我们的画布。如果是，它会附加一个事件侦听器，以使用 `updatePosition()` 函数处理鼠标移动。如果不是，它会再次删除事件侦听器。
 
-### 未锁定状态
+```js
+function lockChangeAlert() {
+  if (document.pointerLockElement === canvas) {
+    console.log("指针锁定状态现已锁定");
+    document.addEventListener("mousemove", updatePosition, false);
+  } else {
+    console.log("指针锁定状态现已解锁");
+    document.removeEventListener("mousemove", updatePosition, false);
+  }
+}
+```
+
+`updatePosition()` 函数会更新球在画布上的位置（`x` 和 `y`），同时还包含 `if ()` 语句，用于检查球是否已经超出画布的边缘。如果超出，则让球绕到另一侧的边缘。它还会检查之前是否已调用 [`requestAnimationFrame()`](/zh-CN/docs/Web/API/Window/requestAnimationFrame)，如果已调用，则根据需要再次调用，并调用 `canvasDraw()` 函数来更新画布场景。还设置了一个跟踪器，用于将 X 和 Y 值写入屏幕，以供参考。
+
+```js
+const tracker = document.getElementById("tracker");
+
+let animation;
+function updatePosition(e) {
+  x += e.movementX;
+  y += e.movementY;
+  if (x > canvas.width + RADIUS) {
+    x = -RADIUS;
+  }
+  if (y > canvas.height + RADIUS) {
+    y = -RADIUS;
+  }
+  if (x < -RADIUS) {
+    x = canvas.width + RADIUS;
+  }
+  if (y < -RADIUS) {
+    y = canvas.height + RADIUS;
+  }
+  tracker.textContent = `X 坐标：${x}，Y 坐标：${y}`;
+
+  if (!animation) {
+    animation = requestAnimationFrame(() => {
+      animation = null;
+      canvasDraw();
+    });
+  }
+}
+```
 
-无论鼠标锁定状态是怎样的， `movementX` 和 `movementY` 参数一直有效，并且为了方便起见，甚至在未锁定状态也是有效的。
+`canvasDraw()` 函数在当前 `x` 和 `y` 位置绘制圆：
 
-当鼠标被解除锁定，系统光标可以退出并重新进入浏览器窗口。如果发生这种情况，`movementX` 和 `movementY` 可能会被设置成 0。
+```js
+function canvasDraw() {
+  ctx.fillStyle = "black";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.fillStyle = "#f00";
+  ctx.beginPath();
+  ctx.arc(x, y, RADIUS, 0, degToRad(360), true);
+  ctx.fill();
+}
+```
 
 ## iframe 的限制
 
-指针锁定一次只能锁定一个 iframe。如果你锁定了一个 iframe，你不能试图锁定另外一个 iframe 然后把目标转移到这个 iframe 上；指针锁定将会出错。为了避免这一问题，首先解锁那个锁定的 iframe，然后再锁定另外一个。
+指针锁定一次只能锁定一个 {{htmlelement("iframe")}}。如果你锁定一个 `<iframe>`，则无法锁定另一个并将目标转移到它；指​​针锁定将出错。要避免此限制，请先解锁已锁定的 `<iframe>`，然后锁定另一个。
+
+虽然 `<iframe>` 默认工作，但“沙盒化”的 `<iframe>` 会阻止指针锁定。要避免此限制，请使用 `<iframe sandbox="allow-pointer-lock">`。
 
-在 iframe 默认的情况下， "sandboxed" iframes 会阻止指针锁定。避免这种限制的能力，即以属性/值 `<iframe sandbox="allow-pointer-lock">` 组合的形式 , 有望很快在 Chrome 中出现。
+## 规范
+
+{{Specifications}}
 
 ## 浏览器兼容性
 
@@ -216,6 +255,5 @@ partial interface MouseEvent {
 
 ## 参见
 
-[W3C Pointer Lock API Specification](http://dvcs.w3.org/hg/pointerlock/raw-file/default/index.html)
-
-[MouseEvent](/zh-CN/DOM/MouseEvent)
+- {{domxref("MouseEvent")}}
+- {{domxref("Element.requestPointerLock()")}}
diff --git a/files/zh-cn/web/api/screen/colordepth/index.md b/files/zh-cn/web/api/screen/colordepth/index.md
index 0494399b9171d4..1d4fd88b9e59f3 100644
--- a/files/zh-cn/web/api/screen/colordepth/index.md
+++ b/files/zh-cn/web/api/screen/colordepth/index.md
@@ -1,11 +1,17 @@
 ---
-title: Screen.colorDepth
+title: Screen：colorDepth 属性
 slug: Web/API/Screen/colorDepth
+l10n:
+  sourceCommit: f2f9346c0c0e9f6676f2df9f1850933e274401de
 ---
 
 {{APIRef("CSSOM")}}
 
-返回屏幕的颜色深度（color depth）。根据 CSSOM( CSS 对象模型 ) 视图，为兼容起见，该值总为 24。
+只读属性 **`Screen.colorDepth`** 返回屏幕的颜色深度（color depth）。根据 CSSOM（CSS 对象模型），某些实现为了兼容性原因总是返回 `24`。请参阅浏览器兼容性部分，以了解不这么做的浏览器。
+
+## 值
+
+一个数字。
 
 ## 示例
 
diff --git a/files/zh-cn/web/api/setinterval/index.md b/files/zh-cn/web/api/setinterval/index.md
deleted file mode 100644
index b57bd6f59538ce..00000000000000
--- a/files/zh-cn/web/api/setinterval/index.md
+++ /dev/null
@@ -1,199 +0,0 @@
----
-title: setInterval()
-slug: Web/API/setInterval
----
-
-{{ApiRef("HTML DOM")}}
-
-{{domxref("Window")}} 和 {{domxref("Worker")}} 接口提供的 **`setInterval()`** 方法重复调用一个函数或执行一个代码片段，在每次调用之间具有固定的时间间隔。
-
-它返回一个 `interval ID`，该 ID 唯一地标识时间间隔，因此你可以稍后通过调用 {{domxref("clearInterval", "clearInterval()")}} 来移除定时器。
-
-## 语法
-
-```js
-var intervalID = setInterval(func, [delay, arg1, arg2, ...]);
-var intervalID = setInterval(function[, delay]);
-var intervalID = setInterval(code, [delay]);
-```
-
-### 参数
-
-- `func`
-  - : 要重复调用的{{jsxref("function", "函数")}}，每经过指定 `delay` 毫秒后执行一次。第一次调用发生在 `delay` 毫秒之后。
-- `code`
-  - : 这个语法是可选的，你可以传递一个字符串来代替一个函数对象，你传递的字符串会被编译然后每经过 `delay` 毫秒执行一次。这个语法因为与 {{jsxref("Global_Objects/eval", "eval()")}} 存在相同的安全风险所以*不推荐*使用。
-- `delay`
-  - : 是每次延迟的毫秒数（一秒等于 1000 毫秒），函数的每次调用会在该延迟之后发生。如果未指定，则其默认值为 0。参见下方的[延迟限制](#延迟限制)以了解详细的 `delay` 的取值范围。
-- `arg1, ..., argN` {{optional_inline}}
-  - : 当计时结束的时候，将被传递给 _func_ 函数的附加参数。
-
-### 返回值
-
-返回值 `intervalID` 是一个非零数值，用来标识通过 `setInterval()` 创建的定时器，这个值可以用来作为 {{domxref("clearInterval()")}} 的参数来清除对应的定时器。
-
-值得注意的是，`setInterval()` 和 {{domxref("setTimeout()")}} 共享同一个 ID 池，并且 `clearInterval()` 和 {{domxref("clearTimeout", "clearTimeout()")}} 在技术上是可互换使用的。但是，我们应该匹配使用 `clearInterval()` 和 `clearTimeout()`，以避免代码杂乱无章，并增强代码的可维护性。
-
-> [!NOTE]
-> 参数 `delay` 会被转换成一个有符号 32 位整数。这将 `delay` 限制到了 2147483647 毫秒以内，因为它在 IDL 中被指定为一个有符号整数。
-
-## 示例
-
-### 例 1：基本语法
-
-下面例子演示了 `setInterval()` 的基本语法。
-
-```js
-var intervalID = setInterval(myCallback, 500, "Parameter 1", "Parameter 2");
-
-function myCallback(a, b) {
-  // Your code here
-  // Parameters are purely optional.
-  console.log(a);
-  console.log(b);
-}
-```
-
-### 例 2：两种颜色的切换
-
-下面的例子会每隔一秒就调用一次 `flashtext()` 函数，直至你按下 Stop 按钮。
-
-#### HTML
-
-```html
-<div id="my_box">
-  <h3>Hello World</h3>
-</div>
-<button id="start">Start</button>
-<button id="stop">Stop</button>
-```
-
-#### CSS
-
-```css
-.go {
-  color: green;
-}
-.stop {
-  color: red;
-}
-```
-
-#### JavaScript
-
-```js
-// variable to store our intervalID
-let nIntervId;
-
-function changeColor() {
-  // check if already an interval has been set up
-  if (!nIntervId) {
-    nIntervId = setInterval(flashText, 1000);
-  }
-}
-
-function flashText() {
-  const oElem = document.getElementById("my_box");
-  if (oElem.className === "go") {
-    oElem.className = "stop";
-  } else {
-    oElem.className = "go";
-  }
-}
-
-function stopTextColor() {
-  clearInterval(nIntervId);
-  // release our intervalID from the variable
-  nIntervId = null;
-}
-
-document.getElementById("start").addEventListener("click", changeColor);
-document.getElementById("stop").addEventListener("click", stopTextColor);
-```
-
-#### 结果
-
-{{EmbedLiveSample("例 2：两种颜色的切换")}}
-
-参见：[`clearInterval()`](/zh-CN/docs/Web/API/clearInterval)。
-
-## “this”的问题
-
-当你给 `setInterval()` 传递一个方法或者函数的时候，方法/函数 在被调用时会绑定错误的 [`this`](/zh-CN/docs/Web/JavaScript/Reference/Operators/this) 值。这个问题在 [JavaScript 参考](/zh-CN/docs/Web/JavaScript/Reference/Operators/this#as_an_object_method) 进行了详细解释。
-
-### 解释
-
-被 `setInterval()` 调用的代码在与调用它的函数不同的上下文中运行。因此，被调用函数的 [`this`](/zh-CN/docs/Web/JavaScript/Reference/Operators/this) 关键字被设置为了 `windows`（或 `global`）对象，而不是调用 `setTimeout` 时的 `this`。请看以下的示例（它使用 `setTimeout()` 代替了 `setInterval()`——但两种定时器都具有这一的问题）：
-
-```js
-myArray = ["zero", "one", "two"];
-
-myArray.myMethod = function (sProperty) {
-  alert(arguments.length > 0 ? this[sProperty] : this);
-};
-
-myArray.myMethod(); // prints "zero,one,two"
-myArray.myMethod(1); // prints "one"
-setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second
-setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1,5 seconds
-// passing the 'this' object with .call won't work
-// because this will change the value of this inside setTimeout itself
-// while we want to change the value of this inside myArray.myMethod
-// in fact, it will be an error because setTimeout code expects this to be the window object:
-setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
-```
-
-如你所见，`this` 在旧版 JavaScript 中无法被传递给回调函数。
-
-### 一个可能的解决方案
-
-所有现代 JavaScript 运行时（浏览器或其他地方）都支持[箭头函数](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)（携带 `this` 对象）——允许我们在 `myArray` 方法内，编写 `setInterval( () => this.myMethod)` 以在回调函数中使用 `this` 指代 `myArray`。
-
-如果你需要支持 IE 浏览器，请使用 [`Function.prototype.bind()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) 方法，它允许你指定调用给定函数时 `this` 的值。这可以让你避免因为上下文的不同而导致调用的函数的 `this` 不明确而出现的问题。
-
-## 使用说明
-
-`setInterval()` 函数通常用于为重复执行的函数设置一个时间间隔（例如：动画）。你可以使用 {{domxref("clearInterval()")}} 取消定时器。
-
-如果你希望在指定的延迟后，仅执行*一次*函数，请使用 {{domxref("setTimeout()")}}。
-
-### 延迟限制
-
-定时器是可以嵌套的；这意味着，`setInterval()` 的回调中可以嵌入对 `setInterval()` 的调用以创建另一个定时器，即使第一个定时器还在运行。为了减轻这对性能产生的潜在影响，一旦定时器嵌套超过 5 层深度，浏览器将自动强制设置定时器的最小时间间隔为 4 毫秒。如果尝试将深层嵌套中调用 `setInterval()` 的延迟设定为小于 4 毫秒的值，其将被固定为 4 毫秒。
-
-在某些情况下，浏览器可能会强制执行更严格的最小时间间隔限制，尽管这些情况是不常见的。另外，请注意每次调用回调函数之间经过的实际时间可能会比给定的 `delay` 长；有关的示例，请参见[实际延时比设定值更久的原因](/zh-CN/docs/Web/API/setTimeout#延时比指定值更长的原因)。
-
-### 确保执行时间短于定时器时间间隔
-
-如果你的代码逻辑执行时间可能比定时器时间间隔要长，建议你使用递归调用了 {{domxref("setTimeout()")}} 的具名函数。例如，使用 `setInterval()` 以 5 秒的间隔轮询服务器，可能因网络延迟、服务器无响应以及许多其他的问题而导致请求无法在分配的时间内完成。因此，你可能会发现排队的 XHR 请求没有按顺序返回。
-
-在这些场景下，应首选递归调用 `setTimeout()` 的模式：
-
-```js
-(function loop() {
-  setTimeout(function () {
-    // Your logic here
-
-    loop();
-  }, delay);
-})();
-```
-
-在上面的代码片段中，声明了一个具名函数 `loop()`，并被立即执行。`loop()` 在完成代码逻辑的执行后，会在内部递归调用 `setTimeout()`。虽然该模式不保证以固定的时间间隔执行，但它保证了上一次定时任务在递归前已经完成。
-
-## 规范
-
-{{Specifications}}
-
-## 浏览器兼容性
-
-{{Compat}}
-
-## 参见
-
-- [Polyfill of `setInterval` which allows passing arguments to the callback in `core-js`](https://github.com/zloirock/core-js#settimeout-and-setinterval)
-- {{domxref("setTimeout")}}
-- {{domxref("clearTimeout")}}
-- {{domxref("clearInterval")}}
-- {{domxref("window.requestAnimationFrame")}}
diff --git a/files/zh-cn/web/api/streams_api/using_readable_streams/index.md b/files/zh-cn/web/api/streams_api/using_readable_streams/index.md
index 6a6f1d487eaa1e..1257a5e512f990 100644
--- a/files/zh-cn/web/api/streams_api/using_readable_streams/index.md
+++ b/files/zh-cn/web/api/streams_api/using_readable_streams/index.md
@@ -233,7 +233,7 @@ readableStream
 > [!NOTE]
 > 为了使用 {{domxref("FetchEvent.respondWith()")}} 消费流，排入的流内容的类型必须是 {{jsxref("Uint8Array")}}；例如使用 {{domxref("TextEncoder")}} 进行编码。
 
-自定义流的构造函数有一个 `start()` 方法，该方法使用 {{domxref("setInterval()")}} 去指定每秒生成一个随机的字符串。然后使用 {{domxref("ReadableStreamDefaultController.enqueue()")}} 将它排入流。当按下按钮，取消 interval，并调用名为 `readStream()` 函数再次将数据从流中读取回来。由于我们一直停止排入分块，所以我们也要关闭流。
+自定义流的构造函数有一个 `start()` 方法，该方法使用 {{domxref("Window.setInterval", "setInterval()")}} 去指定每秒生成一个随机的字符串。然后使用 {{domxref("ReadableStreamDefaultController.enqueue()")}} 将它排入流。当按下按钮，取消 interval，并调用名为 `readStream()` 函数再次将数据从流中读取回来。由于我们一直停止排入分块，所以我们也要关闭流。
 
 ```js
 const stream = new ReadableStream({
diff --git a/files/zh-cn/web/api/web_animations_api/using_the_web_animations_api/index.md b/files/zh-cn/web/api/web_animations_api/using_the_web_animations_api/index.md
index 4cfe85bc59dc19..b717587ea4d353 100644
--- a/files/zh-cn/web/api/web_animations_api/using_the_web_animations_api/index.md
+++ b/files/zh-cn/web/api/web_animations_api/using_the_web_animations_api/index.md
@@ -1,5 +1,5 @@
 ---
-title: Using the Web Animations API
+title: 使用 Web 动画 API
 slug: Web/API/Web_Animations_API/Using_the_Web_Animations_API
 ---
 
@@ -17,13 +17,13 @@ web 动画 API 可以让我们用 JavaScript 写动画并且控制动画。本
 
 默认情况下，Firefox 48+ 和 Chrome 36+ 中提供了本文中讨论的基本 Web 动画 API 功能。Webkit 和 Edge 已经将 API 移动到各自的待办事项列表中，但是直到我们看到所有浏览器都有完整的支持，所以有一个便于维护的 polyfill（ [handy maintained polyfill](https://github.com/web-animations/web-animations-js)）可以测试功能支持，并在必要时添加它。
 
-## 用 web 动画 API 写 css 动画
+## 用 Web 动画 API 写 CSS 动画
 
 学习 Web 动画 API 的更为熟悉的方法之一是从大多数网络开发人员开始使用以前的 CSS 动画。CSS 动画有一个熟悉的语法，很好地分解为演示目的。
 
-### The CSS version
+### CSS 版本
 
-这是一个用 CSS 写的滚动动画，显示爱丽丝落下通向仙境的兔子洞 (see the full [code on Codepen](https://codepen.io/rachelnabors/pen/QyOqqW)):
+这是一个用 CSS 写的滚动动画，显示爱丽丝落下通向仙境的兔子洞（参见 [Codepen 上的完整代码](https://codepen.io/rachelnabors/pen/QyOqqW)）：
 
 [![Alice Tumbling down the rabbit's hole.](tumbling-alice_optimized.gif)](https://codepen.io/rachelnabors/pen/rxpmJL)
 
@@ -49,18 +49,18 @@ web 动画 API 可以让我们用 JavaScript 写动画并且控制动画。本
 }
 ```
 
-这样可以以恒定的（线性 linear）速率在 3 秒内改变爱丽丝的颜色和变换的旋转，并无限循环。在 [@keyframes](/zh-CN/docs/Web/CSS/@keyframes) 块中，我们可以看到每个循环（约 0.9 秒）的 30％，Alice 的颜色从黑色变为深红色，然后在循环结束时再次返回。
+这样可以以恒定的（线性）速率在 3 秒内改变爱丽丝的颜色和变换的旋转，并无限循环。在 {{cssxref("@keyframes")}} 块中，我们可以看到每个循环（约 0.9 秒）的 30％，Alice 的颜色从黑色变为深红色，然后在循环结束时再次返回。
 
-### Moving it to JavaScript
+### 将其移动到 JavaScript
 
 现在让我们尝试使用 Web 动画 API 创建相同的动画。
 
-#### Representing keyframes
+#### 表示关键帧
 
-我们首先要做的是创建一个对应于我们的 CSS @keyframes 块的关键帧对象：
+我们首先要做的是创建一个对应于我们的 CSS {{cssxref("@keyframes")}} 块的关键帧对象：
 
 ```js
-var aliceTumbling = [
+const aliceTumbling = [
   { transform: "rotate(0) translate3D(-50%, -50%, 0)", color: "#000" },
   { color: "#431236", offset: 0.3 },
   { transform: "rotate(360deg) translate3D(-50%, -50%, 0)", color: "#000" },
@@ -77,10 +77,10 @@ var aliceTumbling = [
 
 #### 表示时间属性
 
-我们还需要创建一个定时属性的对象 (an {{domxref("AnimationEffectTimingProperties")}} object) 对应于爱丽丝动画中的值：
+我们还需要创建一个定时属性的对象对应于爱丽丝动画中的值：
 
 ```js
-var aliceTiming = {
+const aliceTiming = {
   duration: 3000,
   iterations: Infinity,
 };
@@ -88,8 +88,8 @@ var aliceTiming = {
 
 你会注意到这里有一些差异，如何在 CSS 中表示等价的值：
 
-- 一个，持续时间是毫秒，而不是秒 - 3000 不是 3 秒.。像{{domxref("WindowTimers.setTimeout()")}} 和{{domxref("Window.requestAnimationFrame()")}}, Web 动画 API 只支持毫秒。
-- The other thing you'll notice is that it's `iterations`, not `iteration-count`.
+- 第一个是：持续时间是毫秒，而不是秒——3000 不是 3 秒。像 {{domxref("Window.setTimeout", "setTimeout()")}} 和{{domxref("Window.requestAnimationFrame()")}}，Web 动画 API 只支持毫秒。
+- 你会注意到的另一件事是，它是 `iterations`，而不是 `iteration-count`。
 
 > [!NOTE]
 > CSS 动画中使用的属性值与 Web 动画中使用的属性值存在一些小的差异。比如，Web 动画中不能使用字符串“infinite”，而是使用 Javascript 的关键字 Infinity。以及我们用 `easing` 来代替`timing-function`。我们不必在这列出`easing`的值，因为不像在 CSS 动画里，默认的"[animation-timing-function](/zh-CN/docs/Web/CSS/animation-timing-function)"是`ease`。页面动画 API 的默认 easing 是`linear`— 而这就是我们想要的。
@@ -133,9 +133,9 @@ document.getElementById("alice").animate(
 );
 ```
 
-## 使用 play()，pause()，reverse() 和 playbackRate 控制播放
+## 使用 play()、pause()、reverse() 和 updatePlaybackRate() 控制播放
 
-虽然我们可以使用 Web 动画 API 编写 CSS 动画，其中 API 真正派上用场的是操纵动画的播放。Web 动画 API 提供了一些控制播放的有用方法。让我们来看看在 Growing / Shrinking Alice 游戏中暂停和播放动画（请查看 Codepen 的完整代码 [full code on Codepen](https://codepen.io/rachelnabors/pen/PNYGZQ)）：
+虽然我们可以使用 Web 动画 API 编写 CSS 动画，其中 API 真正派上用场的是操纵动画的播放。Web 动画 API 提供了一些控制播放的有用方法。让我们来看看在 Growing / Shrinking Alice 游戏中暂停和播放动画（请查看 [Codepen 上的完整代码](https://codepen.io/rachelnabors/pen/PNYGZQ)）：
 
 [![Playing the growing and shrinking game with Alice.](growing-shrinking_article_optimized.gif)](https://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010)
 
@@ -146,14 +146,14 @@ document.getElementById("alice").animate(
 稍后我们会再讨论爱丽丝的动画，但现在我们来看看蛋糕的动画：
 
 ```js
-var nommingCake = document
+const nommingCake = document
   .getElementById("eat-me_sprite")
   .animate(
     [{ transform: "translateY(0)" }, { transform: "translateY(-80%)" }],
     {
       fill: "forwards",
       easing: "steps(4, end)",
-      duration: aliceChange.effect.timing.duration / 2,
+      duration: aliceChange.effect.getComputedTiming().duration / 2,
     },
   );
 ```
@@ -173,16 +173,16 @@ nommingCake.play();
 特别地，我们想将其链接到爱丽丝的动画，所以当蛋糕被吃掉时，她变得更大。我们可以通过以下功能来实现：
 
 ```js
-var growAlice = function () {
-  // Play Alice's animation.
+const growAlice = () => {
+  // 播放爱丽丝的动画。
   aliceChange.play();
 
-  // Play the cake's animation.
+  // 播放蛋糕的动画。
   nommingCake.play();
 };
 ```
 
-当用户握住鼠标或者在触摸屏上按住他们的手指在蛋糕上时，我们现在可以调用 growAlice 来使所有动画发挥作用：
+当用户握住鼠标或者在触摸屏上按住他们的手指在蛋糕上时，我们现在可以调用 `growAlice` 来使所有动画发挥作用：
 
 ```js
 cake.addEventListener("mousedown", growAlice, false);
@@ -200,7 +200,7 @@ cake.addEventListener("touchstart", growAlice, false);
 让我们先来看一下 playbackRate——一个负值的播放速度将导致一个动画反向播放。当爱丽丝从瓶中喝酒时，她越来越小。这是因为瓶子将动画的播放速度从 1 更改为 -1：
 
 ```js
-var shrinkAlice = function () {
+const shrinkAlice = () => {
   aliceChange.playbackRate = -1;
   aliceChange.play();
 };
@@ -227,8 +227,8 @@ setInterval(function () {
 但是通过点击或点击来敦促他们使他们通过乘以播放速度来加快速度：
 
 ```js
-var goFaster = function () {
-  redQueen_alice.playbackRate *= 1.1;
+const goFaster = () => {
+  redQueen_alice.updatePlaybackRate(redQueen_alice.playbackRate * 1.1);
 };
 
 document.addEventListener("click", goFaster);
@@ -252,13 +252,15 @@ document.getAnimations().forEach(function (animation) {
 另一件与 CSS 动画有关的难点就是创建依赖于其他动画提供的值。例如，在“成长和收缩爱丽丝”游戏的例子中，你可能会注意到蛋糕的持续时间有些奇怪：
 
 ```js
-duration: aliceChange.effect.timing.duration / 2;
+document.getElementById("eat-me_sprite").animate([], {
+  duration: aliceChange.effect.timing.duration / 2,
+});
 ```
 
 要了解这里发生了什么，让我们来看看 Alice 的动画：
 
 ```js
-var aliceChange = document
+const aliceChange = document
   .getElementById("alice")
   .animate(
     [
@@ -296,11 +298,11 @@ aliceChange.currentTime = aliceChange.effect.timing.duration / 2;
 当设置蛋糕和瓶子的持续时间时，我们可以做同样的事情：
 
 ```js
-var drinking = document
+const drinking = document
   .getElementById("liquid")
   .animate([{ height: "100%" }, { height: "0" }], {
     fill: "forwards",
-    duration: aliceChange.effect.timing.duration / 2,
+    duration: aliceChange.effect.getComputedTiming().duration / 2,
   });
 drinking.pause();
 ```
@@ -310,37 +312,33 @@ drinking.pause();
 我们还可以使用 Web 动画 API 来确定动画当前的时间。当你用尽蛋糕吃或者清空瓶子时，游戏就结束了。哪个角色扮演者取决于爱丽丝在她的动画中有多远，无论她是否变得太大，不能进入小门太小，无法达到打开门的钥匙。我们可以弄清楚她是否在动画的大端或小端，让她的动画当前时间 ([`currentTime`](/zh-CN/docs/Web/API/Animation/currentTime)) 被她的 activeDuration 分成：
 
 ```js
-var endGame = function() {
-
+const endGame = () => {
   // get Alice's timeline's playhead location
-  var alicePlayhead = aliceChange.currentTime;
-  var aliceTimeline = aliceChange.effect.activeDuration;
+  const alicePlayhead = aliceChange.currentTime;
+  const aliceTimeline = aliceChange.effect.getComputedTiming().activeDuration;
 
   // stops Alice's and other animations
   stopPlayingAlice();
 
   // depending on which third it falls into
-  var aliceHeight = alicePlayhead/aliceTimeline;
+  const aliceHeight = alicePlayhead / aliceTimeline;
 
-  if (aliceHeight <= .333){
+  if (aliceHeight <= 0.333) {
     // Alice got smaller!
-    ...
-
-  } else if (aliceHeight >= .666) {
+    // …
+  } else if (aliceHeight >= 0.666) {
     // Alice got bigger!
-    ...
-
+    // …
   } else {
     // Alice didn't change significantly
-    ...
-
+    // …
   }
-}
+};
 ```
 
 > **备注：** `getAnimations()` and `effect` are not fully supported as of this writing, but the polyfill does support them today.
 
-## Callbacks and promises
+## 回调和 promise
 
 CSS 动画和转换有自己的事件侦听器，这些也可以通过 Web 动画 API：
 
@@ -367,7 +365,7 @@ Prefer promises? The Web Animations API also specifies two promises: [`onfinish`
 
 这些是 Web 动画 API 的基本功能，其中大部分功能已在最新版本的 Firefox 和 Chrome 中得到支持。到目前为止，你应该准备好在浏览器中“跳下兔子洞”，动画制作动画实验！如果你正在使用 API 并要共享，请尝试使用#WAAPI 主题标签。我们将会观看并且将编写更多的教程来涵盖更多的功能，支持传播！
 
-## See also
+## 参见
 
 - The [full suite of Alice in Wonderland demos](https://codepen.io/collection/bpEza/) on CodePen for you to play with, fork, and share
 - [Animating like you just don’t care with Element.animate](https://hacks.mozilla.org/2016/08/animating-like-you-just-dont-care-with-element-animate/) — a great article to read that explains more on the background of the Web Animations API, and why it is more performant than other web animation methods
diff --git a/files/zh-cn/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md b/files/zh-cn/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md
index 72c1641884a944..7fb3618ed3e6ae 100644
--- a/files/zh-cn/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md
+++ b/files/zh-cn/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md
@@ -17,25 +17,25 @@ slug: Web/API/Web_Workers_API/Functions_and_classes_available_to_workers
 
 一些函数在所有的 worker 和主线程中均可用（来自 `WindowOrWorkerGlobalScope`）：
 
-- {{domxref("WorkerGlobalScope.atob()", "atob()")}}
-- {{domxref("WorkerGlobalScope.btoa()", "btoa()")}}
-- {{domxref("clearInterval()")}}
-- {{domxref("clearTimeout()")}}
-- {{domxref("createImageBitmap()")}}
-- {{domxref("WorkerGlobalScope.dump()", "dump()")}} {{non-standard_inline}}
-- {{domxref("WorkerGlobalScope.fetch()", "fetch()")}}
-- {{domxref("WorkerGlobalScope.queueMicrotask()", "queueMicrotask()")}}
-- {{domxref("reportError()")}}
-- {{domxref("setInterval()")}}
-- {{domxref("setTimeout()")}}
-- {{DOMxRef("WorkerGlobalScope.structuredClone", "structuredClone()")}}
-- {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()", "requestAnimationFrame()")}}（仅专用 worker）
-- {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()", "cancelAnimationFrame()")}}（仅专用 worker）
+- {{domxref("WorkerGlobalScope.atob()")}}
+- {{domxref("WorkerGlobalScope.btoa()")}}
+- {{domxref("WorkerGlobalScope.clearInterval()")}}
+- {{domxref("WorkerGlobalScope.clearTimeout()")}}
+- {{domxref("WorkerGlobalScope.createImageBitmap()")}}
+- {{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}}
+- {{domxref("WorkerGlobalScope.fetch()")}}
+- {{domxref("WorkerGlobalScope.queueMicrotask()")}}
+- {{domxref("WorkerGlobalScope.reportError()")}}
+- {{domxref("WorkerGlobalScope.setInterval()")}}
+- {{domxref("WorkerGlobalScope.setTimeout()")}}
+- {{domxref("WorkerGlobalScope.structuredClone()")}}
+- {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()")}}（仅专用 worker）
+- {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()")}}（仅专用 worker）
 
 以下函数**仅**在 worker 中可用：
 
-- {{domxref("WorkerGlobalScope.importScripts", "WorkerGlobalScope.importScripts()")}}（所有的 worker）
-- {{domxref("DedicatedWorkerGlobalScope.postMessage")}}（仅专用 worker）
+- {{domxref("WorkerGlobalScope.importScripts()")}}（所有的 worker）
+- {{domxref("DedicatedWorkerGlobalScope.postMessage()")}}（仅专用 worker）
 
 ## Worker 中可用的 Web API
 
diff --git a/files/zh-cn/web/api/web_workers_api/index.md b/files/zh-cn/web/api/web_workers_api/index.md
index 803ec4411eb2e4..1962761be5b3b6 100644
--- a/files/zh-cn/web/api/web_workers_api/index.md
+++ b/files/zh-cn/web/api/web_workers_api/index.md
@@ -38,25 +38,25 @@ worker 在一个与当前 {{DOMxRef("window")}} 不同的全局上下文中运
 
 所有 worker 和主线程（来自 `WindowOrWorkerGlobalScope`）共有的一些函数（子集）是：
 
-- {{domxref("WorkerGlobalScope.atob()", "atob()")}}
-- {{domxref("WorkerGlobalScope.btoa()", "btoa()")}}
-- {{domxref("clearInterval()")}}
-- {{domxref("clearTimeout()")}}
-- {{domxref("createImageBitmap()")}}
-- {{domxref("WorkerGlobalScope.dump()", "dump()")}} {{non-standard_inline}}
-- {{domxref("WorkerGlobalScope.fetch()", "fetch()")}}
-- {{domxref("WorkerGlobalScope.queueMicrotask()", "queueMicrotask()")}}
-- {{domxref("reportError()")}}
-- {{domxref("setInterval()")}}
-- {{domxref("setTimeout()")}}
-- {{DOMxRef("WorkerGlobalScope.structuredClone", "structuredClone()")}}
-- {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()", "requestAnimationFrame()")}}（仅专用 worker）
-- {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()", "cancelAnimationFrame()")}}（仅专用 worker）
+- {{domxref("WorkerGlobalScope.atob()")}}
+- {{domxref("WorkerGlobalScope.btoa()")}}
+- {{domxref("WorkerGlobalScope.clearInterval()")}}
+- {{domxref("WorkerGlobalScope.clearTimeout()")}}
+- {{domxref("WorkerGlobalScope.createImageBitmap()")}}
+- {{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}}
+- {{domxref("WorkerGlobalScope.fetch()")}}
+- {{domxref("WorkerGlobalScope.queueMicrotask()")}}
+- {{domxref("WorkerGlobalScope.reportError()")}}
+- {{domxref("WorkerGlobalScope.setInterval()")}}
+- {{domxref("WorkerGlobalScope.setTimeout()")}}
+- {{domxref("WorkerGlobalScope.structuredClone()")}}
+- {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()")}}（仅专用 worker）
+- {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()")}}（仅专用 worker）
 
 以下函数**仅**对 worker 可用：
 
-- {{domxref("WorkerGlobalScope.importScripts", "WorkerGlobalScope.importScripts()")}}（所有 worker）
-- {{domxref("DedicatedWorkerGlobalScope.postMessage")}}（仅限专用 worker）
+- {{domxref("WorkerGlobalScope.importScripts()")}}（所有 worker）
+- {{domxref("DedicatedWorkerGlobalScope.postMessage()")}}（仅限专用 worker）
 
 ### 支持的 Web API
 
diff --git a/files/zh-cn/web/api/web_workers_api/using_web_workers/index.md b/files/zh-cn/web/api/web_workers_api/using_web_workers/index.md
index d6e8c4f7bfaee6..b10c96ebe6ba7f 100644
--- a/files/zh-cn/web/api/web_workers_api/using_web_workers/index.md
+++ b/files/zh-cn/web/api/web_workers_api/using_web_workers/index.md
@@ -1,5 +1,5 @@
 ---
-title: 使用 Web Workers
+title: 使用 Web Worker
 slug: Web/API/Web_Workers_API/Using_web_workers
 ---
 
@@ -9,16 +9,16 @@ Web Worker 为 Web 内容在后台线程中运行脚本提供了一种简单的
 
 本文详细介绍了如何使用 web worker。
 
-## Web Workers API
+## Web Worker API
 
 一个 worker 是使用一个构造函数创建的一个对象（例如 {{domxref("Worker.Worker", "Worker()")}}）运行一个命名的 JavaScript 文件——这个文件包含将在 worker 线程中运行的代码; worker 运行在另一个全局上下文中，不同于当前的{{domxref("window")}}。因此，在 {{domxref("Worker")}} 内通过 {{domxref("window")}} 获取全局作用域（而不是{{domxref("window.self","self")}}）将返回错误。
 
 在专用 worker 的情况下，{{domxref("DedicatedWorkerGlobalScope")}} 对象代表了 worker 的上下文（专用 worker 是指标准 worker 仅在单一脚本中被使用；共享 worker 的上下文是 {{domxref("SharedWorkerGlobalScope")}} 对象）。一个专用 worker 仅能被首次生成它的脚本使用，而共享 worker 可以同时被多个脚本使用。
 
 > [!NOTE]
-> 参见 [Web Workers API 落地页](/zh-CN/docs/Web/API/Web_Workers_API)以获取 worker 的参考文档和更多指引。
+> 参见 [Web Worker API 落地页](/zh-CN/docs/Web/API/Web_Workers_API)以获取 worker 的参考文档和更多指引。
 
-在 worker 线程中你可以运行任何你喜欢的代码，不过有一些例外情况。比如：在 worker 内，不能直接操作 DOM 节点，也不能使用 {{domxref("window")}} 对象的默认方法和属性。但是你可以使用大量 `window` 对象之下的东西，包括 [WebSockets](/zh-CN/docs/Web/API/WebSockets_API)，以及 [IndexedDB](/zh-CN/docs/Web/API/IndexedDB_API) 等数据存储机制。查看 [Web Workers 可以使用的函数和类](/zh-CN/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers) 获取详情。
+在 worker 线程中你可以运行任何你喜欢的代码，不过有一些例外情况。比如：在 worker 内，不能直接操作 DOM 节点，也不能使用 {{domxref("window")}} 对象的默认方法和属性。但是你可以使用大量 `window` 对象之下的东西，包括 [WebSockets](/zh-CN/docs/Web/API/WebSockets_API)，以及 [IndexedDB](/zh-CN/docs/Web/API/IndexedDB_API) 等数据存储机制。查看 [Web Worker 可以使用的函数和类](/zh-CN/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers)获取详情。
 
 workers 和主线程间的数据传递通过这样的消息机制进行——双方都使用 `postMessage()` 方法发送各自的消息，使用 `onmessage` 事件处理函数来响应消息（消息被包含在 [`message`](/zh-CN/docs/Web/API/BroadcastChannel/message_event) 事件的 data 属性中）。这个过程中数据并不是被共享而是被复制。
 
@@ -136,7 +136,7 @@ importScripts("foo.js", "bar.js"); /* 引入两个脚本 */
 importScripts("//example.com/hello.js"); /* 你可以从其他来源导入脚本 */
 ```
 
-浏览器加载并运行每一个列出的脚本。每个脚本中的全局对象都能够被 worker 使用。如果脚本无法加载，将抛出 `NETWORK_ERROR` 异常，接下来的代码也无法执行。而之前执行的代码（包括使用 {{domxref("setTimeout()")}} 异步执行的代码）依然能够运行。`importScripts()` **之后**的函数声明依然会被保留，因为它们始终会在其他代码之前运行。
+浏览器加载并运行每一个列出的脚本。每个脚本中的全局对象都能够被 worker 使用。如果脚本无法加载，将抛出 `NETWORK_ERROR` 异常，接下来的代码也无法执行。而之前执行的代码（包括使用 {{domxref("WorkerGlobalScope.setTimeout", "setTimeout()")}} 异步执行的代码）依然能够运行。`importScripts()` **之后**的函数声明依然会被保留，因为它们始终会在其他代码之前运行。
 
 > [!NOTE]
 > 脚本的下载顺序不固定，但执行时会按照传入 `importScripts()` 中的文件名顺序进行。这个过程是同步完成的；直到所有脚本都下载并运行完毕，`importScripts()` 才会返回。
@@ -812,25 +812,25 @@ worker 将属性 `onmessage` 设置为一个函数，当 worker 对象调用 `po
 你可以在 web worker 中使用大多数的标准 JavaScript 特性，包括：
 
 - {{domxref("Navigator")}}
-- {{domxref("XMLHttpRequest")}}
+- {{domxref("WorkerGlobalScope.fetch", "fetch()")}}
 - {{jsxref("Global_Objects/Array", "Array")}}、{{jsxref("Global_Objects/Date", "Date")}}、{{jsxref("Global_Objects/Math", "Math")}} 和 {{jsxref("Global_Objects/String", "String")}}
-- {{domxref("setTimeout()")}} 和 {{domxref("setInterval()")}}
+- {{domxref("WorkerGlobalScope.setTimeout", "setTimeout()")}} 和 {{domxref("WorkerGlobalScope.setInterval", "setInterval()")}}
 
 在一个 worker 中最主要的你*不能*做的事情就是直接影响父页面。包括操作父页面的节点以及使用页面中的对象。你只能间接地实现，通过 {{domxref("DedicatedWorkerGlobalScope.postMessage")}} 回传消息给主脚本，然后从主脚本那里执行操作或变化。
 
 > [!NOTE]
-> 你可以使用网站测试一个方法是否对 worker 可用： <https://worker-playground.glitch.me/>。例如，如果你在 Firefox 84 的网站上输入 [EventSource](/zh-CN/docs/Web/API/EventSource)，你会发现在 service worker 不支持这个方法，但在专用和共享 worker 中支持。
+> 你可以使用网站测试一个方法是否对 worker 可用：<https://worker-playground.glitch.me/>。例如，如果你在 Firefox 84 的网站上输入 {{domxref("EventSource")}}，你会发现在 service worker 不支持这个方法，但在专用和共享 worker 中支持。
 
 > [!NOTE]
-> 获取 worker 中完整的方法列表，请参阅 [worker 可用的方法和接口](/zh-CN/docs/Web/Reference/Functions_and_classes_available_to_workers)。
+> 获取 worker 中完整的方法列表，请参阅 [worker 可用的方法和接口](/zh-CN/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers)。
 
 ## 规范
 
 {{Specifications}}
 
-## 相关链接
+## 参见
 
-- [`Worker`](/zh-CN/docs/Web/API/Worker) 接口
-- [`SharedWorker`](/zh-CN/docs/Web/API/SharedWorker) 接口
-- [worker 可用的方法](/zh-CN/docs/Web/API/Worker/Functions_and_classes_available_to_workers)
-- [`OffscreenCanvas`](/zh-CN/docs/Web/API/OffscreenCanvas) 接口
+- {{domxref("Worker")}} 接口
+- {{domxref("SharedWorker")}} 接口
+- [worker 可用的方法](/zh-CN/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers)
+- {{domxref("OffscreenCanvas")}} 接口
diff --git a/files/zh-cn/web/api/webgl_api/by_example/simple_color_animation/index.md b/files/zh-cn/web/api/webgl_api/by_example/simple_color_animation/index.md
index 7b789a78151071..06047e00a7f0d6 100644
--- a/files/zh-cn/web/api/webgl_api/by_example/simple_color_animation/index.md
+++ b/files/zh-cn/web/api/webgl_api/by_example/simple_color_animation/index.md
@@ -13,7 +13,7 @@ slug: Web/API/WebGL_API/By_example/Simple_color_animation
 
 本案例使用{{Glossary("WebGL")}}来实现简单的色彩动画和用户交互效果，用户可以通过按按钮来开始/暂停/重新开始动画。
 
-我们把 {{Glossary("WebGL")}}函数放在一个定时循环器里 (`setInterval`)。通过监听点击事件来让用户开始/暂停动画。并通过定时器来循环执行绘制指令 (通常是逐帧动画，这次我们设置为逐秒动画)
+我们把 {{Glossary("WebGL")}} 函数放在一个定时循环器里（`setInterval`）。通过监听点击事件来让用户开始/暂停动画。并通过定时器来循环执行绘制指令（通常是逐帧动画，这次我们设置为逐秒动画）
 
 ```html
 <p>一个色彩动画的简单 WebGl 程序</p>
diff --git a/files/zh-cn/web/api/window/beforeprint_event/index.md b/files/zh-cn/web/api/window/beforeprint_event/index.md
index 98df9a56991fba..238b96243ac2b2 100644
--- a/files/zh-cn/web/api/window/beforeprint_event/index.md
+++ b/files/zh-cn/web/api/window/beforeprint_event/index.md
@@ -5,7 +5,7 @@ slug: Web/API/Window/beforeprint_event
 
 {{APIRef}}
 
-当相关联的文档即将打印或关闭打印预览时，将触发 **`beforeprint`** 事件。
+**`beforeprint`** 事件会在相关联的文档即将打印或预览打印时触发。
 
 {{domxref("Window.afterprint_event", "afterprint")}} 和 `beforeprint` 事件允许页面在打印开始之前更改其内容（例如，也许是移除 banner）然后在打印完成后还原这些更改。一般来说，你应该更倾向于使用 [`@media print`](/zh-CN/docs/Web/CSS/CSS_media_queries/Using_media_queries) CSS at 规则，但在某些情况下可能有必要使用这些事件。
 
diff --git a/files/zh-cn/web/api/window/clearinterval/index.md b/files/zh-cn/web/api/window/clearinterval/index.md
new file mode 100644
index 00000000000000..52d73a7f1e95d0
--- /dev/null
+++ b/files/zh-cn/web/api/window/clearinterval/index.md
@@ -0,0 +1,46 @@
+---
+title: Window：clearInterval() 方法
+slug: Web/API/Window/clearInterval
+l10n:
+  sourceCommit: 1b4e6d1156e8471d38deeea1567c35ef412c5f42
+---
+
+{{ApiRef("HTML DOM")}}
+
+{{domxref("Window")}} 接口的 **`clearInterval()`** 方法可取消先前通过调用 {{domxref("Window.setInterval", "setInterval()")}} 设置的重复定时任务。如果提供的参数未指定先前建立的操作，则此方法不执行任何动作。
+
+## 语法
+
+```js-nolint
+clearInterval(intervalID)
+```
+
+### 参数
+
+- `intervalID`
+  - : 你要取消的重复操作的标识符。这个 ID 是由对应的 `setInterval()` 调用返回的。
+
+值得一提的是，{{domxref("Window.setInterval", "setInterval()")}} 和 {{domxref("Window.setTimeout()", "setTimeout()")}} 共享同一个 ID 池，并且 `clearInterval()` 和 {{domxref("Window.clearTimeout", "clearTimeout()")}} 在技术上是可互换使用的。然而，为了清晰起见，你应该尽量避免这种用法。
+
+### 返回值
+
+无（{{jsxref("undefined")}}）。
+
+## 示例
+
+参见 {{domxref("Window.setInterval", "setInterval()")}} 以获取示例。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("Window.setInterval()")}}
+- {{domxref("WorkerGlobalScope.clearInterval()")}}
+- {{domxref("Window.clearTimeout()")}}
+- {{domxref("Window.cancelAnimationFrame()")}}
diff --git a/files/zh-cn/web/api/window/cleartimeout/index.md b/files/zh-cn/web/api/window/cleartimeout/index.md
new file mode 100644
index 00000000000000..7a4d25f0d19416
--- /dev/null
+++ b/files/zh-cn/web/api/window/cleartimeout/index.md
@@ -0,0 +1,80 @@
+---
+title: Window：clearTimeout() 方法
+slug: Web/API/Window/clearTimeout
+l10n:
+  sourceCommit: 1b4e6d1156e8471d38deeea1567c35ef412c5f42
+---
+
+{{APIRef("HTML DOM")}}
+
+{{domxref("Window")}} 接口的 **`clearTimeout()`** 方法取消先前通过调用 {{domxref("Window.setTimeout()")}} 建立的超时任务。
+
+如果参数未标识之前创建的操作，则此方法不执行任何动作。
+
+## 语法
+
+```js-nolint
+clearTimeout(timeoutID)
+```
+
+### 参数
+
+- `timeoutID`
+  - : 你要取消定时器的标识符。该 ID 由相应的 `setTimeout()` 调用返回。
+
+值得注意的是，{{domxref("Window.setTimeout", "setTimeout()")}} 和 {{domxref("Window.setInterval", "setInterval()")}} 共享同一个 ID 池，意味着在技术上可以混用 `clearTimeout()` 和 {{domxref("Window.clearInterval", "clearInterval()")}}。但是，为了清楚起见，你应该避免这样做。
+
+### 返回值
+
+无（{{jsxref("undefined")}}）。
+
+## 示例
+
+在一个网页中运行如下脚本，并且点击一次页面。一秒钟后你会看见一条弹出的信息。如果你在一秒内不停点击页面，警报框将不再出现。
+
+```js
+const alarm = {
+  remind(aMessage) {
+    alert(aMessage);
+    this.timeoutID = undefined;
+  },
+
+  setup() {
+    if (typeof this.timeoutID === "number") {
+      this.cancel();
+    }
+
+    this.timeoutID = setTimeout(
+      (msg) => {
+        this.remind(msg);
+      },
+      1000,
+      "醒醒！",
+    );
+  },
+
+  cancel() {
+    clearTimeout(this.timeoutID);
+  },
+};
+window.addEventListener("click", () => alarm.setup());
+```
+
+## 备注
+
+传入一个无效的 ID 给 `clearTimeout()` 不会有任何影响；也不会抛出异常。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("Window.setTimeout()")}}
+- {{domxref("WorkerGlobalScope.clearTimeout()")}}
+- {{domxref("Window.clearInterval()")}}
+- {{domxref("Window.cancelAnimationFrame()")}}
diff --git a/files/zh-cn/web/api/window/createimagebitmap/index.md b/files/zh-cn/web/api/window/createimagebitmap/index.md
new file mode 100644
index 00000000000000..9c1cfd94b8c255
--- /dev/null
+++ b/files/zh-cn/web/api/window/createimagebitmap/index.md
@@ -0,0 +1,128 @@
+---
+title: Window：createImageBitmap() 方法
+slug: Web/API/Window/createImageBitmap
+l10n:
+  sourceCommit: 58d79e9c2206e0a604cd4d7f6fba5181262af420
+---
+
+{{APIRef("Canvas API")}}
+
+{{domxref("Window")}} 接口的 **`createImageBitmap`** 从给定的来源创建位图，也可以进行裁剪以包含源图像的一部分。它接受各种不同的图像来源，并返回一个会兑现 {{domxref("ImageBitmap")}} 的 {{domxref("Promise")}}。
+
+## 语法
+
+```js-nolint
+createImageBitmap(image)
+createImageBitmap(image, options)
+createImageBitmap(image, sx, sy, sw, sh)
+createImageBitmap(image, sx, sy, sw, sh, options)
+```
+
+### 参数
+
+- `image`
+  - : 图像源，可以是以下值之一：
+    - {{domxref("HTMLImageElement")}}
+    - {{domxref("SVGImageElement")}}
+    - {{domxref("HTMLVideoElement")}}
+    - {{domxref("HTMLCanvasElement")}}
+    - {{domxref("Blob")}}
+    - {{domxref("ImageData")}}
+    - {{domxref("ImageBitmap")}}
+    - {{domxref("OffscreenCanvas")}}
+    - {{domxref("VideoFrame")}}
+- `sx`
+  - : 将从中提取 `ImageBitmap` 的矩形的参考点的 x 坐标。
+- `sy`
+  - : 将从中提取 `ImageBitmap` 的矩形的参考点的 y 坐标。
+- `sw`
+  - : 将从中提取 `ImageBitmap` 的矩形的宽度。此值可以为负数。
+- `sh`
+  - : 将从中提取 `ImageBitmap` 的矩形的高度。此值可以为负数。
+- `options` {{optional_inline}}
+
+  - : 设置图像提取选项的对象。可用的选项包括：
+
+    - `imageOrientation`
+
+      - : 指定位图图像的方向。
+
+        - `from-image`
+          - : 如果存在 EXIF 方向元数据，则根据其来指定图像方向（默认）。
+        - `flipY`
+          - : 如果存在 EXIF 方向元数据，则根据其来指定图像方向，然后垂直翻转。
+        - `none`
+          - : 根据图像的编码来指定图像方向，忽略有关方向的任何元数据（例如，可能添加到图像中的 EXIF 元数据，以指示相机被转向以在人像模式下捕获图像）。
+
+    - `premultiplyAlpha`
+      - : 指定位图的颜色通道是否应与 alpha 通道预乘。以下值之一：`none`、`premultiply` 或 `default`（默认）。
+    - `colorSpaceConversion`
+      - : 指定图像是否应使用色彩空间转换进行解码。`none` 或 `default`（默认）。`default` 值表示使用特定于实现的行为。
+    - `resizeWidth`
+      - : 指定输出宽度的长整数。
+    - `resizeHeight`
+      - : 指定输出高度的长整数。
+    - `resizeQuality`
+      - : 指定用于调整输入大小以匹配输出尺寸的算法。以下值之一：`pixelated`、`low`（默认）、`medium` 或 `high`。
+
+### 返回值
+
+一个 {{jsxref("Promise")}}，会兑现为一个包含给定矩形的位图数据的 {{domxref("ImageBitmap")}} 对象。
+
+## 示例
+
+### 通过精灵表创建精灵
+
+此示例加载精灵表（sprite sheet），从中提取精灵，然后将每个精灵渲染到画布上。精灵表是包含多个较小图像（你希望能够单独渲染每个图像）的图像。
+
+```html hidden
+原图像：<img src="50x50.jpg" />
+<hr />
+<canvas id="myCanvas"></canvas>
+```
+
+```css hidden
+canvas {
+  border: 2px solid green;
+}
+```
+
+```js
+const canvas = document.getElementById("myCanvas"),
+  ctx = canvas.getContext("2d"),
+  image = new Image();
+
+// 等待精灵表加载完成
+image.onload = () => {
+  Promise.all([
+    // 从精灵表中裁剪出两个精灵
+    createImageBitmap(image, 0, 0, 32, 32),
+    createImageBitmap(image, 32, 0, 32, 32),
+    createImageBitmap(image, 0, 0, 50, 50, { imageOrientation: "flipY" }),
+  ]).then((sprites) => {
+    // 将每个精灵绘制到画布上
+    ctx.drawImage(sprites[0], 0, 0);
+    ctx.drawImage(sprites[1], 32, 32);
+    ctx.drawImage(sprites[2], 64, 64);
+  });
+};
+
+// 从图像文件加载精灵表
+image.src = "50x50.jpg";
+```
+
+{{EmbedLiveSample("通过精灵表创建精灵", "100%", "250")}}
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("WorkerGlobalScope.createImageBitmap()")}}
+- {{domxref("CanvasRenderingContext2D.drawImage()")}}
+- {{domxref("ImageData")}}
diff --git a/files/zh-cn/web/api/window/index.md b/files/zh-cn/web/api/window/index.md
index 86b28db686a132..b719ac4f26709a 100644
--- a/files/zh-cn/web/api/window/index.md
+++ b/files/zh-cn/web/api/window/index.md
@@ -134,7 +134,7 @@ _本接口从 {{domxref("EventTarget")}} 接口继承属性。_
 - `window[0]`、`window[1]` 等
   - : 以逐帧形式返回对 `window` 对象的引用，要了解更多细节，参见 {{domxref("Window.frames")}}。
 
-### 已废弃属性
+### 已弃用的属性
 
 - {{domxref("Window.event")}} {{Deprecated_Inline}} {{ReadOnlyInline}}
   - : 返回**当前事件**，即当前由 JavaScript 代码的上下文处理的事件，如果当前没有事件被处理，则返回 `undefined`。应尽可能使用直接传递给事件处理程序的 {{domxref("Event")}} 对象来代替。
@@ -167,15 +167,15 @@ _本接口从 {{domxref("EventTarget")}} 接口继承方法。_
   - : 取消之前使用 {{domxref("Window.requestIdleCallback")}} 安排的回调。
 - {{domxref("Window.clearImmediate()")}}
   - : 取消使用 `setImmediate()` 设置的重复执行任务。
-- {{domxref("clearInterval", "Window.clearInterval()")}}
-  - : 取消使用 {{domxref("setInterval()")}} 设置的重复执行任务。
-- {{domxref("clearTimeout()", "Window.clearTimeout()")}}
-  - : 取消使用 {{domxref("setTimeout()")}} 设置的延时执行任务。
+- {{domxref("Window.clearInterval()")}}
+  - : 取消使用 {{domxref("Window.setInterval()")}} 设置的重复执行任务。
+- {{domxref("Window.clearTimeout()")}}
+  - : 取消使用 {{domxref("Window.setTimeout()")}} 设置的延时执行任务。
 - {{domxref("Window.close()")}}
   - : 关闭当前窗口。
 - {{domxref("Window.confirm()")}}
   - : 显示一个带有用户需要回应的信息对话框。
-- {{domxref("createImageBitmap", "Window.createImageBitmap()")}}
+- {{domxref("Window.createImageBitmap()")}}
   - : 接受各种不同的图像源，并返回一个 {{jsxref("Promise")}}，经兑现可得到 {{domxref("ImageBitmap")}}。可以选择将图片源裁剪成以 _(sx, sy)_ 为起点的像素矩形，宽度为 sw，高度为 sh。
 - {{domxref("EventTarget.dispatchEvent", "Window.dispatchEvent()")}}
   - : 用于触发事件。
@@ -233,11 +233,11 @@ _本接口从 {{domxref("EventTarget")}} 接口继承方法。_
   - : 将文档滚动至特定坐标。
 - {{domxref("Window.setImmediate()")}}
   - : 在浏览器完成其他繁重的任务后执行一个函数。
-- {{domxref("setInterval", "Window.setInterval()")}}
+- {{domxref("Window.setInterval()")}}
   - : 安排一个函数，在给定的毫秒数过去后执行。
 - {{domxref("Window.setResizable()")}} {{Non-standard_Inline}}
   - : 切换用户调整窗口大小的能力。
-- {{domxref("setTimeout", "Window.setTimeout()")}}
+- {{domxref("Window.setTimeout()")}}
   - : 安排函数在给定的时间内执行。
 - {{domxref("Window.sizeToContent()")}} {{Non-standard_Inline}}
   - : 根据窗口的内容确定其大小。
@@ -252,7 +252,7 @@ _本接口从 {{domxref("EventTarget")}} 接口继承方法。_
 - {{domxref("Window.updateCommands()")}} {{Non-standard_Inline}}
   - : 更新当前 chrome 窗口（用户界面）的命令状态。
 
-### 已废弃方法
+### 已弃用的方法
 
 - {{domxref("Window.back()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}
   - : 在窗口历史中后退一步。该方法已被废弃，应该使用 {{domxref("History.back", "history.back()")}} 代替。
diff --git a/files/zh-cn/web/api/window/requestidlecallback/index.md b/files/zh-cn/web/api/window/requestidlecallback/index.md
index f6dd6b6e21d7ad..1bf8b6f843143c 100644
--- a/files/zh-cn/web/api/window/requestidlecallback/index.md
+++ b/files/zh-cn/web/api/window/requestidlecallback/index.md
@@ -45,10 +45,10 @@ requestIdleCallback(callback, options)
 
 {{Compat}}
 
-## 查看更多
+## 参见
 
-- {{domxref("window.cancelIdleCallback()")}}
+- {{domxref("Window.cancelIdleCallback()")}}
 - {{domxref("IdleDeadline")}}
-- {{domxref("window.setTimeout()")}}
-- {{domxref("window.setInterval()")}}
-- {{domxref("window.requestAnimationFrame")}}
+- {{domxref("Window.setTimeout()")}}
+- {{domxref("Window.setInterval()")}}
+- {{domxref("Window.requestAnimationFrame()")}}
diff --git a/files/zh-cn/web/api/window/setimmediate/index.md b/files/zh-cn/web/api/window/setimmediate/index.md
index a2c9525527e869..21004c761a3577 100644
--- a/files/zh-cn/web/api/window/setimmediate/index.md
+++ b/files/zh-cn/web/api/window/setimmediate/index.md
@@ -1,9 +1,9 @@
 ---
-title: window.setImmediate
+title: Window：setImmediate() 方法
 slug: Web/API/Window/setImmediate
 ---
 
-{{APIRef("HTML DOM")}}{{Non-standard_header}}
+{{APIRef("HTML DOM")}} {{deprecated_header}}{{non-standard_header}}
 
 该方法用来把一些需要长时间运行的操作放在一个回调函数里，在浏览器完成后面的其他语句后，就立刻执行这个回调函数。
 
@@ -21,15 +21,15 @@ var immediateID = setImmediate(func);
 
 ## 备注
 
-{{ domxref("window.clearImmediate") }} 方法可以用来取消通过 setImmediate 设置的将要执行的语句，就像 {{ domxref("window.clearTimeout") }} 对应于 {{ domxref("window.setTimeout") }}一样。
+{{DOMxRef("Window.clearImmediate", "clearImmediate()")}} 方法可以用来取消通过 setImmediate 设置的将要执行的语句，就像 {{DOMxRef("Window.clearTimeout", "clearTimeout()")}} 对应于 {{DOMxRef("Window.setTimeout", "setTimeout()")}} 一样。
 
-该方法可以用来替代 `setTimeout(fn, 0)` 去执行[繁重的操作](http://www.nczonline.net/blog/2009/08/11/timed-array-processing-in-javascript/)([heavy operations](http://www.nczonline.net/blog/2009/08/11/timed-array-processing-in-javascript/))
+该方法可以用来替代 `setTimeout(fn, 0)` 去执行[繁重的操作](https://humanwhocodes.com/blog/2009/08/11/timed-array-processing-in-javascript/)。
 
-可以通过以下几种方式来模仿该功能：
+可以通过以下几种方式来模拟该特性：
 
-- {{ domxref("window.postMessage") }} 可以被用来触发一个 immediate 但会产生回调。请注意，Internet Explorer 8 包含 postMessage 的同步版本，这意味着它不能被用来作为代替品。
+- {{DOMxRef("Window.postMessage", "postMessage()")}} 可以被用来触发一个 immediate 但会产生回调。请注意，Internet Explorer 8 包含 postMessage 的同步版本，这意味着它不能被用来作为代替品。
 - [MessageChannel](/zh-CN/docs/Web/API/MessageChannel) 可以在 Web Workers 内部很好的被使用，而 postMessage 的语义意味着它不能在那使用。
-- `setTimeout(fn, 0)`_可以使用_, 然而按照[HTML 规范](https://html.spec.whatwg.org/multipage/webappapis.html#timers), 嵌套深度超过 5 级的定时器，会被限制在 4ms , 他没有为 setImmediate 的天然及时性提供合适的 polyfill.
+- `setTimeout(fn, 0)` *可以*使用，然而按照 [HTML 规范](https://html.spec.whatwg.org/multipage/webappapis.html#timers)，嵌套深度超过 5 级的定时器，会被限制在 4 浩渺，它没有为 `setImmediate` 的天然及时性提供合适的 polyfill。
 
 所有这些技术都被纳入 [robust setImmediate polyfill](https://github.com/NobleJS/setImmediate) 中。
 
@@ -37,10 +37,9 @@ var immediateID = setImmediate(func);
 
 {{Compat}}
 
-## 相关链接
+## 参见
 
-{{ domxref("window.clearImmediate") }}
-
-[Specification: Efficient Script Yielding](https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/setImmediate/Overview.html)
-
-[Microsoft setImmediate API Demo](http://ie.microsoft.com/testdrive/Performance/setImmediateSorting/Default.html)
+- [`core-js` 中 `setImmediate` 的 polyfill](https://github.com/zloirock/core-js#setimmediate)
+- [Microsoft `setImmediate` API 演示](https://jphpsf.github.io/setImmediate-shim-demo/)
+- {{DOMxRef("Window.clearImmediate()")}}
+- {{DOMxRef("Window.requestIdleCallback()")}}
diff --git a/files/zh-cn/web/api/window/setinterval/index.md b/files/zh-cn/web/api/window/setinterval/index.md
new file mode 100644
index 00000000000000..d6ad554973123a
--- /dev/null
+++ b/files/zh-cn/web/api/window/setinterval/index.md
@@ -0,0 +1,200 @@
+---
+title: Window：setInterval() 方法
+slug: Web/API/Window/setInterval
+l10n:
+  sourceCommit: 1b4e6d1156e8471d38deeea1567c35ef412c5f42
+---
+
+{{ApiRef("HTML DOM")}}
+
+{{domxref("Window")}} 接口的 **`setInterval()`** 方法重复调用一个函数或执行一个代码片段，在每次调用之间具有固定的时间间隔。
+
+此方法返回一个间隔 ID，其唯一地标识时间间隔，因此你可以稍后通过调用 {{domxref("Window.clearInterval", "clearInterval()")}} 来移除它。
+
+## 语法
+
+```js-nolint
+setInterval(code)
+setInterval(code, delay)
+
+setInterval(func)
+setInterval(func, delay)
+setInterval(func, delay, arg1)
+setInterval(func, delay, arg1, arg2)
+setInterval(func, delay, arg1, arg2, /* …, */ argN)
+```
+
+### 参数
+
+- `func`
+  - : 要每隔 `delay` 毫秒执行一次的{{jsxref("function", "函数", "", 1)}}。第一次执行发生在 `delay` 毫秒之后。
+- `code`
+  - : 这个可选的语法让你可以传递一个字符串来代替函数，你传递的字符串会被编译然后每经过 `delay` 毫秒执行一次。这个语法因为与 {{jsxref("Global_Objects/eval", "eval()")}} 存在相同的安全风险所以*不推荐*使用。
+- `delay` {{optional_inline}}
+  - : 计时器每次执行指定的函数和代码的延迟时间（以毫秒——千分之一秒——为单位）。如果未指定，则其默认值为 0。参见下方的[延迟限制](#延迟限制)以了解详细的 `delay` 的取值范围。
+- `arg1`、……、`argN` {{optional_inline}}
+  - : 当计时器结束的时候，将被传递给 _func_ 函数的附加参数。
+
+### 返回值
+
+返回值 `intervalID` 是一个非零数值，用来标识调用 `setInterval()` 创建的定时器；这个值可以用来传递给 {{domxref("Window.clearInterval", "clearInterval()")}} 来清除定时器。
+
+值得注意的是，`setInterval()` 和 {{domxref("Window.setTimeout", "setTimeout()")}} 共享同一个 ID 池，并且 `clearInterval()` 和 {{domxref("Window.clearTimeout", "clearTimeout()")}} 在技术上是可互换使用的。然而，为了清晰可见，你应该尝试始终匹配，以避免维护代码时产生混淆。
+
+> [!NOTE]
+> 参数 `delay` 会被转换成一个有符号 32 位整数。这将 `delay` 限制到了 2147483647 毫秒（大约 24.8 天）以内，因为它在 IDL 中被指定为一个有符号整数。
+
+## 示例
+
+### 例 1：基本语法
+
+下面例子演示了 `setInterval()` 的基本语法。
+
+```js
+var intervalID = setInterval(myCallback, 500, "参数 1", "参数 2");
+
+function myCallback(a, b) {
+  // 在这里编写你的代码
+  // 参数完全是可选的。
+  console.log(a);
+  console.log(b);
+}
+```
+
+### 例 2：两种颜色的切换
+
+下面的例子会每隔一秒就调用一次 `flashtext()` 函数，直至你按下停止按钮。
+
+#### HTML
+
+```html
+<div id="my_box">
+  <h3>你好世界</h3>
+</div>
+<button id="start">开始</button>
+<button id="stop">停止</button>
+```
+
+#### CSS
+
+```css
+.go {
+  color: green;
+}
+.stop {
+  color: red;
+}
+```
+
+#### JavaScript
+
+```js
+// 用于存储 intervalID 的变量
+let nIntervId;
+
+function changeColor() {
+  // 检查是否已经设置了定时器
+  if (!nIntervId) {
+    nIntervId = setInterval(flashText, 1000);
+  }
+}
+
+function flashText() {
+  const oElem = document.getElementById("my_box");
+  oElem.className = oElem.className === "go" ? "stop" : "go";
+}
+
+function stopTextColor() {
+  clearInterval(nIntervId);
+  // 释放 intervalID
+  nIntervId = null;
+}
+
+document.getElementById("start").addEventListener("click", changeColor);
+document.getElementById("stop").addEventListener("click", stopTextColor);
+```
+
+#### 结果
+
+{{EmbedLiveSample("例 2：两种颜色的切换")}}
+
+## “this”的问题
+
+当你将一个方法传递给 `setInterval()` 或其他函数时，它在被调用时会绑定错误的 [`this`](/zh-CN/docs/Web/JavaScript/Reference/Operators/this) 值。这个问题在 [JavaScript 参考](/zh-CN/docs/Web/JavaScript/Reference/Operators/this#回调)进行了详细解释。
+
+### 解释
+
+被 `setInterval()` 调用的代码在与调用它的函数不同的上下文中运行。因此，被调用函数的 [`this`](/zh-CN/docs/Web/JavaScript/Reference/Operators/this) 关键字被设置为了 `windows`（或 `global`）对象，而不是调用 `setTimeout` 时的 `this`。请看以下的示例（它使用 `setTimeout()` 代替了 `setInterval()`——但两种定时器都具有这一的问题）：
+
+```js
+const myArray = ["零", "一", "二"];
+
+myArray.myMethod = function (sProperty) {
+  alert(arguments.length > 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // 打印“零，一，二”
+myArray.myMethod(1); // 打印“一”
+setTimeout(myArray.myMethod, 1000); // 在 1 秒后打印“[object Window]”
+setTimeout(myArray.myMethod, 1500, "1"); // 在 1.5 秒后打印“undefined”
+
+// 使用 .call 传递“this”对象不起作用
+// 因为这会改变 setTimeout 自身内部的 this 值
+// 而我们想要改变的是 myArray.myMethod 内部的 this 值
+// 实际上，这会导致错误，因为 setTimeout 代码期望 this 是 window 对象：
+setTimeout.call(myArray, myArray.myMethod, 2000); // 错误：“NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object”
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // 相同的错误
+```
+
+如你所见，在旧版 JavaScript 中无法将 `this` 对象传递给回调函数。
+
+### 一个可能的解决方案
+
+所有现代 JavaScript 运行时（浏览器或其他地方）都支持[箭头函数](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)（携带词法 `this`）——允许我们在 `myArray` 方法内，编写 `setInterval(() => this.myMethod())`。
+
+如果你需要支持 IE 浏览器，请使用 [`Function.prototype.bind()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) 方法，它允许你指定调用给定函数时 `this` 的值。这可以让你避免因为上下文的不同而导致调用的函数的 `this` 不明确而出现的问题。
+
+## 使用说明
+
+`setInterval()` 函数通常用于为重复执行的函数设置一个时间间隔（例如：动画）。你可以使用 {{domxref("Window.clearInterval", "clearInterval()")}} 取消定时器。
+
+如果你希望在指定的延迟后，仅执行*一次*函数，请使用 {{domxref("Window.setTimeout", "setTimeout()")}}。
+
+### 延迟限制
+
+定时器是可以嵌套的；这意味着，`setInterval()` 的回调中可以嵌入对 `setInterval()` 的调用以创建另一个定时器，即使第一个定时器还在运行。为了减轻这对性能产生的潜在影响，一旦定时器嵌套超过 5 层深度，浏览器将自动强制设置定时器的最小时间间隔为 4 毫秒。如果尝试将深层嵌套中调用 `setInterval()` 的延迟设定为小于 4 毫秒的值，其将被固定为 4 毫秒。
+
+在某些情况下，浏览器可能会强制执行更严格的最小时间间隔限制，尽管这些情况是不常见的。另外，请注意每次调用回调函数之间经过的实际时间可能会比给定的 `delay` 长；有关的示例，请参见[实际延时比设定值更久的原因](/zh-CN/docs/Web/API/Window/setTimeout#延时比指定值更长的原因)。
+
+### 确保执行时间短于定时器时间间隔
+
+如果你的代码逻辑执行时间可能比定时器时间间隔要长，建议你使用递归调用了 {{domxref("Window.setTimeout", "setTimeout()")}} 的具名函数。例如，使用 `setInterval()` 以 5 秒的间隔轮询服务器，可能因网络延迟、服务器无响应以及许多其他的问题而导致请求无法在分配的时间内完成。因此，你可能会发现排队的 XHR 请求没有按顺序返回。
+
+在这些场景下，应首选递归调用 `setTimeout()` 的模式：
+
+```js
+(function loop() {
+  setTimeout(function () {
+    // 在这里编写代码逻辑
+
+    loop();
+  }, delay);
+})();
+```
+
+在上面的代码片段中，声明了一个具名函数 `loop()`，并被立即执行。`loop()` 在完成代码逻辑的执行后，会在内部递归调用 `setTimeout()`。虽然该模式不保证以固定的时间间隔执行，但它保证了上一次定时任务在递归前已经完成。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [`core-js` 中 `setInterval` 的 polyfill，支持向回调函数传递参数](https://github.com/zloirock/core-js#settimeout-and-setinterval)
+- {{domxref("Window.clearInterval()")}}
+- {{domxref("WorkerGlobalScope.setInterval()")}}
+- {{domxref("Window.setTimeout()")}}
diff --git a/files/zh-cn/web/api/settimeout/index.md b/files/zh-cn/web/api/window/settimeout/index.md
similarity index 69%
rename from files/zh-cn/web/api/settimeout/index.md
rename to files/zh-cn/web/api/window/settimeout/index.md
index 53526cbf25c023..9a555078a74a28 100644
--- a/files/zh-cn/web/api/settimeout/index.md
+++ b/files/zh-cn/web/api/window/settimeout/index.md
@@ -1,11 +1,13 @@
 ---
-title: setTimeout() 全局函数
-slug: Web/API/setTimeout
+title: Window：setTimeout() 方法
+slug: Web/API/Window/setTimeout
+l10n:
+  sourceCommit: 1b4e6d1156e8471d38deeea1567c35ef412c5f42
 ---
 
 {{APIRef("HTML DOM")}}
 
-全局的 **`setTimeout()`** 方法设置一个定时器，一旦定时器到期，就会执行一个函数或指定的代码片段。
+{{domxref("Window")}} 接口的 **`setTimeout()`** 方法设置一个定时器，一旦定时器到期，就会执行一个函数或指定的代码片段。
 
 ## 语法
 
@@ -17,42 +19,41 @@ setTimeout(functionRef)
 setTimeout(functionRef, delay)
 setTimeout(functionRef, delay, param1)
 setTimeout(functionRef, delay, param1, param2)
-setTimeout(functionRef, delay, param1, param2, /* … ,*/ paramN)
+setTimeout(functionRef, delay, param1, param2, /* …, */ paramN)
 ```
 
 ### 参数
 
 - `functionRef`
-  - : 当定时器到期后，将要执行的 {{jsxref("function")}}。
+  - : 当定时器到期后要执行的{{jsxref("function", "函数", "", 1)}}。
 - `code`
-  - : 这是一个可选语法，允许你包含在定时器到期后编译和执行的字符串而非函数。使用该语法是**不推荐的**，原因和使用 {{jsxref("Global_Objects/eval", "eval()")}} 一样，有安全风险。
+  - : 这是一个代替语法，允许你包含在定时器到期后编译和执行的字符串而非函数。这个语法因为与 {{jsxref("Global_Objects/eval", "eval()")}} 存在相同的安全风险所以**不推荐**使用。
 - `delay` {{optional_inline}}
 
   - : 定时器在执行指定的函数或代码之前应该等待的时间，单位是毫秒。如果省略该参数，则使用值 0，意味着“立即”执行，或者更准确地说，在下一个事件循环执行。
 
     注意，无论是哪种情况，实际延迟可能会比预期长一些，参见下方[延时比指定值更长的原因](#延时比指定值更长的原因)一节的叙述。
 
-    还要注意的是，如果值不是数字，隐含的[类型强制转换](/zh-CN/docs/Glossary/Type_coercion)会静默地对该值进行转换，使其成为一个数字——这可能导致意想不到的、令人惊讶的结果；见[非数字延迟值被静默地强制转化为数字](#非数字延迟值被静默地强制转化为数字)以了解一个示例。
+    还要注意的是，如果值不是数字，隐式的[类型强制转换](/zh-CN/docs/Glossary/Type_coercion)会静默地将其转换为数字——这可能导致意想不到的、令人惊讶的结果；参见[非数字延迟值被静默地强制转化为数字](#非数字延迟值被静默地强制转化为数字)以获取示例。
 
-- `param1`, …, `paramN` {{optional_inline}}
-
-  - : 附加参数，一旦定时器到期，它们会作为参数传递给 `functionRef` 指定的函数。
+- `param1`、……、`paramN` {{optional_inline}}
+  - : 会被传递给由 `functionRef` 指定的函数的附加参数。
 
 ### 返回值
 
-返回值 `timeoutID` 是一个正整数，表示由 `setTimeout()` 调用创建的定时器的编号。这个值可以传递给 {{domxref("clearTimeout","clearTimeout()")}} 来取消该定时器。
+返回值 `timeoutID` 是一个正整数，表示由 `setTimeout()` 调用创建的定时器的标识符。可以将这个值传递给 {{domxref("Window.clearTimeout","clearTimeout()")}} 来取消该定时器。
 
-保证 `timeoutID` 值不会被同一对象（window 或 worker）的后续调用 `setTimeout()` 或 `setInterval()` 重复使用。然而，不同的对象使用不同的 ID 池。
+在定时器仍然激活的情况下，保证 `timeoutID` 值不会被同一窗口（window）中的后续 `setTimeout()` 或 `setInterval()` 调用重复使用。然而，不同的对象使用不同的 ID 池。
 
 ## 描述
 
 使用 {{domxref("clearTimeout()")}} 取消超时。
 
-如果要重复调用某个函数（如每 _N_ 毫秒调用一次），考虑使用 {{domxref("setInterval()")}}。
+如果要重复调用某个函数（如每 _N_ 毫秒调用一次），考虑使用 {{domxref("Window.setInterval", "setInterval()")}}。
 
 ### 非数字延迟值被静默地强制转化为数字
 
-如果调用 `setTimeout()` 的 [_delay_](#delay) 值不是数字，隐含的[类型强制转换](/zh-CN/docs/Glossary/Type_coercion)会静默地对该值进行转换，使其成为数字。例如，下面的代码在 _delay_ 值中错误地使用了字符串 `"1000"`，而不是数字 `1000`——但它仍然有效，因为当代码运行时，字符串被强制转换成数字 `1000`，所以代码在 1 秒后执行。
+如果调用 `setTimeout()` 的 [_delay_](#delay) 值不是数字，隐式的[类型强制转换](/zh-CN/docs/Glossary/Type_coercion)会静默地将其转换为数字。例如，下面的代码在 _delay_ 值中错误地使用了字符串 `"1000"`，而不是数字 `1000`——但它仍然有效，因为当代码运行时，字符串被强制转换成数字 `1000`，所以代码在 1 秒后执行。
 
 ```js example-bad
 setTimeout(() => {
@@ -108,23 +109,25 @@ setTimeout(() => {
 
 当你向 `setTimeout()` 传递一个函数时，该函数中的 `this` 指向跟你的期望可能不同，这个问题在 [JavaScript 参考](/zh-CN/docs/Web/JavaScript/Reference/Operators/this#回调)中进行了详细解释。
 
-由 `setTimeout()` 执行的代码是从一个独立于调用 `setTimeout` 的函数的执行环境中调用的。为被调用的函数设置 `this` 关键字的通常规则适用，如果你没有在调用中或用 `bind` 设置 `this`，它将默认为 `window`（或 `global`）对象。它将与调用 `setTimeout` 的函数的 `this` 值不一样。
+由 `setTimeout()` 执行的代码是从一个独立于调用 `setTimeout` 的函数的执行环境中调用的。为被调用的函数设置 `this` 关键字的通常规则适用，如果你没有在调用中或用 `bind` 设置 `this`，它将默认为 `window`（或 `global`）对象（甚至是在[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)中）。它将与调用 `setTimeout` 的函数的 `this` 值不一样。
+
+请看以下示例：
 
 ```js
-const myArray = ["zero", "one", "two"];
+const myArray = ["零", "一", "二"];
 myArray.myMethod = function (sProperty) {
   console.log(arguments.length > 0 ? this[sProperty] : this);
 };
 
-myArray.myMethod(); // 输出 "zero,one,two"
-myArray.myMethod(1); // 输出 "one"
+myArray.myMethod(); // 输出“零，一，二”
+myArray.myMethod(1); // 输出“一”
 ```
 
 上面这段代码正常工作，当调用 `myArray` 时，它的 `this` 设定为 `myArray`，故在函数中 `this[sProperty]` 与 `myArray[sProperty]` 等价。然而，在以下示例中：
 
 ```js
-setTimeout(myArray.myMethod, 1.0 * 1000); // 在 1 秒后输出 "[object Window]"
-setTimeout(myArray.myMethod, 1.5 * 1000, "1"); // 在 1.5 秒后输出 "undefined"
+setTimeout(myArray.myMethod, 1.0 * 1000); // 在 1 秒后输出“[object Window]”
+setTimeout(myArray.myMethod, 1.5 * 1000, "1"); // 在 1.5 秒后输出“undefined”
 ```
 
 传递给 `setTimeout` 的是 `myArray.myMethod` 函数，当调用它的时候，`this` 没有指向，故其默认指向 `window` 对象。
@@ -145,10 +148,10 @@ setTimeout.call(myArray, myArray.myMethod, 2.5 * 1000, 2); // 同样会出错
 ```js
 setTimeout(function () {
   myArray.myMethod();
-}, 2.0 * 1000); // 在 2 秒后输出 "zero,one,two"
+}, 2.0 * 1000); // 在 2 秒后输出“零，一，二”
 setTimeout(function () {
   myArray.myMethod("1");
-}, 2.5 * 1000); // 在 2.5 秒后输出 "one"
+}, 2.5 * 1000); // 在 2.5 秒后输出“一”
 ```
 
 包装函数也可以是箭头函数：
@@ -156,10 +159,10 @@ setTimeout(function () {
 ```js
 setTimeout(() => {
   myArray.myMethod();
-}, 2.0 * 1000); // 在 2 秒后输出 "zero,one,two"
+}, 2.0 * 1000); // 在 2 秒后输出“零，一，二”
 setTimeout(() => {
   myArray.myMethod("1");
-}, 2.5 * 1000); // 在 2.5 秒后输出 "one"
+}, 2.5 * 1000); // 在 2.5 秒后输出“一”
 ```
 
 ##### 使用 bind()
@@ -167,15 +170,15 @@ setTimeout(() => {
 或者，也可以使用 {{jsxref("Function.bind()", "bind()")}} 来为所有对特定函数的调用设置 `this` 的值：
 
 ```js
-const myArray = ["zero", "one", "two"];
+const myArray = ["零", "一", "二"];
 const myBoundMethod = function (sProperty) {
   console.log(arguments.length > 0 ? this[sProperty] : this);
 }.bind(myArray);
 
-myBoundMethod(); // 输出 "zero,one,two"。因为 'this' 在函数中绑定到了 myArray
-myBoundMethod(1); // 输出 "one"
-setTimeout(myBoundMethod, 1.0 * 1000); // 由于绑定问题，还是在 1 秒后输出 "zero,one,two"
-setTimeout(myBoundMethod, 1.5 * 1000, "1"); // 在 1.5 秒后输出 "one"
+myBoundMethod(); // 输出“零，一，二”。因为“this”在函数中绑定到了 myArray
+myBoundMethod(1); // 输出“一”
+setTimeout(myBoundMethod, 1.0 * 1000); // 由于绑定问题，还是在 1 秒后输出“零，一，二”
+setTimeout(myBoundMethod, 1.5 * 1000, "1"); // 在 1.5 秒后输出“一”
 ```
 
 ### 传递字符串字面量
@@ -184,13 +187,13 @@ setTimeout(myBoundMethod, 1.5 * 1000, "1"); // 在 1.5 秒后输出 "one"
 
 ```js example-bad
 // 不要这样做
-setTimeout("console.log('Hello World!');", 500);
+setTimeout("console.log('你好世界！');", 500);
 ```
 
 ```js example-good
 // 这样做
 setTimeout(() => {
-  console.log("Hello World!");
+  console.log("你好世界！");
 }, 500);
 ```
 
@@ -198,7 +201,7 @@ setTimeout(() => {
 
 ### 延时比指定值更长的原因
 
-有很多因素会导致 setTimeout 的回调函数执行比设定的预期值更久，本节将讨论最常见的原因。
+有很多因素会导致超时比设定的预期值更久，本节将讨论最常见的原因。
 
 #### 嵌套超时
 
@@ -242,7 +245,7 @@ function run() {
   // 初始化迭代次数和开始时间戳
   iterations = 10;
   last = new Date().getMilliseconds();
-  // 开启计时器
+  // 开启定时器
   setTimeout(timeout, 0);
 }
 
@@ -279,17 +282,17 @@ table {
 
 #### 非活动标签的超时
 
-为了优化后台标签的加载损耗（以及降低耗电量），浏览器会在非活动标签中强制执行一个最小的超时延迟。如果一个页面正在使用网络音频 API {{domxref("AudioContext")}} 播放声音，也可以不执行该延迟。
+为了优化后台标签的加载损耗（以及降低耗电量），浏览器会在非活动标签中强制执行一个最小的超时延迟。如果一个页面正在使用 Web 音频 API {{domxref("AudioContext")}} 播放声音，也可以不执行该延迟。
 
 这方面的具体情况与浏览器有关：
 
 - Firefox 桌面版和 Chrome 针对不活动标签都有一个 1 秒的最小超时值。
 - 安卓版 Firefox 浏览器对不活动的标签有一个至少 15 分钟的超时，并可能完全卸载它们。
-- 如果标签中包含 {{domxref("AudioContext")}}，Firefox 不会对非活动标签进行节流。
+- 如果标签中包含 {{domxref("AudioContext")}}，Firefox 不会对非活动标签进行限流。
 
-#### 追踪型脚本的节流
+#### 追踪型脚本的限流
 
-Firefox 对它识别为追踪型脚本的脚本实施额外的节流。当在前台运行时，节流的最小延迟仍然是 4ms。然而，在后台标签中，节流的最小延迟是 10000 毫秒，即 10 秒，在文档首次加载后 30 秒开始生效。
+Firefox 对它识别为追踪型脚本的脚本实施额外的限流。当在前台运行时，限流的最小延迟仍然是 4 毫秒。然而，在后台标签中，限流的最小延迟是 10000 毫秒（即 10 秒），在文档首次加载后 30 秒开始生效。
 
 参见[跟踪保护](https://wiki.mozilla.org/Security/Tracking_protection)以了解更多信息。
 
@@ -312,11 +315,11 @@ setTimeout 之后
 foo 被调用
 ```
 
-出现这个结果的原因是，尽管 `setTimeout` 以 0ms 的延迟来调用函数，但这个任务已经被放入了队列中并且等待下一次执行；并不是立即执行；队列中的等待函数被调用之前，当前代码必须全部运行完毕，因此这里运行结果并非预想的那样。
+出现这个结果的原因是，尽管 `setTimeout` 以零延迟来调用函数，但这个任务已经被放入了队列中并且等待下一次执行；并不是立即执行；队列中的等待函数被调用之前，当前代码必须全部运行完毕，因此这里运行结果并非预想的那样。
 
 ### 在加载页面时推迟超时
 
-当前标签页正在加载时，Firefox 将推迟触发 `setTimeout()` 计时器。直到主线程被认为是空闲的（类似于 [window.requestIdleCallback()](/zh-CN/docs/Web/API/Window/requestIdleCallback)），或者直到加载事件触发完毕，才开始触发。
+当前标签页正在加载时，Firefox 将推迟触发 `setTimeout()` 计时器。直到主线程被认为是空闲的（类似于 {{domxref("Window.requestIdleCallback()")}}），或者直到加载事件触发完毕，才开始触发。
 
 ### WebExtension 背景页面和定时器
 
@@ -326,6 +329,20 @@ foo 被调用
 
 浏览器内部以 32 位带符号整数存储延时。这就会导致如果一个延时大于 2147483647 毫秒（大约 24.8 天）时就会溢出，导致定时器将会被立即执行。
 
+```js
+setTimeout(() => console.log("你好！"), 2 ** 32 - 5000);
+```
+
+导致立刻执行超时（因为 `2**32 - 5000` 溢出为负数），而以下代码：
+
+```js
+setTimeout(() => console.log("hi!"), 2 ** 32 + 5000);
+```
+
+导致大约在 5 秒后执行超时。
+
+**备注**：这与 Node.js 中 `setTimeout` 的行为不符，Node.js 中任何大于 2147483647 毫秒的超时都会立即执行。
+
 ## 示例
 
 ### 设定和清除超时
@@ -370,7 +387,7 @@ function clearMessage() {
 
 {{EmbedLiveSample('设定和清除超时')}}
 
-也可以看看 [`clearTimeout()` 的示例](/zh-CN/docs/Web/API/clearTimeout#示例)。
+参见 {{domxref("Window.clearTimeout", "clearTimeout()")}} 的示例。
 
 ## 规范
 
@@ -383,8 +400,8 @@ function clearMessage() {
 ## 参见
 
 - [`core-js` 中允许向回调函数传递参数的 `setTimeout` 版本的 polyfill](https://github.com/zloirock/core-js#settimeout-and-setinterval)
-- {{domxref("clearTimeout")}}
-- {{domxref("setInterval()")}}
-- {{domxref("Window.requestAnimationFrame")}}
+- {{domxref("Window.clearTimeout()")}}
+- {{domxref("WorkerGlobalScope.setTimeout()")}}
+- {{domxref("Window.setInterval()")}}
+- {{domxref("Window.requestAnimationFrame()")}}
 - {{domxref("Window.queueMicrotask()")}}
-- {{domxref("WorkerGlobalScope.queueMicrotask()")}}
diff --git a/files/zh-cn/web/api/window/showopenfilepicker/index.md b/files/zh-cn/web/api/window/showopenfilepicker/index.md
index 3a468425066c77..df22c5abc70fbe 100644
--- a/files/zh-cn/web/api/window/showopenfilepicker/index.md
+++ b/files/zh-cn/web/api/window/showopenfilepicker/index.md
@@ -2,7 +2,7 @@
 title: Window：showOpenFilePicker() 方法
 slug: Web/API/Window/showOpenFilePicker
 l10n:
-  sourceCommit: 4458494807b6f4898d504b6c0af0a45f8031cbf3
+  sourceCommit: f75b2c86ae4168e59416aed4c7121f222afc201d
 ---
 
 {{APIRef("File System API")}}{{SecureContext_Header}}{{SeeCompatTable}}
@@ -34,7 +34,7 @@ showOpenFilePicker()
         - `description` {{Optional_Inline}}
           - : 允许的文件类型类别的可选描述。默认为空字符串。
         - `accept`
-          - : 一个 {{jsxref('Object')}}，其键设置为 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types)，值设置为文件扩展名的{{jsxref('Array', '数组', '', 'nocode')}}（参见下面的示例）。
+          - : 一个 {{jsxref('Object')}}，其键设置为 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types/Common_types)，值设置为文件扩展名的{{jsxref('Array', '数组', '', 'nocode')}}（参见下面的示例）。
 
 ### 返回值
 
diff --git a/files/zh-cn/web/api/window/showsavefilepicker/index.md b/files/zh-cn/web/api/window/showsavefilepicker/index.md
index 6a5cea8cfa5fd2..7af773f9b0211d 100644
--- a/files/zh-cn/web/api/window/showsavefilepicker/index.md
+++ b/files/zh-cn/web/api/window/showsavefilepicker/index.md
@@ -2,7 +2,7 @@
 title: Window：showSaveFilePicker() 方法
 slug: Web/API/Window/showSaveFilePicker
 l10n:
-  sourceCommit: 4458494807b6f4898d504b6c0af0a45f8031cbf3
+  sourceCommit: f75b2c86ae4168e59416aed4c7121f222afc201d
 ---
 
 {{APIRef("File System API")}}{{SecureContext_Header}}{{SeeCompatTable}}
@@ -36,7 +36,7 @@ showSaveFilePicker()
         - `description` {{Optional_Inline}}
           - : 允许的文件类型类别的可选描述。默认为空字符串。
         - `accept`
-          - : 一个 {{jsxref('Object')}}，其键设置为 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types)，值设置为文件扩展名的{{jsxref('Array', '数组', '', 'nocode')}}（参见下面的示例）。
+          - : 一个 {{jsxref('Object')}}，其键设置为 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types/Common_types)，值设置为文件扩展名的{{jsxref('Array', '数组', '', 'nocode')}}（参见下面的示例）。
 
 ### 返回值
 
diff --git a/files/zh-cn/web/api/workerglobalscope/clearinterval/index.md b/files/zh-cn/web/api/workerglobalscope/clearinterval/index.md
new file mode 100644
index 00000000000000..053e7af1096948
--- /dev/null
+++ b/files/zh-cn/web/api/workerglobalscope/clearinterval/index.md
@@ -0,0 +1,46 @@
+---
+title: WorkerGlobalScope：clearInterval() 方法
+slug: Web/API/WorkerGlobalScope/clearInterval
+l10n:
+  sourceCommit: 1b4e6d1156e8471d38deeea1567c35ef412c5f42
+---
+
+{{APIRef("HTML DOM")}}{{AvailableInWorkers("worker")}}
+
+{{domxref("WorkerGlobalScope")}} 接口的 **`clearInterval()`** 方法可取消先前通过调用 {{domxref("WorkerGlobalScope.setInterval", "setInterval()")}} 设置的重复定时任务。如果提供的参数未指定先前建立的操作，则此方法不执行任何动作。
+
+## 语法
+
+```js-nolint
+clearInterval(intervalID)
+```
+
+### 参数
+
+- `intervalID`
+  - : 你要取消的重复操作的标识符。这个 ID 是由对应的 `setInterval()` 调用返回的。
+
+值得一提的是，{{domxref("WorkerGlobalScope.setInterval", "setInterval()")}} 和 {{domxref("WorkerGlobalScope.setTimeout", "setTimeout()")}} 共享同一个 ID 池，并且 `clearInterval()` 和 {{domxref("WorkerGlobalScope.clearTimeout", "clearTimeout()")}} 在技术上是可互换使用的。然而，为了清晰起见，你应该尽量避免这种用法。
+
+### 返回值
+
+无（{{jsxref("undefined")}}）。
+
+## 示例
+
+参见 {{domxref("Window.setInterval", "setInterval()")}} 以获取示例。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("Window.clearInterval()")}}
+- {{domxref("WorkerGlobalScope.setInterval()")}}
+- {{domxref("WorkerGlobalScope.clearTimeout()")}}
+- {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()")}}
diff --git a/files/zh-cn/web/api/workerglobalscope/cleartimeout/index.md b/files/zh-cn/web/api/workerglobalscope/cleartimeout/index.md
new file mode 100644
index 00000000000000..a35d6fa3f4a8fc
--- /dev/null
+++ b/files/zh-cn/web/api/workerglobalscope/cleartimeout/index.md
@@ -0,0 +1,52 @@
+---
+title: WorkerGlobalScope：clearTimeout() 方法
+slug: Web/API/WorkerGlobalScope/clearTimeout
+l10n:
+  sourceCommit: 1b4e6d1156e8471d38deeea1567c35ef412c5f42
+---
+
+{{APIRef("HTML DOM")}}{{AvailableInWorkers("worker")}}
+
+{{domxref("WorkerGlobalScope")}} 接口的 **`clearTimeout()`** 方法取消先前通过调用 {{domxref("setTimeout()")}} 建立的超时任务。
+
+如果参数未标识之前创建的操作，则此方法不执行任何动作。
+
+## 语法
+
+```js-nolint
+clearTimeout(timeoutID)
+```
+
+### 参数
+
+- `timeoutID`
+  - : 你要取消定时器的标识符。该 ID 由相应的 `setTimeout()` 调用返回。
+
+值得注意的是，{{domxref("WorkerGlobalScope.setTimeout", "setTimeout()")}} 和 {{domxref("WorkerGlobalScope.setInterval", "setInterval()")}} 共享同一个 ID 池，意味着在技术上可以混用 `clearTimeout()` 和 {{domxref("WorkerGlobalScope.clearInterval", "clearInterval()")}}。但是，为了清楚起见，你应该避免这样做。
+
+### 返回值
+
+无（{{jsxref("undefined")}}）。
+
+## 示例
+
+参见 {{domxref("Window.clearTimeout()")}} 以获取示例。
+
+## 备注
+
+传入一个无效的 ID 给 `clearTimeout()` 不会有任何影响；也不会抛出异常。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("Window.clearTimeout()")}}
+- {{domxref("WorkerGlobalScope.setTimeout()")}}
+- {{domxref("WorkerGlobalScope.clearInterval()")}}
+- {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()")}}
diff --git a/files/zh-cn/web/api/workerglobalscope/createimagebitmap/index.md b/files/zh-cn/web/api/workerglobalscope/createimagebitmap/index.md
new file mode 100644
index 00000000000000..037cedb9e2915c
--- /dev/null
+++ b/files/zh-cn/web/api/workerglobalscope/createimagebitmap/index.md
@@ -0,0 +1,88 @@
+---
+title: WorkerGlobalScope：createImageBitmap() 方法
+slug: Web/API/WorkerGlobalScope/createImageBitmap
+l10n:
+  sourceCommit: 58d79e9c2206e0a604cd4d7f6fba5181262af420
+---
+
+{{APIRef("Canvas API")}}{{AvailableInWorkers("worker")}}
+
+{{domxref("WorkerGlobalScope")}} 接口的 **`createImageBitmap`** 从给定的来源创建位图，也可以进行裁剪以包含源图像的一部分。它接受各种不同的图像来源，并返回一个会兑现 {{domxref("ImageBitmap")}} 的 {{domxref("Promise")}}。
+
+## 语法
+
+```js-nolint
+createImageBitmap(image)
+createImageBitmap(image, options)
+createImageBitmap(image, sx, sy, sw, sh)
+createImageBitmap(image, sx, sy, sw, sh, options)
+```
+
+### 参数
+
+- `image`
+  - : 图像源，可以是以下值之一：
+    - {{domxref("HTMLImageElement")}}
+    - {{domxref("SVGImageElement")}}
+    - {{domxref("HTMLVideoElement")}}
+    - {{domxref("HTMLCanvasElement")}}
+    - {{domxref("Blob")}}
+    - {{domxref("ImageData")}}
+    - {{domxref("ImageBitmap")}}
+    - {{domxref("OffscreenCanvas")}}
+    - {{domxref("VideoFrame")}}
+- `sx`
+  - : 将从中提取 `ImageBitmap` 的矩形的参考点的 x 坐标。
+- `sy`
+  - : 将从中提取 `ImageBitmap` 的矩形的参考点的 y 坐标。
+- `sw`
+  - : 将从中提取 `ImageBitmap` 的矩形的宽度。此值可以为负数。
+- `sh`
+  - : 将从中提取 `ImageBitmap` 的矩形的高度。此值可以为负数。
+- `options` {{optional_inline}}
+
+  - : 设置图像提取选项的对象。可用的选项包括：
+
+    - `imageOrientation`
+
+      - : 指定位图图像的方向。
+
+        - `from-image`
+          - : 如果存在 EXIF 方向元数据，则根据其来指定图像方向（默认）。
+        - `flipY`
+          - : 如果存在 EXIF 方向元数据，则根据其来指定图像方向，然后垂直翻转。
+        - `none`
+          - : 根据图像的编码来指定图像方向，忽略有关方向的任何元数据（例如，可能添加到图像中的 EXIF 元数据，以指示相机被转向以在人像模式下捕获图像）。
+
+    - `premultiplyAlpha`
+      - : 指定位图的颜色通道是否应与 alpha 通道预乘。以下值之一：`none`、`premultiply` 或 `default`（默认）。
+    - `colorSpaceConversion`
+      - : 指定图像是否应使用色彩空间转换进行解码。`none` 或 `default`（默认）。`default` 值表示使用特定于实现的行为。
+    - `resizeWidth`
+      - : 指定输出宽度的长整数。
+    - `resizeHeight`
+      - : 指定输出高度的长整数。
+    - `resizeQuality`
+      - : 指定用于调整输入大小以匹配输出尺寸的算法。以下值之一：`pixelated`、`low`（默认）、`medium` 或 `high`。
+
+### 返回值
+
+一个 {{jsxref("Promise")}}，会兑现为一个包含给定矩形的位图数据的 {{domxref("ImageBitmap")}} 对象。
+
+## 示例
+
+参见 {{domxref("Window.createImageBitmap()")}} 以获取示例。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- {{domxref("Window.createImageBitmap()")}}
+- {{domxref("CanvasRenderingContext2D.drawImage()")}}
+- {{domxref("ImageData")}}
diff --git a/files/zh-cn/web/api/workerglobalscope/importscripts/index.md b/files/zh-cn/web/api/workerglobalscope/importscripts/index.md
index 9ecfc68187827d..d808ff2f8cc4c5 100644
--- a/files/zh-cn/web/api/workerglobalscope/importscripts/index.md
+++ b/files/zh-cn/web/api/workerglobalscope/importscripts/index.md
@@ -2,10 +2,10 @@
 title: WorkerGlobalScope：importScripts() 方法
 slug: Web/API/WorkerGlobalScope/importScripts
 l10n:
-  sourceCommit: 542ef6cfd82288925e0a9238b47933f03e2dddca
+  sourceCommit: f75b2c86ae4168e59416aed4c7121f222afc201d
 ---
 
-{{APIRef("Web Workers API")}}
+{{APIRef("Web Workers API")}}{{AvailableInWorkers("worker")}}
 
 {{domxref("WorkerGlobalScope")}} 接口的 **`importScripts()`** 方法将一个或多个脚本同步导入到 worker 的作用域中。
 
@@ -20,7 +20,7 @@ importScripts(path0, path1, /* …, */ pathN)
 ### 参数
 
 - `pathN`
-  - : 一个表示要导入的脚本的 URL 的字符串值。URL 可以是绝对的，也可以是相对的。如果 URL 是相对的，那么它是相对于 HTML 文档的基本 URL 的。
+  - : 一个表示要导入的脚本的 URL 的字符串值。URL 可以是绝对的，也可以是相对的。如果 URL 是相对的，那么它是相对于 worker 入口脚本的 URL。
 
 ### 返回值
 
@@ -29,16 +29,20 @@ importScripts(path0, path1, /* …, */ pathN)
 ### 异常
 
 - `NetworkError`
-  - : 要导入的脚本没有按有效的 JavaScript MIME 类型（有效的类型如 `text/javascript`）或允许的[旧版 JavaScript MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types#遗留的_javascript_mime_类型)提供。
+  - : 要导入的脚本没有按有效的 JavaScript MIME 类型（有效的类型如 `text/javascript`）或允许的[旧版 JavaScript MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types#遗留的_javascript_mime_类型)提供。
+- {{jsxref("TypeError")}}
+  - : 如果当前的 {{domxref("WorkerGlobalScope")}} 是一个模块，则抛出此异常。请改用 [`import`](/zh-CN/docs/Web/JavaScript/Reference/Statements/import)。
 
 ## 示例
 
-如果你在一个名为 `foo.js` 的单独脚本中编写了一些你想在 worker.js 中使用的功能，则可以使用以下行导入它：
+如果你在一个名为 `foo.js` 的单独脚本中编写了一些你想在 `worker.js` 中使用的功能，则可以使用以下行导入它：
 
 ```js
 importScripts("foo.js");
 ```
 
+`foo.js` 应该在与 worker 的入口点相同的 URL 子树中——例如，如果这个 worker 是通过 `new Worker("worker.js")` 创建的，那么 `worker.js` 就是入口点。如果 `worker.js` 在 `https://example.com/scripts/worker.js`，那么 `foo.js` 应该在 `https://example.com/scripts/foo.js`。
+
 `importScripts()` 和 `self.importScripts()` 实际上是等效的——都表示在 worker 的内部作用域中调用的 `importScripts()`。
 
 ## 规范
diff --git a/files/zh-cn/web/api/workerglobalscope/setinterval/index.md b/files/zh-cn/web/api/workerglobalscope/setinterval/index.md
new file mode 100644
index 00000000000000..66ff2abfb9086c
--- /dev/null
+++ b/files/zh-cn/web/api/workerglobalscope/setinterval/index.md
@@ -0,0 +1,67 @@
+---
+title: WorkerGlobalScope：setInterval() 方法
+slug: Web/API/WorkerGlobalScope/setInterval
+l10n:
+  sourceCommit: 1b4e6d1156e8471d38deeea1567c35ef412c5f42
+---
+
+{{APIRef("HTML DOM")}}{{AvailableInWorkers("worker")}}
+
+{{domxref("WorkerGlobalScope")}} 接口的 **`setInterval()`** 方法重复调用一个函数或执行一个代码片段，在每次调用之间具有固定的时间间隔。
+
+此方法返回一个间隔 ID，其唯一地标识时间间隔，因此你可以稍后通过调用 {{domxref("WorkerGlobalScope.clearInterval", "clearInterval()")}} 来移除它。
+
+此方法也在窗口上下文中可用：有关 `setInterval()` 的详细描述，请参阅 {{domxref("Window.setInterval()")}} 页面。
+
+## 语法
+
+```js-nolint
+setInterval(code)
+setInterval(code, delay)
+
+setInterval(func)
+setInterval(func, delay)
+setInterval(func, delay, arg1)
+setInterval(func, delay, arg1, arg2)
+setInterval(func, delay, arg1, arg2, /* …, */ argN)
+```
+
+### 参数
+
+- `func`
+  - : 要每隔 `delay` 毫秒执行一次的{{jsxref("function", "函数", "", 1)}}。第一次执行发生在 `delay` 毫秒之后。
+- `code`
+  - : 这个可选的语法让你可以传递一个字符串来代替函数，你传递的字符串会被编译然后每经过 `delay` 毫秒执行一次。这个语法因为与 {{jsxref("Global_Objects/eval", "eval()")}} 存在相同的安全风险所以*不推荐*使用。
+- `delay` {{optional_inline}}
+  - : 计时器每次执行指定的函数和代码的延迟时间（以毫秒——千分之一秒——为单位）。如果未指定，则其默认值为 0。参见[延迟限制](/zh-CN/docs/Web/API/Window/setInterval#延迟限制)以了解详细的 `delay` 的取值范围。
+- `arg1`、……、`argN` {{optional_inline}}
+  - : 当计时器结束的时候，将被传递给 _func_ 函数的附加参数。
+
+### 返回值
+
+返回值 `intervalID` 是一个非零数值，用来标识调用 `setInterval()` 创建的定时器；这个值可以用来传递给 {{domxref("Window.clearInterval", "clearInterval()")}} 来清除定时器。
+
+值得注意的是，`setInterval()` 和 {{domxref("WorkerGlobalScope.setTimeout", "setTimeout()")}} 共享同一个 ID 池，并且 `clearInterval()` 和 {{domxref("WorkerGlobalScope.clearTimeout", "clearTimeout()")}} 在技术上是可互换使用的。然而，为了清晰可见，你应该尝试始终匹配，以避免维护代码时产生混淆。
+
+> [!NOTE]
+> 参数 `delay` 会被转换成一个有符号 32 位整数。这将 `delay` 限制到了 2147483647 毫秒（大约 24.8 天）以内，因为它在 IDL 中被指定为一个有符号整数。
+
+## 示例
+
+参见 {{domxref("Window.setInterval", "setInterval()")}} 以获取示例。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [`core-js` 中 `setInterval` 的 polyfill，支持向回调函数传递参数](https://github.com/zloirock/core-js#settimeout-and-setinterval)
+- {{domxref("Window.setInterval()")}}
+- {{domxref("WorkerGlobalScope.clearInterval()")}}
+- {{domxref("WorkerGlobalScope.setTimeout()")}}
+- {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()")}}
diff --git a/files/zh-cn/web/api/workerglobalscope/settimeout/index.md b/files/zh-cn/web/api/workerglobalscope/settimeout/index.md
new file mode 100644
index 00000000000000..1b56080fa4f8d9
--- /dev/null
+++ b/files/zh-cn/web/api/workerglobalscope/settimeout/index.md
@@ -0,0 +1,71 @@
+---
+title: WorkerGlobalScope：setTimeout() 方法
+slug: Web/API/WorkerGlobalScope/setTimeout
+l10n:
+  sourceCommit: 1b4e6d1156e8471d38deeea1567c35ef412c5f42
+---
+
+{{APIRef("HTML DOM")}}{{AvailableInWorkers("worker")}}
+
+{{domxref("WorkerGlobalScope")}} 接口的 **`setTimeout()`** 方法设置一个定时器，一旦定时器到期，就会执行一个函数或指定的代码片段。
+
+## 语法
+
+```js-nolint
+setTimeout(code)
+setTimeout(code, delay)
+
+setTimeout(functionRef)
+setTimeout(functionRef, delay)
+setTimeout(functionRef, delay, param1)
+setTimeout(functionRef, delay, param1, param2)
+setTimeout(functionRef, delay, param1, param2, /* …, */ paramN)
+```
+
+### 参数
+
+- `functionRef`
+  - : 当定时器到期后要执行的{{jsxref("function", "函数", "", 1)}}。
+- `code`
+  - : 这是一个代替语法，允许你包含在定时器到期后编译和执行的字符串而非函数。这个语法因为与 {{jsxref("Global_Objects/eval", "eval()")}} 存在相同的安全风险所以**不推荐**使用。
+- `delay` {{optional_inline}}
+
+  - : 定时器在执行指定的函数或代码之前应该等待的时间，单位是毫秒。如果省略该参数，则使用值 0，意味着“立即”执行，或者更准确地说，在下一个事件循环执行。
+
+    注意，无论是哪种情况，实际延迟可能会比预期长一些，参见[延时比指定值更长的原因](/zh-CN/docs/Web/API/Window/setTimeout#延时比指定值更长的原因)。
+
+    还要注意的是，如果值不是数字，隐式的[类型强制转换](/zh-CN/docs/Glossary/Type_coercion)会静默地将其转换为数字——这可能导致意想不到的、令人惊讶的结果；参见[非数字延迟值被静默地强制转化为数字](/zh-CN/docs/Web/API/Window/setTimeout#非数字延迟值被静默地强制转化为数字)以获取示例。
+
+- `param1`、……、`paramN` {{optional_inline}}
+  - : 会被传递给由 `functionRef` 指定的函数的附加参数。
+
+### 返回值
+
+返回值 `timeoutID` 是一个正整数，表示由 `setTimeout()` 调用创建的定时器的标识符。可以将这个值传递给 {{domxref("Window.clearTimeout","clearTimeout()")}} 来取消该定时器。
+
+在定时器仍然激活的情况下，保证 `timeoutID` 值不会被同一 worker 中的后续 `setTimeout()` 或 `setInterval()` 调用重复使用。然而，不同的对象使用不同的 ID 池。
+
+## 描述
+
+参见 {{domxref("Window.setTimeout()")}} 以获取详细的描述。
+
+## 示例
+
+参见 {{domxref("Window.setTimeout()")}} 以获取示例。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
+
+## 参见
+
+- [`core-js` 中允许向回调函数传递参数的 `setTimeout` 版本的 polyfill](https://github.com/zloirock/core-js#settimeout-and-setinterval)
+- {{domxref("Window.setTimeout()")}}
+- {{domxref("WorkerGlobalScope.clearTimeout()")}}
+- {{domxref("WorkerGlobalScope.setInterval()")}}
+- {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()")}}
+- {{domxref("WorkerGlobalScope.queueMicrotask()")}}
diff --git a/files/zh-cn/web/api/workernavigator/permissions/index.md b/files/zh-cn/web/api/workernavigator/permissions/index.md
index 619af770994cb1..3d504d2b557941 100644
--- a/files/zh-cn/web/api/workernavigator/permissions/index.md
+++ b/files/zh-cn/web/api/workernavigator/permissions/index.md
@@ -2,10 +2,10 @@
 title: WorkerNavigator：permissions 属性
 slug: Web/API/WorkerNavigator/permissions
 l10n:
-  sourceCommit: ee253ac58d71b2ed336b705ab97dbe93122b3e04
+  sourceCommit: e8fe043f7d2ad7cd9804d1bf96e0310949f1dac7
 ---
 
-{{APIRef("Permissions API")}}
+{{APIRef("Permissions API")}}{{AvailableInWorkers("worker")}}
 
 {{domxref("WorkerNavigator")}} 接口的 **`permissions`** 只读属性返回一个 {{domxref("Permissions")}} 对象，可以用于查询或更新 [Permissions API](/zh-CN/docs/Web/API/Permissions_API) 涵盖的 API 权限状态。
 
diff --git a/files/zh-cn/web/api/xmlhttprequest/responsexml/index.md b/files/zh-cn/web/api/xmlhttprequest/responsexml/index.md
index 4c3c75df1f18af..0f638f489ba4ea 100644
--- a/files/zh-cn/web/api/xmlhttprequest/responsexml/index.md
+++ b/files/zh-cn/web/api/xmlhttprequest/responsexml/index.md
@@ -5,7 +5,7 @@ slug: Web/API/XMLHttpRequest/responseXML
 
 {{APIRef('XMLHttpRequest')}}
 
-**XMLHttpRequest.responseXML** 属性是一个只读值，它返回一个包含请求检索的 HTML 或 XML 的{{domxref("Document")}}，如果请求未成功，尚未发送，或者检索的数据无法正确解析为 XML 或 HTML，则为 null。默认是当作“text / xml”来解析。当 {{domxref("XMLHttpRequest.responseType", "responseType")}} 设置为“document”并且请求已异步执行时，响应将被当作“text / html”来解析。`responseXML` 对于任何其他类型的数据以及 [`data:` URLs](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) 为 null。
+**XMLHttpRequest.responseXML** 属性是一个只读值，它返回一个包含请求检索的 HTML 或 XML 的{{domxref("Document")}}，如果请求未成功，尚未发送，或者检索的数据无法正确解析为 XML 或 HTML，则为 null。默认是当作“text / xml”来解析。当 {{domxref("XMLHttpRequest.responseType", "responseType")}} 设置为“document”并且请求已异步执行时，响应将被当作“text / html”来解析。`responseXML` 对于任何其他类型的数据以及 [`data:` URL](/zh-CN/docs/Web/URI/Schemes/data) 为 null。
 
 > **备注：** `responseXML` 在这个属性的历史堪称神器，它可以同时在 HTML 和 XML 中工作
 
diff --git a/files/zh-cn/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md b/files/zh-cn/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md
index 0fa510c7388e3a..9eae0b38e148ef 100644
--- a/files/zh-cn/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md
+++ b/files/zh-cn/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md
@@ -217,7 +217,7 @@ foo=bar&baz=The+first+line.%0D%0AThe+second+line.%0D%0A
   The second line.
   ```
 
-- 方法：`POST`；编码类型：[`multipart/form-data`](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types#multipartform-data)：
+- 方法：`POST`；编码类型：[`multipart/form-data`](/zh-CN/docs/Web/HTTP/MIME_types#multipartform-data)：
 
   ```plain
   Content-Type: multipart/form-data; boundary=---------------------------314911788813839
diff --git a/files/zh-cn/web/css/@layer/index.md b/files/zh-cn/web/css/@layer/index.md
index 798d97bcf8b2bd..e5687bea35c727 100644
--- a/files/zh-cn/web/css/@layer/index.md
+++ b/files/zh-cn/web/css/@layer/index.md
@@ -141,9 +141,10 @@ p {
 
 ```html
 <div class="item">
-  I am displayed in <code>color: rebeccapurple</code> because the
-  <code>type</code> layer comes after the <code>base</code> layer. My green
-  border, font-size, and padding come from the <code>base</code> layer.
+  我以 <code>color: rebeccapurple</code> 的样式显示，因为
+  <code>special</code> 层定义在 <code>base</code>
+  层之后。我的绿色边框、font-size 和内边距来自于
+  <code>base</code> 层。
 </div>
 ```
 
diff --git a/files/zh-cn/web/css/background-color/index.md b/files/zh-cn/web/css/background-color/index.md
index 489141de222a3a..33596a27ca95d8 100644
--- a/files/zh-cn/web/css/background-color/index.md
+++ b/files/zh-cn/web/css/background-color/index.md
@@ -1,75 +1,100 @@
 ---
 title: background-color
 slug: Web/CSS/background-color
+l10n:
+  sourceCommit: 3928d2b1004e2435e063ef4b037e06e1906d62f3
 ---
 
 {{CSSRef}}
 
-## 概览
+**`background-color`** [CSS](/zh-CN/docs/Web/CSS) 属性设置元素的背景色。
 
-[CSS](/zh-CN/docs/Web/CSS)属性中的 **background-color** 会设置元素的背景色，属性的值为颜色值或关键字"transparent"二者选其一。
-
-{{cssinfo}}
+{{EmbedInteractiveExample("pages/css/background-color.html")}}
 
 ## 语法
 
 ```css
-/* Keyword values */
+/* 关键字值 */
 background-color: red;
-
-/* Hexadecimal value */
-background-color: #bbff00;
-
-/* RGB value */
-background-color: rgb(255, 255, 128);
-
-/* HSLA value */
-background-color: hsla(50, 33%, 25%, 0.75);
-
-/* Special keyword values */
-background-color: currentColor;
+background-color: indigo;
+
+/* 十六进制值 */
+background-color: #bbff00; /* 完全不透明 */
+background-color: #bf0; /* 完全不透明简写 */
+background-color: #11ffee00; /* 完全透明 */
+background-color: #1fe0; /* 完全透明简写 */
+background-color: #11ffeeff; /* 完全不透明 */
+background-color: #1fef; /* 完全不透明简写 */
+
+/* RGB 值 */
+background-color: rgb(255 255 128); /* 完全不透明 */
+background-color: rgb(117 190 218 / 50%); /* 50% 透明 */
+
+/* HSL 值 */
+background-color: hsl(50 33% 25%); /* 完全不透明 */
+background-color: hsl(50 33% 25% / 75%); /* 75% 不透明，25% 透明 */
+
+/* 特殊关键字值 */
+background-color: currentcolor;
 background-color: transparent;
 
-/* Global values */
+/* 全局值 */
 background-color: inherit;
 background-color: initial;
+background-color: revert;
+background-color: revert-layer;
 background-color: unset;
 ```
 
-`background-color` 属性只能使用 `<color>` 值。
+`background-color` 属性被指定为 `<color>` 类型的单值。
+
+### 值
+
+- {{cssxref("&lt;color&gt;")}}
+  - : 背景色的统一颜色。它在指定的任何 {{cssxref("background-image")}} 后面渲染，尽管颜色仍然可以通过图像中任何透明的地方看到。
+
+## 无障碍
 
-### 取值
+有一点很重要，要确保文本颜色与文本所在背景之间的对比度足够高，以便低视力的人群能够阅读页面内容。
 
-- `<color>`
-  - : 一个描述背景统一颜色的 CSS {{cssxref("&lt;color&gt;")}} 值。即使一个或几个的 {{cssxref("background-image")}} 被定义，如果图像是不透明的，通过透明度该颜色也能影响到渲染。在 CSS 中，`transparent` 是一种颜色。
+颜色的对比度是通过比较文本和背景颜色值的亮度确定的。要符合当前的 [Web 内容无障碍指南（WCAG）](https://www.w3.org/WAI/intro/wcag)，文本至少要有 4.5:1 的比例，大文本（比如标题）至少要有 3:1 的比例。具有[加粗](/zh-CN/docs/Web/CSS/font-weight)和至少 18.66px 大小，或者具有至少 24px 大小的文本称为大文本。
 
-### 正式语法
+- [WebAIM：颜色对比度检查器](https://webaim.org/resources/contrastchecker/)
+- [MDN 理解 WCAG，指南 1.4 解释](/zh-CN/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
+- [理解成功标准 1.4.3 | W3C 理解 WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
+
+## 形式定义
+
+{{cssinfo}}
+
+## 形式语法
 
 {{csssyntax}}
 
 ## 示例
 
-### HTML
+### 着色盒
 
-```html
-<div class="exampleone">Lorem ipsum dolor sit amet, consectetuer</div>
+此示例演示了如何使用不同的 CSS {{cssxref("color_value", "&lt;color&gt;")}} 值将 `background-color` 应用于 HTML {{HTMLelement("div")}} 元素。
 
-<div class="exampletwo">Lorem ipsum dolor sit amet, consectetuer</div>
+#### HTML
 
-<div class="examplethree">Lorem ipsum dolor sit amet, consectetuer</div>
+```html
+<div class="exampleone">他同意自己会受苦。</div>
+<div class="exampletwo">他同意自己会受苦。</div>
+<div class="examplethree">他同意自己会受苦。</div>
 ```
 
-### CSS
+#### CSS
 
 ```css
 .exampleone {
-  background-color: teal;
-  color: white;
+  background-color: transparent;
 }
 
 .exampletwo {
-  background-color: rgb(153, 102, 153);
-  color: rgb(255, 255, 204);
+  background-color: rgb(153 102 153);
+  color: rgb(255 255 204);
 }
 
 .examplethree {
@@ -78,9 +103,65 @@ background-color: unset;
 }
 ```
 
-### 结果
+#### 结果
+
+{{EmbedLiveSample("着色盒", 200, 150)}}
+
+### 着色表
+
+此示例演示了如何使用 {{HTMLelement("tr")}} 行和 {{HTMLelement("td")}} 单元格将 `background-color` 应用于 HTML {{HTMLelement("table")}} 元素。
+
+#### HTML
+
+```html
+<table>
+  <tr id="r1">
+    <td id="c11">11</td>
+    <td id="c12">12</td>
+    <td id="c13">13</td>
+  </tr>
+  <tr id="r2">
+    <td id="c21">21</td>
+    <td id="c22">22</td>
+    <td id="c23">23</td>
+  </tr>
+  <tr id="r3">
+    <td id="c31">31</td>
+    <td id="c32">32</td>
+    <td id="c33">33</td>
+  </tr>
+</table>
+```
+
+#### CSS
+
+```css
+table {
+  border-collapse: collapse;
+  border: solid black 1px;
+  width: 250px;
+  height: 150px;
+}
+td {
+  border: solid 1px black;
+}
+#r1 {
+  background-color: lightblue;
+}
+#c12 {
+  background-color: cyan;
+}
+#r2 {
+  background-color: grey;
+}
+#r3 {
+  background-color: olive;
+}
+```
+
+#### 结果
 
-{{EmbedLiveSample("示例","200","150")}}
+{{EmbedLiveSample('着色表', "100%", "100%")}}
 
 ## 规范
 
@@ -92,4 +173,6 @@ background-color: unset;
 
 ## 参见
 
-- [Multiple backgrounds](/zh-CN/CSS/Multiple_backgrounds)
+- [多个背景的应用](/zh-CN/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds)
+- 颜色 {{cssxref("&lt;color&gt;")}} 数据类型
+- 其他颜色相关属性：{{cssxref("color")}}、{{cssxref("border-color")}}、{{cssxref("outline-color")}}、{{cssxref("text-decoration-color")}}、{{cssxref("text-emphasis-color")}}、{{cssxref("text-shadow")}}、{{cssxref("caret-color")}}、{{cssxref("column-rule-color")}} 和 {{cssxref("print-color-adjust")}}
diff --git a/files/zh-cn/web/css/vertical-align/index.md b/files/zh-cn/web/css/vertical-align/index.md
index 0c75bc5d5e0830..13c32b445c887b 100644
--- a/files/zh-cn/web/css/vertical-align/index.md
+++ b/files/zh-cn/web/css/vertical-align/index.md
@@ -1,25 +1,27 @@
 ---
 title: vertical-align
 slug: Web/CSS/vertical-align
+l10n:
+  sourceCommit: 583d48191a7a8605d831aff357bef6cc63aef2e3
 ---
 
 {{CSSRef}}
 
-[CSS](/zh-CN/docs/CSS) 的属性 **`vertical-align`** 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。
+[CSS](/zh-CN/docs/Web/CSS) **`vertical-align`** 属性用来指定行内（inline）、行内区块（inline-block）、表格单元格（table-cell）盒子的垂直对齐方式。
 
 {{EmbedInteractiveExample("pages/css/vertical-align.html")}}
 
-vertical-align 属性可被用于两种环境：
+vertical-align 属性可被用于两种上下文：
 
-- 使行内元素盒模型与其行内元素容器垂直对齐。例如，用于垂直对齐一行文本内的图片{{HTMLElement("img")}}：
-- 垂直对齐表格单元内容。
+- 使行内元素盒模型与其行内元素容器垂直对齐。例如，用于[垂直对齐行文本内的图片](#行内盒的垂直对齐)
+- 垂直对齐[表格单元格的内容](#表格单元格中的垂直对齐)
 
 注意 `vertical-align` 只对行内元素、行内块元素和表格单元格元素生效：不能用它垂直对齐[块级元素](/zh-CN/docs/Glossary/Block-level_content)。
 
 ## 语法
 
 ```css
-/* Keyword values */
+/* 关键字值 */
 vertical-align: baseline;
 vertical-align: sub;
 vertical-align: super;
@@ -29,16 +31,18 @@ vertical-align: middle;
 vertical-align: top;
 vertical-align: bottom;
 
-/* <length> values */
+/* <length> 值 */
 vertical-align: 10em;
 vertical-align: 4px;
 
-/* <percentage> values */
+/* <percentage> 值 */
 vertical-align: 20%;
 
-/* Global values */
+/* 全局值 */
 vertical-align: inherit;
 vertical-align: initial;
+vertical-align: revert;
+vertical-align: revert-layer;
 vertical-align: unset;
 ```
 
@@ -51,7 +55,7 @@ vertical-align: unset;
 这些值使元素相对其父元素垂直对齐：
 
 - `baseline`
-  - : 使元素的基线与父元素的基线对齐。HTML 规范没有详细说明部分[可替换元素](/zh-CN/docs/Web/CSS/Replaced_element)的基线，如{{HTMLElement("textarea")}} ，这意味着这些元素使用此值的表现因浏览器而异。
+  - : 使元素的基线与父元素的基线对齐。HTML 规范没有详细说明部分[可替换元素](/zh-CN/docs/Web/CSS/Replaced_element)的基线，如 {{HTMLElement("textarea")}}，这意味着这些元素使用此值的表现因浏览器而异。
 - `sub`
   - : 使元素的基线与父元素的下标基线对齐。
 - `super`
@@ -61,11 +65,11 @@ vertical-align: unset;
 - `text-bottom`
   - : 使元素的底部与父元素的字体底部对齐。
 - `middle`
-  - : 使元素的中部与父元素的基线加上父元素 x-height（译注：[x 高度](https://www.zhangxinxu.com/wordpress/2015/06/about-letter-x-of-css/)）的一半对齐。
+  - : 使元素的中部与父元素的基线加上父元素 x-height 的一半对齐。
 - {{cssxref("&lt;length&gt;")}}
   - : 使元素的基线对齐到父元素的基线之上的给定长度。可以是负数。
 - {{cssxref("&lt;percentage&gt;")}}
-  - : 使元素的基线对齐到父元素的基线之上的给定百分比，该百分比是{{Cssxref("line-height")}}属性的百分比。可以是负数。
+  - : 使元素的基线对齐到父元素的基线之上的给定百分比，该百分比是 {{Cssxref("line-height")}} 属性的百分比。可以是负数。
 
 #### 相对行的值
 
@@ -80,7 +84,7 @@ vertical-align: unset;
 
 ### 表格单元格的值
 
-- `baseline` (以及 `sub`, `super`, `text-top`, `text-bottom`, `<length>`, `<percentage>`)
+- `baseline`（以及 `sub`、`super`、`text-top`、`text-bottom`、`<length>`、`<percentage>`）
   - : 使单元格的基线，与该行中所有以基线对齐的其他单元格的基线对齐。
 - `top`
   - : 使单元格内边距的上边缘与该行顶部对齐。
@@ -91,37 +95,40 @@ vertical-align: unset;
 
 可以是负数。
 
+## 形式定义
+
+{{CSSInfo}}
+
 ### 形式语法
 
 {{csssyntax}}
 
 ## 示例
 
-### HTML
+### 基础示例
+
+#### HTML
 
 ```html
 <div>
-  An <img src="frame_image.svg" alt="link" width="32" height="32" /> image with
-  a default alignment.
+  <img src="frame_image.svg" alt="link" width="32" height="32" />
+  默认对齐方式的图像
 </div>
 <div>
-  An
   <img class="top" src="frame_image.svg" alt="link" width="32" height="32" />
-  image with a text-top alignment.
+  字体顶部（text-top）对齐的图像
 </div>
 <div>
-  An
   <img class="bottom" src="frame_image.svg" alt="link" width="32" height="32" />
-  image with a text-bottom alignment.
+  字体底部（text-bottom）对齐的图像
 </div>
 <div>
-  An
   <img class="middle" src="frame_image.svg" alt="link" width="32" height="32" />
-  image with a middle alignment.
+  中部（middle）对齐的图像
 </div>
 ```
 
-### CSS
+#### CSS
 
 ```css
 img.top {
@@ -135,23 +142,135 @@ img.middle {
 }
 ```
 
-### 结果
+#### 结果
+
+{{EmbedLiveSample("基础示例")}}
+
+### 行内盒的垂直对齐
+
+#### HTML
+
+```html-nolint
+<p>
+top:         <img style="vertical-align: top" src="star.png" alt="star"/>
+middle:      <img style="vertical-align: middle" src="star.png" alt="star"/>
+bottom:      <img style="vertical-align: bottom" src="star.png" alt="star"/>
+super:       <img style="vertical-align: super" src="star.png" alt="star"/>
+sub:         <img style="vertical-align: sub" src="star.png" alt="star"/>
+</p>
+
+<p>
+text-top:    <img style="vertical-align: text-top" src="star.png" alt="star"/>
+text-bottom: <img style="vertical-align: text-bottom" src="star.png" alt="star"/>
+0.2em:       <img style="vertical-align: 0.2em" src="star.png" alt="star"/>
+-1em:        <img style="vertical-align: -1em" src="star.png" alt="star"/>
+20%:         <img style="vertical-align: 20%" src="star.png" alt="star"/>
+-100%:       <img style="vertical-align: -100%" src="star.png" alt="star"/>
+</p>
+```
+
+```css hidden
+#* {
+  box-sizing: border-box;
+}
 
-{{EmbedLiveSample("示例")}}
+img {
+  margin-right: 0.5em;
+}
+
+p {
+  height: 3em;
+  padding: 0 0.5em;
+  font-family: monospace;
+  text-decoration: underline overline;
+  margin-left: auto;
+  margin-right: auto;
+  width: 80%;
+}
+```
+
+#### 结果
+
+{{EmbedLiveSample("行内盒的垂直对齐", '100%', 160, "", "")}}
+
+### 表格单元格中的垂直对齐
+
+此示例，我们有一个表格包含一行共六个单元格。该行设置 `vertical-align` 的默认值为 `bottom`。
+
+- 前四个单元格分别设置它们自己的 `vertical-align` 值，这些值会覆盖行的默认值。
+- 第五个单元格没有设置任何 `vertical-align` 值，因此继承行的值。
+- 第六个单元格仅用于确保单元格有足够的高度，以便观察效果。
+
+#### HTML
+
+```html
+<table>
+  <tr class="bottom">
+    <td class="baseline">baseline</td>
+    <td class="top">top</td>
+    <td class="middle">middle</td>
+    <td>bottom</td>
+    <td>Row's style</td>
+    <td>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+      pretium felis eu sem mattis vulputate.
+    </td>
+  </tr>
+</table>
+```
+
+#### CSS
+
+```css
+table {
+  margin-left: auto;
+  margin-right: auto;
+  width: 80%;
+}
+
+table,
+th,
+td {
+  border: 1px solid black;
+}
+
+td {
+  padding: 0.5em;
+  font-family: monospace;
+}
+
+.bottom {
+  vertical-align: bottom;
+}
+
+.baseline {
+  vertical-align: baseline;
+}
+
+.top {
+  vertical-align: top;
+}
+
+.middle {
+  vertical-align: middle;
+}
+```
+
+#### 结果
+
+{{EmbedLiveSample("表格单元格中的垂直对齐", '100%', 230, "", "")}}
 
 ## 规范
 
 {{Specifications}}
 
-{{cssinfo}}
-
 ## 浏览器兼容性
 
 {{Compat}}
 
 ## 参见
 
-- [Typical use cases of Flexbox, section "Center item"](/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox#Center_item)
-- {{Cssxref("line-height")}}, {{Cssxref("text-align")}}, {{Cssxref("margin")}}
-- [Understanding `vertical-align`, or "How (Not) To Vertically Center Content"](http://phrogz.net/css/vertical-align/index.html)
-- [Vertical-Align: All You Need To Know](https://christopheraue.net/design/vertical-align)
+- [弹性盒子的典型用例](/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox#元素居中)
+- {{Cssxref("line-height")}}、{{Cssxref("text-align")}}、{{Cssxref("margin")}}
+- [理解 `vertical-align`，如何（不）垂直居中内容](http://phrogz.net/css/vertical-align/index.html)
+- [Vertical-Align：你要知道的事](https://christopheraue.net/design/vertical-align)
diff --git a/files/zh-cn/web/html/element/input/button/index.md b/files/zh-cn/web/html/element/input/button/index.md
index 68b42294e84f8b..f9f2a43d82a897 100644
--- a/files/zh-cn/web/html/element/input/button/index.md
+++ b/files/zh-cn/web/html/element/input/button/index.md
@@ -112,7 +112,7 @@ function updateButton() {
 
 #### 设置禁用属性
 
-你可以在运行时通过设置 `disabled` 为 `true` 或 `false` 来启用和禁用按钮。在这个例子中，我们的按钮一开始是启用的，但如果你按下它，就会用 `button.disabled = true` 将其禁用。然后，一个 {{domxref("setTimeout()")}} 函数被用来在两秒后将按钮重置为启用状态。
+你可以在运行时通过设置 `disabled` 为 `true` 或 `false` 来启用和禁用按钮。在这个例子中，我们的按钮一开始是启用的，但如果你按下它，就会用 `button.disabled = true` 将其禁用。然后，一个 {{domxref("Window.setTimeout", "setTimeout()")}} 函数被用来在两秒后将按钮重置为启用状态。
 
 ```html
 <input type="button" value="已启用" />
diff --git a/files/zh-cn/web/html/element/input/file/index.md b/files/zh-cn/web/html/element/input/file/index.md
index 957cd2b9df46ac..ad66e5353b04e7 100644
--- a/files/zh-cn/web/html/element/input/file/index.md
+++ b/files/zh-cn/web/html/element/input/file/index.md
@@ -156,7 +156,7 @@ div {
 - `size`
   - : 以字节数为单位的文件大小。
 - `type`
-  - : 文件的 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)。
+  - : 文件的 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types)。
 - `webkitRelativePath` {{non-standard_inline}}
   - : 一个字符串，指定了相对于在目录选择器中选择的基本目录的文件路径（即，一个设置了 [`webkitdirectory`](/zh-CN/docs/Web/HTML/Element/input/file#webkitdirectory) 属性的 `file` 选择器）。_这是非标准的，应该谨慎使用。_
 
diff --git a/files/zh-cn/web/html/element/meta/index.md b/files/zh-cn/web/html/element/meta/index.md
index e5f75675b2300c..95006af631bf9b 100644
--- a/files/zh-cn/web/html/element/meta/index.md
+++ b/files/zh-cn/web/html/element/meta/index.md
@@ -106,7 +106,7 @@ slug: Web/HTML/Element/meta
       允许页面作者定义当前页面的[内容策略](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy)。内容策略常用来指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击。
 
     - `content-type`
-      声明 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)和文档的字符编码。如果使用 `content-type` 属性，与之在同一个 `<meta>` 元素中使用的 [`content`](#content) 属性的值必须是 `"text/html; charset=utf-8"`。这相当于一个具有指定 `charset` 属性的 `<meta>` 元素，并对其在文档中的放置位置有相同的限制。**注意**：该属性只能用于 MIME 类型为 `text/html` 的文档，不能用于 MIME 类型为 XML 的文档。
+      声明 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types)和文档的字符编码。如果使用 `content-type` 属性，与之在同一个 `<meta>` 元素中使用的 [`content`](#content) 属性的值必须是 `"text/html; charset=utf-8"`。这相当于一个具有指定 `charset` 属性的 `<meta>` 元素，并对其在文档中的放置位置有相同的限制。**注意**：该属性只能用于 MIME 类型为 `text/html` 的文档，不能用于 MIME 类型为 XML 的文档。
 
     - `default-style`
 
diff --git a/files/zh-cn/web/html/element/picture/index.md b/files/zh-cn/web/html/element/picture/index.md
index 7b9b610f72b645..5334f221cf8d42 100644
--- a/files/zh-cn/web/html/element/picture/index.md
+++ b/files/zh-cn/web/html/element/picture/index.md
@@ -85,7 +85,7 @@ slug: Web/HTML/Element/picture
 
 ### `type` 属性
 
-`type` 属性允许你为 {{HTMLElement("source")}} 元素的 `srcset` 属性指向的资源指定一个 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)。如果用户代理不支持指定的类型，那么这个 {{HTMLElement("source")}} 元素会被跳过。
+`type` 属性允许你为 {{HTMLElement("source")}} 元素的 `srcset` 属性指向的资源指定一个 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types)。如果用户代理不支持指定的类型，那么这个 {{HTMLElement("source")}} 元素会被跳过。
 
 ```html
 <picture>
diff --git a/files/zh-cn/web/html/element/script/index.md b/files/zh-cn/web/html/element/script/index.md
index 001ed23a0fb39e..2b6af008f5b489 100644
--- a/files/zh-cn/web/html/element/script/index.md
+++ b/files/zh-cn/web/html/element/script/index.md
@@ -115,7 +115,7 @@ slug: Web/HTML/Element/script
 
   - : 该属性表示所代表的脚本类型。该属性的值可能为以下类型：
     - **属性未设置（默认），一个空字符串，或一个 JavaScript MIME 类型**
-      - : 代表脚本为包含 JavaScript 代码的“传统的脚本”。如果脚本指的是 JavaScript 代码，我们鼓励作者省略这个属性，而不是指定一个 MIME 类型。所有的 JavaScript MIME 类型都列在 [IANA 的媒体类型规范](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types#textjavascript)中。
+      - : 代表脚本为包含 JavaScript 代码的“传统的脚本”。如果脚本指的是 JavaScript 代码，我们鼓励作者省略这个属性，而不是指定一个 MIME 类型。所有的 JavaScript MIME 类型都列在 [IANA 的媒体类型规范](/zh-CN/docs/Web/HTTP/MIME_types#textjavascript)中。
     - `module`
       - : 此值导致代码被视为 JavaScript 模块。其中的代码内容会延后处理。`charset` 和 `defer` 属性不会生效。对于使用 `module` 的更多信息，请参见 [JavaScript 模块](/zh-CN/docs/Web/JavaScript/Guide/Modules)指南。与传统代码不同的是，模块代码需要使用 CORS 协议来跨源获取。
     - [`importmap`](/zh-CN/docs/Web/HTML/Element/script/type/importmap)
diff --git a/files/zh-cn/web/html/global_attributes/virtualkeyboardpolicy/index.md b/files/zh-cn/web/html/global_attributes/virtualkeyboardpolicy/index.md
index 8e58b45f2cc7a5..000b4c70e00b0a 100644
--- a/files/zh-cn/web/html/global_attributes/virtualkeyboardpolicy/index.md
+++ b/files/zh-cn/web/html/global_attributes/virtualkeyboardpolicy/index.md
@@ -2,12 +2,12 @@
 title: virtualkeyboardpolicy
 slug: Web/HTML/Global_attributes/virtualkeyboardpolicy
 l10n:
-  sourceCommit: d3cdafcdb4d22e5c55771501e7c80451a96aa032
+  sourceCommit: 96e73ab4d1fdb714a6a6516821b3206d83909046
 ---
 
 {{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}
 
-**`virtualkeyboardpolicy`** [全局属性](/zh-CN/docs/Web/HTML/Global_attributes)是一个枚举属性。当在一个元素上指定了该属性，且也同时使用了 [`contenteditable`](/zh-CN/docs/Web/HTML/Global_attributes#contenteditable) 属性时，它会控制在平板电脑、手机或其他设备上的虚拟键盘的行为，这些设备上可能没有硬件键盘。
+**`virtualkeyboardpolicy`** [全局属性](/zh-CN/docs/Web/HTML/Global_attributes)是一个枚举属性。当在元素上指定元素内容可编辑时（例如，它是 {{htmlelement("input")}} 或 {{htmlelement("textarea")}} 元素，或具有 [`contenteditable`](/zh-CN/docs/Web/HTML/Global_attributes/contenteditable) 属性的元素），它会控制平板电脑、手机或其他可能没有硬件键盘的设备上的屏幕虚拟键盘行为。
 
 该属性必须设置以下值之一：
 
diff --git a/files/zh-cn/web/http/basics_of_http/index.md b/files/zh-cn/web/http/basics_of_http/index.md
deleted file mode 100644
index 7b9cc470305aea..00000000000000
--- a/files/zh-cn/web/http/basics_of_http/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-title: HTTP 基础
-slug: Web/HTTP/Basics_of_HTTP
----
-
-{{HTTPSidebar}}
-
-HTTP 是一个拓展性非常好的协议。它依赖于资源或统一资源定位符（URI）的概念、一个简单的消息结构和一个客户端——服务器结构的通信流。在这些基础概念之上，近年来已经出现了许多拓展，以增加新的 HTTP 方法或首部的方式为 HTTP 协议增加了新的功能和语义。
-
-## 文章
-
-- [HTTP 概览](/zh-CN/docs/Web/HTTP/Overview)
-  - : 描述了什么是 HTTP，它在 Web 架构中的角色，以及它在协议栈中的位置。
-- [HTTP 演变](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP)
-  - : HTTP 是在 20 世纪 90 年代早期出现的，并且已经被扩充了多次。本文会回顾 HTTP 的发展史，描述 HTTP/0.9、HTTP/1.0、HTTP/1.1 和最新的 HTTP/2，以及这些年来出现的一些新特性。
-- [URI](/zh-CN/docs/Web/URI)
-  - : URI 用于定位 Web 上的资源，并且可以作为 HTTP 请求的目标。
-- [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)
-  - : 从 HTTP/1.0 开始，HTTP 协议允许传输不同类型的内容。本文解释了如何通过使用 {{HTTPHeader("Content-Type")}} 首部和 MIME 标准实现这一过程的。
-- [HTTP 会话流程](/zh-CN/docs/Web/HTTP/Session)
-  - : 本文描述了一个经典的 HTTP 会话：当你在浏览器中点击一个链接或在网页中加载一张图片时，背后到底发生了什么。
-- [HTTP 消息](/zh-CN/docs/Web/HTTP/Messages)
-  - : 在请求和响应中传输的 HTTP 消息具有非常清晰的结构；本文介绍了消息的结构、设计目的以及其可能性。
-- [HTTP/2 中的帧及消息结构](/zh-CN/docs/Web/HTTP/Frame_and_message_structure_in_HTTP_2)
-  - : HTTP/2 用二进制帧来压缩和表示 HTTP/1.x 中的消息。本文解释了 HTTP/2 中的帧结构，其设计目的以及编码方式。
-- [HTTP/1.x 的连接管理](/zh-CN/docs/Web/HTTP/Connection_management_in_HTTP_1.x)
-  - : HTTP/1.1 是首个支持持久化连接和管道化的 HTTP 版本。本文介绍了这两个概念。
-- [HTTP/2 的连接管理](/zh-CN/docs/Web/HTTP/Connection_management_in_HTTP_2)
-  - : HTTP/2 完全改变了连接创建和维护的方式：本文介绍了 HTTP 帧是怎样支持多路复用并解决之前的 HTTP 版本中存在的队头阻塞问题的。
-- [内容协商](/zh-CN/docs/Web/HTTP/Content_negotiation)
-  - : HTTP 引入了一组以 [`Accept`](/zh-CN/docs/Web/HTTP/Headers/Accept) 开头的首部，作为浏览器用来声明它们期望得到的格式，语言或编码的方法。本文讲述了这一过程是怎样实现的，以及服务器是怎样处理并选择恰当的响应的。
diff --git a/files/zh-cn/web/http/cors/index.md b/files/zh-cn/web/http/cors/index.md
index fb470289fccf12..782b90cb885164 100644
--- a/files/zh-cn/web/http/cors/index.md
+++ b/files/zh-cn/web/http/cors/index.md
@@ -29,7 +29,7 @@ CORS 机制允许 Web 应用服务器进行跨源访问控制，从而使跨源
 
 ## 功能概述
 
-跨源资源共享标准新增了一组 [HTTP 标头](/zh-CN/docs/Web/HTTP/Headers)字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 {{HTTPMethod("GET")}} 以外的 HTTP 请求，或者搭配某些 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)的 {{HTTPMethod("POST")}} 请求），浏览器必须首先使用 {{HTTPMethod("OPTIONS")}} 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨源请求。服务器确认允许之后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（例如 [Cookie](/zh-CN/docs/Web/HTTP/Cookies) 和 [HTTP 认证](/zh-CN/docs/Web/HTTP/Authentication)相关数据）。
+跨源资源共享标准新增了一组 [HTTP 标头](/zh-CN/docs/Web/HTTP/Headers)字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 {{HTTPMethod("GET")}} 以外的 HTTP 请求，或者搭配某些 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types)的 {{HTTPMethod("POST")}} 请求），浏览器必须首先使用 {{HTTPMethod("OPTIONS")}} 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨源请求。服务器确认允许之后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（例如 [Cookie](/zh-CN/docs/Web/HTTP/Cookies) 和 [HTTP 认证](/zh-CN/docs/Web/HTTP/Authentication)相关数据）。
 
 CORS 请求失败会产生错误，但是为了安全，在 JavaScript 代码层面*无法*获知到底具体是哪里出了问题。你只能查看浏览器的控制台以得知具体是哪里出现了错误。
 
diff --git a/files/zh-cn/web/http/basics_of_http/evolution_of_http/index.md b/files/zh-cn/web/http/evolution_of_http/index.md
similarity index 99%
rename from files/zh-cn/web/http/basics_of_http/evolution_of_http/index.md
rename to files/zh-cn/web/http/evolution_of_http/index.md
index 159a189341f5ce..1412c42a81bc4e 100644
--- a/files/zh-cn/web/http/basics_of_http/evolution_of_http/index.md
+++ b/files/zh-cn/web/http/evolution_of_http/index.md
@@ -1,6 +1,6 @@
 ---
 title: HTTP 的发展
-slug: Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP
+slug: Web/HTTP/Evolution_of_HTTP
 ---
 
 {{HTTPSidebar}}
diff --git a/files/zh-cn/web/http/headers/accept-post/index.md b/files/zh-cn/web/http/headers/accept-post/index.md
index 9b5e4911f8b78c..99803fec166d94 100644
--- a/files/zh-cn/web/http/headers/accept-post/index.md
+++ b/files/zh-cn/web/http/headers/accept-post/index.md
@@ -2,19 +2,21 @@
 title: Accept-Post
 slug: Web/HTTP/Headers/Accept-Post
 l10n:
-  sourceCommit: 0880a90f3811475d78bc4b2c344eb4146f25f66c
+  sourceCommit: f75b2c86ae4168e59416aed4c7121f222afc201d
 ---
 
 {{HTTPSidebar}}
 
-**`Accept-Post`** HTTP 响应标头用于告知客户端服务器在接受 HTTP 的 POST 请求时能处理哪些[媒体类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)。
+**`Accept-Post`** HTTP 响应标头用于告知客户端服务器在接受 HTTP 的 POST 请求时能处理哪些[媒体类型](/zh-CN/docs/Web/HTTP/MIME_types)。
 
 响应中对于任何方法的 **`Accept-Post`** 字段意味着允许在请求的资源上执行 `POST` 操作（标头中任何提及的文档或媒体格式进一步表明该格式的文档也被允许）。
 
 例如，服务器接收到具有不支持的媒体类型的 `POST` 请求时，可以回复 {{HTTPStatus("415")}} `Unsupported Media Type`（不支持的媒体类型）状态码，并在响应中包含一个 **`Accept-Post`** 标头，其中引用了一个或多个支持的媒体类型。
 
 > [!NOTE]
-> IANA 维护了[一个完整的官方支持的编码方式列表](https://www.iana.org/assignments/http-parameters/http-parameters.xml#http-parameters-1)。
+>
+> - 一个 IANA 注册表维护了[完整的官方支持的编码方式列表](https://www.iana.org/assignments/http-parameters/http-parameters.xhtml#content-coding)。
+> - `bzip` 和 `bzip2` 编码不是标准化的，但可能在某些情况下被使用（包括遗留的支持）。
 
 <table class="properties">
   <tbody>
diff --git a/files/zh-cn/web/http/headers/accept/index.md b/files/zh-cn/web/http/headers/accept/index.md
index b62213bab262a8..b6ffd736917f37 100644
--- a/files/zh-cn/web/http/headers/accept/index.md
+++ b/files/zh-cn/web/http/headers/accept/index.md
@@ -2,12 +2,12 @@
 title: Accept
 slug: Web/HTTP/Headers/Accept
 l10n:
-  sourceCommit: 7aab76c49ae49d606b4958f8dc8cd1269fb7b9b6
+  sourceCommit: f75b2c86ae4168e59416aed4c7121f222afc201d
 ---
 
 {{HTTPSidebar}}
 
-**`Accept`** 请求 HTTP 标头表示客户端能够理解的内容类型，以 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)的形式表达。借助[内容协商机制](/zh-CN/docs/Web/HTTP/Content_negotiation), 服务器可以从诸多备选项中选择一项进行应用，并使用 {{HTTPHeader("Content-Type")}} 响应标头通知客户端它的选择。浏览器会基于请求的上下文来为这个请求标头设置合适的值，比如，获取一个 CSS 层叠样式表时的值与获取图片、视频或脚本文件时的值是不同的。
+**`Accept`** 请求 HTTP 标头表示客户端能够理解的内容类型，以 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types)的形式表达。借助[内容协商机制](/zh-CN/docs/Web/HTTP/Content_negotiation), 服务器可以从诸多备选项中选择一项进行应用，并使用 {{HTTPHeader("Content-Type")}} 响应标头通知客户端它的选择。浏览器会基于请求的上下文来为这个请求标头设置合适的值，比如，获取一个 CSS 层叠样式表时的值与获取图片、视频或脚本文件时的值是不同的。
 
 <table class="properties">
   <tbody>
@@ -44,7 +44,7 @@ Accept: text/html, application/xhtml+xml, application/xml;q=0.9, image/webp, */*
 ## 指令
 
 - `<MIME_type>/<MIME_subtype>`
-  - : 一个单一且精确的 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)，例如 `text/html`。
+  - : 一个单一且精确的 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types)，例如 `text/html`。
 - `<MIME_type>/*`
   - : 一个 MIME 类型，但不包含子类型。`image/*` 对应于 `image/png`、`image/svg`、`image/gif` 以及其他图像类型。
 - `*/*`
diff --git a/files/zh-cn/web/http/headers/content-encoding/index.md b/files/zh-cn/web/http/headers/content-encoding/index.md
index db1e9d38fada95..66fd157391a7b9 100644
--- a/files/zh-cn/web/http/headers/content-encoding/index.md
+++ b/files/zh-cn/web/http/headers/content-encoding/index.md
@@ -1,25 +1,27 @@
 ---
 title: Content-Encoding
 slug: Web/HTTP/Headers/Content-Encoding
+l10n:
+  sourceCommit: ae86913908651e6008079242691e06b5e01d1c78
 ---
 
 {{HTTPSidebar}}
 
-{{Glossary("representation header", "实体消息首部")}} **`Content-Encoding`** 列出了对当前实体消息（消息荷载）应用的任何编码类型，以及编码的顺序。它让接收者知道需要以何种顺序解码该实体消息才能获得原始荷载格式。Content-Encoding 主要用于在不丢失原媒体类型内容的情况下压缩消息数据。
+{{Glossary("representation header", "表示标头")}} **`Content-Encoding`** 列出了对当前应用资源的任何编码类型，以及编码的顺序。它让接收者知道需要以何种顺序解码数据以获得 {{HTTPHeader("Content-Type")}} 标头中描述的原始内容格式。内容编码主要用于在不丢失原媒体类型内容的情况下压缩内容。
 
-请注意原始媒体/内容的类型通过 {{HTTPHeader("Content-Type")}} 首部给出，而 `Content-Encoding` 应用于数据的表示，或“编码形式”。如果原始媒体以某种方式编码（例如 zip 文件），则该信息不应该被包含在 `Content-Encoding` 首部内。
+一般建议服务器应对数据尽可能地进行压缩，并在适当情况下对内容进行编码。对一种压缩过的媒体类型如 .zip 或 .jpeg 进行额外的压缩并不合适，因为这反而有可能会使内容增大。如果原始媒体以某种方式编码（例如 .zip 文件），则该信息不应该被包含在 `Content-Encoding` 标头内。
 
-一般建议服务器应对数据尽可能地进行压缩，并在适当情况下对内容进行编码。对一种压缩过的媒体类型如 zip 或 jpeg 进行额外的压缩并不合适，因为这反而有可能会使荷载增大。
+当存在 `Content-Encoding` 标头时，其他元数据（例如 {{HTTPHeader("Content-Type")}}）指示的是数据编码后的形式，而不是原始数据的形式（除非显式声明）。内容编码与 {{HTTPHeader("Transfer-Encoding")}} 不同，因为 `Transfer-Encoding` 处理的是 HTTP 消息本身如何在网络上[逐跳](/zh-CN/docs/Web/HTTP/Headers#逐跳（hop-by-hop）标头)传输。
 
 <table class="properties">
  <tbody>
   <tr>
-   <th scope="row">Header type</th>
-   <td>{{Glossary("Representation header")}}</td>
+   <th scope="row">标头类型</th>
+   <td>{{Glossary("Representation header", "表示标头")}}</td>
   </tr>
   <tr>
-   <th scope="row">{{Glossary("Forbidden header name")}}</th>
-   <td>no</td>
+   <th scope="row">{{Glossary("Forbidden header name", "禁止修改的标头")}}</th>
+   <td>否</td>
   </tr>
  </tbody>
 </table>
@@ -31,6 +33,7 @@ Content-Encoding: gzip
 Content-Encoding: compress
 Content-Encoding: deflate
 Content-Encoding: br
+Content-Encoding: zstd
 
 // 多个，按应用的编码顺序列出
 Content-Encoding: deflate, gzip
@@ -43,21 +46,23 @@ Content-Encoding: deflate, gzip
 - `compress`
   - : 采用 [Lempel-Ziv-Welch](https://zh.wikipedia.org/wiki/LZW)（LZW）压缩算法。这个名称来自 UNIX 系统的 _compress_ 程序，该程序实现了前述算法。与其同名程序已经在大部分 UNIX 发行版中消失一样，这种内容编码方式已经被大部分浏览器弃用，部分因为专利问题（这项专利在 2003 年到期）。
 - `deflate`
-  - : 采用 [zlib](https://zh.wikipedia.org/wiki/zlib) 结构（在 {{rfc(1950)}} 中规定），和 [deflate](https://zh.wikipedia.org/wiki/DEFLATE) 压缩算法（在 {{rfc(1951)}} 中规定)。
+  - : 采用 [zlib](https://zh.wikipedia.org/wiki/zlib) 结构（在 {{rfc(1950)}} 中规定）和 [deflate](https://zh.wikipedia.org/wiki/DEFLATE) 压缩算法（在 {{rfc(1951)}} 中规定)。
 - `br`
-  - : 表示采用 [Brotli](https://zh.wikipedia.org/wiki/Brotli) 算法的编码方式。
+  - : 采用 {{glossary("Brotli compression","Brotli")}} 算法结构（在 {{rfc(7932)}} 中规定）的格式。
+- `zstd`
+  - : 采用 {{glossary("Zstandard compression","Zstandard")}} 算法结构（在 {{rfc(8878)}} 中规定）的格式。
 
 ## 示例
 
 ### 使用 gzip 方式进行压缩
 
-客户端可以事先声明一系列可以支持的压缩模式，与请求一齐发送。{{HTTPHeader("Accept-Encoding")}} 这个首部就是用来进行这种内容编码形式协商的：
+在客户端，可以声明一个将在 HTTP 请求中一齐发送的压缩模式列表。{{HTTPHeader("Accept-Encoding")}} 标头用于协商内容编码。
 
 ```http
 Accept-Encoding: gzip, deflate
 ```
 
-服务器在 `Content-Encoding` 响应首部提供了实际采用的压缩模式：
+服务器通过 `Content-Encoding` 响应标头指示所使用的模式进行响应。
 
 ```http
 Content-Encoding: gzip
@@ -77,3 +82,6 @@ Content-Encoding: gzip
 
 - {{HTTPHeader("Accept-Encoding")}}
 - {{HTTPHeader("Transfer-Encoding")}}
+- {{Glossary("Brotli compression", "Brotli 压缩")}}
+- {{Glossary("GZip compression", "GZip 压缩")}}
+- {{Glossary("Zstandard compression", "Zstandard 压缩")}}
diff --git a/files/zh-cn/web/http/headers/content-security-policy/default-src/index.md b/files/zh-cn/web/http/headers/content-security-policy/default-src/index.md
index 28f31ab2026ce7..09dd6cf8d7cd35 100644
--- a/files/zh-cn/web/http/headers/content-security-policy/default-src/index.md
+++ b/files/zh-cn/web/http/headers/content-security-policy/default-src/index.md
@@ -1,11 +1,11 @@
 ---
-title: "CSP: default-src"
+title: CSP：default-src
 slug: Web/HTTP/Headers/Content-Security-Policy/default-src
 ---
 
 {{HTTPSidebar}}
 
-在 HTTP 协议中，{{HTTPHeader("Content-Security-Policy")}} (CSP) 首部字段中的 **`default-src`** 指令可以为其他 CSP 拉取指令（{{Glossary("fetch directive", "fetch directives")}}）提供备选项。对于以下列出的指令，假如不存在的话，那么用户代理会查找并应用 default-src 指令的值。
+HTTP {{HTTPHeader("Content-Security-Policy")}}（CSP）的 **`default-src`** 指令可以为其他 CSP {{Glossary("fetch directive", "fetch 指令")}}提供回退。对于以下列出的指令，假如不存在的话，那么用户代理会查找并应用 `default-src` 指令的值：
 
 - {{CSP("child-src")}}
 - {{CSP("connect-src")}}
@@ -19,65 +19,47 @@ slug: Web/HTTP/Headers/Content-Security-Policy/default-src
 - {{CSP("style-src")}}
 - {{CSP("worker-src")}}
 
-| CSP 版本 | 1                               |
-| -------- | ------------------------------- |
-| 指令类型 | {{Glossary("Fetch directive")}} |
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">CSP 版本</th>
+      <td>1</td>
+    </tr>
+    <tr>
+      <th scope="row">指令类型</th>
+      <td>{{Glossary("Fetch directive", "fetch 指令")}}</td>
+    </tr>
+  </tbody>
+</table>
 
 ## 语法
 
 `default-src` 策略允许指定一个或多个源：
 
-```plain
+```http
 Content-Security-Policy: default-src <source>;
 Content-Security-Policy: default-src <source> <source>;
 ```
 
 ### 源
 
-\<source> 可以是以下之一：
-
-- \<host-source>
-  - : 以域名或者 IP 地址表示的主机名，外加可选的 URL 协议名（[URL scheme](/zh-CN/docs/URIs_and_URLs)）以及端口号。站点地址中可能会包含一个可选的前置通配符（星号 '\*'），同时也可以将通配符（也是'\*'）应用于端口号，表示在这个源中可以使用任意合法的端口号。
-    举例说明：_ `http://_.example.com:` 匹配从使用 http: 的 example.com 的任意子域的资源加载。
-    - `mail.example.com:443:`匹配对 mail.example.com 上的 443 端口号的访问。
-    - `https://store.example.com`: 匹配对使用了 https: 的 store.example.com 的访问。
-- \<scheme-source>
-
-  - : 协议名如'http:' 或者 'https:'。**必须带有冒号，不要有单引号**。同时你还可以指定数据协议（data schema）（不推荐使用）。
-
-    - `data:` 允许 [`data:` URIs](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) 作为内容的源。这是不安全的。攻击者可以注入任意 data: URI。不要轻易使用这种形式的源，尤其是脚本，绝对不要使用。
-    - `mediastream:` 允许 [`mediastream:` URIs](/zh-CN/docs/Web/API/MediaStream_API) 作为内容的源。
-    - `blob:` 允许 [`blob:` URIs](/zh-CN/docs/Web/API/Blob) 作为内容的源。
-    - `filesystem:` 允许 [`filesystem:` URIs](/zh-CN/docs/Web/API/FileSystem) 作为内容的源。
-
-- `'self'`
-  - : 指向与要保护的文件所在的源，包括相同的 URL scheme 与端口号。必须有单引号。一些浏览器会特意排除 blob 与 filesystem。需要设定这两种内容类型的站点可以在 Data 属性中进行设定。
-- `'unsafe-inline'`
-  - : 允许使用内联资源，例如内联 {{HTMLElement("script")}} 元素（javascript: URL）、内联事件处理器以及内联 {{HTMLElement("style")}} 元素。必须有单引号。
-- `'unsafe-eval'`
-  - : 允许使用 eval() 以及相似的函数来从字符串创建代码。必须有单引号。
-- `'none'`
-  - : 不允许任何内容。必须有单引号。
-- 'nonce-\<base64 值>'
-  - : 特定使用一次性加密内联脚本的白名单。服务器必须在每一次传输政策时生成唯一的一次性值。否则将存在绕过资源政策的可能。请参见[不安全的内联脚本](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#Unsafe_inline_script)查看示例。
-- \<hash-source>
-  - : 使用 sha256、sha384 或 sha512 编码过的内联脚本或样式。其由用短划线分隔的两部分组成：用于创建哈希的加密算法，以及脚本或样式 base64 编码的哈希值。当生成哈希值的时候，不要包含 \<script> 或 \<style> 标签，同时注意字母大小写与空格——包括首尾空格——都是会影响生成的结果的。请参见[不安全的内联脚本](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#Unsafe_inline_script)。
-- 'strict-dynamic'
-  - : strict-dynamic 指定对于含有标记脚本 (通过附加一个随机数或散列) 的信任，应该传播到由该脚本加载的所有脚本。与此同时，任何白名单以及源表达式例如 'self' 或者 'unsafe-inline' 都会被忽略。参见 [script-src](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/script-src#strict-dynamic) 。
+`<source>` 可以是 [CSP 源值](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#源)中列出的任何值。
+
+注意，这些值可以在所有的 {{Glossary("fetch directive", "fetch 指令")}}（以及[其他指令](/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#相关指令)）中使用。
 
 ## 示例
 
-### `不继承 default-src 的情况`
+### 不继承 default-src 的情况
 
-假如设定了其他指令，那么 `default-src` 不会对它们起作用。这个首部
+假如设定了其他指令，那么 `default-src` 不会对它们起作用。这个标头：
 
-```bash
+```http
 Content-Security-Policy: default-src 'self'; script-src https://example.com
 ```
 
-与下列代码等价：
+与下面的等价：
 
-```bash
+```http
 Content-Security-Policy: connect-src 'self';
                          font-src 'self';
                          frame-src 'self';
diff --git a/files/zh-cn/web/http/headers/content-security-policy/frame-ancestors/index.md b/files/zh-cn/web/http/headers/content-security-policy/frame-ancestors/index.md
index f34d3cbbe3fbbb..66feb83dd8c7ae 100644
--- a/files/zh-cn/web/http/headers/content-security-policy/frame-ancestors/index.md
+++ b/files/zh-cn/web/http/headers/content-security-policy/frame-ancestors/index.md
@@ -33,34 +33,34 @@ HTTP 标头 {{HTTPHeader("Content-Security-Policy")}}（CSP）中的 `frame-ance
   </tbody>
 </table>
 
-## Syntax
+## 语法
 
 `frame-ancestors`策略可以设置一个或多个源\<source>：
 
-```plain
+```http
 Content-Security-Policy: frame-ancestors <source>;
-Content-Security-Policy: frame-ancestors <source> <source>;
+Content-Security-Policy: frame-ancestors <space separated list of sources>;
 ```
 
-### Sources
+### 源
 
 \<source> 可以是如下内容：
 
 > **备注：** `frame-ancestors` 指令的语法类似于其他指令的源列表（source list，如{{CSP("default-src")}}），但不允许 `'unsafe-eval'` 或`'unsafe-inline'` 。它也不会回退使用 `default-src` 的值。仅有如下的源列表是可用的：
 
 - \<host-source>
-  - : 一个 Internet 主机的名称或 IP 地址，以及一个可选的[URL scheme](/zh-CN/docs/URIs_and_URLs)和／或端口号。这些站点的地址可以包含一个可选的引导通配符（星号， `'*'），或者你可以使用通配符`（同样还是， `'*'）作为端口地址`，以示这个源的所有合法端口地址都是有效的。
-    例子：_ `http://_.example.com`: 匹配所有使用 http:URL scheme 并来对于 example.com 及其子域名的加载意图。
+  - : 一个 Internet 主机的名称或 IP 地址，以及一个可选的 {{Glossary("URL")}} 方案和／或端口号。这些站点的地址可以包含一个可选的引导通配符（星号， `'*'），或者你可以使用通配符`（同样还是， `'*'）作为端口地址`，以示这个源的所有合法端口地址都是有效的。
+    例子：_ `http://_.example.com`: 匹配所有使用 `http:` URL 方案并来对于 example.com 及其子域名的加载意图。
     - `mail.example.com:443`: 匹配所有对于 mail.example.com 在 443 端口的访问意图。
-    - `https://store.example.com`: 匹配所有使用 https:访问 store.example.com 的意图。
+    - `https://store.example.com`: 匹配所有使用 `https:` 访问 store.example.com 的意图。
 - \<scheme-source>
 
   - : 一个 schema 配置，比如'http:'或'https:'。注意，冒号是必要的。你同样也可以指定一个 data schema（但并不推荐）。
 
-    - '`data:`' 允许 [`data:` URIs](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) 作为内容源。_这是不安全的，攻击者可以用此来注入恶意代码。请谨慎使用，并不要令其作用于脚本。_
-    - `'mediastream:'` 允许 [`mediastream:` URIs](/zh-CN/docs/Web/API/MediaStream_API) 作为内容源。
-    - `'blob:'` 允许 [`blob:` URIs](/zh-CN/docs/Web/API/Blob) 作为内容源。
-    - `'filesystem:'` 允许 [`filesystem:` URIs](/zh-CN/docs/Web/API/FileSystem) 作为内容源。
+    - '`data:`' 允许 [`data:` URI](/zh-CN/docs/Web/URI/Schemes/data) 作为内容源。_这是不安全的，攻击者可以用此来注入恶意代码。请谨慎使用，并不要令其作用于脚本。_
+    - `'mediastream:'` 允许 [`mediastream:` URI](/zh-CN/docs/Web/API/Media_Capture_and_Streams_API) 作为内容源。
+    - `'blob:'` 允许 [`blob:` URI](/zh-CN/docs/Web/API/Blob) 作为内容源。
+    - `'filesystem:'` 允许 [`filesystem:` URI](/zh-CN/docs/Web/API/FileSystem) 作为内容源。
 
 - `'self'`
   - : 指向一个该受保护文档所在的源，包含同样的 URL schema 和端口号。必须用单引号设置。有些浏览器会从源指令中排`除 blob`和`filesystem`。需要允许这些内容类型的站点可以通过 Data 属性指定它们。
diff --git a/files/zh-cn/web/http/headers/content-type/index.md b/files/zh-cn/web/http/headers/content-type/index.md
index b288e59adaf2ff..af30dc17ef5203 100644
--- a/files/zh-cn/web/http/headers/content-type/index.md
+++ b/files/zh-cn/web/http/headers/content-type/index.md
@@ -51,7 +51,7 @@ Content-Type: multipart/form-data; boundary=something
 ## 指令
 
 - `media-type`
-  - : 资源或数据的 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)。
+  - : 资源或数据的 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types)。
 - charset
   - : 字符编码标准。不区分大小写，推荐使用小写。
 - boundary
diff --git a/files/zh-cn/web/http/headers/index.md b/files/zh-cn/web/http/headers/index.md
index 6168a7dc58ee16..6908792029370c 100644
--- a/files/zh-cn/web/http/headers/index.md
+++ b/files/zh-cn/web/http/headers/index.md
@@ -13,7 +13,7 @@ slug: Web/HTTP/Headers
 
 - {{Glossary("Request header", "请求标头")}}包含有关要获取的资源或客户端或请求资源的客户端的更多信息。
 - {{Glossary("Response header", "响应标头")}}包含有关响应的额外信息，例如响应的位置或者提供响应的服务器。
-- {{Glossary("Representation header", "表示标头")}}包含资源主体的信息，例如主体的 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)或者应用的编码/压缩方案。
+- {{Glossary("Representation header", "表示标头")}}包含资源主体的信息，例如主体的 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types)或者应用的编码/压缩方案。
 - {{Glossary("Payload header","有效负荷标头")}}包含有关有效载荷数据表示的单独信息，包括内容长度和用于传输的编码。
 
 标头也可以根据{{Glossary("Proxy_server", "代理")}}处理它们的方式进行分组：
diff --git a/files/zh-cn/web/http/headers/x-content-type-options/index.md b/files/zh-cn/web/http/headers/x-content-type-options/index.md
index 4adeda3dc5b605..bae260b9c387a0 100644
--- a/files/zh-cn/web/http/headers/x-content-type-options/index.md
+++ b/files/zh-cn/web/http/headers/x-content-type-options/index.md
@@ -5,7 +5,7 @@ slug: Web/HTTP/Headers/X-Content-Type-Options
 
 {{HTTPSidebar}}
 
-**`X-Content-Type-Options`** HTTP 消息头相当于一个提示标志，被服务器用来提示客户端一定要遵循在 {{HTTPHeader("Content-Type")}} 首部中对 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types) 的设定，而不能对其进行修改。这就禁用了客户端的 [MIME 类型嗅探](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types#MIME_sniffing)行为，换句话说，也就是意味着网站管理员确定自己的设置没有问题。
+**`X-Content-Type-Options`** HTTP 消息头相当于一个提示标志，被服务器用来提示客户端一定要遵循在 {{HTTPHeader("Content-Type")}} 首部中对 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types) 的设定，而不能对其进行修改。这就禁用了客户端的 [MIME 类型嗅探](/zh-CN/docs/Web/HTTP/MIME_types#mime_嗅探)行为，换句话说，也就是意味着网站管理员确定自己的设置没有问题。
 
 该消息头最初是由微软在 IE 8 浏览器中引入的，提供给网站管理员用作禁用内容嗅探的手段，内容嗅探技术可能会把不可执行的 MIME 类型转变为可执行的 MIME 类型。在此之后，其他浏览器也相继引入了这个消息头，尽管它们的 MIME 嗅探算法没有那么有侵略性。
 
diff --git a/files/zh-cn/web/http/index.md b/files/zh-cn/web/http/index.md
index 12b8c1e0d32419..4c36ab0c6b5a05 100644
--- a/files/zh-cn/web/http/index.md
+++ b/files/zh-cn/web/http/index.md
@@ -21,7 +21,7 @@ slug: Web/HTTP
   - : **跨站点 HTTP 请求**就是从**另一个域**，而不是资源所在的域发起的 HTTP 请求。举例来说，在域 A（`http://domaina.example/`）的 HTML 页面上通过 `img` 元素来请求域 B（`http://domainb.foo/image.jpg`）上的图片资源。这在当今的 Web 页面上是很常见的——加载跨站点资源，包括 CSS 样式表、图片、脚本和其他资源。CORS 允许 Web 开发人员控制其站点对跨站点请求的反应。
 - [HTTP 客户端提示（Client Hint）](/zh-CN/docs/Web/HTTP/Client_hints)
   - : **客户端提示**是一组响应标头，服务器可以使用它来主动从客户端请求关于设备、网络、用户以及用户代理指定的首选项的信息。然后，服务器可以根据客户端选择提供的信息来确定发送哪些资源。
-- [HTTP 的演变](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Evolution_of_HTTP)
+- [HTTP 的演变](/zh-CN/docs/Web/HTTP/Evolution_of_HTTP)
   - : 简单描述了从早期版本的 HTTP 到现代 HTTP/2，新兴的 HTTP/3 以及未来版本的 HTTP 这个过程中发生的变更。
 - [Mozilla Web 安全准则](https://wiki.mozilla.org/Security/Guidelines/Web_Security)
   - : 一系列用于帮助运营团队创建安全的 Web 应用程序的技巧。
diff --git a/files/zh-cn/web/http/messages/index.md b/files/zh-cn/web/http/messages/index.md
index 3cbf8cf8476b86..9a719f5cb87e57 100644
--- a/files/zh-cn/web/http/messages/index.md
+++ b/files/zh-cn/web/http/messages/index.md
@@ -65,7 +65,7 @@ HTTP 请求是由客户端发出的消息，用来使服务器执行动作。_
 主体大致可分为两类：
 
 - 单一资源（Single-resource）主体，由一个单文件组成。该类型的主体由两个标头定义：{{HTTPHeader("Content-Type")}} 和 {{HTTPHeader("Content-Length")}}。
-- [多资源（Multiple-resource）主体](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types#multipartform-data)，由多部分主体组成，每一部分包含不同的信息位。通常是和 [HTML 表单](/zh-CN/docs/Learn/Forms)连系在一起。
+- [多资源（Multiple-resource）主体](/zh-CN/docs/Web/HTTP/MIME_types#multipartform-data)，由多部分主体组成，每一部分包含不同的信息位。通常是和 [HTML 表单](/zh-CN/docs/Learn/Forms)连系在一起。
 
 ## HTTP 响应
 
@@ -99,7 +99,7 @@ HTTP 响应的起始行被称作*状态行*（status line），包含以下信
 
 - 单资源（Single-resource）主体，由**已知**长度的单个文件组成。该类型主体由两个标头定义：{{HTTPHeader("Content-Type")}} 和 {{HTTPHeader("Content-Length")}}。
 - 单资源（Single-resource）主体，由**未知**长度的单个文件组成。通过将 {{HTTPHeader("Transfer-Encoding")}} 设置为 `chunked` 来使用分块编码。
-- [多资源（Multiple-resource）主体](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types#multipartform-data)，由多部分 body 组成，每部分包含不同的信息段。但这是比较少见的。
+- [多资源（Multiple-resource）主体](/zh-CN/docs/Web/HTTP/MIME_types#multipartform-data)，由多部分 body 组成，每部分包含不同的信息段。但这是比较少见的。
 
 ## HTTP/2 帧
 
diff --git a/files/zh-cn/web/http/basics_of_http/mime_types/common_types/index.md b/files/zh-cn/web/http/mime_types/common_types/index.md
similarity index 99%
rename from files/zh-cn/web/http/basics_of_http/mime_types/common_types/index.md
rename to files/zh-cn/web/http/mime_types/common_types/index.md
index 9834bd891cd76d..dd0f629a954094 100644
--- a/files/zh-cn/web/http/basics_of_http/mime_types/common_types/index.md
+++ b/files/zh-cn/web/http/mime_types/common_types/index.md
@@ -1,6 +1,6 @@
 ---
 title: 常见 MIME 类型列表
-slug: Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
+slug: Web/HTTP/MIME_types/Common_types
 ---
 
 {{HTTPSidebar}}
diff --git a/files/zh-cn/web/http/basics_of_http/mime_types/index.md b/files/zh-cn/web/http/mime_types/index.md
similarity index 99%
rename from files/zh-cn/web/http/basics_of_http/mime_types/index.md
rename to files/zh-cn/web/http/mime_types/index.md
index 03e7da3ff4448d..4f945abb57cded 100644
--- a/files/zh-cn/web/http/basics_of_http/mime_types/index.md
+++ b/files/zh-cn/web/http/mime_types/index.md
@@ -1,6 +1,6 @@
 ---
 title: MIME 类型（IANA 媒体类型）
-slug: Web/HTTP/Basics_of_HTTP/MIME_types
+slug: Web/HTTP/MIME_types
 ---
 
 {{HTTPSidebar}}
diff --git a/files/zh-cn/web/javascript/event_loop/index.md b/files/zh-cn/web/javascript/event_loop/index.md
index bac2e812e10863..349d467837e7b5 100644
--- a/files/zh-cn/web/javascript/event_loop/index.md
+++ b/files/zh-cn/web/javascript/event_loop/index.md
@@ -69,7 +69,7 @@ while (queue.waitForMessage()) {
 
 在浏览器里，每当一个事件发生并且有一个事件监听器绑定在该事件上时，一个消息就会被添加进消息队列。如果没有事件监听器，这个事件将会丢失。所以当一个带有点击事件处理器的元素被点击时，就会像其他事件一样产生一个类似的消息。
 
-函数 [`setTimeout`](/zh-CN/docs/Web/API/Window/setTimeout) 接受两个参数：待加入队列的消息和一个时间值（可选，默认为 0）。这个时间值代表了消息被实际加入到队列的最小延迟时间。如果队列中没有其他消息并且栈为空，在这段延迟时间过去之后，消息会被马上处理。但是，如果有其他消息，`setTimeout` 消息必须等待其他消息处理完。因此第二个参数仅仅表示最少延迟时间，而非确切的等待时间。
+函数 {{domxref("Window.setTimeout", "setTimeout()")}} 接受两个参数：待加入队列的消息和一个时间值（可选，默认为 0）。这个时间值代表了消息被实际加入到队列的最小延迟时间。如果队列中没有其他消息并且栈为空，在这段延迟时间过去之后，消息会被马上处理。但是，如果有其他消息，`setTimeout` 消息必须等待其他消息处理完。因此第二个参数仅仅表示最少延迟时间，而非确切的等待时间。
 
 下面的例子演示了这个概念（`setTimeout` 并不会在计时器到期之后直接执行）：
 
diff --git a/files/zh-cn/web/javascript/guide/using_promises/index.md b/files/zh-cn/web/javascript/guide/using_promises/index.md
index 3b891cfb145dd7..3e66724513474b 100644
--- a/files/zh-cn/web/javascript/guide/using_promises/index.md
+++ b/files/zh-cn/web/javascript/guide/using_promises/index.md
@@ -435,15 +435,15 @@ for (const f of [func1, func2, func3]) {
 
 可以通过 Promise 的构造函数从零开始创建 {{jsxref("Promise")}}。这种方式（通过构造函数的方式）应当只在封装旧 API 的时候用到。
 
-理想状态下，所有的异步函数应该会返回 Promise。但有一些 API 仍然使用旧方式来传入成功（或者失败）的回调。最典型的例子就是 {{domxref("WindowTimers.setTimeout", "setTimeout()")}} 函数：
+理想状态下，所有的异步函数应该会返回 Promise。但有一些 API 仍然使用旧方式来传入成功（或者失败）的回调。最典型的例子就是 {{domxref("Window.setTimeout", "setTimeout()")}} 函数：
 
 ```js
 setTimeout(() => saySomething("10 秒钟过去了"), 10 * 1000);
 ```
 
-混用旧式回调和 Promise 可能会造成运行时序问题。如果 `saySomething` 函数失败了，或者包含了编程错误，那就没有办法捕获它了。这得怪 `setTimeout`。
+混用旧式回调和 Promise 可能会造成运行时序问题。如果 `saySomething` 函数失败了，或者包含了编程错误，那就没有办法捕获它了。这得怪 `setTimeout()`。
 
-幸运地是，我们可以将 `setTimeout` 封装入 Promise 内。最好的做法是，将这些有问题的函数封装起来，留在底层，并且永远不要再直接调用它们：
+幸运地是，我们可以将 `setTimeout()` 封装入 Promise 内。最好的做法是，将这些有问题的函数封装起来，留在底层，并且永远不要再直接调用它们：
 
 ```js
 const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
@@ -453,7 +453,7 @@ wait(10 * 1000)
   .catch(failureCallback);
 ```
 
-通常，Promise 的构造函数接收一个执行函数（executor），我们可以在这个执行函数里手动地解决（resolve）或拒绝（reject）一个 Promise。既然 `setTimeout` 并不会真的执行失败，那么我们可以在这种情况下忽略拒绝的情况。你可以在 [`Promise()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) 参考中查看更多关于执行函数的信息。
+通常，Promise 的构造函数接收一个执行函数（executor），我们可以在这个执行函数里手动地解决（resolve）或拒绝（reject）一个 Promise。既然 `setTimeout()` 并不会真的执行失败，那么我们可以在这种情况下忽略拒绝的情况。你可以在 [`Promise()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) 参考中查看更多关于执行函数的信息。
 
 ## 时序
 
@@ -510,7 +510,7 @@ console.log(1); // 1, 2, 3, 4
 
 ### 任务队列 vs. 微任务
 
-Promise 回调被处理为[微任务](/zh-CN/docs/Web/API/HTML_DOM_API/Microtask_guide)，而 [`setTimeout()`](/zh-CN/docs/Web/API/setTimeout) 回调被处理为任务队列。
+Promise 回调被处理为[微任务](/zh-CN/docs/Web/API/HTML_DOM_API/Microtask_guide)，而 {{domxref("Window.setTimeout", "setTimeout()")}} 回调被处理为任务队列。
 
 ```js
 const promise = new Promise((resolve, reject) => {
diff --git a/files/zh-cn/web/javascript/javascript_technologies_overview/index.md b/files/zh-cn/web/javascript/javascript_technologies_overview/index.md
index 1153e547c4a891..633a7efb50a09c 100644
--- a/files/zh-cn/web/javascript/javascript_technologies_overview/index.md
+++ b/files/zh-cn/web/javascript/javascript_technologies_overview/index.md
@@ -66,7 +66,7 @@ ECMAScript 版本由每年的 ECMA 大会批准并作为标准发布。所有的
 
 文档对象模型（DOM）是用来表达 HTML、XHTML 及 XML 文档中的对象或与其进行交互的**约定**，它是跨平台的，并且与**编程语言无关**。通过调用**DOM 树**上对象的方法可以操纵这些对象。文档对象模型核心是由 [W3C](/zh-CN/docs/Glossary/W3C) 进行标准化的，它将 HTML 和 XML 文档抽象成对象，并在其上定义接口以及操纵这些对象的机制，DOM 定义的元素有：
 
-- [DOM 核心](https://dom.spec.whatwg.org/)中定义了文档结构、树模型，以及 DOM 事件架构，包括：[`Node`](/zh-CN/docs/Web/API/Node)、[`Element`](/zh-CN/docs/Web/API/Element)、[`DocumentFragment`](/zh-CN/docs/Web/API/DocumentFragment)、[`Document`](/zh-CN/docs/Web/API/Document)、[`DOMImplementation`](/zh-CN/docs/Web/API/DOMImplementation)、[`Event`](/zh-CN/docs/Web/API/Event)、[`EventTarget`](/zh-CN/docs/Web/API/EventTarget)，等等
+- [DOM 核心](https://dom.spec.whatwg.org/)中定义了文档结构、树模型，以及 DOM 事件架构，包括：{{domxref("Node")}}、{{domxref("Element")}}、{{domxref("DocumentFragment")}}、{{domxref("Document")}}、{{domxref("DOMImplementation")}}、{{domxref("Event")}}、{{domxref("EventTarget")}}，等等
 - [DOM 事件](https://w3c.github.io/uievents/)中包括对于 DOM 事件架构的一个不太严格的定义，以及一些特殊事件。
 - [DOM 元素遍历](https://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html)以及 [DOM 范围](https://dom.spec.whatwg.org/#ranges)对象等其他内容。
 
@@ -74,15 +74,15 @@ ECMAScript 版本由每年的 ECMA 大会批准并作为标准发布。所有的
 
 ### HTML DOM
 
-[HTML](https://html.spec.whatwg.org/multipage/)，Web 的标记语言，是根据 DOM 定义的。位于 DOM 核心抽象概念之上，HTML 还定义了元素的意义。比如元素的 `className` 属性以及例如 [`document.body`](/zh-CN/docs/Web/API/Document/body) 这样的 API。
+[HTML](https://html.spec.whatwg.org/multipage/)，Web 的标记语言，是根据 DOM 定义的。位于 DOM 核心抽象概念之上，HTML 还定义了元素的意义。比如元素的 `className` 属性以及例如 {{domxref("Document.body")}} 这样的 API。
 
-HTML 规范同时还约束了元素之间的关系，例如无序列表 [`<ul>`](/zh-CN/docs/Web/HTML/Element/ul) 元素中，只能以 [`<li>`](/zh-CN/docs/Web/HTML/Element/li) 元素作为子元素来表达列表项。还有就是禁止使用标准中未定义的元素和属性。
+HTML 规范同时还约束了元素之间的关系，例如无序列表 {{htmlelement("ul")}} 元素中，只能以 {{htmlelement("li")}} 元素作为子元素来表达列表项。还有就是禁止使用标准中未定义的元素和属性。
 
-想了解更多关于 [`Document`](/zh-CN/docs/Web/API/Document) 对象、[`Window`](/zh-CN/docs/Web/API/Window) 对象以及其他 DOM 元素的信息？请访问 MDN 的 [DOM 文档](/zh-CN/docs/Web/API/Document_Object_Model)。
+想了解更多关于 {{domxref("Document")}} 对象、{{domxref("Window")}} 对象以及其他 DOM 元素的信息？请访问 MDN 的 [DOM 文档](/zh-CN/docs/Web/API/Document_Object_Model)。
 
 ## 其他值得关注的 API
 
-- [`setTimeout`](/zh-CN/docs/Web/API/setTimeout) 和 [`setInterval`](/zh-CN/docs/Web/API/setInterval) 函数最早被定义在 HTML 标准的 [`Window`](/zh-CN/docs/Web/API/Window) 接口下。
+- {{domxref("Window.setTimeout", "setTimeout()")}} 和 {{domxref("Window.setInterval", "setInterval()")}} 函数最早被定义在 HTML 标准的 {{domxref("Window")}} 接口下。
 - [XMLHttpRequest](https://xhr.spec.whatwg.org/) 使得发起异步 HTTP 请求成为可能。
 - [Fetch API](https://fetch.spec.whatwg.org/) 为网络请求提供了更符合人体工程学的抽象。
 - [CSS 对象模型](https://drafts.csswg.org/cssom/) 将 CSS 规则抽象成对象。
@@ -91,7 +91,7 @@ HTML 规范同时还约束了元素之间的关系，例如无序列表 [`<ul>`]
 - [Canvas 2D Context](https://html.spec.whatwg.org/multipage//#2dcontext) 是 [`<canvas>`](/zh-CN/docs/Web/HTML/Element/canvas) 元素的绘图 API。
 - [WebAssembly 接口](https://webassembly.github.io/spec/js-api) 提供了 JavaScript 代码和 [WebAssembly](/zh-CN/docs/WebAssembly) 模块之间的通信工具。
 
-非浏览器环境（如 Node.js）通常不提供 DOM API——因为它们不与文档进行交互，但它们仍然会实现很多 web API，例如 [`fetch()`](/zh-CN/docs/Web/API/fetch) 和 [`setTimeout()`](/zh-CN/docs/Web/API/setTimeout)。
+非浏览器环境（如 Node.js）通常不提供 DOM API——因为它们不与文档进行交互，但它们仍然会实现很多 web API，例如 {{domxref("Window.fetch", "fetch()")}} 和 {{domxref("Window.setTimeout", "setTimeout()")}}。
 
 ## 有哪些 JavaScript 的实现？
 
@@ -104,7 +104,7 @@ mozilla.org 上托管了两个 JavaScript 实现。**首个** JavaScript 由网
 - Google 的 [V8](http://code.google.com/p/v8/)，在 Google Chrome 浏览器和较新的 Opera 浏览器中使用。这同时也是[Node.js](https://nodejs.org/en/)使用的引擎。
 - [JavaScriptCore](http://www.webkit.org/projects/javascript/index.html) (SquirrelFish/Nitro)，被用在了一些 WebKit 浏览器如 Apple Safari。
 - [Carakan](http://my.opera.com/ODIN/blog/carakan-faq)，用在旧版本 Opera 中。
-- [Chakra](http://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29) 引擎，用在 Internet Explorer 中（尽管它实现的语言被正式地称作为“JScript”来避免商标问题）。
+- [Chakra](<https://zh.wikipedia.org/wiki/Chakra_(JScript引擎)>) 引擎，用在 Internet Explorer 中（尽管它实现的语言被正式地称作为“JScript”来避免商标问题）。
 
 每个 mozilla.org 的 JavaScript 引擎都提供了 公用 API 使程序开发者能将其 JavaScript 嵌入自己的软件中。目前最常见的 JavaScript 宿主环境是网页浏览器。浏览器一般通过 API 创建“宿主对象”来负责将[DOM](http://www.w3.org/DOM/) 反射到 JavaScript 中。
 
diff --git a/files/zh-cn/web/javascript/reference/functions/arrow_functions/index.md b/files/zh-cn/web/javascript/reference/functions/arrow_functions/index.md
index 107f79a245fa37..096f410be1d6cb 100644
--- a/files/zh-cn/web/javascript/reference/functions/arrow_functions/index.md
+++ b/files/zh-cn/web/javascript/reference/functions/arrow_functions/index.md
@@ -424,7 +424,7 @@ const boundAdd = add.bind(obj);
 console.log(boundAdd(1, 2, 3)); // 48
 ```
 
-使用箭头函数的最大好处可能是在使用 {{domxref("setTimeout()")}} 和 {{domxref("EventTarget/addEventListener()", "EventTarget.prototype.addEventListener()")}} 等方法时，这些方法通常需要某种闭包、`call()`、`apply()` 或 `bind()`，以确保函数在适当的作用域中执行。
+使用箭头函数的最大好处可能是在使用 {{domxref("Window.setTimeout", "setTimeout()")}} 和 {{domxref("EventTarget.addEventListener()", "EventTarget.prototype.addEventListener()")}} 等方法时，这些方法通常需要某种闭包、`call()`、`apply()` 或 `bind()`，以确保函数在适当的作用域中执行。
 
 对于传统的函数表达式，类似这样的代码并不能像预期的那样工作：
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/function/bind/index.md b/files/zh-cn/web/javascript/reference/global_objects/function/bind/index.md
index 5d8a76b961a899..d6b146c8418561 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/function/bind/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/function/bind/index.md
@@ -160,7 +160,7 @@ console.log(addThirtySeven(5, 10)); // 42
 
 ### 配合 setTimeout()
 
-在默认情况下，在 {{domxref("setTimeout()")}} 内部，`this` 关键字将被设置为 [`globalThis`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/globalThis)，在浏览器中它是 {{domxref("window")}} 对象。当处理需要将 `this` 引用类实例的类方法时，你可以显式地将 `this` 绑定到回调函数，以便保持实例的引用。
+在默认情况下，在 {{domxref("Window.setTimeout", "setTimeout()")}} 内部，`this` 关键字将被设置为 [`globalThis`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/globalThis)，在浏览器中它是 {{domxref("window")}} 对象。当处理需要将 `this` 引用类实例的类方法时，你可以显式地将 `this` 绑定到回调函数，以便保持实例的引用。
 
 ```js
 class LateBloomer {
diff --git a/files/zh-cn/web/javascript/reference/global_objects/promise/index.md b/files/zh-cn/web/javascript/reference/global_objects/promise/index.md
index d61d398a14a759..affba61500c31b 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/promise/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/promise/index.md
@@ -302,7 +302,7 @@ new Promise(tetheredGetNumber)
 
 ### 高级示例
 
-本例展示了 `Promise` 的一些机制。`testPromise()` 方法在每次点击 {{HTMLElement("button")}} 按钮时被调用，该方法会创建一个 promise 对象，使用 {{domxref("setTimeout()")}} 让 `Promise` 等待 1-3 秒不等的时间来兑现计数结果（从 1 开始的数字）。使用 `Promise` 构造函数来创建 promise。
+本例展示了 `Promise` 的一些机制。`testPromise()` 方法在每次点击 {{HTMLElement("button")}} 按钮时被调用，该方法会创建一个 promise 对象，使用 {{domxref("Window.setTimeout", "setTimeout()")}} 让 `Promise` 等待 1-3 秒不等的时间来兑现计数结果（从 1 开始的数字）。使用 `Promise` 构造函数来创建 promise。
 
 通过使用 {{jsxref("Promise.prototype.then()","p1.then()")}} 设置兑现回调函数，并在其中记录 Promise 的兑现，这些日志显示了方法的同步代码是如何与 Promise 的异步完成是如何解耦的。
 
diff --git a/files/zh-cn/web/javascript/reference/global_objects/promise/race/index.md b/files/zh-cn/web/javascript/reference/global_objects/promise/race/index.md
index 5f3da720812304..e34adacadbe192 100644
--- a/files/zh-cn/web/javascript/reference/global_objects/promise/race/index.md
+++ b/files/zh-cn/web/javascript/reference/global_objects/promise/race/index.md
@@ -34,7 +34,7 @@ Promise.race(iterable)
 
 ### 使用 Promise.race()
 
-这个例子展示了如何使用 `Promise.race()` 来比较多个使用 [`setTimeout()`](/zh-CN/docs/Web/API/setTimeout) 实现的计时器。计时时间最短的计时器总是赢得竞态，并成为返回的 promise 状态。
+这个例子展示了如何使用 `Promise.race()` 来比较多个使用 {{domxref("Window.setTimeout", "setTimeout()")}} 实现的计时器。计时时间最短的计时器总是赢得竞态，并成为返回的 promise 状态。
 
 ```js
 function sleep(time, value, state) {
diff --git a/files/zh-cn/web/javascript/reference/operators/new.target/index.md b/files/zh-cn/web/javascript/reference/operators/new.target/index.md
index 8bfc4dbf954ac4..b62a29879a2630 100644
--- a/files/zh-cn/web/javascript/reference/operators/new.target/index.md
+++ b/files/zh-cn/web/javascript/reference/operators/new.target/index.md
@@ -7,15 +7,15 @@ slug: Web/JavaScript/Reference/Operators/new.target
 
 ## 语法
 
-```plain
+```js-nolint
 new.target
 ```
 
 ## 描述
 
-`new.target`语法由一个关键字"`new`"，一个点，和一个属性名"`target`"组成。通常"`new.`"`的`作用是提供属性访问的上下文，但这里"`new.`"其实不是一个真正的对象。不过在构造方法调用中，`new.target`指向被`new`调用的构造函数，所以"`new.`"成为了一个虚拟上下文。
+`new.target` 语法由关键字 `new`、点和标识符 `target` 组成。由于 `new` 是[保留字](/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar#保留字)而非标识符；其并不是[属性访问器](/zh-CN/docs/Web/JavaScript/Reference/Operators/Property_accessors)，而是一种特殊的表达式语法。
 
-`new.target`属性适用于所有函数访问的元属性。在 [arrow functions](http://www.javascripttutorial.net/es6/javascript-arrow-function/) 中，`new.target` 指向最近的外层函数的`new.target`（An arrow function expression does not have its own this, arguments, super , or new\.target) 。
+`new.target` 元属性在所有的函数/类主体均可用。在函数或类的外部使用 `new.target` 会导致语法错误。
 
 ## 示例
 
diff --git a/files/zh-cn/web/javascript/reference/operators/this/index.md b/files/zh-cn/web/javascript/reference/operators/this/index.md
index e93a4cca75cdf2..7dd6482e8afb97 100644
--- a/files/zh-cn/web/javascript/reference/operators/this/index.md
+++ b/files/zh-cn/web/javascript/reference/operators/this/index.md
@@ -386,7 +386,7 @@ const fn2 = obj.getThisGetter;
 console.log(fn2()() === globalThis); // 在非严格模式下为 true
 ```
 
-这种行为在定义回调时非常有用。通常，每个函数表达式都创建自己的 `this` 绑定，这会遮蔽上层作用域的 `this` 值。现在，如果你不关心 `this` 值，你可以将函数定义为箭头函数，并且只在你需要的地方创建 `this` 绑定（例如，在类方法中）。参见 [`setTimeout()` 的示例](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions#using_call_bind_and_apply)。
+这种行为在定义回调时非常有用。通常，每个函数表达式都创建自己的 `this` 绑定，这会遮蔽上层作用域的 `this` 值。现在，如果你不关心 `this` 值，你可以将函数定义为箭头函数，并且只在你需要的地方创建 `this` 绑定（例如，在类方法中）。参见 [`setTimeout()` 的示例](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions#使用_call、bind_和_apply)。
 
 ### getter 或 setter 中的 this
 
diff --git a/files/zh-cn/web/javascript/reference/statements/for/index.md b/files/zh-cn/web/javascript/reference/statements/for/index.md
index b903ed898a8a35..6224cc89c199c6 100644
--- a/files/zh-cn/web/javascript/reference/statements/for/index.md
+++ b/files/zh-cn/web/javascript/reference/statements/for/index.md
@@ -2,7 +2,7 @@
 title: for
 slug: Web/JavaScript/Reference/Statements/for
 l10n:
-  sourceCommit: 2a71e92730e3cb0eef85991d04b10ef15531ab0c
+  sourceCommit: 1b4e6d1156e8471d38deeea1567c35ef412c5f42
 ---
 
 {{jsSidebar("Statements")}}
@@ -35,6 +35,13 @@ for (initialization; condition; afterthought)
 - `statement`
   - : 只要条件的判定结果为真就会被执行的语句。你可以使用[块语句](/zh-CN/docs/Web/JavaScript/Reference/Statements/block)来执行多个语句。如果没有任何语句要执行，请使用一个[空语句](/zh-CN/docs/Web/JavaScript/Reference/Statements/Empty)（`;`）。
 
+## 描述
+
+就像其他循环语句，你可以在 `statement` 中使用[控制流程语句](/zh-CN/docs/Web/JavaScript/Reference/Statements#控制流程)：
+
+- {{jsxref("Statements/break", "break")}} 停止 `statement` 的执行，并转到循环后的第一条语句。
+- {{jsxref("Statements/continue", "continue")}} 停止 `statement` 的执行，并重新执行 `afterthought`，然后是 `condition`。
+
 ## 示例
 
 ### 使用 for
@@ -139,7 +146,7 @@ for (; i < 3; i++) {
 }
 ```
 
-它打印了 `3`、`3` 和 `3`，因为每个 `setTimeout` 创建了一个新的闭包，它引用了 `i` 变量，但是如果 `i` 不是循环体的局部变量，那么所有的闭包都会引用同一个变量，并且由于 [`setTimeout`](/zh-CN/docs/Web/API/setTimeout) 的异步性质，它可能在循环已经退出之后才被调用，导致所有队列里的回调函数的 `i` 值都被设置为 `3`。
+它打印了 `3`、`3` 和 `3`，因为每个 `setTimeout` 创建了一个新的闭包，它引用了 `i` 变量，但是如果 `i` 不是循环体的局部变量，那么所有的闭包都会引用同一个变量，并且由于 {{domxref("Window.setTimeout", "setTimeout()")}} 的异步性质，它可能在循环已经退出之后才被调用，导致所有队列里的回调函数的 `i` 值都被设置为 `3`。
 
 如果你使用 `var` 语句来初始化，那么变量声明将只作用于函数作用域，而不是词法作用域（即它不会局限于循环体）。
 
diff --git a/files/zh-cn/web/javascript/reference/strict_mode/index.md b/files/zh-cn/web/javascript/reference/strict_mode/index.md
index 0e334ed1f0e652..c7ed154f7248c3 100644
--- a/files/zh-cn/web/javascript/reference/strict_mode/index.md
+++ b/files/zh-cn/web/javascript/reference/strict_mode/index.md
@@ -18,7 +18,7 @@ slug: Web/JavaScript/Reference/Strict_mode
 
 ## 调用严格模式
 
-严格模式可以应用到整个脚本或个别函数中。不要在封闭大括弧 `{}` 内这样做，在这样的上下文中这么做是没有效果的。在 `eval` 、`Function` 、内联事件处理属性、 {{domxref("WindowTimers.setTimeout()")}} 方法中传入的脚本字符串，其行为类似于开启了严格模式的一个单独脚本，它们会如预期一样工作。
+严格模式可以应用到整个脚本或个别函数中。不要在封闭大括弧 `{}` 内这样做，在这样的上下文中这么做是没有效果的。在 `eval` 、`Function`、[事件处理器](/zh-CN/docs/Web/HTML/Attributes#事件处理器属性)属性、{{domxref("Window.setTimeout", "setTimeout()")}} 方法中传入的脚本字符串，其行为类似于开启了严格模式的一个单独脚本，它们会如预期一样工作。
 
 ### 为脚本开启严格模式
 
diff --git a/files/zh-cn/web/performance/css_javascript_animation_performance/index.md b/files/zh-cn/web/performance/css_javascript_animation_performance/index.md
index 1543c23bd55ab2..8092a70757f44a 100644
--- a/files/zh-cn/web/performance/css_javascript_animation_performance/index.md
+++ b/files/zh-cn/web/performance/css_javascript_animation_performance/index.md
@@ -18,7 +18,7 @@ CSS 中的 transition 和 animation 都可以用于编写动画，它们都有
 
 ## requestAnimationFrame
 
-{{domxref("Window.requestAnimationFrame","requestAnimationFrame()")}} 提供了一种用 JavaScript 代码制作动画的高效方式。本方法的回调函数在绘制下一帧之前由浏览器调用。与需要一个延迟参数的 {{domxref("setTimeout()")}} 或 {{domxref("setInterval()")}} 相比，`requestAnimationFrame()` 效率高得多。开发人员可以在 `requestAnimationFrame()` 回调函数中通过简单地改变元素的样式（或者更新画布绘制，等等）来创建动画。
+{{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} 提供了一种用 JavaScript 代码制作动画的高效方式。本方法的回调函数在绘制下一帧之前由浏览器调用。与需要一个延迟参数的 {{domxref("Window.setTimeout", "setTimeout()")}} 或 {{domxref("Window.setInterval", "setInterval()")}} 相比，`requestAnimationFrame()` 效率高得多。开发人员可以在 `requestAnimationFrame()` 回调函数中通过简单地改变元素的样式（或者更新画布绘制，等等）来创建动画。
 
 > [!NOTE]
 > 像 CSS transitions 和 animations 一样，当页面在后台运行时，`requestAnimationFrame()` 会暂停。
diff --git a/files/zh-cn/web/security/index.md b/files/zh-cn/web/security/index.md
index 602ee723b0ac5a..cd8e0b793258fc 100644
--- a/files/zh-cn/web/security/index.md
+++ b/files/zh-cn/web/security/index.md
@@ -58,7 +58,7 @@ slug: Web/Security
 - [HTTP Access-Control-Allow-Origin](/zh-CN/docs/Web/HTTP/Headers/Access-Control-Allow-Origin)
   - : **`Access-Control-Allow-Origin`** 响应头表明响应是否可以与来自给定{{glossary("origin","来源")}}的请求代码共享。
 - [HTTP X-Content-Type-Options](/zh-CN/docs/Web/HTTP/Headers/X-Content-Type-Options)
-  - : **`X-Content-Type-Options`** 响应的 HTTP 头是一个标记，由服务器用来表示应该遵循 {{HTTPHeader("Content-Type")}} 头中宣告的 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)，不应该被改变。这是一种选择退出 [MIME 类型嗅探](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types#mime_sniffing)的方法，或者换句话说，MIME 类型是故意配置的。
+  - : **`X-Content-Type-Options`** 响应的 HTTP 头是一个标记，由服务器用来表示应该遵循 {{HTTPHeader("Content-Type")}} 头中宣告的 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types)，不应该被改变。这是一种选择退出 [MIME 类型嗅探](/zh-CN/docs/Web/HTTP/MIME_types#mime_嗅探)的方法，或者换句话说，MIME 类型是故意配置的。
 
 ## 点击劫持保护
 
diff --git a/files/zh-cn/web/svg/attribute/amplitude/index.md b/files/zh-cn/web/svg/attribute/amplitude/index.md
new file mode 100644
index 00000000000000..8b0ee8aac60da2
--- /dev/null
+++ b/files/zh-cn/web/svg/attribute/amplitude/index.md
@@ -0,0 +1,44 @@
+---
+title: amplitude
+slug: Web/SVG/Attribute/amplitude
+l10n:
+  sourceCommit: c2274293475b0a5b4febf85a49c1f91bf43ebac7
+---
+
+{{SVGRef}}
+
+**`amplitude`** 属性用于在 {{SVGAttr("type")}} 属性为 `gamma` 时，控制组件转换元素的伽马函数的幅值。
+
+你可以将此属性与以下 SVG 元素一起使用：
+
+- {{SVGElement("feFuncA")}}
+- {{SVGElement("feFuncB")}}
+- {{SVGElement("feFuncG")}}
+- {{SVGElement("feFuncR")}}
+
+## 使用说明
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">值</th>
+      <td><a href="/zh-CN/docs/Web/CSS/number">&#x3C;number></a></td>
+    </tr>
+    <tr>
+      <th scope="row">默认值</th>
+      <td><code>1</code></td>
+    </tr>
+    <tr>
+      <th scope="row">动画性</th>
+      <td>有</td>
+    </tr>
+  </tbody>
+</table>
+
+## 规范
+
+{{Specifications}}
+
+## 参见
+
+- {{SVGElement("feComponentTransfer")}}
diff --git a/files/zh-cn/web/svg/attribute/attributename/index.md b/files/zh-cn/web/svg/attribute/attributename/index.md
index 2685709224bb11..1aeb222088b400 100644
--- a/files/zh-cn/web/svg/attribute/attributename/index.md
+++ b/files/zh-cn/web/svg/attribute/attributename/index.md
@@ -1,47 +1,72 @@
 ---
 title: attributeName
 slug: Web/SVG/Attribute/attributeName
+l10n:
+  sourceCommit: 54eb3a678b4d4cbc94588d2234103e74dfa063a0
 ---
 
 {{SVGRef}}
 
-该属性标识了在一个动画动作环节中，父元素的需要被改变的属性名。
+**`attributeName`** 属性表示动画期间将要更改的目标元素的 CSS 属性或属性的名称。
 
-## 使用说明
+你可以将此属性与以下 SVG 元素一起使用：
 
-| 类别     | 动画属性目标属性                                                                      |
-| -------- | ------------------------------------------------------------------------------------- |
-| 值       | \<attributeName>                                                                      |
-| 可变性   | No                                                                                    |
-| 规范文档 | [SVG 1.1 (2nd Edition)](http://www.w3.org/TR/SVG/animate.html#AttributeNameAttribute) |
+- {{SVGElement("animate")}}
+- {{SVGElement("animateTransform")}}
+- {{SVGElement("set")}}
 
 ## 示例
 
-下面的示例使用了 y 作为`attributeName`，通过改变一个矩形在 Y 轴上的位置来变动这个矩形。
+```css hidden
+html,
+body,
+svg {
+  height: 100%;
+}
+```
 
-```xml
-<?xml version="1.0"?>
-<svg width="250" height="250"
-  viewPort="0 0 250 250" version="1.1"
-  xmlns="http://www.w3.org/2000/svg">
+```html
+<svg viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
   <rect x="50" y="50" width="100" height="100">
-    <animate attributeType="XML"
+    <animate
+      attributeType="XML"
       attributeName="y"
-      from="0" to="50"
-      dur="5s"/>
+      from="0"
+      to="50"
+      dur="5s"
+      repeatCount="indefinite" />
   </rect>
 </svg>
 ```
 
-## 元素
+{{EmbedLiveSample("示例", "400", "250")}}
+
+## 使用说明
 
-下列元素可以使用`attributeName`属性：
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">值</th>
+      <td><code>&#x3C;name></code></td>
+    </tr>
+    <tr>
+      <th scope="row">默认值</th>
+      <td><em>None</em></td>
+    </tr>
+    <tr>
+      <th scope="row">动画性</th>
+      <td>无</td>
+    </tr>
+  </tbody>
+</table>
 
-- {{ SVGElement("animate") }}
-- {{ SVGElement("animateColor") }}
-- {{ SVGElement("animateTransform") }}
-- {{ SVGElement("set") }}
+- `<name>`
+  - ：此值表示要动画化的目标元素的 CSS 属性或属性的名称。
 
 ## 规范
 
 {{Specifications}}
+
+## 参见
+
+- [SMIL 动画规范](https://www.w3.org/TR/2001/REC-smil-animation-20010904/#AccumulateAttribute)
diff --git a/files/zh-cn/web/svg/attribute/azimuth/index.md b/files/zh-cn/web/svg/attribute/azimuth/index.md
new file mode 100644
index 00000000000000..9c8be37734cb29
--- /dev/null
+++ b/files/zh-cn/web/svg/attribute/azimuth/index.md
@@ -0,0 +1,75 @@
+---
+title: azimuth
+slug: Web/SVG/Attribute/azimuth
+l10n:
+  sourceCommit: b4f998244660723175f8e06b5d77f68cfb1d1f1a
+---
+
+{{SVGRef}}
+
+**`azimuth`** 属性指定了光源在 XY 平面上的方向角度（顺时针），以相对于 x 轴的度数为单位。
+
+你可以将此属性与以下 SVG 元素一起使用：
+
+- {{SVGElement("feDistantLight")}}
+
+## 示例
+
+```css hidden
+html,
+body,
+svg {
+  height: 100%;
+}
+```
+
+```html
+<svg viewBox="0 0 440 200" xmlns="http://www.w3.org/2000/svg">
+  <filter id="distantLight1">
+    <feDiffuseLighting>
+      <feDistantLight azimuth="0" />
+    </feDiffuseLighting>
+  </filter>
+  <filter id="distantLight2">
+    <feDiffuseLighting>
+      <feDistantLight azimuth="240" />
+    </feDiffuseLighting>
+  </filter>
+
+  <circle cx="100" cy="100" r="80" style="filter: url(#distantLight1);" />
+  <circle
+    cx="100"
+    cy="100"
+    r="80"
+    style="filter: url(#distantLight2); transform: translateX(240px);" />
+</svg>
+```
+
+{{EmbedLiveSample("示例", "420", "200")}}
+
+## 使用说明
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">值</th>
+      <td>{{cssxref("number")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">默认值</th>
+      <td>0</td>
+    </tr>
+    <tr>
+      <th scope="row">动画性</th>
+      <td>有</td>
+    </tr>
+  </tbody>
+</table>
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/web/svg/attribute/basefrequency/index.md b/files/zh-cn/web/svg/attribute/basefrequency/index.md
new file mode 100644
index 00000000000000..81dab905aabdaf
--- /dev/null
+++ b/files/zh-cn/web/svg/attribute/basefrequency/index.md
@@ -0,0 +1,112 @@
+---
+title: baseFrequency
+slug: Web/SVG/Attribute/baseFrequency
+l10n:
+  sourceCommit: 829db137a01feb14af7beaec178a3ea0118b4777
+---
+
+{{SVGRef}}
+
+**`baseFrequency`** 属性表示 {{SVGElement("feTurbulence")}} 滤镜原语的噪点函数的基础频率参数。
+
+你可以将此属性与以下 SVG 元素一起使用：
+
+- {{SVGElement("feTurbulence")}}
+
+## 示例
+
+### 示例 1
+
+```css hidden
+html,
+body,
+svg {
+  height: 100%;
+}
+```
+
+```html
+<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
+  <filter id="noise1" x="0" y="0" width="100%" height="100%">
+    <feTurbulence baseFrequency="0.025" />
+  </filter>
+  <filter id="noise2" x="0" y="0" width="100%" height="100%">
+    <feTurbulence baseFrequency="0.05" />
+  </filter>
+
+  <rect x="0" y="0" width="200" height="200" style="filter: url(#noise1);" />
+  <rect
+    x="0"
+    y="0"
+    width="200"
+    height="200"
+    style="filter: url(#noise2); transform: translateX(220px);" />
+</svg>
+```
+
+{{EmbedLiveSample("示例 1", "220", "220")}}
+
+### 示例 2
+
+```html
+<svg
+  width="200"
+  height="200"
+  viewBox="0 0 220 220"
+  xmlns="http://www.w3.org/2000/svg">
+  <filter id="displacementFilter">
+    <feTurbulence
+      type="turbulence"
+      baseFrequency="0.05"
+      numOctaves="2"
+      result="turbulence" />
+    <feDisplacementMap
+      in2="turbulence"
+      in="SourceGraphic"
+      scale="50"
+      xChannelSelector="R"
+      yChannelSelector="G" />
+  </filter>
+
+  <circle cx="100" cy="100" r="100" style="filter: url(#displacementFilter)" />
+</svg>
+```
+
+{{EmbedLiveSample("示例 2", "220", "250")}}
+
+## 使用说明
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">值</th>
+      <td>
+        <a href="/zh-CN/docs/Web/SVG/Content_type#带可取舍的后缀数字的数字"
+          >&#x3C;number-optional-number></a
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">默认值</th>
+      <td><code>0</code></td>
+    </tr>
+    <tr>
+      <th scope="row">动画性</th>
+      <td>有</td>
+    </tr>
+  </tbody>
+</table>
+
+- `<number-optional-number>`
+
+  - : 如果提供了两个数字，第一个数字表示水平方向的基础频率，第二个数字表示垂直方向的基础频率。如果提供了一个数字，则该值同时作用于 x 轴 和 y 轴。
+
+    禁止使用负值。
+
+## 规范
+
+{{Specifications}}
+
+## 浏览器兼容性
+
+{{Compat}}
diff --git a/files/zh-cn/web/uri/schemes/data/index.md b/files/zh-cn/web/uri/schemes/data/index.md
index 4512d19c287e7c..738a0cdcff28e8 100644
--- a/files/zh-cn/web/uri/schemes/data/index.md
+++ b/files/zh-cn/web/uri/schemes/data/index.md
@@ -18,11 +18,11 @@ Data URL 由四个部分组成：前缀（`data:`）、指示数据类型的 MIM
 data:[<mediatype>][;base64],<data>
 ```
 
-`mediatype` 是个 [MIME 类型](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)的字符串，例如 `'image/jpeg'` 表示 JPEG 图像文件。如果被省略，则默认值为 `text/plain;charset=US-ASCII`。
+`mediatype` 是个 [MIME 类型](/zh-CN/docs/Web/HTTP/MIME_types)的字符串，例如 `'image/jpeg'` 表示 JPEG 图像文件。如果被省略，则默认值为 `text/plain;charset=US-ASCII`。
 
 如果数据包含 [RFC 3986 中定义为保留字符](https://datatracker.ietf.org/doc/html/rfc3986#section-2.2)的字符或包含空格符、换行符或者其他非打印字符，这些字符必须进行[百分号编码](/zh-CN/docs/Glossary/percent-encoding)（又名“URL 编码”）。
 
-如果数据是文本类型，你可以直接将文本嵌入（根据文档类型，使用合适的实体字符或转义字符）。否则，你可以指定 `base64` 来嵌入 base64 编码的二进制数据。你可以在[这里](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types)和[这里](/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types)找到更多关于 MIME 类型的信息。
+如果数据是文本类型，你可以直接将文本嵌入（根据文档类型，使用合适的实体字符或转义字符）。否则，你可以指定 `base64` 来嵌入 base64 编码的二进制数据。你可以在[这里](/zh-CN/docs/Web/HTTP/MIME_types)和[这里](/zh-CN/docs/Web/HTTP/MIME_types/Common_types)找到更多关于 MIME 类型的信息。
 
 下面是一些示例：
 
diff --git a/files/zh-tw/_redirects.txt b/files/zh-tw/_redirects.txt
index 846ee0c55e2be0..2fbc58761f777e 100644
--- a/files/zh-tw/_redirects.txt
+++ b/files/zh-tw/_redirects.txt
@@ -426,10 +426,11 @@
 /zh-TW/docs/Web/API/PositionOptions/timeout	/zh-TW/docs/Web/API/Geolocation/getCurrentPosition
 /zh-TW/docs/Web/API/Web_Video_Text_Tracks_Format	/zh-TW/docs/Web/API/WebVTT_API
 /zh-TW/docs/Web/API/Window/sidebar/Adding_search_engines_from_Web_pages	/zh-TW/docs/Web/OpenSearch
-/zh-TW/docs/Web/API/WindowOrWorkerGlobalScope/setInterval	/zh-TW/docs/Web/API/setInterval
+/zh-TW/docs/Web/API/WindowOrWorkerGlobalScope/setInterval	/zh-TW/docs/Web/API/Window/setInterval
 /zh-TW/docs/Web/API/XMLHttpRequest/FormData	/zh-TW/docs/Web/API/FormData
 /zh-TW/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest	/zh-TW/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest
 /zh-TW/docs/Web/API/console/assert	/zh-TW/docs/Web/API/console/assert_static
+/zh-TW/docs/Web/API/setInterval	/zh-TW/docs/Web/API/Window/setInterval
 /zh-TW/docs/Web/Apps/Progressive	/zh-TW/docs/Web/Progressive_web_apps
 /zh-TW/docs/Web/CSS/-moz-border-image	/zh-TW/docs/Web/CSS/border-image
 /zh-TW/docs/Web/CSS/@viewport	/zh-TW/docs/Web/CSS
diff --git a/files/zh-tw/_wikihistory.json b/files/zh-tw/_wikihistory.json
index 8f4e17cbee4192..45d610933a9f34 100644
--- a/files/zh-tw/_wikihistory.json
+++ b/files/zh-tw/_wikihistory.json
@@ -2379,6 +2379,10 @@
     "modified": "2020-10-15T21:58:23.409Z",
     "contributors": ["iigmir", "EyiLee", "EricPing"]
   },
+  "Web/API/Window/setInterval": {
+    "modified": "2020-10-15T22:29:07.467Z",
+    "contributors": ["chrischi0922s"]
+  },
   "Web/API/XMLHttpRequest": {
     "modified": "2020-10-15T21:21:13.079Z",
     "contributors": [
@@ -2427,10 +2431,6 @@
     "modified": "2020-10-15T22:03:27.482Z",
     "contributors": ["lin826", "iigmir"]
   },
-  "Web/API/setInterval": {
-    "modified": "2020-10-15T22:29:07.467Z",
-    "contributors": ["chrischi0922s"]
-  },
   "Web/Accessibility": {
     "modified": "2019-09-11T08:39:45.699Z",
     "contributors": ["SphinxKnight", "iigmir", "boa0332"]
diff --git a/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md
index 2447593176a391..463e6fc42430e2 100644
--- a/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md
+++ b/files/zh-tw/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md
@@ -13,7 +13,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball
 
 ## 定義一個繪製用的迴圈
 
-為了固定更新 canvas 繪圖區域的每一個影格，我們需要定義一個繪製函式（drawing function），它將會重複執行，用不同的變數改變球的位置或其他物的位置。重複執行一個函式，其中使用 JavaScript timing function，像是 {{domxref("WindowTimers.setInterval()", "setInterval()")}} 或是 {{domxref("Window.requestAnimationFrame()", "requestAnimationFrame()")}}。
+為了固定更新 canvas 繪圖區域的每一個影格，我們需要定義一個繪製函式（drawing function），它將會重複執行，用不同的變數改變球的位置或其他物的位置。重複執行一個函式，其中使用 JavaScript timing function，像是 {{domxref("Window.setInterval()", "setInterval()")}} 或是 {{domxref("Window.requestAnimationFrame()", "requestAnimationFrame()")}}。
 
 除了前兩行的 JavaScript，其餘的都刪除，並將以下的程式碼加入在前兩行之後。draw()函數每十毫秒會被 setInterval 執行一次:
 
diff --git a/files/zh-tw/learn/accessibility/wai-aria_basics/index.md b/files/zh-tw/learn/accessibility/wai-aria_basics/index.md
index d50549e9006fe4..2ef4398498c04d 100644
--- a/files/zh-tw/learn/accessibility/wai-aria_basics/index.md
+++ b/files/zh-tw/learn/accessibility/wai-aria_basics/index.md
@@ -205,7 +205,7 @@ WAI-ARIA 添加[角色屬性](https://www.w3.org/TR/wai-aria-1.1/#role_definitio
 </section>
 ```
 
-我們的 JavaScript 透過含有一系列的隨機引言與其作者的 [`XMLHttpRequest`](/zh-TW/docs/Web/API/XMLHttpRequest) `載入一個`JSON 檔案。一旦這些完成，我們就開始 [`setInterval()`](/zh-TW/docs/Web/API/WindowTimers/setInterval) 迴圈每 10 秒載入新的隨機引言到引言框之中。
+我們的 JavaScript 透過含有一系列的隨機引言與其作者的 [`XMLHttpRequest`](/zh-TW/docs/Web/API/XMLHttpRequest) `載入一個`JSON 檔案。一旦這些完成，我們就開始 {{domxref("Window.setInterval", "setInterval()")}} 迴圈每 10 秒載入新的隨機引言到引言框之中。
 
 ```js
 var intervalID = window.setInterval(showQuote, 10000);
diff --git a/files/zh-tw/mozilla/add-ons/webextensions/content_scripts/index.md b/files/zh-tw/mozilla/add-ons/webextensions/content_scripts/index.md
index a4d7a33265fa7f..8a55a3590f9169 100644
--- a/files/zh-tw/mozilla/add-ons/webextensions/content_scripts/index.md
+++ b/files/zh-tw/mozilla/add-ons/webextensions/content_scripts/index.md
@@ -444,7 +444,7 @@ In page script, window.x: 1
 In page script, window.y: undefined
 ```
 
-這些也適用於 [`setTimeout()`](/zh-TW/docs/Web/API/setTimeout)、[`setInterval()`](/zh-TW/docs/Web/API/setInterval)、與 [`Function()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function)。
+這些也適用於 [`setTimeout()`](/zh-TW/docs/Web/API/setTimeout)、{{domxref("Window.setInterval", "setInterval()")}} 與 [`Function()`](/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function)。
 
 當在頁面執行程式碼時一定要小一萬個心，頁面的環境有可能被惡意的網頁所控制，它們可以重新定義與你互動的物件來作出一些出乎意料的行爲：
 
diff --git a/files/zh-tw/web/api/canvas_api/tutorial/basic_animations/index.md b/files/zh-tw/web/api/canvas_api/tutorial/basic_animations/index.md
index b04d49b49cf498..f310d784282093 100644
--- a/files/zh-tw/web/api/canvas_api/tutorial/basic_animations/index.md
+++ b/files/zh-tw/web/api/canvas_api/tutorial/basic_animations/index.md
@@ -28,41 +28,20 @@ slug: Web/API/Canvas_API/Tutorial/Basic_animations
 
 ### 排程更新
 
-第一種作法是利用 {{domxref("window.setInterval()")}} 與 {{domxref("window.setTimeout()")}} 方法。
+第一種作法是利用 {{domxref("Window.setInterval")}}、{{domxref("Window.setTimeout()")}} 與 {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} 函數。
 
-> [!NOTE]
-> 針對新版瀏覽器建議採用 {{domxref("window.requestAnimationFrame()")}} 方法。
-
-- `setInterval(function, delay)`
-  - : 每隔 delay 毫秒，執行輸入 function(函數)
-- `setTimeout(function, delay)`
-  - : 過 delay 毫秒後，執行輸入 function(函數)
-- requestAnimationFrame(callback)
+- {{domxref("Window.setInterval", "setInterval()")}}
+  - : 每隔 `delay` 毫秒，執行輸入 `function`。
+- {{domxref("setTimeout()")}}
+  - : 過 `delay` 毫秒後，執行輸入 `function`。
+- {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}}
   - : 告訴瀏覽器你希望執行動畫的時候，要求瀏覽器在重繪下一張畫面之前，呼叫 callback 函數來更新動畫
 
-如果希望不要有任何的使用者互動影響，請使用 setInterval()，因為它會確實地每隔一段時間就執行程式碼。如果你想製作遊戲，我們能夠使用 keyboard 或是 mouse event 來控制動畫，並使用 setTimeout() 函數一起。藉由設定 EventListeners，我們能夠捕捉任何使用者的動作，並執行我們的動畫函數。
+如果希望不要有任何的使用者互動影響，請使用 `setInterval()`，因為它會確實地每隔一段時間就執行程式碼。如果你想製作遊戲，我們能夠使用 keyboard 或是 mouse event 來控制動畫，並使用 `setTimeout()` 函數一起。藉由設定 EventListeners，我們能夠捕捉任何使用者的動作，並執行我們的動畫函數。
 
 > [!NOTE]
 > 在下面的範例,我們將使用 **`window.requestAnimationFrame()`** 方法來控制動畫，**`window.requestAnimationFrame()`** 方法為動畫提供更順暢更有效率的方式來執行,當系統準備好繪製畫面時，藉由呼叫動畫 andmation frame() 的 callback 函數。callback 通常每秒鐘執行 60 次，當執行 background tab 時，執行次數會更低，想知道更多關於動畫迴圈(animation loop)的資訊，尤其是遊戲的應用，請查看我們在 [Game development zone](/zh-TW/docs/Games) 的主題 [Anatomy of a video game](/zh-TW/docs/Games/Anatomy)。
 
-### 從使用者輸入操作控制動畫
-
-我們也可以從使用者輸入操作控制動畫，就像是電玩遊戲一般；像是在鍵盤上設置事件處理器 {{domxref("EventListener")}} 捕捉使用者輸入並執行對應動畫。
-
-你可以利用我們的[次要版](/zh-TW/docs/DOM/window.setInterval#A_little_framework)或[主要版動畫框架](/zh-TW/docs/JavaScript/Timers/Daemons)。
-
-```js
-var myAnimation = new MiniDaemon(null, animateShape, 500, Infinity);
-```
-
-或
-
-```js
-var myAnimation = new Daemon(null, animateShape, 500, Infinity);
-```
-
-在後面的範例我們主要將使用 window\.setInterval()方法控制動畫，然後於本頁底部是一些使用 widnow\.setTimeout()的範例連結。
-
 ## 太陽系動畫
 
 本例會產生一個小型太陽系運行動畫。
@@ -364,11 +343,4 @@ function draw() {
 - [iGrapher](http://igrapher.com/)
   - : 股票市場圖
 
-## See also
-
-- [JavaScript timers](/zh-TW/docs/JavaScript/Timers)
-- [`setInterval` – A little framework](/zh-TW/docs/DOM/window.setInterval#A_little_framework)
-- [JavaScript Daemons Management](/zh-TW/docs/JavaScript/Timers/Daemons)
-- [HTMLCanvasElement](/zh-TW/docs/DOM/HTMLCanvasElement)
-
 {{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Compositing", "Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas")}}
diff --git a/files/zh-tw/web/api/canvas_api/tutorial/basic_usage/index.md b/files/zh-tw/web/api/canvas_api/tutorial/basic_usage/index.md
index 3640c4a36fed51..9a70c306f4a197 100644
--- a/files/zh-tw/web/api/canvas_api/tutorial/basic_usage/index.md
+++ b/files/zh-tw/web/api/canvas_api/tutorial/basic_usage/index.md
@@ -105,7 +105,7 @@ if (canvas.getContext) {
 </html>
 ```
 
-一旦網頁載入完成後，程式碼會呼叫 draw()函數(這是利用 document 上的 load 事件完成)，這類 draw()函數也可以透過{{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}或其他事件處理函數來呼叫，只要呼叫的時間點是在網頁載入完後。
+一旦網頁載入完成後，程式碼會呼叫 `draw()` 函數（這是利用 document 上的 {{domxref("Window/load_event", "load")}} 事件完成），這類 `draw()` 函數也可以透過 {{domxref("window.setTimeout()")}}、{{domxref("Window.setInterval", "setInterval()")}} 或其他事件處理函數來呼叫，只要呼叫的時間點是在網頁載入完後。
 
 這是我們的範本實際看起來的樣子:
 
diff --git a/files/zh-tw/web/api/web_workers_api/using_web_workers/index.md b/files/zh-tw/web/api/web_workers_api/using_web_workers/index.md
index 6a87b0fc0724f3..7b532f89ba4181 100644
--- a/files/zh-tw/web/api/web_workers_api/using_web_workers/index.md
+++ b/files/zh-tw/web/api/web_workers_api/using_web_workers/index.md
@@ -726,22 +726,22 @@ onmessage 事件處理器會接收 worker 回傳的運算結果，然後顯示
 大多數 Javascript 的功能 worker 皆可以使用，包含：
 
 - {{domxref("Navigator")}}
-- {{domxref("XMLHttpRequest")}}
-- {{jsxref("Global_Objects/Array", "Array")}}, {{jsxref("Global_Objects/Date", "Date")}}, {{jsxref("Global_Objects/Math", "Math")}}, 與 {{jsxref("Global_Objects/String", "String")}}
-- {{domxref("Window.requestAnimationFrame")}}, {{domxref("WindowTimers.setTimeout")}}, 與 {{domxref("WindowTimers.setInterval")}}
+- {{domxref("WorkerGlobalScope.fetch", "fetch()")}}
+- {{jsxref("Global_Objects/Array", "Array")}}、{{jsxref("Global_Objects/Date", "Date")}}、{{jsxref("Global_Objects/Math", "Math")}} 與 {{jsxref("Global_Objects/String", "String")}}
+- {{domxref("setTimeout()")}} 與 {{domxref("WorkerGlobalScope.setInterval", "setInterval()")}}
 
 worker 無法操作主頁面的物件與 DOM，如有相關需求，必須要間接透過 {{domxref("DedicatedWorkerGlobalScope.postMessage")}} 通知主頁面，讓主頁面執行需求。
 
 > [!NOTE]
 > 所有 worker 可存取功能一覽表，請見 [Functions and interfaces available to workers](/zh-TW/docs/Web/Reference/Functions_and_classes_available_to_workers).
 
-## 標準規範
+## 規範
 
 {{Specifications}}
 
-## 延伸閱讀
+## 參見
 
-- [`Worker`](/zh-TW/docs/Web/API/Worker) interface
-- [`SharedWorker`](/zh-TW/docs/Web/API/SharedWorker) interface
-- [Functions available to workers](/zh-TW/docs/Web/API/Worker/Functions_and_classes_available_to_workers)
-- [Advanced concepts and examples](/zh-TW/docs/Web/API/Web_Workers_API/Using_web_workers)
+- {{domxref("Worker")}} 介面
+- {{domxref("SharedWorker")}} 介面
+- [worker 中可用的函數](/zh-TW/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers)
+- {{domxref("OffscreenCanvas")}} 介面
diff --git a/files/zh-tw/web/api/setinterval/index.md b/files/zh-tw/web/api/window/setinterval/index.md
similarity index 90%
rename from files/zh-tw/web/api/setinterval/index.md
rename to files/zh-tw/web/api/window/setinterval/index.md
index b21dae98fa1199..65f058899e6f7c 100644
--- a/files/zh-tw/web/api/setinterval/index.md
+++ b/files/zh-tw/web/api/window/setinterval/index.md
@@ -1,17 +1,25 @@
 ---
-title: setInterval()
-slug: Web/API/setInterval
+title: Window：setInterval() 方法
+slug: Web/API/Window/setInterval
 ---
 
 {{APIRef("HTML DOM")}}
 
-**`setInterval()`** 函式, {{domxref("Window")}} 與 {{domxref("Worker")}} 介面皆提供此一函式, 此函式作用為重複地執行一個函式呼叫或一個程式碼片斷, 每一次執行間隔固定的延遲時間. 此函式呼叫時將傳回一個間隔代碼(Interval ID)用以識別該間隔程序, 因此後續你可以呼叫 {{domxref("clearInterval()")}} 函式移除該間隔程序. 此函式為由 `WindowOrWorkerGlobalScope` 混合定義。
+{{domxref("Window")}} 介面的 **`setInterval()`** 方法作用為重複地執行一個函式呼叫或一個程式碼片斷，每一次執行間隔固定的延遲時間。
 
-## Syntax
+此方法呼叫時將傳回一個間隔 ID 用以識別該間隔程序，因此後續你可以呼叫 {{domxref("Window.clearInterval", "clearInterval()")}} 移除該間隔程序。
 
-```plain
-var intervalID = scope.setInterval(func, [delay, arg1, arg2, ...]);
-var intervalID = scope.setInterval(code, [delay]);
+## 語法
+
+```js-nolint
+setInterval(code)
+setInterval(code, delay)
+
+setInterval(func)
+setInterval(func, delay)
+setInterval(func, delay, arg1)
+setInterval(func, delay, arg1, arg2)
+setInterval(func, delay, arg1, arg2, /* …, */ argN)
 ```
 
 ### Parameters
@@ -30,7 +38,7 @@ var intervalID = scope.setInterval(code, [delay]);
 
 ### Return value
 
-The returned `intervalID` is a numeric, non-zero value which identifies the timer created by the call to `setInterval()`; this value can be passed to {{domxref("clearInterval()")}} to cancel the timeout.
+The returned `intervalID` is a numeric, non-zero value which identifies the timer created by the call to `setInterval()`; this value can be passed to {{domxref("Window.clearInterval", "clearInterval()")}} to cancel the timeout.
 
 It may be helpful to be aware that `setInterval()` and {{domxref("setTimeout()")}} share the same pool of IDs, and that `clearInterval()` and {{domxref("clearTimeout()")}} can technically be used interchangeably. For clarity, however, you should try to always match them to avoid confusion when maintaining your code.
 
@@ -273,7 +281,7 @@ Another, more complex, solution for **the [`this`](/zh-TW/docs/Web/JavaScript/Re
 
 ## Usage notes
 
-The `setInterval()` function is commonly used to set a delay for functions that are executed again and again, such as animations. You can cancel the interval using {{domxref("clearInterval()")}}.
+The `setInterval()` function is commonly used to set a delay for functions that are executed again and again, such as animations. You can cancel the interval using {{domxref("Window.clearInterval", "clearInterval()")}}.
 
 If you wish to have your function called _once_ after the specified delay, use {{domxref("setTimeout()")}}.
 
@@ -301,19 +309,18 @@ In these cases, a recursive `setTimeout()` pattern is preferred:
 
 In the above snippet, a named function `loop()` is declared and is immediately executed. `loop()` is recursively called inside `setTimeout()` after the logic has completed executing. While this pattern does not guarantee execution on a fixed interval, it does guarantee that the previous interval has completed before recursing.
 
-## Specifications
+## 規範
 
 {{Specifications}}
 
-## Browser compatibility
+## 瀏覽器相容性
 
 {{Compat}}
 
-## See also
+## 參見
 
-- [JavaScript timers](/zh-TW/Add-ons/Code_snippets/Timers)
-- {{domxref("setTimeout")}}
-- {{domxref("clearTimeout")}}
-- {{domxref("clearInterval")}}
-- {{domxref("window.requestAnimationFrame")}}
-- [_Daemons_ management](/zh-TW/Add-ons/Code_snippets/Timers/Daemons)
+- [`core-js` 中 `setInterval` 的 polyfill，允許將參數傳遞給回調](https://github.com/zloirock/core-js#settimeout-and-setinterval)
+- {{domxref("setTimeout()")}}
+- {{domxref("Window.clearInterval()")}} 與 {{domxref("WorkerGlobalScope.clearInterval()")}}
+- {{domxref("WorkerGlobalScope.setInterval()")}}
+- {{domxref("Window.requestAnimationFrame()")}} 與 {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()")}}
diff --git a/package.json b/package.json
index 0adf8aabd2276c..dc17c86fca0394 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
   "dependencies": {
     "autocorrect-node": "2.11.1",
     "cld": "^2.10.0",
-    "fdir": "^6.3.0",
+    "fdir": "^6.4.0",
     "front-matter": "^4.0.2",
     "husky": "9.1.6",
     "lint-staged": "15.2.10",
diff --git a/yarn.lock b/yarn.lock
index 96df4edfd2f8dc..928d8a3281667c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -327,10 +327,10 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
-fdir@^6.3.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/fdir/-/fdir-6.3.0.tgz#fcca5a23ea20e767b15e081ee13b3e6488ee0bb0"
-  integrity sha512-QOnuT+BOtivR77wYvCWHfGt9s4Pz1VIMbD463vegT5MLqNXy8rYFT/lPVEqf/bhYeT6qmqrNHhsX+rWwe3rOCQ==
+fdir@^6.4.0:
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/fdir/-/fdir-6.4.0.tgz#8e80ab4b18a2ac24beebf9d20d71e1bc2627dbae"
+  integrity sha512-3oB133prH1o4j/L5lLW7uOCF1PlD+/It2L0eL/iAqWMB91RBbqTewABqxhj0ibBd90EEmWZq7ntIWzVaWcXTGQ==
 
 fill-range@^7.1.1:
   version "7.1.1"