前端二向箔04-HTML嵌入型元素(媒体标签)

OliverStack
649 阅读6分钟

04 HTML嵌入型元素(媒体标签)

上一篇

前端二向箔03-HTML元数据和链接

上篇博客提到了链接, 主要讲述的是link, a, script等链接型元素. 与之相对的是嵌入在网页中的内容, 嵌入内容对应的嵌入型元素主要是一些多媒体标签. 它们主要是img, video, audio, iframe等. 本文一一复盘.

为什么style标签没有src?

开始复盘前, 先理解一下嵌入型和链接型的区别. tweet

相关tweet中, 老哥的这段话的大意是: 网页中某个具有src属性的标签, 是让浏览器去引用并嵌入到这个标签的位置.

而从功能角度思考, stylesheets作用在整个文档, 和文档是有对应的, 明确的1对1的映射关系. 而非其他嵌入在其中的包含关系. 所以, 有以下可能的原因和结论:

  • style标签与页面不是嵌入关系, 故没有src, 至于为什么没有href, 而是用link来描述样式表, 可能是

    • 有一定的历史遗留和设计原因, 起初的css发展和html不同步, 可能有设计层面的原因
    • link更能抽象和描述样式表这一外部文件和文档的关系.

  • 包含src的元素是嵌入型, 包含href的是链接型元素

其实, script标签和页面也可以归纳为一种对应关系, 应该也可以使用link去引入. 但是个人认为, 从浏览器工作层面考量则应更注重内联和引用的层面. 所以部分知识有争议和待求解很正常, 需要用辩证, 客观的想法去学习, 没有本来就那样的道理, 学会从语言设计层面去思考问题.

嵌入型多媒体标签

  1. img

    img是大家非常熟悉的标签了, 基础略过, 一些重要的属性和优化如下:

    • alt

      alt这个属性一般用户没有什么感受, 最多在图片加载失败时候, 看到一张破碎的图标和"img"的字样.

      事实上, alt是对于视障人士最大的关怀. alt可以放置描述性的文字用以机器阅读, 是特别重要但又容易被忽略的一点.

      <img src="foo.jpg" alt="一只小狗在奔跑">

      正确的alt应该是如上面所示, 描述图片, 而非"图片", "示例图片", 这也是容易被忽略的. 这是做到网址可达性的重要一点.

    • loading

      设置懒加载, 对于浏览较多, 较长的图文会非常有用, 只有当用户交互到的时候才进行加载, 即节省带宽流量, 有提高网页加载速度.

      loading属性可以取以下三个值。

      • auto：浏览器默认行为，等同于不使用loading属性。
      • lazy：启用懒加载。
      • eager：立即加载资源，无论它在页面上的哪个位置。

      由于图片的懒加载, 会导致页面重排, 影响性能. 所以一般设置好宽高.

      <img src="image.png" loading="lazy" alt="…" width="200" height="200">

    • data uris

      这类data:uri的图片引入也是常用的技巧, 用来减少文件的引入, 从而减少http请求, 提升网页性能. 替换调url为data uris. 格式如下

      data:[<mime type>][;charset=<charset>][;base64],<encoded data>

      常见的就是base64的图片编码:

      <img src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" alt="star" width="16" height="16">

      可以通过一些在线的网址提取图片的base64编码, 比如这个online base64 converter

      转换后base64的图片相比原来的可能会增加30%的大小, 因为通过较长的字符串来替代, 所以会降低可读性, 同时如果写在css中, 会增加css的体积, 但是可以通过压缩解决这个问题. 但是用base64有更明确的场景条件:

      • 被编码的图片较小, 且复用性高, 不经常刷新. 如用50X50字节的图片去平铺背景图
      • 不用额外的请求
      • 无法使用cssSprite的独立性较高的图片.

      特别是数量大, 独立性强, 体积小的图片. 这点和cssSprite比较像, 但两者还是有区别的. 可以参考这位博主的分析, 图片Base64编码的利与弊分析.

      不要盲目使用base64, 不是说可以减少图片请求就可以提高网页速度, 要因地制宜地使用, 否则:

      resarch

      (应该是主要用base64)加载图片的网址比单纯使用二进制链接(即src等)的网址慢了6倍!

    • srcset, sizes

      srcset可以为图片设置不同url地址, 主要用于移动端的响应式设计, 采用不同的图片尺寸来实现.

      <img srcset="foo-160.jpg 160w,
             foo-320.jpg 320w,
             foo-640.jpg 640w,
             foo-1280.jpg 1280w"
     sizes="(max-width: 440px) 100vw,
            (max-width: 900px) 33vw,
            254px"
     src="foo-1280.jpg"><img srcset="foo-320w.jpg,
             foo-480w.jpg 1.5x,
             foo-640w.jpg 2x"
     src="foo-640w.jpg">

      srcset属性给出了三个图像 URL，适应三种不同的像素密度.

      图像 URL 后面的像素密度描述符，格式是像素密度倍数 + 字母x。1x表示单倍像素密度，可以省略。浏览器根据当前设备的像素密度，选择需要加载的图像。

      如果srcset属性都不满足条件，那么就加载src属性指定的默认图像。

      而 sizes 属性, 则是用于选择不同的屏幕宽度. 当不同尺寸的条件发生, 则显示不同宽度的图片.

      事实上, 更好的做法是使用picture标签. 同时兼具像素和屏幕选择的两种功能.

      <picture>
  <source type="image/svg+xml" srcset="logo.xml">
  <source type="image/webp" srcset="logo.webp"> 
  <img src="logo.png" alt="ACME Corp">
