HTML
1. html とは?
Web ページ作成用の標準マークアップ言語であるハイパーテキスト マークアップ言語
2. HTML と XHML の違いは何ですか
HTML は WEB Web ページのデザインに基づいた言語、XHTML は XML に基づいたマークアップ言語です
3. HTML セマンティクスについての理解を簡単に説明してください。
コンテンツ構造に応じて、ブラウザーや検索エンジンの分析を容易にする適切なラベル コード セマンティクスを選択します。なぜセマンティックなのか。CSS を使用せずにページをより適切に表示し、画像のタイトル属性などのユーザー エクスペリエンスを向上させることができます。これは SEO に役立ち、開発者にとっても読みやすくなります。
4. ブラウザ ページの 3 つの層は何ですか? それらは何ですか? そしてその機能は何ですか? ブラウザ ページは 3 つの層
に分かれています: 構造層、プレゼンテーション層、および動作層:
html、css、および js の
機能に対応します: html はページの構造を実現するために使用され、css はページのパフォーマンスとスタイルを記述するために使用され、js はページの対話とビジネス ロジックの実現に使用されます。
5. Doctype の役割は何ですか? ストリクト モードとプロミスキャス モードの違いは何ですか?
ユーザーはドキュメントを宣言し、ページの解析にどのドキュメント標準を使用するかをブラウザに指示します。
厳密モード: 一般モードとも呼ばれ、ブラウザはサポートされている最も高いモードでドキュメントをレンダリングします。
無差別モード: サイトが実行されないように、より緩やかな下位互換性モードで古いブラウザの動作をシミュレートします。
どのような状況で混合モードが発生しますか。Doctype が存在しない場合、またはフォームが正しくない場合、混合モードが発生します。
6. Quirks モードとは何ですか? 標準モードとの違いは何ですか?
IE6 より前では、DTD が宣言されていない場合、ブラウザーは前方互換性があり、以前のレイアウト方法 (Quirks モード) を採用します。
違い:ボックス モデル: 標準モードでは、ボックス モデルの幅は値の幅、高さは値の高さです。互換モードでは、ボックスの幅にはパディングと境界線も含まれます。親要素の高さのパーセンテージを設定した後、子要素の高さのパーセンテージの設定も有効にはならず、互換モードで
有効になります。
7. ページがスタイルをインポートする場合、リンクと @import の使用の違いは何ですか?
- CSS のロードに加えて、link タグでは RSS および ref 接続属性も定義できます。@import は CSS のみをロードできます。
- ロード順序: ページがレンダリングされるときにリンク タグをロードできますが、@import はページがレンダリングされるまで待ってからロードする必要があります。
- 互換性の問題: リンクは HTML タグであり、互換性の問題はありません。@import は css2.1 で提案されており、互換性があるためには ie 以上が必要です
- jsの使用法の問題: linkで導入されたcssはjsを使用してスタイルを変更できますが、@importで導入されたcssは変更できません
8. インライン要素とは何ですか? ブロックレベル要素とは何ですか? 空の (void) 要素とは何ですか?
インライン要素: ab span select input lable
ブロックレベル要素: div table p th tr td ol ul li h1-h6
空要素: br hr
9. ブラウザのカーネルについてのあなたの理解について教えてください。
主にレンダリング エンジンと js エンジンに分かれています
レンダリング エンジンは、主に Web ページのコンテンツ html または xml を取得し、ページ レンダリング用の CSS を追加する役割を果たします。コンピュータの Web ページの形式でブラウザまたはプリンタに入力してください。ブラウザが異なれば、カーネルも異なり、レンダリング効果も異なります。
js エンジン: Web ページのインタラクションとアニメーション効果、およびビジネス コードの実行を担当します。
当初はエンジン間の区別が明確ではなく、js エンジンはますます独立していきました。その後、カーネルはレンダリング エンジンになる傾向がありました。
10. 一般的なブラウザ カーネルは何ですか?
webkit: chrome と safria の古いバージョンで一般的に使用されます。
Trident: IE カーネルとしても知られ、主に IE の再利用に使用されます。Baidu ブラウザと互換モードの一部のブラウザ
presto: 主に、世界最速のレンダリング エンジンとして認識されている Opera ブラウザで使用されます。しかし、2013年以降、OperaはGoogle陣営に加わり、Presto
Blink：GoogleとOpera Softwareが開発したブラウザ写植エンジン 代表者：chromeとOpera
Gecko：代表者 Firefox Firefoxを放棄
11. タイトルと h1、b と Strong、i と em の違いは何ですか?
タイトルと h1 タイトルの違いは、
Web ページのタイトルです。ブラウザのタブ バーに表示され、検索エンジンとユーザーに
Web サイトのテーマを直接伝えます。
b と Strong b の違い
: エンティティ タグ、テキストを太字にするために使用されます
Strong: 論理タグ、テキストのトーンを強化するために使用されます
違い:
b タグには物理的な意味はありませんが、テキストに太字の効果を与えるだけです
。提案: CSS3 仕様に準拠するには、 b をできるだけ使用せず
、代わりに Strong を使用する必要があります
i と em の違いi
: フォントを傾けるエンティティ ラベル
em:テキストの役割を強調するロジック ラベル デフォルトの強調スタイルは CSS を使用して変更できます
12. iframe の欠点は何ですか?
ページのオンロード イベントをブロックすると
SEO に貢献せず、デバイスの互換性も低下します。iframe
とホームページはリンク プールを共有します。ブラウザには同じ接続の数に制限があるため、ページの並列読み込みに影響します。(解決策は、iframe の src を動的に変更し、メイン ページがロードされた後に値を動的に割り当ててからロードすることです)
iframe により http リクエストが増加するため、大規模な Web サイトにはお勧めできません
13. Page Visibility API は何に使用できますか?
document.visibilityState には、ページのコンテンツが少なくとも部分的に表示される3
つの状態があります。これは事実上、そのページが最小化されていないウィンドウの前景タブであることを意味します。hidden:ページのコンテンツはユーザーには表示されません。実際には、これはドキュメントがバックグラウンド タブまたは最小化されたウィンドウの一部であるか、OS 画面ロックがアクティブであることを意味します。
document.addEventListener("visibilitychange", function() {
console.log( document.visibilityState );
})
ブラウザーが複数のページを開いて現在のページにいない場合、ページがバックグラウンド状態かデバイスのロック画面状態か最小化状態かを知ることができます。
14. 境界線を使用せずに 1 ピクセルの高さの線を描画することを実現します。これにより、異なるブラウザーの Quirksmode モードと CSSCompat モードでも同じ効果を維持できます。
<div style="width: 100%;height: 1px;"></div>
HTML5
1. html5 の新機能と削除された要素は何ですか? HTML5 の新しいタグのブラウザ互換性の問題にどう対処するか? HTML と HTML5 を区別するにはどうすればよいですか?
HTML5 の新機能
1. セマンティック タグ: ヘッダー。フッター。ナビ。セクション。記事
2. 描画: キャンバス
3. メディアの再生: ビデオ オーディオ
4. 地理的位置: 地理位置情報 (地理位置情報)
5. ローカル ストレージ: localStorage .sessionStorage
6. フォーム コントロール: カレンダー、日付、時刻、電子メール、URL、検索など。大幅に
削除されました
。中心。フォント。フレーム。アプレット。タブの
互換性
Safari、Chrome、Firefox、Opera の最新バージョンは、特定の HTML5 機能をサポートしています。Internet Explorer 9 は、特定の HTML5 機能をサポートします。
ブラウザの互換性問題への対処
(1)、ドキュメントを使用してタグを作成する
IE9がHTMLを読み込むjsをタグを使用して判断します。letskillie6.zh_CN.pack.js を IE6 にロードします
(2) html5shim を使用します: 次のコードを呼び出します。
1.<!--[if lt IE 9]>
2.<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
3.<![endif]-->
b）使用kill IE6: 在</body>之前调用以下代码：
1.<!--[if lte IE 6]>
2.<script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script>
3.<![endif]-->
html5 の区別
<!doctype> ステートメントは HTML5 ドキュメントの最初の行に置く必要があり、html ステートメントは比較的長いです。
その後の更新について ---------