✨前言✨
本篇文章主要讲解一下html标签中的块级元素,主要包括块级元素的概念、作用、特点,还有就是块级元素有哪些标签等内容。
欢迎点赞 收藏 ⭐留言评论 私信必回哟
博主将持续更新学习记录收获,友友们有任何问题可以在评论区留言
块级元素,它独占一行,可以设置宽度、高度以及边距等样式属性。它适合用于创建页面的大块结构,例如页面的主体区域、容器、布局等。
通常有这几个特点:
一些文字级标签不能放块元素。例如:
<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>
浏览效果:
行内元素,它不会独占一行,宽度默认由其内容决定。它适合用于对文本或其他行内元素进行样式化、标记或包裹。
通常有这几个特点:
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>
通常有这几个特点:
代码样式:
<!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
代码演示:
小练习:这是我们将< 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>
浏览效果:
✨最后✨
总结不易,希望uu们不要吝啬你们的哟(^U^)ノ~YO!!
如有问题,欢迎评论区批评指正