1. 作成したページをどのブラウザでテストしましたか? これらのブラウザのカーネルは何ですか?
IE: trident カーネル Firefox: gecko カーネル
Safari:ウェブキットカーネル
Opera: 以前は Presto カーネルでしたが、Opera は現在 Google Chrome の Blink カーネルに切り替わりました
Chrome: Blink (Google と OperaSoftware が共同開発した Webkit に基づく)
2. Doctype の役割は何ですか? ストリクト モードとプロミスキャス モードの違いは何ですか?
<!DOCTYPE> は、ドキュメントをレンダリングするモードをブラウザに指示するために使用されます。厳密モード: ページ レイアウトと JS 解析は、ブラウザでサポートされる最高の標準で実装されます。混合モード: 標準に従って厳密に実装されておらず、主に古いブラウザとの互換性および下位互換性のために使用されます。
3. div+css レイアウトのテーブル レイアウトと比較した利点は何ですか?
バージョンが変わったときもcssファイルさえ変更すればさらに便利です。
ページの読み込みが速くなり、構造が明確で、ページ表示が簡潔になります。
プレゼンテーションは構造から分離されています。
SEO 最適化が容易な検索エンジンはよりフレンドリーになり、ランキングが上位に表示されやすくなります。
4. img の alt と title の類似点と相違点は何ですか?
alt(alt text): 画像、フォーム、またはアプレットを表示できないユーザー エージェント (UA) の場合、alt 属性を使用して代替テキストを指定します。置換テキストの言語は、lang 属性によって指定されます。(IEブラウザではタイトルがない場合はツールチップとしてaltが表示されます)
title(tooltip): この属性は、この属性を設定する要素に関する推奨情報を提供します。
5. Web サイトのリソースを保存するために複数のドメイン名を使用することがより効果的であるのはなぜですか?
CDN キャッシュはブラウザーの同時実行制限を突破するためにさらに便利です
Cookie の帯域幅を節約する
メインドメイン名の接続数を節約し、ページの応答速度を最適化します。
不要なセキュリティ問題を防ぐ
6. Cookie、sessionStorage、localStorage の違いについて説明してください。***
sessionStorage (セッション) 内のデータ。これらのデータは同じセッション内のページからのみアクセスでき、セッションが終了するとデータは破棄されます。したがって、sessionStorage は永続的なローカル ストレージではなく、セッション レベルのストレージにすぎません。また、localStorage は永続的なローカル ストレージとして使用され、データが積極的に削除されない限り、データが期限切れになることはありません。
ウェブストレージとCookieの違い
Web ストレージの概念は Cookie の概念に似ていますが、大容量のストレージ用に設計されている点が異なります。Cookie のサイズは制限されており、新しいページをリクエストするたびに Cookie が送信されるため、事実上帯域幅が浪費されます。さらに、Cookie はスコープを指定する必要があり、ドメインをまたいで呼び出すことはできません。さらに、Web Storage には setItem、getItem、removeItem、clear などのメソッドがあります。Cookie とは異なり、フロントエンド開発者は setCookie と getCookie を自分でカプセル化する必要があります。しかし、Cookie も不可欠です。Cookie の役割はサーバーと対話し、HTTP 仕様の一部として存在することですが、WebStorage はデータをローカルに「保存」するためにのみ生まれました。
7. src と href の違いを簡単に説明しますか?
src は現在の要素を置換するために使用され、href は現在のドキュメントと参照されるリソース間のリンクを確立するために使用されます。
src はsourceの略語で、外部リソースの場所を指し、指すコンテンツはドキュメント内の現在のタグの場所に埋め込まれます。src リソースが要求されると、js スクリプト、img 画像、フレーム、その他の要素など、指すリソースがダウンロードされてドキュメントに適用されます。
<scriptsrc=”js.js”></script>
ブラウザーがこの要素を解析すると、リソースがロードされ、コンパイルされ、実行されるまで、他のリソースのダウンロードと処理が一時停止されます。同じことは、指定されたリソースを現在のタグに埋め込むのと同様に、ピクチャやフレームなどの要素にも当てはまります。これが、js スクリプトが先頭ではなく下部に配置される理由でもあります。
href は HypertextReference の略語で、ネットワーク リソースの場所を指し、ドキュメントに追加する場合は現在の要素 (アンカー) または現在のドキュメント (リンク) とのリンクを確立します。
<linkhref=”common.css”rel=”stylesheet”/>
そうすると、ブラウザーはドキュメントを CSS ファイルとして認識し、現在のドキュメントの処理を停止せずにリソースを並行してダウンロードします。このため、@import メソッドを使用する代わりに、link メソッドを使用して CSS を読み込むことが推奨されます。
8. 開発者は、CSS/JS コードの起動後にパフォーマンスを最適化することがよくありますが、ユーザーが Web ページを更新した時点から、JS リクエストは通常どこにキャッシュされますか?
答え: DNS キャッシュ、CDN キャッシュ、ブラウザ キャッシュ、サーバー キャッシュ。
9. DOM の CSS スタイルを設定する方法はありますか?
外部スタイルシート、外部CSSファイルのインポート
内部スタイルシート。CSS コードを <head> タグ内に配置します。
インライン スタイル。CSS スタイルを HTML 要素内で直接定義します。
10. b タグと強いタグ、i タグと em タグの違いは何ですか?
後者にはセマンティクスがありますが、前者にはセマンティクスがありません。
次に、それが意味論的になるのはいつですか?という質問が再び生じます。意味的な理解?
正しいことを正しいラベルで行いましょう。
セマンティック HTML は、ページのコンテンツを構造化し、ブラウザや検索エンジンが解析しやすいようにするもので、スタイル CCS を使用しないドキュメント形式で表示され、読みやすくなります。検索エンジン クローラーは、タグに基づいて各キーワードのコンテキストと重みを決定します。これは SEO に効果的です。ソースコードを読む人が Web サイトをブロックに分割しやすくなり、読みやすく、保守しやすく、理解しやすくなります。
ヘッダー、ナビゲーション、フッター、余談、記事、セクションなどのセマンティックで優れたコンテンツ タグ。
11.BFCとは何ですか?
BFC (ブロック レベル フォーマット コンテキスト)、新しい BFC を作成するボックスは独立してレイアウトされ、ボックス内の要素のレイアウトはボックスの外側の要素に影響を与えません。同じ BFC 内の 2 つの隣接するボックスには、垂直方向のマージンが重なるという問題があります。BFC とは、ブラウザ内に独立したレンダリング領域が作成されることを意味します。この領域内のすべての要素のレイアウトは、領域外の要素のレイアウトには影響しません。このレンダリング領域は、ブロック レベルの要素でのみ機能します。
12. ボックスモデルの紹介:
W3C標準ボックスモデル
CSS の幅 = コンテンツの幅
CSSの高さ（height）＝コンテンツの高さ（content）
div の実際の幅=width+(padding+border+margin)*2
div の実際の高さ=height+(padding+border+margin)*2
IEボックスモデル（ストレンジボックスモデルとも呼ばれます）
CSSの幅(width) = コンテンツ(content)の幅 + (border+padding) *2
CSSの高さ(width) = コンテンツ(content)の高さ + (border+padding) *2
div 実際の幅 = 幅 + マージン 2
div 実際の高さ = 高さ + マージン 2
13. スタイルを初期化するのはなぜですか?
ブラウザの互換性の問題により、ブラウザごとにタグのデフォルトのスタイル値が異なるため、初期化されていない場合、ブラウザごとに表示に差異が生じますが、CSSの初期化による検索エンジンの最適化への影響は小さいです。
14.インライン要素とは何ですか? ブロックレベル要素とは何ですか? 空の (void) 要素とは何ですか?
(1) CSS 仕様では、各要素には要素の種類を決定する表示属性があり、各要素にはデフォルトの表示値が規定されており、たとえば、div のデフォルトの表示属性値は「block」であり、これは「ブロックレベル」要素となり、span のデフォルトの表示属性値は「inline」で、「インライン」要素となります。
(2) インライン要素は次のとおりです: ab span img input select Strong
ブロックレベルの要素は次のとおりです: div ul ol li dl dt dd h1 h2 h3 h4…p
(3) よく知られている空の要素: <br><hr><img><input><link><meta> あまり知られていない: <area><base><col><command><embed><keygen><param><source><track><wbr>