おそらく、実用的な Web フロントエンドの筆記試験の問題が必要になるでしょう。

以前投稿したブログには回答がありませんでしたが、少し時間ができたので、仕事を探している方のお役に立てれば幸いです。 テクノロジーは自分だけのものです。本当に理解しているなら、お互いに励まし合いましょう。

Webフロントエンドの筆記試験問題

Html+css

1.WEB規格とw3cの理解と理解。

タグを閉じ、小文字のタグを入れ子にしない: 検索ロボットの検索確率を向上させる。

外部の css と js を使用して構造的な動作を分離する: ファイルのダウンロードとページの読み込みを高速化し、コンテンツをより幅広いデバイスからアクセスできる;

コードとコンポーネントが少ない: 保守が簡単、改訂が簡単、ページのコンテンツを変更する必要がなく、コンテンツをコピーせずに印刷版を提供し、Web サイトの使いやすさを向上させます。

2. Xhtmlとhtmlの違いは何ですか。

Html (Hypertext Markup Language) は、Standard Universal Markup Language に基づくアプリケーションであり、仕様および標準でもあります。

Xhtml (Extensible Hypertext Markup Language) は、その表現が html に似ているマークアップ言語ですが、主な違いは、構文がより厳密であることです。

1、すべての要素が正しくネストされている必要があります。 、

2、すべてのタグを閉じる必要があります、

3、タグ名、属性名は小文字にする必要があります、

4、すべての属性は「」で囲む必要があります、

5、ラベルの一部ではないすべての >e88f5ad8018c8faee5fccb34b315ee40class>Tagname

重要

高優先度

5.

フロントエンドなんと3層ページは何で構成されていますか?またそれらは何ですか?機能は何ですか?

構造層: html

はhtmlまたはxhtmlによって作成され、タグを使用してWebページのコンテンツの意味を記述します。

プレゼンテーション層: css

は、関連するコンテンツを表示する方法を解決するためにcssによって作成されます。

動作層: javascript

はjavascriptによって作成され、イベントにどのように反応するかを応答します。

6.

cssの基本的な文構造は何ですか?

セレクター、属性、属性値

7.

どのブラウザの互換性をテストしましたか?これらのブラウザのコアは何ですか?

Ie

(ieカーネル)、Firefox (Gecko)、Google (ウェブキット)、opera (プレスト) )

8 .

タグの title 属性と alt 属性の違いは何ですか?

Alt

は、何らかの理由で画像をロードできないときにページに表示されるプロンプトメッセージであり、マウスを押したときに画像が最初にロードされた場所に直接出力されます。画像の上にマウスを移動すると、表示される小さなプロンプトはマウスを離すと消えます。 9.displayの使用によって引き起こされるIE6 BUG

1.

Double marginBUG floatに対するいくつかの解決策を書き留めます。

2.3floatの使用によって引き起こされるピクセルの問題dislpay:inline -3pxの使用によって引き起こされる3.

ハイパーリンク

ホバークリック後は無効です正しい書き込み順序を使用してくださいリンクにアクセスしましたホバーアクティブ 4.Ie z-index

問題は

position:relative5.Pngを親に追加することです

透過的に

jsを使用しますコード変更6.Min-height

最小の高さ！

重要な解決策7.選択

iframeネストされた8.ie6の下に

1pxを定義する方法がない理由 左右の幅コンテナ (IE6はデフォルトの行の高さによって引き起こされます、over: hidden、zoom: 0.08 line-height: 1pxを使用してください)

10.

cssリセットの役割と目的を説明してください。 Cssリセットブラウザのデフォルトの

cssスタイルをリセットします。cssリセットリセットを使用することで、それらを統一して開発を容易にすることができます。

11.

ウェブサイトのファイルとリソースをどのように最適化しますか?予想される解決策には、

:1、

httpリクエストの数を最小限に抑える(ファイルマージ)2、

CDN(コンテンツ配信ネットワーク)を使用する3、追加が含まれます。

Expire/Cache-Controlヘッダー4、ページ上部の

Gzip圧縮5、

cssを有効にする6 、

スクリプト

