行内元素 or 块级元素 怎么选？

文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 HTML 的部分，公众号会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。

1.行内标签（Inline Elements）：

1）<span>：无语义的内联容器，用于标记文本以应用样式或 JavaScript 操作。

2）<a>：创建超链接。

3）<strong>：表示强调的文本，通常以粗体显示。

4）<em>：表示强调的文本，通常以斜体显示。

5）<br>：换行符。

6）<img>：插入图像。

7）<input>：表单输入元素。

8）<label>：表单标签，用于关联文本和表单控件。

9）<select>：创建下拉选择框。

10）<textarea>：创建多行文本输入框。

2.块级标签（Block Elements）：

1）<div>：无语义的块级容器，用于分组和样式。

2）<p>：表示段落。

3）<h1> 到 <h6>：表示标题，按重要性递减。

4）<ul>：创建无序列表。

5）<ol>：创建有序列表。

6）<li>：列表项。

7）<table>：创建表格。

8）<form>：创建表单。

9）<blockquote>：表示块引用。

10）<pre>：表示预格式化文本。

需要注意的是，HTML5 引入了更多的语义化元素，例如 <header>、<nav>、<section>、<article> 等，它们有助于更好地描述页面结构和内容。这些元素有时可以作为块级元素，有时也可以用作内联元素，取决于其默认的显示行为以及您在 CSS 中的设置。

总结起来，块级标签通常用于构建页面的主要结构，而行内标签用于添加样式、标记特定文本和执行内联操作。

那么行内标签和块级标签都有哪些特点呢？

1.行内标签（Inline Elements）的特点：

不换行：行内元素不会在元素前后自动换行，它们会根据文本流的空间进行排列。

只占据内容的宽度：行内元素的宽度只占据其包裹的内容宽度，不会主动撑开父元素。

允许嵌套：行内元素可以嵌套在其他行内元素内，但通常不会包含块级元素。

可以设置部分样式：行内元素可以应用部分样式，如颜色、字体大小等。但不能设置宽度、高度等影响盒模型的属性。

适合标记文本片段：行内元素常用于标记文本中的特定部分，如强调、超链接、粗体、斜体等。

不能包含块级元素：行内元素不能直接包含块级元素，但可以包含其他行内元素。

2.块级标签（Block Elements）的特点：

独占一行：块级元素会在页面上单独占据一行，前后会产生换行。

默认占据父元素宽度：块级元素默认会占据父元素的整个宽度，可以通过设置宽度来调整。

允许嵌套：块级元素可以嵌套在其他块级元素内，也可以包含行内元素和其他块级元素。

可以设置完整样式：块级元素可以设置完整的样式，包括宽度、高度、外边距、内边距等盒模型属性。

适合创建页面结构：块级元素通常用于创建页面的主要结构，如段落、标题、列表、表格等。

可以包含行内元素：块级元素可以包含行内元素，也可以包含其他块级元素。

初学者在使用行内标签和块级标签时有哪些注意的点？

1.使用行内标签时注意的点：

不要滥用：行内标签适合标记文本中的特定部分，如强调、超链接、粗体、斜体等。不要滥用行内标签，以免影响页面的语义和结构。

避免包含块级元素：行内标签内部不应该包含块级元素，这可能会引起布局问题。如果需要在行内标签内部使用块级元素，可以考虑使用 CSS 的 display: inline-block; 属性。

样式控制：行内标签适用于局部的样式调整，如颜色、字体大小等。避免在行内标签中设置与盒模型相关的属性，如宽度、高度、外边距等。

2.使用块级标签时注意的点：

不要嵌套块级标签：避免在块级元素内部直接嵌套其他块级元素，这会导致不良的布局问题。

语义化使用：块级标签用于创建页面的主要结构，如段落、标题、列表、表格等。在选择标签时要符合页面内容的语义，以提高页面的可读性和可访问性。

避免过度设置宽度：块级元素默认会占据父元素的整个宽度，避免过度设置宽度，以确保内容能够适应不同屏幕尺寸。

避免单独使用换行标签：在大多数情况下，避免单独使用 <br> 换行标签来创建布局。应使用块级元素来组织页面结构，以避免布局问题。

避免过多嵌套：尽量保持块级元素的嵌套层次简洁，过多的嵌套可能导致代码复杂性和性能问题

以上就是关于块级元素和行内元素的内容，大家不用死记硬背，在写页面时用多了自然就记住了，记得要多多练习呀，希望每一个初学者都能成为一个优秀的前端开发工程师，加油。

最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。