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

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

  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

块级&行内元素总结的更多相关文章

  1. css position 和 块级/行内元素解释

    一.position 属性: static:元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中. relative:元素框偏移某个距离.元素仍保 ...

  2. 块级&行内（内联）元素

    行内元素列表 <a>标签可定义锚 <abbr>表示一个缩写形式 <acronym>定义只取首字母缩写 <b>字体加粗 <bdo>可覆盖默认的 ...

  3. CSS块元素、行内元素、行内块元素的转换

    一.块元素转行内元素:display:inline 二.行内元素转块元素:display:block div{ display: inline; /*无效 width: 500px; height: ...

  4. HTML中块级元素与行内元素

    一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档 ...

  5. HTML 行内元素和块级元素的理解及其相互转换

    块级元素:div, p(段落), form(表单), ul(无序列表), li(列表项), ol(有序列表), dl(定义列表), hr(水平分割线), menu(菜单列表), table(表格).. ...

  6. CSS里常见的块级元素和行内元素

    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...

  7. CSS行内元素和块级元素的居中

    一.水平居中 行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的marg ...

  8. C#基础-css行内元素、块级元素基础

    一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档 ...

  9. html 关于块级元素和行内元素

    常用的行内元素要记住:a.span.img.input.lable.select.strong.textarea 常用的块级元素要记住:div.h1~h6.dl.ul.ol 例如在一个title中,有 ...

随机推荐

  1. [Errno 14] PYCURL ERROR 7 - "couldn't connect to host"

    该问题就是防火墙的问题.关闭即可. /etc/init.d/iptables stop

  2. linux下查找指定时间内修改过的或新建的文件

    1.简单命令 # find -type f \( -newermt '2017-04-19 00:00' -a -not -newermt '2017-04-27 23:59' \) 2.简单实现(参 ...

  3. Java基础 - 变量转换

    在java中变量转发分为两种,隐式转换和强制转换 隐式转换: byte a = 10; int b = 20; byte c = a + b; // 该方法会报错,转换过程中字节数只能从小变大,不能从 ...

  4. [luogu3601]签到题

    [luogu3601]签到题 luogu 求\[\sum_{i=l}^ri-\phi(i)\] 一个朴素的想法是枚举l~r,根号求\(\phi\),显然这样是\((r-l)\sqrt r\),时间无法 ...

  5. Failed to decode response: zlib_decode(): data error Retrying with degraded；

    composer update的时候出现: Failed to decode response: zlib_decode(): data error Retrying with degraded: 执 ...

  6. Python赋值原理：Python无变量，万物皆对象

    有几个和以前的常见语言,比如c语言不同 改变变量数据不覆盖原来的 name = '苍老师' print(id(name)) name = '志玲' print(id(name)) 运行结果 73955 ...

  7. #!/usr/bin/python和#!/usr/bin/env 的区别（转）

    #!/usr/bin/python和#!/usr/bin/env 的区别   #!/usr/bin/python 通常在一个.py文件开头都会有这个语句 它只在Linux系统下生效,意思是当作为可执行 ...

  8. 简介windows的环境变量

    环境变量一般是指在操作系统中用来指定操作系统运行环境的一些参数,比如临时文件夹位置和系统文件夹位置等.这点有点类似于DOS时期的默认路径,当你运行某些程序时除了在当前文件夹中寻找外,还会到设置的默认路 ...

  9. python内置方法补充all

    all(iterable) 版本:该函数在python2.5版本首次出现,适用于2.5以上版本,包括python3,兼容python3版本. 说明:如果iterable的所有元素不为0.''.Fals ...

  10. 《机器学习实战》学习笔记第十一章 —— Apriori算法

    主要内容: 一.关联分析 二.Apriori原理 三.使用Apriori算法生成频繁项集 四.从频繁项集中生成关联规则 一.关联分析 1.关联分析是一种在大规模数据集中寻找有趣关系的任务.这些关系可以 ...