魏名华

不要偷懒,做更好的自己

Nothing


No Welcome Message

重学前端-33 | HTML替换型元素:为什么link一个CSS要用href,而引入js要用src呢?

script、style、link、img、picture、video、audio、iframe


img 标签的作用是引入一张图片。这个标签是没有办法像 script 标签那样作为非替换型标签来使用的,它必须有 src 属性才有意义。  如果一定不想要引入独立文件,可以使用 data uri,我们来看个实际的例子:  
 <img src='data:image/svg+xml;charset=utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/></svg>'/>

这个例子中我们使用了 data uri 作为图片的 src,这样,并没有产生独立的文件,客观上做到了和内联相同的结果,这是一个常用的技巧。  

img 标签可以使用 width 和 height 指定宽度和高度。也可以只指定其中之一。当我们指定了宽度后,图片被等比例缩放了。我们看个例子:
 <img src='data:image/svg+xml;charset=utf8,<svg width="600" height="400" version="1.1"
xmlns="http://www.w3.org/2000/svg"><ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/></svg>' width="100"/>
img 标签还有一组重要的属性,那就是 srcset 和 sizes,它们是 src 属性的升级版(所以我们前面讲 img 标签必须有 src 属性,这是不严谨的说法)。 

这两个属性的作用是在不同的屏幕大小和特性下,使用不同的图片源。下面一个例子也来自 MDN,它展示了 srcset 和 sizes 的用法

srcset 提供了根据屏幕条件选取图片的能力,但是其实更好的做法,是使用 picture 元素。
<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

picture 元素可以根据屏幕的条件为其中的 img 元素提供不同的源,它的基本用法如下:

picture 元素的设计跟 audio 和 video 保持了一致(稍后我会为你讲解这两个元素),它跟 img 搭配 srcset 和 sizes 不同,它使用 source 元素来指定图片源,并且支持多个。  这里的 media 属性是 media query,跟 CSS 的 @media 规则一致。
<picture>
  <source srcset="image-wide.png" media="(min-width: 600px)">
  <img src="image-narrow.png">
</picture>

在 HTML5 早期的设计中,video 标签跟 img 标签类似,也是使用 src 属性来引入源文件的,不过,我想应该是考虑到了各家浏览器支持的视频格式不同,现在的 video 标签跟 picture 元素一样,也是提倡使用 source 的。
<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 中还支持一种标签:track。  
track 是一种播放时序相关的标签,它最常见的用途就是字幕。track 标签中,必须使用 srclang 来指定语言,此外,track 具有 kind 属性,共有五种。  

subtitles:就是字幕了,不一定是翻译,也可能是补充性说明 captions:报幕内容,可能包含演职员表等元信息,适合听障人士或者没有打开声音的人了解音频内容 
descriptions:视频描述信息,适合视障人士或者没有视频播放功能的终端打开视频时了解视频内尔用 
chapters:用于浏览器视频内容。 
metadata:给代码提供的元信息,对普通用户不可见。 

一个完整的 video 标签可能会包含多种 track 和多个 source,这些共同构成了一个视频播放所需的全部信息。

audio


iframe