前端开发面试题集锦

如何理解HTML结构的语意化?

1、去掉或样式丢失的时候能让页面呈现清晰的结构
2、屏幕阅读器（如果访客有视障）会完全根据的标记来"读" 的网页
3、PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）
4、搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重
5、的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记而只注重语义标记
6、便于团队开发和维护

Doctype文档声明的严格模式和混杂模式如何触发这两种模式区分它们有何意义?

1、如何触发两种模式

加入xml头部声明可以触发IE浏览器的Quirks mode 触发之后浏览器解析方式就和IE5.5一样拥有IE5.5一样的bug和其他问题行为（Javascript）也是如此

2、IE6的触发：在XHTML的DOCTYPE前加入XML声明

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3、IE7的触发：在XML声明和XHTML的DOCTYPE之间加入HTML注释

<?xml version="1.0" encoding="utf-8"?><!-- ... and keep IE7 in quirks mode --><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

4、IE6和IE7都可以触发的：在HTML4.01的DOCTYPE文档头部加入HTML注释

<!-- quirks mode --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

5、在页面顶部加 `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">` 将触发"怪异模式"

6、没有使用DTD声明或者使用HTML4以下（不包括HTML4）的DTD声明时基本上所有的浏览器都是使用quirks mode呈现

谈谈以前端角度出发做好SEO需要考虑什么？

1、了解搜索引擎如何抓取网页和如何索引网页
2、Meta标签优化
3、如何选取关键词并在网页中放置关键词
4、了解主要的搜索引擎
5、主要的互联网目录
6、按点击付费的搜索引擎
7、搜索引擎登录
8、链接交换和链接广泛度（Link Popularity）
9、标签的合理使用

知道可以以外链的方式引入CSS文件请谈谈外链引入CSS有哪些方式这些方式的性能有区别吗？

CSS的引入方式最常用的有三种：

第一：在head部分加入 <link rel="stylesheet" type="text/css" href="my.css"/>, 引入外部的CSS文件

第二：在head部分加入

<style type="text/css"> div{margin: 0;padding: 0;border:1px red solid;} </style>

第三：直接在页面的标签里加 <div style="border:1px red solid;">

CSS Sprite是什么谈谈这个技术的优缺点？

CSS sprites在国内很多人叫css精灵是一种网页图片应用处理方式它允许将一个页面涉及到的所有零星图片都包含到中去减少对服务器的请求次数提高访问速度

1、优点：

（1）利用CSS Sprites能很好地减少了网页的http请求从而大大的提高了页面的性能这也是CSS Sprite的优点也是其被广泛传播和应用的主要原因
（2）解决了网页设计师在图片命名上的困扰只需对一张集合的图片上命名就可以了不需要对每一个小元素命名从而提高了网页的制作效率
（3）换风格方便只需要在一张或少张图片上修改图片的颜色或样式整个网页的风格就可以改变维护起来也很方便

2、缺点：

（1）在图片合并的时候要把多张图片有序的合理的合并成一张图片还要留好足够的空间防止板块内显示不必要的背景这些还好最痛苦的是在宽屏高分辨率的屏幕下的自适应页面的图片如果不够宽很容易将背景断裂
（2）CSS Sprites在开发的时候比较麻烦要通过photoshop或其他工具测量计算每一个背景单元的精确位是针线活没什么难度但是很繁琐
（3）CSS Sprites在维护的时候比较麻烦如果页面背景有少许改动一般就要改这张合并的图片无需改的好不要动这样避免改动更多的css 如果在原来的地方放不下又只能（最好）往下加图片这样图片的字加了还要改动css

以CSS3标准定义一个webkit内核浏览器识别的圆角（尺寸随意）

-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius:10px;

行内元素有哪些？块级元素有哪些？CSS的盒模型？

行内元素有：a b span I em img input select strong
级元素有：div ul ol li dl dt dd h1 h2 h3 h4 p
盒模型：margin border padding width

前端页面有哪三层构成分别是什么？作用是什么？

网页分成三个层次即：结构层、表示层、行为层

1、网页的结构层（structurallayer）由HTML 或XHTML 之类的标记语言负责创建标签也就是那些出现在尖括号里的单词对网页内容的语义含义做出这些标签不包含任何关于如何显示有关内容的信息例如 P标签表达了这样一种语义："这是一个文本段 "
2、网页的表示层（presentationlayer）由CSS 负责创建 CSS对"如何显示有关内容"的问题做出了回答
3、网页的行为层（behaviorlayer）负责回答"内容应该如何对事件做出反应"这一问题这是Javascript 语言和DOM 主宰的领域

html中form里action方法的get和post有什么区别？

