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

一、Form表单

真题1：简述POST和GET传输的最大容量分别是多少？

参考答案：

GET方法传递数据，控制在1MB之内（因为URL的长度限制在1MB字符以内）；POST方法传输数据没有大小的限制。

 

真题2：如何通过form表单控制上传文件的大小？

参考答案：

在form表单中，通过隐藏域MAX_FILE_SIZE控制上传文件的大小，它必须放置在文件域之前才能够起作用。

 

真题3：查看一下代码，判断是否能够获取到页面中传递的数据？

<span><</span><span>form</span><span>></span>
<span><</span><span>input </span><span>type</span><span>="text"</span><span> name</span><span>="text"</span><span>></span>
<span><</span><span>input </span><span>type</span><span>="submit"</span><span> name</span><span>="sub"</span><span> value</span><span>="传递"</span><span>></span>
<span></</span><span>form</span><span>></span>
<span><?</span><span>php
    if(isset($_POST['sub'])){
        echo $_POST['text'];    
    }
</span><span>?></span>    

 

参考答案：

通过$_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属性，然后定义本标签下的样式，如下所示：

<span><</span><span>a </span><span>href</span><span>="#"</span><span> style</span><span>="border:0"</span><span>></span>链接<span></</span><span>a</span><span>></span>

 

第二种方法：在HTML页面中的

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

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

<span><</span><span>link </span><span>type</span><span>="text/css"</span><span> rel</span><span>="stylesheet"</span><span> href</span><span>="路径"</span><span>></span>

 

 

真题8：CSS样式修订的常用属性有哪些？

参考答案：

1、Border：定义边框的属性可以设置边框的宽度、颜色、样式。

2、background-color，设置背景颜色。

3、background-image，设置背景图像。

4、font-size，设置字体大小。

5、font-family，设置字体。

6、text-align，设置或检索对象中文本的对齐方式。

 

真题9：如何解决一下代码在IE6下的双倍边距问题？

<span><</span><span>style </span><span>type</span><span>="text/css"</span><span>></span><span>
body </span><span>{</span><span>margin</span><span>:</span><span>0</span><span>;</span><span>}</span><span>
div </span><span>{</span><span>float</span><span>:</span><span>left</span><span>;</span><span> margin-left</span><span>:</span><span>10px</span><span>;</span><span> width</span><span>:</span><span>200px</span><span>;</span><span> height</span><span>:</span><span>200px</span><span>;</span><span> border</span><span>:</span><span>1px solid red</span><span>;</span><span>}</span>
<span></</span><span>style</span><span>></span>

 

参考答案：

添加属性display:inline;。

 

真题10：如何解决超链接被点击后hover样式不出现的问题？

参考答案：

根据固定的顺序设置超级链接的属性，即可解决此问题，代码如下：

<span>a:link</span>{<span>color</span>:<span>red</span>;<span> text-decoration</span>:<span>none</span>;}<span>
a:visited</span>{<span>color</span>:<span>blue</span>;<span> text-decoration</span>:<span>none</span>;}<span>
a:hover</span>{<span>color</span>:<span>black</span>;<span> text-decoration</span>:<span>overline</span>;}<span>
a:action</span>{<span>color</span>:<span>black</span>;<span> text-decoration</span>:<span>overline</span>;}

 

真题11：如何解决火狐浏览器下文本无法撑开容器的高度问题?

参考答案：

在火狐浏览器下，需要在原有基础上重新添加两个CSS属性，min-width和min-height，这样就不会出现类似的问题。也可以加入一个清除对齐方式的类clear:both属性的div来自动计算火狐浏览器的高度。

 

真题12：怎样定义1px左右高度的容器？

参考答案：

在div标签下控制文字的行高，超出行高的内容设置为不显示，代码如下：

<span>div</span>{<span>overflow</span>:<span>hidden | zoom:0.08 | link-height:1px</span>;<span>border</span>:<span>1px solid black</span>}

 

三、DIV标签

真题13：简述模型标签和

标签的区别？

参考答案：

和标记同样作用于网页布局中，它们的不同之处在于span标记是属于内联的，一般用于小模块的样式内联到HTML文档中，div元素本身就是块级元素，多用于组合大块的代码。

 

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