ページの下部7に配置し、

css

内でExpressions8を使用しないようにし、

js

とcssをファイルの外に配置します 9、

dns

クエリを削減します10、

javascript

とcss11を圧縮し、リダイレクトを回避します

12 、重複したスクリプトを削除します

13、設定しますエンティティタグ

14、使用

ajax

キャッシュ12.

セマンティック

html

とは何ですか? コンテンツの構造 (コンテンツ セマンティクス) に基づいて適切なタグ (コード セマンティクス) を選択します。これにより、開発者はより洗練されたコードの読み書きが容易になり、同時にブラウザ クローラーやマシンがより適切に解析できるようになります。

13.フロートをクリアする方法は何通りありますか?それぞれの長所と短所は何ですか?

1、親定義高さ (利点: コードが少なく、シンプルで習得が簡単; 欠点: 固定高さの要素にのみ適しており、高度な適応性はありません)

2、次の場所で空のラベルを使用します。フロートをクリアする最後：Clear: 両方 (利点: 理論的には、すべてのタグのフローティングをクリアでき、コードが単純でブラウザのサポートが少なくなります。欠点: 意味のないタグが追加されました)

3、親定義 と zoom の後の疑似クラス (利点: 優れたブラウザーのサポート; 欠点: コードが多く、主流のブラウザーをサポートするには 2 行のコードのみを組み合わせることができます)

4、親定義オーバーフロー: 非表示 (利点: コードが少なく、シンプルで、優れたブラウザーのサポート。欠点: widthまたはzoomを定義する必要があり、高さを定義できず、組み合わせて使用​​することはできませんpositation）5

、親の定義

オーバーフロー：auto（利点：コード、シンプルさ、優れたブラウザのサポート;短所：widthを定義する必要があります。 高さを同時に定義することはできません、内部要素の高さが親を超える場合、スクロールバーが表示されます) また、親は一緒にフロートし、親はdisplay:tableを定義します。 clearの最後に

br

を追加します: bothetc 14.ブラウザの標準モードと奇妙なモードの違いは何ですか? いわゆる標準モードは、ブラウザが W3C

標準に従ってコードを解析して実行することを意味します。奇妙なモードは、ブラウザごとに解析と実行が異なるため、ブラウザ独自の方法を使用してコードを解析して実行します。やり方が違うので、これを「奇妙なモード」と呼んでいます。ブラウザーが解析時に標準モードを使用するか奇妙なモードを使用するかは、Web ページの

DTD

宣言に直接関係します。

DTD

宣言は、標準ドキュメント (標準モード解析) ドキュメントのタイプを定義します。 DTD宣言を無視すると、ブラウザは対応するメソッドを使用してWebページを奇妙なモード(quirksモード)に入ります。 標準モードでは、IE6はわかりません!重要ステートメント、IE7

、

IE8

、Firefox、 Chrome ブラウザを待っています認識する; 奇妙なモードでは、IE6/7/8さえ認識しません!重要なステートメント

15. CSS スプライト と、それをページや Web サイトでどのように使用するかを説明します

は、Web 画像を処理する方法です。これにより、ページに含まれる散在するすべての画像を 1 つの大きな画像に含めることができるため、ページにアクセスしたときに、以前のように読み込まれた画像が 1 つずつ表示されることはなくなります。

ページアイコンは、さまざまな状況に適しています。

16.CSSハック、条件付き参照、またはその他のについて話し合う?

どのブラウザでもそれを知っていますが、ここではfirefoxについて説明します。 9

すべて

つまりブラウザが認識されました。

違い: グレースフル デグラデーションは複雑な現状から始まり、ユーザー エクスペリエンスの提供を減らそうとしますが、プログレッシブ エンハンスメントは非常に基本的な機能バージョンから始まり、将来の環境のニーズに適応するために継続的に拡張します。劣化（機能の衰退）は過去を振り返ることを意味し、漸進的な強化は根を安全地帯に保ちながら前を向くことを意味します。

19.CSS大文字?

text-transform 値:
大文字英語のピンインの最初の文字は大文字です
英語のピンイン文字はすべて大文字です大文字 小文字
英語のピンイン文字 すべて小文字

