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&amp;page=1">in my gallery</a>."></iframe>