前言
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中标签元素的三种类型,块元素、行内元素、行内块元素的通途和特点。在使用标签对网页布局和对文本惊醒排版很重要。