1、如何理解 HTML 的语义化？语义化开发有什么好处？

首先观察以下两组代码：

<!-- 片段1 -->
<div>标题</div>
<div>
  <div>一段文字</div>
  <div>
    <div>列表1</div>
    <div>列表2</div>
  </div>
</div>

<!-- 片段2 -->
<h1>标题</h1>
<div>
  <p>一段文字</p>
  <ul>
    <li>列表1</li>
    <li>列表2</li>
  </ul>
</div>

语义化：选择合适的 HTML 标签和属性，以及编写有意义的 CSS 类和 ID。

好处：

1. 对于开发者来说：让人更容易读懂，方便团队开发和维护，增强代码可读性，遵循标注，减少差异化。
2. 对于搜索引擎来说：有利于 SEO （搜索引擎优化），计算机能够读懂 HTML 标签，从而有效识别重点，爬取有效信息。
3. 对于其他设备来说：方便其他设备的解析（屏幕阅读器，移动设备），以有意义的方式渲染页面。

2、默认情况下，哪些 HTML 标签是块级元素、哪些是内联元素？

1. display: block/table，有 div、h1、h2...、 table、ul、ol、p 等。
2. display: inline/inline-block，有 span、img、input、buttom 等。