HTML的替换性元素

替换性元素

修改某个属性值，元素呈现的内容就可以被替换的元素。一般为拥有src属性的元素。

参考：替换性元素

举例

• <img src="SRC" />
• <video src="SRC"></video>
• <audio src="SRC"></audio>
• <script src="SRC"></script>
• <iframe drc="SRC"></iframe>
• <picture src="SRC"></picture>
• <embed src="SRC"></embed>
• 其他比如input，在一些情况下（如type=image）属于替换性元素，其他情况下是普通元素。

特性

• 一般替换性元素自带尺寸，300 * 150或者 0 * 0。
• 内容的外观不受页面css的影响。
• 有些可替换性元素在css属性上有自己的表现规则。比如vertical-align: baseline;对于普通元素来说基线是字符x的下边缘，对于可替换性元素来说是元素的下边缘。普通元素没有类似的自带值。
• 默认都是内联水平元素，display的默认值有的是inline有的是inline-block。

尺寸计算规则

• 无css尺寸及html尺寸，用固有尺寸。
• 无css尺寸，用html尺寸。
• 有css尺寸，用css尺寸。
• 固有尺寸有固定宽高比且仅设置了宽或高一种，固有宽高比依然存在。
• css尺寸、html尺寸、固有尺寸均无，默认width为300，height为150。
• 块级元素、内联元素均适用以上规则。

尺寸类型

• 固有尺寸为替换性内容原本的尺寸，如video、img。
• html尺寸只能通过html原生属性修改，如textarea的rows。
• css尺寸是指width、min-width、max-width等属性。

content与替换性元素的关系

• content属性生成的对象是匿名替换元素。
• content内容无法选中，不可SEO，不可屏幕阅读。
• 不能左右:empty伪类。
• 值无法获取。