替换性元素

替换性元素

替换性元素

何为替换型元素

MDN(替换型元素) https://developer.mozilla.org/zh-CN/docs/Web/CSS/Replaced_element

替换型元素是指把文件的内容引入,替换掉自身位置的一类标签.
替换型元素都是使用src属性来引用文件的.

而style标签并非替换型元素,不能使用src属性,只能用href.

script

既可以作为替换型标签,又可以不作为替换型标签的元素(非替换型标签).

// 直接插入
<script type="text/javascript">
    console.log("Hello world!");
</script>

// 引入文件
<script type="text/javascript" src="my.js"></script>

img

替换型标签.

使用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>'/>

一定不能忘记alt属性,它对视觉障碍用户很友好.
无法加载图片时,也会在浏览器上显示alt的文本.
对SEO也很友好.

srcset,size属性:
在不同的屏幕大小和特性下,使用不同的图片.

<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>
    <source srcset="image-wide.png" media="(min-width: 600px)">
    <img src="image-narrow.png">
</picture>

video

使用source标签来指定接入多个视频.

使用type来区分源文件的使用场景.

<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>

更多的属性参考MDN的video介绍.https://developer.mozilla.org/ja/docs/Web/HTML/Element/video

track标签

  • 必须使用srclang来指定语言
  • kind属性
    • subtitles:字幕
    • captions:报幕内容
    • descriptions:视频描述信息
    • chapters:
    • metadata:给代码提供的元信息

audio

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  <p>You browser does not support audio.</p>
</audio>

iframe

能够嵌入一个完整的网页.

iframe是各种安全问题的源泉.
如opener,windows.name,css的opacity都是可以利用的漏洞.

iframe中添加了sandbox和srcdoc属性,用法如下:

<iframe sandbox srcdoc="<p>Yeah, you can see it <a href="/gallery?mode=cover&amp;page=1">in my gallery</a>."></iframe>

等于用srcdoc创建了一个文档,嵌入在ifrmae中,并用sandbox来隔离,这样就杜绝了跨域问题.

发表评论

邮箱地址不会被公开。 必填项已用*标注