PHP开发工程师面试真题之Web网页设计（附参考答案）

程序员文章站 2022-06-17 08:00:00

...

一、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页面中的

标签下定义一对标记，在标记内部利用标签名称、类选择符、id选择符设置属性。

第三种方法：创建.css样式文件，在文件内部利用id选择符或类选择符等定义样式，然后在显示的HTML主页面中利用标签引入文件，如下所示：

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标记是属于内联的，一般用于小模块的样式内联到HTML文档中，div元素本身就是块级元素，多用于组合大块的代码。

真题14：准确指出以下代码的显示结果

table border=1 width=450 style="text-align:center;">
tr>
    td rowspan=2 width=50% height=50>atd>
    td width=50% height=25>dtd>
tr>
tr>
    td width=50% height=25>btd>
tr>
tr height=25>
    td colspan=2>ctd>
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文件：

真题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 = $("苹果");
$("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 = $("苹果");
$("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>aaali>
    li>bbbli>
    li>cccli>
    li>dddli>
ul>
script>
    $(function(){
        var height=$("ul".css("margin-top"));
        var width=$("ul").css("margin-left");
        alert(height+"*"+width);
    });
script>