块级元素与行内元素区别

Posted 2020-06-30

与行级元素相比，块级元素具有如下特点：
(1)、前后换行显示，块级元素比较“霸道”，默认状态下独占一整行。
(2)、块级元素常用作容器，即可以再“容纳”其它块级元素和行级元素，而行级元素一般用于组织内容，即只能用于“容纳”文字、图片、超链接等其他行级元素。
(3)、块级元素具有一定的高度和宽度，可以通过设置块级元素的width、height属性来控制。

 

从页面布局的角度，块级元素又可细分基本块级元素和常用于页面布局的块级元素。
基本的块级元素有：
1).标题标签<h1>~<h6>:表示一段文字的主题，并支持多层次的内容结构。
2).段落标签<p> :表示一段文字的内容。
3).水平线标签<hr />：表示一条水平线。

常用于布局的块级元素
1).有序列表<ol>-<li>:表示多个并列的列表项，它们之间有明显的先后顺序。
2).无序列表<ul>-<li>:表示多个并列的列表项，但它们之间没有先后顺序。
3).定义列表<dl>-<dt>-<dd>:表示描述某个术语或产品的定义或解释。
4).表格<table>:表示用于描述一个表格，它使用规整的数据显示。
5).表单<form>:表示用于描述需要用户输入的页面内容。
6).分区<div>:表示用于组织小区块的内容。为了方便管理，数目众多的小区块还需要放到一个大区块中进行布局。分区标签<div>常用于页面布局时对区块的划分，它相当于一个大的容器，可以容纳无序列表、有序列表、定义列表等块级标签。同时也可以容纳段落、标题、文字、图片等内容。
在实际开发中，<div>常用来进行分区，ul-li或ol-li实现无序或有序的项目列表，dl-dt-dd实现图文混编，table-tr-td实现规整数据的显示，由此，在页面局部布局中，形成了如下四种常用的局部块状布局结构：
(1)、div-ul(ol)-li:常用于分类导航或菜单等场合
(2)、div-dl-dt-dd:常用于图文混编场合
(3)、table-tr-td:常用于规整数据的显示场合
(4)、form-table-tr-td:常用于表单布局的场合

行级元素
行级标签也称为内联标签、行内标签。使用块级标签为页面“搭建完成组织结构”之后，往每个小区块添加内容时，就需要使用到行级标签.

行级标签:类似文本的显示方式，按“行”逐一显示，常用的行级标签有：

(1)、图像标签<img>:表示用于在网页中显示图片.
(2)、超链接标签<a>:
(3)、范围标签<span>:表示用于标识行内的某个范围.例如:实现行内某个部分的特殊设置以区分其他内容.
(4)、换行标签<br />:表示强制换行显示.
(5)、输入框标签<input>
(6)、多行文本域标签<textarea>