前端面试题（一）

一、html和css

1、常用浏览器的内核分别是什么?
IE: trident 内核
Firefox：gecko 内核
Safari:webkit 内核
Opera:以前是 presto 内核，Opera 现已改用 Google Chrome 的 Blink 内核
Chrome:Blink(基于 webkit，Google 与 Opera Software 共同开发)

2、每个 HTML 文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？
‘<!DOCTYPE> ‘声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）

3、Quirks 模式是什么？它和 Standards 模式有什么区别
从 IE6 开始，引入了 Standards 模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指 定浏览器中的程度。在 IE6 之前 CSS 还不够成熟，所以 IE5 等之前的浏览器对 CSS 的支持很差，为了在即保证不破坏现有页面，又提供新的渲染机制，IE6 就假定 如果写了 DTD，就意味着这个页面将采用对 CSS 支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是 Quirks模式（怪癖模式，诡异模式，怪异模式）。

区别：

• 总体会有布局、样式解析和脚本执行三个方面的区别。
• 盒模型：在 W3C 标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在 Quirks 模式下，IE 的宽度和高度还包含了 padding 和 border。
• 设置行内元素的高宽：在 Standards 模式下，给等行内元素设置 wdith 和 height 都不会生效，而在 quirks 模式下，则会生效。
• 设置百分比的高度：在 standards 模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的
• 用margin:0 auto 设置水平居中：使用 margin:0 auto 在 standards 模式下可以使元素水平居中，但在 quirks 模式下却会失效。

4、div+css 的布局较 table 布局有什么优点？

• 改版的时候更方便 只要改 css 文件。
• 页面加载速度更快、结构化清晰、页面显示简洁。
• 表现与结构相分离。
• 易于优化（seo）搜索引擎更友好，排名更容易靠前。

5、 img 的 alt 与 title 有何异同？ strong 与 em 的异同？
alt(alt text):为不能显示图像、窗体或 applets 的用户代理（UA），alt 属性用来指定替换文字。替换文字的语言由lang 属性指定。(在 IE 浏览器下会在没有 title 时把 alt当成 tool tip 显示)
title(tool tip):该属性为设置该属性的元素提供建议性的信息。

strong:粗体强调标签，强调，表示内容的重要性
em:斜体强调标签，更强烈强调，表示内容的强调点

6、渐进增强和优雅降级之间的异同?
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个
非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰
减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

7、为什么利用多个域名来存储网站资源会更有效？

• CDN 缓存更方便
• 突破浏览器并发限制
• 节约 cookie 带宽
• 节约主域名的连接数，优化页面响应速度
• 防止不必要的安全问题

8、请谈一下你对网页标准和标准制定机构重要性的理解。
网页标准和标准制定机构都是为了能让 web 发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO 也会更好做，也不会因为滥用代码导致各种 BUG、安全问题，最终提高网站易用性。

9、cookies，sessionStorage 和 localStorage 的区别？
首先总的来说，三者都是用于持久化数据存储的手段，都是存储在浏览器端，且同源（协议，端口号，都域名相同）
localStorage和sessionStorage都是Web存储，大小5M左右，完全存储在客户端，它们是因为本地存储数据而存在
cookies也是存储在浏览器端的，大小不超过4k，作为http规范的一部分，它是通过浏览器的请求将数据传给服务器的。

区别：

• 有效期：
  1.localStorage ———-永久存储，永不失效，除非手动删除
  2.sessionStorage——–数据存储在窗口对象中，窗口关闭后，数据丢失
  3.cookies———只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
• 作用域
  1.sessionStorage不在不同的浏览器窗口共享，即使是同一个页面
  2.localStorage和cookies是在所有同源窗口*享的
• 操作方式
  1.sessionStorage和localeStorage主要通过js操作window.localStorage和window.sessionStorage这两个对象实例的属性和方法
  2.cookies需要前端开发者自己封装setCookies和getCookies
