一、内联元素
1）内联元素特征
1、同排可以继续跟同类的标签
2、内容撑开宽度
3、不支持宽高
4、不支持上下的margin
5、代码换行被解析
2）内联元素代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span, em{
height: 50px;
background-color: yellow;
width: 500px;
margin: 100px;
}
</style>
</head>
<body>
<span>1</span>
<em>2</em>
</body>
</html>
内联元素有一个内容撑开宽度的特征代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span, em{
height: 50px;
background-color: yellow;
width: 500px;
margin: 100px;
}
</style>
</head>
<body>
<span>内联元素1内联元素1内联元素1内联元素1内联元素1内联元素1</span>
<em>内联元素2内联元素1内联元素1内联元素1内联元素1内联元素1</em>
</body>
</html>
3）显示结果
上边是第一段代码的展示结果，下图为第二段代码的展示结果。
在这里可以看到内联元素的宽被元素内的内容给撑开了。而且上下的margin值没有生效。
4）常用内联元素
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 - 定义变量
5）内联元素概述
内联元素又名行内元素(inline element)，和其对应的是块元素(block element)，都是html规范中的概念。内联元素的显示，为了帮助理解，可以形象的称为“文本模式”，即一个挨着一个，都在同一行按从左至右的顺序显示，不单独占一行。
时间： 2024-08-03 01:15:59