</picture>

  2. video

    去年正式歇菜Flash一度是web视频的独有者, h5播放器如今发展得越来越好. 一般来说, 会指定多个视频源:

    <video controls="controls" >
 <source src="movie.webm" type="video/webm" >
 <source src="movie.ogg" type="video/ogg" >
 <source src="movie.mp4" type="video/mp4">
 You browser does not support video.
</video

    上面三种是video支持的主流视频格式. 分别是VP8 \ Theroa \ H.264对于的协议专利.至于为什么没有统一的h5的是视频格式, 可以追溯到各个厂家的竞争, 参考阮一峰翻译的HTML5的视频格式之争.

    不支持h5播放器就会显示标签中的内容. 同时可以参考各个属性进行设置, 参见MDN.

    audio属性基本和video一致.

  3. iframe

    iframe在网页开辟新的文档空间. 一般通过iframe嵌入其他网页. iframe并不被推荐使用, 一方面是网络安全问题, 容易利用iframe的漏洞进行攻击; 另一方面, 移动端显示问题, 还有诸多限制......此外还涉及到跨域问题. 一般网站都会通过http头禁止自身被设置为iframe.

    <meta http-equiv="X-FRAME-OPTIONS" content="DENY">

    新标准增加了sandbox, 更加方便设置, 可以解决跨域问题, 权限管理等:

    sandbox属性可以设置具体的值，表示逐项打开限制。未设置某一项，就表示不具有该权限。具体可以查看MDN.

    注意，不要同时设置allow-scripts和allow-same-origin属性，这将使得嵌入的网页可以改变或删除sandbox属性。

下一篇

前端二向箔05-HTML表格表单和ARIA

参考引用

  1. Data URIs | CSS-Tricks. (2010). Retrieved 21 February 2021, from css-tricks.com/data-uris/
  2. Foskett, M. (2020). Image to base64 data-URI converter. Retrieved 21 February 2021, from websemantics.uk/tools/image…
  3. <img>：图像嵌入元素 - HTML（超文本标记语言） | MDN. (2020). Retrieved 21 February 2021, from developer.mozilla.org/zh-CN/docs/…
  4. 图像标签. (2021). Retrieved 21 February 2021, from wangdoc.com/html/image.…
avatar
文章
阅读
粉丝