• 大小
  1.cookies数据始终在同源的http请求中携带（即使不需要），适合保存很小的数据 ，单个cookie保存的数据不 能超过4kb
  2.sessionStorage和localStorage不会自动的将数据发送给服务器，仅在本地存储，localStorage和sessionStorage的存储数据大小一般都是：5MB
• 安全性
  1.sessionStorage和localStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题；
  2.cookies安全性较低

10、简述一下 src 与 href 的区别。

• src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。
• src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。

<script src="js.js"></script>

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js 脚本放在底部而不是头部。

• href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

<link href="common.css" rel="stylesheet"/>

那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css，而不是使用@import 方式。

11、网页制作会用到的图片格式有哪些？
png-8，png-24，jpeg，gif，svg。
Webp：WebP 格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。
图片压缩体积大约只有 JPEG 的 2/3，并能节省大量的服务器带宽资源和数据空间。FacebookEbay 等知名网站已经开始测试并使用 WebP 格式。在质量相同的情况下，WebP 格式图像的体积要比 JPEG 格式图像小 40%

12、知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？
微格式（Microformats）是一种让机器可读的语义化 XHTML 词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。
优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。（应用范例：豆瓣，有兴趣自行 google）

13、在 css/js 代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次 js 请求一般情况下有哪些地方会有缓存处理？
dns 缓存，cdn 缓存，浏览器缓存，服务器缓存。

14、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

• 图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
• 如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
• 如果图片为 css 图片，可以使用 CSSsprite，SVGsprite，Iconfont、Base64 等技术。
• 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
• 如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

15、有哪项方式可以对一个 DOM 设置它的 CSS 样式？
外部样式表，引入一个外部 css 文件
内部样式表，将 css 代码放在 标签内部
内联样式，将 css 样式直接定义在 HTML 元素内部
优先级：内联样式>内部样式表>外部样式表

16、CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围内？
最基本的：
设置 display 属性为 none，或者设置 visibility 属性为 hidden
技巧性：
设置宽高为 0，设置透明度为 0，设置 z-index 位置在-1000

17、超链接访问过后 hover 样式就不出现的问题是什么？如何解决？
被点击访问过的超链接样式不在具有 hover 和 active 了,解决方法是改变 CSS 属性的
排列顺序: L-V-H-A（link,visited,hover,active）

18、什么是 Css Hack？ie6,7,8 的 hack 分别是什么？
针对不同的浏览器写不同的 CSS code 的过程，就是 CSS hack。
示例：