20.

CSS セレクターとは何ですか?

• 派生セレクター (HTML タグで宣言)

• ID セレクター (

で宣言) DOM ID)

• クラスセレクター（スタイルクラス名で宣言）

• 属性セレクター（
DOM属性で宣言、CSS2に属する、IE6ではサポートされていない、一般的に使用されない、知らない場合は忘れてください）

最初の

3つの基本セレクターに加えて、

• 子孫セレクター(
p .a{ }などのスペース区切りを使用)を含むいくつかの拡張セレクターもあります。セレクター (
• p,p,#a{ } などのカンマ区切りを使用)

21.

ハイパーリンクにアクセスした後に

hover スタイルが表示されない問題は何ですか?の解き方？ 答え: クリックされたハイパーリンク スタイルには、

ホバーとアクティブがなくなりました。解決策は、CSS 属性の順序を変更することです: L-V-H-A (リンク、訪問済み、ホバー、アクティブ)

22.

ブラウザも同様です。デフォルトの組み込み

inline-block 要素があります (固有の寸法があり、高さと幅を設定できますが、自動的に折り返されません)。 答え:

,

,

23.

px

と

emPX の違いは、実際にはピクセルです。フォント サイズを設定するには PX を使用します。 、比較 安定していて正確。しかし、この方法には問題があり、ユーザーがブラウザで作成した Web ページを閲覧するときに、ブラウザのズームを変更すると、Web ページのレイアウトが崩れてしまいます。これは、Web サイトの使いやすさを懸念しているユーザーにとって大きな問題です。したがって、Web ページのフォントを定義するために「em」を使用することが提案されました。 EM:

EM は、ベースラインに基づいてフォント サイズを拡大縮小します。 EM は本質的に、特定の数値ではなく相対的な値です。この手法には、通常

である参照点が必要です。さらに、

em は親要素の属性を基準にして計算されます。px と em の間の変換を計算したい場合は、この Web サイトを使用すると便利です。データは px と em が相互に計算するだけです。ここをクリックしてください: px と em の変換

Rem:

EM は親要素を基準にしてフォント サイズを設定するため、要素を設定するときに、その親要素のサイズを知る必要がある場合があります。 Rem はルート要素に相対的です

ブラウザの互換性

IE6-IE8r を除き、他のブラウザは em 属性と rem 属性をサポートし、px はすべてのブラウザでサポートされます。

ブラウザの互換性を保つために、「px」と「rem」を一緒に使用し、「px」を使用して IE6 ～ 8 で効果を実現し、次に「Rem」を使用してブラウザ効果の効果を実現します。

24.透明度

html{

filter:alpha(opacity=50); /* つまり有効*/

-moz-opacity:0.5; /* Firefox は有効*/

不透明度: 0.5 ; /* ユニバーサル、他のブラウザでも有効*/

}

JavaScript

1. javascriptのtypeofはどのようなデータ型を返しますか?

オブジェクト、番号、関数、ブール、未定義2;

例

3

タイプのキャストと

2 暗黙的な型変換。 Force Number(), String(), Boolean(), Object();

暗黙的 + - == if while for alert

3.Split()

と

join()

の違い。 Join() 関数は、文字列のバッチを取得し、それらを区切り文字列で結合して文字列を返します。

Split()

この関数は文字列を受け取り、区切り文字で区切って、文字列のバッチを返します。

split

は、文字列を(特定の区切り文字に従って)複数の要素に分割し、配列に格納することです。そして、Join

は、配列内の文字列を長い文字列に接続することであり、これは、splitの逆の操作と大まかに考えることができます。 4. イベント バインディングと通常のイベントの違いは何ですか?

イベントを追加する通常の方法では、下部のイベントが上部のイベントを上書きします。ただし、イベント バインディング (addEventListener) によるイベントの追加では、複数のイベントを追加できます。

5555.ArrayMethodpop（）push（）unshift（）shift（）shift（）

push（）

tailaddition

pop（）ヘッダー追加shift()ヘッダー削除

6. Ieと

dom

のイベントフローの違いは何ですか？ 1.実行順序は異なります2.プラメーターは異なります。33。

7 .

Ie

と標準の間で互換性のある記述方法は何ですか? ...

getとpostの違いは何ですか?

1、

をリクエストするときにGet

を使用すると、Postを使用しているときに

URL

、

に

パラメータが表示されますは仮想内部に置くことです通信事業者、

は表示されません。

2。getメソッドの場合、サーバー側はRequest.QueryStringを使用して変数の値を取得します。postメソッドの場合、サーバー側はRequest.Formを使用します。 送信されたデータを取得します。どちらのメソッドのパラメータも Request を使用して取得できます。

3とgetによって転送されるデータの量は小さく、2KBを超えることはできません。 post は大量のデータを転送し、通常はデフォルトでは制限がありません。しかし、理論的には、.

4、getは非常に低いセキュリティであり、postは高いセキュリティです。

5、getリクエストはキャッシュの問題に注意する必要があります、postリクエストはこの問題について心配する必要はありません。

6、postリクエストを送信するとき、Content-Typeの値をapplication/x-form-www-urlencoded

7に設定する必要があります、 だから getリクエストのパラメータはすべてurl、にあるため、send関数によって送信されるパラメータはnull、、postです。 リクエストはsendを使用する メソッドを使用する場合、にはパラメータ

を与える必要があります9.

call

とapplyの違いは何ですか? call

method

:

構文:

call(thisObj, Object) 定義: オブジェクトのメソッドを呼び出して、現在のオブジェクトを別のオブジェクトに置き換えます。

説明:

call

メソッドを使用すると、別のオブジェクトの代わりにメソッドを呼び出すことができます。

call メソッドは、関数のオブジェクト コンテキストを初期コンテキストから thisObj で指定された新しいオブジェクトに変更します。

thisObj パラメーターが指定されていない場合は、 グローバル オブジェクトが thisObj として使用されます。 apply

メソッド:

構文:

apply(thisObj, [argArray])

定義: オブジェクトのメソッドを適用して、現在のオブジェクトを別のオブジェクトに置き換えます。

説明:

argArray が有効な配列でない場合、または arguments オブジェクトではない場合、TypeError が発生します。

argArray も thisObj も指定されていない場合、グローバル オブジェクトが thisObj として使用され、パラメーターを渡すことはできません。

10. Ajaxリクエスト中にjsonデータを解析する方法?

eval parseを使用するセキュリティ上の考慮事項を考慮すると、parse

を使用する方がより確実です

11.ローカルオブジェクト、組み込みオブジェクト、ホストオブジェクトとは何ですかJavaScript?

ローカルオブジェクト: ホスト環境から独立したECMAScript実装によって提供されるオブジェクト。それらには、Object、Function、Array、String、Boolean、Number、 日付、正規表現 、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError URIError はインスタンス化できます。

組み込みオブジェクト Global および Math : ホスト環境とは独立して ECMASscript 実装によって提供されるすべてのオブジェクトはインスタンス化できません。

ホストオブジェクト: すべての非ローカルオブジェクトはホストオブジェクト、つまりECMAscriptによって実装されたホスト環境によって提供されるオブジェクトです。すべての BOM および DOM オブジェクトは、ホスト オブジェクト、ドキュメント、ウィンドウ などです。

12. ドキュメントロードとドキュメント準備完了の違いは何ですか?

ページが読み込まれるときのイベントは 2 つあります。1 つはドキュメント構造が読み込まれたことを示す ready であり、もう 1 つは onload です。 、ページに画像やその他のファイルが含まれていることを示します。含まれるすべての要素が読み込まれます。

13.配列から重複を削除するメソッドを作成します。

1.結果を保存する新しい配列を作成します

2.空のオブジェクトを作成します

3. for がループするたびに、要素が抽出され、オブジェクトと比較されます。要素が繰り返されない場合は、その要素の内容が結果の配列に格納されます。オブジェクトの属性であり、値 1 が割り当てられ、ステップ 2 で作成されたオブジェクトに保存されます。

var s = [0, 2, 3, 4, 4, 0, 2, 'tt', 0, 0]; //测试数组
for (var i = 0, o = {}, tmp = [], count = 0, l = s.length; i < l; i++) {
    if (o[s[i]]) {
        count++;//重复+1
    } else {
        o[s[i]] = 1;//不重复设置属性
        tmp.push(s[i])//加入新数组
}}
alert(count);alert(tmp)

14.イベント代表団。

バブリングの原理を使用して親にイベントを追加し、実行エフェクトをトリガーします。イベント委任手法を使用すると、特定の各ノードにイベント リスナーを追加する必要がなく、代わりにイベント リスナーがその親要素に追加されます。イベント リスナーは、子要素から発生したイベントを分析し、そのイベントがどの子要素からのものかを見つけます。

15.スコープチェーン。

環境内でコードが実行されると、変数オブジェクトのスコープ チェーン (スコープ チェーン) が作成されます。スコープ チェーンの目的は、実行環境がアクセスできるすべての変数と関数への順序付けされたアクセスを保証することです。スコープ チェーンのフロント エンドは常に、現在実行中のコードが配置されている環境の変数オブジェクトです。この環境が関数の場合、そのアクティブ オブジェクトは変数オブジェクトとして使用されます。

各関数には独自の実行環境があります。実行が関数に流入すると、関数環境は環境スタックにプッシュされ、関数が実行された後、スタックはその環境をポップアップし、制御を前の実行に戻します。環境では、このスタックはスコープ チェーンでした。

関数が実行されると、関数(call object)の実行環境が作成され、とそのオブジェクトがリンクリストの先頭に配置され、次に親のcallオブジェクトが配置されます。その後に関数がリンクされ、最後にグローバル オブジェクトがリンクされます。

16.閉店。

クロージャは、他の関数の内部変数を読み取ることができる関数です。 Javascript言語では、関数内のサブ関数のみがローカル変数を読み取ることができるため、クロージャは単純に「関数内で定義された関数」として理解できます。したがって、本質的に、クロージャは関数の内部と関数の外部を接続する橋です。クロージャーはさまざまな場所で使用できます。その最大の用途は 2 つあり、1 つは関数内の変数を読み取ること、もう 1 つはこれらの変数の値をメモリに保持することです。

1) クロージャは関数内の変数をメモリに格納し、大量のメモリを消費するため、クロージャを悪用することはできません。そうしないと、Web ページでパフォーマンスの問題が発生し、 が発生する可能性があります。 IEメモリリーク。解決策は、関数を終了する前に、未使用のローカル変数をすべて削除することです。

