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

引言

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

版本

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

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

引言

版本

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

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

2. HTML文档开头的 `!DOCTYPE` 有什么作用？

3. `!DOCTYPE` 有哪些声明方式？

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

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

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

CSS篇

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

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

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

4. CSS3新增特性

5. 伪元素与伪类的区别

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

7. CSS hack是什么？

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

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

JS篇

计算机网络篇

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

结语

Winer

引用和评论

Vue3全家桶 + Vite + TS + TSX尝鲜，先人一步!

CSS团队协作规范

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

开发插件集合

CSS 现在终于支持高度 auto 过渡动画了

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

引言

版本

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

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

2. HTML文档开头的 !DOCTYPE 有什么作用？

3. !DOCTYPE 有哪些声明方式？

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

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

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

CSS篇

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

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

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

4. CSS3新增特性

5. 伪元素与伪类的区别

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

7. CSS hack是什么？

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

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

JS篇

计算机网络篇

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

结语

Winer

引用和评论

Vue3全家桶 + Vite + TS + TSX尝鲜，先人一步!

CSS团队协作规范

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

开发插件集合

CSS 现在终于支持高度 auto 过渡动画了

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

2. HTML文档开头的 `!DOCTYPE` 有什么作用？

3. `!DOCTYPE` 有哪些声明方式？