2015前端面试频率题
a、什么是语义化的HTML？
语义化的HTML就是写出的HTML代码，符合内容的结构化（内容语义化），选择合适的标签（代码语义化），能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
b、为什么要做到语义化？
1.有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。
2.在没有CSS的时候能够清晰的看出网页的结构，增强可读性。
3.便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。
4.支持多终端设备的浏览器渲染。
区别：严格模式是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法，如<br/>，混杂模式则是一种向后兼容的解析方法。
触发：根据不同的DTD触发，如果没有声明，那么默认为混杂模式。
1、XHTML元素必须被正确地嵌套
2、XHTML 元素必须被关闭，空标签也必须被关闭。如<br/>
3、XHTML 元素必须小写
4、XHTML 文档必须拥有一个根元素
5、XHTML属性名称必须小写，属性值必须加引号，属性不能简写。如：<input checked="checked" />
6、XHTML用 id 属性代替 name 属性。
注意：应该在 "/" 符号前添加一个额外的空格，以使你的 XHTML 与当今的浏览器相兼容
7、语言属性（lang）lang 属性应用于几乎所有的 XHTML 元素。它定义元素内部的内容的所用语言的类型。如果在某元素中使用 lang 属性，就必须添加额外的 xml:lang， 像这样：<div lang="no" xml:lang="no">Heia Norge!</div>
1、它2个都是用来划分区间但是没有实际语义的标签；
2、差别就在于div是块级元素,不会其他元素在同一行;span是内联元素~可以与其他元素位于同一行~
它的优势在于与平台的无关性，无论你是windows，unix，linux，mac，都可以观看html5格式的内容。
*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
两者都是外部引用CSS的方式，但是存在一定的区别：
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。
浮动:
1.双倍边距bug 块 浮动 横向margin display：inline
2.li本身没浮动内容浮动 ie6 li 内容浮动 给li加浮动 li加vertical-alian
其实就是浮动块状元素前面不能有内联文本的出现
ie6 下，下margin消失
当一行子元素占有的宽度之和和父级的宽度相差超过3px，或者有不满行状态的时候最有一行的子元素的下margin值就会失效、
ie6下文字溢出bug
原因 1.浮动元素前面有注释 或者内联元素
内联元素越多，溢出越多
子元素的宽度和父级的宽度相差小于3px的时候
解决办法用div包起来 或者把父级元素宽度调大
relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。
absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性， absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
fixed（固定定位） 这里所固定的参照对像是 可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。
-
各游览器常用兼容标记一览表:
-
标记 IE6 IE7 IE8 FF Opera Sarari [*+><] √ √ X X X X _ √ X X X X X \9 √ √ √ X X X \0 X X √ X √ X @media screen and (-webkit-min-device-pixel-ratio:0){.bb {}} X X X X X √ .bb , x:-moz-any-link, x:default X √ X √(ff3.5及以下) X X @-moz-document url-prefix(){.bb{}} X X X √ X X @media all and (min-width: 0px){.bb {}} X X X √ √ √ * +html .bb {} X √ X X X X 游览器内核 Trident Trident Trident Gecko Presto WebKit
2. em会继承父级元素的字体大小。
闭包的用途
闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
表示变量或函数起作用的区域，指代了它们在什么样的上下文中执行，亦即上下文执行环境。Javascript的作用域只有两种：全局作用域和本地作用域，本地作用域是按照函 数来区分的。
(1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement_x_x() //创建一个具体的元素
createTextNode() //创建一个文本节点
（2）添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore()
（3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
1.创建元素节点
document.createElement_x_x() 方法 用于创建元素，接受一个参数，即要创建元素的标签名，返回创建的元素节点
2 div.id = "myDiv"; //设置div的id
3 div.className = "box"; //设置div的class
创建元素后还要把元素添加到文档树中
2.添加元素节点
appendChild() 方法 用于向childNodes列表的末尾添加一个节点，返回要添加的元素节点
2 var li = document.createElement_x_x("li"); //创建li
3 li.innerHTML = "项目四"; //向li内添加文本
4 ul.appendChild(li); //把li 添加到ul子节点的末尾
2 ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾
insertBefore() 方法，如果不是在末尾插入节点，而是想放在特定的位置上，用这个方法，该方法接受2个参数，第一个是要插入的节点，第二个是参照节点，返回要添加的元素节点
2 var li = document.createElement_x_x("li"); //创建li
3 li.innerHTML= "项目四"; //向li内添加文本
4 ul.insertBefore(li,ul.firstChild); //把li添加到ul的第一个子节点前
2 var li = document.createElement_x_x("li"); //创建li
3 li.innerHTML= "项目四"; //向li内添加文本
4 ul.insertBefore(li,ul.lastChild); //把li添加到ul的子节点末尾
2 var li = document.createElement_x_x("li"); //创建li
3 li.innerHTML= "项目四"; //向li内添加文本
4 var lis = ul.getElementsByTagName_r("li") //获取ul中所有li的集合
5 ul.insertBefore(li,lis[1]); //把li添加到ul中的第二个li节点前
添加后:
3.移除元素节点
removeChild() 方法，用于移除节点，接受一个参数，即要移除的节点，返回被移除的节点，注意被移除的节点仍然在文档中，不过文档中已没有其位置了
2 var fromFirstChild = ul.removeChild(ul.firstChild); //移除ul第一个子节点
2 var lis = ul.getElementsByTagName_r("li") //获取ul中所有li的集合
3 ul.removeChild(lis[0]); //移除第一个li，与上面不同，要考虑浏览器之间的差异
4.替换元素节点
replaceChild() 方法，用于替换节点，接受两个参数，第一参数是要插入的节点，第二个是要替换的节点，返回被替换的节点
2 var fromFirstChild = ul.replaceChild(ul.firstChild); //替换ul第一个子节点
2 var li = document.createElement_x_x("li"); //创建li
3 li.innerHTML= "项目四"; //向li内添加文本
4 var lis = ul.getElementsByTagName_r("li") //获取ul中所有li的集合
5 var returnNode = ul.replaceChild(li,lis[1]); //用创建的li替换原来的第二个li
5.复制节点
cloneNode() 方法，用于复制节点， 接受一个布尔值参数， true 表示深复制（复制节点及其所有子节点）， false 表示浅复制（复制节点本身，不复制子节点）
2 var deepList = ul.cloneNode(true); //深复制
3 var shallowList = ul.cloneNode(false); //浅复制
而setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达式
name = 'aaa bbb ccc';
uw=name.replace(/\b\w+\b/g, function(word){
return word.substring(0,1).toUpperCase()+word.substring(1);}
);
1）将css和js文件放在独立外部文件中引用
2) 使用gzip压缩网页内容
3）将CSS放在页面顶端，JS文件放在页面底端
4）使JS文件内容最小化
5）尽量减少外部脚本的使用，减少DNS查询时间
（ 文件合并
文件最小化/文件压缩
使用 CDN 托管
缓存的使用（多个域名来提供缓存）
其他）
a、网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”
b、网页的表示层（presentation layer） 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。
c、网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。
W3C标准是一些列标准的集合！在各个企业的基础上做一定的整合，形成一套标准集，便于推广和使用！根据网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。在具体的XHTML标准（如属性值加引号，不允许单标记，大小写等等比较多）！语法上比，我们目前使用的html标记较为严格！更为具体的信息楼上可以参见百度百科，XHTML等相关术语！也可参见，W3C发布的使用文档！
优雅降级和渐进增强印象中是随着css3流出来的一个概念。由于低级浏览器不支持css3，但css3的效果又太优秀不忍放弃，所以在高级浏览中使用css3而低级浏览器只保证最基本的功能。咋一看两个概念差不多，都是在关注不同浏览器下的不同体验，关键的区别是他们所侧重的内容，以及这种不同造成的工作流程的差异。
什么是渐进增强（progressive enhancement）、优雅降级（graceful degradation）呢？
渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
“优雅降级”观点
“优雅降级”观点认为应该针对那些*、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。
在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
“渐进增强”观点
“渐进增强”观点则认为应关注于内容本身。
内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。
除了节约cookie带宽的因素，另一个重要因素是节约主域名的连接数，从而提高客户端网络带宽的利用率，优化页面响应。因为老的浏览器（IE6是典型），针对同一个域名只允许同时保持两个HTTP连接。将图片等资源请求分配到其他域名上，避免了大图片之类的并不一定重要的内容阻塞住主域名上其他后续资源的连接（比如ajax请求）。