WEB前端开发工程师面试题_前端开发工程师面试题资源-CSDN下载

5星 · 超过95%的资源需积分: 34 53 浏览量 2013-04-14 14:56:19 上传评论收藏 66KB DOC 举报

### WEB前端开发工程师面试题详解 #### 一、Doctype及其模式 **1. Doctype的概念及作用** Doctype，即文档类型声明，用于告知浏览器文档所遵循的HTML或XHTML规范。它通常位于文档的最前端，出现在`<html>`标签之前。 **2. Doctype的类型** - **严格版本** (`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">`)：此声明告诉浏览器使用严格的HTML 4.01标准来解析文档。 - **过渡版本** (`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">`)：此声明允许使用一些非标准的HTML元素和属性，提供了一种向后兼容的方式。 - **基于框架的HTML文档** (`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">`)：适用于包含框架集的文档。 **3. 标准模式与混杂模式** - **标准模式**：浏览器根据W3C的标准和规范渲染页面。 - **混杂模式**（quirks mode）：浏览器使用一种较为宽松的向后兼容的方式显示页面，以模拟旧式浏览器的行为。 **4. 如何触发两种模式** - 如果文档包含了正确的Doctype声明，则浏览器通常会使用标准模式渲染页面。 - 如果文档缺少Doctype声明或Doctype声明不正确，则浏览器可能会进入混杂模式。 **5. 区分两种模式的意义** 区分两种模式对开发者来说非常重要，因为它直接影响到页面的布局和表现。在标准模式下，浏览器能够更准确地解析和渲染页面，而在混杂模式下则可能产生布局问题。 #### 二、HTML元素分类及CSS盒模型 **1. 行内元素与块级元素** - **行内元素**：不会独占一行空间，如`a`、`span`、`img`等。 - **块级元素**：默认情况下会独占一行空间，如`div`、`p`、`h1`等。 **2. CSS盒模型** CSS盒模型定义了元素的布局结构，主要包括： - **Margin（外边距）**：位于元素边界之外的空间。 - **Border（边界）**：围绕元素内容的线框。 - **Padding（内边距）**：位于元素边界和内容之间的空间。 - **Width（宽度）**：元素内容本身的宽度。 #### 三、CSS引入方式及其区别 **1. CSS引入方式** - **使用`<link>`标签**：将外部CSS文件链接到HTML文档中。 ```html <link rel="stylesheet" type="text/css" href="example.css"> ``` - **使用`@import`引入**：在`<style>`标签内部使用。 ```css @import url("example.css"); ``` - **使用`<style>`标签**：直接在HTML文档内部定义样式。 ```html <style> body { color: #666; background: #f0f0f0; font-size: 12px; } </style> ``` - **使用`style`属性**：直接在HTML元素上定义样式。 ```html <p style="color: red; font-size: 16px;">Hello, World!</p> ``` **2. `link`与`@import`的区别** - **加载时机**：`link`方式的CSS会在页面加载时立即加载并应用，而`@import`则是在页面DOM构建完成后才加载，可能导致页面先以默认样式显示然后才切换为实际样式的情况。 - **使用场景**：`link`更适合用于外部样式表的引入，而`@import`适合在内部样式表中引入其他样式表。 #### 四、CSS选择器与继承属性 **1. CSS选择器** - **通配选择符**：`* { /* rules */ }` 选择文档中的所有元素。 - **类型选择符**：`E { /* rules */ }` 选择特定类型的元素。 - **属性选择符**：`E[attr]`、`E[attr=value]`、`E[attr~=value]`、`E[attr|=value]` 选择具有指定属性或属性值的元素。 - **包含选择符**：`E1 E2 { /* rules */ }` 选择E1元素下的E2元素。 - **子对象选择符**：`E1 > E2 { /* rules */ }` 选择E1元素的直接子元素E2。 **2. 可继承的CSS属性** 下列属性是可以被继承的： - `color` - `font-family` - `font-size` - `font-style` - `font-weight` - `letter-spacing` - `line-height` - `text-align` - `text-decoration` - `text-transform` - `white-space` - `word-spacing` **3. 优先级算法** CSS样式的优先级取决于选择器的类型和范围，其计算规则如下： - 内联样式（如`style`属性）具有最高的优先级。 - ID选择器（如`#myId`）次之。 - 类选择器（如`.myClass`）、属性选择器和伪类（如`:hover`）具有相同的优先级。 - 元素选择器（如`div`）和伪元素（如`::before`）具有最低的优先级。 - 使用`!important`声明的样式具有更高的优先级，但这种做法应尽量避免。 **4. 内联样式与`!important`的优先级** 当内联样式与`!important`声明发生冲突时，`!important`具有更高的优先级。然而，在实践中，应当尽可能避免使用`!important`，因为它会使得样式表难以维护和调试。以上是对题目中提到的关键知识点的详细解释。这些概念对于理解和掌握前端开发的基础至关重要。

资源推荐

资源详情

资源评论