块级&行内元素总结

一、块级元素与行内元素的区别

块级元素与行内元素有几个关键区别：

1. 格式
   默认情况下:

• 块级元素会新起一行；
• 行内元素不会以新行开始.

1. 内容模型

• 一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。
• 一般情况下，行内元素只能包含数据和其他行内元素。

二、块级元素列表

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

转载于:https://www.cnblogs.com/Bonnie3449/p/9221223.html