Dotcpp  >  编程教程  >  HTML语法  >  HTML内联元素和块级元素

HTML内联元素和块级元素

点击打开在线编译器,边学边练

HTML 标签(元素)可以分为两个类别,分别是块级元素和内联元素(也叫行内元素)。

一、内联元素(inline)

1. 内联元素的概念

内联元素(html规范中的概念)英文:inline element,其中文叫法有多种,如:内联元素、内嵌元素、行内元素、直进式元素等。基本上没有统一的翻译。另外提到内联元素,通常会涉及到的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。


2. 内联元素的特性

①和相邻的内联元素在同一行;

②宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变;

③宽度就是它的文字或图片的宽度,不可改变

④内联元素只能容纳文本或者其他内联元素


对于行内元素的使用,需要注意如下几点:

• 设置宽度 width 无效;

• 设置高度 height 无效,但可以通过 line-height 来设置行高;

• 可以设置 margin 外边距,但只对左右外边距有效,上下无效;

• 设置 padding 内边距时,只有左右 padding 有效,上下则无效,需要注意的是元素范围是增大了,但是对元素周围的内容是没影响的;

• 可以通过 display 属性将元素在行内元素和块级元素之间进行切换。


3. HTML标签中常见的内联元素

 a锚点
abbr缩写
acronym首字母缩略词
b粗体
bdo – bidi override用来覆盖默认的文本方向
big大字体
br换行
cite引用
code计算机代码(在引用源码的时候需要)
dfn定义字段
em强调
font字体设定(不推荐)
i斜体
img图片
input输入框
kbd定义键盘文本
label表格标签
q短引用
s中划线(不推荐)
samp定义范例计算机代码
select项目选择
small小字体文本
span常用内联容器,定义文本内区块
strike中划线
strong粗体强调
sub下标
sup上标
textarea多行文本输入框
tt电传文本
u下划线
var定义变量


二、块级元素(block)

1. 块级元素的概念

块级元素(block element),和其对应的是内联元素(inline element),都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始,相邻的块级元素将会在不同行显示。


2. 块级元素的特性

①总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;

②宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

③如果省略块级元素的宽度,那么它的宽度默认为当前浏览器窗口的宽度;

④块级元素中可以包含其它的内联元素和块级元素。


3. HTML标签中常见的块级元素

address地址
blockquote块引用
center居中对齐块
dir目录列表
div常用块级容器,也是css layout的主要标签
dl定义列表
fieldsetform控制组
form交互表单
h1大标题
h2副标题
h33级标题
h44级标题
h55级标题
h66级标题
hr水平分隔线
isindexinput prompt
menu菜单列表
noframesframes可选内容,(对于不支持frame的浏览器显示此区块内容)
noscript可选脚本内容(对于不支持script的浏览器显示此内容)
ol排序表单
p 段落
pre格式化文本
table表格
ul非排序列表(无序列表)



本文固定URL:https://www.dotcpp.com/course/1113

Dotcpp在线编译      (登录可减少运行等待时间)