元素类型划分、替换元素、非替换元素

元素类型划分

一、块元素与内联元素

根据元素的显示（能不能在同一行）类型划分

1、块元素

1.1块元素又名块级元素(block element)，

其特点是：

①总是在新行上开始；

②高度，行高以及外边距和内边距都可控制；

③宽度缺省时，它占他父元素宽度的100%，除非设定一个宽度。

④它可以容纳内联元素和其他块元素

1.2常用的块元素

1. address - 地址
2. blockquote - 块引用
3. center - 居中对齐块
4. dir - 目录列表
5. div - 常用块级容器，也是css layout的主要标签
6. dl - 定义列表
7. fieldset - form控制组
8. form - 交互表单
9. h1 - 大标题
10. h2 - 副标题
11. h3 - 3级标题
12. h4 - 4级标题
13. h5 - 5级标题
14. h6 - 6级标题
15. hr - 水平分隔线
16. isindex - input prompt
17. menu - 菜单列表
18. noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容）
19. noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
20. ol - 排序表单
21. p - 段落
22. pre - 格式化文本
23. table - 表格
24. ul - 非排序列表（无序列表）

2、内联元素

2.1内联元素(inline element)

其特点是：

①和其他元素都在一行上；

②高，行高及外边距和内边距不可改变；

③宽度由他内部的文字或图片撑起来，不可改变

④内联元素只能容纳文本或者其他内联元素

2.2常见的内联元素

1. a - 锚点、链接
2. abbr - 缩写
3. acronym - 首字
4. b - 粗体(不推荐)
5. bdo - bidi override
6. big - 大字体
7. br - 换行
8. cite - 引用
9. code - 计算机代码(在引用源码的时候需要)
10. dfn - 定义字段
11. em - 强调
12. font - 字体设定(不推荐)
13. i - 斜体
14. img - 图片
15. input - 输入框
16. kbd - 定义键盘文本
17. label - 表格标签
18. q - 短引用
19. s - 中划线(不推荐)
20. samp - 定义范例计算机代码
21. select - 项目选择
22. small - 小字体文本
23. span - 常用内联容器，定义文本内区块
24. strike - 中划线
25. strong - 粗体强调
26. sub - 下标
27. sup - 上标
28. textarea - 多行文本输入框
29. tt - 电传文本
30. u - 下划线

二、替换元素和非替换元素

根据元素的内容（是否浏览器会替换掉元素）类型划分

1、替换元素（replaced elements）

元素本身没有实际内容，浏览器根据元素的类型和属性来决定显示具体的内容。如

img标签，里面没有实体图片，看到的只是它的src，浏览器根据src来显示图片；

input标签，浏览器根据input的type值来选择显示input是输入框还是选择框还是其他类型。

常见的替换元素有img, input,iframe,video,audio,embed,canvas, object等

2、非替换元素：（non-replaced elements）

和替换元素相反，元素本身是有实际内容的，浏览器会直接将其内容显示出来，而不需要根据元素的类型和属性来判断到底显示什么内容。如

p标签，浏览器会直接显示p标签里的内容。

常见的非替换元素有div,p,pre,h1-h6,ul,a,form,table,span,label,strong等

三、行内级替换元素

1.跟其他行内级元素在同一行显示

2.可以设置宽高

常见的行内级替换元素有img,input,iframe,video,audio,object,canvas,embed等