可替代元素有哪些?(附示例)
比来在群聊里偶然看到有位仁兄发了张今日头条前端面试题的截图,其中关于 HTML 的只要一题,如下:
请问什么是可更换元素和非可更换元素,它们的差别是啥?并举例说明。
前端面试中 HTML 的问题原本就最少,并且并不难,翻来覆去也就那几样。我们此前已经谈到过最经典的 HTML 语义化 ,今天就借此时机来谈谈可更换元素。
释义
什么是可更换元素?望文生义,就是会被更换的元素。 (尬笑……
比方一个典型的可更换元素 img:
<img src=xxx.jpg>
我们并没有在 img
标签中写入任何内容,那它的内容从哪里来的呢?
是阅读器去下载 src 属性给到的图片,并用该图片资源更换掉 img
标签,并且阅读器鄙人载前并不知道图片的宽高。所以,可更换元素比力非凡,它的宽高是由其加载的内容决议的。(当然 CSS 可以覆盖其样式)
示例
还是用 img
标签举几个例子:
<img src="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4">
该图片在页面中展示出来的话,就是图片本身本身的宽高。
img
元素也支撑 width
和 height
属性:
<img width="80" height="80" src="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4">
此时该元素展示出来就是宽高为 80 像素。
假如我们再用 CSS 去覆盖其样式:
img { width: 60px; height: 60px; }
该元素的展示即为 60 像素。
MDN 的释义
看过上面的例子之后我们再来懂得概念性的知识就比力容易了。
可更换元素(replaced element)的展示结果不是由 CSS 来操纵的。这些元素是一种外部对象,它们外不雅的渲染,是独立于 CSS 的。简便来说,它们的内容不受当前文档的样式的影响。CSS 可以影响可更换元素的位置,但不会影响到可更换元素本身的内容。
典型的可更换元素有 <iframe>
<video>
<embed>
<img>
,还有一些元素仅在特定状况下被作为可更换元素处置,比方 <input>
。
【相关引荐:HTML视频教程】
以上就是可更换元素是啥?(附示例)的具体内容,更多请关注百分百源码网其它相关文章!