BAT前端面试题大全资源-CSDN文库

需积分: 9 197 浏览量 2019-04-29 18:52:29 上传评论收藏 766KB PDF 举报

### BAT前端面试题知识点详解 #### 一、Doctype作用及模式区分 1. **Doctype的作用**： - Doctype声明通常位于HTML文档的最前面，在`<html>`标签之前，用来告知浏览器的解析器应该用何种文档类型规范来解析此文档。 - 例如，`<!DOCTYPE html>`用于HTML5文档，它告诉浏览器遵循最新的HTML5标准来解析文档。 2. **严格模式与混杂模式的区别**： - **严格模式**：在这种模式下，页面的布局和JavaScript的运行都是按照当前浏览器支持的最高标准进行的。这有助于确保网页在不同浏览器中的表现一致性。 - **混杂模式**：混杂模式则以一种较为宽松且向后兼容的方式来显示页面，模拟老式浏览器的行为以避免页面因某些旧的标准而不正常显示。 - 如果文档中缺少Doctype声明或者声明格式不正确，则浏览器可能会进入混杂模式。 3. **意义**： - 正确使用Doctype声明可以确保页面按照预期的方式呈现，避免因浏览器解析模式的不同而导致的显示问题。 #### 二、行内元素与块级元素 1. **行内元素**：主要包括`a`、`b`、`span`、`img`、`input`、`select`、`strong`等。这些元素的特点是不会独占一行，可以与其他行内元素在同一行显示。 2. **块级元素**：如`div`、`ul`、`ol`、`li`、`dl`、`dt`、`dd`、`h1`到`h6`、`p`等。这些元素通常会独占一行，并且可以包含其他行内元素或块级元素。 #### 三、Link与@import的区别 1. **语法区别**： - `link`是XHTML标签的一部分，用于在文档中引入外部资源，如CSS文件。 - `@import`是CSS提供的一种导入其他样式表的方式，只能用于导入样式。 2. **加载时机**： - 使用`link`引入的CSS会在页面加载时同步加载，即页面渲染过程中就会加载CSS。 - 使用`@import`导入的CSS则是在页面完全加载完毕后才加载，这可能会导致页面在CSS加载前有一段时间显示不完全。 3. **兼容性差异**： - `@import`仅在IE5以上的浏览器中有效。 - `link`作为XHTML标签，具有良好的兼容性，适用于所有现代浏览器。 4. **权重区别**： - 一般情况下，通过`link`引入的CSS样式权重高于通过`@import`引入的样式。 #### 四、浏览器内核 1. **IE浏览器**：使用Trident内核。 2. **Mozilla Firefox**：使用Gecko内核。 3. **Google Chrome**：使用Blink内核，它是基于WebKit的一个分支。 4. **Opera**：早期版本使用Presto内核，但在较新版本中转为了Blink内核。 #### 五、HTML5的新特性与兼容性处理 1. **新特性**：HTML5增加了许多新功能，如`canvas`用于绘制图形，`video`和`audio`用于媒体播放，`localStorage`用于本地数据存储，语义化的标签如`article`、`footer`等，以及新的表单控件如日期选择器、邮箱输入框等。 2. **兼容性处理**：对于HTML5的新标签，可以在旧版浏览器中使用polyfills来实现兼容，或者使用JavaScript检测浏览器是否支持这些新特性，如果不支持，则采用备用方案。 #### 六、语义化的重要性 1. **定义**：HTML语义化是指使用适当的HTML标签来构建页面内容，使得内容具有明确的意义。 2. **优点**： - 提高了浏览器、搜索引擎解析的准确性。 - 即使没有CSS样式，也能保持良好的可读性和结构清晰度。 - 有利于SEO优化。 - 方便代码维护和阅读。 #### 七、HTML5离线存储 1. **方式**：HTML5提供了两种主要的离线存储机制：`localStorage`用于长期存储数据，即使浏览器关闭后数据也不会丢失；`sessionStorage`则在浏览器关闭后自动删除数据。 #### 八、iframe的缺点 1. **阻塞事件**：iframe可能会影响主页面的`onload`事件。 2. **连接限制**：iframe与主页面共享连接池，这可能会限制页面的并发加载能力。 #### 九、Cookies、SessionStorage与LocalStorage的区别 1. **Cookies**：存储在客户端，随HTTP请求发送到服务器，可用于身份验证。 2. **SessionStorage**：存储在客户端，仅在一个会话周期内有效。 3. **LocalStorage**：存储在客户端，数据持久化，即使关闭浏览器后数据依然存在。 #### 十、CSS选择器及其优先级 1. **选择器类型**： - ID选择器（`#myid`） - 类选择器（`.myclassname`） - 标签选择器（`div`, `h1`, `p`） - 相邻兄弟选择器（`h1 + p`） - 子元素选择器（`ul > li`） - 后代选择器（`li a`） - 通用选择器（`*`） - 属性选择器（`a[rel="external"]`） 2. **可继承的属性**：`font-size`, `font-family`, `color`, `line-height`, `text-align`, `letter-spacing`, `word-spacing`, `white-space`, `vertical-align`, `list-style`等。 3. **不可继承的属性**：`border`, `padding`, `margin`, `width`, `height`等。 4. **优先级计算**： - `!important`拥有最高的优先级。 - ID选择器优先级高于类选择器。 - 类选择器优先级高于标签选择器。 - 标签选择器优先级高于通用选择器。 - 在相同优先级的情况下，样式定义距离目标元素更近的优先级更高。 - 最后加载的样式表具有更高的优先级。 #### 十一、CSS3新增伪类 1. **伪类**：如`:not()`, `:nth-child()`, `:nth-last-child()`, `:nth-of-type()`, `:nth-last-of-type()`, `:first-of-type`, `:last-of-type`, `:only-of-type`, `:empty`, `:target`, `:enabled`, `:disabled`, `:checked`, `:indeterminate`, `:valid`, `:invalid`, `:in-range`, `:out-of-range`, `:required`, `:optional`, `:read-only`, `:read-write`, `:placeholder-shown`, `:autofill`, `:autofilled`, `:fullscreen`, `:picture-in-picture`, `:default`, `:hover`, `:focus`, `:active`, `:visited`, `:link`等。 2. **用途**：这些伪类主要用于根据元素的状态或者位置来进行样式设置。

资源推荐

资源详情

资源评论