HTML替换型元素:为什么link一个CSS要用href,而引入js要用src呢?
winter
该思维导图由 AI 生成,仅供参考
你好,我是 winter。我们今天来讲讲替换型元素。
我们都知道一个常识,一个网页,它是由多个文件构成的,我们在之前的课程中,已经学过了一种引入文件的方案:链接。
这节课我们要讲的替换型元素,就是另一种引入文件的方式了。替换型元素是把文件的内容引入,替换掉自身位置的一类标签。
我们首先来看一种比较熟悉的标签:script 标签。
script
我们之所以选择先讲解 script 标签,是因为 script 标签是为数不多的既可以作为替换型标签,又可以不作为替换型标签的元素。
我们先来看看 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
《重学前端》,新⼈⾸单¥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-083 - 赵健老师好,想请问下,业务场景中需要嵌入公司其他行业线的页面,这种不使用iframe该咋办?2019-04-09520
- favorlm早起第一件事,学习2019-04-0910
- 草剑src 属性支持 http、data、 ftp、file、mailto、smtp、pop、dns、whois、finger、daytime、news、urn 等协议2020-05-179
- Geeker1992老师,style 既然也可以这么用 <style>css 规则</style>, 为什么没有 <style src=“”></style>?2019-04-1029
- 阿成常见的有:http://,https://,file://,data...2019-04-097
- 南墙的树h5的设计稿,完全照办app设计稿,页面顶部的title导航(包括返回按钮),页面主体部分引入外部资源,这种需求,不使用iframe,请问老师该怎么处理?或者说,从一个不懂技术的产品那里开始,这种方案就有问题?2019-04-255
- Geek_0bb537iframe有没有什么好的替代方案 那个导航栏一般都是通用的 我看到淘宝也有iframe2019-04-1923
- umaruStyle元素不能使用css属性,这句话没看懂2019-04-102
- Geek_de3c35https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/img-src2020-11-241
收起评论