フロントエンド開発面接の質問 -- HTML_html/css_WEB-ITnose

2. HTML

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

alt 属性は、ドキュメント内の画像を表示できない閲覧者にテキストの説明を提供するために使用されます。また、長さは英語の 100 文字未満にする必要があります。そうでない場合は、ユーザーが置換テキストをできるだけ短くする必要があります。

これには、画像表示をネイティブにサポートしていないブラウザを使用しているユーザー、または画像表示がオフになっているブラウザを使用しているユーザー、視覚障害のあるユーザー、スクリーン リーダーを使用しているユーザーが含まれます。

title 属性は、この属性が設定されている要素に関する推奨情報を提供します。必須ではない追加情報を提供するには、title 属性を使用します。 「Alt 属性と Title 属性の違いと応用」を参照してください。

2.2. 次の HTML タグを記述します: text 太字、下付き文字、中央、フォント

太字: 、

下付き文字:

Center:

Font: 、、「HTMLタグ一覧」を参照

2.3. html5の新しいタグを追加して記述してください。セマンティクスとアプリケーション シナリオ

section: ドキュメント内のセクションを定義します

nav: ナビゲーション リンクのみを含むセクションを定義します

header: ページまたは章のヘッダーを定義します。多くの場合、ロゴ、ページ タイトル、ナビゲーション用の目次が含まれます。

フッター: ページまたは章の終わりを定義します。多くの場合、著作権情報、法的情報へのリンク、フィードバック提案のアドレスが含まれています。

余談: ページのコンテンツとの関連性が低いコンテンツの定義 - 削除されても、残りのコンテンツは依然として妥当です。

「HTML5 タグリスト」を参照してください

2.4. タグの意味についての理解を教えてください。

a. スタイルが削除または失われると、ページに明確な構造が表示されます

b. SEO に役立つ: 検索エンジンとの良好なコミュニケーションを確立し、クローラーがより効果的な情報をクロールできるようにします: クローラーはタグに依存してコンテキストを判断し、各キーワードの重み

c. 他のデバイス (スクリーン リーダー、ブラインド リーダー、モバイル デバイスなど) が意味のある方法で Web ページをレンダリングするのに便利です。読みやすいですが、W3C 標準に従うチームはこの標準に従うため、差別化が低下する可能性があります。

2.5. Doctype の役割は何ですか? 厳密モードと混合モードを区別するにはどうすればよいですか?どういう意味ですか?

宣言はドキュメント内の タグの前にあります。どのモードでドキュメントをレンダリングするかをブラウザに指示します。

厳密モードの組版と JS 操作モードは、ブラウザーでサポートされる最高水準で実行されます。

無作為モードでは、ページは緩やかな下位互換性のある方法で表示されます。古いブラウザの動作をエミュレートして、サイトが機能しなくなるのを防ぎます。

DOCTYPE が存在しないか、形式が正しくない場合、ドキュメントは無差別モードでレンダリングされます。

2.6. Doctype ドキュメント タイプをいくつ知っていますか?

タグは、厳密なバージョン、移行バージョン、フレームワークベースの HTML ドキュメントをそれぞれ表す 3 つの DTD タイプを宣言できます。

HTML 4.01 では、Strict、Transitional、Frameset の 3 つのドキュメント タイプが指定されています。

XHTML 1.0 では、Strict、Transitional、および Frameset という 3 つの XML ドキュメント タイプを指定します。

Standards モード (つまり、厳密なレンダリング モード) は、最新の標準に従う Web ページをレンダリングするために使用されます。

Quirks (包括的) モード (つまり、緩やかなレンダリング モードまたは互換性モード) は、以下のために設計された Web ページをレンダリングするために使用されます。従来のブラウザの Web ページ。

2.7、HTML と XHTML - 2 つの違いは何ですか?

a. XHTML 要素は正しくネストされている必要があります。

b. XHTML 要素は閉じられている必要があります。

c. タグ名には小文字を使用する必要があります。

d. XHTML ドキュメントにはルート要素が必要です。

