主要有以下问题：

• 如何理解 HTML 语义化
• 默认情况下，哪些 HTML 标签是块级元素、哪些是内联元素

问题一：如何理解 HTML 语义化

没有语义化代码

1
2
3
4
5
6
7
8

<div>标签</div>
<div>
  <div>一段文字</div>
  <div>
    <div>列表1</div>
    <div>列表2</div>
  </div>
</div>

语义化后代码

1
2
3
4
5
6
7
8

<h1>标签</h1>
<div>
  <p>一段文字</p>
  <ul>
    <li>列表1</li>
    <li>列表2</li>
  </ul>
</div>

内容一样，效果一样，但是推荐第二种写法，因为可读性更好

语义化主要是解决以下几点

• 让人更容易读懂（增加代码可读性）
• 让搜索引擎更容易读懂（SEO）

问题二：块状元素 & 内联元素？

块状元素：独占一样

• display：block / table;
• div h1 h2 table ul ol p 等

内联元素：不独占一样，特点是挨着一起，直到边缘放不下换行

• display：inline / inline-block;
• span img input button 等