<span><</span><span>table </span><span>border</span><span>=1 </span><span>width</span><span>=450 </span><span>style</span><span>="text-align:center;"</span><span>></span>
<span><</span><span>tr</span><span>></span>
    <span><</span><span>td </span><span>rowspan</span><span>=2 </span><span>width</span><span>=50% </span><span>height</span><span>=50</span><span>></span>a<span></</span><span>td</span><span>></span>
    <span><</span><span>td </span><span>width</span><span>=50% </span><span>height</span><span>=25</span><span>></span>d<span></</span><span>td</span><span>></span>
<span></</span><span>tr</span><span>></span>
<span><</span><span>tr</span><span>></span>
    <span><</span><span>td </span><span>width</span><span>=50% </span><span>height</span><span>=25</span><span>></span>b<span></</span><span>td</span><span>></span>
<span></</span><span>tr</span><span>></span>
<span><</span><span>tr </span><span>height</span><span>=25</span><span>></span>
    <span><</span><span>td </span><span>colspan</span><span>=2</span><span>></span>c<span></</span><span>td</span><span>></span>
<span></</span><span>tr</span><span>></span>

 

参考答案：

如下图所示：

a	d
	b
c

 

真题15：如何使一个DIV层居中定位？

参考答案：

<span>position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;</span>

 

 

真题16：怎样解决firefox浏览器中嵌套div标签text-align属性失效的问题？

例如，在IE浏览器下嵌套的DIV标签可以实现居中的效果。

<span><</span><span>style</span><span>></span><span>
.one</span><span>{</span><span>border</span><span>:</span><span>1px solid blue</span><span>;</span><span> width</span><span>:</span><span>300px</span><span>;</span><span> height</span><span>:</span><span>200px</span><span>;</span><span> text-align</span><span>:</span><span>center</span><span>;</span><span>}</span><span>
.two</span><span>{</span><span>border</span><span>:</span><span>1px solid blue</span><span>;</span><span> width</span><span>:</span><span>200px</span><span>;</span><span> height</span><span>:</span><span>100px</span><span>;</span><span>}</span>
<span></</span><span>style</span><span>></span>
<span><</span><span>div </span><span>class</span><span>="one"</span><span>></span>
    <span><</span><span>div </span><span>class</span><span>="two"</span><span>></</span><span>div</span><span>></span>
<span></</span><span>div</span><span>></span>

 

在IE浏览器中的效果显示为".two"区块左右居中显示，但是将这段代码在firefox浏览器中输入时，则为左对齐显示。

参考答案：

更改".two"区块的CSS代码，设置margin属性为“margin:0px auto”即可实现居中效果。但是为了使在IE与firefox浏览器中的显示效果相同，请不要去除".one"中的text-align属性。实现代码如下：

<span><</span><span>style</span><span>></span><span>
.one</span><span>{</span><span>border</span><span>:</span><span>1px solid blue</span><span>;</span><span> width</span><span>:</span><span>300px</span><span>;</span><span> height</span><span>:</span><span>200px</span><span>;</span><span> text-align</span><span>:</span><span>center</span><span>;</span><span>}</span><span>
.two</span><span>{</span><span>border</span><span>:</span><span>1px solid blue</span><span>;</span><span> width</span><span>:</span><span>200px</span><span>;</span><span> height</span><span>:</span><span>100px</span><span>;</span><span> margin</span><span>:</span><span>0px auto</span><span>;</span><span>}</span>
<span></</span><span>style</span><span>></span>
<span><</span><span>div </span><span>class</span><span>="one"</span><span>></span>
    <span><</span><span>div </span><span>class</span><span>="two"</span><span>></</span><span>div</span><span>></span>
<span></</span><span>div</span><span>></span>

 

四、JavaScript脚本

真题17：请写出JavaScript脚本中弹出对话框的函数和获得输入焦点函数

参考答案：

弹出对话框可以使用alert()函数。

获取输入焦点可以使用focus()函数。

 

真题18：JavaScript的转向函数是什么？怎么引入一个外部JavaScript文件？

参考答案：

转向函数：window.location.href="文件名称"。

引入外部JavaScript文件：

 

真题19：编写代码，使得当鼠标划过文本框，自动选中文本框中的内容。

参考答案：

