语义化标签和无语义标签
无语义标签：
如div和span，这些标签本身没有明确的语义，主要用于布局和样式控制。
例如，div用于创建一个块级容器，而span用于创建一个行内容器。
语义化标签：
如header、footer、nav等，这些标签具有明确的语义，能够传达其内容的意义。
例如，header用于定义页面的头部区域，footer用于定义页面的底部区域，nav用于定义页面的导航链接部分。
优缺点
无语义标签：
优点：灵活性强，可以用于各种布局和样式设计。
缺点：缺乏语义信息，不利于搜索引擎优化（SEO）和屏幕阅读器的解析，可能导致可访问性问题。
语义化标签：
优点：代码结构清晰，便于阅读和维护；有利于搜索引擎优化和屏幕阅读器的解析，提高网页的可访问性；能够传达明确的内容意义，便于其他设备解析。
缺点：在某些情况下可能不如无语义标签灵活，特别是在复杂的布局设计中。
使用场景
无语义标签：适用于需要高度自定义布局和样式的场景，如复杂的页面布局设计。
语义化标签：适用于需要明确传达内容意义的场景，如页面的头部、底部、导航等结构
常见语义化标签
h1 ~ h6 标题标签
p 段落标签
ul li 列表标签(无序)
ol li 列表标签(有序)
dl dt dd 自定义列表
img 图片
table thead tr th tbody td 表格标签
a 链接标签
u 带下划线标签
i 斜体字标签
del 带删除线标签
b 加粗标签
strong 字体加粗标签
form 表单标签
input 输入框标签 / 其他作用
button 按钮标签
select option 下拉标签
常见无语义标签
div 块标签
span 行内标签
块级元素、行内元素、行内块元素
块级元素
块级元素默认属性:
display: block;
display: 展示、渲染;
block: 块的意思
块级元素： 独占一行显示,可以直接设置宽度高度。
行内元素
行内元素默认特点： display: inline 行内展示。
行内元素： 在同一个显示，不能直接设置宽度高度。
CSS中的
/* display: block;*/ 是把标签设置为块级元素的意思
/* text-decoration: underline; 下划线 */ 行内元素是用于修饰页面的细节。
字体颜色、字体大小，文本线
PS:
块元素用于承载内容，进行排版布局,所以不建议这样写html代码:
行内元素嵌套块元素不符合规范
<span> <div></div> </span>
通常是块级元素嵌套行内元素
<div> <span></span> </div>
行内块元素
行内块标签的默认属性： display: inline-block 行内块的意思。
用于布局页面细节、小的区块，例如：图标、输入框、按钮。
行内块标签：可以在同一行显示，也可以直接设置宽度高度。
行内块标签因为这个inline-block的原因，通常会伴随着文本空白的出现（元素周围间隙|间距）
可以给行内块元素嵌套一个标签，并且给这个标签设置font-size为0。
