CSS入门3-认识html之元素

（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）

（注2：更多内容请查看我的目录。）

1. 元素的定义

html元素，指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

其拥有如下特点：

• HTML 元素以开始标签起始
• HTML 元素以结束标签终止
• 元素的内容是开始标签与结束标签之间的内容
• 某些 HTML 元素具有空内容（empty content）
• 空元素在开始标签中进行关闭（以开始标签的结束而结束）
• 大多数 HTML 元素可拥有属性

2. 元素分类

2.1 顶级元素 Top-level element

包括html, body, frameset, 表现如Block-level element, 属于高级块级元素。

2.2 块级元素：Block-level element

以块显示的元素，高度宽度都是可以设置的。比如我们常用的 p, h1~h6, div, ul 默认状态下都是属于块级元素。块级元素默认状态下每次都占据一整个行，后面的内容也必须再新起一行显示。当然非块级元素也可以通过css的display:block;将其更改成块级元素。此外还有个特殊的，float也具有此功能。

块级元素能够独立存在，一般的块级元素之间以换行(如一个段落结束后另起一行)分隔。块级元素是构成一个html的主要和关键元素，而任意一个块级元素均可以用Box model（盒模型）来解释说明。

可以这么理解，页面就像一个个盒子垒起来，每个盒子就是一个块状元素。

有哪些块元素呢？我按照自己写页面时的使用频率来排序：

1. 常用
2. div 常用来组合块级元素，像几个小盒子组成的大盒子一样，作为一个分区
3. p 段落
4. h1~h6 标题
5. table 表格
6. ul 无序列表
7. ol 有序列表
8. li 列表项
9. hr 水平分隔线
10. 不常用
11. form html表单
12. dl 定义列表
13. blockquote 常引用
14. 基本不用（那就不列举了，记住上面这些就够了）

更多块状元素请参考Block-level elements

2.3 内联元素 Inline element

通俗点来说就是文本的显示方式，与块级元素相反，内联元素的高度宽度是不可以设置的，其宽度就是自身文字或者图片的宽度。我们常用到的<a>、<span>、<em>都属于内联元素。内联元素的显示特点就是像文本一样的显示，不会独自占据一个行。当然内联元素也能变成块级元素，那就是通过css的display:inline;和float来实现。

内联元素依附其他块级元素存在，紧接于被联元素之间显示，而不换行。

可以理解为书架上的书本，有高有低，有宽有窄，取决于其内容本身。牢记一点：内联元素的高度宽度都是不可以设置的，其宽度就是自身文字或者图片的宽度。

内联元素如下：

1. 常用
2. span 和div对于块元素的作用一样，sapn用来组合内联元素。
3. a 链接
4. input 输入框
5. img 图片
6. button 按钮
7. select 单选或多选框
8. br 换行（你无法为它设置宽高）
9. textarea 多行文本输入框
10. b，big，i，em 设置文本效果的基本都是
11. 不常用
12. q 短引用
13. 基本不用（不做列举）

更多内联元素请参考Inline elements

参考：

W3school-HTML元素

HTML-块级元素和内联元素

html块级元素与行内元素

Html中行内元素有哪些？块级元素有哪些？

行内元素和块级元素

元素类型

Block-level elements

Inline elements