【HTML】两道简单的面试题

1. 如何理解HTML语义化？

两图的区别：

• 1.左边用的全是div标签，右边是语义化标签，那么什么是语义化标签呢？比如标题是h1,容器是div,p是段落，ul是列表，li是列表项。两段代码内容一致，但是通过编写css样式控制，他们都可以产生效果完全一样的页面。但是推荐第二种写法，能够很好理解，比较可读比较易读，对人友好！这就是语义化好处之一；
• 2.第二个问题就是如果代码不是给人看，而是给机器看(搜索引擎)，比如说搜索引擎的爬虫，拿到左边/右边的代码，搜索引擎在分析左边的代码的时候根本分析不出重点，为什么呢？因为它是机器，不是人，它只认识标签！但是如果是右边的代码呢？那就好说了，h1就是大标题，比如这个网页中，最重要的内容就是h1这个大标题，再往下就是段落和列表。搜索引擎对于这个结构就很容易分清主次关系，也很容易搜索出来并返回给大家。

所以说HTML语义化的好处就在于两点：

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

遇到这个问题，通过这两点来回答，并举上面例子，就没问题了！

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

• 块级元素：display:block/table;独占一行，不管内容多少都是独占一行；有div、h1-h6、table、ul、ol、p等
• 内联元素: display:inline/inline-block;不会独占一行，会挨着往后排，直到浏览器的边缘换行为止；有span、img、input、button等