#test {
	width:300px;
	height:300px;
	background-color:blue; /*firefox*/
	background-color:red\9; /*all ie*/
	background-color:yellow; /*ie8*/
	+background-color:pink; /*ie7*/
	_background-color:orange; /*ie6*/ }
	:root #test { background-color:purple\9; } /*ie9*/
	@media all and (min-width:0px){ #test {background-color:black;} } /*opera*/
	@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome
	and safari*/

19、请用 Css 写一个简单的幻灯片效果页面
使用 animation 动画实现一个简单的幻灯片效果。

div.ani
/**css**/
.ani{
	width:480px;
	height:320px;
	margin:50px auto;
	overflow: hidden;
	box-shadow:0 0 5px rgba(0,0,0,1);
	background-size: cover;
	background-position: center;
	-webkit-animation-name: "loops";
	-webkit-animation-duration: 20s;
	-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes "loops" {
	0% {background:url(1.jpg)no-repeat;}
	25% {background:url(2.jpg)no-repeat;}
	50% {background:url(3.jpg)no-repeat;}
	75% {background:url(4.jpg)no-repeat;}
	100% {background:url(5.jpg)no-repeat;}
}

20、行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？
块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
和相邻的内联元素在同一行;宽度(width)、高度(height)、内边距的 top/bottom(padding-top/padding-bottom)和外边距的 top/bottom(margin-top/margin-bottom)都不可改变（也就是 padding 和 margin 的left 和 right 是可以设置的），就是里面文字或图片的大小。
那么问题来了，浏览器还有默认的天生 inline-block 元素（拥有内在尺寸，可设置高宽，
但不会自动换行），有哪些？
答案：

<input> <img> <button> <texterea> <label>

21、什么是外边距重叠？重叠的结果是什么？
外边距重叠就是 margin-collapse。
在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一
个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠
外边距。
折叠结果遵循下列计算规则：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。

22、rgba()和 opacity 的透明效果有什么不同？
rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的
所有内容的透明度。
而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明
效果！）

23、css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
垂直方向：line-height
水平方向：letter-spacing
那么问题来了，关于 letter-spacing 的妙用知道有哪些么？
答案:可以用于消除 inline-block 元素间的换行符空格间隙问题。

24、如何垂直居中一个浮动元素？

// 方法一：已知元素的高宽
#div1{
	background-color:#6699FF;
	width:200px;
	height:200px;
	position: absolute; //父元素需要相对定位
	top: 50%;
	left: 50%;
	margin-top:-100px ; //二分之一的 height，width
	margin-left: -100px;
}
//方法二:未知元素的高宽
#div1{
	width: 200px;
	height: 200px;
	background-color: #6699FF;
	margin:auto;
	position: absolute; //父元素需要相对定位
	left: 0;
	top: 0;
	right: 0;
	bottom:0;
}
/*那么问题来了，如何垂直居中一个<img>?（用更简便的方法。）*/
#container //<img>的容器设置如下
{
	display:table-cell;
	text-align:center;
	vertical-align:middle;
}

25、px 和 em 的区别。
px 和 em 都是长度单位，区别是，px 的值是固定的，指定是多少就是多少，计算比较容易。
em 得值不是固定的，并且 em 会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。

26、描述一个”reset”的 CSS 文件并如何使用它。知道 normalize.css 吗？你了解他们的不同之处？
重置样式非常多，凡是一个前端开发人员肯定有一个常用的重置 CSS 文件并知道如何使用它们。他们是盲目的在做还是知道为什么这么做呢？原因是不同的浏览器对一些元素有不同的默认样式，如果你不处理，在不同的浏览器下会存在必要的风险，或者更有戏剧性的性发生。你可能会用 Normalize 来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。在这一方面，无法做每一个复位重置。它也确实有些超过一个重置，它处理了你永远都不用
考虑的怪癖，像 HTML 的 audio 元素不一致或 line-height 不一致。

27、Sass、LESS 是什么？大家为什么要使用他们？
他们是 CSS 预处理器。他是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。例如 Less 是一种动态样式语言. 将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可一在服务端运行(借助 Node.js)。
为什么要使用它们？
结构清晰，便于扩展。
可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
可以轻松实现多重继承。
完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

28、display:none 与 visibility:hidden 的区别是什么？
display : 隐藏对应的元素但不挤占该元素原来的空间。
visibility: 隐藏对应的元素并且挤占该元素原来的空间。
即是，使用 CSS display:none 属性后，HTML 元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用 visibility:hidden 属性后，HTML 元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

29、CSS 中 link 和@import 的区别是：
Link 属于 html 标签，而@import 是 CSS 中提供的在页面加载的时候，link 会同时被加载，而@import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS
@import 只有在 ie5 以上才可以被识别，而 link 是 html 标签，不存在浏览器兼容性问题Link 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）

30、简介盒子模型：
CSS 的盒子模型有两种：IE 盒子模型、标准的 W3C 盒子模型模型
盒模型：内容、内边距、外边距（一般不计入盒子实际宽度）、边框

31、为什么要初始化样式
由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同浏览器之间的显示差异
但是初始化 CSS 会对搜索引擎优化造成小影响

32、BFC 是什么?
BFC（块级格式化上下文），一个创建了新的 BFC 的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。在同一个 BFC 中的两个相邻的盒子在垂直方向发生 margin 重叠的问题
BFC 是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用

