1. HTML 基础

  2. 常用的元素

  3. 工具与规范

前言

HTML 中大部分元素都是块级(block)元素或行内(inline)元素。

可以通过 CSS 设置 display: block 将元素设置为块级元素,或设置 display: inline 将元素设置为行内元素。

块级元素

块级元素有以下特点:

  • 至少独占一行。
  • 可以设置宽高。
  • 默认宽度为 100%(父元素宽度),默认高度为内容的高度。
  • 块级元素可以包含块级元素或行内元素

我们给一个块级元素设置背景色可以看到它默认所占的区域,宽度占据了 100%。

<div style="background: pink">块级元素</div>

$$demo

<div style="background: pink">块级元素</div>

$$

常见的块级元素

div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、blockquote、address、table、menu、pre

行内元素

行内元素有以下特点:

  • 可与其他行内元素共一行。
  • 不能设置宽高。
  • 默认宽度为内容的宽度,默认高度为内容的高度。
  • 一般行内元素只能包含行内元素

我们给一个行内元素设置背景色可以看到它默认所占的区域,宽度为内容的宽度。

<span style="background: pink">行内元素</span>

$$demo

<span style="background: pink">行内元素</span>

$$

$$tip

<img><input><textarea><video><audio> 属于行内替换(inline-replaced)元素,因此可以设置宽高。

详情可以看 stackoverflow 上的讨论 Why <img> takes a height when it's an inline element

$$

常见的行内元素

span、img、a、label、code、input、abbr、em、b、big、cite、i、q、textarea、select、small、sub、sup,strong、u、video、audio