PHP开发工程师面试真题之Web网页设计（附参考答案）
一、Form表单
真题1：简述POST和GET传输的最大容量分别是多少？
参考答案：
GET方法传递数据，控制在1MB之内（因为URL的长度限制在1MB字符以内）；POST方法传输数据没有大小的限制。
真题2：如何通过form表单控制上传文件的大小？
参考答案：
在form表单中，通过隐藏域MAX_FILE_SIZE控制上传文件的大小，它必须放置在文件域之前才能够起作用。
真题3：查看一下代码，判断是否能够获取到页面中传递的数据？
<form> <input type="text" name="text"> <input type="submit" name="sub" value="传递"> </form> <?php if(isset($_POST['sub'])){ echo $_POST['text']; } ?>
参考答案：
通过$_POST方法获取不到表单中提交的数据，可以利用$_GET方式实现获取数据。
因为form表单在没有定义method属性和action属性时，默认情况下采用get的传递方式来传递数据，并且默认情况下为当前页面跳转。
真题4：如何设置form表单中的只读属性？
参考答案：
利用readonly、disabled。
真题5：在什么情况下，$name与$_POST['name']可以通用？
参考答案：
在php.ini文件中register_globals = On 时，$name 与 $_POST['name']都可以获取form表单中表单元素name的值（以post方式提交）。
虽然可以通用，但是不推荐使用这种方式，因为会给程序带来安全隐患。
二、CSS样式
真题6：CSS的含义是什么？
参考答案：
CSS是W3C协会为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准，它的全称是“Cascading Style Sheet”，可译为“层叠样式表”或“级联样式表”。
其最大的用途就是实现内容与表现形式的分离，改变网页的整体表现形式，使维护站点的外观更加容易，使HTML文档代码更加简练，缩短浏览器的加载时间。
真题7：在HTML页面中插入CSS样式你会使用哪几种方式？（说出三种）
参考答案：
第一种方法：在标签内部定义style属性，然后定义本标签下的样式，如下所示：
<a href="#" style="border:0">链接</a>
第二种方法：在HTML页面中的<head></head>标签下定义一对<style></style>标记，在标记内部利用标签名称、类选择符、id选择符设置属性。
第三种方法：创建.css样式文件，在文件内部利用id选择符或类选择符等定义样式，然后在显示的HTML主页面中利用<link>标签引入文件，如下所示：
<link type="text/css" rel="stylesheet" href="路径">
真题8：CSS样式修订的常用属性有哪些？
参考答案：
1、Border：定义边框的属性可以设置边框的宽度、颜色、样式。
2、background-color，设置背景颜色。
3、background-image，设置背景图像。
4、font-size，设置字体大小。
5、font-family，设置字体。
6、text-align，设置或检索对象中文本的对齐方式。
真题9：如何解决一下代码在IE6下的双倍边距问题？
<style type="text/css"> body {margin:0;} div {float:left; margin-left:10px; width:200px; height:200px; border:1px solid red;} </style>
参考答案：
添加属性display:inline;。
真题10：如何解决超链接被点击后hover样式不出现的问题？
参考答案：
根据固定的顺序设置超级链接的属性，即可解决此问题，代码如下：
a:link{color:red; text-decoration:none;} a:visited{color:blue; text-decoration:none;} a:hover{color:black; text-decoration:overline;} a:action{color:black; text-decoration:overline;}
真题11：如何解决火狐浏览器下文本无法撑开容器的高度问题?
参考答案：
在火狐浏览器下，需要在原有基础上重新添加两个CSS属性，min-width和min-height，这样就不会出现类似的问题。也可以加入一个清除对齐方式的类clear:both属性的div来自动计算火狐浏览器的高度。
真题12：怎样定义1px左右高度的容器？
参考答案：
在div标签下控制文字的行高，超出行高的内容设置为不显示，代码如下：
div{overflow:hidden | zoom:0.08 | link-height:1px;border:1px solid black}
三、DIV标签
真题13：简述模型标签<span>和<div>标签的区别？
参考答案：
<div>和<span>标记同样作用于网页布局中，它们的不同之处在于span标记是属于内联的，一般用于小模块的样式内联到HTML文档中，div元素本身就是块级元素，多用于组合大块的代码。
真题14：准确指出以下代码的显示结果
<table border=1 width=450 style="text-align:center;"> <tr> <td rowspan=2 width=50% height=50>a</td> <td width=50% height=25>d</td> </tr> <tr> <td width=50% height=25>b</td> </tr> <tr height=25> <td colspan=2>c</td> </tr>
参考答案：
如下图所示：
| a | d |
| b | |
| c | |
真题15：如何使一个DIV层居中定位？
参考答案：
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
真题16：怎样解决firefox浏览器中嵌套div标签text-align属性失效的问题？
例如，在IE浏览器下嵌套的DIV标签可以实现居中的效果。
<style> .one{border:1px solid blue; width:300px; height:200px; text-align:center;} .two{border:1px solid blue; width:200px; height:100px;} </style> <div class="one"> <div class="two"></div> </div>
在IE浏览器中的效果显示为".two"区块左右居中显示，但是将这段代码在firefox浏览器中输入时，则为左对齐显示。
参考答案：
更改".two"区块的CSS代码，设置margin属性为“margin:0px auto”即可实现居中效果。但是为了使在IE与firefox浏览器中的显示效果相同，请不要去除".one"中的text-align属性。实现代码如下：
<style> .one{border:1px solid blue; width:300px; height:200px; text-align:center;} .two{border:1px solid blue; width:200px; height:100px; margin:0px auto;} </style> <div class="one"> <div class="two"></div> </div>
四、JavaScript脚本
真题17：请写出JavaScript脚本中弹出对话框的函数和获得输入焦点函数
参考答案：
弹出对话框可以使用alert()函数。
获取输入焦点可以使用focus()函数。
真题18：JavaScript的转向函数是什么？怎么引入一个外部JavaScript文件？
参考答案：
转向函数：window.location.href="文件名称"。
引入外部JavaScript文件：<script type="text/javascript" src="文件路劲及名称"></script>
真题19：编写代码，使得当鼠标划过文本框，自动选中文本框中的内容。
参考答案：
<input id="txt" type="text" value="baidu" onmouseover="this.select()"/>
真题20：编写代码，使得当鼠标单击文本框时，自动清除文本框中的内容
参考答案：
<input id="txt" type="text" value="baidu" onclick="this.value=''"/>
真题21：如何编写设置主页的JavaScript代码？
参考答案：
<a href="#" onclick="this.style.behavior='url(#default#homepage)'; this.setHomepage('url');">设为首页</a>
五、Ajax应用
真题22：如何理解Ajax与jQuery中的Ajax？
参考答案：
Ajax与jQuery中的Ajax都是针对浏览器无状态情况下的解决方案，jQuery中的Ajax是对Ajax的封装。
真题23：利用jQuery中的Ajax判断用户名是否被占用
参考答案：
需要定义两个页面，index.php页面代码如下:
<script type="text/javascript" src="jquery-1.4.2.js"></script> <input type="text"><input type="button" value="校验"> <scritpt type="text/javascript"> $(function(){ $("input:last").click(function(){ $.get("in.php",{ username:$("input:first").val() },function(data){ alert(data); }); }); }); </script>
in.php页面代码如下：
<?php $string = "用户名"; if(isset($_GET['username'])){ if(urldecode($_GET['username']) == $string){ echo "用户名被占用"; } else { echo "用户名可用"; } } ?>
真题24：编写代码，使得在文本框中输入一个年份，判断其生肖，并在文本框旁边输出，要求写出HTML和JavaScript代码
参考答案：
前台页面设计的代码如下：
<html> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="jquery-1.4.2.js"></script> <title>生肖的自动选择</title> </head> <body> <input type="text" value="请输入年份格式为1990" onclick="this.select()"> <input type="submit" value="判断"> <span></span> <script> $(function(){ $("input:last").click(function(){ $.get("in.php",{ number:$("input:first").val() },function(data){ $("span".text(data)); ); }); }); </script> </body> </html>
后台判断生肖的PHP脚本代码如下：
<?php if(isset($_GET['number'])){ $array = array("猪","鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗"); foreach($array as $key => $value){ if(ceil($_GET['number']%12) == $key){ echo $value; } } } ?>
六、jQuery框架
真题25：什么是jQuery？
参考答案：
jQuery是一个优秀的JavaScript库，是一个由John Resig创建于2006年1月的开源项目。其宗旨是——WRITE LESS，DO MORE（写更少的代码，做更多的事情）。
真题26：列举出jQuery中的常用选择题
参考答案：
基本选择题、层次选择题和过滤选择题
真题27：如何实现查找DOM树上的元素？请举例写出代码
参考答案：
var input = $("input:first"); //获取input标签中的第一个节点
真题28：如何在DOM树上创建并插入元素？请举例写出代码
参考答案：
<script type="text/javascript" src="jquery-1.4.2.js"></script> <div>水果</div> <script> var title = $("<span>苹果</span>"); $("div").append(title); $("div").before(title); $("div").prepend(title); $("div").after(title); </script>
真题29：如何在DOM树上替换指定元素？请举例写出代码
参考答案：
<script type="text/javascript" src="jquery-1.4.2.js"></script> <div>水果</div> <script> var title = $("<span>苹果</span>"); $("div").replaceWith(title); </script>
真题30：给您一张图片，让这张图片以淡出的效果消失在页面中，请写出代码
参考答案：
<script type="text/javascript" src="jquery-1.4.2.js"></script> <img src="color.jpg"> <script> $("img").click(function(){ $(this).fadeOut("slow")l }); </script>
真题31：制作一个按钮，当这个按钮被单击时以卷帘效果消失，请写出代码
参考答案：
<script type="text/javascript" src="jquery-1.4.2.js"></script> <input type="button" value="按钮" style="width:200px;height:200px;"> <script> $("input").click(function(){ $(this).slideUp("slow")l }); </script>
真题32：制作一个图片轮换效果并写出代码
参考答案：
<script type="text/javascript" src="jquery-1.4.2.js"></script> <style> ul(list-style:none;width:360px;height:200px;position:absolute;) li{position:absolute;} </style> <div class="change"> <ul> <li><img src="1.jpg" width="350px" height="200px"></li> <li><img src="2.jpg" width="350px" height="200px"></li> <li><img src="3.jpg" width="350px" height="200px"></li> <li><img src="4.jpg" width="350px" height="200px"></li> </ul> </div> <script> $(function(){ $(".change ul li:not(:first)").hide(); setInterval(function(){ if($(".change ul li:first").is(":visible")){ $(".change ul li:first").fadeIn("slow"); $(".change ul li:last").hide(); } else { $(".change ul li:visible").next().fadeIn("slow"); } },1000); }); </script>
真题33：如何使用jQuery获取当前DOM元素（obj）的左上角在整个文档中的位置？
参考答案：
<script type="text/javascript" src="jquery-1.4.2.js"></script> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> <li>ddd</li> </ul> <script> $(function(){ var height=$("ul".css("margin-top")); var width=$("ul").css("margin-left"); alert(height+"*"+width); }); </script>
PHP之友评论