学习HTML

2021-05-05 4 分钟阅读 #学习笔记#前端#HTML

MDN文档的HTML学习笔记


1. 嵌入

<iframe> 元素

sandbox属性

<embed> 和 <object> 元素

这两个元素与<iframe>不同，是用来嵌入多种类型的外部内容的通用嵌入工具，包括像Java小程序和Flash，PDF（可在浏览器中显示为一个PDF插件）这样的插件技术，甚至像视频，SVG和图像的内容。


2. 矢量图形SVG

快捷方式：<img>

使用 src 属性设置SVG路径

疑难解答和跨浏览器支持

对于不支持SVG（IE 8及更低版本，Android 2.3 及更低版本）的浏览器，可以从 src 属性引用 PNG 或 JPG ，并使用 srcset 属性 只有最近的浏览器才能识别）来引用 SVG 。 在这种情况下，仅支持浏览器将加载 SVG - 较旧的浏览器将加载 PNG ：

<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">

还可以使用 SVG 作为 CSS 背景图像，如下所示。 在下面的代码中，旧版浏览器会坚持他们理解的 PNG ，而较新的浏览器将加载 SVG ：

.svg {
  background: url("fallback.png") no-repeat center;
  background-image: url("image.svg");
  background-size: contain;
}

像上面描述的<img>方法一样，使用 CSS 背景图像插入 SVG 意味着它不能被 JavaScript 操作，并且也受到相同的 CSS 限制。

在HTML中引入SVG代码

可以在文本编辑器中打开SVG文件，复制SVG代码，并将其粘贴到HTML文档中 - 这有时称为将SVG内联或内联SVG。确保您的SVG代码在<svg></svg>标签中（不要在外面添加任何内容）。

<svg width="300" height="200">
    <rect width="100%" height="100%" fill="green" />
</svg>

优点

  • 将 SVG 内联减少 HTTP 请求，可以减少加载时间。
  • 可以为 SVG 元素分配class和id，并使用 CSS 修改样式。
  • 内联 SVG 是唯一可以在 SVG 图像上使用 CSS 交互（如:focus）和 CSS 动画的方法（即使在常规样式表中）。
  • 可以通过将 SVG 标记包在 <a> 元素中，使其成为超链接。

缺点

  • 这种方法只适用于在一个地方使用的 SVG 。多次使用会导致资源密集型维护（resource-intensive maintenance）。
  • 额外的 SVG 代码会增加 HTML 文件的大小。
  • 浏览器不能像缓存普通图片一样缓存内联 SVG 。
  • 可能会在 <foreignObject> 元素中包含回退，但支持 SVG 的浏览器仍然会下载任何后备图像。考虑一下仅仅为支持过时的浏览器，而增加额外开销是否真的值得。

示例

遁入智瞳！上勾拳！

3. 响应式图片

目的：学习如何使用 srcset 以及 <picture> 元素，来实现网页中的响应式图片处理方法。


分辨率切换：不同的尺寸

两个新属性：srcset 和 sizes 提供额外的资源图像和提示。

  1. 浏览器根据设备宽度到 sizes 中找到不超过 max-width 的那一项
  2. 根据此项后面的像素值 a，到 srcset 中找到不小于这个值的最接近的 b
  3. 将 srcset 对应的图片路径作为需要显示的图片路径，以达到省流目的
<img srcset="/images/posts/webnotes/learn_html/water-320w.jpg 320w,
             /images/posts/webnotes/learn_html/water-480w.jpg 480w,
             /images/posts/webnotes/learn_html/water-800w.jpg 800w,
             /images/posts/webnotes/learn_html/water-1280w.jpg 1280w"
     sizes = "(max-width: 424px) 320px,
              (max-width: 767px) 460px,
              (max-width: 991px) 800px,
              1280px"
     src="/images/posts/webnotes/learn_html/water-1280w.jpg" alt="Drink more water">

效果：

Drink more water


分辨率切换：相同的尺寸，不同的分辨率

如果想支持多分辨率显示，但希望每个人在屏幕上看到的图片的实际尺寸是相同的，使用 srcset 和 x 语法结合——一种更简单的语法——而不用 sizes ，来选择适当分辨率的图片。

  1. 浏览器根据设备的 DPR（即设备像素比），从 srcset 中找到像素比最接近的图片路径
  2. 将此路径的图片显示出来，图片的大小由 CSS 样式表中的 width 值来定义
  3. 浏览器会保证图片在任何设备上的物理大小一致
<img srcset="/images/posts/webnotes/learn_html/mercy-320w.png,
             /images/posts/webnotes/learn_html/mercy-480w.png 1.5x,
             /images/posts/webnotes/learn_html/mercy-800w.png 2.5x,
             /images/posts/webnotes/learn_html/mercy-1280w.png 4x"
     src="/images/posts/webnotes/learn_html/mercy-1280w.png" alt="Overwatch mercy"
     style="width: 180px;">

效果：

Overwatch mercy


美术设计

使用 <picture> 元素实现当屏幕缩小时动态得使用对应像素的图片，将内容适应小屏幕观看，例如人物更大的低分辨率图片。

<picture>
  <!-- 小手机 -->
  <source media="(max-width: 424px)" srcset="/images/posts/webnotes/learn_html/mercy-320w.png">
  <!-- 大手机 -->
  <source media="(max-width: 767px)" srcset="/images/posts/webnotes/learn_html/mercy-480w.png">
  <!-- 平板电脑竖屏 -->
  <source media="(max-width: 991px)" srcset="/images/posts/webnotes/learn_html/mercy-800w.png">
  <!-- 平板电脑横屏 / 笔记本电脑 -->
  <source srcset="/images/posts/webnotes/learn_html/mercy-1280w.png">
  <img src="/images/posts/webnotes/learn_html/mercy-1280w.jpg" alt="Overwatch mercy">
</picture>

效果（调整浏览器宽度以查看变化）：

Overwatch mercy


为什么不能使用 CSS 或 JavaScript 来做到这一效果？

如果使用CSS或JavaScript来实现这一效果，在这之前原始图像已经被加载了，然后CSS或JavaScript又加载了一个小的图像，反而浪费发了流量。


大胆使用现代图像格式

新图像格式（例如 WebP 和 JPEG-2000）可以在有高质量的同时有较低的文件大小。但是浏览器支持情况不同。

可以使用 <picture> 来继续满足老式浏览器的需要。可以在 type 属性中提供 MIME 类型，这样浏览器就能立即拒绝不支持的类型：

<picture>
  <source type="image/svg+xml" srcset="***.svg">
  <source type="image/webp" srcset="***.webp">
  <img src="***.png" alt="example image">
</picture>
  • 不要使用 media 属性，除非需要美术设计。
  • 在 <source> 元素中，只可以引用在 type 中声明的文件类型。
  • 如果必要，可以在 srcset 和 sizes 中使用逗号分割的列表。

版权

本作品采用 CC BY-NC-ND 4.0 授权。