块级元素和行内元素

·  阅读 150

一、块级元素

块级元素占据其父元素的整个空间,因此创建了一个“块”。

块级元素只能出现在 <body> 元素内。

默认情况下,块级元素会新起一行。

一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。

块级元素列表:

  1. <address>联系方式信息。

  2. <article> 文章内容。

  3. <aside> 伴随内容。

  4. <audio> 音频播放。

  5. <blockquote>块引用。

  6. <canvas> 绘制图形。

  7. <dd>定义列表中定义条目描述。

  8. <div>文档分区。

  9. <dl>定义列表。

  10. <fieldset>表单元素分组。

  11. <figcaption> 图文信息组标题

  12. <figure> 图文信息组 (参照 <figcaption>)。

  13. <footer> 区段尾或页尾。

  14. <form>表单。

  15. <h1>~<h6> 标题级别 1-6.

  16. <header> 区段头或页头。

  17. <hgroup> 标题组。

  18. <hr>水平分割线。

  19. <noscript>不支持脚本或禁用脚本时显示的内容。

  20. <ol>有序列表。

  21. <output> 表单输出。

  22. <p>行。

  23. <pre>预格式化文本。

  24. <section> 一个页面区段。

  25. <table>表格。

  26. <tfoot>表脚注。

  27. <ul>无序列表。

  28. <video> 视频

二、行内元素(内联元素)

一个行内元素只占据它对应标签的边框所包含的空间。

不同于块级元素可以包含行内元素和其他块级元素,而行内元素一般情况下只能包含数据和其他行内元素。

默认情况下,行内元素不会以新行开始。

行内元素列表:

  1. <a> 锚元素。

  2. <button> 按钮。

  3. <input> 输入(表单输入)元素。

  4. <label> 标签。

  5. <select>表示一个提供选项菜单的控件。

  6. <textarea> 表示一个多行纯文本编辑控件。

  7.  <br> 在文本中生成一个换行(回车)符号。

  8. <img> 图像嵌入元素。

  9. <script> 用于嵌入或引用可执行脚本。

  10. <span> 短语内容的通用行内容器,并没有任何特殊语义。

  11. <sub> 定义了一个文本区域,与主要的文本相比,应该展示得更并且更小。

  12. <sup> 定义了一个文本区域,与主要的文本相比,应该展示得更并且更小。

  13. <strong> 表示文本十分重要,一般用粗体显示。

  14. <q> 表示一个封闭的并且是短的行内引用的文本. 这个标签是用来引用短的文本,所以请不要引入换行符; 对于长的文本的引用请使用 <blockquote> 替代.

  15. <code> 呈现一段计算机代码. 默认情况下, 它以浏览器的默认等宽字体显示。    

  16. <map><area> 属性一起使用来定义一个图像映射(一个可点击的链接区域).

  17. <object> 表示引入一个外部资源,这个资源可能是一张图片,一个嵌入的浏览上下文,亦或是一个插件所使用的资源。

  18. <b> 提醒注意(Bring Attention To)元素,这个元素过去被认为是粗体(Boldface)元素,并且大多数浏览器仍然将文字显示为粗体。但不应用于显示粗体文字。              

  19. <i>  用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等,它的内容通常以斜体显示。    

  20. <small> 將使文本的字体变小一号。在HTML5中,除了它的样式含义,这个元素被重新定义为表示边注释和附属细则,包括版权和法律文本。    

  21. <abbr> 用于代表缩写,并且可以通过可选的 title 属性提供完整的描述。若使用 title 属性,则它必须且仅可包含完整的描述内容。    

  22. <cite> 引用( Citation)标签表示一个作品的引用,且必须包含作品的标题。      

  23. <dfn> 表示术语的一个定义。

  24. <em> 着重元素,标记出需要用户着重阅读的内容, 元素是可以嵌套的,嵌套层次越深,则其包含的内容被认定为越需要着重阅读。

  25. <kbd> 键盘输入元素,用于表示用户输入,它将产生一个行内元素,以浏览器的默认monospace字体显示。

  26. <samp> 用于标识计算机程序输出。

  27. <var> 表示数学表达式或编程上下文中的变量名称。尽管该行为取决于浏览器,但通常使用当前字体的斜体形式显示。

  28. <bdo> 双向文本替代元素,改写了文本的方向性, 使文本以不同的方向渲染呈现出来。

HTML 标准中块级元素和行内元素的区别至高出现在 4.01 标准中。

在 HTML5,这种区别被一个更复杂的内容类别代替。

”块级“类别大致相当于 HTML5 中的流内容类别,而”行内“类别相当于 HTML5 中的措辞内容类别,不过除了这两个还有其他类别。

参考资料:块级元素行内元素

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改