[Web前端技术教学]《基于Web标准的网页设计与制作》试题及答案
一、单项选择:（每题1.5分,共69分）
1.html语言中,创建一个位于文档内部的锚点的语句是:( )
A.
B.
2.html中的元素可分为块级(block)元素和行内(inline)元素,下列哪个元素是块级元素:( )
A.
B.
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语言,下列说法中错误是:( )
A. JavaScript语言是一种解释性语言
B. JavaScript语言与操作环境无关
C. JavaScript语言与客户端浏览器无关
D. JavaScript是动态的,它可以直接对用户输入做出响应
答案:C
10.如何能够定义列表的项目符号为实心矩形？( )
A. list-type: square
B. type: 2
C. type: square
D. list-style-type: square
答案:D
11.下列哪种CSS属性不能让页面在浏览器中居中显示(网页中所有可显示的元素都包含在一个id为container的div盒子内) ( )
A. #container { margin: 0 auto ; width:780px;}
B. #container { position: relative; width:780px;
left:50%; margin-left: -390px; }
C. #container { margin: 0 auto ; width:85%; }
D. #container { position: relative; width:780px;
right:50%; margin-left: 390px; }
答案:D
12.下列哪条CSS样式规则是不正确的:( )
A. img { float: left; margin: 20px; }
B. img { float: right; width: 120px;height: 80px; }
C. img { float: right; right: 30; }
D. img { float: left; margin-bottom: 2em; }
答案:C
13.CSS是利用什么XHTML标记构建网页布局？( )
A.
B.
C.
D.
答案:B
14.在CSS语言中下列哪一项的适用对象是"所有对象"？( )
A. 背景附件
B. 文本排列
C. 纵向排列
D. 文本缩进
答案:A
15.下列选项中不属于CSS 文本属性的是( )
A. font-size
B. text-transform
C. text-align
D. line-height
答案:D
16.在CSS 中不属于添加在当前页面的形式是( )
A. 内联式样式表
B. 嵌入式样式表
C. 层叠式样式表
D. 链接式样式表
答案:D
17.在CSS语言中下列哪一项是"列表样式图象"的语法？( )
A. width: <值>
B. height: <值>
C. white-space: <值>
D. list-style-image: <值>
答案:D
18.下列哪一项是CSS正确的语法构成？( )
A. body:color=black
B. {body;color:black}
C. body {color: black;}
D. {body:color=black(body}
答案:C
19.下面哪个CSS属性是用来更改背景颜色的？( )
A. background-color:
B. bgcolor:
C. color:
D. text:
答案:A
20.怎样给所有的
A. .h1 {background-color:#FFFFFF}
B. h1 {background-color:#FFFFFF;}
C. h1.all {background-color:#FFFFFF}
D. #h1 {background-color:#FFFFFF}
答案:B
21.下列哪个CSS属性可以更改样式表的字体颜色？( )
A. text-color=
B. fgcolor:
C. text-color:
D. color:
答案:D
22.下列哪个CSS属性可以更改字体大小？( )
A. text-size
B. font-size
C. text-style
D. font-style
答案:B
23.下列哪段代码能够定义所有P标签内文字加粗？( )
A.
B.
C. p {text-size:bold}
D. p {font-weight:bold}
答案:D
24.如何去掉文本超级链接的下划线？( )
A. a {text-decoration:no underline}
B. a {underline:none}
C. a {decoration:no underline}
D. a {text-decoration:none}
答案:D
25.如何设置英文首字母大写？( )
A. text-transform:uppercase
B. text-transform:capitalize
C. 样式表做不到
D. text-decoration:none
答案:B
26.下列哪个CSS属性能够更改文本字体？( )
A. f:
B. font=
C. font-family:
D. text-decoration:none
答案:C
27.下列哪个CSS属性能够设置文本加粗？( )
A. font-weight:bold
B. style:bold
C. font:b
D. font=
答案:A
28. CSS中,padding:10px 20px 30px 40px代表的填充值顺序分别是:
A. 上、右、下、左
B. 上、下、左、右
C. 上、左、下、右
D. 左、右、上、下
答案:A
29.下列哪个属性能够设置盒模型的左侧外补丁？( )
A. margin:
B. indent:
C. margin-left:
D. text-indent:
答案:C
30.定义盒模型外补丁的时候是否可以使用负值? ( )
A. 是
B. 否
答案:A
31.常见的JavaScript框架有jQuery、Prototype、Moottools、ExtJS 和Spry等。目前jQuery最受开发者追捧,Spry框架是DW CS3中新增的功能。
A. 正确
B. 错误
答案:A
32.网页的本质是( )文件。
A.图像
B.纯文本
C.可执行文件
D.图像和文本的压缩
答案:B
33.不是动态网页的特点的一项是:
A.动态网页可每次显示不同的内容
B.动态网页中含动画
C.动态网页中含有服务端代码
D.动态网页一般需要数据库支持
答案: B
34.CSS长度单位有绝对单位、相对单位和百分比。下列说法正确的是:
A. px指屏幕的像素,它是相对单位
B. pt指屏幕的像素,它是相对单位
C. pt指屏幕的像素,它是绝对单位,屏幕上尺寸不随屏幕分辨率的改变而改变
D. pt在印刷行业中常见,是相对单位
答案: A
35.实现图文混排及首字下沉效果最好的技术方法是:
A.浮动
B.相对定位
C.绝对定位
D.以上都对
答案: A
36.CSS长度单位有绝对单位、相对单位和百分比。下列说法正确的是:
A. px指屏幕的像素,它是绝对单位.
B. pt指屏幕的像素,它是相对单位.
C. pt指point,它是绝对单位,打印出的尺寸不随屏幕分辨率的改变而改变.
D. pt在印刷行业中常见,是相对单位
答案: C
37.position默认值为static。表示:
A. 表示不使用定位属性定位
B. 表示以浏览器窗口为基准进行绝对定位
答案: A
38.关于CSS,正确的是:
A. 边界margin值可为负,填充padding指不可为负
B. 对行内元素设置width或height值也是起作用的
C. 使用CSS，只能使用
进行结构设计D. margin可以单独设置背景颜色
答案: A
39.当两个块级元素的盒子上下排列时,它们之间的边界(margin)将发生合并,而左右排列时不会。
A. 正确
B. 错误
答案: A
40.JavaScript是一种基于对象的语言,而不是面向对象的语言。
A. 正确
B. 错误
答案: A
41.JavaScript是事件驱动的语言。
A. 正确
B. 错误
答案: A
42.JavaScript变量名不能是关键字或保留字,不区分大小写。
A. 正确
B. 错误
答案: B
43.document对象即属于BOM,又属于DOM。
A. 正确
B. 错误
答案: A
44.对DOM标准支持最好的浏览器是IE。
A. 正确
B. 错误
答案: B
45.常用的HTML事件中,onBlur的描述是:任何元素或窗口失去焦点时触发。
A. 正确
B. 错误
答案: A
46.可以使用DOM动态操作CSS属性。
A. 正确
B. 错误
答案:A
二、填空:（每空1分,共15分。）
1. HTML代码中常见的单标记有( ) 和( )。
答案:
2. ( )标记用来创建一个标有数字的列表；( )标记用来创建一个标有黑点的列表,两种列表可以使用CSS属性list-style-type进行转换,( )标记用来创建一个列表项。
答案:
3.有一a元素结构为
a {
font-size:14px;
text-decoration:none; /* 1: */
background-image:url(xxwlzx/yuanjiao2.gif);
height:32px;
padding-left:24px;
display:block; /* 2: */
float:left; /*3: */
line-height:32px; /* 4: */
}
b {
background-image:url(xxwlzx/yuanjiao2.gif);
background-position:right top; /*5: */
display:block;
width:60px；
}
答案:
1:清除超链接的下划线
2:将a标记以块级元素显示
3:让a标记左浮动
4:将行高和高设为相同,实现盒子中的文字垂直居中
5:让背景图片从右下角开始显示
6.下列各项描述的定位方式是什么?(填写static、relative、aboslute 或fixed中的一项或多项)
1)元素在标准流中的位置会被保留。( )
2)能够通过z-index属性该表元素的层叠次序。( )
3)元素以它的包含框为定位基准。( )
4)元素相对于它原来的位置为定位基准。( )
5)元素在标准流中的位置会被其它元素占据。( )
答案:
1)元素在标准流中的位置会被保留。relative
2)能够通过z-index属性该表元素的层叠次序。aboslute relative fixed
3)元素以它的包含框为定位基准。aboslute
4)元素相对于它原来的位置为定位基准。relative
5)元素在标准流中的位置会被其它元素占据。aboslute fixed
三、问答题（共16分）
1.CSS中的选择器有很多种类型,写出下列选择器的类型和作用:(10分) 1）a:hover 2)a.hover 3)a:hover b 4)a.hover b
答:
1)a:hover是伪类选择器,当鼠标悬浮在a标记上时应用该选择器定义的样式；
2)a.hover是交集选择器,应用了.hover类选择器的a标记应用该样式；
3)a:hover b是后代选择器,当鼠标悬浮在a标记上时,被a标记包含的b 标记将应用该样式；
4)a.hover b是后代选择器,应用了.hover类选择器的a标记里的b标记将应用该样式。
2.有些网页里超链接的下划线是虚线,你认为这是怎么实现的？(6分) 答:将该元素的CSS属性里的text-decoration: none;再将其border-bottom设为1象素,虚线.(或者用一张下面有虚线的图片作为该元素的盒子背景),
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) 获取事件源
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 为什么只需要写？
1. 如何显示/隐藏一个DOM元素？ 更改元素的css style，设为display: none。此外还可以将visibility设为hidden，透明度设为0，或长、宽设为0。 2. 一个定宽网页在浏览器（IE6，IE7，Firefox，IE5）中横向居中对齐的布局， 请写出主要的HTML标签及CSS。 1. 2. 3.
4. 5.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的后面
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前端开发师笔试题====================================== 一、填空题（40分） 1、目前常用的WEB标准静态页面语言是__ ______。（4分）html 2、改变元素的外边距用________，改变元素的内填充用________。（6分）margin padding 3、在Table中，TR是________，TD是________。（6分）行列 4、如果给一行两列的表格（table）定义高度样式，在________标签中定义最合理，最能减少代码的臃肿。（5分式也有说tr 5、对ul li的样式设成无，应该是用什么属性________。（6分）list-styl-type：none； 6、在新窗口打开链接的方法是________。（4分）target=_bank 7、Color:#666666;可缩写为________。（2分）color：#666 8、合理的页面布局中常听过结构与表现分离，那么结构是________，表现是________。（9分）div css 二、选择题（20分） 1 1、列举常用的浏览器类型以及他们使用的内核还有对应的调试工具 常用的有IE(6,7,8,9,10,FF,chrome ) IE常用的调试工具有 IEWebDeveloper (IE9默认有安装) Firefox大家估计用的最多。firefox chrome(内核webkit) 自带的有google 开发的内置调试工具。 三者内核各不相同。 其它还有opera，遨游，世界之窗等； chrome内核跑的比较快，安全。Firefox做调试是最棒的。 4、html5和css3有什么新特性 html5强化了 Web 网页的表现性能，如:nav header section canvas等，语义化更强
一、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;”
W e b前端技术试题 Company Document number：WTUT-WT88Y-W8BBGB-BWYTT-19998
[Web前端技术教学]《基于Web标准的网页设计与制作》试题及答案 一、单项选择:（每题分,共69分） 语言中,创建一个位于文档内部的锚点的语句是:( ) A.
B. C.
D.
答案:B 4.在编辑网页时,按“Ctrl+Shift+空格键”插入的HTML源代码为:( )
A. B. C. &sbnp D. &sbnp; 答案:B 5.
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前端开发工程师笔试题 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标签的剧中问题假定有如下情况：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 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运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。 为什么只需要写 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的写法一般有下列几种： 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，断定不是童颜大龄文艺女青年。 1. 要动态改变层中内容可以使用的方法有（AB ） a)innerHTML b)innerText c)通过设置层的隐藏和显示来实现 d)通过设置层的样式属性的display属性 2. 当按键盘A时，使用onKeyDown事件打印event.keyCode的结果是（A ） a)65 b)13 c)97 d)37 3. 在javascript里，下列选项中不属于数组方法的是（B）； a)sort() b)length() c)concat() d)reverse() 4. 下列哪一个选项可以用来检索被选定的选项的索引号?(B) a)disabled b)selectedIndex c)option d)multiple 5. 希望图片具有”提交”按钮同样的功能,该如何编写表单提交?(A ) a)在图片的onClick事件中手动提交 b)在图片上添加onSubmit事件 c)在图片的onSubmit事件中手动提交 d)在表单中自动提交 6. 使div层和文本框处在同一行的代码正确的是(D ); a) b) c) d) 7. 下列选项中,描述正确的是(选择两项) 。( AD ) a)options.add(new Option(?a?,'A?))可以动态添加一个下拉列表选项 b)option.add(new Option(?a?,'A?))可以动态添加一个下拉列表选项 c)new Option(?a?,'A?)中?a'表示列表选项的值,?A'用于在页面中显示 d)new Option(?a?,'A?)中?A'表示列表选项的值,?a'用于在页面中显示 8. 、 var emp = new Array(3); for(var i in emp) 以下答案中能与for循环代码互换的是: （选择一项）。(D ) A for(var i =0; i<emp; i++) 初级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>标签选择 后者优先级高 1Doctype作用？严格模式与混杂模式如何区分？它们有何意义? HTML5 为什么只需要写 ？ 行内元素有哪些？块级元素有哪些？空(void)元素有那些？ 页面导入样式时，使用link和@import有什么区别？ 介绍一下你对浏览器内核的理解？ 常见的浏览器内核有哪些？ html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？ 简述一下你对HTML语义化的理解？ HTML5的离线储存怎么使用，工作原理能不能解释一下？ 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？ 请描述一下 cookies，sessionStorage 和 localStorage 的区别？ iframe有那些缺点？ Label的作用是什么？是怎么用的？（加 for 或包裹） HTML5的form如何关闭自动完成功能？ 如何实现浏览器内多个标签页之间的通信? (阿里) webSocket如何兼容低浏览器？(阿里) 页面可见性（Page Visibility）API 可以有哪些用途？ 如何在页面上实现一个圆形的可点击区域？ 实现不使用 border 画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。 网页验证码是干嘛的，是为了解决什么安全问题？ tite与h1的区别、b与strong的区别、i与em的区别？ 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？ CSS选择符有哪些？哪些属性可以继承？ CSS优先级算法如何计算？ CSS3新增伪类有那些？ 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？ display有哪些值？说明他们的作用。 position的值relative和absolute定位原点是？ CSS3有哪些新特性？ 请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？ 用纯CSS创建一个三角形的原理是什么？ 一个满屏品字布局如何设计? 常见兼容性问题？ li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？ 经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？ 为什么要初始化CSS样式。 absolute的containing block计算方式跟正常流有什么不同？ CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？ HTML+CSS 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哪个优先级高？ 1) 现在有以下HTML 代码： web前端开发面试题汇总
Web前端笔试115道题(带答案及解析)
web前端工程师面试经验
WEB前端研发工程师笔试题(选择题带答案)
初级Web前端工程师面试必看面试题(HTML+CSS+JavaScript)
web前端面试题大全
web前端试题(一)附答案
Web前端笔试题
补全下面的CSS div.wrapper { border: 1px solid#ccc; width: 200px; padding: 10px; // TODO } div.box { width: 50px; height: 50px; border: 1px solid#ccc; } div.box1 { // TODO } div.box2 { // TODO } 以达到以下效果：
2) 补充完成下面的代码： function People (name) { https://www.doczj.com/doc/fe3516271.html,= name; } // TODO // ... // var jerry =new People('Jerry'); jerry.sayHi(); // => 'Hi, I am Jerry' var lucy =new People('Lucy'); lucy.sayHi(); // => 'Hi, I am Lucy' 3) 补充下面的代码，尽量多地写出你能想到的实现方案。 var arr = [ { name:'Jerry' }, { name:'Lily' }, { name:'Lucy' }, { name:'Tomy' } ]; var arr2 =/* TODO */; arr === arr2; // => false arr[0] === arr2[0]; // => true arr[1] === arr2[1]; // => true arr[2] === arr2[2]; // => true arr[3] === arr2[3]; // => true
前端研发笔试题 备注：请将答案写在答题纸上. 一、选择题 1．下面标签嵌套正确的是（） A.