【HTML基础】HTML元素和分类

HTML元素按功能分类

参考资料

随着网页的发展，定义元素的角度也在变化，从最初的元素，后来陆续增加，我猜它的发展过程可能是这样的：

1. 开始，只需要显示文章有的东西（字形字体，文字段落，引文等样式，图像，图表）
2. 然后，可以交互（表单，超链接）
3. 后来，多样布局需要（增加div，span），增加盒模型的概念
4. 现在，机器阅读角度（语义类）

所以，可能有同学感觉HTML的元素似乎不那么齐整。发展过程，修修补补的感觉，造成个别元素的属性和归类方式上不太那么整齐划一。比如： 为了页面布局，增加了div和span，这2个标签纯粹是为了布局来的。块元素就像个盒子，默认是没有样式独占一行。但是p标签是块元素，但是它有margin样式。 现在一般除了修饰性的格式类，其他是块状的，独占一行，而且没有样式，但是figure，p，p标签最初作为一个容器，块状元素，默认带有上下的margin样式。

怎么划分这些元素呢？我划分一下：

• 基础和功能性（包含最初的底层结构，）：html、head、title、meta、base、script、style
• 信息块：
  • 文段:p、code等
  • 字词句样式:em、strong等
  • 多媒体（图，视频，音频）：img、video等
• 表单和交互类:input、button、form等
• 布局容器
  • 纯粹容器：div块容器、span行内容器
  • 语义类容器（文章的头身脚导航侧边）：article，nav，footer，aside

1. 上面是我自己的归纳，我自己的理解目的是形成自己的体系，有了体系就方便我自己去想到它然后使用。
2. 我里面说的“布局容器”特指纯粹布局需要的元素，不含p等元素，p也可以说是文字、图片等的容器，因为它有文段的意思，而且可能是最早的元素归纳到文段中。
3. 2.这里的容器和盒模型不是一个意思，所有的元素都是盒模型的样子。参考 CSS 盒子模型 | 菜鸟教程

HTML元素按CSS布局来分类

参考资料：

块元素

简单来说，就是盒子一样的那样，独占一行，是个容器。

常见的如：address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

pre:自带margin默认上下16px

内联元素

就是文字那样在行内排列,大都是修饰性的格式元素。

常见的如：a、span、br、i、em、strong、label、q、var、cite、code

内联块元素

虽然是块，但是像文字那样，在行内排列。常用的input，img

常见的如：input、img

点击看实例

我是文字，内联块元素和我在一行 我是文字，内联块元素和我在一行

你好timetime和我在一行

3种元素之间的转换

“利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。主要用的CSS样式有以下三个：

• display:block — 显示为块级元素
• display:inline — 显示为内联元素
• display:inline-block — 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

我们常将所有li元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。”–引用自 《CSS Display(显示) 与 Visibility（可见性） | 菜鸟教程》里面底下的笔记部分

我例子补充上，第一个没有给li加样式，显示正常的竖向排列：

给li元素加了样式设置<li style=”display:inline”>，显示为横向排列：

扫一扫 手机查看