HTML基础-标签分类(闭合标签，空标签，块级元素，行内元素，行级块元素，可替换元素)

Dear 丶 2022-11-14 10:17 214阅读 0赞

### 文章目录 ###

*  一、闭合标签和空标签
 *  二、位置特性（块级元素，行内元素，行级块元素）
 *   *   *  块级元素（block）
         *  行级元素(inline)
         *  行内块元素（inline-block）
 *  三、元素之间的转化
 *  四、可替换元素

# 一、闭合标签和空标签 #

HTML中的标签从闭合的角度可以分为闭合标签和空标签。而HTML中大部分标签都是闭合标签，其他少数为空标签。

常见的空标签有

*  <input />
 *  <img />、
 *  <area />、
 *  <base />、
 *  <link />等。

# 二、位置特性（块级元素，行内元素，行级块元素） #

位置特性进行分类的，它将元素分为三类：块级元素，行内元素，行级块元素（也称块级行元素）。

### 块级元素（block） ###

\*\*特点： \*\*

*  可以设置宽高、内、外边距；
 *  独占一行（即前后均有换行）；
 *  块级元素如果不设置宽度和高度，则**宽度默认为父级元素的宽度**。**高度则根据内容大小自动填充**。

常见的块级元素：  
div、p、h1、h2…hn，ol、ul、dl、li、form、table

### 行级元素(inline) ###

**特点：**

*  不可设置宽高、上下内、外边距。（左右内、外边距设置有效）
 *  其宽度和高度由其**内容自动填充**。
 *  其他行级元素**共处一行** ；

常见的行级元素：

*  a(锚点)
 *  b(加粗)
 *  i(斜体)
 *  span(常用内联容器，定义文本内区块)
 *  lable(input 元素定义标注（标记）)

### 行内块元素（inline-block） ###

**特点：**

*  可以设置宽高、内外边距；
 *  可以与其他行内元素、内联元素**共处一行**；

常见的内联元素：  
input、img

# 三、元素之间的转化 #

可以在行内样式或css样式中改变元素的display将三种元素进行转换。

*  display:block；(将元素变为块级元素)
 *  display:inline； (将元素变为行级元素)
 *  display：inline-block；（将元素变为行级块元素）

# 四、可替换元素 #

什么是可替换元素？顾名思义，就是会被替换的元素。

我们并没有在 img 标签中写入任何内容，浏览器去下载 src 属性给到的图片，并用该图片资源替换掉 img 标签，而且浏览器在下载前并不知道图片的宽高。所以，可替换元素比较特殊，它的宽高是由其加载的内容决定的。（当然 CSS 可以覆盖其样式）

例子

该图片在页面中展现出来的话，就是图片本身本身的宽高。

此时该元素展现出来就是宽高为 80 像素。

如果我们再用 CSS 去覆盖其样式：

img {
      width: 60px;
      height: 60px;
    }

该元素的展现即为 60 像素。

[**MDN 的释义:**][MDN]

可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。
    
    简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。

典型的可替换元素有：

*  <iframe>
 *  <video>
 *  <embed>
 *  <img>  
    有些元素仅在特定情况下被作为可替换元素处理，例如：
 *  <option>
 *  <audio>
 *  <canvas>
 *  <object>
 *  <applet>  
    HTML 规范也说了<input> 元素可替换，因为 “image” 类型的 <input> 元素就像<img>一样被替换。但是其他形式的控制元素，包括其他类型的 <input> 元素，被明确地列为非可替换元素（non-replaced elements）。

[本文链接:https://blog.csdn.net/qq\_39903567/article/details/115283580][https_blog.csdn.net_qq_39903567_article_details_115283580]

[MDN]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Replaced_element
[https_blog.csdn.net_qq_39903567_article_details_115283580]: https://blog.csdn.net/qq_39903567/article/details/115283580