html面试知识点

1. 如何理解html语义化

先看两段代码：
代码1：

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

代码2：

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

从代码1和代码2来看，代码2通过添加不同的元素表达更容易理解。
也就是说让人更容易读懂代码；同时在代码执行时搜索引擎也更容易读懂代码。

2. 默认情况下，哪些html标签是块级元素，哪些元素是内联元素？块级元素与内联元素区别？

1）块级元素（display: block / table）：div h1 h2 p table ol ul等
2）内联元素（display: inline/inline-block）：span a input img button等
3）区别：
块级元素：独占一行，宽度为整行，高度默认为0，高度随内容撑开，设置宽高有效。
内联元素：不独占一行，宽高随内容撑开，设置宽高无效。有空白折叠（即:有多个空格或换行时会自动合并为一个空格）。