HTML块级元素和行内元素,行内块元素(通俗易懂)

✨前言✨
  本篇文章主要讲解一下html标签中的块级元素,主要包括块级元素的概念、作用、特点,还有就是块级元素有哪些标签等内容。

欢迎点赞 收藏 ⭐留言评论 私信必回哟
博主将持续更新学习记录收获,友友们有任何问题可以在评论区留言


文章目录

  • 一,块级元素
  • 二,行内元素
  • 三,行内块元素
  • 四,块级元素和行内元素的转换

一,块级元素

块级元素,它独占一行,可以设置宽度、高度以及边距等样式属性。它适合用于创建页面的大块结构,例如页面的主体区域、容器、布局等。

通常有这几个特点:

  • 独占一行
  • 可以设置宽度,高度,margin,padding
  • 宽度默认所在容器的宽度。
  • 可以容纳内联元素和块级元素
  • 注意

 一些文字级标签不能放块元素。例如:

<p><h1>~<h6><dt>

常见的块级元素:

标签 作用
table 定义表格
h1 ~ h6 定义标题
hr 定义一条水平线
p 定义段落
li 标签定义列表项目
ul 定义无序列表
ol 定义有序列表
dd 定义列表中定义条目
div 定义文档中的分区或节
dl 定义列表
dt 定义列表中的项目
form 创建 HTML 表单
caption 定义表格标题
address 定义地址
fieldset 定义一个框架集

常用标签代码演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .blocks{
            /*使用内部样式,设置一个背景颜色*/
            background-color: #B4E2FB;
        }
    </style>
</head>
<body>
<p class="blocks">我是p 我是块级元素</p>
<h1 class="blocks">我是h1 我是块级元素</h1>
<div class="blocks">我是div 我是块级元素</div>
<ul class="blocks">我是ul 我是块级元素</ul>
<ol class="blocks">我是ol 我是块级元素</ol>
<dl class="blocks">我是dl 我是块级元素</dl>
<li class="blocks">我是li 我是块级元素</li>
</body>
</html>

浏览效果:

HTML块级元素和行内元素,行内块元素(通俗易懂)_第1张图片


二,行内元素

行内元素,它不会独占一行,宽度默认由其内容决定。它适合用于对文本或其他行内元素进行样式化、标记或包裹。

通常有这几个特点:

  • 与其他行内元素并排
  • 设置宽高无效
  • 默认的宽度就是文本内容的宽度
  • 水平方向的 padding 和 margin 属性可以使用。
  • 只能容纳文本级元素和内联元素
  • 注意:

 a 标签可以放块级元素,但是连接里面不能再放连接

常见的行内元素:

标签 作用
a 标签定义超链接
span 组合文档中的行内元素
br 定义换行
select 创建单选或多选菜单
abbr 表示一缩写形式
acronym 定义只取首字母缩写
b 定义字体缩写
bdo 可覆盖默认的文本方向
big 定义大号字体加粗
code 定义计算机代码文本
label 标签
small 定义小号字体

常用标签代码演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .inlines{
            /*使用内部样式,设置一个背景颜色*/
            background-color: #B4E2FB;
        }
    </style>
</head>
<body>
<a class="inlines">我是a 我是行内元素</a>
<span class="inlines">我是span 我是行内元素</span>
<label class="inlines">我是label 我是行内元素</label>
<select class="inlines">我是select 我是行内元素</select>
</body>
</html>

浏览效果:

在这里插入图片描述


三,行内块元素

行内块元素从文字上看像块级元素和行内元素结合似的,其实比较特殊,可以设置宽高属性,这种就称为行内块元素。

比如:

<input><img>

通常有这几个特点:

  • 默认宽度是内容宽度
  • 宽度,高度,行高,margin,padding 都可以设置
  • 和行内元素同一行,之间会留白。

代码样式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .inlines{
            /*使用内部样式,设置一个背景颜色*/
            background-color: #B4E2FB;
            /*设置宽*/
            width: 100px;
            /*设置高*/
            height: 100px;
        }
    </style>
</head>
<body>
<img src="img.png" class="inlines">我是td 我是行内块元素</img>
</body>
</html>

浏览效果:

在这里插入图片描述


四,块级元素和行内元素的转换

display 属性

通过 display 属性转换,其中 display 有三个值:

  • inline:

    • 值为 inline 将变成行内元素,比如 div

    • 不能设置宽高,和行内元素并排

  • block:

    • 值为 block 的,比如 span

    • 能设置宽高(填充父级),独占一行。

  • inline-block

    • 值为 inline-block 也就是变成行内块元素

代码演示:

小练习:这是我们将< div >变为行内元素,吧< span >变为块级元素,在让它们都变为行内块元素

1,首先都给他们一个背景颜色:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    使用内部样式设置背景颜色-->
  <style>
    .color{
    <!-- 设置一个背景颜色 -->
      background-color: #B4E2FB;
    }
  </style>
</head>
<body>
<!--代码书写区域-->
<div class="color" id="div">我是div</div>
<br>
<span class="color" id="span">我是span</span>

</body>
</html>

浏览效果:

在这里插入图片描述

2,使用display 属性转换行内,块级元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    使用内部演示设置背景颜色-->
  <style>
    .color{
      background-color: #B4E2FB;
    }
    #div{
        /*转化为行内元素*/
        display: inline;
    }
    #span{
        /*转化为块级元素*/
        display: block;
    }
  </style>
</head>
<body>
<!--代码书写区域-->
<div class="color" id="div">我是div</div>
<br>
<span class="color" id="span">我是span</span>

</body>
</html>

浏览效果:

在这里插入图片描述

3,使用display 属性转换行内块元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    使用内部演示设置背景颜色-->
  <style>
    .color{
        /*设置背景颜色*/
        background-color: #B4E2FB;
        /*设置宽*/
        width:100px;
        /*设置高*/
        height: 100px;
    }
    #div{
        /*转化为行内元素*/
        display: inline-block;
    }
    #span{
        /*转化为块级元素*/
        display: inline-block;
    }
  </style>
</head>
<body>
<!--代码书写区域-->
<div class="color" id="div">我是div</div>
<br>
<br>
<span class="color" id="span">我是span</span>

</body>
</html>

浏览效果:

HTML块级元素和行内元素,行内块元素(通俗易懂)_第2张图片


✨最后✨

总结不易,希望uu们不要吝啬你们的哟(^U^)ノ~YO!!
如有问题,欢迎评论区批评指正

你可能感兴趣的:(HTML,html,css,前端)