博客

2019秋招你必须知道的前端知识

  • Post author:
  • Post category:其他


引言

又是一轮金九银十的校招黄金期，借此更新部分前端面试题，并提供详解（答案不保证百分百正确，但我自信，可参考性还是很高的），希望对大家会有帮助^~^！

版本

  • v0.1：添加HTML相关面试笔试题 + 添加一些CSS的笔试题

HTML篇 （2018-9-15 19:10）

1. 你做过的网站在哪些浏览器中运行过？他们的内核分别是什么？它们的兼容性样式前缀是什么？

IE:      trident    -ms-
chrome:  webkit     -webkit-
safari:  webkit     -webkit-
firefox: gecko      -moz-
opera:   blink      -o-

2. HTML文档开头的

!DOCTYPE

有什么作用？

作用是告诉浏览器用什么样的规范来解析这段文档。

3.

!DOCTYPE

有哪些声明方式？

分为 H5、HTML 4.01、XHTML 1.0、XHTML 1.1:
1. H5： <!DOCTYPE html> 
2. HTML 4.01 严格模式：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
3. HTML 4.01 过度模式：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4. HTML 4.01 框架模式：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
5. XHTML 1.0 严格模式：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
6. XHTML 1.0 过度模式：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
7. XHTML 1.0 框架模式：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
8. XHTML 1.1：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

4. 什么是怪异模式？怪异模式与标准模式有什么区别？

在

IE6之前

，IE浏览器对CSS的支持很差，在IE6时，为了对CSS有着更好的支持，它将HTML文档首部的

DTD

作为一个参数，若

DTD存在

，则

使用更好的CSS支持

进行网页的渲染，若

没有DTD

，则

使用兼容之前的CSS解析规则

，这就是怪异模式。

怪异模式与标准模式的区别：

主要是盒模型上的区别：怪异模式下，元素的宽度和高度

包含了padding、border与content(元素内容)

，而标准模式下的盒模型元素宽度和高度

只包含元素的content

，

不包含padding与border

。

5. 什么是web语义化？它有什么好处？

web语义化就是

使用语义化的HTML标签

描述文档结构。

优点：

1.一个遵守web语义化规则的文档，往往具有的

html标签相对较少

，将会被更

快速地被解析

；

2.

丢失样式表

的支持下，页面同样

呈现良好的结构

，往往归功于浏览器对H5标签的默认样式支持；

3.有

利于SEO

，更容易被爬虫机器人根据标签抓取主要内容；

4.

屏幕阅读器等设备

将会更容易阅读网页，

提高了网站的可访问性

；

6. meta标签的作用是什么？


提供页面的元信息

，比如标题、描述、关键词等信息，以及不同平台的适配，如移动端、win8系统，还有有关缓存的相关信息。

CSS篇

// 2018-9-18 22:16

1.请描述下什么是盒模型？

基础的一般回答：盒模型主要构成部分是由

margin、border、padding、content

四部分构成

更好的回答是：盒模型主要分为

IE低版本浏览器的怪异盒模型

与现在的

标准盒模型

，在上部分的基础上，再增加回答：在怪异盒模型中，当css设置

width

时，其实是设置了

boeder+padding+content

的宽度，而标准的盒模型的width则是

只包含content

部分；属性

box-sizing

则可以选择使用哪种版本的盒模型规范（

content-box，border-box

）。

这样在回答了盒模型的基础上，你自己也延伸出了一些自己关于盒模型更深入的理解。

2.行内元素、块级元素、行内块级元素它们分别有什么特点？

1. 行内元素：一般

无法设置width与height

属性，且它们可以共同占有

同一行

，

可以设置padding与margin在横向（left、right）

的间距，但

无法设置纵向上的间距（top、bottom）

。

2. 块级元素：可以设置width、height，独占一行，可以设置margin、padding

3. 行内块级元素： 可以设置width、height，可以共用占用同一行，可以设置margin、padding

