【基础知识02】HTML5的元素类型与转换

目录

一、元素类型

1、块元素

1 块元素特征

2 常见块元素：

2、行内元素

1 特点：

2 分类：

3 注意事项：

3、行内块元素

1 什么是行内块元素

2 分类及特征

二、标记

三、元素转化

属性值：

一、元素类型

1、块元素

1 块元素特征

1. 在页面中以区域块的形式出现，每个元素通常占用一整行或者多整行
2. 可以对其设置宽、高、对齐等属性
3. 块元素宽度未设置的情况下，默认为容器(父级盒子)的100%
4. 块元素为容器(盒子)，可以放置其他块元素或行内元素

2 常见块元素：

<p>、<div>、<ul>、<li>、<ol>、<h1>-<h6>(文本类块级元素<p>不能再放置其他块元素)

2、行内元素

1 特点：

• 不独占一行，一行可显示多个行内元素、行内块元素
• 不可以设置宽、高、对齐等属性，仅仅靠自身内容支撑大小
• 行元素只能容纳文本或其他行内元素

2 分类：

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

3 注意事项：

• 行内元素内不能添加其他块元素
• 行内元素的特例<a>
  • 可以添加其他块元素，但最好将<a>标签转化为块元素
    • 因为a标签常用于点击跳转，因此要设置一个合理的点击块区域
  • <a>标签内不能再嵌套其他<a>标签

3、行内块元素

1 什么是行内块元素

即具有块元素特征又具有行内元素特征

2 分类及特征

1. 常见元素有：<img>、<input>、<td>
2. 特征：
   1. 可以设置宽、高、内边距等属性(块)
   2. 宽度为内容所撑起的宽度(行内)
   3. 一行可以显示多个行内元素或行内块元素

二、<span>标记

与<div>标记一样，<span>也作为容器标记被广泛应用于html语言之中。

span是行内元素，span中只能包含文本和各种行内标记。

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

三、元素转化

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

属性值：

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

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

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

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

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