HTML三大元素——行内元素、块级元素、行内块级元素

目录

1.行内元素 

1.1 行内元素列表

1.2 特点

2.块级元素 

2.1 块级元素列表

2.2 特点

3.行内块级元素

3.1 特点

3.2 常见行内块级元素

4.可变元素（提及）

---

HTML元素大体被分为三种：行内元素、块级元素、行内块级元素

想实现三者之间的转换，可使用display属性：

1. display:inline;//行内元素
2. display:block;//块级元素
3. display:inline-block;//行内块级元素

1.行内元素 

1.1 行内元素列表

• a - 锚点
• abbr - 缩写
• acronym - 首字
• b - 粗体(不推荐)
• bdo-定义文字的方向
• big - 大字体
• br - 换行
• cite - 引用
• code - 计算机代码(在引用源码的时候需要)
• dfn - 定义字段
• em - 斜体强调
• font - 字体设定(不推荐)
• i - 斜体
• img - 图片
• input - 输入框
• kbd - 定义键盘文本
• label - 表格标签
• map-定义一个客户端图像映射
• object-定义一个嵌入的对象
• q - 短引用
• s - 中划线(不推荐)
• samp - 定义范例计算机代码
• select - 项目选择
• small - 小字体文本
• span - 常用内联容器，定义文本内区块
• strike - 中划线
• strong - 粗体强调
• sub - 下标
• sup - 上标
• script-定义客户端脚本
• textarea - 多行文本输入框
• tt - 电传文本
• u - 下划线
• var - 定义变量

1.2 特点

1. 可以与其他行内元素位于同一行，不会以新行开始
2. 高度、宽度不能设置
3. 行内元素的水平方向的内外边距（padding-left、padding-right、margin- left、margin-right ）都产生边距效果（可设置），但是竖直方向的内外边距（padding-top、padding-bottom、margin-top、margin-bottom）都不产生边距效果（不可设置）。padding设置上下左右都有效，即会撑大空间但是不会产生边距效果
4. 行内元素只能包含数据和其他行内元素，不可以包含块级元素

---

2.块级元素 

2.1 块级元素列表

• address -地址
• article-文章内容（HTML5）
• aside-伴随内容（HTML5）
• audio-音频播放（HTML5）
• blockquote-块引用
• canvas-绘制图形（HTML5）
• center-居中对齐块
• div-文档分区
• dir-目录列表
• dl-定义列表
• dd-定义列表中定义条目描述
• fieldset-表单元素分组
• figcaption-图文信息组标题（HTML5）
• figure- 图文信息组 (参照 figcaption)（HTML5）
• footer-区段尾或页尾（HTML5）
• form-交互表单
• header-区段头或页头（HTML5）
• hgroup-标题组（HTML5）
• h1,h2,h3,h4,h5,h6-标题级别1-6
• hr-水平分隔线
• menu-菜单列表
• noframes-对于不支持frame的浏览器显示此区块内容
• noscript-不支持脚本或禁用脚本时显示的内容
• ol -有序列表
• output-表单输出（HTML5）
• p -段落
• pre-预格式化文本
• section-一个页面区段（HTML5）
• table-表格
• tfoot-表脚注
• ul-无序列表
• video-视频（HTML5）

2.2 特点

1. 每个块级元素都从新的一行开始，其后的元素也另起一行（多个块级元素写在一起，默认排列方式：从上至下）
2. 元素的高度、宽度、行高、内外边距（水平、垂直方向都行）都可设置
3. 元素宽度默认和父元素的宽度一致（其父元素的100%）
4. 块级元素可以包含行内元素和其他块级元素

---

3.行内块级元素

3.1 特点

综合了行内元素和块级元素的特性，但是各有取舍

1. 和其他元素都在一行上
2. 元素的高度、宽度、行高、内外边距（水平、垂直方向都行）都可设置

3.2 常见行内块级元素

• img - 图片
• input - 输入框

---

4.可变元素（提及）

可变元素为根据上下文语境决定该元素行内元素或块内元素

•  applet - java applet
•  button - 按钮
•  del - 删除文本
•  iframe - inline frame
•  ins - 插入的文本
•  map - 定义一个客户端图像映射
•  object - 定义一个嵌入的对象
•  script - 定义客户端脚本