HTML部分
1.Doctype作用？标准模式与兼容模式如何区分？
<!DOCTYPE>告知浏览器的解析器解析文档的标准。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。标准模式的页面渲染和JS运行都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
2.HTML5 为什么只需要写<!DOCTYPE HTML>？
HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为。w3c 和 WHATWG合作制定的新标准。
3.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
每个元素都有默认的display值disblock 块级元素，inline 行内元素。
（1）行内元素有：a b span img input select strong（强调的语气）
（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p（3）常见的空元素：
<br> <hr> <img> <input> <link> <meta>
4.页面导入样式时，使用link和@import有什么区别？
（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
5.浏览器内核的理解？
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎
渲染引擎负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等）渲染。
Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey，Firefox 。
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]。
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]。
6.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
绘画 canvas;
用于媒介回放的 video 和 audio 元素;
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除;
语意化更好的内容元素，比如 article、footer、header、nav、section;
表单控件，calendar、date、time、email、url、search;
新的技术webworker, websockt, Geolocation;
区分：头部标准，标签。
E8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式。
当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
7.HTML5的离线储存怎么使用，工作原理能不能解释一下？
在用户断网时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
如何使用：
1、页面头部像下面一样加入一个manifest的属性；
2、在cache.manifest文件的编写离线存储的资源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3、在离线状态时，操作window.applicationCache进行需求实现。
8.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。
9.简述一下你对HTML语义化的理解？
使文档结构化，让浏览器爬虫（依赖于标签来确定上下文和各个关键字的权重）更好的理解标签意思。即使没有样式也页面也能呈现出很好地内容结构。用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页。语义化可以减少编码差异，增加可读性。
10.请描述一下 cookies，sessionStorage 和 localStorage 的区别？
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
存储大小：
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
有期时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
11.iframe有那些缺点？
*iframe会阻塞主页面的Onload事件；
*搜索引擎的检索程序无法解读这种页面，不利于SEO;
*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript
动态给iframe添加src属性值，这样可以可以绕开以上两个问题。
12.Label的作用是什么？是怎么用的？
label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。for 属性关联 表单 的 id 属性。
13.HTML5的form如何关闭自动完成功能？
给不想要提示的 form 或下某个input 设置为 autocomplete=off。
14.如何实现浏览器内多个标签页之间的通信? (阿里)
调用localstorge、cookies等本地存储方式
webSocket如何兼容低浏览器？(阿里)
Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的 XHR
15.如何在页面上实现一个圆形的可点击区域？
border-radius js canvas
16.title与h1的区别、b与strong的区别、i与em的区别？
对于搜索引擎来说em和strong比i和b要重视的多。
1.H1是大标题的意思。一般出现网页文章页面，作用如同一张报纸的大标题，使用读者在没看内容之前就
大概了解本文的旨意，它是直接给用户看的。而且在SEO中，搜索引擎也非常重视H1，目的是告诉搜索引擎，这
个地方的内容很重要,H1要求贴近文章内容，突出主题，言简意赅。
2.title是用来面对的是搜索引擎和用户，其范围相对于H1来说要广，title中可以包含H1，在搜索引擎中
tiele的权重要高于H1;一般来讲，H1做到突出主题目，title修饰主题关键字。
CSS部分
1.介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
CSS盒子模型：由四个属性组成的外边距(margin)、内边距(padding)、边界(border)、内容区(width和height);
标准的CSS盒子模型和低端IE CSS盒子模型不同：宽高不一样
标准的css盒子模型宽高就是内容区宽高；
低端IE css盒子模型宽高 内边距﹢边界宽﹢内容区；
2.CSS选择符有哪些？哪些属性可以继承？
1) id选择器(# myid)
2) 类选择器(.myclassname)
3) 标签选择器(div, h1, p)
4) 相邻选择器(h1 + p)
5) 子选择器(ul > li)
6) 后代选择器(li a)
7) 通配符选择器( * )
8) 属性选择器(a[rel = "external"])
9) 伪类选择器(a: hover, li:nth-child)
可继承的样式：
1) font-size
2) font-family
3) color
4) text-indent
不可继承的样式：
1) border
2) padding
3) margin
4) width
5) height
优先级算法：
1) 优先级就近原则，同权重情况下样式定义最近者为准;
2) 载入样式以最后载入的定位为准;
3) 3.!important > id > class > tag
4) important 比 内联优先级高，但内联比 id 要高
CSS3新增伪类举例：
1) p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
2) p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
3) p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
4) p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
5) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
6) :enabled :disabled 控制表单控件的禁用状态。
7) :checked 单选框或复选框被选中。
CSS3有哪些新特性？
1) CSS3实现圆角（border-radius），阴影（box-shadow），
2) 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
3) transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
4) 增加了更多的CSS选择器 多背景 rgba
5) 在CSS3中唯一引入的伪元素是 ::selection.
6) 媒体查询，多栏布局
7) border-image
3.如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？块状元素水平居中：margin：0 auto;浮动元素居中：position: relative;float: left;left: 50%; 内层元素。height:200px;200pxfloat: left;position: relative;right: 50%;
1.在浮动元素外面再嵌套一层div,然会外层元素设置margin:0 auto;
2.外层元素
4.内容居中
内联元素：text-align:center；vertical-align:middle
块状元素：
display:table-cell;vertical-align:middle;
若是单行内容：line-height=height
5.绝对定位元素居中
1.已知元素尺寸。
.element { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; margin-top: -200px; /* 高度的一半 */ margin-left: -300px; /* 宽度的一半 */ }
2.未知元素尺寸
.element { width: 600px; height: 400px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* 第一个50%为width的一半，第二个50%为height的一半 */ }
.element { width: 600px; height: 400px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; /* 水平和垂直都居中 */ }
4.position的值relative和absolute定位原点是？
1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
2、relative（相对定位）：生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。
3、absolute（绝对定位）：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
4、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
5.CSS3的Flexbox（弹性盒布局模型）,以及适用场景？
6.用纯CSS创建一个三角形的原理是什么？
等分原理：一个块级元素，设置height:100px;100px;border:100px solid transparent;border-bottom:100px solid yellow;
直角三角形（如下）
0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
7.li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
<li>横向排列，而又为了能设置其宽度和高度，为其设置display:inline-block，相邻<li>之间会出现8px的空白间隔，不是margin也不是padding。
原因：.浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，也就是我们上面的代码<li>换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。
解决方案：1.既然是因为<li>换行导致的，那就可以将<li>代码全部写在一排。
2.很多时候我们不可能将<li>全部写在一排，那怎么办？既然是空格占一个字符的宽度，那我们索性就将<ul>内的字符尺寸直接设为0，将下面样式放入样式表，问题解决。
3.本来以为方法二能够完全解决问题，但经测试，将li父级标签字符设置为0在Safari浏览器依然出现间隔空白；既然设置字符大小为0不行，那咱就将间隔消除了，将下面代码替换方法二的代码，目前测试完美解决。同样随来而来的问题是li内的字符间隔也被设置了，我们需要将li内的字符间隔设为默认。.wrap ul{letter-spacing: -5px;} .wrap ul li{letter-spacing: normal;}
8.为什么要初始化浏览器样式？
消除不同浏览器渲染的差异
9.对BFC规范(块级格式化上下文：block formatting context)的理解？
css定位方案三种：
一，普通流 ：元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行， 除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。
二，浮动 ：在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。
三，绝对定位：元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。
具有 BFC 的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器没有的一些特性，例如可以包含浮动元素，上文中的第二类清除浮动的方法（如 overflow 方法）就是触发了浮动元素的父元素的 BFC ，使到它可以包含浮动元素，从而防止出现高度塌陷的问题。
满足下面任一条件的元素，会触发为 BFC ：
- 浮动元素，float 除 none 以外的值
- 绝对定位元素，position（absolute，fixed）
- display 为以下其中之一的值 inline-blocks，table-cells，table-captions
- overflow 除了 visible 以外的值（hidden，auto，scroll）
除了使用 overflow: hidden 触发 BFC 外，还使用了一个 *zomm: 1 的属性，这是 IEhack
1. BFC 会阻止外边距折叠
2. BFC 可以包含浮动的元素（防止塌陷）
3. BFC 可以阻止元素被浮动元素覆盖
10.请解释一下为什么需要清除浮动？清除浮动的方式
清除浮动是指清除由于子元素浮动带来父元素高度塌陷的影响。
清除浮动的两种基本方法：
1.脚底插入clear:both;
2.父元素BFC/haslayout
BFC/haslayout通常声明
- float:left/right
- position:absolute/fixed
- overflow:hidden/scroll(IE7+)
- display:inline-block/table-cell(IE8+)
- width/height/zoom:1/…(IE6/IE7)
当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。
ie下子元素浮动时候父元素不随着自动扩大的问题，使用下面的CSS写法。父元素 { overflow: auto; zoom: 1 }
11.移动端的布局用过媒体查询吗？
@media screen and (min- 400px) and (max- 700px) { … }
12.CSS优化、提高性能的方法有哪些？
1、尽量将样式写在单独的css文件里面，在head元素中引用
2、不使用@import
3、避免使用复杂的选择器，层级越少越好
4、精简页面的样式文件，去掉不用的样式
5、利用CSS继承减少代码量
6、慎重使用高性能属性：浮动、定位；
13.元素竖向的百分比设定是相对于容器的高度吗？
1.竖向百分比 ——之高度 相对于容器的height。
2.竖向百分比——之 间距 相对对于margin-top、margin-bottom、padding-top、padding-bottom这些竖直方向的内外边距属性的百分比取值，参考的其实是容器的宽度而不是高低。
14.移动端优化的站点 视口基础？
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> initial-scale属性控制页面最初加载时的缩放等级。maximum-scale、minimum-scale及user-scalable属性控制允许用户以怎样的方式放大或缩小页面。
15.::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素（伪元素由双冒号和伪元素名称组成）
16.如何修改chrome记住密码后自动填充表单的黄色背景 ？
情景一：input文本框是纯色背景的 input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; border: 1px solid #CCC!important; } 思路二： 关闭浏览器自带填充表单功能 设置表单属性 autocomplete="off/on" 关闭自动填充表单，自己实现记住密码 <!-- 对整个表单设置 --> <form autocomplete="off" method=".." action=".."> <!-- 或对单一元素设置 --> <input type="text" name="textboxname" autocomplete="off">
17.设置元素浮动后，该元素的display值是多少？
（自动变成display:block）
18.怎么让Chrome支持小于12px 的文字？
transform:scale()
19.让页面里的字体变清晰，变细用CSS怎么做？
（-webkit-font-smoothing: antialiased;）
20.font-style属性可以让它赋值为“oblique” oblique是什么意思？
oblique是一种模仿的斜体，而不是真正的斜体。和斜体”italic”的效果是一样。
21.如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms
22.overflow: scroll时不能平滑滚动的问题怎么处理？
在 overflow:scroll部分，也就是需要滑动的层处，加css
: -webkit-overflow-scrolling: touch;
23.png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
- gif图形交换格式，索引颜色格式，颜色少的情况下，产生的文件极小，支持背景透明，动画，图形渐进，无损压缩（适合线条，图标等），缺点只有256种颜色
- jpg支持上百万种颜色，有损压缩，压缩比可达180：1，而且质量受损不明显，不支持图形渐进与背景透明，不支持动画
- png为替代gif产生的，位图文件，支持透明，半透明，不透明。不支持动画，无损图像格式。Png8简单说是静态gif，也只有256色，png24不透明，但不止256色。
- webp谷歌开发的旨在加快图片加载速度的图片格式，图片压缩体积是jpeg的2/3，有损压缩。高版本的W3C浏览器才支持，google39+，safari7+
24.css3的calc()属性
.test {
calc(100% - 50px);
background: #eee;
}
25.什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）
document.cookie = null;
Javascript
1.写javascript基本规范？
1.减少全局污染
2.变量名的提升
3.for循环 （length属性提前算，不要在循环条件里算，不然每次循环都需要计算一次）
4.用“===”取代"=="
5.命名规则 构造函数首字母大写 Person(){}
6.写注释。
7.不要在同一个行内声明多个变量。
8.Switch语句中必须带有default分支.
2.JavaScript原型，原型链 ? 有什么特点？
3.JavaScript有几种类型的值？
堆：原始数据类型和 栈：引用数据类型
。
。
。
。
。
18.那些操作会造成内存泄漏？
1.意外的全局变量引起的内存泄露
function leak(){ leak="xxx";//leak成为一个全局变量，不会被回收 }
2.闭包引起的内存泄露
function bindEvent(){ var obj=document.createElement("XXX"); obj.onclick=function(){ //Even if it's a empty function } }
3.被遗忘的定时器或者回调
var someResouce=getData(); setInterval(function(){ var node=document.getElementById('Node'); if(node){ node.innerHTML=JSON.stringify(someResouce) } },1000)
这样的代码很常见, 如果 id 为 Node 的元素从 DOM 中移除, 该定时器仍会存在, 同时, 因为回调函数中包含对 someResource 的引用, 定时器外面的 someResource 也不会被释放。
19.如何避免内存泄漏？
1）减少不必要的全局变量，或者生命周期较长的对象，及时对无用的数据进行垃圾回收；
2）注意程序逻辑，避免“死循环”之类的 ；
3）避免创建过多的对象 原则：不用了的东西要及时归还。
20.事件节流 和 函数防抖
1.一些短时间内频繁触发的事件会导致占用过多的资源，这时候我们设置一个触发间隔。频繁触发的事件，例如的 mousemove（鼠标移动）、scroll（滚动条），resize 等
实现原理：
1.初次调用函数时，设置一个定时器，在指定的 间隔 之后运行代码
2.第二次调用函数时（若小于 间隔 时间，定时器 尚未执行），清除定时器并重设一个
3.如果定时器已经执行（过了间隔时间），此次操作就无意义。
4.目的是只有在执行函数的请求停止了一段时间（间隔时间）之后才执行。
输入框验证（函数防抖）
const filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
$("#email").on("keyup",checkEmail());
function checkEmail(){
let timer=null;
return function (){
clearTimeout(timer);
timer=setTimeout(function(){
console.log('执行检查');
},800);
}
}
- 注册时邮箱的输入框，随着用户的输入，实时判断邮箱格式是否正确
- 但每次的用户输入（按键弹起）都触发邮箱格式检测事件，造成了浪费
- 设置输入间隔大于800ms时（用户结束输入时），再执行检查邮箱格式
滚动加载（函数节流）
$(window).scroll(loadMore()); function loadMore(){ var canRun=true; return function(){ if(!canRun){return;} canRun=false; setTimeout(function(){ console.log("执行滚动事件"); var docHeight=$(document).height(); var winHeight=$(window).innerHeight(); var scrollDistance=$(window).scrollTop(); if( docHeight - (winHeight+scrollDistance) <=100 ){ console.log('加载中...'); } canRun=true; },600); } }
- 滚动事件的触发非常频繁
- 每次触发都去检查是否到页面底部，浪费资源
- 设置一个开关，一次只能有一个触发执行，并对执行设置计时一段时间再执行
- 执行完毕之后再解锁。这就是函数节流。