基本的な HTML 面接の質問の概要

この記事では主に基本的な HTML 面接の質問と回答を紹介します。お役に立てれば幸いです。

1 DOCTYPE は何をしますか?標準モードと混合モードを区別するにはどうすればよいですか?それらは何を意味しますか?

ドキュメントのレンダリングに使用する HTML 仕様のバージョンをブラウザーに指示します。 DOCTYPE が存在しないか、形式が正しくないと、HTML ドキュメントが無差別モードでレンダリングされます。
標準モードはブラウザでサポートされる最高の標準で実行されます。Quirks モードでは、より緩やかな下位互換性のある方法でページが表示されます。

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

HTML5はSGML(Standard Generalized Markup Language)に基づいていないため、DTD(DTD Document Type Definition)を参照する必要はありませんが、ブラウザの動作を標準化するためにDOCTYPEが必要です。

HTML4.01はSGMLに基づいているため、DTDは引用符で囲む必要があります。ドキュメントで使用されているドキュメント タイプをブラウザに伝えるには、次のようにします:

3 インライン要素とは何ですか?ブロックレベル要素とは何ですか? 無効な要素とは何ですか?

インライン要素: a span img input select a span img input select
块级元素：p ul ol li dl dt dd h1 p
空元素：<br> <hr> <link> <meta>

4 页面导入样式时，使用link和@import有什么区别？

相同的地方，都是外部引用CSS方式，区别：

1. link是xhtml标签，除了加载css外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS

2. link引用CSS时候，页面载入时同时加载；@import需要在页面完全加载以后加载，而且@import被引用的CSS会等到引用它的CSS文件被加载完才加载

3. link是xhtml标签，无兼容问题；@import是在css2.1提出来的，低版本的浏览器不支持

4. link支持使用javascript控制去改变样式，而@import不支持

5. link方式的样式的权重高于@import的权重

6. import在html使用时候需要<style type="text/css"></style>ブロックレベル要素: p ul ol li dl dt dd h1 p

   空の要素: <br> <link>

4 ページにスタイルをインポートする場合、リンクと @import の違いは何ですか?

同じ場所はすべて外部参照 CSS メソッドです。違い: @import は CSS をロードするだけでなく、CSS カテゴリに属する​​他のトランザクションも定義できます。 CSS のみをロードできます<p></p> <p></p> リンクが CSS を参照する場合、ページのロードと同時にロードされます。@import はページが完全にロードされた後にロードされる必要があり、@import によって参照される CSS はロードされません。

リンクを参照する CSS ファイルがロードされるまでは、互換性の問題はありません。@import は CSS2.1 で提案されており、以前のバージョンのブラウザではサポートされていません。<p></p>

リンクは、JavaScript コントロールの使用をサポートしています。 @import は

<p></p>

link スタイルをサポートしていませんが、@import よりも重みが高くなります

import には <style type="text/css"></style> タグが必要ですhtmlで使用すると
1. <p></p>
2. 5 スタイルのないコンテンツがちらつく (FOUC ) Unstyle Content<p></p>
@import のフラッシュ CSS ファイルをインポートすると、CSS スタイル シートが読み込まれる前にドキュメントが読み込まれるまで待機します。したがって、ページ DOM の読み込みが完了してから CSS インポートが完了するまでに時間がかかり、ページ上のコンテンツのスタイルが解除されます。

3. 解決策: リンクタグを使用して CSS スタイルファイルを読み込みます。リンクは順番に読み込まれるため、ページは CSS がダウンロードされるまで待機してから HTML ファイルをダウンロードすることになり、レイアウトが最初に実行されるため、FOUC の問題は発生しません。

4. 6 ブラウザ カーネルについての理解を紹介してください。 <p></p>
主に、レンダリング エンジン (レイアウト エンジンまたはレンダリング エンジン) と JS エンジンの 2 つの部分に分かれています。

レンダリング エンジン: Web ページのコンテンツ (HTML、XML、画像など) を取得し、情報を整理し (CSS の追加など)、Web ページの表示方法を計算して、モニターやプリンターに出力します。ブラウザ カーネルが異なれば、Web ページの文法解釈も異なるため、レンダリング効果も異なります。 JS エンジン: JavaScript を解析して実行し、Web ページ上で動的な効果を実現します。

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

7 一般的なブラウザ カーネルは何ですか?

