行内元素
HTML (超文本标记语言) 元素大多数都是行内元素或块级元素。一个行内元素只占据它对应标签的边框所包含的空间。行内元素依靠自己的字体大小或者是图像大小来支撑结构, 一般不可以设置宽度,高度以及对齐等属性。默认的宽度就是他本身的宽度。
<p>
This <span>span</span> is an inline element;
its background has been colored to display both
the beginning and end of the inline element's influence
</p>
<style>
span { background-color: #8ABB55; }
</style>
<a> | 锚元素 |
<abbr> | 缩写元素 |
<bdo> | 双向文本替代元素 |
<button> | 点击按钮 |
<b> | 粗体元素 |
<br> | 换行符号 |
<cite> | 引用元素 |
<code> | 呈现一段计算机代码 |
<dfn> | 标记被定义的术语 |
<em> | 斜体元素(表示强调) |
<i> | 斜体元素(不建议使用) |
<img> | 图像嵌入元素 |
<input> | 表单输入元素 |
<kbd> | 键盘输入元素 |
<label> | 界面中某个元素的说明 |
<map> | 定义一个图像映射 |
<object> | 嵌入对象元素 |
<q> | 引用短的文本 |
<samp> | 标识计算机程序输出 |
<select> | 提供选项菜单的控件 |
<script> | 嵌入或引用可执行脚本 |
<span> | 短语内容的通用行内容器 |
<sub> | 改变文本的位置 |
<sup> | 改变文本的位置 |
<small> | 使文本的字体变小一号 |
<strong> | 粗体显示 |
<textarea> | 多行纯文本编辑控件 |
<var> | 变量名称 |
注:<big> <tt> <acronym> 已被HTML5弃用
块级元素
块级元素占据其父元素(容器)的整个水平空间,垂直空间等于其内容高度,因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。块级元素可以自由的设置宽度和高度。
<p>
This paragraph is a block-level element;
its background has been colored to display
the paragraph's parent element.
</p>
<style>
p { background-color: #8ABB55; }
</style>
<address> | 联系方式信息 |
<article> | 文章内容 |
<aside> | 伴随内容 |
<blockquote> | 块引用 |
<dd> | 定义列表中定义条目描述 |
<div> | 文档分区 |
<dl> | 定义列表 |
<fieldset> | 表单元素分组 |
<figcaption> | 图文信息组标题 |
<figure> | 图文信息组 |
<footer> | 区段尾或页尾 |
<from> | 表单 |
<h1> ~ <h6> | 标题 |
<header> | 区段头或页头 |
<hgroup> | 标题组 |
<hr> | 水平分割线 |
<li> | 列表项目 |
<ol> | 有序列表 |
<p> | 段落 |
<pre> | 预格式化文本 |
<section> | 一个页面区段 |
<table> | 表格 |
<tbody> | 表格主体 |
<td> | 表格中的标准单元格 |
<tfoot> | 表格的页脚 |
<th> | 表头单元格 |
<thead> | 表格的表头 |
<tr> | 表格中的行 |
<ul> | 无序列表 |
行内块元素
行内块具有行内与块级元素的特点,可以相互转化,常见的行内块标签<img />、<input />、<td>。
类型转化
- 转换为块元素:display:block;
- 转换为行内元素:display:inline;
- 转换为行内块:display: inline-block;
HTML的元素嵌套关系
- 块级元素可以包含行内元素。
- 块级元素不一定可以包含块级元素 。比如div中可以包含div,但是p中不能包含div。
- 行内元素一般不能包含块级元素。比如span中不能包含div。但是a中却可以包含div。
备注:HTML5中 a > div 是合法的,但是 div > a > div 是不合法的,但是在HTML4.0.1中 a > div 仍然是不合法的。
●inline-block和block的唯一区别就是,不独占一行。
●行内元素的padding-top、 padding-bottom、 margin-top、 margin-bottom属性设置是无效的
●行内元素的padding-left、padding-right、 margin-left、 margin-right属性设置是有效的
●行内元素的padding-top、padding-bottom从 显示的效果上是增加的,但其实设置的是无效的。并不会对他周围的元素产生任何影响。
注:以上标签的具体用法与含义请参考MDN,MDN Web Docs (mozilla.org) 。