行内元素与块级元素区别

骑猪看日落 2022-08-01 01:30 172阅读 0赞

## 行内元素 ##

行内元素是在一行进行展示的元素，在HTML的流式布局范围内，若在可视范围内一行不能全部展示则会自动换行。

行内元素不能设置高宽。

行内元素设置样式display:block即可转换为块级元素。

## 块级元素 ##

块级元素会完全占据一行，后面跟随的元素则会换行后在进行展示。

**块级元素列表**

<table> 
 <tbody> 
 <tr> 
 <td> 
 <table> 
 <tbody> 
 <tr> 
 <td> &lt;address&gt; </td> 
 </tr> 
 </tbody> 
 </table> </td> 
 <td> 
 <table> 
 <tbody> 
 <tr> 
 <td> 定义地址 </td> 
 </tr> 
 </tbody> 
 </table> </td> 
 </tr> 
 <tr> 
 <td> &lt;caption&gt; </td> 
 <td> 定义表格标题 </td> 
 </tr> 
 <tr> 
 <td> &lt;dd&gt; </td> 
 <td> 定义列表中定义条目 </td> 
 </tr> 
 <tr> 
 <td> &lt;div&gt; </td> 
 <td> 定义文档中的分区或节 </td> 
 </tr> 
 <tr> 
 <td> &lt;dl&gt; </td> 
 <td> 定义列表 </td> 
 </tr> 
 <tr> 
 <td> &lt;dt&gt; </td> 
 <td> 定义列表中的项目 </td> 
 </tr> 
 <tr> 
 <td> &lt;fieldset&gt; </td> 
 <td> 定义一个框架集 </td> 
 </tr> 
 <tr> 
 <td> &lt;form&gt; </td> 
 <td> 创建 HTML 表单 </td> 
 </tr> 
 <tr> 
 <td> &lt;h1&gt; </td> 
 <td> 定义最大的标题 </td> 
 </tr> 
 <tr> 
 <td> &lt;h2&gt; </td> 
 <td> 
 <table> 
 <tbody> 
 <tr> 
 <td></td> 
 <td> 定义副标题 </td> 
 </tr> 
 </tbody> 
 </table> </td> 
 </tr> 
 <tr> 
 <td> &lt;h3&gt; </td> 
 <td> 定义标题 </td> 
 </tr> 
 <tr> 
 <td> &lt;h4&gt; </td> 
 <td> 定义标题 </td> 
 </tr> 
 <tr> 
 <td> &lt;h5&gt; </td> 
 <td> 定义标题 </td> 
 </tr> 
 <tr> 
 <td> &lt;h6&gt; </td> 
 <td> 定义最小的标题 </td> 
 </tr> 
 <tr> 
 <td> &lt;hr&gt; </td> 
 <td> 创建一条水平线 </td> 
 </tr> 
 <tr> 
 <td> &lt;legend&gt; </td> 
 <td> 元素为 fieldset 元素定义标题 </td> 
 </tr> 
 <tr> 
 <td> &lt;li&gt; </td> 
 <td> 标签定义列表项目 </td> 
 </tr> 
 <tr> 
 <td> &lt;noframes&gt; </td> 
 <td> 为那些不支持框架的浏览器显示文本，于 frameset 元素内部 </td> 
 </tr> 
 <tr> 
 <td> &lt;noscript&gt; </td> 
 <td> 定义在脚本未被执行时的替代内容 </td> 
 </tr> 
 <tr> 
 <td> &lt;ol&gt; </td> 
 <td> 定义有序列表 </td> 
 </tr> 
 <tr> 
 <td> &lt;ul&gt; </td> 
 <td> 定义无序列表 </td> 
 </tr> 
 <tr> 
 <td> &lt;p&gt; </td> 
 <td> 标签定义段落 </td> 
 </tr> 
 <tr> 
 <td> &lt;pre&gt; </td> 
 <td> 定义预格式化的文本 </td> 
 </tr> 
 <tr> 
 <td> &lt;table&gt; </td> 
 <td> 标签定义 HTML 表格 </td> 
 </tr> 
 <tr> 
 <td> &lt;tbody&gt; </td> 
 <td> 标签表格主体（正文） </td> 
 </tr> 
 <tr> 
 <td> &lt;td&gt; </td> 
 <td> 表格中的标准单元格 </td> 
 </tr> 
 <tr> 
 <td> &lt;tfoot&gt; </td> 
 <td> 定义表格的页脚（脚注或表注） </td> 
 </tr> 
 <tr> 
 <td> &lt;th&gt; </td> 
 <td> 定义表头单元格 </td> 
 </tr> 
 <tr> 
 <td> &lt;thead&gt; </td> 
 <td> 标签定义表格的表头 </td> 
 </tr> 
 <tr> 
 <td> &lt;tr&gt; </td> 
 <td> 定义表格中的行 </td> 
 </tr> 
 </tbody> 
</table>

**行内元素列表**

