【HTML 元素的分类】

最新推荐文章于 2024-04-30 15:07:29 发布

Hey_Coder

最新推荐文章于 2024-04-30 15:07:29 发布

阅读量290

点赞数

分类专栏：【HTML】文章标签： html元素的分类元素的分类详细介绍块级元素和行内级元素的区别替换元素和非替换元素的区别元素类型对css属性的影响

本文链接：https://blog.csdn.net/VickyTsai/article/details/103481792

版权

【HTML】专栏收录该内容

26 篇文章 11 订阅

订阅专栏

html 元素的分类

1. 替换元素与非替换元素 (实际内容的显示是否和属性相关)

⑴ 替换元素（replaced element）
- 替换元素 ⇒ 单标签(无属性) 无内容，添加属性有实际内容。
  - 没有实际内容，一般是空标签。
  - ① 没有实际内容:
    - 元素都没有实际的内容。
  - ② 显示内容: 浏览器根据其标签的 ❶ 属性，来判断显示内容。
    - 固定宽高比: 且替换元素一般拥有固定的尺寸（宽高或宽高比）。
    - 比如，图片。

示例1: 一个文本输入框
- 改变 type 属性值，浏览器显示就不一样。

<input type="text" />

⑵ HTML 中的替换元素
- 这些元素都没有实际的内容。
- ❶ <img>
  - 替换元素 ⇒ 单标签无内容，添加属性有实际内容。
  - img 标签，只写一个标签，不添加属性，页面上不会显示图片，标签添加 src属性指明了图片的资源地址，页面上才会显示图片，src的属性值不同，引用不同的图片，显示出来的内容也就不同。
- ❷ <input>, ❸ <textarea> , ❸ <select>，❺ <object>, <embed>、<video>、<audio>、<canvas>、<iframe>

⑶ 非替换元素：（non-replaced element）
- 有实际内容: HTML 的大多数元素是: 不可替换元素
  - 将内容直接告诉浏览器，将其显示出来。

示例1: 一个段落: 浏览器将把这段内容直接显示出来。

<p>wanmei.com</p>

2. 块级元素和行内级元素 (是否独占一行)

下方示例的各图涉及代码
css

    /*行内替换元素，图片 ，设置内外边距 四个方向 都有效*/
.imgset {
    border: solid 5px;
    margin: 10px;
    padding: 10px;
}

#taera {
    border: solid 5px;
    /*margin: 10px;*/
    /*padding: 10px;*/
    background-color: #bdffc2;
}


.blocktest {
    border: solid 2px;
    background-color: lightseagreen;
    /*块元素设置宽高，有效*/
    /*width: 30%;*/
    /*height: 50px;*/

    /*块元素 设置内外边距，有效*/
    margin: 10px;
    padding: 10px;
}

.inlinetest {
    border: dashed 2px indianred;
    background-color: lightblue;
    /*内联 非替换元素 设置宽高 无效*/
    width: 30%;
    /*height: 50px;*/
    /*内联 非替换元素 设置 内外边距,垂直方向 上下外边距无效,内边距四个方向 都有效*/
    /*margin: 10px;*/
    /*padding: 10px;*/


}

html

<!--行内 替换元素 -->
<img alt="" class="imgset" src="images/lizard.png">
<textarea cols="30" id="taera" name="" rows="10"></textarea>

<!-- 块元素和行内元素 测试-->
<p class="blocktest">古之 <span class="inlinetest">学者</span>必有师。<span class="inlinetest">师者</span>，所以传道受业解惑也。</p>
<p class="blocktest">人非生而知之者，孰能无惑 ？</p>

<a href="https://www.baidu.com/"><p>学而知之</p></a>真知，才能笃行。

⑴ 块级元素
- ① 独占一行
  - 独自占领一行，左右两边都没有元素；
  - 自动充满父级元素的内容区域
- ② 块级元素和显示类型 display
  - 设定显示类型 display属性为: block 或列表项 list-item 的元素都是块级元素。
    - 列表项⇒ 外部块框 + 内部列表项内联框。
- ③ 块级元素⇒ 可以设置宽高
  - 200*100px,会改变块元素的宽高。
  - 在不设置宽度的情况下，默认宽度 = 父元素的宽度。
- ④ 常见的块级元素：
  - <h1> , <p> , <div>等。

⑵ 行内级元素
- ① 不独占一行
  - 左右两边都可以有元素，可以和其他元素在一行上。
- ② 行内级元素和显示类型 display
  - 设置 display:inline ，元素变成行内级元素。
- ③ 行内非替换元素⇒ 无法设置宽高
  - 行内元素的宽度 =内容的宽度。
    - 盒模型上显示了宽高的指定值,但是行内非替换元素的实际宽高并没有变化。
  - ★ 行内替换元素(比如图片img)⇒ 可以设置宽高的。
- ④ 常见的行内元素：
  - <span> , <a> , <img>等。

3. 元素类型和对属性的影响

⑴ 设置宽高和元素的类型
- ① 可以设置宽高的元素:
  - ❶ 块级元素与 ❷ 行内替换元素(img) 是可以设置宽高的。
- ② 不可以设置宽高的元素:
  - ❶ 行内非替换元素无法设置宽高。
- ③ 不设置宽度
  - 块级元素的宽度 = 父级元素内容的宽度。
  - 行内级元素的宽高 = 本身 内容大小决定的（文字、图片等）。
    - 可以看到两个span包含的 “学者”、"师者"的宽高 = 内容需要的宽高。
- ④ 不设置高度
  - 块级元素的高度 = 本身 内容的高度。
    - 可以看到元素的高度 = 内容需要的高度。
  - 行内级元素的宽高 = 本身内容大小决定的（文字、图片等）。

⑵ 盒模型和元素类型:
- 但是 ❶ 行内级元素和 ❷ 块级元素一样，都拥有盒子模型。
- 内外边距:
  - ① 块级元素⇒ 内外边距都有效。
  - ② 行内非替换元素⇒ 垂直方向的外边距无效。
    - 行内非替换元素在垂直方向的 padding与 margin是无效的, 如 span, a等。
      - 四个边都设置了 外边距,但只有水平方向有效,垂直方向无效。
    - 设置了内边距 (边框内部)，行内非替换元素水平和垂直方向，都有效。
  - ③ 行内替换元素⇒垂直方向的内外边距有效。
    - 比如 img 标签设置垂直内外边距是有效的
      - 图片的外边距 (边框外围)
    - 图片的内边距 (边框内部)
⑶ 元素嵌套和元素类型
- 行内级元素⇒ 只能容纳文本或者其他行内级元素，不能嵌套块级元素。
- 块级元素 ⇒ 可以嵌套行内级元素。

示例1: 故意在 a元素中，嵌套一个块级元素p，会发现行内级元素的行为，变成了块级元素的样子，会自动换行了。不再是行内级元素的行为了。

<a href="https://www.baidu.com/"><p>学而知之</p></a>真知，才能笃行。

♣ 结束语

感谢：❤ 如果这篇文章对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
欢迎指正: 如果发现有需要更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭

转载请评论告知作者并注明出处 ,Thanks♪(･ω･)ﾉ
- 作者：Hey_Coder
- 来源：CSDN
- 原文：https://blog.csdn.net/VickyTsai/article/details/103481792
- 版权声明：本文为博主原创文章，转载请评论告知作者并附上博文链接！

在这里插入图片描述