【HTML5-小知识】块元素、行内元素和行内块元素

5 篇文章 0 订阅


前言

HTML常用标签掌握之后,应当进一步了解元素的三种类型,块元素,行内元素,行内块元素,

掌握这三种元素类型的特点。


一、块元素、行内元素和行内块元素是什么?

HTML中标签元素大体被分为三种不同的类型:块元素、行内元素和行内块元素,各自具有不同的特点以及用途。下面将逐个介绍。


二、块元素

用途:块元素主要用于页面布局

特点一:块元素独占一行,默认情况下,排列顺序是从上到下

块元素例如:<p>、<h1>-<h6>、<center>

注:<h1>、<P>标签设置背景元素后占用了页面中的一行

 代码如下(特点一):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>块元素</title>
</head>
<body>
    <!-- 块元素功能一:块元素独占一行,默认情况下,排列顺序是从上到下 -->
    <!-- 使用行内样式给 h1 标签加个背景色 -->
    <h1 style="background-color: antiquewhite;">
        第二个块元素h1标签
    </h1>
    <!-- 使用行内样式给 p 标签加个背景色 -->
    <p style="background-color: aquamarine;">
        第一个块元素p标签
    </p>
</body>
</html>

运行结果如下(特点一): 

 特点二:块元素的宽度默认是父元素宽度的100%

 注:<h1>标签设置宽度后背景色只显示设置的宽度,<p>标签没有设置宽度,背景色显示的是父元素宽度的100%

 代码如下(特点二):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>块元素</title>
</head>
<!-- body标签的 h1 标签和 p 标签的父元素 -->
<body>
    <!-- 块元素功能二:块元素的宽度默认是父元素宽度的100% -->
    <!--h1标签是 body 标签的子元素 
        使用行内样式给 h1 标签加个背景色
        设置 h1 标签的宽度为300px-->
    <h1 style="background-color: antiquewhite;width: 400px;;">
        第二个块元素h1标签
    </h1>
    <!--p标签是 body 标签的子元素
        使用行内样式给 p 标签加个背景色
        不设置 p 标签的宽度 -->
    <p style="background-color: aquamarine;">
        第一个块元素p标签
    </p>
</body>
</html>

运行结果如下(特点二): 

特点三: 块元素的高度默认是被内容撑开的

注:<h1>标签文本内容未占满整行,高度不变;<p>标签文本内容占满整行后换行,<p>标签高度发生变化。

 代码如下(特点三):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>块元素</title>
</head>
<body>
    <!-- 块元素功能三:块元素的高度默认是被内容撑开的 -->
    <!--使用行内样式给 h1 标签加个背景色-->
    <h1 style="background-color: antiquewhite;">
        第二个块元素h1标签
    </h1>
    <!--使用行内样式给 p 标签加个背景色 -->
    <p style="background-color: aquamarine;">
        第一个块元素p标签
        气入今心治,请李而作文我我争仇苟者自火命文也,
        世接谓使,五色牙逝肯,谷是责次的国土位千币和念,
        嗣圣沉而从分,狱命而法希感次甲,这重是他未才一
        然月人答害丈苟,设有张少你我如,丐皇德台入燕老其人衣水之身。
    </p>
</body>
</html>

运行结果如下(特点三):

特点四:块元素可以自定义宽度和高度 

注:<h1>、<p>标签各自设置宽度和高度后背景色发生变化

 代码如下(特点四):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>块元素</title>
</head>
<body>
    <!-- 块元素功能四:块元素可以自定义宽度和高度 -->
    <!--使用行内样式给 h1 标签加个背景色
        h1标签自定义宽度300px,高度100px-->
    <h1 style="background-color: antiquewhite;width: 300px;height: 100px;">
        第二个块元素h1标签
    </h1>
    <!--使用行内样式给 p 标签加个背景色 
        p标签自定义宽度200px,高度50px-->
    <p style="background-color: aquamarine;width:200px;height: 50px;">
        第一个块元素p标签
    </p>
</body>
</html>

运行结果如下(特点四):

 


 三、行内元素

用途:行内元素主要是用来包裹文字

