请问什么是可替换元素和非可替换元素,它们的差异是什么?并举例说明。
前端面试中HTML的题目本来就最少,而且并不难,翻来覆去也就那几样。我们之前已经谈到过最经典的HTML语义化,今天就借此机会来谈谈可替换元素。
释义
什么是可替换元素?顾名思义,就是会被替换的元素。(尬笑……
比如一个典型的可替换元素img:
<imgsrc=xxx.jpg>
我们并没有在img标签中写入任何内容,那它的内容从哪里来的呢?
是浏览器去下载src属性给到的图片,并用该图片资源替换掉img标签,而且浏览器在下载前并不知道图片的宽高。所以,可替换元素比较特殊,它的宽高是由其加载的内容决定的。(当然CSS可以覆盖其样式)
示例
还是用img标签举几个例子:
<imgsrc="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4">
该图片在页面中展现出来的话,就是图片本身本身的宽高。
img元素也支持width和height属性:
<imgwidth="80"height="80"src="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4">
此时该元素展现出来就是宽高为80像素。
如果我们再用CSS去覆盖其样式:
img{
60px;
height:60px;
}
该元素的展现即为60像素。
MDN的释义
看过上面的例子之后我们再来理解概念性的知识就比较容易了。
可替换元素(replacedelement)的展现效果不是由CSS来控制的。这些元素是一种外部对象,它们外观的渲染,是独立于CSS的。
简单来说,它们的内容不受当前文档的样式的影响。CSS可以影响可替换元素的位置,但不会影响到可替换元素自身的内容。
典型的可替换元素有<iframe><video><embed><img>,还有一些元素仅在特定情况下被作为可替换元素处理,比如<input>。
![](https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=288940854,3852752120&fm=26&gp=0.jpg)
![](https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2941711175,155850835&fm=26&gp=0.jpg)
本文转载自中文网
![](https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=288940854,3852752120&fm=26&gp=0.jpg)
![](https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2941711175,155850835&fm=26&gp=0.jpg)
本文转载自中文网
如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h55810.shtml