src href img的srcset

src 和 href 的区别

src 是指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应用到文档内，如js脚本，img图片和frame元素。当浏览器解析到元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，所以一般js脚本会放在底部而不是头部。
href 是指向网络资源所在位置（的超链接），用来建立和当前元素或文档之间的连接，当浏览器识别到它所指向的文件时，就会并行下载资源，不会停止当前文档的处理。

img 的 srcset 的作用

可以设计相应图片，我们可以使用两个新的属性 srcset 和 sizes 来提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源。
srcset 定义了我们允许浏览器选择的图像集，以及每个图像的大小。
sizes 定义了一组媒体条件（例如屏幕宽度）并且指明当某些条件为真时，什么样的图片尺寸是最佳选择。
所以有了这些属性，浏览器会这些事情:

查看设备宽度
检查sizes列表中哪个媒体条件是第一个为真
查看给予改媒体查询的槽大小
加载srcset列表中引用的最接近所选的槽大小的图像

srcset提供了根据屏幕条件所选取图片的能力

<img src="wo-shi-zhen-de-shuai-200.png"alt="shuaiqibiren"srcset="wo-shi-zhen-de-shuai-200.png 200w,wo-shi-zhen-de-shuai-400.png 400w"sizes="(min-width: 600px) 200px, 50vw">

还有哪一个标签能起到跟srcset相似作用
picture 元素通过包含零个或者多个 source 元素和一个 img 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 source 元素，如果没有匹配的，就选择 img 元素的 src 属性中的 URL。然后，所选图像呈现在 img 元素占据的空间中

picture 同样可以通过不同设备来匹配不同的图像资源

<picture><source srcset="/wo/shi/zhen/de/shuaiqi-240-200.jpg"media="(min-width: 800px)"></source><img src="/wo/shi/zhen/de/shuaiqi-480-400.jpg">
</picture>

src href img的srcset相关推荐

Dom的常用方法/单位/url src href:
Dom的常用方法获取方法:document.getElementById() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组).:getElementByTagName() 把新的子节 ...
html src href 路径,src跟href，url的区别
什么是URL: URL是Uniform Resource Location的缩写,译为"统一资源定位符".通俗地说,URL是Internet上用来描述信息资源的字符串,主要用在各种 ...
src和href的区别，并且img中的srcset的作用是什么？
一.src和href的区别 src是指向外部资源的位置,指向的内容会嵌⼊到⽂档中当前标签所在的位置,在请求src资源时会将其指向的资源下载并应⽤到⽂档内,如js脚本,img图⽚和frame等元素.当浏 ...
img元素srcset属性浅析
img srcset 属性 img 元素的 srcset 属性用于浏览器根据宽.高和像素密度来加载相应的图片资源. 属性格式:图片地址宽度描述w 像素密度描述x,多个资源之间用逗号分隔.例如: &l ...
srcset_如何使用srcset构建响应图像
srcset This article is part of a web development series from Microsoft. Thank you for supporting the ...
srcset 配合sezi实现响应式图片
<img src="img/480.png" srcset="img/480.png 480w , img/800.png 800w" alt=" ...
vue-quill-editor 自定义 img 标签，给标签添加 href 属性
vue-quill-editor 自定义 img 标签,给标签添加 href 属性需求:上传图片成功之后,给图片标签插入 href 属性,内容为自定义的一段字符串,格式大概如下:<img sr ...
移动端-ibokan
1 html{font-family:"微软雅黑",Arial,sans-serif} 2 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6 ...
Django 3.2.5博客开发教程:实现网站首页
实现首页模板前,我们先把共公的页面模板base.html调用好.首先我们先看导航部分,除开首页和关于博主之外,其它的其实是我们的文章分类名.如图: 我们只需要在首页视图函数里,查询出所有的文章分类名称 ...

src href img的srcset

src href img的srcset相关推荐

最新文章

热门文章