引言
又是一轮金九银十的校招黄金期,借此更新部分前端面试题,并提供详解(答案不保证百分百正确,但我自信,可参考性还是很高的),希望对大家会有帮助^~^!
版本
- 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
有什么作用?
!DOCTYPE
作用是告诉浏览器用什么样的规范来解析这段文档。
3.
!DOCTYPE
有哪些声明方式?
!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部分的相关基础知识,后续,也就是近几天会更新余下部分,感觉有用的点个赞吧 ^_^