タグを閉じ、小文字のタグを入れ子にしない: 検索ロボットの検索確率を向上させる。
外部の css と js を使用して構造的な動作を分離する: ファイルのダウンロードとページの読み込みを高速化し、コンテンツをより幅広いデバイスからアクセスできる;
コードとコンポーネントが少ない: 保守が簡単、改訂が簡単、ページのコンテンツを変更する必要がなく、コンテンツをコピーせずに印刷版を提供し、Web サイトの使いやすさを向上させます。
Html (Hypertext Markup Language) は、Standard Universal Markup Language に基づくアプリケーションであり、仕様および標準でもあります。
Xhtml (Extensible Hypertext Markup Language) は、その表現が html に似ているマークアップ言語ですが、主な違いは、構文がより厳密であることです。
1、すべての要素が正しくネストされている必要があります。 、
2、すべてのタグを閉じる必要があります、
3、タグ名、属性名は小文字にする必要があります、
4、すべての属性は「」で囲む必要があります、
5、ラベルの一部ではないすべての ><& はエンコードされた形式でなければなりません
6、すべての属性には値がなければなりません
7、があってはなりません--コメント
8、写真にはキャプションが必要です
4つのタイプ: インライン、埋め込み、外部リンク、インポート
違い:
1、linkはxhtmlタグに属し、@importは完全にCSS A 、linkによって提供される方法では、cssをロードするだけでなく、rss属性を定義したり、rel属性を定義したりすることもできます。ロードするだけ CSS。 2、ロード順序の違い:
linkによって引用されたcssは同時にロードされ、@importによって引用されたcssはロードされるまで待機します。すべてのページが再度ダウンロードされます。 3、互換性の違い、@importはcss2.1によって提案されており、ie5以降でのみサポートされており、linkには互換性の問題はありません。 4、スタイルの違いを制御するにはdomを使用します。javascriptを使用してスタイルを制御する場合、linkのみを使用できます。@importは使用できません。 ドム 制御可能。 、@importは、cssで他のスタイルシートを再度導入できます。 タグセレクター、クラスセレクター、idセレクター は指定どおりに継承されません。id>class>Tagname 高優先度 構造層: html はhtmlまたはxhtmlによって作成され、タグを使用してWebページのコンテンツの意味を記述します。 プレゼンテーション層: css は、関連するコンテンツを表示する方法を解決するためにcssによって作成されます。 動作層: javascript はjavascriptによって作成され、イベントにどのように反応するかを応答します。 (ieカーネル)、Firefox (Gecko)、Google (ウェブキット)、opera (プレスト) ) は、何らかの理由で画像をロードできないときにページに表示されるプロンプトメッセージであり、マウスを押したときに画像が最初にロードされた場所に直接出力されます。画像の上にマウスを移動すると、表示される小さなプロンプトはマウスを離すと消えます。 9.displayの使用によって引き起こされるIE6 BUG 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リセットリセットを使用することで、それらを統一して開発を容易にすることができます。 httpリクエストの数を最小限に抑える(ファイルマージ)2、 CDN(コンテンツ配信ネットワーク)を使用する3、追加が含まれます。 Expire/Cache-Controlヘッダー4、ページ上部の Gzip圧縮5、 cssを有効にする6 、 ページの下部7に配置し、 内でExpressions8を使用しないようにし、 とcssをファイルの外に配置します 9、 クエリを削減します10、 とcss11を圧縮し、リダイレクトを回避します 12 、重複したスクリプトを削除します 13、設定しますエンティティタグ 14、使用 キャッシュ12. セマンティック 1、親定義高さ (利点: コードが少なく、シンプルで習得が簡単; 欠点: 固定高さの要素にのみ適しており、高度な適応性はありません) 2、次の場所で空のラベルを使用します。フロートをクリアする最後：Clear: 両方 (利点: 理論的には、すべてのタグのフローティングをクリアでき、コードが単純でブラウザのサポートが少なくなります。欠点: 意味のないタグが追加されました) 3、親定義 と zoom の後の疑似クラス (利点: 優れたブラウザーのサポート; 欠点: コードが多く、主流のブラウザーをサポートするには 2 行のコードのみを組み合わせることができます) 4、親定義オーバーフロー: 非表示 (利点: コードが少なく、シンプルで、優れたブラウザーのサポート。欠点: widthまたはzoomを定義する必要があり、高さを定義できず、組み合わせて使用することはできませんpositation）5 オーバーフロー：auto（利点：コード、シンプルさ、優れたブラウザのサポート;短所：widthを定義する必要があります。 高さを同時に定義することはできません、内部要素の高さが親を超える場合、スクロールバーが表示されます) また、親は一緒にフロートし、親はdisplay:tableを定義します。 clearの最後に を追加します: bothetc 14.ブラウザの標準モードと奇妙なモードの違いは何ですか? いわゆる標準モードは、ブラウザが W3C 宣言は、標準ドキュメント (標準モード解析) ドキュメントのタイプを定義します。 DTD宣言を無視すると、ブラウザは対応するメソッドを使用してWebページを奇妙なモード(quirksモード)に入ります。 標準モードでは、IE6はわかりません!重要ステートメント、IE7 、Firefox、 Chrome ブラウザを待っています認識する; 奇妙なモードでは、IE6/7/8さえ認識しません!重要なステートメント は、Web 画像を処理する方法です。これにより、ページに含まれる散在するすべての画像を 1 つの大きな画像に含めることができるため、ページにアクセスしたときに、以前のように読み込まれた画像が 1 つずつ表示されることはなくなります。 ページアイコンは、さまざまな状況に適しています。 どのブラウザでもそれを知っていますが、ここではfirefoxについて説明します。 9 つまりブラウザが認識されました。 違い: グレースフル デグラデーションは複雑な現状から始まり、ユーザー エクスペリエンスの提供を減らそうとしますが、プログレッシブ エンハンスメントは非常に基本的な機能バージョンから始まり、将来の環境のニーズに適応するために継続的に拡張します。劣化（機能の衰退）は過去を振り返ることを意味し、漸進的な強化は根を安全地帯に保ちながら前を向くことを意味します。 text-transform 値: 派生セレクター (HTML タグで宣言) 属性セレクター（ 子孫セレクター(
, px である参照点が必要です。さらに、 EM は親要素を基準にしてフォント サイズを設定するため、要素を設定するときに、その親要素のサイズを知る必要がある場合があります。 Rem はルート要素に相対的です ブラウザの互換性 IE6-IE8r を除き、他のブラウザは em 属性と rem 属性をサポートし、px はすべてのブラウザでサポートされます。 ブラウザの互換性を保つために、「px」と「rem」を一緒に使用し、「px」を使用して IE6 ～ 8 で効果を実現し、次に「Rem」を使用してブラウザ効果の効果を実現します。 24.透明度 オブジェクト、番号、関数、ブール、未定義2; 3 暗黙的 + - == if while for alert 3.Split() この関数は文字列を受け取り、区切り文字で区切って、文字列のバッチを返します。 は、文字列を(特定の区切り文字に従って)複数の要素に分割し、配列に格納することです。そして、Join は、配列内の文字列を長い文字列に接続することであり、これは、splitの逆の操作と大まかに考えることができます。 4. イベント バインディングと通常のイベントの違いは何ですか? 5555.ArrayMethodpop（）push（）unshift（）shift（）shift（） 6. Ieと のイベントフローの違いは何ですか？ 1.実行順序は異なります2.プラメーターは異なります。33。 1、 をリクエストするときにGet を使用すると、Postを使用しているときに 、に は表示されません。 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を使用する メソッドを使用する場合、にはパラメータ : call(thisObj, Object) 定義: オブジェクトのメソッドを呼び出して、現在のオブジェクトを別のオブジェクトに置き換えます。 説明: call call メソッドは、関数のオブジェクト コンテキストを初期コンテキストから thisObj で指定された新しいオブジェクトに変更します。 thisObj パラメーターが指定されていない場合は、 グローバル オブジェクトが thisObj として使用されます。 apply 構文: apply(thisObj, [argArray]) argArray が有効な配列でない場合、または arguments オブジェクトではない場合、TypeError が発生します。 argArray も thisObj も指定されていない場合、グローバル オブジェクトが thisObj として使用され、パラメーターを渡すことはできません。 eval parseを使用するセキュリティ上の考慮事項を考慮すると、parse を使用する方がより確実です ローカルオブジェクト: ホスト環境から独立したECMAScript実装によって提供されるオブジェクト。それらには、Object、Function、Array、String、Boolean、Number、 日付、正規表現 、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError URIError はインスタンス化できます。 組み込みオブジェクト Global および Math : ホスト環境とは独立して ECMASscript 実装によって提供されるすべてのオブジェクトはインスタンス化できません。 ホストオブジェクト: すべての非ローカルオブジェクトはホストオブジェクト、つまりECMAscriptによって実装されたホスト環境によって提供されるオブジェクトです。すべての BOM および DOM オブジェクトは、ホスト オブジェクト、ドキュメント、ウィンドウ などです。 ページが読み込まれるときのイベントは 2 つあります。1 つはドキュメント構造が読み込まれたことを示す ready であり、もう 1 つは onload です。 、ページに画像やその他のファイルが含まれていることを示します。含まれるすべての要素が読み込まれます。 1.結果を保存する新しい配列を作成します 2.空のオブジェクトを作成します 3. for がループするたびに、要素が抽出され、オブジェクトと比較されます。要素が繰り返されない場合は、その要素の内容が結果の配列に格納されます。オブジェクトの属性であり、値 1 が割り当てられ、ステップ 2 で作成されたオブジェクトに保存されます。 14.イベント代表団。 バブリングの原理を使用して親にイベントを追加し、実行エフェクトをトリガーします。イベント委任手法を使用すると、特定の各ノードにイベント リスナーを追加する必要がなく、代わりにイベント リスナーがその親要素に追加されます。イベント リスナーは、子要素から発生したイベントを分析し、そのイベントがどの子要素からのものかを見つけます。 15.スコープチェーン。 環境内でコードが実行されると、変数オブジェクトのスコープ チェーン (スコープ チェーン) が作成されます。スコープ チェーンの目的は、実行環境がアクセスできるすべての変数と関数への順序付けされたアクセスを保証することです。スコープ チェーンのフロント エンドは常に、現在実行中のコードが配置されている環境の変数オブジェクトです。この環境が関数の場合、そのアクティブ オブジェクトは変数オブジェクトとして使用されます。 各関数には独自の実行環境があります。実行が関数に流入すると、関数環境は環境スタックにプッシュされ、関数が実行された後、スタックはその環境をポップアップし、制御を前の実行に戻します。環境では、このスタックはスコープ チェーンでした。 関数が実行されると、関数(call object)の実行環境が作成され、とそのオブジェクトがリンクリストの先頭に配置され、次に親のcallオブジェクトが配置されます。その後に関数がリンクされ、最後にグローバル オブジェクトがリンクされます。 16.閉店。 クロージャは、他の関数の内部変数を読み取ることができる関数です。 Javascript言語では、関数内のサブ関数のみがローカル変数を読み取ることができるため、クロージャは単純に「関数内で定義された関数」として理解できます。したがって、本質的に、クロージャは関数の内部と関数の外部を接続する橋です。クロージャーはさまざまな場所で使用できます。その最大の用途は 2 つあり、1 つは関数内の変数を読み取ること、もう 1 つはこれらの変数の値をメモリに保持することです。 1) クロージャは関数内の変数をメモリに格納し、大量のメモリを消費するため、クロージャを悪用することはできません。そうしないと、Web ページでパフォーマンスの問題が発生し、 が発生する可能性があります。 IEメモリリーク。解決策は、関数を終了する前に、未使用のローカル変数をすべて削除することです。 2) クロージャは、親関数内の変数の値を親関数の外で変更します。したがって、親関数をオブジェクト (オブジェクト) として使用し、クロージャーをそのパブリック メソッド (パブリック メソッド) として使用し、内部変数をそのプライベート プロパティ (プライベート値) として使用するとします。 , 親関数の内部変数の値をむやみに変更しないように注意する必要があります。 17.イベントのバブリングとデフォルトイベントを防ぐ方法。 18.javascript の同一生成元ポリシー。 スクリプトは、同じソースからのみウィンドウとドキュメントのプロパティを読み取ることができます。同じソースとは、ホスト名、プロトコル、ポート番号の組み合わせを指します 19.JSソートアルゴリズム。 上記は、必要となる可能性のあるWebフロントエンド筆記試験の問題の内容です。 、その他 関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) にご注意ください。 cssセレクターとは何ですか?どのようなプロパティを継承できますか?優先度はどのように計算されますか?インラインと重要ではどちらの優先度が高いでしょうか?
フロントエンドなんと3層ページは何で構成されていますか?またそれらは何ですか?機能は何ですか?
cssの基本的な文構造は何ですか?
セレクター、属性、属性値 7.どのブラウザの互換性をテストしましたか?これらのブラウザのコアは何ですか?
Ie
Alt タグの title 属性と alt 属性の違いは何ですか?
Double marginBUG floatに対するいくつかの解決策を書き留めます。
cssリセットの役割と目的を説明してください。 Cssリセットブラウザのデフォルトの
:1、
とは何ですか? コンテンツの構造 (コンテンツ セマンティクス) に基づいて適切なタグ (コード セマンティクス) を選択します。これにより、開発者はより洗練されたコードの読み書きが容易になり、同時にブラウザ クローラーやマシンがより適切に解析できるようになります。
13.フロートをクリアする方法は何通りありますか?それぞれの長所と短所は何ですか?
宣言に直接関係します。
DTD15. CSS スプライト と、それをページや Web サイトでどのように使用するかを説明します
16.CSSハック、条件付き参照、またはその他のについて話し合う?
19.CSS大文字?
大文字英語のピンインの最初の文字は大文字です
英語のピンイン文字はすべて大文字です大文字 小文字
英語のピンイン文字 すべて小文字 CSS セレクターとは何ですか?
3つの基本セレクターに加えて、
21. ハイパーリンクにアクセスした後に hover スタイルが表示されない問題は何ですか?の解き方？ 答え: クリックされたハイパーリンク スタイルには、
ホバーとアクティブがなくなりました。解決策は、CSS 属性の順序を変更することです: L-V-H-A (リンク、訪問済み、ホバー、アクティブ) inline-block 要素があります (固有の寸法があり、高さと幅を設定できますが、自動的に折り返されません)。 答え:
, emPX の違いは、実際にはピクセルです。フォント サイズを設定するには PX を使用します。 、比較 安定していて正確。しかし、この方法には問題があり、ユーザーがブラウザで作成した Web ページを閲覧するときに、ブラウザのズームを変更すると、Web ページのレイアウトが崩れてしまいます。これは、Web サイトの使いやすさを懸念しているユーザーにとって大きな問題です。したがって、Web ページのフォントを定義するために「em」を使用することが提案されました。 EM:
EM は、ベースラインに基づいてフォント サイズを拡大縮小します。 EM は本質的に、特定の数値ではなく相対的な値です。この手法には、通常
filter:alpha(opacity=50); /* つまり有効*/
-moz-opacity:0.5; /* Firefox は有効*/ 不透明度: 0.5 ; /* ユニバーサル、他のブラウザでも有効*/}
JavaScript
1. javascriptのtypeofはどのようなデータ型を返しますか?
2 暗黙的な型変換。 Force Number(), String(), Boolean(), Object();
の違い。 Join() 関数は、文字列のバッチを取得し、それらを区切り文字列で結合して文字列を返します。
Split() イベントを追加する通常の方法では、下部のイベントが上部のイベントを上書きします。ただし、イベント バインディング (addEventListener) によるイベントの追加では、複数のイベントを追加できます。
tailaddition
pop（）ヘッダー追加shift()ヘッダー削除
Ie
と標準の間で互換性のある記述方法は何ですか? ... getとpostの違いは何ですか?
パラメータが表示されますは仮想内部に置くことです通信事業者、
を与える必要があります9.
callとapplyの違いは何ですか? call
method
10. Ajaxリクエスト中にjsonデータを解析する方法?
11.ローカルオブジェクト、組み込みオブジェクト、ホストオブジェクトとは何ですかJavaScript?
12. ドキュメントロードとドキュメント準備完了の違いは何ですか?
13.配列から重複を削除するメソッドを作成します。
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)//如果提供了事件对象，则这是一个非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;
}
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
