说到HTML分类,其实HTML分类标准有很多种。本文介绍按默认样式分类。
块级元素 block
顾名思义,所谓的块级元素就是占据一块区域,占据整行,有自己的宽高等尺寸。
块级元素的特点:
- 块级元素会独占一行;
- 高度,行高,外边距和内边距都可以单独设置;
- 宽度默认是容器的100%;
- 可以容纳内联元素和其他的块级元素。
块级元素列表:
<address>//定义地址
<article> //文章内容
<aside> //伴随内容
<caption>//定义表格标题
<dd> //定义列表中定义条目
<div> //定义文档中的分区或节
<dl> //定义列表
<dt> //定义列表中的项目
<figcaption> //图文信息组标题
<fieldset> //定义一个框架集
<form> //创建 HTML 表单
<figure> //图文信息组
<h1> //定义最大的标题
<h2> // 定义副标题
<h3> //定义标题
<h4> //定义标题
<h5> //定义标题
<h6> //定义最小的标题
<hr> //创建一条水平线
<legend> //元素为 fieldset 元素定义标题
<li> //标签定义列表项目
<noframes> //为那些不支持框架的浏览器显示文本,于 frameset 元素内部
<noscript> //定义在脚本未被执行时的替代内容
<ol> //定义有序列表
<ul> //定义无序列表
<p> //标签定义段落
<pre> //定义预格式化的文本
<table> //标签定义 HTML 表格
<tbody> //标签表格主体(正文)
<td> //表格中的标准单元格
<tfoot> //定义表格的页脚(脚注或表注)
<th> //定义表头单元格
<thead> //标签定义表格的表头
<tr> //定义表格中的行
<output> //表单输出
<audio> //音频播放
<footer> //区段尾或页尾 <blockquote> //块引用
<canvas> //绘制图形
<section> //一个页面区段
<header> //区段头或页头
<hgroup> //标题组
<video> //视频
MDN 参考链接:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Block-level_elements
行内元素 inline
inline有时也被称为内联元素,这种元素不一定有规则形状,也不会独占一行,会与其他元素和谐的挤在一起,没有自己的宽高,仅仅依靠自己的字体大小或者是图像大小来支撑结构,不能设置宽高对齐等属性。
行内元素的特点:
- 和相邻的行内元素在一行上;
- 高度和宽度无效,但是水平方向上的padding和margin可以设置,垂直方向上的无效;
- 默认的宽度就是它本身的宽度;
- 行内元素只能容纳纯文本或者是其他的行内元素(a标签除外)。
注意事项:
- 只有文字才能组成段落,因此类似
<p>
,<h1>~<h6>
,<dt>
等里面不能放块级元素,因为它们都是文字块级标签,里面不能再存放其他的块级标签; - 链接里面不能再存放链接。
行内元素列表:
b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea
MDN 参考链接:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Inline_elements
行内块级元素 inline-block
这种元素也被称为内联块级元素,和inline元素一样与其他元素堆在一行内,和谐共处,对外表现看起来像一个inline元素,对内表现为block,可以设置宽高等尺寸。也可以在一行中放置多个行内块级元素.
行内块级元素的特点:
- 和相邻的行内元素(行内块)在一行上,但是中间会有空白的间隙;
- 默认的宽度就是本身内容的宽度;
- 高度,行高,内边距和外边距都可以设置。
注意事项:
在行内块级元素中有几个特殊的标签,<img/>
,<input/>
,<td/>
,可以设置它们的宽度高度以及对齐属性.
元素类型转换display
display:block;
定义元素为块级元素;display : inline;
定义元素为行内元素;display:inline-block;
定义元素为行内块级元素。
总结
不管块级元素还是行内元素,区别主要是三个方面:
- 排列方式:块级元素会独占一行,而内联元素和内联块元素则会在一行内显示;
- 宽高边距设置:块级元素和内联块级元素可以设置 width、height属性,而内联元素设置无效;
- 默认宽度:块级元素的 width 默认为100%,而内联元素则是根据其自身的内容或子元素来决定其宽度。
© 版权声明
本文内容均基于《CC BY-NC-SA 4.0》协议创作或转载,仅供学习和研究使用,不得用于任何商业用途,您可以转载分享,但同时需保留原文链接。
THE END
请我喝怡宝