什么是可替换元素？

最近在群聊中无意中看到有朋友发了一张今日头条前端面试题的截图。其中，只有一个关于HTML的问题，如下：什么是可替换元素和不可替换元素，它们的区别是什么，并举例说明。前端面试的HTML题最少，也不难，重复的就那么几样。之前我们已经讲过最经典的HTML语义，今天就借此机会讲一下可替换元素。什么是可替换元素？顾名思义，就是要被替换的元素。（尴尬...比如一个典型的可替换元素img：我们并没有在img标签里面写任何内容，那么它的内容是从哪里来的呢？是浏览器下载给的图片通过src属性，将img标签替换为图片资源，而浏览器在下载前并不知道图片的宽高，因此可替换元素比较特殊，它的宽高是由它所包含的内容决定的加载。（当然css可以覆盖它的style。）例子是用img标签举几个例子：图片在页面中显示的话就是图片本身的宽高，img元素也支持宽高属性：此时显示的元素的宽高为80像素，如果我们再用css覆盖它的style:img{宽度:60px;height:60px;}元素显示为60像素。MDN的解读看了上面的例子，我们更容易理解概念性的知识。替换元素的显示效果不受CSS控制。这些元素是外部对象，它们外观的渲染与CSS无关。简单地说，它们的内容不受当前文档样式的影响。CSS可以影响被替换元素的位置，但不会影响被替换元素本身的内容。典型的可替换元素是