<span><</span><span>input </span><span>id</span><span>="txt"</span><span> type</span><span>="text"</span><span> value</span><span>="baidu"</span><span> onmouseover</span><span>="this.select()"</span><span>/></span>

 

 

真题20：编写代码，使得当鼠标单击文本框时，自动清除文本框中的内容

参考答案：

<span><</span><span>input </span><span>id</span><span>="txt"</span><span> type</span><span>="text"</span><span> value</span><span>="baidu"</span><span> onclick</span><span>="this.value=''"</span><span>/></span>

 

 

真题21：如何编写设置主页的JavaScript代码？

参考答案：

<span><</span><span>a </span><span>href</span><span>="#"</span><span> onclick</span><span>="this.style.behavior='url(#default#homepage)'; this.setHomepage('url');"</span><span>></span>设为首页<span></</span><span>a</span><span>></span>

 

 

五、Ajax应用

真题22：如何理解Ajax与jQuery中的Ajax？

参考答案：

Ajax与jQuery中的Ajax都是针对浏览器无状态情况下的解决方案，jQuery中的Ajax是对Ajax的封装。

 

真题23：利用jQuery中的Ajax判断用户名是否被占用

参考答案：

需要定义两个页面，index.php页面代码如下:

<span><</span><span>script </span><span>type</span><span>="text/javascript"</span><span> src</span><span>="jquery-1.4.2.js"</span><span>></</span><span>script</span><span>></span>
<span><</span><span>input </span><span>type</span><span>="text"</span><span>><</span><span>input </span><span>type</span><span>="button"</span><span> value</span><span>="校验"</span><span>></span>
<span><</span><span>scritpt </span><span>type</span><span>="text/javascript"</span><span>></span><span>
$(function(){
    $("input:last").click(function(){
        $.get("in.php",{
            username:$("input:first").val()
        },function(data){
            alert(data);
        });
    });    
});
</span><span></</span><span>script</span><span>></span>

 

in.php页面代码如下：

<?<span>php
    </span><span>$string</span> = "用户名"<span>;
    </span><span>if</span>(<span>isset</span>(<span>$_GET</span>['username'<span>])){
        </span><span>if</span>(<span>urldecode</span>(<span>$_GET</span>['username']) == <span>$string</span><span>){
            </span><span>echo</span> "用户名被占用"<span>;
        } </span><span>else</span><span> {
            </span><span>echo</span> "用户名可用"<span>;
        }     
    }
</span>?>        

 

 

 

真题24：编写代码，使得在文本框中输入一个年份，判断其生肖，并在文本框旁边输出，要求写出HTML和JavaScript代码

参考答案：

前台页面设计的代码如下：

