html内联(行内)元素、块级(块状)元素和行内块元素分类

原创
2018/12/11 16:15
阅读数 8K

HTML可以将元素分类方式分为内联(行内)元素、块级(块状)元素和行内块元素三种。

注:HTML是标签语言,那么既然是标签,就可以自己定义一些自己元素(如<wode>自定义的元素</wode>等),自定义元素浏览器默认解析为内联元素,为防止不同浏览器解析不同的问题,建议通过css的display属性来规定自定义元素的属性。相信使用过UI框架的朋友,会看到一些html手册以外的一些元素,其实这些都是一些自定义的元素。

首先需要说明的是,这三者是可以互相转换的,使用css的display属性能够将三者任意转换:

CSS display 属性

属性值

描述
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row 此元素会作为一个表格行显示(类似 <tr>)。
table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column 此元素会作为一个单元格列显示(类似 <col>)
table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption 此元素会作为一个表格标题显示(类似 <caption>)
inherit 规定应该从父元素继承 display 属性的值。

例:

<html>
<head>
<style type="text/css">
p {
  display: inline
}
div {
  display: none
}
</style>
</head>

<body>
<p>本例中的样式表把段落元素设置为内联元素。</p>

<p>而 div 元素不会显示出来!</p>

<div>div 元素的内容不会显示出来!</div>
</body>
</html>

显示结果:

1.内联(行内)元素

  行内元素最常使用的就是span,其他的只在特定功能下使用,修饰字体<b>和<i>标签,还有<sub>和<sup>这两个标签可以直接做出平方的效果,而不需要类似移动属性的帮助,很实用。

  行内元素特征:(1)设置宽高无效

         (2)对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间

         (3)不会自动进行换行

2.块级(块状)元素

  块状元素代表性的就是div,其他如p、nav、aside、header、footer、section、article、ul-li、address等等,都可以用div来实现。不过为了可以方便程序员解读代码,一般都会使用特定的语义化标签,使得代码可读性强,且便于查错。

  块状元素特征:(1)能够识别宽高

         (2)margin和padding的上下左右均对其有效

         (3)可以自动换行

         (4)多个块状元素标签写在一起,默认排列方式为从上至下

3.行内块元素

  行内块状元素综合了行内元素和块状元素的特性,但是各有取舍。因此行内块状元素在日常的使用中,由于其特性,使用的次数也比较多。

  行内块状元素特征:(1)不自动换行

           (2)能够识别宽高

           (3)默认排列方式为从左到右

 

4.同一类型的元素,到底该用哪个。

其实同一类型的元素,属性是一样的,显示出的效果也一样,用哪个都可以。可是为了代码的可读性,规范化,建议特定的场景用特定的元素。

比如:盒子容器用div,文字段落用p,反过来效果一样,但不符合规范。

 

 

块级元素和行内元素的分类

html中的块级元素:

标签 描述
<address> 定义地址。
<article> 定义文章。
<aside> 定义页面内容之外的内容。
<audio> 定义声音内容。
<blockquote> 定义长的引用。
<canvas> 定义图形。
<caption> 定义表格标题。
<dd> 定义定义列表中项目的描述。
<div> 定义文档中的节。
<dl> 定义定义列表。
<dt> 定义定义列表中的项目。
<details> 定义元素的细节。
<fieldset> 定义围绕表单中元素的边框。
<figcaption> 定义 figure 元素的标题。
<figure> 定义媒介内容的分组,以及它们的标题。
<footer> 定义 section 或 page 的页脚。
<form> 定义供用户输入的 HTML 表单。
<h1> to <h6> 定义 HTML 标题。
<header> 定义 section 或 page 的页眉。
<hr> 定义水平线。
<legend> 定义 fieldset 元素的标题。
<li> 定义列表的项目。
<menu> 定义命令的列表或菜单。
<meter> 定义预定义范围内的度量。
<nav> 定义导航链接。
<noframes> 定义针对不支持框架的用户的替代内容。
<noscript> 定义针对不支持客户端脚本的用户的替代内容。
<ol> 定义有序列表。
<output> 定义输出的一些类型。
<p> 定义段落。
<pre> 定义预格式文本。
<section> 定义 section。
<table> 定义表格。
<tbody> 定义表格中的主体内容。
<td> 定义表格中的单元。
<tfoot> 定义表格中的表注内容(脚注)。
<th> 定义表格中的表头单元格。
<thead> 定义表格中的表头内容。
<time> 定义日期/时间。
<tr> 定义表格中的行。
<ul> 定义无序列表。

html中的行内元素:

标签 描述
<a> 定义锚。
<abbr> 定义缩写。
<acronym> 定义只取首字母的缩写。
<b> 定义粗体字
<bdo> 定义文字方向。
<big> 定义大号文本。
<br> 定义简单的折行。
<button> 定义按钮 (push button)。
<cite> 定义引用(citation)。
<code> 定义计算机代码文本。
<command> 定义命令按钮。
<dfn> 定义定义项目。
<del> 定义被删除文本。
<em> 定义强调文本。
<embed> 定义外部交互内容或插件。
<i> 定义斜体字。
<img> 定义图像。
<input> 定义输入控件。
<kbd> 定义键盘文本。
<label> 定义 input 元素的标注。
<map> 定义图像映射。
<mark> 定义有记号的文本。
<objec> 定义内嵌对象。
<progress> 定义任何类型的任务的进度。
<q> 定义短的引用。
<samp> 定义计算机代码样本。
<select> 定义选择列表(下拉列表)。
<small> 定义小号文本。
<span> 定义文档中的节。
<strong> 定义强调文本。
<sub> 定义下标文本。
<sup> 定义上标文本。
<textarea> 定义多行的文本输入控件。
<time> 定义日期/时间。
<tt> 定义打字机文本。
<var> 定义文本的变量部分。
<video> 定义视频。
<wbr> 定义可能的换行符。

注:当你不知道某一元素为什么属性时,可通过F12调用浏览器调试器查看

图例:

展开阅读全文
加载中

作者的其它热门文章

打赏
1
1 收藏
分享
打赏
0 评论
1 收藏
1
分享
返回顶部
顶部