20250214-HTML面试题

如何理解HTML语义化

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

HTML中标题使用h1-h6，段落文字使用p，列表使用ul、li，虽然都可以通过div使用相同效果，但是可读性不好。 所以这些语义化的标签具有两点好处：

1. 对人来说增加代码的可读性
2. 对于机器来说，更利于搜索引擎搜索和爬虫

块级元素和内联元素

块级元素要独占一行，如：div h1-h6 table ul li ol等 内联元素（行内元素）会在一行内紧挨着排列直至到浏览器边缘才会换行，如：span img input button a等