HTML面试题

一、如何理解 HTML 语义化？

1. 让人更容易读懂（增加代码可读性）。
2. 让搜索引擎更容易读懂 （搜索引擎优化：SEO）。

例如下面两段代码：

        注：右边的代码，即使在没有加载 CSS 的情况下也能呈现较好的内容结构与代码结构，易于阅读。

更加详细的解释：理解HTML语义化 - freeyiyi1993 - 博客园 。

二、块级元素、哪些是内联块（行内块）元素、哪些是内联（行内）元素？

• 每一个网页元素都有一个display属性，用于设置元素显示的类型，通过display属性设置不同的值可以将块级元素、内联元素、行内块元素之间进行转换。常见的可选值包括：

1. 块级元素

• display: block/table; 有 div、h1~h6、table、form、ul、ol、dl、p 等。

1. 一个块元素独占一行。
2. 元素的高度、宽度、行高及底边距都可设置（margin和padding的上下左右均有效）；
3. 元素宽度在不设置的情况下，和父元素的宽度一致。不设置高度时高度为0，有内容时高度由内容撑开；
4. 块元素可以容纳内联元素和其他块元素；

2. 内联块（行内块）元素

• display: inline-block; 有 img、input、button、select、textarea 等。

1. (同时具备内联元素、块级元素特点)
2. 不会独占一行；
3. 元素的高度、宽度、行高以及顶和底边距都可设置，不设置宽高时完全由内容撑开；

3. 内联（行内）元素

• display: inline; 有 a、span、strong、b、em、i、label、br 等。

1. 当一行有空间时，和其他非区块元素都在一行，遇到父级元素边界会自动换行；
2. 元素的宽、高及顶部和底部边距不可设置（设置margin仅左右有效，padding上下左右有效）；
3. 元素宽度由内容（里面文字或图片）撑开，且不可改变；
4. 行内元素只能容纳文本或其他行内元素；

更加详细的解释：常见的块级元素和内联(行内)元素 - 难得糊涂1998 - 博客园

                             乙只的博客-CSDN博客