<table> 
 <tbody> 
 <tr> 
 <td> &lt;a&gt; </td> 
 <td> 标签可定义锚 </td> 
 </tr> 
 <tr> 
 <td> &lt;abbr&gt; </td> 
 <td> 表示一个缩写形式 </td> 
 </tr> 
 <tr> 
 <td> &lt;acronym&gt; </td> 
 <td> 定义只取首字母缩写 </td> 
 </tr> 
 <tr> 
 <td> &lt;b&gt; </td> 
 <td> 字体加粗 </td> 
 </tr> 
 <tr> 
 <td> &lt;bdo&gt; </td> 
 <td> 可覆盖默认的文本方向 </td> 
 </tr> 
 <tr> 
 <td> &lt;big&gt; </td> 
 <td> 大号字体加粗 </td> 
 </tr> 
 <tr> 
 <td> &lt;br&gt; </td> 
 <td> 换行 </td> 
 </tr> 
 <tr> 
 <td> &lt;cite&gt; </td> 
 <td> 引用进行定义 </td> 
 </tr> 
 <tr> 
 <td> &lt;code&gt; </td> 
 <td> 定义计算机代码文本 </td> 
 </tr> 
 <tr> 
 <td> &lt;dfn&gt; </td> 
 <td> 定义一个定义项目 </td> 
 </tr> 
 <tr> 
 <td> &lt;em&gt; </td> 
 <td> 定义为强调的内容 </td> 
 </tr> 
 <tr> 
 <td> &lt;i&gt; </td> 
 <td> 斜体文本效果 </td> 
 </tr> 
 <tr> 
 <td> &lt;img&gt; </td> 
 <td> 向网页中嵌入一幅图像 </td> 
 </tr> 
 <tr> 
 <td> &lt;input&gt; </td> 
 <td> 输入框 </td> 
 </tr> 
 <tr> 
 <td> &lt;kbd&gt; </td> 
 <td> 定义键盘文本 </td> 
 </tr> 
 <tr> 
 <td> &lt;label&gt; </td> 
 <td> 标签为 input 元素定义标注（标记） </td> 
 </tr> 
 <tr> 
 <td> &lt;q&gt; </td> 
 <td> 定义短的引用 </td> 
 </tr> 
 <tr> 
 <td> &lt;samp&gt; </td> 
 <td> 定义样本文本 </td> 
 </tr> 
 <tr> 
 <td> &lt;select&gt; </td> 
 <td> 创建单选或多选菜单 </td> 
 </tr> 
 <tr> 
 <td> &lt;small&gt; </td> 
 <td> 呈现小号字体效果 </td> 
 </tr> 
 <tr> 
 <td> &lt;span&gt; </td> 
 <td> 组合文档中的行内元素 </td> 
 </tr> 
 <tr> 
 <td> &lt;strong&gt; </td> 
 <td> 语气更强的强调的内容 </td> 
 </tr> 
 <tr> 
 <td> &lt;sub&gt; </td> 
 <td> 定义下标文本 </td> 
 </tr> 
 <tr> 
 <td> &lt;sup&gt; </td> 
 <td> 定义上标文本 </td> 
 </tr> 
 <tr> 
 <td> &lt;textarea&gt; </td> 
 <td> 多行的文本输入控件 </td> 
 </tr> 
 <tr> 
 <td> &lt;tt&gt; </td> 
 <td> 打字机或者等宽的文本效果 </td> 
 </tr> 
 <tr> 
 <td> &lt;var&gt; </td> 
 <td> 定义变量 </td> 
 </tr> 
 </tbody> 
</table>

**可变元素素列表--可变元素为根据上下文语境决定该元素为块元素或者内联元素**

<table> 
 <tbody> 
 <tr> 
 <td> &lt;button&gt; </td> 
 <td> 按钮 </td> 
 </tr> 
 <tr> 
 <td> &lt;del&gt; </td> 
 <td> 定义文档中已被删除的文本 </td> 
 </tr> 
 <tr> 
 <td> &lt;iframe&gt; </td> 
 <td> 创建包含另外一个文档的内联框架（即行内框架） </td> 
 </tr> 
 <tr> 
 <td> &lt;ins&gt; </td> 
 <td> 标签定义已经被插入文档中的文本 </td> 
 </tr> 
 <tr> 
 <td> &lt;map&gt; </td> 
 <td> 客户端图像映射（即热区） </td> 
 </tr> 
 <tr> 
 <td> &lt;object&gt; </td> 
 <td> object对象 </td> 
 </tr> 
 <tr> 
 <td> &lt;script&gt; </td> 
 <td> 客户端脚本 </td> 
 </tr> 
 </tbody> 
</table>

##  demo ##

![Center][]

<html>
 	<head>
 		<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
 		<style type="text/css">
 			input{
 				width:500px;
 			}
 			div{
 				margin:5px 0px;
 				width:500px;
 				border:1px solid #888888;
 			}
 			
 		</style>
 	</head>
 
 	<body>
 		<input type="text" value="行内元素">
 		<input type="text" value="行内元素">
 		<input type="text" value="行内元素">
 		<div>块级元素</div>
 		<div>块级元素</div>
 		<input type="text" value="转换为块级元素的行内元素" style="display:block;">
 		<input type="text" value="转换为块级元素的行内元素" style="display:block;">
 		<div>块级元素</div>
 		<div>块级元素</div>
 	</body>
 </html>

[Center]: /images/20220731/4d3654bf507b4730abc4a2730836512a.png