HTML 块级元素与行内元素有哪些以及注意、总结

行内元素和块级元素是HTML中的两种元素类型，它们在页面中的显示方式和行为有所不同。

块级元素（Block-level Elements）：

常见的块级元素有div、p、h1-h6、ul、ol、li、table、form等。

块级元素会独占一行，即使没有设置宽度，也会自动填充父容器的宽度。

块级元素可以设置宽度、高度、内外边距等属性。

块级元素可以包含其他块级元素和行内元素。

<span style="background-color: red">块级元素</span>

行内元素（Inline Elements）：

常见的行内元素有span、a、img、strong、em、input、label等。

行内元素不会独占一行，它会在同一行内根据内容的大小自动排列。

行内元素的宽度和高度由内容决定，不能直接设置宽度和高度属性。

行内元素的内外边距只影响元素自身的排列，不会改变其他元素的位置。

行内元素不能包含块级元素，只能包含其他行内元素或文本内容。

需要注意的是，HTML5中的一些元素可以根据上下文的不同表现出块级元素或行内元素的特性。例如，a标签在默认情况下是行内元素，但如果给a标签设置display: block;属性，它就会变成块级元素。

<p style="background-color: pink">行内元素 </p>

总结：

行内元素和块级元素在页面布局和样式设置上有着不同的表现。块级元素会独占一行，可以设置宽度、高度和内外边距，可以包含其他块级元素和行内元素；行内元素在同一行内根据内容大小排列，不能设置宽度和高度，内外边距只影响元素自身的排列，只能包含其他行内元素或文本内容。