Web前端笔试115道题(带答案及解析)

Web前端笔试115道题(带答案及解析)
Web前端笔试115道题(带答案及解析)

Web前端笔试115道题(带答案及解析)

1、html5为什么只需要写<!doctype html>? 答:html5不是基于sgml(标准通用标记语言),不需要对dtd

文件进行引用,但是需要doctype来规范浏览器的行为,

否则浏览器将开启怪异模式,而html4.01基于sgml,需要引入dtd,才能告知浏览器文档使用的文档类型

2、行内元素有哪些?块级元素有哪些?空(void)元素有哪些?行内元素有:a b span img input select strong(强调的语气)

块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p

知名的空元素:

<br> <hr> <img> <input> <link>

<meta>

鲜为人知的是:

<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

3、页面导入样式时,使用link和@import有什么区别?

两者都是外部引用CSS的方式,但是存在一定的区别:

区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。

区别2:link引用CSS时,在页面载入时同时加载;

@import需要页面网页完全载入以后加载。

区别3:link是XHTML标签,无兼容问题;@import

是在CSS2.1提出的,低版本的浏览器不支持。

区别4:link支持使用Javascript控制DOM去改变样式;而@import不支持。

补充:@import最优写法

@import的写法一般有下列几种:

@import ‘style.css’ //Windows IE4/ NS4, Mac OS X

IE5, Macintosh IE4/IE5/NS4不识别

@impor t “style.css” //Windows IE4/ NS4, Macintosh

IE4/NS4不识别

@import url(style.css) //Windows NS4, Macintosh

NS4不识别

@import url(‘style.css’) //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别

@import url(“style.css”) //Windows NS4, Macintosh NS4不识别

由上分析知道,@import url(style.css) 和@import

url(“style.css”)是最优的选择,兼容的浏览器最多。

从字节优化的角度来看@import url(style.css)最值得推荐。

4、常见的浏览器内核有哪些?使用Trident内核的浏览器:IE、Maxthon、TT、The World等;

使用Gecko内核的浏览器:Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey;

使用Presto内核的浏览器:Opera7及以上版本;

使用Webkit内核的浏览器:Safari、Chrome。

5、html5有哪些新特性?移除了哪些元素?如何处理HTML5新标签的浏览器兼容性问题?如何区分html和

html5?新增的元素有绘画canvas ,用于媒介回放的video 和audio 元素,本地离线存储localStorage 长期存储数据,浏览器关闭后数据不丢失,而sessionStorage的数据在浏览器关闭后自动删除,此外,还新增了以下的几大类元素。

内容元素,article、footer、header、nav、section。

表单控件,calendar、date、time、email、url、search。

控件元素,webworker, websockt, Geolocation。

移出的元素有下列这些:

显现层元素:basefont,big,center,font, s,strike,

tt,u。

性能较差元素:frame,frameset,noframes。

如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?

处理兼容问题有两种方式:

1.IE8/IE7/IE6支持通过document.方法产生的标签,利用这一特性让这些浏览器支持HTML5新标签。

2.使用是html5shim框架

另外,DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素,此外,还可以根据新增的结构、功能元素来加以区分。

6、iframe有哪些优缺点?优点:

1.用来实现长连接,在websocket不可用的时候作为一种替代,最开始由google发明。Comet:基于HTTP 长连接的”服务器推”技术

2.跨域通信。JavaScript跨域总结与解决办法,类似的还有浏览器多页面通信,比如音乐播放器,用户如果打开了多个tab页,应该只有一个在播放。

3.历史记录管理,解决ajax化网站响应浏览器前进后退按钮的方案,在html5的history api不可用时作为一种替代。

4.纯前端的utf8和gbk编码互转。比如在utf8页面需要生成一个gbk的encodeURIComponent字符串,可以通过页面加载一个gbk的iframe,然后主页面与子页面通信的方式实现转换,这样就不用在页面上插入一个非常巨大的编码映射表文件了

缺点:

1、在网页中使用框架结构最大的弊病是搜

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

如果你想销售产品,你需要客户;如想得到客户,你首先要让人们访问你的网站,而要做到这一点,你就非求助于搜索引擎不可。你花费了大量的时间、精力和金钱开

设了一家网上商店,却又故意不让搜索引擎检索你,这就好象开家零售商店,却将窗户全部漆成黑色,而且还不挂任何招牌一样。

2、框架结构有时会让人感到迷惑,特别是在

几个框架中都出现上下、左右滚动条的时候。这些滚动条除了会挤占已经非常有限的页面空间外,还会分散访问者的

注意力。访问者遇到这种网站往往会立刻转身离开。他们会想,既然你的主页如此混乱,那么网站的其他部分也许更不

