HTML 空元素 And 可替换元素

MDN 概念

一个空元素(empty element)可能是 HTML,SVG,或者 MathML 里的一个不可能存在子节点(例如内嵌的元素或者元素内的文本)的element。

举例说明

img 标签一般使用方法

<img src="../images/avatar.png" alt="头像图片">

而不会写成这样

<img src="../images/avatar.png" alt="头像图片">这是头像图片</img>
  • 空标签只有开始标签,没有结束标签;即使添加结束标签也是无效的。
  • 空标签没有子节点内容:即没有在开始标签和结束标签之间的节点内容。
空标签列表
- <area>
- <base>
- <br>
- <col>
- <colgroup>
- <command>
- <embed>
- <hr>
- <img>
- <input>
- <keygen>
- <link>
- <meta>
- <param>
- <source>
- <track>
- <wbr>
MDN 概念

在中,可替换元素(replaced element)的展现效果不是由 CSS 来控制的。这些元素是一种外部对象,它们外观的渲染,是独立于 CSS 的。

换句话说,它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置,但不会影响到可替换元素自身的内容。某些可替换元素,例如 <iframe>元素,可能具有自己的样式表,但它们不会继承父文档的样式。

举例说明

使用 img 标签说明

<img src="../images/avatar.png" alt="头像图片">
  • 根据标签和属性才能确定最终显示内容。
    例如:图片在下载完成之前,无法确定其具体显示内容;
    当图片下载完成之后,浏览器才能最终确定显示内容。

  • 一般可替换元素都有默认样式,例如宽高,但会受 CSS 的影响。
    例如:图片在下载完成之后,会有默认宽高,但往往不是我们需要的尺寸,
    所以我们使用 CSS 控制图片宽高。

  • 虽然 CSS 可以控制可替换元素的属性,但无法改变具体显示内容。
    例如:标签最终呈现的内容,显然由 src 属性控制,
    而不能单纯的靠 CSS 来控制或修改图片的最终显示内容,除非更换 src 资源。

可替换标签列表
典型可替换元素
- <iframe>
- <video>
- <embed>
- <img>
特定情况下作为可替换元素
- <option>
- <audio>
- <canvas>
- <object>
- <applet>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,968评论 1 45
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 13,096评论 0 3
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 6,568评论 0 8
  • 前端开发面试题 <a name='preface'>前言</a> 只看问题点这里 看全部问题和答案点这里 本文由我...
    自you是敏感词阅读 4,191评论 0 3