1、Get是用来从服务器上获得数据而Post是用来向服务器上传递数据
2、Get将表单中数据的按照variable=value的形式添加到action所指向的URL后面并且两者使用"?"连接而各个变量之间使用"&"连接 Post是将表单中的数据放在form的数据体中按照变量和值相对应的方式传递到action所指向URL
3、Get是不安全的因为在传输过程数据被放在请求的URL中而如今现有的很多服务器、代理服务器或者用户代理都会将请求URL记录到日志文件中然后放在某个地方这样就可能会有一些隐私的信息被第三方看到另外用户也可以在浏览器上直接看到提交的数据一些系统内部消息将会一同显示在用户面前 Post的所有操作对用户来说都是不可见的
4、Get传输的数据量小这主要是因为受URL长度限制而Post可以传输大量的数据所以在上传文件只能使用Post（当然还有一个原因将在后面的提到）
5、Get限制Form表单的数据集的值必须为ASCII字符而Post支持整个ISO10646字符集
6、Get是Form的默认方法

html元素的id跟class什么区别

id和class是网页中两个通用属性他们协同工作使整个页面丰富多彩当为一个元素定义样式时二者都可用但有区别？

1、在css样式表中书写时 id选择符前缀应加"#" class选择符前缀应加"."
2、id属性在一个页面中书写时只能使用一次而class可以反复使用
3、id作为元素标签用于区分不同结构和内容而class作为一个样式可以应用到任何结构和内容当中去
4、布局上的一般原则：id先确定结构和内容再为它定义样式而class正好相反是先定义样式然后在页面中根据不同需求把样式应用到不同结构和内容上
5、目前浏览器都允许同一个页面出现多个相同属性值的id 一般情况能正常显示不过当javascript通过id来控制元素时就会出错
6、在实际应用中 class常被用到文字版块和页面修饰上而id多被用在宏伟布局和设计包含块或包含框的样式

Ajax是什么？

Ajax不是一个技术它实际上是几种技术每种技术都有其独特这处合在一起就成了一个功能强大的新技术 Ajax包括：

1、XHTML和CSS
2、使用文档对象模型(Document Object Model)作动态显示和交互
3、使用XML和XSLT做数据交互和操作
4、使用XMLHttpRequest进行异步数据接收
5、使用JavaScript将它们绑定在一起

做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？

1、DOCTYPE 影响 CSS 处理
2、FF: 设置 padding 后 div 会增加 height 和 width 但 IE 不会故需要用 !important 多设一个 height 和 width
3、FF: 支持 !important IE 则忽略可用 !important 为 FF 特别设置样式
4、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字就垂直居中了缺点是要控制内容不要换行
5、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px, 解决方法： div{margin:30px!important;margin:28px;} 注意这两个margin的顺序一定不能写反 !important这个属性IE不能识别但别的浏览器可以识别

html5 离线存储

Html5的一个重要特性就是离线存储所谓的离线存储就是将一些资源文件保存在本地这样后续的页面重新加载将使用本地资源文件在离线情况下可以继续访问web应用同时通过一定的手法（更新相关文件或者使用相关API）可以更新、删除离线存储等操作

Html5的离线存储使用一个manifest文件来标明哪些文件是需要被存储的使用如 <html manifest='offline.manifest'> 来引入一个manifest文件这个文件的路径可以是相对的也可以是绝对的如果的web应用很多而且希望能集中管理manifest文件那么静态文件服务器是个不错的选择

iframe的优缺点？

1、缺点：

在网页中使用框架结构最大的弊病是搜索引擎的"蜘蛛"程序无法解读这种页面当"蜘蛛"程序遇到由数个框架组成的网页时它们只看到框架而无法找到链接因此它们会以为该网站是个死站点并且很快转身离去对一个网站来说这无异于一场灾难如果想销售产品需要客户;如想得到客户首先要让人们访问的网站而要做到这一点就非求助于搜索引擎不可花费了大量的时间、精力和金钱开设了一家网上商店却又故意不让搜索引擎检索这就好象开家零售商店却将窗户全部漆成黑色而且还不挂任何招牌一样

2、优点：

从上文中可以发现使用ifame框架的弊端是无法被搜索引擎所爬行抓取但凡事总是具有两面性它的这个缺点也可能是他的优点利用这一点那我们就可以把站点上一些需要给的用户查看但是不需要搜索引擎爬行的内容用ifame框架进行显示这样就可以让ifram发挥真正的效果了而且有站点中的代码也可以得到很大的精简举一个例子就如笔者上文提到的添加微博直播信息这些微博信息并不需要提供给搜索引擎而需要提供的是与访客的一个互动的体验如下图所示而如果使用ifame框架嵌入微博的信息不仅可以简便的添加站点的微博直播平台同时看到代码也十分的精简

iframe好在能够把原先的网页全部原封不动显示下来,但是如果用在首页,是搜索引擎最套讨厌的.那么的网站即使做的在好,也排不到好的名次!如果是动态网页用include还好点！但是必须要去除他的<html><head><title><body>标签！

框架的优点

重载页面时不需要重载整个页面只需要重载页面中的一个框架页(减少了数据的传输增加了网页下载速度)
方便制作导航栏

框架的缺点