1. <p></p>
Trident(MSHTML): IE MaxThon TT The World 360 Sogou Browser
2. <p></p>
Geckos: Netscape6 以降 FireFox Mozilla Suite/SeaMonkey
3. <p></p>
Presto: Opera7 以降 (Opera カーネルは元々: Presto 、今: 点滅)
4. <p></p>
Webkit: Safari Chrome
5. <p></p>
6. 8 HTML5 の新機能と削除された要素は何ですか? HTML5 の新しいタグによるブラウザーの互換性の問題にどう対処するか? HTMLとHTML5の見分け方<p></p>
画像、場所、ストレージ、マルチタスクなどの機能が新たに追加されました。
7. 新しい要素: <p></p>
8. キャンバス<p></p>

メディア再生用のビデオおよびオーディオ要素<p></p>

1. ローカルオフラインストレージ。 localStorage はデータを長期間保存し、ブラウザを閉じた後もデータは失われません。sessionStorage データはブラウザを閉じた後に自動的に削除されます<p></p>🎜🎜記事フッターのナビゲーション セクションなど、より適切なセマンティクスを持つコンテンツ要素🎜🎜 🎜🎜Location API: 地理位置情報🎜 🎜🎜🎜フォーム コントロール、カレンダー日付時刻電子メール URL 検索🎜🎜🎜🎜新テクノロジー: Web ワーカー (Web ワーカーはバックグラウンドで実行される JavaScript であり、他のスクリプトから独立しており、 Web ワーカーがバックグラウンドで実行されている間に、必要な操作を続行できます。 実行すること: クリック、コンテンツの選択など) Web ソケット🎜🎜🎜🎜 ドラッグ アンド ドロップ API: ドラッグ、ドロップ🎜🎜🎜🎜削除された要素: 🎜🎜🎜🎜純粋に表現力豊かな要素：basefont big center font s Strike tt u🎜

2. パフォーマンスの悪い要素: フレーム フレームセット noframes

区別:

1. DOCTYPE 宣言の方法は、新しく追加された構造と関数に従って重要な要素を区別することです

2. 9 簡単な説明HTML セマンティクスについてどのように理解していますか?

スタイルを削除または失うと、ページに明確な構造を与えることができます。

1. SEO と検索エンジンが良好なコミュニケーションを確立するのに役立ち、クローラーがタグに依存して各キーワードのコンテキストと重みを判断するのに役立ちます。 <p></p>
2. 他のデバイスが解析するのに便利です。 <p></p>
3. チームの開発とメンテナンスが容易で、読みやすさに基づいたセマンティクス。 <p></p>

4. 10 HTML5 ファイルのオフラインストレージを使用する方法とその動作原理は何ですか?

オンラインの場合、ブラウザーは HTML ヘッダーにマニフェスト属性があることを検出し、初めてのアクセスの場合、ブラウザーはマニフェスト ファイルの内容に基づいて対応するリソースをダウンロードし、保存します。彼らはオフラインです。アクセスされ、リソースがオフラインで保存されている場合、ブラウザはオフライン リソースを使用してページを読み込みます。次に、ブラウザは新しいマニフェスト ファイルと古いマニフェスト ファイルを比較します。ファイルが変更されていない場合は、操作は実行されません。ファイル内のリソースは再ダウンロードされ、オフラインで保存されます。たとえば、

ページヘッダーにマニフェスト属性を追加します

cache.manifestファイルにオフラインストレージリソースを書き込みます<p></p>

CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
Resourse/logo.png
FALLBACK:
 //offline.html

11 Cookie、sessionStorage、localStorageの違いは何ですか?

<p></p>それらの共通点: それらはすべてブラウザ側に保存され、同じ起源を持っています。

違い:

<p></p>Cookieは、ユーザーを識別するためにユーザーのローカル端末に保存されるデータであり、常に同じオリジンのhttpリクエストに含まれます。つまり、Cookieはブラウザとブラウザの間でやり取りされます。サーバーに保存されますが、sessionstorage と localstorage はデータをサーバーに自動的に送信せず、ローカルに保存するだけです。 <p></p>

1. ストレージサイズの制限が異なります。 Cookie によって保存されるデータは非常に小さく、4K を超えることはできませんが、sessionstorage と localstorage によって保存されるデータは大きく、5M に達する場合があります。 <p></p>
2. データの有効期限が異なります。ウィンドウまたはブラウザを閉じた場合でも、Cookie は設定された Cookie の有効期限まで有効です。 Sessionstorage は、ブラウザ ウィンドウが閉じるまでのみ有効です。 Localstorage は、ウィンドウやブラウザが閉じている場合でも、長期のデータ保存のために常に有効です。 <p></p>
3. 異なるスコープ。 Cookie は同じオリジンのすべてのウィンドウ間で共有されます。セッションストレージは、同じページ上であっても、異なるブラウザ間では共有されません。ローカルストレージは、同じオリジンのすべてのウィンドウ間で共有されます。12 iframe の利点と欠点は何ですか?フレームワーク？ <p></p>
利点:
4. <p></p>
iframeは、埋め込まれたWebページをそのまま表示できます。