3. css选择器的优先级（含权重）


!important

(这个其实不算选择器) >

内联样式

(也不算) >

ID选择器（1000）

>

Class选择器（100）

=

属性选择器（100）

=

伪类选择器（100）

>

标签选择器（10）

>

通配符(*)（1）

>

浏览器默认样式


权重的计算方式： 有哪些选择器就按照

各自权重相加

（#a .b {} -> 1000 + 100 = 1100）

4. CSS3新增特性

1. 伪类 =>

:before :after :disabled :nth-child() :first-child

and so on! 

 这里可以吹一个历史问题： 在CSS3之前是存在`:before :after`的，在这里为什么说是新增的呢？因为CSS3之前的`:before :after`是`伪元素`，而CSS3更新时`规范伪类的写法`是`（：+ XXX）`，因此以前的`:before :after 伪元素`被更名为`::before ::after`，且两个冒号`::`是CSS3的伪元素写法

2. 媒体查询 =>

@media screen and (max-width: 780px)

当然还有其他写法，比如

区分横竖屏


3. 动画 =>

transform、transition、@keyframes{}

等

4. 颜色渐变

5. 阴影 =>

元素阴影

与

文字阴影


6. flex => 布局方式，主要用于移动端

7. 圆角 =>

border-radius


8. 透明度 =>

rgba

5. 伪元素与伪类的区别

伪元素是可以在当前元素的前或后

虚拟添加一个伪元素

，并且可以设置其样式，通常用于做

动画效果

，或者

清除浮动


伪类是元素通过一些特定的操作触发事件，然后改变相应的样式。

6. 如何做到兼容IE浏览器的CSS样式

1. CSS hack : 条件hack、属性hack、选择器前缀hack

2. 在双核浏览器（IE内核：trident，chrome内核：blink–基于webkit，……）中，可以设置强制使用某种内核 

    // 强制Chromium内核，作用于360浏览器、QQ浏览器等国产双核浏览器：
    <meta name="renderer" content="webkit"/>
    // 强制Chromium内核，作用于其他双核浏览器：
    <meta name="force-rendering" content="webkit"/>
    // 如果有安装 Google Chrome Frame 插件则强制为Chromium内核，否则强制本机支持的最高版本IE内核，作用于IE浏览器：
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>

7. CSS hack是什么？

1. 条件hack：通过if判断IE浏览器版本，应用不同的样式 

    <!--[if <keywords>? IE <version>?]>
        HTML代码块
    <![endif]-->
    大于IE6（大于：gt，大于等于：gte，小于：lt，小于等于：lte，非：！）
    <!--[if gt IE 6]>
    <style>
    .test{color:red;}
    </style>
    <![endif]-->

2. 属性hack： 为某个css属性设置hack 

    .test {
        color: #090\9; /* For IE8+ */
        *color: #f00;  /* For IE7 and earlier */
        _color: #ff0;  /* For IE6 and earlier */
    }

3. 选择器hack 

* html .test { color: #090; }       /* For IE6 and earlier */
* + html .test { color: #ff0; }     /* For IE7 */
.test:lang(zh-cmn-Hans) { color: #f00; }  /* For IE8+ and not IE */
.test:nth-child(1) { color: #0ff; } /* For IE9+ and not IE */

8. CSS精灵是什么（CSS sprites）

一种

图片处理方式

，将多张图片合并到同一张图片上，通过CSS3的

background-position、background-repeat、background-image

来定位到某个特定的图片区域。减少了http请求的数量，同时减少了图片的总体积，有利于页面的优化。

9. 请解释下什么是内边距折叠？怎么避免呢？

JS篇

... ...

计算机网络篇

... ...

… … (也许会添加框架系列，也可能夭折..)

结语

今天就先更新完HTML部分的相关基础知识，后续，也就是近几天会更新余下部分，感觉有用的点个赞吧 ^_^