这是我参与 8 月更文挑战的第 8 天，活动详情查看： 8月更文挑战

感激相遇你好我是阿ken

作者：请叫我阿ken
链接：juejin.cn/user/109118…
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

🌊🌈关于前言：

文章部分内容及图片出自网络，如有问题请与我本人联系(主页介绍中有公众号)

本博客暂适用于刚刚接触HTML以及好久不看想要复习的小伙伴

🌊🌈关于内容：

6.4_元素的类型与转换

接下来，我们将对元素的类型与转换进行详细讲解。

6.4.1_元素的类型

HTML 标记语言提供丰富的标记，用于组织页面结构。为了使页面结构的组织更加轻松、合理，HTML 标记被定义成了不同的类型，一般分为块标记和行内标记，也称块元素和行内元素。了解它们的特性可以为使用 CSS 设置样式和布局打下基础，具体如下：

1. 块元素

块元素在页面中以区域块的形式出现，其特点是，每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
_
常见的块元素有 < h1> ~ < h6>、< p>、 < div>、< ul>、< ol>、< li> 等，其中< div>标记是最典型的块元素。

2. 行内元素

_
行内元素也称内联元素或内嵌元素，其特点是，不必在新的一行开始，同时，也不强迫其他元素在新的一行显示。一个行内元素通常会和它前后的其他行内元素显示在同一行中，它们不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
_
常见的行内元素有 < strong>、< b>、< em>、< i>、< del>、< s>、< ins>、< u>、< a>、 < span> 等，其中 < span> 标记是最典型的行内元素。

案例：进一步认识块元素与行内元素，

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>块元素和行内元素</title>
<style type="text/css">

h2 {  
/*定义h2的背景颜色、宽度、高度、文本水平对齐方式*/
background: #FCC;
width: 350px;
height: 50px;
text-align: center;
}

p { 
background: #090; 
}  /*定义P的背景颜色*/

strong { 
/*定义strong的背景颜色、宽度、高度、文本水平对齐方式*/
background: #FCC;
width: 360px;
height: 50px;
text-align: center;
}

em { 
background: #FFO; 
}  /*定义em的背景颜色*/

del {
background: #CCC; 
}  /*定义del的背景颜色*/

</style>
</head>
<body>

<h2>h2 标记定义的文本。</h2>
<p>p 标记定义的文本。 </P>
<strong>strong 标记定义的文本。</strong>
<em>em 标记定义的文本。 </em>
<del>del 标记定义的文本。</del>

</body>
</html>

在这里插入图片描述

在上述案例中，首先使用块标记 < h2>、< p> 和行内标记 < strong>、< em>、< del>定义文本，然后对它们应用不同的背景颜色，同时，对 < h2> 和 < strong> 应用相同的宽度、高度和对齐属性。

运行后可以看出，不同类型的元素在页面中所占的区域不同。块元素 < h2> 和 < p> 各自占据一个矩形的区域，虽然 < h2> 和 < p> 相邻，但是它们不会排在同一行中，而是依次竖直排列，其中，设置了宽高和对齐属性的 < h2> 按设置的样式显示，未设置宽高和对齐属性的 < p> 则左右撑满页面。然而行内元素 < strong>、< em> 和 < del> 排列在同一行，遇到边界则自动换行，虽然对 < strong> 设置了和 < h2> 相同的宽高和对齐属性，但是在实际的显示效果中并不会生效。

值得一提的是，行内元素通常嵌套在块元素中使用，而块元素却不能嵌套在行内元素中。例如，可以将上述案例中的 < strong>、< em> 和 < del> 嵌套在 < p> 标记中，代码如下。

<p>
<strong>strong 标记定义的文本。</strong>
<em>em 标记定义的文本。</em>
<del>del 标记定义的文本。</del>
</p>

运行后可以看出，当行内元素嵌套在块元素中时，就会在块元素上占据一定的范围，成为块元素的一部分。

总结：块元素通常独占一行 ( 逻辑行 )。可以设置宽高和对齐属性，而行内元素通常不独占一行，不可以设置宽高和对齐属性。行内元素可以嵌套在块元素中，而块元素不可以嵌套在行内元素中。

注意:
_
在行内元素中有几个特殊的标记 ——— < img /> 和 < input />，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

6.4.2_< span> 标记

与 < div> 一样， < span> 也作为容器标记被广泛应用在 HTML 语言中。和< div > 标记不同的是 < span> 是行内元素，< span> 与 < /span>之间只能包含文本和各种行内标记，如加粗标记 < strong>、倾斜标记 < em> 等，< span> 中还可以嵌套多层 < span> 。

< span> 标记常用于定义网页中某些特殊显示的文本，配合 class 属性使用。它本身没有固定的格式表现，只有应用样式时，才会产生视觉上的变化。当其他行内标记都不合适时，就可以使用 < span> 标记。

案例：演示 < span> 标记的使用，

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>span 标记</title>
<style type="text/css">

#header {  /*设置当前div中文本的通用样式*/
font-family: "黑体";
font-size: 14px;
color: #FFA500;
}