会产生很多页面不容易管理
不容易打印
浏览器的后退按钮无效
代码复杂,无法被一些搜索引擎索引到
多数小型的移动设备（PDA 手机）无法完全显示框架
多框架的页面会增加服务器的http请求
由于上面诸多缺点因此不符合标准网页设计的理念,已经被标准网页设计抛弃

提示: 目前框架的所有优点完全可以使用Ajax实现因此已经没有必要使用框架了

CSS盒模型原理

1、W3C 盒子模型的范围包括 margin、border、padding、content 并且 content 部分不包含其他部分
2、IE 盒子模型的范围也包括 margin、border、padding、content 和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading

CSS display:none和visibility:hidden的区别

visibility:hidden隐藏但在浏览时保留位置
display:none视为不存在且不加载

jQuery是什么？

jQuery是javascript编写一个可重用的JavaScript库

不使用jQuery设置UI文本的JavaScript代码如下：

document.getElementById("txt1").value = "hello";

用jQuery类库后的的JavaScript代码如下：

$("#txt1").val("Hello");

可见在使用jQuery类库后的JavaScript代码明显简洁了很多也更符合IT行业特点：短、平、快

jquery与JavaScript的关系 jQuery会取代JavaScript吗？

JavaScript：是一门Web最流行的脚本语言
jQuery: 是一个优秀的Javascript框架它是轻量级的js库它兼容CSS3 还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）

jQuery是并不是要取代的JavaScript 使用jQuery使Web开发变得简单

如何使用jQuery库？

从jquery.com下载的jquery.js文件（最新的jQuery版本V1.11.1或V2.1.1） jQuery的文件规则如"jquery-1.4.1.j s" 其中1.4.1是JS文件的版本的版本号

在开发Web程序前需要包含的JavaScript 如图下面的代码：

<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>

CDN（内容分发网络）是什么？

在开发Web页面考虑最多的问题之一是页面在客户端电脑的响应：时间越短用户体验越好

而制约用户体验的关键因素之一是浏览器下载Web文件大小包括*.html、图片、*.js、*.css等文件

为了最大化复用和节约带宽故CDN应运而生：其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节使内容传输的更快、更稳定其目的是使用户可就近取得所需内容解决 Internet网络拥挤的状况提高用户访问网站的响应速度

如何使用jQuery CDN？

（1）推荐使用官方的CDN节点使用代码如下：

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

2）还有Google提供的jQuery CDN：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

（3）同时微软也提供了jQuery CDN的节点：

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js"> </script>

如何在CDN网络不可访问情况下能自动访问网站的jQuery文件？

一般情况下 CDN网络节点是可靠的但是偶尔也有失灵的时候故为了提供双保险可进行判断网络加载CDN失败则自动加载网站上的jQuery, 示例代码如下：

<script type="text/javascript" src="http:/ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js"></script> <script type="text/javascript">if (typeof jQuery == 'undefined') {     document.write(unescape("%3Cscript src='Scripts/jquery.1.9.1.min.js' type='text/javascript'%3E%3C/script%3E")); }</script>

同版本的jQuery.js文件和jQuery.min.js有何不同？

相同：这两个文件提供相同的jQuery的功能即在函数调用上没有区别
不同：jQuery.js文件适合让程序员阅读 jQuery.min.js文件通过压缩和删除所有的空格以节省带宽和空间使得文件更小用于网络传输不适合程序员阅读

何时使用jquery.js 何时使用jquery.min.js？

开发调试场景下：用jQuery.js文件因为想调试能够看到javascript代码
生产部署环境下：用jQuery.min.js文件可减少网络宽度加快网页加载速度

jQuery.vsdoc.js文件是什么?

*.vsdoc.js文件是用来在微软的开发环境Visual Studio下使用的方便得获得jQuery的智能感知当输入jQuery函授后会自动提示函数的类型、函数使用说明、函数参数等等如果在VS下用jQuery开发Web程序则vsdoc.js文件会大大的提高开发效率

jQuery的基本语法如何解释？

jQuery的语法结构可以分为四部分：

1、默认情况下所有Jquery的命令开始以一个"$"符号
2、其次是HTML元素的选择例如下面是通过ID"txt1"选择一个HTML文本框
3、接着由点（.）分隔这个操作者将分离的元素和该元素的动作(函数)
4、最后什么样的函数(动作)

在jQuery中 "$"符号代表什么？

在jQuery中 "$"符号是一个jQuery的别名默认的jQuery类库以$开头

为何要使用jQuery.noConflict（）？

有很多类似jQuery一样的类库如MooTools, Backbone, Sammy, Cappuccino, Knockout 这些类库中有的也使用了$符号如果同时使用则会导致命名冲突

为了解决这个冲突需要用到jQuery.noConflict() 这样就不依赖$这个默认符号了例如：

jQuery.noConflict(); (function($){})(jQuery);

同一个页面中能否加载多个个document.ready事件？

可以

分类 科技