HTML5高级之块元素和内联元素

最新推荐文章于 2023-06-25 16:46:28 发布

Wendy-lxq

最新推荐文章于 2023-06-25 16:46:28 发布

阅读量3k

点赞数 4

分类专栏： HTML & HTML5

本文链接：https://blog.csdn.net/u010297791/article/details/53171151

版权

HTML & HTML5 专栏收录该内容

14 篇文章 6 订阅

订阅专栏

元素可以分为两种，一种是块元素，一种是内联（行内、内嵌）元素。块元素比如常用的div、p、h1等，内联元素比如常用的span、i、a等。接下来详细说明这两种元素各自的特性、使用方法以及两者之间的相互转化。

1、块元素的特性

1）默认独占一行
2）没有宽度时，默认撑满一行
3）支持所有css命令

如图所示：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            height: 30px;
            background-color: pink;
            margin-bottom:10px;
        }
        .div2{
            width: 200px;
            height: 30px;
            background-color: yellow;
            margin-bottom:10px;
        }
    </style>
</head>
<body>
    <div class="div1">div1  没有设置宽度</div>
    <div class="div2">div2  设置宽度</div>

</body>
</html>

常见的块元素有：

<address>//定义地址
<caption>//定义表格标题
<dd> //定义列表中定义条目
<div> //定义文档中的分区或节
<dl> //定义列表
<dt> //定义列表中的项目
<fieldset> //定义一个框架集
<form> //创建 HTML 表单
<h1> //定义最大的标题
<h2> // 定义副标题
<h3> //定义标题
<h4> //定义标题
<h5> //定义标题
<h6> //定义最小的标题
<hr> //创建一条水平线
<legend> //元素为 fieldset 元素定义标题
<li> //标签定义列表项目
<ol> //定义有序列表
<ul> //定义无序列表
<p> //标签定义段落
<pre> //定义预格式化的文本
<table> //标签定义 HTML 表格
<tbody> //标签表格主体（正文）
<td> //表格中的标准单元格
<tfoot> //定义表格的页脚（脚注或表注）
<th> //定义表头单元格
<thead> //标签定义表格的表头
<tr> //定义表格中的行

2、内联（行内、内嵌）元素的特性

1）同排可以继续跟同类的标签
2）内容撑开宽度
3）不支持宽高
4）不支持上下的margin
5）代码换行被解析

如图所示：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .span1{
            background-color: pink;
            width: 100px;
            height: 30px;
        }
        .span2{
            background-color: green;
            width: 100px;
            height: 40px;
        }
    </style>
</head>
<body>
    <span class="span1">span1</span>

    <span class="span2">span2</span>
</body>
</html>

常见的内联元素有：

<a> //标签可定义锚
<b> //字体加粗
<br> //换行
<cite> //引用进行定义
<em> //定义为强调的内容
<i> //斜体文本效果
<img> //向网页中嵌入一幅图像
<input> //输入框
<label> //标签为 input 元素定义标注（标记）
<select> // 创建单选或多选菜单
<span> //组合文档中的行内元素
<strong> //加粗
<sub> //定义下标文本
<sup> //定义上标文本
<textarea> //多行的文本输入控件

3、块元素和内联元素之间的转化

1）块元素转化为内联元素

添加：display:inline；语句就可以，它使块元素标签具备内联元素标签的特性。

2）内联元素转化为块元素

添加：display:block；语句就可以，他是内联元素具备块元素标签的特性。

注意：display是将标签转换为页面中显示的类型，不会改变标签本质。

4、内联块：display:inline-block

1）块元素能在一行上显示
2）内联元素支持宽高
3）没有宽度时，由内容撑开宽度

如图所示：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div, span{
            width: 100px;
            height: 40px;
            background-color: pink;
            display:inline-block;
        }
    </style>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <hr />
    <span>span1</span>
    <span>span2</span>
</body>
</html>

5、案例（写一个底部的分页）
所图所示：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页案例</title>
    <style>
        a{
            text-decoration: none;
            width:17px;/*内联元素无法设置宽度*/
            height: 20px;/*内联元素无法设置高度*/
            font:12px/20px "宋体";
            display: inline-block;/*内联-->块*/
            text-align: center;
            color: #68a3ff;
            border:1px solid #e0e1e2;
        }
        .pageBtn{
            width:64px;
        }
        a:hover,.active{
            background-color: #00A2E9;
            color:#fff;
        }

    </style>
</head>
<body>
    <div class="box">
        <a href="" class="pageBtn">上一页</a>
        <a href="">1</a>
        <a href="">2</a>
        <a href="" class="active">3</a>
        <a href="">4</a>
        <a href="">5</a>
        <a href="">6</a>
        <a href="">7</a>
        <a href="">8</a>
        <a href="">9</a>
        <a href="" class="pageBtn">下一页</a>
    </div>
</body>
</html>

Wendy-lxq

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML5高级之块元素和内联元素

元素可以分为两种，一种是块元素，一种是内联（行内、内嵌）元素。块元素比如常用的div、p、h1等，内联元素比如常用的span、i、a等。接下来详细说明这两种元素各自的特性、使用方法以及两者之间的相互转化。1、块元素的特性 1）默认独占一行 2）没有宽度时，默认撑满一行 3）支持所有css命令如图所示：代码：
复制链接

扫一扫