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> 定义可能的换行符
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,425评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,058评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,186评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,848评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,249评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,554评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,830评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,536评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,239评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,505评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,004评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,346评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,999评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,060评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,821评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,574评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,480评论 2 267