金山前端面试题
1.说说你对Doctype的理解
DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。
2.web产品开发的流程
只有每个开发人员都按照一个共同的规范去设计、沟通、开发、测试、部署，才能保证整个开发团队协调一致的工作，从而提高开发工作效率，提升工程项目质量。
一、 项目的角色划分
如果不包括前、后期的市场推广和产品销售人员，开发团队一般可以划分为项目负责人、程序员、美工三个角色。
二、 开发工具的选取
三、 项目开发流程
3.说说你对盒子模型的理解
内容(content)、填充(padding)、边框(border)、边界(margin)。
4.前端页面有哪三层构成，分别是什么？作用是什么？
分成：结构层、表示层、行为层。
结构层（structural layer）
由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”
表示层（presentation layer）
由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。
行为层（behaviorlayer）
负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。
5.行内元素有哪些？块级元素有哪些？他们如何相互转化？
区别可以去找 “html文档流”相关的资料去学习，最主要的区别就是元素是占据一行还是挤在一行
转换的方式是用css的display属性
display:block; /*转换为块级*/
display:inline; /*转换为行内*/
还有一种是
display:inline-block; /* 其实仍未行内元素，但是可以设置width及height属性等*/
7.CSS的引入方式有哪些?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>引入CSS的四种方式</title>
<style type="text/css">
/*h2{ color:white;background-color:blue;}*/
/*要想使网页内的CSS生效，必须注释下一行代码*/
@import "import.css";
</style>
<link href="alone.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 style="color:white; background-color:yellow">标签内的CSS</h1>
<h2>网页内的CSS</h2>
<h3>link引用的CSS文件</h3>
<h4>import引用的CSS文件</h4>
<p>link引用和import引用区别是：link是html加载前就引用，而import是html加载后才引用。举例，采用impor引用，会先显示无样式的页面，然后再把样式放进去。如果用JavaScript动态引用CSS，得使用link引用方式才可实现。</p>
</body>
</html>
8.请用CSS来定义<p>标签，要求实现以下效果：字体颜色再IE6下为黑色，IE7下为红色，IE8下为绿色，其他浏览器下为黄色。
9.谈谈CSS Sprites技术
通俗点讲CSS Sprite就是将多个背景图片拼合到一个图片上。然后在CSS里通过position定义到该图片上，实现多个位置的背景，一张图片搞定
如：
.div,.current{background:url(a.gif) no-repeat}
.current{background-position:10px 10px}
好处就是浏览器只需要请求一次图片就行，如果多个图片，就要讲求多次。
缺点就是拼合的时候，比较麻烦，要有耐心，当然也是可以利用某些工具来完全。
10.你做的页面在哪些浏览器下测试过？这些浏览器的内核分别是什么？这些浏览器的兼容性有哪些。
IE内核浏览器：360，傲游，搜狗，世界之窗，腾讯TT
非IE内核浏览器：firefox opera safari chrome
1.就是ie6双倍边距的问题，在使用了float的情况下，不管是向左还是向右都会出现双倍，最简单的解决方法就是用display:inline;加到css里面去。
2.文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要，在高度上我们不能容忍1px 的差异。
3. ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。
4. 还讨论内容撑破容器问题，横向上的。如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义width。
5. 浮动的清除，ff下不清除浮动是不行的。
6. mirrormargin bug，当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这一种出现条件，还没系统整理。解决方案：外层元素设定border 或 设定float。
7. 吞吃现象，限于篇幅，我就不展开了。还是ie6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。
8. 注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案，ie6的这个bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“ picRotate start
11.谈谈你对SEO的理解。
搜索引擎优化（Search Engine Optimization，简称SEO）是一种利用搜索引擎的搜索规则来提高目的网站在有关搜索引擎内的排名的方式。由于不少研究发现，搜索引擎的用户往往只会留意搜索结果最前面的几个条目，所以不少网站都希望通过各种形式来影响搜索引擎的排序。当中尤以各种依靠广告维生的网站为甚。所谓“针对搜索引擎作最佳化的处理”，是指为了要让网站更容易被搜索引擎接受。深刻理解是：通过SEO这样一套基于搜索引擎的营销思路，为网站提供生态式的自我营销解决方案，让网站在行业内占据领先地位，从而获得品牌收益。
12.请简单说一些你对HTML5和CSS3的了解情况。
HTML 5的新特性：
1. 新的内容标签
HTML4中的内容标签级别相同，无法区分各部分内容。而HTML5中的内容标签互相独立，级别不同，搜索引擎以及统计软件等均可快速识别各部分内容。
2. 更好的表格体系
现在，你可以抛弃JavaScript或者是PHP，只通过HTML5来定义表格。你可以定义每个表格单元的输入格式，也可以定义这个单元是否是必填的等等。
3. 音频、视频API
HTML5不但允许你在网页中直接整合视频、音频，同时更提供了一套功能丰富的API用来控制媒体播放，而这些用来控制媒体播放的元素也都是可以被编辑的。因此，HTML5在视频以及音频层面上实际已经可以替代常用的flash插件了。
4. 画布(Canvas) API
在网页中绘制图形一直是个大难题，我们不得不借助flash、silverlight等插件。然而HTML5允许你直接在网页上进行绘图，甚至允许你与网页生成更多的交互，例如绘制图形、放大缩小，等等。图例是一个用HTML5制作的小游戏。
5. 地理(Geolocation) API
HTML5提供了地理信息的应用接口Geolocation API。通过这个API，网页可以通过IP，GPS等方式来获得用户的地理信息;同时用户也可以选择是否关闭这个功能。
6. 网页存储(Web storage) API
HTML5提供了网页存储的API，方便Web应用的离线使用。除此之外，新的API相对于cookie也有着高安全性，高效率，更大空间等优点。
7. 拖拽释放(Drag and drop) API
我们可以通过HTML5的Drag and drop API来完成网页中的拖拽释放效果，避免了以往的网页在拖拽释放过程中需要不停修改元素的位置，代码繁多的弊端。
CSS3 新特性:
1. RGBa
CSS3的RGBa新特性允许你对每个元素进行色彩以及透明度的设置。而原来常用的opacity命令只能对元素及其子元素进行设置。
2. Multi-column layout
CSS3新提供的多栏布局选择器无需HTML布局标签即可生成多栏布局，同时‘栏数’、‘栏宽’以及‘栏间距’都是可以定义的。
3. Round corners
圆角功能可能是CSS3提供的最实用的功能了。通过Border-radius，你可以没有任何难度的给指定的HTML元素添加圆角。并且你还可以定义圆角的大小，以及哪个角是圆角，哪个角不是圆角。
4. @font-face
当网页显示某种用户没有安装的字体时，CSS3提供的@font-face功能会自动的、默默地帮用户从网络上下载相应字体。从而让设计师更加自由的发挥，而不用考虑用户的机器是否安装了相应字体。
5. 其他特性
此外，CSS3还给我们带来了渐变、防止字符串过长溢出、多重背景以及用图片来作为元素边框等功能。
利用好CSS3，你可以更快捷的得到以往用很多插件才能得到的效果。同过使用元素本身来取代大部分图片，网页的加载速度会得到提升，这些原本是图片的内容，也可以被搜索引擎检索到。
13.如何用JS获取ID为title的元素，并将其字体大小设为16px。
方法有两种：
1、通过jquery的方式，使用id选择器方式获取节点，然后获取值
2、通过原生的dom方式，获取id的值
示例：
第一种：
<body>
<input type='text' id='ipt'/>
</body>
<script>
var v = $('#ipt').val();//根据id获取input的value值
</script>
第二种：
<body>
<input type='text' id='ipt'/>
</body>
<script>
var v=document.getElementById('ipt').value;//根据id获取input的value值
</script>
<script language=javascript>
window.onload=function(){
var ps=document.getElementById('neirong').getElementsByTagName('span');
for(var i=0;i<ps.length;i++){
ps[i].style.fontSize="12px";
}
}
</script>
14.jQuery获取form表单中第二个input元素的方法。
if($("#student_table table tr td:nth-child(2)").find("input").val()=="")
{}15.如何选中一个table中索引为偶数的tr。
td是列，tr是行：
<script type="text/javascript">
$(document).ready(function(){
$("table td").bind("click",function(){
var index = $(this).parent().index();
alert(index);//表示所在行的索引。如果要的是列的索引，把parent()去掉
});
});
$("#tab tr:odd") 偶数行
</script>
16.看图写代码题，需要写CSS和JS。重要的就是一排图片，鼠标放上去会根据鼠标位置显示一个div，里面是tips。
<script type="text/javascript"> $(document).ready(function() { $('#show').hover(function(){ $('#box').show(); }); });</script>
