HTML
* Doctype の役割は何ですか?厳密モードと混合モードを区別するにはどうすればよいですか?どういう意味ですか?
1. 宣言はドキュメント内の タグの前に配置されます。このタグは、ドキュメントが HTML または XHTML のどちらの仕様を使用しているかをブラウザに伝えることができます
2. いわゆる標準モードは、ブラウザが W3C 標準に従ってコードを解析および実行することを意味します。ブラウザの解析方法と実行方法が異なるため、コードを実行します。そのため、これを奇妙なモードと呼びます。
3. ブラウザーが解析時に標準モードを使用するか、変なモードを使用するかは、Web ページの DTD 宣言に直接関係しており、DTD 宣言は標準ドキュメント (標準モード解析) ドキュメント タイプを定義します。対応するメソッドを使用して、DTD 宣言を無視して Web ページをロードして表示すると、Web ページが奇妙なモードになります。
* なぜ HTML5 では のみを記述する必要があるのですか?
doctypeはドキュメントタイプの略称で、ページ内でそのページが使用するxhtml（またはhtml）のバージョンを指定するために使用されます。標準に準拠したページを作成するには、Doctype 宣言が不可欠かつ重要なコンポーネントです。正しい doctype が決定された場合にのみ、xhtml 内のロゴと CSS が正常に有効になります。 html は、このファイルが html 形式の Web ページ ファイルであることをブラウザに伝えます。元の文字列は HTML5 標準の Web ページ宣言ですが、現在はこの簡潔な形式になっており、主流のブラウザで認識されます。このステートメントは html5 標準をサポートします。
* インライン要素とは何ですか?ブロックレベル要素とは何ですか? 無効な要素とは何ですか?
ブロックレベルの要素には次のものが含まれます: div ul ol li dl dt dd h1-h6 p
よく知られた空の要素:
; hr>
アドレス - ブロック参照中心 - block dir - ディレクトリリスト div - 共通ブロックレベル コンテナは CSS レイアウトのメインラベルでもあります dl - 定義リスト フィールドセット - フォームコントロールグループ フォーム - インタラクティブフォーム h1 - タイトル h2 - サブタイトル h3 - レベル 3 タイトル h4 - レベル 4 タイトル h5 -レベル 5 タイトル h6 - レベル 6 タイトル hr - 水平分割線 isindex - 入力プロンプト メニュー - メニュー リスト noframes - フレームのオプションのコンテンツ (このブロックのコンテンツはフレームをサポートしていないブラウザに表示されます) noscript - オプションのスクリプト コンテンツ (このコンテンツはスクリプトをサポートしていないブラウザに表示されます) ol - ソートフォーム p - 段落事前 - フォーマットされたテキスト table - テーブル ul - 未ソートリスト (順序なしリスト)
共通インライン要素 (インライン要素) a - アンカーポイント abbr - 略語の頭字語- 最初の文字 b - 太字フォント (非推奨) bdo - Bidi オーバーライド big - 大きなフォント br - 改行引用 - 引用コード - コンピューターコード (ソースコードを引用する場合に必要) dfn - 定義フィールド em - 強調フォント - フォント設定 (非推奨)推奨) i - イタリック体 img - 画像入力 - 入力ボックス kbd - キーボード テキスト ラベルの定義 - テーブル ラベル q - 短い引用符 s - アンダースコア (非推奨) samp - サンプル コンピュータ コードの定義 select - プロジェクトの選択 small - 小さいフォント テキスト スパン - 共通インラインコンテナ、テキスト内のブロックを定義します。 ストライク - 強い下線 - 太字の強調 sub - 下付き文字 sup - 上付き文字のテキストエリア - 複数行のテキスト入力ボックス tt - テレックステキスト u - 下線 var - 変数の定義
可変要素 可変要素は次のとおりです。ブロック要素であるかインライン要素であるかはコンテキストによって決まります [1]。アプレット - Java アプレット ボタン - ボタン del - テキストの削除 iframe - インライン フレーム ins - 挿入されたテキスト マップ - 画像ブロック (マップ) オブジェクト - オブジェクト オブジェクト スクリプト - クライアント スクリプト
空要素 HTML要素の内容は開始タグと終了タグの間の内容となるためです。また、一部の HTML 要素には空のコンテンツがあります。 (空のコンテンツ)、空のコンテンツを含む HTML 要素は空の要素です。空の要素 [2] は開始タグで閉じられています。例
* ページにスタイルをインポートするときにリンクと @import を使用することの違いは何ですか?
(1) リンクは CSS のロードに加えて、RSS の定義、rel 接続属性の定義などにも使用できます。一方、@import は CSS によって提供され、ロードするためにのみ使用できます。 CSS;
(2) ページがロードされると、リンクも同時にロードされ、@import によって参照される CSS は、ページがロードされるまで待機してからロードされます。
(3) インポートは CSS2 によって提案されます。 .1 であり、IE5 以降でのみ認識され、リンクは XHTML タグであるため、互換性の問題はありません
（4）: dom を使用してスタイルを制御する場合の違い。 JavaScript を使用して dom を制御してスタイルを変更する場合、@import は dom によって制御できないため、link タグのみを使用できます。
(5): @import は、CSS に他のスタイル シートを導入できます。たとえば、メイン スタイル シートを作成し、そのメイン スタイル シートに他のスタイル シートを導入することができます
* ブラウザのコアの理解を紹介します。 ?
主に、レンダリング エンジン (レイアウト エンジニアまたはレンダリング エンジン) と JS エンジンの 2 つの部分に分かれています。
レンダリングエンジン：Webページの内容（HTML、XML、画像など）の取得、情報の整理（CSSの追加など）、Webページの表示方法の計算を担当し、モニターやプリンターに出力します。ブラウザ カーネルが異なれば、Web ページの文法解釈も異なるため、レンダリング効果も異なります。 Web コンテンツを編集および表示するすべての Web ブラウザ、電子メール クライアント、およびその他のアプリケーションにはカーネルが必要です。
JS エンジン: JavaScript を解析して実行し、Web ページ上で動的な効果を実現します。
当初、レンダリング エンジンと JS エンジンには明確な区別はありませんでしたが、その後、JS エンジンはますます独立し、カーネルはレンダリング エンジンのみを指す傾向になりました。
* 一般的なブラウザ カーネルとは何ですか?
4 つの一般的なカーネルがあります:
Trident: IE ブラウザーで使用されるカーネル プログラムは、1997 年に IE4 で最初に使用され、Mosaic コードに基づいて Microsoft によって修正され、現在でも使用されています。現在のIE9では。 Trident は実際にはオープン カーネルであり、そのインターフェイス カーネル設計は非常に成熟しているため、IE の代わりに IE カーネルを使用する多くのブラウザー (Maxthon、The World、TT、GreenBrowser、AvantBrowser など) が登場しています。
Gecko: このカーネルは Netscape 6 から使用され始め、その後 Mozilla FireFox もこのカーネルを使用しました。Gecko の特徴は、コードが完全にオープンであるため、開発性が高く、開発が可能であることです。メンバーは世界中のプログラムで使用されており、コードを作成して機能を追加できます。 Gecko エンジンの起源は IE と関係があります。IE は W3C 標準を使用していなかったため、Microsoft 内の一部の開発者の間で不満が生じ、Netscape の一部の従業員とともに Mozilla を設立しました。 Mosaic カーネルをベースにカーネルが書き換えられ、Geckos が開発されました。しかし実際には、Gecko コアを搭載したブラウザは依然として Firefox (Firefox) が最も多くのユーザーを抱えているため、Firefox コアと呼ばれることもあります。さらに、Gecko はクロスプラットフォーム カーネルでもあり、Windows、BSD、Linux、Mac OS X で使用できます。
Presto: 現在 Opera で使用されているカーネルは、2003 年に Opera7 で初めて使用されました。このエンジンの特徴は、レンダリング速度が極限まで最適化されていることです。ただし、サーバー コアには Web ページの互換性が犠牲になります。実際、これは動的カーネルです。これまでのカーネルとの最大の違いは、スクリプト イベントに応じてページのすべてまたは一部を再解析できるという点です。さらに、同じ条件でのテストによると、このカーネルは Javascript の実行速度が最も速く、同じ Javascript を実行するのに必要な時間は、Presto カーネルが Trident および Gecko カーネルの約 1/3 にすぎません (Trident カーネルは最も遅いですが、2 つの違いはあまりありません）。残念ながら、Presto は商用エンジンであるため、Presto の開発は大幅に制限されます。
Webkit: Apple 独自のカーネル。Apple の Safari ブラウザで使用されるカーネルでもあります。 Webkit エンジンには、WebCore 植字エンジンと JavaScriptCore 解析エンジンが含まれています。これらはどちらも KDE の KHTML エンジンと KJS エンジンから派生したもので、GPL 条約に基づいてライセンスされており、BSD システムの開発をサポートします。したがって、Webkit もフリー ソフトウェアであり、オープン ソースです。セキュリティの面では、IE や Firefox による制限がないため、中国では Safari ブラウザは依然として非常に安全です。 Google の Chrome もカーネルとして Webkit を使用します。 WebKit カーネルは携帯電話でも広く使用されています。たとえば、Google の Gphone や Apple の iPhone で使用されているブラウザ カーネル エンジンはすべて WebKit に基づいています。 win10のIE Edgeも同様です…
* html5の新機能と削除された要素は何ですか？ HTML5 の新しいタグによるブラウザーの互換性の問題にどう対処するか? HTML と HTML5 を区別するにはどうすればよいですか?
HTML5 はもはや SGML のサブセットではなく、主に画像、場所、ストレージ、マルチタスクなどの機能の追加に関するものです。
ペイント キャンバス;
メディア再生用のビデオおよびオーディオ要素;
データの長期保存場所、ブラウザを閉じてもデータは失われません。ブラウザが閉じられた後、
記事、フッター、ヘッダー、ナビゲーション、セクションなどのより良いセマンティクスを持つコンテンツ要素。
新しいテクノロジーの Webworker、WebSocket。 、地理位置情報;
削除された要素:
純粋に表現力豊かな要素: Basefont、big、center、font、s、strike、tt、u;
- 差異: DOCTYPE は、HTML ロゴと HTML5 ロゴを区別するための重要な要素として宣言されています。また、新しい構造と機能要素に従って区別することもできます。
* HTML セマンティクスについての理解を簡単に説明してください。
セマンティック HTML は、コンテンツの構造 (コンテンツ セマンティクス) に準拠し、適切なタグ (コード セマンティクス) を選択する HTML コードであり、開発者がよりエレガントなコードを読み書きできるようにします。機械はそれをうまく解析します。
1. 意味論化はSEOに有益であり、検索エンジンのクローラーがWebページをよりよく理解できるようになり、それによってより効果的な情報を取得し、Webページの重みが増加します。 2. CSSを使わなくてもWebページの構造が明確になり、可読性が向上します。 3. チームの開発とメンテナンスに便利 セマンティックHTMLを使用すると、開発者が理解しやすくなり、チームの効率と調整能力が向上します。
4. 複数の端末デバイスのブラウザレンダリングをサポートします。
HTML5 の重要な機能は、オフライン ストレージです。いわゆるオフライン ストレージは、一部のリソース ファイルをローカルに保存することで、後続のページのリロードでローカル リソース ファイルを使用し、オフラインで Web アプリケーションにアクセスし続けることができます。同時に、特定の方法 (関連ファイルの更新または関連 API の使用) を使用して、オフライン ストレージやその他の操作を更新および削除できます。
: 上記の HTML5 オフライン ストレージは、新しく作成された .appcache ファイルに基づいています。 、このファイルを通じて、サーバー上の解析されたリストにはリソースがオフラインで保存され、これらのリソースは Cookie のように保存されます。その後、ネットワークがオフラインになると、ブラウザーはオフラインで保存されたデータを介してページを表示します。
(1) 以下に示すように、ページ ヘッダーにマニフェスト属性を追加します。
(2) オフライン ストレージ リソースを、cache.manifest ファイルに書き込みます。 app.js
要件の実現。
* ブラウザは HTML5 オフライン ストレージ リソースをどのように管理し、ロードしますか?
オンラインの場合、ブラウザーは HTML ヘッダーにマニフェスト属性があることを検出し、アプリに初めてアクセスする場合、ブラウザーはマニフェスト ファイルを要求します。マニフェスト ファイルの内容をオフラインで保存します。アプリがアクセスされ、リソースがオフラインで保存されている場合、ブラウザーはオフライン リソースを使用してページを読み込み、新しいマニフェスト ファイルと古いマニフェスト ファイルを比較します。ファイルが変更されていない場合は、「いいえ」を実行します。操作が実行され、ファイルが変更されると、ファイル内のリソースが再ダウンロードされ、オフラインで保存されます。
オフラインの場合、ブラウザはオフラインに保存されているリソースを直接使用します。
* Cookie、sessionStorage、localStorage の違いについて説明してください。
共通点: はすべてブラウザ側に保存されており、起源は同じです。
の違い: Cookie データは常に同じオリジンからの http リクエストに含まれます (必要でない場合でも)。つまり、Cookie はブラウザとサーバーの間でやり取りされます。 SessionStorage と localStorage はデータをサーバーに自動的に送信せず、ローカルに保存するだけです。 Cookie データにはパスの概念もあり、Cookie が特定のパスにのみ属するように制限できます。ストレージ サイズの制限も異なります。また、Cookie データは 4K を超えることはできません。同時に、各 http リクエストには Cookie が含まれるため、Cookie はセッション ID などの非常に小さなデータの保存にのみ適しています。 sessionStorage と localStorage にもストレージ サイズ制限がありますが、Cookie よりもはるかに大きく、5M 以上に達する可能性があります。データの有効期間が異なります。 sessionStorage: は現在のブラウザ ウィンドウが閉じられるまでのみ有効で、当然永続化できません。 localStorage: は常に有効で、ウィンドウまたはブラウザが閉じられていても保存されるため、永続化として使用されます。データは Cookie 内にのみ設定され、ウィンドウまたはブラウザが閉じられても有効期限が切れるまで有効です。スコープが異なると、同じページであっても、sessionStorage は異なるブラウザ ウィンドウで共有されません。localStorage は、同じオリジンのすべてのウィンドウで共有されます。 Web Storage は、データ更新の通知をリスナーに送信できるイベント通知メカニズムをサポートしています。 Web Storage の API インターフェイスはさらに使いやすくなりました。
* iframe の長所と短所は何ですか?
iframe の利点: iframe の欠点:
ここまで分析した結果、基本的に iframe の代わりに Ajax が使用されるため、iframe はフロントエンド開発から徐々に撤退していきました。
* ラベルの機能は何ですか?どのように使用されますか? (for または で囲みます)
label label は、入力要素のラベル (マーカー) を定義します。
機能: Label タグにバインドされた要素にアクセスするためのホットキーを表します。ホットキーを押すと、バインドされた要素がフォーカスされます。
* HTML5フォームのオートコンプリート機能をオフにするにはどうすればよいですか?
autocomplete 属性は、フォームでオートコンプリートを有効にするかどうかを指定します。 <form autocomplete="on/off">
off は、オートコンプリートの無効化を指定します。
* ブラウザーの複数のタブ間で通信を実現するにはどうすればよいですか? (Alibaba)
今後の SharedWorker API は、iframe 内、さらにはブラウザーのタブやウィンドウ内でデータを送信できます。数年前に Chrome に、少し前に Firefox に実装されましたが、IE と Safari ではまだ実現できません。
localStorage がイベントをトリガーすることをご存知ですか?具体的には、別の閲覧コンテキストで項目が追加、変更、または削除されるたびに、イベントがトリガーされます。実際、これは、どのブラウザ タブが localStorage にアクセスしても、他のすべてのタブが window オブジェクトを通じてこのイベントをリッスンできることを意味し、タブが localStorage を変更すると、残りのタブのトリガー イベントに影響を与えます。これは、localStorage に値を割り当てている限り、ブラウザーのタブ間で通信できることを意味します。
* webSocket はローエンドのブラウザとどのように互換性がありますか? (Alibaba)
(WebSocketプロトコルはHTML5の新しいプロトコルです。ブラウザとサーバー間の全二重通信を実現します。ブラウザではhttp、cometによる双方向通信しか実現できません。ある程度はシミュレートできますが、効率は低く、適切なサーバーのサポートが必要です。フラッシュのソケットと xmlsocket は真の双方向通信を実現でき、Flex Ajax ブリッジを介してこれら 2 つの関数を JavaScript で使用できることが予測されます。 WebSocket がブラウザーに実装されると、上記の 2 つのテクノロジーに取って代わり、広く使用されるようになります。)
* ページ可視性 API どのような用途に使用できますか?
visibilityState の値を通じてページが現在表示されているかどうか、および Web ページが開かれた時刻などを検出します。
ページが他のバックグラウンド プロセスに切り替わると、音楽またはビデオの再生を自動的に一時停止します。 ;
* ページにログインする方法 画面上に円形のクリック可能領域を実装しますか?
(1) マップ + エリアまたは svg
(2) border-radius
(3) 純粋な JS 実装には、点が円上にあるかどうかを確認したり、マウス座標を取得したりするための単純なアルゴリズムが必要です。
* 実装 境界線を使用せずに 1px の高さの線を描画します。異なるブラウザーの Quirksmode モードと CSSCompat モードでも同じ効果を維持できます。
* Web ページの確認コードは何のために使用されますか? どのようなセキュリティ上の問題がありますか?解決するには？
悪意のある登録とブルートフォースクラッキングを防止します。いわゆる悪意のある登録とブルートフォースクラッキングはすべてソフトウェアを使用して実行されます。 手動登録がどれほど高速であっても、情報を 1 つずつ入力する必要があるため、非常に時間がかかり、基本的にサーバーに影響はありません。ソフトウェアを使用して登録するための認証コードがない場合、数千のスレッドが同時に実行され、一度に数千のユーザーが登録される可能性があるため、サーバーのデータベースはすぐに肥大化し、運用効率が低下します。 退屈な人や競合他社がサイトに対して敵意を持っている場合、この方法では簡単にその人を麻痺させることができます。
* titeとh1の違い、bとstrongの違い、iとemの違いは何ですか？
tilte と h1 の違い
検索エンジンの観点から見ると、title タグはこのページのテーマを説明するために使用され、Web ページの重みの最高点となります。ただし、タイトルタグは記事本文には表示されません。 h1 タグは通常、記事の本文に表示され、訪問者に表示される記事のタイトルになります。したがって、これら 2 つのラベルは対立しないだけでなく、協力関係にあります。記事にはタイトルと h1 タグの両方が必要です。これにより、記事のトピックを強調するだけでなく、タイトルとキーワードも強調表示され、Web サイトの二重最適化の効果が得られます。一般的に、title タグと h1 タグの内容は同じになります。h1 タグが多すぎると、検索エンジンが混乱し、記事の主題を認識しにくくなります。
b と Strong の違い、および i と em の違い
実際、これら 2 つのタグのペアの最大の違いは、1 つは検索エンジン用で、もう 1 つはユーザー用であるということです。例として b タグとstrongタグを使用してみましょう。
bタグとstrongタグは主観的には大胆な印象を与えますが、検索エンジンにとってはbタグと通常のテキストに違いはなく、strongタグは強調の役割を果たします。言い換えれば、検索エンジンにあなたの特定の文が重要であると思わせたい場合は、強力なタグを使用します。ユーザーに太字の効果だけを見てもらいたい場合は、b タグを使用します。同様に、em タグは検索エンジンでも機能し、i タグでは斜体のみが表示されます。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