特点一:行内元素不会独占一行,默认情况下是从左到右的顺序排列,一行排满后再起一行,从左到右的顺序排序

行内元素例如:<span>、<a>

 代码如下(特点一):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>行内元素</title>
</head>
<body>
    <!-- 行内元素特点一:行内元素不会独占一行,默认情况下是从左到右的顺序排列,
        一行排满后再起一行,从左到右的顺序排序 -->
    <!-- 为 span 标签添加背景颜色 -->
   <span  style="background-color: pink;">
        第一个行内元素
   </span>
   <!-- 为 a 标签添加背景颜色 -->
   <a href="javascript:;" style="background-color: aquamarine;">
        第二个行内元素
        力玉不,己给药哉皇她程小仓圣持却,
        救俭正人关位否到览准京领
        ,皇孔求好司侯吴娘而若杀而为当骂说了劝,
        死为回之得躲上而答历得历开司会洋憾揽,
        者瞠投一胜你王定念光,尝知仓所,
        但惶惶同绪为活大上一厄不娘德李。
   </a>
</body>
</html>

运行结果如下(特点一):

特点二:行内元素的宽高是被内容撑开

代码如下(特点二):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>行内元素</title>
</head>
<body>
   <!-- 行内元素特点二:行内元素的宽高是被内容撑开 -->
    <!-- 为 span 标签添加背景颜色 -->
    <span  style="background-color: pink;">
        第一个行内元素
        密烦看,秦已回一以说在是胸同才我智持句他身负以,
        意落范救韩言张虑着定争情四马瞠他,水答郭力己德,一。
   </span>
   <!-- 为 a 标签添加背景颜色 -->
   <a href="javascript:;" style="background-color: aquamarine;">
        第二个行内元素
        力玉不,己给药哉皇她程小仓圣持却,
        救俭正人关位否到览准京领
        ,皇孔求好司侯吴娘而若杀而为当骂说了劝,
        死为回之得躲上而答历得历开司会洋憾揽,
        者瞠投一胜你王定念光,尝知仓所,
        但惶惶同绪为活大上一厄不娘德李。
   </a>
</body>
</html>

 运行结果如下(特点二):

 

特点三: 行内元素不可以自定义宽高

注: 给<span>、<a>标签自定义宽度和高度后,背景色并未发生变化,由此可见行内元素不可以自定义宽度和高度

代码如下(特点三):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>行内元素</title>
</head>
<body>
   <!-- 行内元素特点三: 行内元素不可以自定义宽高 -->
    <!-- 为 span 标签添加背景颜色 -->
    <!-- 自定义 span 标签的宽度为100px,高度为50px -->
    <span  style="background-color: pink;width: 100px;height: 50px;">
        第一个行内元素
   </span>
   <!-- 为 a 标签添加背景颜色 -->
   <!-- 自定义 a 标签的宽度为50px,高度为50px -->
   <a href="javascript:;" style="background-color: aquamarine;width: 50px;height: 50px;">
        第二个行内元素
   </a>
</body>
</html>

 运行结果如下(特点三):


四、行内块元素 

行内块元素兼具块元素和行内元素的特点。

特点:不会独占一行,可以自定义宽度和高度。

行内块元素例如:<img>

代码运行如下(图片默认宽高):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>行内块元素</title>
</head>
<body>
    <!-- 行内块元素特点:不会独占一行,可以自定义宽度和高度。
    照片默认宽度和高度 -->
   <img src="./懒羊羊.webp">
</body>
</html>

 运行结果如下(图片默认宽高):

 代码如下(自定义宽高):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>行内块元素</title>
</head>
<body>
    <!-- 行内块元素特点:不会独占一行,可以自定义宽度和高度。-->
    <!-- 自定义照片宽度200px,高度200px -->
   <img src="./懒羊羊.webp" style="width: 200px;height: 200px;">
</body>
</html>

运行结果如下(自定义宽高):

 

 


总结

以上就是今天要讲的全部内容,本文仅仅介绍了HTML中标签元素的三种类型,块元素、行内元素、行内块元素的通途和特点。在使用标签对网页布局和对文本惊醒排版很重要。

  • 5
    点赞
  • 54
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值