<span><</span><span>html</span><span>></span>
    <span><</span><span>head</span><span>></span>
        <span><</span><span>meta </span><span>http-equiv</span><span>="Content-type"</span><span> content</span><span>="text/html; charset=UTF-8"</span><span>></span>
        <span><</span><span>script </span><span>type</span><span>="text/javascript"</span><span> src</span><span>="jquery-1.4.2.js"</span><span>></</span><span>script</span><span>></span>
        <span><</span><span>title</span><span>></span>生肖的自动选择<span></</span><span>title</span><span>></span>
    <span></</span><span>head</span><span>></span>
    <span><</span><span>body</span><span>></span>
        <span><</span><span>input </span><span>type</span><span>="text"</span><span> value</span><span>="请输入年份格式为1990"</span><span> onclick</span><span>="this.select()"</span><span>></span>
        <span><</span><span>input </span><span>type</span><span>="submit"</span><span> value</span><span>="判断"</span><span>></span>
        <span><</span><span>span</span><span>></</span><span>span</span><span>></span>
        <span><</span><span>script</span><span>></span><span>
            $(</span><span>function</span><span>(){
                $(</span><span>"</span><span>input:last</span><span>"</span><span>).click(</span><span>function</span><span>(){
                    $.get(</span><span>"</span><span>in.php</span><span>"</span><span>,{
                        number:$(</span><span>"</span><span>input:first</span><span>"</span><span>).val()
                    },</span><span>function</span><span>(data){
                        $(</span><span>"</span><span>span</span><span>"</span><span>.text(data));
                    );
                });
            });
        </span><span></</span><span>script</span><span>></span>
    <span></</span><span>body</span><span>></span>
<span></</span><span>html</span><span>></span>

 

后台判断生肖的PHP脚本代码如下：

<?<span>php
    </span><span>if</span>(<span>isset</span>(<span>$_GET</span>['number'<span>])){
        </span><span>$array</span> = <span>array</span>("猪","鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗"<span>);
        </span><span>foreach</span>(<span>$array</span> <span>as</span> <span>$key</span> => <span>$value</span><span>){
            </span><span>if</span>(<span>ceil</span>(<span>$_GET</span>['number']%12) == <span>$key</span><span>){
                </span><span>echo</span> <span>$value</span><span>;
            }
        }
    }
</span>?>

 

六、jQuery框架

真题25：什么是jQuery？

参考答案：

jQuery是一个优秀的JavaScript库，是一个由John Resig创建于2006年1月的开源项目。其宗旨是——WRITE LESS，DO MORE（写更少的代码，做更多的事情）。

 

真题26：列举出jQuery中的常用选择题

参考答案：

基本选择题、层次选择题和过滤选择题

 

真题27：如何实现查找DOM树上的元素？请举例写出代码

参考答案：

<span>var</span> input = $("input:first"); <span>//</span><span>获取input标签中的第一个节点</span>

 

 

真题28：如何在DOM树上创建并插入元素？请举例写出代码

参考答案：

<span><</span><span>script </span><span>type</span><span>="text/javascript"</span><span> src</span><span>="jquery-1.4.2.js"</span><span>></</span><span>script</span><span>></span>
<span><</span><span>div</span><span>></span>水果<span></</span><span>div</span><span>></span>
<span><</span><span>script</span><span>></span>
<span>var</span><span> title </span><span>=</span><span> $(</span><span>"</span><span><span>苹果</span></span><span>"</span><span>);
$(</span><span>"</span><span>div</span><span>"</span><span>).append(title);
$(</span><span>"</span><span>div</span><span>"</span><span>).before(title);
$(</span><span>"</span><span>div</span><span>"</span><span>).prepend(title);
$(</span><span>"</span><span>div</span><span>"</span><span>).after(title);
</span><span></</span><span>script</span><span>></span>

 

真题29：如何在DOM树上替换指定元素？请举例写出代码

参考答案：

<span><</span><span>script </span><span>type</span><span>="text/javascript"</span><span> src</span><span>="jquery-1.4.2.js"</span><span>></</span><span>script</span><span>></span>
<span><</span><span>div</span><span>></span>水果<span></</span><span>div</span><span>></span>
<span><</span><span>script</span><span>></span>
<span>var</span><span> title </span><span>=</span><span> $(</span><span>"</span><span><span>苹果</span></span><span>"</span><span>);
$(</span><span>"</span><span>div</span><span>"</span><span>).replaceWith(title);
</span><span></</span><span>script</span><span>></span>

 

真题30：给您一张图片，让这张图片以淡出的效果消失在页面中，请写出代码

参考答案：

<span><</span><span>script </span><span>type</span><span>="text/javascript"</span><span> src</span><span>="jquery-1.4.2.js"</span><span>></</span><span>script</span><span>></span>
<span><</span><span>img </span><span>src</span><span>="color.jpg"</span><span>></span>
<span><</span><span>script</span><span>></span><span>
$(</span><span>"</span><span>img</span><span>"</span><span>).click(</span><span>function</span><span>(){
    $(</span><span>this</span><span>).fadeOut(</span><span>"</span><span>slow</span><span>"</span><span>)l
});
</span><span></</span><span>script</span><span>></span>

 

 

真题31：制作一个按钮，当这个按钮被单击时以卷帘效果消失，请写出代码

参考答案：

<span><</span><span>script </span><span>type</span><span>="text/javascript"</span><span> src</span><span>="jquery-1.4.2.js"</span><span>></</span><span>script</span><span>></span>
<span><</span><span>input </span><span>type</span><span>="button"</span><span> value</span><span>="按钮"</span><span> style</span><span>="width:200px;height:200px;"</span><span>></span>
<span><</span><span>script</span><span>></span><span>
$(</span><span>"</span><span>input</span><span>"</span><span>).click(</span><span>function</span><span>(){
    $(</span><span>this</span><span>).slideUp(</span><span>"</span><span>slow</span><span>"</span><span>)l
});
</span><span></</span><span>script</span><span>></span>

 

 

真题32：制作一个图片轮换效果并写出代码

参考答案：

<span><</span><span>script </span><span>type</span><span>="text/javascript"</span><span> src</span><span>="jquery-1.4.2.js"</span><span>></</span><span>script</span><span>></span>
<span><</span><span>style</span><span>></span><span>
ul(list-style:none;width:360px;height:200px;position:absolute;)
li</span><span>{</span><span>position</span><span>:</span><span>absolute</span><span>;</span><span>}</span>
<span></</span><span>style</span><span>></span>
<span><</span><span>div </span><span>class</span><span>="change"</span><span>></span>
    <span><</span><span>ul</span><span>></span>
        <span><</span><span>li</span><span>><</span><span>img </span><span>src</span><span>="1.jpg"</span><span> width</span><span>="350px"</span><span> height</span><span>="200px"</span><span>></</span><span>li</span><span>></span>
        <span><</span><span>li</span><span>><</span><span>img </span><span>src</span><span>="2.jpg"</span><span> width</span><span>="350px"</span><span> height</span><span>="200px"</span><span>></</span><span>li</span><span>></span>
        <span><</span><span>li</span><span>><</span><span>img </span><span>src</span><span>="3.jpg"</span><span> width</span><span>="350px"</span><span> height</span><span>="200px"</span><span>></</span><span>li</span><span>></span>
        <span><</span><span>li</span><span>><</span><span>img </span><span>src</span><span>="4.jpg"</span><span> width</span><span>="350px"</span><span> height</span><span>="200px"</span><span>></</span><span>li</span><span>></span>
    <span></</span><span>ul</span><span>></span>
<span></</span><span>div</span><span>></span>
<span><</span><span>script</span><span>></span><span>
    $(</span><span>function</span><span>(){
        $(</span><span>"</span><span>.change ul li:not(:first)</span><span>"</span><span>).hide();
        setInterval(</span><span>function</span><span>(){
            </span><span>if</span><span>($(</span><span>"</span><span>.change ul li:first</span><span>"</span><span>).is(</span><span>"</span><span>:visible</span><span>"</span><span>)){
                $(</span><span>"</span><span>.change ul li:first</span><span>"</span><span>).fadeIn(</span><span>"</span><span>slow</span><span>"</span><span>);
                $(</span><span>"</span><span>.change ul li:last</span><span>"</span><span>).hide();
            } </span><span>else</span><span> {
                $(</span><span>"</span><span>.change ul li:visible</span><span>"</span><span>).next().fadeIn(</span><span>"</span><span>slow</span><span>"</span><span>);    
            }
        },</span><span>1000</span><span>);
    });
</span><span></</span><span>script</span><span>></span>

 

 

真题33：如何使用jQuery获取当前DOM元素（obj）的左上角在整个文档中的位置？

参考答案：

<span><</span><span>script </span><span>type</span><span>="text/javascript"</span><span> src</span><span>="jquery-1.4.2.js"</span><span>></</span><span>script</span><span>></span>
<span><</span><span>ul</span><span>></span>
    <span><</span><span>li</span><span>></span>aaa<span></</span><span>li</span><span>></span>
    <span><</span><span>li</span><span>></span>bbb<span></</span><span>li</span><span>></span>
    <span><</span><span>li</span><span>></span>ccc<span></</span><span>li</span><span>></span>
    <span><</span><span>li</span><span>></span>ddd<span></</span><span>li</span><span>></span>
<span></</span><span>ul</span><span>></span>
<span><</span><span>script</span><span>></span><span>
    $(</span><span>function</span><span>(){
        </span><span>var</span><span> height</span><span>=</span><span>$(</span><span>"</span><span>ul</span><span>"</span><span>.css(</span><span>"</span><span>margin-top</span><span>"</span><span>));
        </span><span>var</span><span> width</span><span>=</span><span>$(</span><span>"</span><span>ul</span><span>"</span><span>).css(</span><span>"</span><span>margin-left</span><span>"</span><span>);
        alert(height</span><span>+</span><span>"</span><span>*</span><span>"</span><span>+</span><span>width);
    });
</span><span></</span><span>script</span><span>></span>