块级元素有哪些? 行内元素有哪些?空元素有那些?行内元素和块级元素有什么区别?

块级元素有

块级元素通俗来讲就是块级元素一般是其他元素的容器元素，能容纳其他元素或内联元素。

<div>...div>

<ul>...ul>无序列表

<ol>...ol>有序列表

<dl>...<dl>定义列表

<dl>...<dl>

<h1~h6>...h1~h6>标题1~6级

<p>...P>段落

<address>...asserss>

<center>...center>地址文字

<hr>水平分割线

<pre>...pre>预格式化

<blockquote>...blockquote>段落缩进 前后5个字符

<marquee>...marquee>滚动文本

<table>...table>表格

<form>...form>表单

块级元素的特点

1、总是在新行上开始；

2、高度，行高以及外边距和内边距都可控制；

3、宽度缺省是它的容器的100%，除非设定一个宽度。

4、它可以容纳内联元素和其他块元素

行内元素有

行内元素一般情况下行内元素只包含内容或者其他行内元素，宽度和长度依据内容而定，不可以设置，可以和其他元素和平共处于一行。行内元素适合显示具体内容。display属性为inline的元素为行内元素。叫法：内联元素、内嵌元素、行内元素 、直进式元素等。

<span>...span>

<a>...a>链接

<b>...b>加粗

<strong>...strong>加粗

<img>图片

<sup>...sup>上标

<sub>..sub>下标

<i>...i>斜体

<em>...em>斜体

< del>...del >删除线

<u>...u>下划线

<input>...input>文本框

<textarea>...textarea>多行文本

<select>...select>下拉列表

行内元素的特点

1、和其他元素都在一行上；

2、宽度就是它的文字或图片的宽度，不可改变；

3、行内元素只能容纳文本或者其他内联元素

行内元素，需要注意

设置宽度width 无效。
设置高度height 无效，可以通过line-height来设置。
设置margin只有左右margin有效，上下无效。
设置padding 上下左右都有效，。注意元素范围是增大了，但是对元素周围的内容是没影响的。

空元素:

空元素（Void Element）是 HTML 和 XML 中的一种特殊元素，它没有子元素，也没有结束标签这些元素通常用来表示文档中的一些特殊内容，例如换行符、图像、表单控件、元数据等。

空元素的语法格式是在标签结尾处使用一个斜杠符号，例如
或 。虽然在 HTML5 中，空元素的结束标签可以省略，但是建议为了兼容性和可读性，仍然保留斜杠符号。

空元素是由浏览器自动解析和渲染的，因为它们没有子元素和结束标签，所以浏览器可以自动关闭它们。

在 HTML 中，空元素不允许添加子元素或内容，因为它们没有结束标签来定义子元素的范围。

使用空元素可以简化 HTML 代码，减少页面大小，提高页面加载速度。但是需要注意的是，空元素通常需要设置属性才能达到预期效果，例如 元素需要设置 src 属性才能显示图片。

<br><hr><img><input><link><meta>

行内元素不可以设置宽高，不独占一行
块级元素可以设置宽高， 独占一行

行内元素和块级元素有什么区别?

盒模型： 块级元素会生成一个独立的矩形框，具有内边距(padding)、外边距(margin)和边框(border)，它会占据一整行的宽度，可以设置宽度、高度、边距和填充等属性。行内元素则不会产生独立的框，行内元素的盒模型主要包括水平方向的内边距、外边距和边框，对垂直方向的设置有一定限制。它的宽度和高度由内容决定，无法直接设置宽度和高度。

布局特性：块级元素会独占一行，块级元素会自上而下按顺序排列不能与其他任何元素并列，每个块级元素都会从新行开始。行内元素则不会独占一行，行内元素则会在同一行上水平排列，直到一行放不下才会换行，可以与其他元素在同一行上并排显示。

内容显示：块级元素可以包含其他块级元素和行内元素，并且可以设置内部元素的布局和样式。行内元素一般不能包含块级元素，只能包含文本或其他行内元素。

相对位置：块级元素具有明显的边界，可以使用CSS定位属性（如position、top、left）来控制其相对位置。行内元素通常不能设置这些属性，它们会根据文本流布局自动调整位置。

默认尺寸：块级元素能设置宽高，如果不设置宽高，那么块级元素宽度将默认宽度是100%，会占满父元素可用空间。行内元素不能设置宽高，行内元素的默认宽度由内容决定，一般只占据内容所需的宽度，但可以通过设置padding和margin来微调。

注意：通过CSS的display属性可以改变元素的默认类型，将块级元素设置为行内元素，或将行内元素设置为块级元素，从而改变它们的显示和布局方式。

持续学习总结记录中，回顾一下上面的内容：
块级元素有哪些? 行内元素有哪些?空元素有那些?行内元素和块级元素有什么区别?