重学前端
程劭非(winter)
前手机淘宝前端负责人
105348 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 57 讲
开篇词+学习路线+架构图 (3讲)
重学前端
15
15
1.0x
00:00/00:00
登录|注册

HTML替换型元素:为什么link一个CSS要用href,而引入js要用src呢?

sandbox模式和srcdoc属性
嵌入完整的网页
使用source元素指定音频源
track标签
兼容性问题
使用source标签指定视频源
media属性
使用source元素指定不同的图片源
srcset和sizes属性
alt属性的重要性
使用width和height指定宽度和高度
使用data uri作为图片的src
使用src属性引入图片
用href属性引入CSS文件
用src属性引入外部脚本文件
直接写脚本代码
iframe
audio
video
picture
img
link
script
HTML替换型元素

该思维导图由 AI 生成,仅供参考

你好,我是 winter。我们今天来讲讲替换型元素。
我们都知道一个常识,一个网页,它是由多个文件构成的,我们在之前的课程中,已经学过了一种引入文件的方案:链接。
这节课我们要讲的替换型元素,就是另一种引入文件的方式了。替换型元素是把文件的内容引入,替换掉自身位置的一类标签。
我们首先来看一种比较熟悉的标签:script 标签。

script

我们之所以选择先讲解 script 标签,是因为 script 标签是为数不多的既可以作为替换型标签,又可以不作为替换型标签的元素。
我们先来看看 script 标签的两种用法:
<script type="text/javascript">
console.log("Hello world!");
</script>
<script type="text/javascript" src="my.js"></script>
这个例子中,我们展示了两种 script 标签的写法,一种是直接把脚本代码写在 script 标签之间,另一种是把代码放到独立的 js 文件中,用 src 属性引入。
这两种写法是等效的。我想这种等效性可以帮助你理解替换型元素的“替换”是怎么一回事。
这里我们就可以回答标题中的问题了:凡是替换型元素,都是使用 src 属性来引用文件的,而我们之前的课程中已经讲过,链接型元素是使用 href 标签的。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

HTML中的替换型元素是一种引入外部文件内容的重要方式。通过替换自身位置的标签,可以引入脚本、图片、音频、视频以及完整的网页。其中,script标签可以直接嵌入脚本代码或引入外部js文件,而img标签可以使用data uri来避免引入独立文件。另外,picture元素可以根据屏幕条件为img元素提供不同的图片源,而video和audio标签也支持使用source元素指定源文件。然而,移动端对iframe标签的支持受到限制。总的来说,替换型元素的使用方式和属性有所不同,但它们都是用于引入外部文件内容的重要标签。 在本文中,我们深入了解了替换型元素的特点和使用方式,包括不同标签的资源引入方式,如src属性、srcset属性、source标签以及srcdoc属性。此外,还介绍了一些实际开发中的小技巧,比如使用data uri来优化资源引入。最后,提出了一个问题,即在多数现代浏览器兼容的范围内,src属性支持哪些协议的uri,如http和data。这些内容将帮助读者快速了解替换型元素的重要性和使用方法,为他们在HTML开发中提供了有益的知识。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《重学前端》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(15)

  • 最新
  • 精选
  • 宗麒麟
    var a = {n: 1}; var b = a; a.x = a = {n: 2}; a.x b.x 分别是什么? 老师,能不能把a.x这块的赋值讲一下?

    作者回复: 这个分析是可以分析,但是连等这个用法我觉得是语言的糟粕,所以不太想讲。 具体来说,等号的语法是先求左边的引用,再执行右边的表达式,然后再做赋值操作的。所以你这个代码的结果特别奇怪。 参考 https://www.ecma-international.org/ecma-262/10.0/index.html#prod-AssignmentExpression

    2019-08-08
    3
  • 赵健
    老师好,想请问下,业务场景中需要嵌入公司其他行业线的页面,这种不使用iframe该咋办?
    2019-04-09
    5
    20
  • favorlm
    早起第一件事,学习
    2019-04-09
    10
  • 草剑
    src 属性支持 http、data、 ftp、file、mailto、smtp、pop、dns、whois、finger、daytime、news、urn 等协议
    2020-05-17
    9
  • Geeker1992
    老师,style 既然也可以这么用 <style>css 规则</style>, 为什么没有 <style src=“”></style>?
    2019-04-10
    2
    9
  • 阿成
    常见的有:http://,https://,file://,data...
    2019-04-09
    7
  • 南墙的树
    h5的设计稿,完全照办app设计稿,页面顶部的title导航(包括返回按钮),页面主体部分引入外部资源,这种需求,不使用iframe,请问老师该怎么处理?或者说,从一个不懂技术的产品那里开始,这种方案就有问题?
    2019-04-25
    5
  • Geek_0bb537
    iframe有没有什么好的替代方案 那个导航栏一般都是通用的 我看到淘宝也有iframe
    2019-04-19
    2
    3
  • umaru
    Style元素不能使用css属性,这句话没看懂
    2019-04-10
    2
  • Geek_de3c35
    https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/img-src
    2020-11-24
    1
收起评论
显示
设置
留言
15
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部