替换性元素
替换性元素
何为替换型元素
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&page=1">in my gallery</a>."></iframe>
等于用srcdoc创建了一个文档,嵌入在ifrmae中,并用sandbox来隔离,这样就杜绝了跨域问题.