2) クロージャは、親関数内の変数の値を親関数の外で変更します。したがって、親関数をオブジェクト (オブジェクト) として使用し、クロージャーをそのパブリック メソッド (パブリック メソッド) として使用し、内部変数をそのプライベート プロパティ (プライベート値) として使用するとします。 , 親関数の内部変数の値をむやみに変更しないように注意する必要があります。

17.イベントのバブリングとデフォルトイベントを防ぐ方法。

//如果提供了事件对象，则这是一个非IE浏览器 
if  ( e  &&  e.stopPropagation )  { 
　　e.stopPropagation();   //因此它支持W3C的stopPropagation()方法
} else {
　　window.event.cancelBubble  =  true;  //否则，我们需要使用IE的方式来取消事件冒泡  
　　return  false; 
}
//如果提供了事件对象，则这是一个非IE浏览器 
if  ( e  &&  e.preventDefault ) {
　　e.preventDefault();  //阻止默认浏览器动作(W3C)  
}  else  { 
　　window.event.returnValue  =  false;  //IE中阻止函数器默认动作的方式
　　return  false;
}

18.javascript の同一生成元ポリシー。

スクリプトは、同じソースからのみウィンドウとドキュメントのプロパティを読み取ることができます。同じソースとは、ホスト名、プロトコル、ポート番号の組み合わせを指します

19.JSソートアルゴリズム。

りー

上記は、必要となる可能性のあるWebフロントエンド筆記試験の問題の内容です。 、その他 関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) にご注意ください。