PHP開発エンジニア面接の質問 - Webページデザイン（参考回答付き）

1.フォーム

本当の質問 1: POST および GET 送信の最大容量はどれくらいかを簡単に説明してください。

参考回答:

GET メソッドはデータを送信し、1MB 以内に制御されます (URL の長さが 1MB 文字に制限されているため)。POST メソッドはサイズ制限なしでデータを送信します。

本当の質問 2: フォームを通じてアップロードされたファイルのサイズを制御するにはどうすればよいですか?

参考回答:

フォームでは、隠しフィールド MAX_FILE_SIZE を使用して、アップロードするファイルのサイズを制御します。機能するには、ファイルフィールドの前に配置する必要があります。

実際の質問 3: コードをチェックして、ページに渡されたデータを取得できるかどうかを判断しますか?

リーリー

参考回答:

フォームで送信されたデータが $_POST メソッドで取得できない場合は、$_GET メソッドを使用してデータを取得できます。

フォームフォームにmethod属性とaction属性が定義されていない場合、デフォルトでget送信メソッドを使用してデータを転送し、デフォルトで現在のページにジャンプするためです。

本当の質問 4: フォームに読み取り専用属性を設定するにはどうすればよいですか?

参考回答:

読み取り専用を使用し、無効にします。

実際の質問 5: $name と $_POST['name'] はどのような状況で同じ意味で使用できますか?

参考回答:

php.ini ファイルで register_globals = On の場合、$name と $_POST['name'] の両方がフォーム form (post モードで送信) のフォーム要素名の値を取得できます。

汎用的に使用できますが、プログラムにセキュリティリスクをもたらすため、この方法の使用はお勧めできません。

2.CSSスタイル

本当の質問 6: CSS の意味は何ですか?

参考回答:

CSS は、表示属性の設定における HTML の欠点を補うために W3C Association によって開発された一連の拡張スタイル標準であり、正式名は「Cascading Style Sheet」で、「カスケードスタイルシート」または「カスケード」と訳されます。スタイルシート」。

その最大の用途は、コンテンツとプレゼンテーションを分離し、Web ページ全体のプレゼンテーションを変更し、サイトの外観を維持しやすくし、HTML ドキュメントコードをより簡潔にし、ブラウザーの読み込み時間を短縮することです。

実際の質問 7: CSS スタイルを HTML ページに挿入するにはどのような方法を使用しますか? (3種類挙げてください)

参考回答:

最初の方法: 以下に示すように、タグ内で style 属性を定義し、次にこのタグの下でスタイルを定義します。リーリー

2 番目の方法: HTML ページのタグの下に 2 つのタグを定義し、タグ内でタグ名、クラスセレクター、および ID セレクターを使用します。プロパティを設定します。

3 番目の方法: .css スタイルファイルを作成し、ファイル内の ID セレクターまたはクラスセレクターを使用してスタイルを定義し、次に示すように、表示された HTML メインページにタグを使用してファイルを導入します。リーリー

実際の質問 8:

CSS スタイルリビジョンの共通属性は何ですか?

参考回答:

1. 境界線: 境界線のプロパティを定義して、境界線の幅、色、スタイルを設定します。

2.背景色、背景色を設定します。

3. 背景画像、背景画像を設定します。

4. フォントサイズ、フォントサイズを設定します。

5. フォントファミリー、フォントを設定します。

6. text-align、オブジェクト内のテキストの配置を設定または取得します。

実際の質問 9:

IE6 でのコードのダブルマージン問題を解決するにはどうすればよいですか? リーリー

参考回答:

属性display:inline;を追加します。

本当の質問 10:

ハイパーリンクをクリックした後にホバースタイルが表示されない問題を解決するにはどうすればよいですか?

参考回答:

この問題は、固定の順序に従ってハイパーリンクのプロパティを設定することで解決できます。コードは次のとおりです。リーリー

本当の質問 11:

Firefox ブラウザーでテキストがコンテナーの高さを開くことができない問題を解決するにはどうすればよいですか?

参考回答:

Firefox では、同様の問題が発生しないように、元のベースで 2 つの CSS プロパティ (min-width と min-height) を追加する必要があります。また、Firefox の高さを自動的に計算するための配置をクリアする、clear:both 属性を持つ div を追加することもできます。

本当の質問 12:

高さが約 1px のコンテナを定義するにはどうすればよいですか?

参考回答:

divタグ以下のテキストの行の高さを制御し、行の高さを超える内容は表示されないように設定します。コードは次のとおりです。リーリー

3. DIVタグ

本当の質問 13:

モデルタグと

の違いを簡単に説明してください。

参考回答:

タグとタグは、通常、小さなモジュールのスタイルを HTML ドキュメントにインライン化するために使用されます。 -level 要素は主に、コードの大きなブロックを結合するために使用されます。

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

ログイン後にコピー

）

PHP開発エンジニア面接の質問 - Webページデザイン（参考回答付き）_PHPチュートリアル