Doctype は何をしますか?厳密モードと混合モードを区別するにはどうすればよいですか?それらは何を意味するのでしょうか?
doctype は、HTML がどのバージョンで記述されているかをブラウザーに伝え、ブラウザーが神のプロトコルに従って実行できるようにします。
違い: 厳密モードではブラウザーが仕様に従ってページを表示し、プロミスキャス モードは下位互換性のある表示方法です。
意味: ブラウザーが Web サイトをレンダリングする方法、つまり、ブラウザーが Web ページの解析にどの仕様を使用するかを決定します。トリガー: ブラウザは、doctype が存在するかどうか、およびどの dtd が使用されているかに基づいて決定します。
HTML5 なぜ だけを記述する必要があるのでしょうか?
h5 は SGML に基づいていないため、DTD を参照する必要はありません。しかし、Doctype はブラウザの動作を制御する (ブラウザを自分の好きなように実行させる) ために必要です。 html4.0.1 は SGML に基づいており、ドキュメントで使用されているドキュメントの種類をブラウザに伝えるために DTD を参照する必要があります。
🎜>
ページにスタイルをインポートする場合、リンクと @import の使用の違いは何ですか?ページが読み込まれると、リンクは
import は IE5 以降でのみ認識でき、リンクは XHTML タグであるため、@import によって参照される CSS はページが読み込まれるまで待機します。互換性の問題はありません。
リンク スタイルの重みは @import の重みよりも高くなります。
Gecko を使用するブラウザは Mozilla Firefox です。Netscape MozillaSuite/SeaMonkey など、Gecko カーネルを使用するブラウザも多数あります。 >
フォント、センター、ストライク、ビッグ、s、u、頭字語、アプレット、ディレクトリ...
link および a 要素の rev 属性、link 要素の target 属性、td のscope 属性、script 要素の language 属性など、 body 要素の alink、link、text、および vlink 属性...
互換性の問題に対処するには 2 つの方法があります
さらに、DOCTYPE の宣言方法は、HTML と HTML5 マークを区別する重要な要素であり、新しい構造要素と機能要素に基づいて区別することもできます。 (回答参考: http://toutiao.com/a6210139903877480705/)
HTML セマンティクスについての理解を簡単に説明してください (参考)
セマンティック HTML は、コンテンツの構造 (コンテンツ セマンティクス) に準拠し、適切なタグ (コード セマンティクス) を選択する HTML コードで記述され、開発者がよりエレガントに読み書きできるようにします コードは十分に解析されますブラウザのクローラーとマシンによって。
意味論化は SEO に有益であり、検索エンジンのクローラーが Web ページをよりよく理解できるようにすることで、より効果的な情報を取得し、Web ページの重要度を高めます。
CSSなしでもWebページの構造がわかりやすくなり、可読性が向上します。
チーム開発とメンテナンスが容易なセマンティック HTML により、開発者は理解しやすくなり、チームの効率と調整が向上します。
複数の端末デバイスのブラウザ レンダリングをサポートします。
HTML5 オフライン ストレージの使用方法を説明できますか?
sessionStorage オブジェクトは、セッションのデータを保存します。ユーザーがページまたはブラウザを閉じると、データは破棄されます。
localStorage オブジェクトは、有効期限なしでデータを保存する責任があります。このユーザーのブラウザに設定されているストレージ容量に応じて、Web ページまたはブラウザを閉じてもデータは引き続き保存されます。
HTML5 に組み込まれている Web Storage オブジェクトには次の 2 種類があります:
ブラウザは HTML5 オフライン ストレージ リソースをどのように管理し、読み込むのでしょうか?
HTML5 オフライン ストレージは、マニフェスト ファイルを使用して、どのファイルを保存する必要があるかを示します。このファイルのパスは、Rulai を使用して導入することもできます。多数の Web アプリケーションがあり、マニフェスト ファイルを一元管理したい場合は、静的ファイル サーバーが良い選択です。
ユーザーがローカルでインターネットに再度接続すると、ローカルのオフライン ストレージ リソースを更新する必要があるかどうかを確認する必要があります。この更新プロセスは、マニフェスト ファイルが更新されると、ブラウザによって自動的に新しいマニフェスト ファイルが再ダウンロードされます。次回ページが更新されるときにリソース ファイルを再リソースします (3 回目の更新でローカル キャッシュが最新のキャッシュに置き換えられます)。この要求はグローバルです。つまり、マニフェスト キャッシュ リスト内のすべてのファイルが 1 回要求されます。マニフェストではどのファイルが変更されたかがわからないため、特定の変更されたリソース ファイルを個別に要求する必要はありません。
したがって、オフライン ストレージの更新を制御するには 2 つの手順が必要です。1 つはリソース ファイルの更新で、もう 1 つはマニフェスト ファイルの更新ではありません。特定のコンテンツの変更が必要です。このファイルがランダムに変更されている限り、更新されたコンテンツにファイル名が更新されていない場合、ブラウザは通常、リソース ファイルが固定名であることを認識します。マニフェスト ファイルを更新する必要があります。マニフェスト ファイルを操作する方法は? # で始まるコメントを更新することです。その目的は、マニフェスト ファイルが更新されたことをブラウザーに伝えることです。
Cookie、sessionStorage、localStorage の違いについて説明してください。
これらの共通点: これらはすべてブラウザ側に保存され、同じ起源を持っています。
違い: Cookie データは常に同じオリジンからの http リクエストに含まれます (必要でない場合でも)。つまり、Cookie はブラウザとブラウザの間でやり取りされます。サーバー。 SessionStorage と localStorage はデータをサーバーに自動的に送信せず、ローカルに保存するだけです。 Cookie データにはパスの概念もあり、Cookie が特定のパスにのみ属するように制限できます。ストレージ サイズの制限も異なります。また、Cookie データは 4K を超えることはできません。同時に、各 http リクエストには Cookie が含まれるため、Cookie はセッション ID などの非常に小さなデータの保存にのみ適しています。 sessionStorage と localStorage にもストレージ サイズ制限がありますが、Cookie よりもはるかに大きく、5M 以上に達する可能性があります。データの有効期間が異なります。 sessionStorage: は現在のブラウザ ウィンドウが閉じられるまでのみ有効で、当然永続化できません。 localStorage: は常に有効で、ウィンドウまたはブラウザが閉じられていても保存されるため、永続化として使用されます。データ; Cookie は Cookie が設定されている場合にのみ有効であり、ウィンドウまたはブラウザが閉じられている場合でも有効期限まで有効です。スコープが異なると、同じページであっても、sessionStorage は異なるブラウザ ウィンドウで共有されません。localStorage は、同じオリジンのすべてのウィンドウで共有されます。 Web Storage は、データ更新の通知をリスナーに送信できるイベント通知メカニズムをサポートしています。 Web Storage の API インターフェイスはさらに使いやすくなりました。
iframe の欠点は何ですか?
大量のページが生成されるため、管理が容易ではありません
フレームが多いと、上下左右のスクロール バーが表示され、混乱を招く場合があります。これにより、訪問者の注意が散漫になり、ユーザー エクスペリエンスが低下します。
コードは複雑なので、一部の検索エンジンではインデックスを作成できません。これは非常に重要です。そのため、iframe の使用は検索エンジンの最適化に悪影響を及ぼします。
多くのモバイル デバイス (PDA 携帯電話) はフレームを完全に表示できず、デバイスの互換性が低いです
iframe フレーム ページでは http が増加しますサーバーのリクエスト。大規模な Web サイトには推奨されません。
iframe は、埋め込まれた Web ページをそのまま表示できます
iframe を参照している Web ページが複数ある場合は、iframe コンテンツを変更するだけで済みます。呼び出した各ページのコンテンツを簡単かつ迅速に変更できます
Web ページのスタイルを統一したい場合は、ヘッダーとバージョンが同じで、1 つのページとして作成できます, ネストに iframe を使用すると、コードの再利用性が向上します。
iframe はフレームであり、Web ページを埋め込む非常に一般的な方法です
iframe の利点:
iframe の欠点:
Label の機能は何ですか? (追加またはパッケージ化)
FOR 属性
機能: このタグをクリックすると、バインドされた要素がフォーカスを取得します。
使用法:
ACCESSKEY 属性:
機能: Label タグにバインドされた要素にアクセスするためのホットキーを示します。ホットキーを押すと、バインドされた要素がフォーカスされます。
使用法:
制限事項: accessKey 属性によって設定されたショートカット キーは、ブラウザのショートカット キーと競合することはできません。競合しない場合、ブラウザのショートカット キーが最初にアクティブになります。
LABEL を別のコントロールにバインドするには、LABEL 要素の FOR 属性をコントロールと同じ ID に設定します。 LABEL をコントロールの NAME プロパティにバインドしても役に立ちません。ただし、フォームを送信するには、LABEL 要素がバインドされているコントロールの名前を指定する必要があります。
ユーザーが LABEL をクリックすると、まず LABEL の onclick イベントがトリガーされ、次に htmlFor 属性で指定されたコントロールの onclick イベントがトリガーされます。 LABEL で設定されたショートカット キーを押すとフォーカスが設定されますが、onclick イベントはトリガーされません。
ラベルをネストすることはできません
Label には非常に便利な 2 つの属性があります。1 つは FOR で、もう 1 つは ACCESSKEY 。
HTML5フォームのオートコンプリート機能をオフにする方法
フォームのオートコンプリートを「オン」に設定するまたは「off」でオートコンプリート機能をオンまたはオフにします
ブラウザの複数のタブ間で通信を実現するにはどうすればよいですか? (Ali)
この関数は WebSocket API を通じて実装できますが、これは少しやりすぎです。結局のところ、大きなナイフでニワトリを殺す方法はありません。そこで、他のクロス集計コミュニケーション方法を探し始めました。
最初に思いついたのは、次の方法を使用することでした。 cookie または localStorage を使用して、ユーザーが setInterval ログインを渡したかどうかを定期的に確認します。この解決策には満足していません。決して満たされない可能性のある条件をチェックするために多くの CPU サイクルが無駄になるからです。
localStorage がイベントをトリガーすることをご存知ですか?具体的には、別の閲覧コンテキストで項目が追加、変更、または削除されるたびに、イベントがトリガーされます。実際、これは、ブラウザのどのタブにアクセスしても、 localStorage
window.addEventListener('storage', function (event) {
console.log(even) を意味します。 .key,event.newValue);
});
タブが localStorage を変更するタイミングに関係なく、残りのすべてのタグのトリガー イベントも変更されます。これは、localStorage に値を割り当てている限り、ブラウザのタグを越えて通信できることを意味します
webSocket は低位ブラウザとどのように互換性がありますか? (Alibaba)
WebSocket API は、次世代のクライアント/サーバー非同期通信方式です。 WebSocket API の優れた点は、サーバーとクライアントが指定された時間範囲内でいつでも情報を相互にプッシュできることです。 Ajax テクノロジでは、クライアントがリクエストを開始する必要がありますが、WebSocket サーバーとクライアントは相互に情報をプッシュできます。XHR はドメインによって制限されますが、WebSocket はクロスドメイン通信を許可します。
Page Visibility API の用途は何ですか?
この API は、ユーザーに対するページの可視性を検出するために使用できます。つまり、ユーザーが現在閲覧しているページまたはタグのステータス変化を返します
ユーザー エクスペリエンスの向上
Web ページ検証コードは何に使用されますか? どのようなセキュリティ問題を解決するために使用されますか?
ログイン後の不正な情報の一括投稿などのクローラ スクリプト ログイン。
アカウント スキャン スクリプトはユーザー アカウントを激しく検出し、特定のユーザーのパスワードをブルートフォースクラッキングするなど。
バックグラウンドパフォーマンスのボトルネックを伴う機能を頻繁に使用し、過剰なシステム負荷を引き起こす。
検証の追加 コードの主な目的は、ユーザーの権利を保護するために異常なリクエストを減らすことです。いわゆる異常なリクエストは次のとおりです。
title と h1 の違い。 bとstrongの違い、iとemの違いは？
Web サイトの観点から見ると、Web サイトのタイトルは、検索エンジンやユーザーにこのページがどのようなテーマやコンテンツであるかを直接伝えることができます。記事の観点から見ると、ユーザーがコンテンツ ページに入ったときに見たいのは当然記事の内容であり、H1 記事のタイトルが最も重要であり強調されるべきです。 記事には 1 つのタイトルしか含めることができず、各ページに 1 つの H1 を使用するのが最善です。複数の H1 を使用すると、検索エンジンがこのページでどのタイトル コンテンツが最も重要であるかを認識できなくなり、このページのタイトルとキーワードが軽視されます。 、テーマを強調できませんでした。 Web サイトの観点からは、タイトルは Web サイトの情報タイトルよりも重要です。記事の観点からは、H1 は記事のトピックを要約します。 title と h1 はどちらもコード最適化として分類され、どちらも重みタグです。範囲の観点から言えば、title は、ある意味で、title によって表現される重みが h1 よりも高いことを意味します。リストページでは2つのweightタグを併用して解釈することができ、リストページの各情報はh1を使用することができます。
タグは太字のテキスト効果を表示します。 タグは、コンテンツベースのスタイル タグ の物理バージョンですが、後者の拡張された意味はありません。 タグは、その終了タグとの間に囲まれた文字またはテキストを明示的に太字にします。太字フォントが使用できない場合、ブラウザは反転や下線などの他の表現方法を使用します。たとえば、W3school に頻繁にアクセスするユーザーは、多くのチュートリアル ページの概要の最初の文が太字で表示されていることに気づくでしょうが、実際には、この概要には タグが使用されています。このタグを使用する理由は、チュートリアルの概要は、そのページの内容を要約するだけでなく、そのページの最も重要な位置に配置され、その内容は当然非常に重要で価値があると考えているためです。強調。
タグ: 斜体テキスト効果を表示 タグは、それに含まれるテキストを斜体 (斜体) または斜体 (斜体) フォントで表示するようにブラウザーに指示します。 em> タグ:
タグ内のテキストは、すべてのブラウザーの表示効果のために、物理的なマークとして表示されます。タグ
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
