首页 > 代码库 > 4、内联元素

4、内联元素

2024-09-11 07:19:50   219人阅读

一、内联元素

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规范中的概念。内联元素的显示，为了帮助理解，可以形象的称为“文本模式”，即一个挨着一个，都在同一行按从左至右的顺序显示，不单独占一行。

4、内联元素


联系
我们