HTML5的元素类型与转换

Posted 2022-12-19 胡开心同学

目录

 

一、元素类型

二、标记

三、元素转化

---

 

一、元素类型

1、块元素

（1）在页面中以区域块的形式出现，每个元素通常占用一整行或者多整行，可以对其设置宽、高、对齐等属性。

（2）常见的块元素：<p>、<div>、<ul>、<li>、<ol>、<h>

2、行内元素

（1）不强迫其他元素在新的一行显示，他们不占有独立的区域，仅仅靠自身对应的页面元素的字体大小和图像尺寸来支撑结构，不可以设置宽、高、对其等属性，常用于控制页面中文本的样式。

（2）常见的行内元素有：<strong>、<b>、<em>、<i>、<a>、<span>等，其中<span>是最典型的行内元素。

二、<span>标记

与<div>标记一样，<span>也作为容器标记被广泛应用于html语言之中。span是行内元素，span中只能包含文本和各种行内标记。

span标记常用于定义网页中某些特殊显示的文本，配合class属性使用，其本身没有固定的格式表现，只用应用样式时，对应元素才会产生视觉上的变化

三、元素转化

网页中由多个块元素和行内元素对应元素构成的"盒子"排列而成，但也因此块元素和行内元素有了不同的特性。eg：块元素的特性：可以设置宽、高等属性。行内元素的特性：不独占一行。如果想要使块元素具有行内元素的特性，或行内元素具有块元素特性，这就用到了元素转化。利用display属性对元素进行转化

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

inline：此元素显示为行内元素（行内元素默认的display属性值）

block：此元素将显示为块元素（块元素默认的display属性值）

inline-block：此元素将显示为行内块元素，可以对其设置宽、高和对齐等属性，但该元素不单独占一行。

none：此元素将被隐藏，不显示，也不占用页面空间，相当于该元素不存在