「XHTML と HTML の違い」を参照してください

2.8. html5 の新機能と削除された要素は何ですか?

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

b. ドラッグ アンド ドロップ API

c. より優れたセマンティクスを備えたコンテンツ タグ (ヘッダー、ナビゲーション、フッター、記事、セクション)

d. オーディオおよびビデオ API (オーディオ、ビデオ)

e.

f. 地理位置情報 API

g. ローカル オフライン ストレージ localStorage の長期ストレージ データは、ブラウザが閉じられた後も失われません

h. ページ セッションが終了すると、ストレージ データが保存されます。コントロール、カレンダー、日付、時刻、電子メール、URL、検索

j. 新しいテクノロジー Webworker、WebSocket など

削除された要素:

a. 純粋なパフォーマンス要素: Basefont、big、center、s、strike、tt、 u;

b. 使いやすさに悪影響を与える要素: フレーム、フレームセット、noframes; 2.9 iframe の長所と短所は何ですか?

利点:

a. アイコンや広告などのサードパーティコンテンツの読み込みが遅いという問題を解決します

b. iframe ファイルを更新せずにアップロードします

欠点:

a.メイン ページの負荷 イベント

b. 一部の検索エンジンではインデックスを作成できません

c. ページはサーバーの http リクエストを増加させます

d. 管理が容易ではありません。

「iframe の記録」を参照してください

2.10 Quirks モードとは何ですか?標準モードとの違いは何ですか?

プログラムを作成するときに、特に新しい機能が古い機能と互換性がない場合に、元のインターフェイスを変更せずに、より強力な機能を提供する方法について、この問題によく遭遇します。 IE6 より前のページに DTD を記述する人はいなかったので、IE6 では、DTD が記述されていれば、そのページでは CSS をより適切にサポートするレイアウトが採用されることを意味し、そうでない場合は、CSS と互換性のある以前のレイアウト方法が使用されると想定します。それ。これがQuirksモード（個性モード、奇妙なモード、奇妙なモード）です。

違い: レイアウト、スタイル解析、スクリプト実行の 3 つの側面に全体的な違いがあります。

a. ボックス モデル: W3C 標準では、要素の幅と高さを設定すると、Quirks モードでは、IE の幅と高さにパディングとボーダーも含まれます。

b. インライン要素の高さと幅を設定する: 標準モードでは、 などのインライン要素の幅と高さの設定は有効になりませんが、互換モードでは有効になります。

c. 高さのパーセンテージを設定する: 標準モードでは、要素の高さは、親要素が高さのパーセンテージを設定していない場合、子要素の高さのパーセンテージを設定することは無効です。 d. 水平方向のセンタリングを設定する: margin:0 auto を使用すると、標準モードでは要素を水平方向にセンタリングできますが、quirks モードでは失敗します。

2.11. テーブル

a の欠点を説明してください。 table>tr>td>h3 などのネストが深すぎると、検索エンジンが読み取りにくくなり、最も直接的な損失は冗長性が大幅に増加することです。コードの量。

b. 柔軟性が低い。たとえば、td

を使用する必要があるなど、コードを読み取るのが非常に複雑になります。

d. 混乱 Colspan と rowspan をレイアウトに使用する場合、これらを頻繁に使用すると、文書全体の順序が混乱します。

e. テーブルでは、レンダリング ツリー内のノードの属性を決定するために複数の計算が必要で、通常、同等の要素の 3 倍の時間がかかります。

f. セマンティックが十分ではありません

「なぜテーブル レイアウトが悪いのか?」を参照してください。 》

2.12. src と href の違いを簡単に説明します

src は現在の要素を置き換えるために使用され、href は現在のドキュメントと参照されるリソースの間の接続を確立するために使用されます。

src は、source の略称で、外部リソースの場所を指します。指すコンテンツは、ドキュメント内の現在のタグの場所に埋め込まれます。

href は、Hypertext Reference の略語で、外部リソースの場所を指します。ネットワークリソース、確立と現在の要素 (アンカー)、または現在のドキュメント間のリンク (リンク)