您的位置:首页 > 职场人生

前端开发面试题集锦(一)

2017-04-30 08:46 295 查看
你怎样理解HTML结构的语意化?



1、去掉或样式丢失的时候能让页面呈现清晰的结构。

2.屏幕阅读器(假设訪客有视障)会全然依据你的标记来“读”你的网页;

3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页(一般是由于这些设备对

CSS的支持较弱)。

4.搜索引擎的爬虫也依赖于标记来确定上下文和各个keyword的权重。

5.你的页面是否对爬虫easy理解非常重要,由于爬虫非常大程度上会忽略用于表现的标记。而仅仅注重语义标记;

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精灵。是一种网页图片应用处理方式。它同意你将一个页面涉及到的全部零星图片都包括到

中去。降低对server的请求次数,提高訪问速度。

1、长处:

(1)利用CSS Sprites能非常好地降低了网页的http请求,从而大大的提高了页面的性能,这也是CSS Sprite的长处,也是其被广泛传播和应用的主要原因。

(2)攻克了网页设计师在图片命名上的困扰。仅仅需对一张集合的图片上命名就能够了,不须要对每个小元素命名,从而提高了网页的制作效率。

(3)换风格方便。仅仅须要在一张或少张图片上改动图片的颜色或样式,整个网页的风格就能够改变。维护起来也非常方便。

2、缺点:

(1)在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好足够的空间,防止板块内显示不必要的背景;这些还好,最痛苦的是在宽屏,高分辨率的屏幕下的自适应页面,你的图片假设不够宽,非常easy将背景断裂;

(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是用来从server上获得数据,而Post是用来向server上传递数据。

2、Get将表单中数据的依照variable=value的形式,加入到action所指向的URL后面。而且两者使用“?”连接。而各个变量之间使用“&”连接。Post是将表单中的数据放在form的数据体中。依照变量和值相相应的方式,传递到action所指向URL。

3、Get是不安全的,由于在传输过程,数据被放在请求的URL中,而现在现有的非常多server、代理server或者用户代理都会将请求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]离线存储

H5的一个重要特性就是离线存储,所谓的离线存储就是将一些资源文件保存在本地。这样兴许的页面又一次载入将使用本地资源文件,在离线情况下能够继续訪问web应用,同一时候通过一定的手法(更新相关文件或者使用相关API),能够更新、删除离线存储等操作。

H5的离线存储使用一个manifest文件来标明哪些文件是须要被存储的,使用如 <html manifest='offline.manifest'> 来引入一个manifest文件,这个文件的路径能够是相对的。也能够是绝对的,假设你的web应用非常多,并且希望能集中管理manifest文件,那么静态文件server是个不错的选择。

iframe的优缺点

1、缺点:

  在网页中使用框架结构最大的弊病是搜索引擎的“蜘蛛”程序无法解读这样的页面。

当“蜘蛛”程序遇到由数个框架组成的网页时。它们仅仅看到框架而无法找到链 接。因此它们会以为该站点是个死站点,并且非常快转身离去。对一个站点来说这无异于一场灾难。

假设你想销售产品。你须要客户;如想得到客户,你首先要让人们 訪问你的站点,而要做到这一点。你就非求助于搜索引擎不可。你花费了大量的时间、精力和金钱开设了一家网上商店,却又有益不让搜索引擎检索你,这就好象开 家零售商店,却将窗户所有漆成黑色。并且还不挂不论什么招牌一样。

2、长处:

  从上文中我们能够发现,使用ifame框架的弊端是无法被搜索引擎所爬行抓取。但凡事总是具有两面性。

它的这个缺点也可能是他的长处。

利用这一点那我 们就能够把我们网站上一些须要给我们的用户查看。可是不须要搜索引擎爬行的内容用ifame框架进行显示。这样就能够让ifram发挥真正的效果了,并且 有我们网站中的代码也能够得到非常大的精简。举一个样例,就如笔者上文提到的加入微博直播信息,这些微博信息我们并不须要提供给搜索引擎。而我们须要提供的 是与訪客的一个互动的体验,例如以下图所看到的,而假设我们使用ifame框架嵌入微博的信息,不仅能够简便的加入网站的微博直播平台。同一时候我们看到代码也十分的
精简。

  iframe好在可以把原先的网页所有原封不动显示下来,可是假设用在首页,是搜索引擎最套讨厌的.那么你的站点即使做的在好,也排不到好的名次!如 果是动态网页。用include还好点!可是必需要去除他 的<html><head><title><body>标签!

总结:框架的长处

重载页面时不须要重载整个页面,仅仅须要重载页面中的一个框架页(降低了数据的传输,添加了网页下载速度)

方便制作导航栏

框架的缺点

会产生非常多页面,不easy管理

不easy打印

浏览器的后退button无效

代码复杂,无法被一些搜索引擎索引到

多数小型的移动设备(PDA 手机)无法全然显示框架

多框架的页面会添加server的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隐藏,但在浏览时保留位置;CSS display:none视为不存在。且不载入!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: