zh-CN: update 'Responsive images' and 'Adding vector graphics to the …

…web'

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
 <img src="equilateral.svg" alt="等边三角形" height="87px" width="100px" />
@@ -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();
   }
 };

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
 <img
@@ -134,6 +136,8 @@ web 刚面世时，这样的问题并不存在，在上世纪 90 年代早期至
   alt="Elva dressed as a fairy" />
 ```
 
+请注意，即使图片仍然以相同的尺寸显示，但在高分辨率显示器下，可以看到等多细节。
+
 ![一张照片，内容是一个小女孩打扮成仙女，图像应用了老式相机胶片效果](resolution-example.png)
 
 在这个例子中，下面的 CSS 会应用在图片上，所以它在屏幕上的宽度是 320 像素（也称作 CSS 像素）：