金山前端面试题

1.说说你对Doctype的理解javascript

DOCTYPE标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档。css

2.web产品开发的流程html

只有每一个开发人员都按照一个共同的规范去设计、沟通、开发、测试、部署,才能保证整个开发团队协调一致的工做,从而提升开发工做效率,提高工程项目质量。前端

1、 项目的角色划分java

若是不包括前、后期的市场推广和产品销售人员,开发团队通常能够划分为项目负责人、程序员、美工三个角色。jquery

2、 开发工具的选取程序员

3、 项目开发流程web

 

 

3.说说你对盒子模型的理解chrome

内容(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下为绿色,其余浏览器下为黄色。

p{color:#00ff00}
*p{color:#ff0000}
_p{color:#000000}

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。

方法有两种:

一、经过jquery的方式,使用id选择器方式获取节点,而后获取值

二、经过原生的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>