HTML之块级元素和行内元素

前言

通过参考相关资料和博客文章,总结对 HTML 中块级元素和行内元素的理解,方便学习回顾,若有错误,批评指正哈。

参考文章
引用图片来源

1、块级元素和行内元素的定义

块级元素:

  • 块级元素独占一行
  • 默认情况,元素宽度与父元素保持一致
  • 元素的高度、宽度、行高、内外边距都可设置

行内元素:

  • 可与其他元素共占一行
  • 内外边距的设置,仅可设置左右方向

主要区别:

默认情况下,行内元素不会以新行开始,而块级元素会新起一行。

其他细节参考图表:

01.png

:块级元素与行内元素的区别并不包含 是否可设置宽高、行高、内边距或外边距,因为行内元素中的 置换元素(又称替换元素) 也可以设置。置换元素参考

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> 定义可能的换行符
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。