【前端面试题】【伪类】【浏览器内核】【HTML5】【语义化】

问题：什么是【伪类】和【伪元素】

参考答案：

伪类：用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的。

举例：当用户悬停在指定元素时，可以通过:hover来描述这个元素的状态，虽然它和一般css相似，可以为 已有元素添加样式，但是它只有处于DOM树无法描述的状态下才能为元素添加样式，所以称为伪类。

伪元素：用于创建一些不在DOM树中的元素，并为其添加样式。

举例：我们可以通过:before来在一个元素之前添加一些文本，并为这些文本添加样式，虽然用户可以看见 这些文本，但是它实际上并不在DOM文档中。

---

问题：什么是【浏览器内核】？常用的浏览器内核有哪些？

参考答案：

浏览器内核主要分成两部分：渲染引擎(Layout Engine或Rendering Engine)和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。

JS引擎：解析和执行javascript来实现网页的动态效果。

常见的浏览器内核：

内核	代表浏览器
Trident	IE
Gecko	Mozilla Firefox
Webkit	Safari
Blink	chrome、Opera

---

问题：HTML5新增了哪些特性？移除了哪些元素？如果区分HTML和HTML5

参考答案：

新增特性（挑几个重要的）：

• 新增选择器 document.querySelector、document.querySelectorAll
• 媒体播放 video、 audio
• 本地存储 localStorage 和 sessionStorage
• 语意化标签 article、footer、header、nav、section
• 增强表单控件 calendar、date、time、email、url、search
• 地理位置 Geolocation
• 新技术 webworker、 websocket
• 绘画 canvas

移除特性：

• 纯表现的元素：basefont big center font s strike tt u
• 性能较差元素：frame frameset noframes

如何区分：DOCTYPE声明的方式

---

问题：什么是HTML语义化？语义化的好处是什么？

参考答案：

        在HTML5出来之前，我们习惯于用div来表示页面的章节或者不同模块，但是div本身是没有语义的。HTML5中加入了一些语义化标签，来更清晰的表达文档结构。

语义化的目的：更清晰地表达文档结构。

语义化的优点：

• 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
• 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
• 方便屏幕阅读器解析，如盲人阅读器根据语义渲染网页
• 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

---

问题：cookies，sessionStorage和localStorage的共同点和不同点

参考答案：

共同点：三者都是保存在浏览器端，且是同源的。

区别：

①保存方式不同

cookies始终在同源http请求中携带，即在浏览器和服务器间来回传递，而sessionstorage和localstorage不会自动把数据发给服务器，仅在本地保存

②存储大小的限制不同

cookie保存的数据很小，不能超过4k，而sessionstorage和localstorage保存的数据大，可达到5M

③数据的有效期不同

cookie在设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭。sessionstorage仅在浏览器窗口关闭之前有效。localstorage始终有效，窗口和浏览器关闭也一直保存，用作长久数据保存

④作用域不同

cookie在所有的同源窗口都是共享；sessionstorage不在不同的浏览器共享，即使同一页面；localstorage在所有同源窗口都是共享

---

资料来源于网络，持续更新中......