引言
又是一轮金九银十的校招黄金期，借此更新部分前端面试题，并提供详解（答案不保证百分百正确，但我自信，可参考性还是很高的），希望对大家会有帮助^~^！
版本
- 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：
2. HTML 4.01 严格模式：
3. HTML 4.01 过度模式：
4. HTML 4.01 框架模式：
5. XHTML 1.0 严格模式：
6. XHTML 1.0 过度模式：
7. XHTML 1.0 框架模式：
8. XHTML 1.1：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浏览器等国产双核浏览器：
// 强制Chromium内核，作用于其他双核浏览器：
// 如果有安装 Google Chrome Frame 插件则强制为Chromium内核，否则强制本机支持的最高版本IE内核，作用于IE浏览器：
7. CSS hack是什么？
1. 条件hack：通过if判断IE浏览器版本，应用不同的样式
大于IE6（大于：gt，大于等于：gte，小于：lt，小于等于：lte，非：！）
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部分的相关基础知识，后续，也就是近几天会更新余下部分，感觉有用的点个赞吧 ^_^