33、html 语义化是什么？
当页面样式加载失败的时候能够让页面呈现出清晰的结构有利于 seo 优化，利于被搜索引擎收录（更便于搜索引擎的爬虫程序来识别）便于项目的开发及维护，使 html 代码更具有可读性，便于其他设备解析。

34、Doctype 的作用？严格模式与混杂模式的区别？

用于告知浏览器该以何种模式来渲染文档严格模式下：页面排版及 JS 解析是以该浏览器支持的最高标准来执行混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容

35、IE 的双边距 BUG：块级元素 float 后设置横向 margin，ie6 显示的 margin比设置的较大。
解决：加入_display：inline

36、HTML 与 XHTML——二者有什么区别？

• 所有的标记都必须要有一个相应的结束标记
• 所有标签的元素和属性的名字都必须使用小写
• 所有的 XML 标记都必须合理嵌套
• 所有的属性必须用引号 “” 括起来
• 把所有 < 和 & 特殊符号用编码表示
• 给所有属性赋一个值
• 不要在注释内容中使用 “–”
• 图片必须有说明文字

37、html 常见兼容性问题？

• 双边距 BUG float 引起的 使用 display
• 3 像素问题 使用 float 引起的 使用 dislpay:inline -3px
• 超链接 hover 点击后失效 使用正确的书写顺序 link visited hover active
• Ie z-index 问题 给父级添加 position:relative
• Png 透明 使用 js 代码 改
• Min-height 最小高度 ！Important 解决’
• select 在 ie6 下遮盖 使用 iframe 嵌套
• 为 什 么 没 有 办 法 定 义 1px 左 右 的 宽 度 容 器 （ IE6 默 认 的 行 高 造 成 的 ， 使 用over:hidden,zoom:0.08 line-height:1px）
• IE5-8 不支持 opacity，解决办法：

.opacity {
	opacity: 0.4
	filter: alpha(opacity=60); /* for IE5-7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE
	8*/
}

• IE6 不支持 PNG 透明背景，解决办法: IE6 下使用 gif 图片

38、对 WEB 标准以及 W3C 的理解与认识
答：标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链 css 和 js 脚本、
结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更
广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提
供打印版本而不需要复制内容、提高网站易用性。

39、行内元素有哪些?块级元素有哪些?CSS 的盒模型?
答：块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css 盒模型:内容，border ,margin，padding

40、前端页面有哪三层构成，分别是什么?作用是什么?
结构层 Html 表示层 CSS 行为层 js。

41、Doctype 作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
（1）<!DOCTYPE> 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
（2）严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
（3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以
防止站点无法工作。
（4）DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。

42、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
（1）CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认的 display 值，比如 div 默认 display 属性值为“block”，成为“块级”元素；span 默认display 属性值为“inline”，是“行内”元素。
（2）行内元素有：a b span img input select strong（强调的语气） 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）知名的空元素：

<br><hr><img><input><link><meta>鲜为人知的是： <area><base><col><command>
<embed><******><param><source><track><wbr>

48、CSS 的盒子模型？
（1）两种， IE 盒子模型、标准 W3C 盒子模型；IE 的 content 部分包含了 border 和pading;
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).

49、哪些 css 属性可以继承？
可继承： font-size font-family color, ul li dl dd dt;
不可继承 ：border padding margin width height ;

50、css 优先级算法如何计算？
!important > id > class > 标签
!important 比 内联优先级高
*优先级就近原则，样式定义最近者为准;
*以最后载入的样式为准;

js基础

1.javascript 的 typeof 返回哪些数据类型
基本数据类型： number boolean underfind string null
typeof返回的类型：object number function boolean underfind string

typeof null; //object
typeof isNaN; //
typeof isNaN(123)
typeof [];   //object
Array.isARRAY(); es5
toString.call([]); //”[object Array]” var arr=[];
arr.constructor; //Array