HTML:
1. 说下行内元素和块级元素的区别？行内块元素的兼容性使用？（IE8 以下） (1)行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。 块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。 (2)兼容性：display:inline-block;display:inline;zoom:1;
2.HTML5 为什么只需要写 <!DOCTYPE HTML>？ HTML5不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。 而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
3.你知道多少种Doctype文档类型？该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks
（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
4.Doctype作用？标准模式与兼容模式各有什么区别? (1)<!DOCTYPE>告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。 (2)标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。
5.严格模式和混杂模式的区分，以及如何触发这2种模式?
严格模式就是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法，如
混杂模式是一种向后兼容的解析方法。
触发标准模式或者说严格模式很简单，就是Html前申明正确的DTD，出发混杂模式可以在html文档开始不声明DTD，或者在DOCTYPE前加入XML声明(DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。)
6.说说严格模式的限制严格模式主要有以下限制：
变量必须声明后再使用
函数的参数不能有同名属性，否则报错
不能使用with语句
不能对只读属性赋值，否则报错
不能使用前缀0表示八进制数，否则报错
不能删除不可删除的属性，否则报错
不能删除变量delete prop，会报错，只能删除属性delete global[prop]
eval不会在它的外层作用域引入变量
eval和arguments不能被重新赋值
arguments不会自动反映函数参数的变化
不能使用arguments.callee
不能使用arguments.caller
禁止this指向全局对象
不能使用fn.caller和fn.arguments获取函数调用的堆栈
增加了保留字（比如protected、static和interface）
7.设立”严格模式”的目的，主要有以下几个：
消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的Javascript做好铺垫。
注：经过测试IE6，7，8，9均不支持严格模式。
8.页面导入样式时，使用link和@import有什么区别？ （1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS， 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS; （2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; （3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
9.html5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？ （Q1） HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。 (1)绘画 canvas; (2)用于媒介回放的 video 和 audio 元素; (3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失; (4)sessionStorage 的数据在浏览器关闭后自动删除; (5)语意化更好的内容元素，比如 article、footer、header、nav、section; (6)表单控件，calendar、date、time、email、url、search; (7)新的技术webworker， websocket， Geolocation; (Q2) IE8/IE7/IE6支持通过document.createElement方法产生的标签， 可以利用这一特性让这些浏览器支持HTML5新标签， 浏览器支持新标签后，还需要添加标签默认的样式。 当然也可以直接使用成熟的框架、比如html5shim; <!--[if lt IE 9]> <script> src=""</script> <![endif]-->
10.简述一下你对HTML语义化的理解？ 用正确的标签做正确的事情。 (1)html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析; (2) 即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的; (3) 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO; (4) 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
11.Html和xhtml有什么区别?
html是一种基本的web网页设计语言，xhtml是一个基于XML的置标语言。
最主要的不同:
XHTML元素必须正确的被嵌套，元素必须关闭，标签必须小写，必须有根元素。
12.行内元素有哪些?块级元素有哪些?CSS盒模型
行内元素: br span input a
块级元素IV P H1 H2 FORM ul
CSS盒模型内容:padding border margin
13.iframe有那些缺点？ iframe会阻塞主页面的Onload事件； 搜索引擎的检索程序无法解读这种页面，不利于SEO; iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。
14.<strong>，<em>和<b>，<i>标签<strong> 标签和 <em> 标签一样，用于强调文本，tp官方下载安装app但它强调的程度更强一些。
em 是 斜体强调标签， tpwallet钱包下载更强烈强调，表示内容的强调点。相当于html元素中的 <i>...</i>;
< b > < i >是视觉要素，分别表示无意义的加粗，无意义的斜体。
em 和 strong 是表达要素(phrase elements)。
CSS:
行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素：a、b、span、img、input、strong、select、label、em、button、textarea 块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote 空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img
1.清除浮动有哪些方式？比较好的方式是哪一种？ (Q1) （1）父级div定义height。 （2）结尾处加空div标签clear:both。 （3）父级div定义伪类:after和zoom。 （4）父级div定义overflow:hidden。 （5）父级div定义overflow:auto。 （6）父级div也浮动，需要定义宽度。 （7）父级div定义display:table。 （8）结尾处加br标签clear:both。
(9)使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
（10）使用overflow。
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。 (Q2)比较好的是第3种方式，好多网站都这么用。
2.box-sizing常用的属性有哪些？分别有什么作用？ (Q1)box-sizing: content-box|border-box|inherit; (Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素 默认效果)。 border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽 度和高度分别减去边框和内边距才能得到内容的宽度和高度。
3.介绍一下box-sizing属性？
box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box。
content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高
border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content
标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。
4.CSS3中新增了一种盒模型计算方式：box-sizing。盒模型默认的值是content-box， 新增的值是padding-box和border-box，几种盒模型计算元素宽高的区别如下：
content-box（默认）布局所占宽度Width：
Width = width + padding-left + padding-right + border-left + border-right
布局所占高度Height:
Height = height + padding-top + padding-bottom + border-top + border-bottom
padding-box
布局所占宽度Width：
Width = width(包含padding-left + padding-right) + border-top + border-bottom
布局所占高度Height:
Height = height(包含padding-top + padding-bottom) + border-top + border-bottom
border-box
布局所占宽度Width：
Width = width(包含padding-left + padding-right + border-left + border-right)
布局所占高度Height:
Height = height(包含padding-top + padding-bottom + border-top + border-bottom)
5.介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？ （1）有两种， IE 盒子模型、W3C 盒子模型。 （2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)。 （3）区 别： IE的content部分把 border 和 padding计算了进去。
什么是盒子模型？在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。
6.IE 8以下版本的浏览器中的盒模型有什么不同？ IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框
7.css引入的方式有哪些?link和@import的区别?
引入方式3种：行内添加定义style属性值，页面头部内内嵌调用和外链调用，
区别：
1.link是xhtml标签，除了加载css外，还可以定义RSS等其他事务，@import只能加载CSS
2.link引用CSS时候，页面载入的时候同时加载，@import需要页面网页完全载入后加载
3.link是XHTML标签，没有兼容问题，@import是在CSS2.1提出的，低版本的浏览器不支持。
4.link支持使用javascript控制DOM去改变样式，但是@import不支持。
8.CSS选择符有哪些? 哪些属性可以继承？优先级算法如何计算?内联和Important哪个优先级高？
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）
important 比 内联优先级高，但内联比 id 要高
9.img标签上的title和alt属性区别是什么?
alt是当图片不能正常显示的时候，用文字代替
title该属性提供信息
10.display:none和visibility:hidden的区别？
diplay:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。
visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。
11.position的值? relative和absolute分别是相对于谁进行定位的？
(1)absolute :生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。
(2)fixed （老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。
(3)relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
(4)static 默认值。没有定位，元素出现在正常的流中
(5)sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出
12.position:absolute和float属性的异同
共同点：对内联元素设置float和absolute属性，可以让元素脱离文档流，并且可以设置其宽高。
不同点：float仍会占据位置，absolute会覆盖文档流中的其他元素。
13.如何在页面上实现一个圆形的可点击区域？ （1）map+area或者svg （2）border-radius （3）纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等
14.CSS3新增伪类举例：
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
15.css3有哪些新特性？
CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85，0.90) translate(0px，-30px) skew(-9deg，0deg);//旋转，缩放，定位，倾斜
增加了更多的CSS选择器 多背景 rgba
在CSS3中唯一引入的伪元素是::selection.
媒体查询，多栏布局
border-image16.常见兼容性问题？
(1)png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理.
(2)浏览器默认的margin和padding不同。解决方案是加一个全局的{margin:0;padding:0;}来统一。
(3)IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
(4)浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）
(5)#box{ float:left; width:10px; margin:0 0 0 100px;}
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
css
.bb{
/所有识别/
.background-color:#00deff\9; /IE6、7、8识别/
+/IE6、7识别/
_background-color:#1e0bd1;/IE6识别/
}
怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发
怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。现在
可以使用[html5](-page.html)推荐的写法：`<doctype html>`
17.上下margin重合问题
ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。
解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。 18.display有哪些值？说明他们的作用。 block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。 none 缺省值。象行内元素类型一样显示。 inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。 inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。 list-item 象块类型元素一样显示，并添加样式列表标记。 table 此元素会作为块级表格来显示。 inherit 规定应该从父元素继承 display 属性的值。
19.CSS居中（包括水平居中和垂直居中） 内联元素居中方案 水平居中设置： 1.行内元素 设置 text-align:center； 2.Flex布局 设置display:flex;justify-content:center;(灵活运用，支持Chroime，Firefox，IE9+) 垂直居中设置： 1.父元素高度确定的单行文本（内联元素） 设置 height = line-height； 2.父元素高度确定的多行文本（内联元素） a:插入 table （插入方法和水平居中一样），然后设置 vertical-align:middle； b:先设置 display:table-cell 再设置 vertical-align:middle； 块级元素居中方案 水平居中设置： 1.定宽块状元素 设置 左右 margin 值为 auto； 2.不定宽块状元素 a:在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 auto； b:给该元素设置 displa:inine 方法； c:父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%； 垂直居中设置： 使用position:absolute（fixed），设置left、top、margin-left、margin-top的属性; 利用position:fixed（absolute）属性，margin:auto这个必须不要忘记了; 利用display:table-cell属性使内容垂直居中; 使用css3的新属性transform:translate(x，y)属性; 使用:before元素;
CSS实现垂直水平居中案例：一道经典的问题，实现方法有很多种，以下是其中一种实现： HTML结构：
<div class="wrapper"> <div class="content"></div> </div>
CSS：
.wrapper { position: relative; width: 500px; height: 500px; background-color: #ddd; } .content{ background-color:#6699FF; width:200px; height:200px; position: absolute; //父元素需要相对定位 top: 50%; left: 50%; margin-top:-100px ; //二分之一的height，width margin-left: -100px; }
20.在书写高效 CSS 时会有哪些问题需要考虑？ reset。参照上题“描述下 “reset” CSS 文件的作用和使用它的好处”的答案。 规范命名。尤其对于没有语义化的html标签，例如div，所赋予的class值要特别注意。 抽取可重用的部件，注意层叠样式表的“优先级”。
21.为什么要使用CSS sprites CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-position”的组合进行背景定位，这样可以减少很多图片请求的开销，因为请求耗时比较长；请求虽然可以并发，但是如果请求太多会给服务器增加很大的压力。
22.简述一下src与href的区别
href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
23.什么是CSS Hack?
一般来说是针对不同的浏览器写不同的CSS，就是 CSS Hack。 IE浏览器Hack一般又分为三种，条件Hack、属性级Hack、选择符Hack（详细参考CSS文档：css文档）。例如：
// 1、条件Hack <!--[if IE]> <style> .test{color:red;} </style> <![endif]-->
// 2、属性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 /
24.px和em的区别
px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。 浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em， 10px=0.625em
JS:
1. 介绍js的基本数据类型 Undefined、Null、Boolean、Number、String
数据类型：2大类：原始类型的值和引用类型的对象
原始类型：值直接保存在变量本地的类型（值为一个，而且不能特别复杂）
原始类型5类：Number String Boolean undefined null
引用类型：值没有直接保存在变量本地的类型
变量中只保存指向实际数据所在位置的地址值
2.js有哪些内置对象？ 数据封装类对象：Object、Array、Boolean、Number 和 String 其他对象：Function、Arguments、Math、Date、RegExp、Error
3.this对象的理解 this总是指向函数的直接调用者（而非间接调用者）； 如果有new关键字，this指向new出来的那个对象； 在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window；
4.谈谈This对象的理解。 this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。 但是有一个总原则，那就是this指的是调用函数的那个对象。 this一般情况下：是全局对象Global。 作为方法调用，那么this就是指这个对象
5.eval是做什么的？ 它的功能是把对应的字符串解析成JS代码并运行； 应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。 由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval('('+ str +')');
6.JavaScript的typeof返回哪些数据类型 Ｏbject number function boolean underfind;
7.例举3种强制类型转换和2种隐式类型转换? 强制（parseInt，parseFloat，number）隐式（== – ===）；
8.split() join() 的区别 前者是切割成数组的形式，后者是将数组转换成字符串
9.数组方法pop() push() unshift() shift() Push()尾部添加 pop()尾部删除 Unshift()头部添加 shift()头部删除
10.IE和DOM事件流的区别 执行顺序不一样、 参数不一样 事件加不加on this指向问题
11.IE和标准下有哪些兼容性的写法
Var ev
= ev