值得浏览。

3、链接导航问题。使用框架结构时,你必须保证正确设置所有的导航链接,如不然,会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内,这种情况下访问者便被陷住了,因为此时他没有其他地方可去。

7、label的作用是什么?是怎么使用的?Label 中有两个属性是非常有用的,一个是FOR、另外一个就是ACCESSKEY了。

FOR属性

功能:表示Label标签要绑定的HTML元素,你点击这个标签的时候,所绑定的元素将获取焦点。

用法:<Label FOR=”InputBox”>姓名

</Label><input ID=”InputBox” type=”text”>

ACCESSKEY属性:

功能:表示访问Label标签所绑定的元素的热键,当您按下热键,所绑定的元素将获取焦点。

用法:<Label FOR=”InputBox” ACCESSKEY

=”N”>姓名</Label><input ID=”InputBox”

type=”text”>

局限性:accessKey属性所设置的快捷键不能与浏览器的快捷键冲突,否则将优先激活浏览器的快捷键。

8、实现不使用border,画出1px高的线,在不同浏览器下的Quirksmode和CSSCompat模式下都能保持一致的效果?<div

style=”height:1px;overflow:hidden;background:red”></ div>

9、网页验证码是干嘛的?是为了解决什么安全问题?

网页验证码介绍:”验证码”的英文表示为CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart),翻译过来就是”全自动区分计算机和人类的图灵测试”,顾名思义,它是用来区分计算机和人类的。在CAPTCHA 测试中,作为服务器的计算机会自动生成一个问题由用户来解答。这个问题可以由计算机生成并评判,但是必须只有人类才能解答。由于计算机无法解答CAPTCHA 的问题,所以回答出问题的用户就可以被认为是人类。CAPTCHA 是由计算机来考人类,而不是标准

图灵测试中那样由人类来考计算机,因此人们有时称CAPTCHA 是一种反向图灵测试。

验证码的原理:服务器端随机生成验证码字符串,保存在内存中,并写入图片,发送给浏览器端显示,浏览器端输入验证码图片上字符,然后提交服务器端,提交的字符和服务器端保存的该字符比较是否一致,一致就继续,否则返回提示。攻击者编写的robot程序,很难识别验证码字符,顺利的完成自动注册,登录;而用户可以识别填写,所以这就实现了阻挡攻击的作用。而图片的字符识别,就是看图片上的干扰强度了。就实际的效果来说,验证码只是增加攻击者的难度,而不可能完全的防止。

10、介绍一下标准的css的盒子模型?与低版本IE的盒子模型有什么不同?盒子模型有两种,分别是ie 盒子模型和标准w3c 盒子模型

W3C 盒子模型的范围包括margin、border、padding、content,并且content 部分不包含其他部分

IE 盒子模型的范围也包括margin、border、padding、content,和标准W3C 盒子模型不同的是:IE 盒子模型的

content 部分包含了border 和pading

11、如何居中div,如何居中一个浮动元素?如何让绝对定位的div居中? a.margin:xpx auto;

b.确定容器的宽高,这里宽度是必须的,高度可以不设,设置外层的上外边距和左外边距分别是宽高的一半。

实现居中关键在于margin设置与position:relative.

.div {

width:500px ;

height:300px;

margin: -150px 0 0 -250px;

position:relative;

left:50%;

top:50%;

}

c.position:absolute;

top: 50%;

left: 50%; 只能把div定位在以红色圈为起点的位置,加上margin:-100px 0px 0px -100

12、display有哪些值?说明他们的作用?block :块对象的默认值。用该值为对象之后添加新行

none :隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间

inline :内联对象的默认值。用该值将从对象中删除行

compact :分配对象为块对象或基于内容之上的内联对象

marker :指定内容在容器对象之前或之后。要使用此参数,对象必须和:after及:before 伪元素一起使用

inline-table :将表格显示为无前后换行的内联对象或内联容器

list-item :将块对象指定为列表项目。并可以添加可选项目标志

run-in :分配对象为块对象或基于内容之上的内联对象

table :将对象作为块元素级的表格显示

13、position的值relative和absolute的定位原点是什么?Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute 则以浏览器左上角为原始点进行定位,位置将由TRBL决定。

Relative,CSS中的写法是:position:relative; 他的意思是绝对相对定位,他是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。14、display设置为inline-block

时,li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?行框的排列会受到中间空白(回车空格等等)的影响,这些空白也会被应用样式,占据空间,所以会有间隔

解决:设置ul的font-size为0,缺陷是必须重新在li 中去设置字体大小

15、请解释下为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式? a.添加

Web前端开发笔试题集锦(已读)

