2019.12.20--今天学了啥?
作者:互联网
今天学了啥?
一、早 6:50-7:30
《玩转webpack》12、13、14讲关于loaders、plugins、mode的基础讲解以及官方文档。
mode其实就是配置开发环境或者生产环境;loader是对webpack不能解析的模块源代码进行转换,将不同的语言转换为js;plugins为解决loaders不能解决的事情。
二: 早 8:20-9:00 地铁时间
读了winter关于《HTML替换型元素》的一篇文章,收货还是蛮多的。
script标签是为数不多的既可以作为替换型标签又可以作为非替换型标签,凡是替换型元素抖用src来引用文件;
img标签:如果不想引入一个独立的文件,可以使用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>'/>
重新呢个来讲,img要写宽高,因为替换型元素加载完后,如果尺寸变化,会触发重新渲染。
img可以通过 srcset跟sizes属性来根据屏幕大小使用不同的图片。
picture标签可以根据屏幕的条件为其中的 img 元素提供不同的源,它使用 source 元素来指定图片源,并且支持多个。
<picture> <source srcset="image-wide.png" media="(min-width: 600px)"> <img src="image-narrow.png"> </picture>
video标签以及audio标签
<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>
iframe
在新标准中,为 iframe 加入了 sandbox 模式和 srcdoc 属性,这样,给 iframe 带来了一定的新场景。
<iframe sandbox srcdoc="<p>Yeah, you can see it <a href="/gallery?mode=cover&page=1">in my gallery</a>."></iframe>
标签:20,img,标签,元素,2019.12,今天,iframe,替换 来源: https://www.cnblogs.com/ylweb/p/12075576.html