一、块级元素与行内元素的区别
块级元素与行内元素有几个关键区别：
- 格式
默认情况下:
- 块级元素会新起一行；
- 行内元素不会以新行开始.
- 内容模型
- 一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。
- 一般情况下，行内元素只能包含数据和其他行内元素。
二、块级元素列表
1. 非h5块级元素
- 页面区域划分元素
- div
- p
- h1~h6
- 列表相关元素
- ul
- ol
- li 注意 li是mdn文档中明确说明的块级元素
- dl
- dt
- dd
- 表格相关元素：注意 caption、thead、tbody、tr没有出现在mdn文档说明的块级元素中，但应该是块级元素
- table
- caption
- thead
- tbody
- tfoot
- tr
- 表单相关元素
- form
- fieldset(表单元素分组)
- legend(fieldset标题) 注意mdn文档上没它，不过它也应该是块级元素
- 其他
- blockquote(块引用)
- address(联系方式信息)
- pre(预格式化文本)
- hr(水平分割线)
- noscript(不支持脚本或禁用脚本时显示的内容)
2. h5块级元素
-
页面区域划分元素
- header
- footer
- nav
- main
- section
- article
- aside
- hgroup(标题组)
-
图文相关元素
- figure(图文信息组)
- figurecaption(图文信息标题组)
-
多媒体元素
- audio （mdn英文文档上没有，中文文档上有，肯定是)
- video
-
绘图元素
- canvas
-
表单相关元素
- output(表单输出)
三.行内元素列表
- 特殊文本
- b (粗体元素，应用css属性代替。不要将其与strong、em或mark元素混淆。 strong表示某些重要性的文本，em强调文本，mark表示某些相关性的文本。b元素不传达这样的特殊语义信息,*仅在没有其他合适的元素时使用)
- big（使字体大一号，已废弃）
- strong
- i(斜体显示因某些原因需要区分普通文本的一系列文本,只在没有更适合的语义元素表示时使用)
- em
- small
- tt(电报文本元素，已废弃)
- abbr(缩写)
- acronym(缩写，已废弃，应使用abbr)
- cite（引用，相似的还有适合长引用的blockquote,适合行内引用的q）
- dfn(术语的定义)
- kbd(键盘输入元素)
- code(呈现一段计算机代码)
- samp（标识计算机文字输出）
- var（表示变量的名称或用户提供的值）
- bdo(用于覆盖当前文本的朝向,具属性dir)
- sub（下标）
- sup（上标）
- 特殊内联区域
- a
- br
- img
- map(与area一起定义一个图像映射)
- object
- q
- script
- span
- 表单元素
- button
- input
- label
- select
- textarea
- 其他
- time 注意：mdn英文文档有，中文文档没有,肯定是行内元素 （以s或ms为单位的时间的值）
- ifame 注意：中英文文档上都没有它，但它应该是行内元素
四.一些比较容易弄混的元素
1. list
虽然display为list-item，但它其实是块级元素，参见https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
2. iframe1
它确实是内联元素，把它和span写在一起，并不会另起一行。
参考资料
https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Block-level_elements
https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Inline_elemente