Web前端开发笔试题集锦 HTML/CSS篇 1, 判断字符串是否是这样组成的,第一个必须是字母,后面可以是字母、数字、下划线,总长度为5-20 var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/; reg.test("a1a__a1a__a1a__a1a__"); 2,截取字符串abcdefg的efg var str = "abcdefg"; if (/efg/.test(str)) { var efg = str.substr(str.indexOf("efg"), 3); alert(efg); } 3,判断一个字符串中出现次数最多的字符,统计这个次数 //将字符串的字符保存在一个hash table中,key是字符,value是这个字符出现的次数 var str = "abcdefgaddda"; var obj = {}; for (var i = 0, l = str.length; i < l; i++) { var key = str[i]; if (!obj[key]) { obj[key] = 1; } else { obj[key]++; } } /*遍历这个hash table,获取value最大的key和value*/ var max = -1; var max_key = ""; var key; for (key in obj) { if (max < obj[key]) { max = obj[key]; max_key = key; } } alert("max:"+max+" max_key:"+max_key); 4,IE与FF脚本兼容性问题 (1) window.event: 表示当前的事件对象,IE有这个对象,FF没有,FF通过给事件处理函数传递事件对象 (2) 获取事件源

最新web前端面试题(及答案)

1、常用那几种浏览器测试?有哪些内核(Layout Engine)? 答: (Q1) 浏览器:IE,Chrome,FireFox,Safari,Opera。 (Q2) 内核:Trident,Gecko,Presto,Webkit。 2、说下行内元素和块级元素的区别?行内块元素的兼容性使用?(IE8 以下)答: (Q1) 行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效。 块级元素:各占据一行,垂直方向排列。从新行开始结束接着一个断行。 (Q2) 兼容性:display:inline-block;*display:inline;*zoom:1; 3、清除浮动有哪些方式?比较好的方式是哪一种? 答: (Q1) (1)父级div定义height。 (2)结尾处加空div标签clear:both。 (3)父级div定义伪类:after和zoom。 (4)父级div定义overflow:hidden。 (5)父级div定义overflow:auto。 (6)父级div也浮动,需要定义宽度。 (7)父级div定义display:table。 (8)结尾处加br标签clear:both。 (Q2) 比较好的是第3种方式,好多网站都这么用。 4、box-sizing常用的属性有哪些?分别有什么作用? 答: (Q1)box-sizing: content-box|border-box|inherit; (Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度 之外绘制元素的内边距和边框(元素默认效果)。 border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内 进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的 宽度和高度。 5、Doctype作用?标准模式与兼容模式各有什么区别? 答: (Q1) 告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不 存在或格式不正确会导致文档以兼容模式呈现。 (Q2) 标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防 止站点无法工作。 6、HTML5 为什么只需要写?

web前端开发面试题汇总模板

web前端开发面试题汇总 1天前653浏览2评论 前端面试题汇总 HTML&CSS 1. 常用那几种浏览器测试?有哪些内核(Layout Engine)? (Q1) 浏览器:IE,Chrome,FireFox,Safari,Opera。 (Q2) 内核:Trident,Gecko,Presto,Webkit。 2. 说下行内元素和块级元素的区别?行内块元素的兼容性使用? (IE8 以下) 行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效。 块级元素:各占据一行,垂直方向排列。从新行开始结束接着一个断行。 兼容性:display:inline-block;display:inline;zoom:1; 3. 清除浮动有哪些方式?比较好的方式是哪一种? (1)父级div定义height。 (2)结尾处加空div标签clear:both。 (3)父级div定义伪类:after和zoom。 (4)父级div定义overflow:hidden。 (5)父级div定义overflow:auto。 (6)父级div也浮动,需要定义宽度。 (7)父级div定义display:table。

(8)结尾处加br标签clear:both。 总结:比较好的是第3种方式,简洁方便。 4. box-sizing常用的属性有哪些?分别有什么作用? 常用的属性:box-sizing: content-box border-box inherit; 作用:content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。 border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 5. Doctype作用?标准模式与兼容模式各有什么区别? (Q1) 告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。 (Q2) 标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。 6. HTML5 为什么只需要写< Doctype html>? HTML5不基于SGML,因此不需要对DTD进行引用;但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行)。而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。 7. 页面导入样式时,使用link和@import有什么区别? (1)link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用;而@import是CSS提供的,只能用于加载CSS; (2)页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面

WEB前端面笔试题总结

1. 如何显示/隐藏一个DOM元素? 更改元素的css style,设为display: none。此外还可以将visibility设为hidden,透明度设为0,或长、宽设为0。 2. 一个定宽网页在浏览器(IE6,IE7,Firefox,IE5)中横向居中对齐的布局, 请写出主要的HTML标签及CSS。 1. 2. 3. 4. 5.居中 6. 11. 12. 13.

