2022年Web前端工程师面试题.docx
名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -1.依据下图,编写HTML 结构；要求：遵循xHTML 1.0规范且符合Web 语义；<dl> <dt><a href=” # ” ><img /></a></dt> <dd> <a href=” # ” >联想 IdeaPad U130红色至尊高性价比 </a> <em>￥ 8888.00</em </dd> </dl> <ul> <li> <a href=” # ” ><img /></a> U130 红色至尊高性价比 </a></span> <span><a href=” # ” >联想 IdeaPad <em>￥ 8888.00</em> </li> </ul> 2.请用 CSS定义 <p> 标签,要求实现以下成效: 字体颜色在 IE6 下为黑色 #000000；IE7 下为红色 #ff0000；而其他浏览器下为绿色#00ff00；p color:#00ff00; *color:#ff0000; _color:#000; 细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 1 页,共 4 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -<style> pcolor:#00ff00; </style> <.-if IE 7> <style> pcolor:#ff0000; </style> <.endif-> <.-if IE 6> <style> pcolor: #000; </style> <.endif-> 3 请依据下面的 HTML 和 CSS 代码,画出布局示意图：<div id="page"> <div class="main"><div class="sub"></div></div> <div class="nav"></div> </div> <style type="text/css"> body,divmargin:0px;padding:0px; #page width: 520px; .nav width: 200px; float: right; .main width: 200px; float: left; padding-left: 110px; .sub width: 100px; float: left; margin: 10px 0 10px -100px; .main border: 1px solid #000; .nav, .sub border: 1px dashed #000; height: 300px; .sub height: 280px; </style> 宽度高度值不必精确到像素,示意即可；4. 分析下面的JavaScript代码段var a=new Array2,3,4,5,6; var sum=0; fori=1;i<a.length;i+ sum +=ai; 细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 2 页,共 4 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -document.writesum; 输出结果是 . 18 5. 分析下面的JavaScript代码段var a=15.49; document.writeMath.rounda; 输出的结果是？15 代码段6. 分析下面的JavaScriptvar a = 1.5,b; b=parseInta; b 的值是？ 1 7、完成函数showImg,要求能够动态依据下拉列表的选项变化,更新图片的显示<body> <script type="text/javascript" > function showImgoSel / 在此处添加代码 var val=oSel.value; var pic=document.getElementById“ pic ” ; pic.src=val+” .jpg” ; </script> <img id="pic" src="img1.jpg" width="200" height="200" /> <br /> <select id="sel" onchange="showImgthis"> <option value="img1"> 城市生活 </option> <option value="img2"> 都市早报 </option> <option value="img3"> 青山绿水 </option> </select> </body> 8. 简述列举文档对象模型DOM里 document的常用的查找拜访节点的方法并做简洁说明docoument.getElementById; docoument.getElementsByTagName; 细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 3 页,共 4 页 - - - - - - - - - 名师归纳总结 精品学习资料 - - - - - - - - - - - - - - -docoument.getElementsByName; 9. 分别指出三个alert（）弹出的值 : <script type="text/javascript"> var x=1; var y=2; var z=3; function Fn1 var z=4; return y=x+z;/5 alerty;/2 alertFn1;/5 alertx+y+z;/1+5+3=9 </script> 10. 将如下代码转化为if语句<script type="text/javascript"> var myName=myName.=null.myName:10; </script> <script type="text/javascript"> var myName; ifmyName.=null myName=myName; else myName=10; </script> 细心整理归纳 精选学习资料 - - - - - - - - - - - - - - - 第 4 页,共 4 页 - - - - - - - - -
