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部分的相关基础知识,后续,也就是近几天会更新余下部分,感觉有用的点个赞吧 ^_^