前言
通过参考相关资料和博客文章,总结对 HTML 中块级元素和行内元素的理解,方便学习回顾,若有错误,批评指正哈。
1、块级元素和行内元素的定义
块级元素:
- 块级元素独占一行
- 默认情况,元素宽度与父元素保持一致
- 元素的高度、宽度、行高、内外边距都可设置
行内元素:
- 可与其他元素共占一行
- 内外边距的设置,仅可设置左右方向
主要区别:
默认情况下,行内元素不会以新行开始,而块级元素会新起一行。
其他细节参考图表:
注:块级元素与行内元素的区别并不包含 是否可设置宽高、行高、内边距或外边距,因为行内元素中的 置换元素(又称替换元素) 也可以设置。置换元素参考
2、块级元素和行内元素的分类:
块级元素
元素 | 描述 |
---|---|
<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> | 定义表格中的表头内容 |
<tr> | 定义表格中的行 |
<ul> | 定义无序列表 |
行内元素
元素 | 描述 |
---|---|
<a> | 定义锚 |
<abbr> | 定义缩写 |
<b> | 定义粗体字 |
<bdo> | 定义文字方向 |
<br> | 定义简单的这行 |
<button> | 定义按钮 |
<cite> | 定义 引用 |
<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> | 定义可能的换行符 |