HTML - 替换（置换）元素和非替换（置换）元素

Posted 2021-06-17 WHOVENLY

通常我们都将html元素分为块级元素、行内元素以及行内块级元素，但是今天冲浪时发现一个将html元素分类的新名词对——替换元素和非替换元素，其实也可以称为置换元素和非置换元素。接下来就记录一下个人对于这个新名词对的一些浅显见解，如有问题，还望大佬指出~

目录

• 一、替换元素
• • 1.定义
  • 2.举例说明
  • 3.替换元素有哪些
• 二、非替换元素
• • 1.定义
  • 2.举例说明
  • 3.非替换元素有哪些

一、替换元素

1.定义

一个内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。简单来说就是浏览器通过其标签的元素属性来判断显示具体的内容的元素。

2.举例说明

• <img>元素：浏览器根据src来显示图片内容；
• <input>元素：浏览器根据其type值来选择显示输入框还是其他类型。

3.替换元素有哪些

3.html中的替换元素有：<img>, <input>, <textarea>, <select>, <object> 等

二、非替换元素

1.定义

html中大多数都是非替换元素，他们直接将内容告诉浏览器，直接显示出来，通常都是双标签。

2.举例说明

• <span>元素，浏览器会直接显示span标签里的内容。
• <p>元素，浏览器会直接显示span标签里的内容。

3.非替换元素有哪些

非替换元素（non-replaced element）就是除了 img, input, textarea, select, object 等替换元素以外的元素，如：<p>,<span>,<div>,h标签等文本类标签。