.huanzhi { 
 /*控制第1个span中的特殊文本*/
color: #515151;
font-size: 20px;
padding-right: 20px;
}

.course {  /*控制第2个span中的特殊文本*/
font-size: 18px;
color: #87CEEB;
}

</style>
</head>
<body>

<div id="header">
<span class="huanzhi">阿ken的CSDN</span>
欢迎光临
<span class="course">点击进入</span>，欢迎光临!
</div>

</body>
</html>

在这里插入图片描述

上述代码中使用 < div> 标记定义一些文本，并且在 < div> 中嵌套两对 < span>，用于控制某些特殊显示的文本，然后使用 CSS 分别设置它们的样式。

运行后特殊显示的文本都是通过 CSS 控制 < span> 标记设置的。

运行后可以看出，< span> 标记可以嵌套于 < div> 标记中，成为它的子元素，但是反过来则不成立，即 < span> 标记中不能嵌套 < div> 标记。从 < div> 和 < span> 之间的区别和联系，可以更深刻地理解块元素和行内元素。

6.4.3_元素的转换 display

网页是由多个块元素和行内元素构成的盒子排列而成的。如果希望行内元素具有块元素的某些特性，如可以设置宽高，或者需要块元素具有行内元素的某些特性，如不独占一行排列，可以使用 display 属性对元素的类型进行转换。

display 属性常用的属性值及含义如下：

inline: 此元素将显示为行内元素 ( 行内元素默认的 display 属性值 )。
block: 此元素将显示为块元素 ( 块元素默认的 display 属性值 )。
inline-block：此元素将显示为行内块元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行。
none：此元素将被隐藏，不显示，也不占用页面空间，相当于该元素不存在。

案例：演示 display 属性的用法和效果，

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>元素的转换</title>
<style type="text/css">

div, span {     /*同时设置div和span的样式*/
width: 200px;   /*宽度*/
height:50px;    /*高度*/
background: #FCC;   /*背景颜色*/
margin: 10px;  /*外边距*/
}

.d_one, .d_two { 
display: inline; 
} /*将前两个div转换为行内元素*/

.s_one { 
display: inline-block; 
} /*将第一个span转换为行内块元素*/

.s_three { 
display: block; 
} /*将第三个span转换为块元素*/

</style>
</head>
<body>

<div class="d_one">第一个 div 中的文本</div>
<div class="d_two">第二个 div 中的文本</div>
<div class="d_three">第三个 div 中的文本</div>
<span class="s_one">第一个 span 中的文本</span>
<span class="s_two">第二个 span 中的文本</span>
<span class="s_three">第三个 span 中的文本</span>

</body>
</html>

在这里插入图片描述

上述代码中，定义了三对 < div> 和三对 < span> 标记，为它们设置相同的宽度、高度、背景颜色和外边距。同时，对前两个 < div> 应用 " display:inline; " 样式，使它们从块元素转换为行内元素，对第一个和第三个 < span> 分别应用 " display：inline-block; " 和 " display:inline; " 样式，使它们分别转换为行内块元素和行内元素。

运行后可以看出，前两个 < div> 排列在了同一行，靠自身的文本内容支撑其宽高，这是因为它们被转换成了行内元素。而第一个和第三个< span> 则按固定的宽高显示，不同的是前者不会独占一行，后者独占一行，这是因为它们分别被转换成了行内块元素和块元素。

在上面的案例中，使用 display 的相关属性值，可以实现块元素、行内元素和行内块元素之间的转换。如果希望某个元素不被显示，还可以使用 " display: none; " 进行控制。例如，希望上面案例中的第三个 < div> 不被显示，可以在 CSS 代码中增加如下样式。

.d_three { 
display: none; 
} /*隐藏第三个div*/

运行代码后可以看出，当定义元素的 display 属性为 none 时，该元素将从页面消失，不再占用页面空间。

注意:

根据上述案例运行结果可以发现，前两个 < div> 与第三个 < div> 之间的垂直外边距，并不等于前两个 < div> 的 margin-bottom 与第三个 < div> 的 margin-top 之和。这是因为前两个 < div> 被转换成了行内元素，而行内元素只可以定义左右外边距，定义上下外边距时无效。

6.5_阶段案例——制作网页焦点图

为了使读者更好地运用浮动与定位组织页面，本节将通过案例的形式分步骤制作一个网页焦点图。

6.5.1_分析效果图

今日入门学习暂时告一段落

Peace

🌊🌈往期回顾：

🌊🌈关于后记：

感谢阅读，希望能对你有所帮助博文若有瑕疵请在评论区留言或在主页个人介绍中添加联系方式私聊我感谢每一位小伙伴不吝赐教

原创不易，「点赞」+「评论」 谢谢支持❤

阿ken的HTML、CSS的入门指南（十一）_浮动与定位

🌊🌈关于前言：

🌊🌈关于内容：

6.4_元素的类型与转换

6.4.1_元素的类型

1. 块元素

2. 行内元素

6.4.2_< span> 标记

6.4.3_元素的转换 display

6.5_阶段案例——制作网页焦点图

6.5.1_分析效果图

🌊🌈往期回顾：

🌊🌈关于后记：