iframe を参照している Web ページが複数ある場合、iframe のコンテンツを変更するだけで、呼び出される各ページのコンテンツを変更することができ、便利で高速です。

<p></p>

スタイルを統一するためにWebページのヘッダーとバージョンが同じ場合は、1つのページとして記述し、iframeでネストすることでコードの再利用性を高めることができます。
1. <p></p>
アイコンや広告などのサードパーティコンテンツの読み込みが遅い場合、これらの問題は iframe で解決できます。
2. <p></p>
短所:
3. <p></p>
検索エンジンのクローラーはこの種のページを解釈できません
4. <p></p>
フレーム構造にはさまざまなスクロールバーが表示されます

<p></p>

フレーム構造を使用する場合は、必ず正しいナビゲーションリンクを設定してください。
1. <p></p>
iframe ページはサーバーの http リクエストを増加させます
2. <p></p>
3. ラベルの機能は何ですか? どのように使用されますか? <p></p>
ラベルはフォーム コントロール間の関係を定義するために使用されます。ユーザーがラベルを選択すると、ブラウザは自動的にラベルに関連付けられたフォーム コントロールにフォーカスを移します。 label には、FOR と ACCESSKEY という非常に便利な 2 つの属性があります。
4. FOR 属性関数: ラベル label にバインドされる HTML 要素を示します。このラベルをクリックすると、バインドされた要素がフォーカスを取得します。たとえば、<p></p>

   <label>姓名</label><input>

   ACCESSKEY 属性関数: ラベル タグにバインドされた要素にアクセスするためのホットキーを示します。ホットキーを押すと、バインドされた要素がフォーカスされます。例:

<label>姓名</label><input>

14 HTML5 フォームのオートコンプリート機能をオフにするにはどうすればよいですか?

HTML 入力ボックスにはオートコンプリート機能を持たせることができます。入力ボックスにコンテンツを入力すると、ブラウザーは同じ名前の以前の入力ボックスの履歴から類似したコンテンツを検索し、入力ボックスの下にリストします。この方法では、すべてを入力する必要はなく、リスト内の項目を選択するだけです。ただし、場合によっては、ユーザーがコンテンツを入力するときに、ユーザーの履歴を検索するのではなく、AJAX テクノロジを使用してデータベースから検索して一覧表示したい場合など、入力ボックスのオートコンプリート機能をオフにしたいことがあります。

方法:

<p></p>

IEのインターネットオプションメニューでオートコンプリートを設定

フォーム入力ボックスのオートコンプリートをオンまたはオフに設定して、入力ボックスのオートコンプリート機能をオンにします

15 如何实现浏览器内多个标签页之间的通信?

1. WebSocket SharedWorker

2. 也可以调用 localstorge、cookies 等本地存储方式。 localstorge 在另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信。

注意：Safari 在无痕模式下设置 localstorge 值时会抛出QuotaExceededError 的异常

16 webSocket如何兼容低浏览器？

1. Adobe Flash Socket  ActiveX HTMLFile (IE)  基于 multipart 编码发送 XHR 基于长轮询的 XHR

2. 引用WebSocket.js这个文件来兼容低版本浏览器。

16 页面可见性（Page Visibility）API 可以有哪些用途？

1. 通过visibility state的值得检测页面当前是否可见，以及打开网页的时间。

2. 在页面被切换到其他后台进程时，自动暂停音乐或视频的播放。

17 如何在页面上实现一个圆形的可点击区域？

1. map+area或者svg

2. border-radius

3. 纯js实现，一个点不在圆上的算法

18  实现不使用 border 画出1px高的线，在不同浏览器的Quirks mode和CSS Compat模式下都能保持同一效果

<p></p>

19 网页验证码是干嘛的，是为了解决什么安全问题？

1. 区分用户是计算机还是人的程序;

2. 可以防止恶意破解密码、刷票、论坛灌水；

20 title与h1的区别、b与strong的区别、i与em的区别？

title属性没有明确意义，只表示标题；h1表示层次明确的标题，对页面信息的抓取也有很大的影响
strong标明重点内容，语气加强含义；b是无意义的视觉表示
em表示强调文本；i是斜体，是无意义的视觉表示
视觉样式标签：b i u s
语义样式标签：strong em ins del code

21 元素的alt和title有什么异同？

在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字。

相关推荐：

前端面试题小结

CSS基础面试题小结、

JavaScript面试基础知识题分享

以上が基本的な HTML 面接の質問の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。