フロントエンドのインタビューの質問: Html と CSS_html/css_WEB-ITnose

再び卒業シーズンが到来し、多くの友人が就職活動をする時期になりました。多くの友人が私に、面接で何か質問はありますか? と尋ねました。答え: いいえ。 うーん...

友人、私は本当に嘘をついていませんでした。私は卒業以来一度も会社を変えたことがないので、面接での質問はまったくありません。当社の採用活動では面接での質問は一切ありません。なぜなら、それらはすべてBaiduで入手できるからです（笑）。 ただし、ほとんどの企業にはまだ面接の質問があるため、皆さんの意見を求めた後、面接のフロントエンドの質問をまとめます。今回はHTMLとCSSについてお話します。

1. テストにはどのブラウザがよく使用されますか?どのようなカーネル (レイアウト エンジン) がありますか?

(Q1)ブラウザ: IE、Chrome、FireFox、Safari、Opera。

(Q2)コア: Trident、Gecko、Presto、Webkit。

2. インライン要素とブロックレベル要素の違いを教えてください。インラインブロック要素の互換性の使用? (IE8 以下)

(Q1)インライン要素: 水平方向に配置され、幅の設定が無効、高さの設定が無効 (line-height は設定可能)、margin top および を含めることはできません。底部は無効であり、上部と底部のパディングも無効です。
ブロックレベルの要素: それぞれが 1 行を占め、垂直に配置されます。新しい行で始まり、改行で終わります。

(Q2)互換性: display:inline-block;*display:inline;*zoom:1;

3. float をクリアする方法は何ですか?どちらが良い方法でしょうか?

(1) 親 div は高さを定義します。

(2) 最後に空のdivタグclear:bothを追加します。

(3) 親 div は、疑似クラス: after とzoom を定義します。

(4) 親 div は overflow:hidden を定義します。

(5) 親 div は overflow:auto を定義します。

(6) 親 div も浮動しているため、幅を定義する必要があります。

(7) 親 div は、display:table を定義します。

(8) 最後にbrタグclear:bothを追加します。

4.ボックス サイズ設定で一般的に使用される属性は何ですか?それぞれの機能は何ですか?

(Q1)box-sizing: content-box|border-box|inherit;

(Q2)content-box: 幅と高さは要素のコンテンツ ボックスにそれぞれ適用されます。要素のパディングと境界線を幅と高さの外側に描画します (要素のデフォルト効果)。
border-box: 要素で指定されたパディングと境界線は、設定された幅と高さ内に描画されます。コンテンツの幅と高さは、それぞれ設定された幅と高さからボーダーとパディングを減算することによって取得されます。

5. Doctype の役割は何ですか?標準モードと互換モードの違いは何ですか?

(Q1) は、このドキュメントを解析するためにどのドキュメント標準を使用するかをブラウザのパーサーに指示します。 DOCTYPE が存在しないか、形式が正しくない場合、ドキュメントは互換モードで表示されます。

(Q2) 標準モードの組版および JS 操作モードは、ブラウザーがサポートする最高水準で実行されます。互換モードでは、サイトが機能しなくなるのを防ぐために、古いブラウザーの動作をシミュレートして、緩やかな下位互換性のある方法でページが表示されます。

6.HTML5 なぜ だけを記述する必要があるのですか?

HTML5 は SGML に基づいていないため、DTD を参照する必要はありませんが、ブラウザーの動作を規制する (ブラウザーを本来の方法で実行させる) ために doctype が必要です。

HTML4.01 は SGML に基づいているため、ドキュメントで使用されるドキュメント タイプをブラウザーに伝えるために DTD を参照する必要があります。

7. ページにスタイルをインポートする場合、link と @import の使用の違いは何ですか?

(1)link は、CSS のロードに加えて、RSS の定義、rel 接続属性やその他の機能の定義にも使用できます。 CSS をロードする;

( 2) ページがロードされると、リンクも同時にロードされ、@import によって参照される CSS は、ページがロードされるまで待機してからロードします

(3) importはCSS2.1で提案されており、IE5以降でのみ認識でき、リンクはXHTMLタグであるため互換性の問題はありません;

8. ブラウザコアについての理解を紹介してください。

主に、レンダリング エンジン (レイアウト エンジニアまたはレンダリング エンジン) と JS エンジンの 2 つの部分に分かれます。

レンダリングエンジン: Web ページのコンテンツ (HTML、XML、画像など) の取得、情報の整理 (CSS の追加など)、Web ページの表示方法の計算を担当します。そしてそれをモニターやプリンターに出力します。ブラウザ カーネルが異なれば、Web ページの文法解釈も異なるため、レンダリング効果も異なります。 Web コンテンツを編集および表示するすべての Web ブラウザ、電子メール クライアント、およびその他のアプリケーションにはカーネルが必要です。

JS エンジン : JavaScript を解析して実行し、Web ページ上で動的な効果を実現します。

当初、レンダリング エンジンと JS エンジンには明確な区別はありませんでしたが、その後、JS エンジンはますます独立するようになり、カーネルはレンダリング エンジンのみを指す傾向になりました。

9.html5 の新機能は何ですか? HTML5 の新しいタグによるブラウザーの互換性の問題にどう対処するか? HTML と HTML5 を区別するにはどうすればよいですか?

HTML5 はもはや SGML のサブセットではなく、主に画像、場所、ストレージ、マルチタスク、その他の機能の追加に関するものです。

(1) ペイント キャンバス;

(2) メディア再生用のビデオおよびオーディオ要素;

(3) ローカル オフライン ストレージ データの長期保存。

(4) sessionStorage データはブラウザが閉じられると自動的に削除されます

(5) 記事、フッター、ヘッダー、ナビゲーション、セクションなどのより適切なセマンティクスを持つコンテンツ要素

(6) フォーム コントロール、カレンダー、日付、時間、電子メール、URL、検索;

(7) 新しいテクノロジー Webworker、WebSocket、Geolocation;

IE8/IE7/IE6 は、 document.createElement メソッドによって生成されたタグをサポートします。 この機能を使用して、これらのブラウザーで HTML5 を新規サポートすることができます。新しいタグをサポートした後は、タグのデフォルトのスタイルも追加する必要があります。もちろん、html5shim;

<!--[if lt IE 9]><script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script><![endif]-->

10 などの成熟したフレームワークを直接使用することもできます。 HTML セマンティクスについて簡単に説明してください。

正しいことを行うには、適切なタグを使用してください。

html セマンティクスにより、ページのコンテンツが構造化され、明確になり、ブラウザーや検索エンジンが解析しやすくなります。

スタイル CSS がなくても、ドキュメント形式で表示され、読みやすくなります。

検索エンジン クローラー。また、HTML タグに依存して各キーワードのコンテキストと重みを決定します。これは SEO にとって有益です。

ソース コードを読む人が Web サイトを分割しやすくなり、読みやすく、保守しやすくなり、理解しやすくなります。

htmlとcssのまとめです。間違いがあればご指摘ください。面接中に何か問題が発生した場合は、メッセージを残してください。一緒に解決します。