HTML 元素分类

根据默认样式

注意

可以通过 CSS 来更改元素的默认样式。

HTML 元素可以根据默认样式分为以下几类：

块级元素 block

Docs

块级元素 - HTML | MDN (mozilla.org)

块级元素占据其父元素（容器）的整个水平空间，垂直空间等于其内容高度，因此创建了一个"块"。

通常浏览器会在块级元素前后另起一个新行。

格式：默认情况下，块级元素会新起一行。
内容模型：一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更"大型"的结构。

以下是 HTML 中所有的块级元素列表（虽然"块级"在新的 HTML5 元素中没有明确定义）

<address> ：联系方式信息。
<article> ：文章内容。
<aside> ：伴随内容。
<blockquote> ：块引用。
<dd> ：定义列表中定义条目描述。
<div> ：文档分区。
<dl> ：定义列表。
<fieldset> ：表单元素分组。
<figcaption> ：图文信息组标题
<figure> ：图文信息组 (参照 <figcaption>)。
<footer> ：区段尾或页尾。
<form> ：表单。
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>标题级别 1-6.
<header> ：区段头或页头。
<hgroup> ：标题组。
<hr> ：水平分割线。
<ol> ：有序列表。
<p> ：行。
<pre> ：预格式化文本。
<section> ：一个页面区段。
<table> ：表格。
<ul> ：无序列表。

行内元素 inline

这些元素只占据所需的宽度（设置宽高也不生效），不会导致换行。

Docs

行内元素 - HTML | MDN (mozilla.org)

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

内容：一般情况下，行内元素只能包含数据和其他行内元素。而块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更"大型"的结构。
格式：默认情况下，行内元素不会以新行开始，而块级元素会新起一行。

下面的元素都是行内元素：

<b>, <big>, <i>, <small>, <tt>
<abbr>, <acronym>, <cite>, <code>, <dfn>, <em>, <kbd>, <strong>, <samp>, <var>
<a>, <bdo>, <br>, <img>, <map>, <object>, <q>, <script>, <span>, <sub>, <sup>
<button>, <input>, <label>, <select>, <textarea>

行内块元素 inline-block

这些元素可以像行内元素一样显示，也可以像块级元素一样显示。

Details

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>default style</title>
  </head>
  <body>
    <div>DIV 元素</div>
    <p><span>内联元素</span><em>内联元素</em><strong>好巧，我也是内联元素</strong></p>
    <p>
      <select>
        <option>下拉框</option></select
      ><span>你猜左边是什么元素</span>
    </p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>default style</title>
  </head>
  <body>
    <div>DIV 元素</div>
    <p><span>内联元素</span><em>内联元素</em><strong>好巧，我也是内联元素</strong></p>
    <p>
      <select>
        <option>下拉框</option></select
      ><span>你猜左边是什么元素</span>
    </p>
  </body>
</html>

根据内容

元数据内容 Metadata content
流式内容 Flow content
章节内容 Sectioning content
标题内容 Heading content
短语内容 Phrasing content
嵌入内容 Embedded content
交互式内容 Interactive content

元数据 (Metadata)：用于描述文档的数据，如文档的标题、作者、字符编码等信息。例如，<title>、<meta>、<link>等标签属于元数据类别。
流内容 (Flow content)：用于组织页面的主体内容，如段落、列表、表格等。流内容一般不能嵌套标题等结构性元素。例如，<p>、<div>、<ul>、<table>等标签属于流内容类别。
区块内容 (Sectioning content)：用于组织页面结构，如章节、侧边栏、页脚等。区块内容可以包含其他区块内容和流内容，通常也可以嵌套标题等结构性元素。例如，<section>、<aside>、<footer>等标签属于区块内容类别。
标题内容 (Heading content)：用于表示文档结构的标题，一般由 h1~h6 六个级别的标题组成。标题内容只能出现在区块内容中，不能出现在流内容中。例如，<h1>、<h2>、<h3>等标签属于标题内容类别。
短语内容 (Phrasing content)：用于表示文本中的短语，如链接、强调文本、图像等。短语内容可以出现在流内容和区块内容中，但不能嵌套其他结构性元素。例如，<a>、<em>、<img>等标签属于短语内容类别。
嵌入内容 (Embedded content)：用于在文档中嵌入其他类型的内容，如音频、视频、图形等。嵌入内容可以出现在流内容和区块内容中。例如，<video>、<audio>、<img>等标签属于嵌入内容类别。
交互内容 (Interactive content)：用于创建用户交互界面的元素，如表单、按钮、链接等。交互内容可以出现在流内容和区块内容中。例如，<form>、<button>、<a>等标签属于交互内容类别。

元数据内容 Metadata content

元数据内容是设置其余内容的呈现或行为，设置文档与其他文档的关系，传达其他"带外"信息的内容。其语义主要与元数据相关的其他命名空间的元素（比如 RDF）也是元数据内容。

base, link, meta, noscript, script, style, template, title

流式内容 Flow content

多数文档和应用的 body 中的元素都归类为流式内容。

a, abbr, address, area, article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, data, datalist, del, details, dfn, dialog, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, label, link, main, map, mark, math, menu, meta, meter, nav, noscript, object, ol, output, p, picture, pre, progress, q, ruby, s, samp, script, section, select, slot, small, span, strong, sub, sup, svg, table, template, textarea, time, u, ul, var, video, wbr, 文本内容

章节内容 Sectioning content

章节内容是定义了标题和页脚范围的内容。每个章节内容元素可能具有标题和大纲。

article, aside, nav, section

注意

有些元素属于 章节根元素*。它们与* 章节内容 不同，但也可以有 大纲*。*

标题内容 Heading content

标题内容定义了章节的标题（可以显式地用章节内容元素标记，也可以隐式地用标题内容自己来标记）。

h1, h2, h3, h4, h5, h6, hgroup

短语内容 Phrasing content

短语内容是文档中的文本，以及标记该文本的段内级别的元素。多个短语内容形成段落。

a, abbr, area, audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, label, link, map, mark, math, meta, meter, noscript, object, output, picture, progress, q, ruby, s, samp, script, select, slot, small, span, strong, sub, sup, svg, template, textarea, time, u, var, video, wbr, 文本内容

注意

多数短语内容元素只能包含短语内容元素，而不是任何流式内容元素。

嵌入内容 Embedded content

嵌入内容是指引入其他资源的内容，或插入到文档的其他词汇表的内容。来自除 HTML 命名空间之外的，表达内容而不是元数据的元素，是嵌入内容。

audio, canvas, embed, iframe, img, math, object, picture, svg, video

交互式内容 Interactive content

交互式内容是专门用于用户交互的内容。tabindex 属性也可以让任何元素变成交互式内容。

a （如果 href 属性存在）,audio （如果 controls 属性存在）,button, details, embed, iframe, img （如果 usemap 属性存在）,input （如果 type 属性 不处于 隐藏状态）,label, object （如果 usemap 属性存在）,select, textarea, video （如果 controls 属性存在）

HTML 元素分类 #

根据默认样式 #

块级元素 block #

行内元素 inline #

行内块元素 inline-block #

根据内容 #

元数据内容 Metadata content #

流式内容 Flow content #

章节内容 Sectioning content #

标题内容 Heading content #

短语内容 Phrasing content #

嵌入内容 Embedded content #

交互式内容 Interactive content #