前端笔试题整理

一、 对WEB标准以及W3C的理解与认识
web标准，使得Web开发更加容易。Web标准由万维网联盟（W3C）制定。
web标准，简单来说就是将页面的结构、表现和行为各自独立实现（结构、表现和行为相分离原则）。web标准一般将三部分独立分开，使它们更加模块化。但一般产生行为时，结构和表现会发生变化，这三者之间的界限就会变模糊。
W3C对web标准提出了规范化的要求，在实际编程中，包含一下几点：
1.对结构的要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）
1）标签字母要小写；
2）标签要闭合；
3）标签不允许随意嵌套。
2.对css和js的要求：
1）尽量使用外联css样式表和js脚本，使结构、表现和行为分成三块，符合规范，同时提高页面渲染速度，提高用户体验；
2）样式尽量少用行间样式表，使结构与表现分离，标签的id和class命名要做到见文知义，标签越少，加载越快，用户体验更高，代码维护更简单，便于改版；
3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

二、 HTML语义化
1、 什么是HTML语义化。
即内容语义化，根据展现的内容选择合适的标签。
2、 语义化的意义
 在没有css的时候能够清晰的看出网页的结构，增强可读性。
 有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多有效的信息，提高网页的权重。
 便于团队开发和维护，语义化的HTML可以让开发者更容易看明白，从而提高团队的效率和协调能力。
3、 写HTML代码时应该注意什么。
 尽可能少使用无语义的标签div和span。
 在语义不明显时，既可以使用div或者p时，尽量用p，因为p在默认情况下有间距，对兼容特殊终端有利。
 不要适用纯样式标签，如：b、font、u等，改用css设置。
 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
 表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
4、 HTML5新增了哪些语义标签。
http://www.html5jscss.com/html5-semantics-section.html

三、HTML的Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
1. 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。2.严格模式与混杂模式最大的区别就是浏览器的解析方式不同，严格模式下所有浏览器都会按照W3C的标准解析渲染页面，而混杂模式下，不同的浏览器按照自己独有的渲染方式解析渲染页面，从而导致不同浏览器下页面解析样式不同。如果页面最上面有完整的且合理的DTD声明，则是严格模式，不写dtd声明或写的格式不对就是混杂模式；DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。3、意义：统一严格模式可以使得所有的浏览器对页面的解析渲染方式相同，解决兼容性问题 。

四、简述一下document.write和 innerHTML区别。
document.write是重写整个document，只能重绘整个页面。innerHTML是HTMLElement的属性，可以重绘页面的一部分。

五、xhtml和html有什么区别。
XHTML 与 HTML 4.01 标准没有太多的不同。xhtml1.0的开发实际上是作为html4.01与xml2.0的一个过渡的网页版本而存在的，因为xml的解析语法过于苛刻，简单一句话就是：只要网页中出现一处错误，则浏览器停止解析。
最主要的不同：
• XHTML 元素必须被正确地嵌套。
• XHTML 元素必须被关闭。
• 标签名必须用小写字母。
• XHTML 文档必须拥有根元素

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

七、CSS引入的方式有哪些? link和@import的区别是?
1、链入外部样式表，就是把样式表保存为一个样式表文件，然后在页面中用链接这个样式表文件。
2、内部样式表，就是把样式表放到页面的区里。
3、导入外部样式表，用@import,在与

type="text/css">
<!--
@import "*.css"
-->
</style>

4、内嵌样式,就是在标签内写入style=”“,比如:

<td style="border-left:#cccccc">设置表格左边框的颜色为灰色.

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁）
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
　　区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

八、你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
Ie(Ie内核) 火狐（Gecko） 谷歌（webkit） opear(Presto)

九、标签上title与alt属性的区别是什么?
Alt 当图片不显示是 用文字代表。
Title 为该属性提供信息

十、css sprites，优缺点。
1、CSS Sprites原理
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

2、CSS Sprites优缺点
优点
1.利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
2.CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
3.解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
4.更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
缺点
诚然CSS Sprites是如此的强大，但是也存在一些不可忽视的缺点，如下：
1.在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；
2.CSS Sprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；幸好腾讯的鬼哥用ADOBE AIR开发了一个CSS Sprites 样式生成工具，虽然还有一些使用上的不灵活，但是已经比photoshop测量来的方便多了，而且样式直接生成，复制，拷贝就OK！
3.CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。
4.CSS Sprites非常值得学习和应用，特别是页面有一堆icon（图标）。总之很多时候大家要权衡一下利弊，再决定是不是应用CSS Sprites。

十一、Javascript
1、例举3种强制类型转换和2种隐式类型转换。
强制类型转型转换：parseInt、parseFloat、number
隐式类型：==、-、===

2、split()和join()区别
前者是切割成数组的形式，后者是将数组转换成字符串。

3、事件绑定和普通事件有什么区别
普通添加事件的var btn = document.getElementById(“hello”);
btn.onclick = function(){
alert(1);
}
btn.onclick = function(){
alert(2);
}面的代码只会alert 2
事件绑定方式添加事件：

var btn = document.getElementById("hello");
btn.addEventListener("click",function(){
    alert(1);
},false);
btn.addEventListener("click",function(){
    alert(2);
},false);

执行上面的代码会先alert 1 再 alert 2
普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式添加事件可以添加多个。

5、 标准事件模型和IE事件模型区别。
DOM事件模型包含捕获阶段和冒泡阶段，IE事件模型只包含冒泡阶段；
1. 添加事件
DOM事件模型 – addEventListener

addEventListener(eventType, handler, useCapture)
eventType不带有on字符串；
handler参数是一个事件句柄，这个函数或方法带有一个事件对象参数；
useCapture参数决定了事件句柄触发在哪种事件传播阶段，如果useCapture为true则为捕获阶段，反之则为冒泡阶段。
IE事件模型 – attachEvent
attachEvent(eventType, handler)
eventType 带 on字符串；

handler参数是一个事件句柄，这个函数或方法带有一个事件对象参数；
6、事件委托
让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
http://www.cnblogs.com/leejersey/p/3801452.html 例子可见此链接

7、javascript的本地对象，内置对象和宿主对象
本地对象为array obj regexp等可以new实例化
内置对象为gload Math 等不可以实例化的
宿主为浏览器自带的document,window 等

8、document.ready事件和document.load事件的区别。
页面加载完成有两种事件
1.load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数
问题：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响
2.$(document).ready()是当DOM文档树加载完成后执行一个函数 （不包含图片，css等）所以会比load较快执行
在原生的jS中不包括ready()这个方法，只有load方法就是onload事件

9、阻止默认事件和冒泡事件
http://www.jb51.net/article/46294.htm