居中
14.

15. 3. CSS中margin和padding的区别 margin是外边距,属于元素之外,相邻元素的margin可以融合。 padding是内边距,在元素之内,相邻元素的padding不可融合。 4. JavaScript中如何检测一个变量是一个String类型?请写出函数实现 function(obj) { returntypeof(obj) == ”string”; } 5. 网页中实现一个计算当年还剩多少时间的倒数计时程序,要求网页上实时动态 显示“××年还剩××天××时××分××秒” 这个看我论坛右上角的就知道了… 6. 如何控制网页在网络传输过程中的数据量 题目貌似有问题,应该是减少数据量吧。 最显著的方法是启用GZIP压缩。此外保持好的编码习惯,避免重复和css、 JavaScript代码,多余的HTML标签和属性。 7. 补充代码,是鼠标单击后Button1到Button2的后面

var parent =this.parentNode; parent.removeChild(this); parent.appendChild(this); 8. Linux中,将a、b打包为back.tar,命令是() 不知道=。= 9. Flash、Ajax各自的优缺点,在使用中如何取舍? Flash的缺点是需要客户端安装Flash插件,比较大,且更改了默认的HTML页面行为;但可以方便地实现很多特效及动画,且具有较高权限。 Ajax的缺点是编程较为复杂,需要服务器端的支持,能实现的效果只能是DOM API 提供的,权限很低,较难跨域;但可以显著加快页面的载入速度和用户体验。 此外,二者都不能被搜索引擎索引(Google已支持Flash文本的索引),不利于SEO。 建议:重要和关键部分直接用HTML,交互部分可以使用Ajax,复杂的动画可采用Flash。 百度2010 1、JS主要数据类型?5分

Web前端开发工程师面试题

一、CSS (1) 二、HTML (3) 三、jquery (3) 四、综合 (4) 一、C SS 1.CSS样式表根据所在网页的位置,可分为?(B ) A.行内样式表、内嵌样式表、混合样式表 B.行内样式表、内嵌样式表、外部样式表 C.外部样式表、内嵌样式表、导入样式表 D.外部样式表、混合样式表、导入样式表 2.对于标签,其中*代表(C ) A. 注释的时候才用上 B. 没有这个标签 C. 通配符,意思是所有的标签 3.在CSS中下面哪种方法表示超链接文字在鼠标经过时,超链接文字无下划线?(B ) A. A:link{TEXT-DECORATION: underline } B. A:hover {TEXT-DECORATION: none} C. A:active {TEXT-DECORATION: blink } D. A:visited {TEXT-DECORATION: overline } 4.下面代码片段,说法正确的是:(B ) .DIV1 { position:absolute; line-height:22px; height:58px; background-color: #FF0000; } A. Line-height:22px;修饰文本字体大小 B. position:absolute;表示绝对定位,被定位的元素位置固定 C. height:58px; 表示被修饰的元素距离别的元素的距离 D. background-color: #FF0000; 表示被修饰的元素的背景图像 5.用CSS设置DIV的左边为红色实线,下面设置正确的是(C ) A.style=”border-top: #ff0000 1 solid;”

Web前端技术试题

W e b前端技术试题 Company Document number:WTUT-WT88Y-W8BBGB-BWYTT-19998

[Web前端技术教学]《基于Web标准的网页设计与制作》试题及答案 一、单项选择:(每题分,共69分) 语言中,创建一个位于文档内部的锚点的语句是:( ) A. B. C. D. 答案:C 中的元素可分为块级(block)元素和行内(inline)元素,下列哪个元素是块级元素:( ) A. B. C. D. 答案:A 3.下列哪条html语句的写法符合XHTML规范:() A.
B. C. D. 答案:B 4.在编辑网页时,按“Ctrl+Shift+空格键”插入的HTML源代码为:( )

A.   B.   C. &sbnp D. &sbnp; 答案:B 5.标记一般包含在_____标记中。( ) A. B. C. D.

答案:A 6.要在新窗口打开一个链接指向的网页需用到( ) A. href=“_blank” B. Name=“_blank” C. target=“_blank” D. href=“#blank” 答案:C 7.特殊符号(版权符号)对应的源代码是:( ) A. Copy; B. ©; C. Copyright; D. ©right;答案:B 8.在网页中经常用的图像格式是:( ) A. gif, jpg和png B. gif, bmp和png C. bmp, jpg和png D. psd, gif和png 答案:A 9.关于JavaScript语言,下列说法中错误是:( )

前端工程师面试题题及答案(全面综合)

1. 要动态改变层中内容可以使用的方法有(AB ) a)innerHTML b)innerText c)通过设置层的隐藏和显示来实现 d)通过设置层的样式属性的display属性 2. 在javascript里,下列选项中不属于数组方法的是(B); a)sort() b)length() c)concat() d)reverse() 3 、var emp = new Array(3); for(var i in emp) 以下答案中能与for循环代码互换的是: (选择一项)。(D ) A for(var i =0; i

c)getElementsByName() d)bgColor() 6. 、display属性值的常用取值不包括(C ) a)inline b)block c)hidden d)none 7. 以下有关pixelTop属性与top属性的说法正确的是。(D ) a)都是Location对象的属性 b)使用时返回值都是字符串 c)都是返回以像素为单位的数值 d)以上都不对 8. 使用open方法打开具有浏览器工具条,地址栏,菜单栏的窗 口,下列选项正确的是__D__ a)open("x.html","HI","toolbas=1,scrollbars=1,status=1"); b)open("HI","scrollbars=1,location=1,status=1"); c)open("x.html","status=yes,menubar=1,location=1"); d)open("x.html","HI","toolbas=yes,menubar=1,location=1"); 9. 、javascript中表达式parseInt(“X8X8”)+paseFloat(‘8’)的结果是什么?( C) a)8+8 b)88 c)16 d)“8”+’8 10. 关于setTimeout(“check”,10)中说法正确的是( D)

