HTML元素基本分为三类，空元素、行内元素（内联元素）、块级元素。

空元素

一个空元素（empty element）可能是 HTML，SVG，或者 MathML 里的一个不可能存在子节点（例如内嵌的元素或者元素内的文本）的element。
这是mdn给与的定义。我的理解就是一个元素没有闭合标签，就是空元素。

1
2
<img src="https//xxx.xxx.com/xxx.png" alt="图片" width="10px">
<input type="text">
  • 类似上述这种没有闭合标签的元素即为空元素。
  • 参考MDN空元素介绍

行内元素(内联元素)

一个行内元素只占据它对应标签的边框所包含的空间。

例子

1
2
3
<span>Hello</span>
<button>click me</button>
<a herf="#">   // a标签同样是行内元素
  • 行内元素默认自左到右排列。
  • 默认情况下，行内元素不会以新行开始，而块级元素会新起一行。
  • 参考MDN行内元素介绍。

块级元素

块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div>        //块级元素div
  <span>     //内联元素span
    hi       // 文章内容
  </span>    // 内联元素span闭合标签
</div>       //块级元素div闭合标签

<section> 
  <span>
    hellow
  </span>
  <a herf="">
</section>

<ul>
  <li>1</li>
  <li>2</li>
</ul>
  • 块级元素默认自上到下排列。
  • 在CSS盒模型中，块级元素的宽度、高度是有所有行内元素的高度、宽度撑起来的，且行内元素自左到右排列，块级元素自上到下排列，即文档流（normal float）。
  • 一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。
  • 参考MDN块级元素介绍。

__END__

o0Chivas0o
文章作者：o0Chivas0o
文章出处：浅谈HTML5元素
作者签名：Rich ? DoSomethingLike() : DoSomethingNeed()
版权声明：文章除特别声明外，均采用 BY-NC-SA 许可协议，转载请注明出处