简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Backend Development  >  PHP development engineer interview questions - Web page design (with reference answers)_PHP tutorial

PHP development engineer interview questions - Web page design (with reference answers)_PHP tutorial

WBOY
WBOYOriginal
2016-07-13 10:28:441009browse

1. Form

Real Question 1: Briefly describe the maximum capacities of POST and GET transmissions respectively?

Reference answer:

The GET method transmits data, which is controlled within 1MB (because the length of the URL is limited to 1MB characters); the POST method transmits data without size limit.

Real question 2: How to control the size of uploaded files through a form?

Reference answer:

In the form, the size of the uploaded file is controlled through the hidden field MAX_FILE_SIZE, which must be placed before the file field to work.

Real Question 3: Check the code to determine whether the data passed in the page can be obtained? 

<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>

Reference answer:

The data submitted in the form cannot be obtained through the $_POST method. You can use the $_GET method to obtain the data.

Because when the form form does not define the method attribute and action attribute, the get transmission method is used by default to transfer data, and the current page jumps by default.

Real Question 4: How to set the read-only attribute in the form?

Reference answer:

Use readonly, disabled.

Real Question 5: Under what circumstances can $name and $_POST['name'] be used interchangeably?

Reference answer:

When register_globals = On in the php.ini file, both $name and $_POST['name'] can get the value of the form element name in the form (submitted in post mode).

Although it can be used universally, it is not recommended to use this method because it will bring security risks to the program.

2. CSS style

Real Question 6: What is the meaning of CSS?

Reference answer:

CSS is a set of extended style standards developed by the W3C Association to make up for the shortcomings of HTML in setting display attributes. Its full name is "Cascading Style Sheet", which can be translated as "Cascading Style Sheet" or "Cascading Style" surface".

Its biggest use is to separate content and presentation, change the overall presentation of the web page, make it easier to maintain the appearance of the site, make the HTML document code more concise, and shorten the browser's loading time.

Real Question 7: What methods would you use to insert CSS styles into HTML pages? (Name three types)

Reference answer:

The first method: define the style attribute inside the tag, and then define the style under this tag, as shown below: 

<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>

The second method: define a pair of c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 tags under the 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 tag in the HTML page, and use the tag name, class selector, and id inside the tag Selector setting properties.

The third method: Create a .css style file, define the style using id selectors or class selectors inside the file, and then introduce the file using the 2cdf5bf648cf2f33323966d7f58a7f3f tag in the displayed HTML main page, as shown below: 

<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>

Real Question 8: What are the common attributes of CSS style revision?

Reference answer:

1. Border: Define the properties of the border to set the width, color, and style of the border.

2. background-color, set the background color.

3. background-image, set the background image.

4. font-size, set the font size.

5. font-family, set the font.

6. text-align, sets or retrieves the alignment of text in the object.

Real Question 9: How to solve the double margin problem of code under 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>

Reference answer:

Add attribute display:inline;.

Real Question 10: How to solve the problem that the hover style does not appear after the hyperlink is clicked?

Reference answer:

This problem can be solved by setting the attributes of the hyperlink in a fixed order. The code is as follows: 

<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>;}

Real Question 11: How to solve the problem that the text cannot open the height of the container in Firefox?

Reference answer:

In Firefox browser, two CSS properties, min-width and min-height, need to be added on the original basis, so that similar problems will not occur. You can also add a div with a clear:both attribute that clears alignment to automatically calculate the height of Firefox.

Real Question 12: How to define a container with a height of about 1px?

Reference answer:

Control the line height of the text under the div tag, and set the content beyond the line height not to be displayed. The code is as follows: 

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

3. DIV tag

Real Question 13: Briefly describe the difference between the model tags 45a2772a6b6107b401db3c9b82c049c2 and dc6dce4a544fdca2df29d5ac0ea9906b tags?

Reference answer:

dc6dce4a544fdca2df29d5ac0ea9906b and 45a2772a6b6107b401db3c9b82c049c2 tags also work in web page layout. The difference between them is that span tags are inline and are generally used to inline the styles of small modules into HTML documents. The div element It is a block-level element in itself and is mostly used to combine large blocks of code.

真题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文件：f20c5916e1764de65716aacf5671b3e02cacc6d41bbb37262a98f745aa00fbf0

 

真题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>

 

www.bkjia.comtruehttp: //www.bkjia.com/PHPjc/781160.htmlTechArticle1. Form question 1: Briefly describe the maximum capacity of POST and GET transmission respectively? Reference answer: The GET method transmits data, controlled within 1MB (because the length of the URL is limited to 1MB characters...
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：php Laravel windows installation_PHP tutorialNext article：php Laravel windows installation_PHP tutorial

Related articles

See more