web前端研发工程师笔试题选择题带答案

1. 要动态改变层中内容可以使用的方法有( AB ) a) i nn erHTML b) i nn erText c) 通过设置层的隐藏和显示来实现 d) 通过设置层的样式属性的 display 属性 2. 当按键盘 A 时,使用onKeyDown 事件打印event.keyCode 的结果是(A ) a) 65 b) 13 c) 97 d) 37 3.在javascript 里,下列选项中不属于数组方法的是( B ); a) sort() b) l e ngth() c)con cat() d) r everse( ) 4.下列哪一个选项可以用来检索被选定的选项的索引号 ?(B) a)disabled b) selectedl ndex c) opti on d) multiple 5.希望图片具有”提交”按钮同样的功能,该如何编写表单提交?(A ) 6. 使div 层和文本框处在冋一行的代码正确的是 (D ); a) b) c) d) 7. 下列选项中,描述正确的是(选择两项)。(AD ) a)options.add(new Option(,a?,'A?))可以动态添加一个下拉列表选项 b)option.add(new Option(,a?,'A?))可以动态添加一个下拉列表选项 c) n ew Optio n(,a?,'A?)中?a 表示列表选项的值,?A 用于在页面中显示 d) n ew Option(,a?,'A?)中?A 表示列表选项的值,?a 用于在页面中显示 8. 、 var emp = new Array(3); for(var i in emp) 以下答案中能与for 循环代码互换的是:(选择一项)。(D ) A for(var i =0; i

Web前端开发工程师笔试题.doc

Web前端开发工程师笔试题 Web前端开发工程师笔试题篇1 1. 在一个框架的属性面板中,不能设置下面哪一项。( C ) A.源文件; B.边框颜色; C.边框宽度 D.滚动条 2. CSS样式表根据所在网页的位置,可分为?(B ) A.行内样式表、内嵌样式表、混合样式表 B.行内样式表、内嵌样式表、外部样式表 C.外部样式表、内嵌样式表、导入样式表 D.外部样式表、混合样式表、导入样式表 3.对于标签,其中*代表GET或( C ) A. SET B. PUT C. POST D. INPUT 4. HTML代码 表示?(D ) A. 创建表格 B. 创建一个滚动菜单 C. 设置每个表单项的内容

D. 创建一个下拉菜单 5. 在表单中包含性别选项,且默认状态为男被选中,下列正确的是( A ) A. 男 B. 男 C. 男 D. 男 6. 在CSS中下面哪种方法表示超链接文字在鼠标经过时,超链接文字无下划线?(B ) A. A:link{TEXT-DECORATION: underline } B. A:hover {TEXT-DECORATION: none} C. A:active {TEXT-DECORATION: blink } D. A:visited {TEXT-DECORATION: overline } 7. 下面代码片段,说法正确的是:(B ) .DIV1 { position:absolute; line-height:22px; height:58px; background-color: #FF0000; }

A. Line-height:22px;修饰文本字体大小 B. position:absolute;表示绝对定位,被定位的元素位置固定 C. height:58px; 表示被修饰的元素距离别的元素的距离 D. background-color: #FF0000; 表示被修饰的元素的背景图像 8. 在Dreamweaver 中, 在设置各个框架属性时, 参数Scroll 是用来设置( B )属性的。 A. 是否进行颜色设置 B. 是否出现滚动条 C. 是否设置边框宽度 D. 是否使用默认边框宽度 9. 以下链接到电子邮件的正确格式是(B ) A. 邮箱 B. 邮箱 C. 邮箱 D. 邮箱 10. 若将Dreamweaver中2个横向相邻的单元格合并,则两单元格中文字会( A ) A.文字合并 B.左单元格文字丢失 C.右单元格文字丢失 D.系统出错

web前端开发工程师笔试题及答案

web前端开发工程师笔试题 1.html的含义是什么,其主体部分由什么标记构成? Html是一种标准,一种规范,它通过标记符号来标记要显示在网页中的各个部分,被称为超文本标记语言。 标记和之间的内容构成了html的主体部分。网页中所有内容,包括文字,图片,连接都包含在此标记符内。 2.说明在网页设计xxDIV标签的作用 Div中文名被称为“层次”可以把文档分割成独立的,不同的部分。 它可以用作严格的组织工具,并且不适用任何格式与其他关联。 3.css指的是什么?在网页设计中为什么要用到css技术? css是级联样式表,用来进行网页风格设计。使用样式表可以统一的控制html中各标志的显示属性。精确的确定元素的位置,扩充网页外观和特殊效果的显示能力。 4.css中id和class怎么定义,哪个定义的优先级别高?如果class定义一个html元素没边框,而id定义这个元素有边框,结果呢?

先听id的。 5.IE6下为什么不能第一1PX左右高度的容器? IE6默认的行高造成的。 6.怎样才能让层显示在FLASH之上? 给FLASH设置透明,param value=transparent。 7.怎样使一个层垂直剧中于浏览器中? 8. firefox嵌套div标签的剧中问题假定有如下情况:

如果要实现b在a中剧中放置该如何实现? 解决办法就是除了需要在a中设置text-align属性为center之后,还需要设置b的横向margin为auto。例如设置b的CSS样式为: margin:0 auto; 所以,设置如下就可以实现居中:
下载浏览速度快。被更多的用户访问。推广时被更多的机器访问。更少的代码,易于维护,宽带要求降低,降低成本,更容易被搜索引擎搜索到。改版方便,不需要改变内容。提供打印页面不用复制。 10.怎样解决超链接访问过后hover样式就不出现的问题。 改变CSS属性排列的顺序L-V-H-A(link ,visted,hover,active.)

WEB前端开发面试题集锦

1、列举你工作中遇到的IE6 BUG,谈谈解决方案。 3、如何用CSS分别单独定义IE6、7、8的width属性。 所有浏览器通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7、FF 共用 height: 100px !important; 4、CSS中哪些属性可以同父元素继承。 继承:(X)HTML元素可以从其父元素那里继承部分CSS属性,即使当前元素并没有定义该属性 Color;font-size; 5、你如何理解HTML结构的语意化。 1.去掉或样式丢失的时候能让页面呈现清晰的结构: html本身是没有表现的,我们看到例如

是粗体,字体大小2em,加粗;是加粗的,不要认为这是html 这些其实html默认的css样式在起作用,所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML 点,但是浏览器都有有默认样式,默认样式的目的也是为了更好的表达html的语义,可以说浏览器的默认样式和HTML结构是不可分割的。 2.屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页. 例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音. 3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页(通常是因为这些设备对CSS的支持较弱). 使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条染网页. 语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况(包括现有的或者将来新的设备一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式一文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面. 4.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重. 过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其宝贵的用户.没有他们的

前端面试题含答案

前端面试题含答案 The latest revision on November 22, 2020

前端开发面试知识点大纲: HTML&CSS : 对Web 标准的理解、浏览器内核差异、兼容性、hack 、CSS 基本功:布 局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应 JavaScript : 数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块 化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs 、 JSON 、ajax 等。 其他: HTTP 、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO 、UED 、架构、职业生涯 作为一名前端工程师,无论工作年头长短都应该必须掌握的知识点: 1、DOM 结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。 产品部-前端面试题-答案 产品部 Beijing

2、DOM操作——如何添加、移除、移动、复制、创建和查找节点等。 3、事件——如何使用事件,以及IE和标准DOM事件模型之间存在的差 别。 4、XMLHttpRequest ——这是什么、怎样完整地执行一次GET请求、怎样检测 错误。 5、严格模式与混杂模式——如何触发这两种模式,区分它们有何意义。 6、盒模型——外边距、内边距和边框之间的关系,及IE8以下版本的浏览器 中的盒模型 7、块级元素与行内元素——怎么用CSS控制它们、以及如何合理的使用它们 8、浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。 9、HTML与XHTML——二者有什么区别,你觉得应该使用哪一个并说出理由。 10、JSON ——作用、用途、设计结构。 HTML 一、Doctype作用严格模式与混杂模式如何区分它们有何意义 (1)、 声明位于文档中的最前面,处于 标签之前。告知浏览器的解析器,用什么文档类型规范来解析这个文档。

web前端开发面试题汇总

1天前653浏览 前端面试题汇总 HTML&CSS 1.常用那几种浏览器测试有哪些内核(LayoutEngine) (Q1)浏览器:IE,Chrome,FireFox,Safari,Opera。 (Q2)内核:Trident,Gecko,Presto,Webkit。 2.说下行内元素和块级元素的区别行内块元素的兼容性使用 (IE8以下) 行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置 line-height),margin上下无效,padding上下无效。 块级元素:各占据一行,垂直方向排列。从新行开始结束接着一个断行。 兼容性:display:inline-block;display:inline;zoom:1; 3.清除浮动有哪些方式比较好的方式是哪一种 (1)父级div定义height。 (2)结尾处加空div标签clear:both。 (3)父级div定义伪类:after和zoom。 (4)父级div定义overflow:hidden。 (5)父级div定义overflow:auto。 (6)父级div也浮动,需要定义宽度。 (7)父级div定义display:table。 (8)结尾处加br标签clear:both。 总结:比较好的是第3种方式,简洁方便。 常用的属性有哪些分别有什么作用 常用的属性:box-sizing:content-boxborder-boxinherit; 作用:content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和

边框(元素默认效果)。 border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 作用标准模式与兼容模式各有什么区别 (Q1)告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。 (Q2)标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。 为什么只需要写 HTML5不基于SGML,因此不需要对DTD进行引用;但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行)。而基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。 7.页面导入样式时,使用link和@import有什么区别 (1)link属于XHTML标签,除了加载CSS外,还能用于定义RSS,定义rel连接属性等作用;而@import是CSS提供的,只能用于加载CSS; (2)页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载; (3)import是提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题。 总之,link要优于@import。 8.介绍一下你对浏览器内核的理解 IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink(WebKit的分支)、Opera内核原为Presto ,现为Blink; 内核主要分成两部分: 渲染引擎(layoutengineer或RenderingEngine)和JS引擎 渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。 所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

Web前端笔试115道题(带答案及解析)

Web前端笔试115道题(带答案及解析) 1、html5为什么只需要写<!doctype html>? 答:html5不是基于sgml(标准通用标记语言),不需要对dtd 文件进行引用,但是需要doctype来规范浏览器的行为, 否则浏览器将开启怪异模式,而html4.01基于sgml,需要引入dtd,才能告知浏览器文档使用的文档类型 2、行内元素有哪些?块级元素有哪些?空(void)元素有哪些?行内元素有:a b span img input select strong(强调的语气) 块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p 知名的空元素: <br> <hr> <img> <input> <link>

<meta> 鲜为人知的是: <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr> 3、页面导入样式时,使用link和@import有什么区别? 两者都是外部引用CSS的方式,但是存在一定的区别: 区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。

区别2:link引用CSS时,在页面载入时同时加载; @import需要页面网页完全载入以后加载。 区别3:link是XHTML标签,无兼容问题;@import 是在CSS2.1提出的,低版本的浏览器不支持。 区别4:link支持使用Javascript控制DOM去改变样式;而@import不支持。 补充:@import最优写法 @import的写法一般有下列几种:

前端面试题含答案

前端开发面试知识点大纲: HTML&CSS : 对Web 标准的理解、浏览器内核差异、兼容性、hack 、CSS 基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应 JavaScript : 数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、 异步装载回调、模板引擎、Nodejs 、JSON 、ajax 等。 其他: HTTP 、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO 、UED 、架构、职业生涯 作为一名前端工程师,无论工作年头长短都应该必须掌握的知识点: 1、DOM 结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。 2、DOM 操作 ——如何添加、移除、移动、复制、创建和查找节点等。 3、事件 —— 如何使用事件,以及IE 和标准DOM 事件模型之间存在的差别。 4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET 请求、怎样检测错误。 5、严格模式与混杂模式 —— 如何触发这两种模式,区分它们有何意义。 6、盒模型 —— 外边距、内边距和边框之间的关系,及IE8以下版本的浏览器中的盒模型 7、块级元素与行内元素 —— 怎么用CSS 控制它们、以及如何合理的使用它们 8、浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。 9、HTML 与XHTML ——二者有什么区别,你觉得应该使用哪一个并说出理由。 10、JSON —— 作用、用途、设计结构。 产品部-前端面试题-答案 产品部 Beijing

HTML 一、Doctype作用? 严格模式与混杂模式如何区分?它们有何意义? (1)、 声明位于文档中的最前面,处于 标签之前。告知浏览器的解析器,用什么文档类型规范来解析这个文档。 (2)、严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行。 (3)、在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 (4)、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 二、行内元素有哪些?块级元素有哪些?空(void)元素有那些? (1)CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,比如div默认display属性值为“block”,成为“块级”元素;span默认display属性值为“inline”,是“行内”元素。 (2)行内元素有:a b span img input select strong(强调的语气)块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p (3)知名的空元素:


鲜为人知的是: 三、link 和@import 的区别是? (1)link属于XHTML标签,而@import是CSS提供的; (2)页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载; (3)import只在IE5以上才能识别,而link是XHTML标签,无兼容问题; (4)link方式的样式的权重高于@import的权重. 四、浏览器的内核分别是什么? * IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink(WebKit的分支)、Opera内核原为Presto,现为Blink;

web前端工程师面试经验

web前端工程师面试经验 首先面我的是一个豆瓣的前端(后来了解到其实也是做后端的),问的东西不多,大都是上的内容,没问到具体的技术实现,最后聊了一点儿linux,原来同是ubuntu 饭,并且已追新到9.04 beta。 稍息片刻后是技术总监Flyco ndor的第二轮,因为隔壁在开 会比较吵(偷听到有关tag之类的使用问题),所以转到了有沙发和foosball的休息区。开篇还是聊简历中的项目,不过问的内容比较宽泛,从工作职能到页面优化技巧、SEO,问答的形式比较轻松,所以不怎么紧张。后来被问到一个比较偏门的问题:豆瓣和新浪首页完整载入后html代码的大小。我当时的回答是豆瓣20k左右,新浪

大概5倍以下,后来觉得豆瓣可能会再小些,新浪的会再臃肿些。刚在家试了下,豆瓣20.8k,新浪395k,还好只是一个对关注度的测试题。后来脱离项目单独问了些关于前端优化的具体问题,因为早前看过一篇Yahoo!的Best Practices技术部分的提问算告一段落,但留了一道开放性的作业,问题还是围绕优化,但对象是豆瓣,开始我还想问咋没之类的,现在看来豆瓣做事更效率,与其出一些茅坑儿算法题,不如来真格的对实际项目下手,管你求助朋友查书还是Google,最后写出代码,高低自有公平论断,谁不是边学边实践边提高的。(说说而已了,明天起还得继续动手JS面向对象部分的实 际应用,抽空再多记一些经典算法,谁让俺心目中的盖世大企,还是来应试那一套,茅坑儿题照出呢),剩下是留给我的提问时间,一般来讲只是走走形式问问部门状况和福利之类的,但毕竟是钟爱的豆瓣,关注和感兴趣的东西自然多些,最后算下来我提问的时间比面我的时间还长,汗?涉及的鸡毛蒜皮的问题比较多就不赘述了,有一个让俺小惊的:豆瓣有12个程序员,其中4个是专做算法的。 去年的时候和一个淘宝UED的成员聊天,从他的话语中感觉很拜豆瓣的UE;今天在豆瓣看到不少人,只是不知哪些是做UE的, 如果没有专门的前端部门,应该是归到产品部的;没猜错应该就是我隔壁那一拨开完会后一起盒饭的人,ps,看到一个ppmm,断定不是童颜大龄文艺女青年。

初级Web前端工程师面试必看面试题(HTML+CSS+JavaScript)

初级Web前端工程师面试必看面试题 (HTML+CSS+JavaScript) 作者:来源于网络发布时间:07月20日 很多初级前端工程师去面试的时候可能不知道考官会问些什么,提前做好准备会为你的面试加分,极客学院整理出了一些必看的初级工程师面试考题,希望会大家有所帮助。 1.对WEB标准以及W3C的理解与认识? 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css 和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性; 2.XHTML和HTML有什么区别? HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言 最主要的不同: XHTML 元素必须被正确地嵌套。 XHTML 元素必须被关闭。 标签名必须用小写字母。 XHTML 文档必须拥有根元素。 3.Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?

用于声明文档使用那种规范(HTML/XHTML)一般为严格过度基于框架的html文档 加入XMl声明可触发,解析方式更改为IE5.5 拥有IE5.5的bug 4.行内元素有哪些?块级元素有哪些?CSS的盒模型? 块级元素:div p h1 h2 h3 h4 form ul 行内元素: a b br i span input select Css盒模型:内容,border ,margin,padding 5.CSS引入的方式有哪些? link和@import的区别是? 内联内嵌外链导入 区别:同时加载 前者无兼容性,后者CSS2.1以下浏览器不支持 Link 支持使用javascript改变样式,后者不可 6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高? 标签选择符类选择符id选择符 继承不如指定Id>class>标签选择 后者优先级高

相关文档
最新文档