diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md b/files/zh-cn/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
index 2b52c632cb0c7d..56dae203f528ec 100644
--- a/files/zh-cn/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
+++ b/files/zh-cn/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
@@ -98,7 +98,7 @@ SVG 除了前面描述的以外还有其他优点:
### 快捷方式:`img` 元素
-要通过 {{htmlelement("img")}} 元素嵌入 SVG,你只需要按照预期的方式在 src 属性中引用它。你将至少需要 `height` 或 `width` 属性中的一个(或者如果你的 SVG 没有固有的宽高比,则都需要)。如果你还没使用过 `img` 元素,请阅读 [HTML 中的图片](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML)教程。
+要通过 {{htmlelement("img")}} 元素嵌入 SVG,你只需要按照预期的方式在 src 属性中引用它。你将至少需要 `height` 或 `width` 属性中的一个(或者如果你的 SVG 没有固有的{{glossary("aspect ratio","宽高比")}},则都需要)。如果你还没使用过 `img` 元素,请阅读 [HTML 中的图片](/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML)教程。
```html
@@ -274,12 +274,12 @@ window.addEventListener("load", updateCode);
// 转而使其在当前光标位置插入一个制表符
textarea.onkeydown = function (e) {
- if (e.keyCode === 9) {
+ if (e.code === "Tab") {
e.preventDefault();
insertAtCaret("\t");
}
- if (e.keyCode === 27) {
+ if (e.code === "Escape") {
textarea.blur();
}
};
diff --git a/files/zh-cn/learn/html/multimedia_and_embedding/responsive_images/index.md b/files/zh-cn/learn/html/multimedia_and_embedding/responsive_images/index.md
index 2e8ef4f9607f27..a59523ed1719f5 100644
--- a/files/zh-cn/learn/html/multimedia_and_embedding/responsive_images/index.md
+++ b/files/zh-cn/learn/html/multimedia_and_embedding/responsive_images/index.md
@@ -102,7 +102,7 @@ web 刚面世时,这样的问题并不存在,在上世纪 90 年代早期至
3. 当媒体条件为真时,图像将填充的**插槽的宽度**(`480px`)
> [!NOTE]
-> 对于插槽的宽度,你可以不提供绝对宽度(如 `480px`),而是提供相对于视口的宽度(如 `50vw`),但不能提供百分比。你也许已经注意到最后一个插槽的宽度是没有媒体条件的(当没有任何一个媒体条件为真时,它默认生效)。在浏览器成功匹配某一个媒体条件之后,剩下所有的条件都会被忽略,所以要注意媒体条件的顺序。
+> 在 `sizes` 中,可以使用任何[长度值](/zh-CN/docs/Web/CSS/length)。例如,与其提供绝对宽度(如 `480px`),不如提供相对于视口的宽度(如 `50vw`),但不能提供百分比。你也许已经注意到最后一个插槽的宽度是没有媒体条件的(当没有任何一个媒体条件为真时,它默认生效)。在浏览器成功匹配某一个媒体条件之后,剩下所有的条件都会被忽略,所以要注意媒体条件的顺序。
有了这些属性后,浏览器会:
@@ -125,7 +125,9 @@ web 刚面世时,这样的问题并不存在,在上世纪 90 年代早期至
### 分辨率切换:相同的尺寸,不同的分辨率
-如果你要支持多分辨率显示,但希望每个人在屏幕上看到的图片的实际尺寸是相同的,你可以使用 `srcset` 结合 x 描述符(一种更简单的语法),而不用 `sizes`,来让浏览器选择合适分辨率的图片。你可以参考这个示例 [srcset-resolutions.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html)(或查看[源代码](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html)):
+假如有一张图片,在不同屏幕分辨率下,以相同的实际尺寸显示。通过提供高分辨率版本的图片,可以在高分辨显示器上提供更好的用户体验。
+
+为此,你可以使用 `srcset` 结合 x 描述符(一种更简单的语法),而不用 `sizes`,来让浏览器选择合适分辨率的图片。你可以参考这个示例 [srcset-resolutions.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html)(或查看[源代码](https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html)):
```html
```
+请注意,即使图片仍然以相同的尺寸显示,但在高分辨率显示器下,可以看到等多细节。
+
![一张照片,内容是一个小女孩打扮成仙女,图像应用了老式相机胶片效果](resolution-example.png)
在这个例子中,下面的 CSS 会应用在图片上,所以它在屏幕上的宽度是 320 像素(也称作 CSS 像素):