1.XHTML与HTML的有何异同？
答：都是标记语言，都用标签来标记元素，都符合w3c标准
xhtml元素必须嵌套，必须是小写字母，标签必须闭合，必须有根元素
2.css盒模型，弹性盒模型是什么？
答：标准css盒模型：margin,content,padding,border ie盒模型：margin和content，content包含了padding和border
当页面需要适配不同的屏幕大小和设备类型时确保元素具有恰当的行为的布局方式，以一种更有效的方式对页面元素进行排列，对齐和分配空间（使用flex布局的盒模型）
3.Doctype作用，标准模式与兼容模式的区别？
答：告知浏览器的解析器用什么文档标准解析这个文档
标准模式是以浏览器的最高标准运行，兼容模式是页面以宽松的向后兼容的方式运行，模拟老浏览器的行为以免站点无法工作
4.HTML5 为什么只需要写？
答：html4.01的doctype需要对dtd进行引用，因为html4.01基于SGML,
html5不是基于SGML，不需要引用dtd，但是需要doctype来规范浏览器的行为
SGML是标准通用标记语言，html和xml都是由sgml发展而来的，但是html5不是
5.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
答：行内元素:span,img,a,b,lable,button,i,input…
块级元素:div,h1-h6,dd,dl,dt,ul,li,p,form,footer,header…
空元素:img,input,br 可以直接闭合的元素
6.页面导入样式时，使用link和@import有什么区别？
答：link属于xhtml标签，除了加载css外，还能用于定义rss，定义rel连接属性等作用，而@import是css提供的，只能用于加载css，
页面被加载时，link会同时被加载，而@import引用的css会等待页面被加载完再加载
import是css2.1提供的，只有ie5以上的浏览器才能识别，而link是xhtml标签，无兼容问题
7.介绍一下你对浏览器内核的理解？
答：主要分为渲染引擎和js引擎
渲染引擎：负责取得网页的内容（html，xml，图像）,整理讯息（例如加入css）,以及计算网页的显示方式，然后会输出至显示器或打印机，
浏览器内核的不同对于网页的语法解释会有所不同，所以渲染的效果也不同，所有网页浏览器，电子邮件客户端，以及其他需要编辑，显示网页内容的应用程序都需要内核
js引擎:解析执行js来实现网页的动态效果
8、常见的浏览器内核有哪些？
答：Trident内核：ie,360
gecko内核：netscape6及以上版本
presto内核：opera（以前）
blink内核：opera（现在）
webkit内核：safari,chorme
9.HTML5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
答：拖拽释放api
画布（canvas）地理（geolocation）
语义化更好的标签（article，aside，header，footer，nav，section）
音频和视频（audio，video）
本地离线存储（sessionStorage，localStorage）
表单控件：email，calendar，date，time，email，url，search
新的技术：websocket，webworker，geolocation
移除的元素：strike，font，basefont，big，center，frame，frameset，noframe
ie8/7/6支持使用document.createElement方法产生的标签，用该方法可以使用html5的新标签，浏览器产生新标签后，还要给新标签添加默认样式
当然最好的办法就是使用html5shim框架
<!--[if ite ie9]>
< script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
文档类型不一样，提供了不同的语义化标签
10.简述一下你对HTML语义化的理解？
答：用正确的标签做正确的事情
html语义化让页面内容结构化，结构更清晰，便于对浏览器，搜索引擎解析
即使在没有样式css的情况下也能以一种文档格式显示，
搜索引擎爬虫也依赖于html标记来确定上下文和各个关键字的权重，有利于seo
使得阅读源代码的人对网站更容易将网站分块，便于阅读维护理解
11.iframe有那些缺点？
答：搜索引擎的蜘蛛无法读取解读这种页面，
框架结构让人感到很迷惑，页面会很混乱
12.列出display的值，说明他们的作用？position的值，relative和absolute分别是相对于谁进行定位的？？
答：
block：像块元素一样显示
inline：像行内元素一样显示
inline-block：整体行内元素显示（不换行） 但其内容像块元素一样显示（可以设置宽高）
list-item：像块元素一样显示，并添加样式列表标记
position：absolute 绝对定位，相对第一个已经定位的父元素进行定位
position：relative 相对定位，相对于正常位置进行定位
position：fixed 固定定位，相对于浏览器窗口进行定位
position：static 默认值
position：inherit 从父元素继承定位
13.一个满屏 品 字布局 如何设计?
答：参考pingbox.html
14.常见兼容问题？
答：（1）标签在不同浏览器都有默认的margin和padding，可以使用*{margin:0,padding:0}删除这些默认值，方便后面设置
（2）谷歌默认会将小于12px的字体按照12px设置，设置-webkit-text-size-adjust：none
（3）ie6设置元素高度小于10px，显示出的元素高度高于实际值
（4）图片之间有默认间距，设置了*{margin:0,padding:0}也没用，可以使用float布局设置图片
15.如果需要手动写动画，你认为最小时间间隔是多久，为什么？
答：多数显示器一秒刷新60次，所以最小时间是1/60 * 1000ms = 16.7ms
16.列举IE与其他浏览器不一样的特性？
答：事件不一样：ie：attachEvent 其他浏览器：addeventListener
透明度：filter：alpha（opacity=0.5）其他浏览器：-moz-opacity：0.5
事件源：ie：event.srcElement 其他浏览器:event.target
17.css sprite是什么？有什么优缺点？
答：将多个小图片拼接到一张大图片上，通过background-position和元素尺寸调节显示需要的背景
优点：减少http请求数,极大的增加页面加载速度
增加图片信息重复度，提高压缩比，减少图片大小
更换风格方便，只需要修改一张或几张图片即可
缺点：图片合并麻烦
维护麻烦，修改一个图片可能需要重新布局整个图片，样式
18.CSS引入的方式有哪些?
答：(1)<div style=“background-color:red”>
(2)<style>
.bg{background-color:red}
</style>
(3)<link rel=‘stylesheet’ type=“text/css” href=‘style.css’>
(4)<style>
@import url(style.css)
</style>
19.前端页面有哪三层构成，分别是什么?作用是什么?
答：结构层：由html或xhtml之类的标记语言负责创建，标记语言也就是网页的标签，标签只对网页内容的语义和含义做出描述，不包含任何关于如何显示内容的信息
表示层：由css负责创建，对内容如何显示做一定的控制
行为层：由js和dom创建，控制用户一个事件该如何显示
20.如何用CSS分别单独定义ie6 IE7 IE8 IE9 IE10的width属性？
答：仅ie6 _width:150px
ie6/ie7 *width:150px *+width:150px +width:150px
ie8 width:150px\0
ie9 width:150px\9
ie10 width:150px
21.在CSS中哪些属性可以同父元素继承?
答：font-size,font-family,font-weight,font-style，text-align,visibilty等等
不可继承的属性：display，margin，padding，text-shadow，white-space等
22.谈谈以前端的角度出发做好seo需要做什么？
答：（1）提高页面加载速度，使用css-sprite，压缩图片大小，减少http请求数
(2) img添加alt属性，这个属性可以在图片加载不出来的时候显示相关文字信息
（3）结构，表现和行为分离，通过外链形式引入css文件，提高网页加载速度，js放在页面底部
（4）使用浏览器缓存，为一些不经常变化的文件设置较长的过期时间，这样能减少浏览器向服务器发送的请求数
（5）优化网站分级结构，页面里加入面包屑导航，方便爬虫爬取信息
23.CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？
答：（1）类选择器：class
（2）id选择器：id
（3）标签选择器：div，h1
（4）后代选择器：div h1
(5)相邻选择器：h1+p
（6）子选择器 ul>li
(7)通配符选择器：*
（8）属性选择器：input[type=‘number’]
(9)伪类选择器：a:hover
可以继承：font-size，font-family，color，text-indent
不可继承：border，width，height，margin，padding等
优先级算法：优先级就近原则，同权重情况下样式最近者优先
载入样式以最后载入的样式为准
!important>id>class>tag
!important比内联样式要高，内联比id高
p:first-of-type 选择其父元素下面所有为p的元素的第一个
p:last-child 选择其父元素的最后一个元素
p:last-of-type 选择其父元素的下面所有为p元素的最后一个
p:first-child 选择其父元素的首个元素
p:only-child 选择其父元素下的唯一一个子元素（只有一个子元素）
p:only-of-type 选择父元素下唯一的一个为p的元素（只有一个子元素且为p）
24.css基本语句的构成？
答：选择器，一条或者多条声明，每条声明由属性和属性值构成
25.document load 和document ready 的区别？
答：load是页面所有资源加载完成（dom,js,css,img）执行的函数
ready是dom树加载完成执行的函数
26.什么是html5？有什么特点？
答：html最新的标准，增加了许多语义化标签，本地存储，audio，video，绘图等这些新功能，提升了用户体验，节约了开发周期，更好的为开发者服务
27.css 中的列布局是什么？ 为了实现列布局我们需要指定哪些内容？
答：创建多个列来对文本进行分列布局
column-count：6 列数
column-gap：40px 列间隔
column-rule：3px double #ff00ff 列宽 列样式 列颜色
28.描述css reset的作用和用途？
答：每个浏览器都有自带的或者默认的样式，reset就是重置这些样式，使得样式表现一致
29.写出5 种以上ie6 bug 的解决方法，哪些你认为是解决起来最麻烦的？
答：（1）img默认边距问题 使用float设置img
（2）ie6不支持opacity：0.5 可以使用filter:alpha(opacity=50)
(3)ie6不支持min-height，可以设置min-height:200px; height:auto !important;
（4）ie6下面设置1px高度时，显示的高度大于1px，ie默认的行高造成的，修改方法：overflow：hidden line-height：1px
（5）一个div里面有一个浮动块元素，一个非浮动块元素，两个元素在ie6下面有默认的3px间距 解决方法：给未浮动元素设置float
30.什么是Web workers？为什么我们需要他？
答：web worker是运行在后台的javascript，独立于其他脚本，不会影响页面的性能，
webworker 可以提高网页的整体性能，提升用户体验
31.写出至少三个CSS3中新添加的样式属性的名字及参数？
答：box-shadow：10px 10px 10px 10px inset
border-radius:5px
transform:rotate(90deg)
32.多人项目中，你如何规划css文件样式命名?
答：使用英文单词，驼峰写法，
使用-表示父子元素，
使用header，nav，footer这些带语义的单词命名
33.为了让网页更快的加载，你会如何处理你的css文件和js文件，以及图片文件，页面性能优化你还知道哪些方法？
答：1.尽量简化代码，可以使用css的不要使用js
2.减少dom操作（在内存中操作元素document.createDocumentFragment,innerHtml一次性生成dom元素，事件代理批量处理事件）
3.使用压缩工具压缩css和js以及图片文件
4.使用适当的cdn
34.你经常遇到的浏览器兼容性有哪些？通常是怎么处理的？
答：（1）浏览器有默认的margin和padding 设置*{margin:0,padding:0}
(2) 设置较小高度时，显示的高度大于设置高度 设置line-height:10px overflow:hidden
(3)ie不支持cursor：pointer 改用cursor：hand
（4）ie7以下不支持display：inline-block 设置{display:inline-block,*display:inline,*zoom:1}
(5)透明度问题 设置filter：alpha（opacity=50）
35.HTML中div与span区别？
答：一个是块元素可以设置宽高，一个是行内元素，宽高随内容大小变化
36.HTML5 存储类型有哪些，以及与他们的区别；
答：sessionStorge：一次会话期间，浏览器窗口关闭就清除
localStorge：长期存储，浏览器关闭也不会清除
37.alt和title分别表示什么含义以及具体应用体现？
答：alt是图片加载失败时的提示文字信息
title是图片的描述信息，鼠标经过时会显示title文本信息
38.经常使用的页面开发工具和测试工具
答：sublime text ，webstorm，hbuilder
google dev tool和firebug
39.什么是css预处理器？
答：写css时候为了兼容不同的浏览器需要写很多冗余的css代码，css预处理器就是为了简化css代码的编写
40.document.write、innerHTML和innerText 的区别？
答：innerHTML页面获取内容的时候标签也会获取到,标签会渲染到页面上，如果内容中有标签，会解析标签
innerText页面获取内容的时候会把标签过滤掉
document.write 是直接写入到页面的内容流，会把整个页面重写
41.请说出至少三种减少页面加载时间的方法？
答：减少http请求
js脚本放在末尾
压缩css，js文件
45.请描述你曾使用过的css预处理器的优缺点
答：less
优点：代码通俗易懂，维护简单便捷，代码易学，开发比较简单
缺点：重新编译css，网页显示速度会降低，
46.实现当屏幕宽度大于700,小于800时引用外部样式style-7-9.css？
答：
<link rel='stylesheet' media="screen and (min-width:700px) and (max-width:800px)" href='style-7-9.css'/>
47.对WEB标准以及W3C的理解与认识？
答：(1)web规范标准要求，标签必须闭合，标签小写，不乱嵌套
（2）web要求结构，表现，行为分离，使得其更为模块化
（3）w3c要求使用更为语义化的标签，当用户禁用css，js时仍然能够有效的阅读网页
48.你如何对网站的文件和资源进行优化？
答：（1）js文件地址换成google cdn地址
（2）简化js和css代码，去除不必要的空格
（3）压缩css，js文件，减少文件体积
（4）使用cdn内容分发网络
49.清除浮动的几种方式，各自的优缺点？
答：（1）父div设置高度
优点：代码简单
缺点：只适合高度固定的布局，要给出精确的高度
（2）结尾处加div，设置clear：both
优点：简单，代码少，浏览器支持比较好
缺点：可能要增加很多的空div
（3）父div设置after伪类和zoom
优点：不容易出问题，
缺点：代码多
（4）父div定义overflow：hidden
优点：简单，代码少，浏览器支持比较好
缺点：不能和position一起使用，超出部分会隐藏
（5）父div定义overflow：auto
优点：简单，代码少，浏览器支持比较好
缺点：内部div宽高超出父div时会出现滚动条
50.一个高宽未知的图片如何在一个比他大的容器内水平居中？
答：display：table-cell，text-align：center
51.Table标签的作用是什么?
答：用于布局/用于显示批量数据（表格）
52.定义链接四种状态的伪类的正确书写顺序是？
答：a:link a:visited a:hover a:active
53.inline,inline-block和block的区别是?
答：block:block元素会独占一行，多个block会占据多行，默认情况下，block里面的元素宽度自动占满其父元素宽度，可以设置宽度高度，margin，padding书香
inline：不会独占一行，多个inline元素会在一行显示，直到一行放不下为止，设置宽度高度无效，大小随内容大小变化，水平方向的margin，padding有效，竖直方向的无效
inline-block：元素呈现为inline元素，元素里面的内容呈现block，既有inline的同行特性，又可以设置宽度跟高度
54.CSS超过宽度的文字显示点点，必须要设置的属性？
答：text-overflow:clip(不显示。。。)|ellpisis(显示。。。)
{
text-overflow:ellipsis;
word-wrap:nowrap;
overflow:hidden;
}
55.设置文字阴影属性。设置表格边框合并属性?
答：text-shadow：10px,5px,3px,#ddd 距离左边10px，上边5px，阴影大小3px，颜色#ddd
table:{border-collapse:collapse;}
table,tr,td,th{border:1px solid #ddd}合并所有的边框
56.文本强制换行？
答：word-break：break-all 单词超出会截掉单词为两部分，下部分到下一行
word-wrap：break-word 单词超出会将整个单词换到下一行
57.display：none与visibility:hidden的区别是什么？
答：display:none 彻底消失 不在文档流中占位，浏览器也不会解析该元素
visibility:hidden 视觉上消失，还在文档流中占位，浏览器会解析该元素
58.超链接访问过后hover样式后会出现什么问题？如何解决
答：
a:hover{
color:red
}
a:visited{
color:gold
}
超链接
a没点击跳转之前鼠标移入会变红色，a点击跳转之后颜色变为金色，但是鼠标移入不会再变红了
解决方法：对超链接的样式属性进行正确的排序
link->visited->hover->active，
将visited放在hover前面即可
59.html5 中的应用缓存是什么？
答：application cache 通过一个manifest文件告诉浏览器，网页中的资源如果本地有就用本地，没有就去网络请求
为了加快网页访问速度，节约流量，提供离线缓存的新技术
60.本地存储和cookie之间的区别是什么？
答：本地存储只有本地浏览器端能够访问数据，服务器不能访问本地存储，大小5mb左右，一直会保存到用户从浏览器清除为止
cookie服务器端和本地浏览器都能访问，大小4kb左右，有过期时间，超过过期时间会被浏览器清除
61.简单介绍boostrap栅格系统？
答：boostrap栅格系统使用一系列row和column的组合来创建页面布局，内容可以放到这些布局中
62.ie 和标准下有哪些兼容性的写法？
答：可视区域的宽度高度
window.innerWidth||document.documentElement.clientWidth
window.innerHeight||document.documentElement.clientHeight
事件监听 window.addEventListener||window。attachEvent
获取元素样式：
function getStyle(ele,attr){
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[attr]
}else{
return ele.currentStyle[attr]
}
阻止冒泡：
if(event && event.stopPropagation){
event.stopPropagation()
}else{
event.cancelBubble = true;
}
}
63.get和post区别？
答：get把参数放在url中，post把参数放在request body中
get传送受到url长度的限制，post无限制
get发送一次tcp数据包，post先发送head再发送data，发送两次tcp数据包
64.解释一下浮动和它的工作原理
答：浮动就是设置float：left，float：right，脱离文档流，不占据空间，浮动元素碰到包含他的元素或者其他浮动元素的边框停留
65.排序算法复杂度对比
