フロントエンドの就職の面接HTML関連の質問

Q：（doctypeドキュメントタイプ）の役割は何ですか？

A：ではHTMLは、doctype2つの主な目的を持っています。
- ドキュメントの有効性を確認します。
これは、ユーザーエージェントとバリデーターに、このドキュメントが書かれたDTDを伝えます。このアクションはパッシブです。ページが読み込まれるたびに、ブラウザはDTDをダウンロードして正当性をチェックしません。これは、ページが手動で検証された場合にのみ有効になります。
- ブラウザのレンダリングモードを決定します。
実際の操作については、ドキュメントを読み取るときに使用する分析アルゴリズムをブラウザーに通知してください。記述されていない場合、ブラウザは独自のルールに従ってコードを解析し、HTMLレイアウトに深刻な影響を与える可能性があります。ブラウザがHTMLドキュメントを解析する方法は3つあります。
- 非奇妙な（標準）モード
- 奇妙なモード
- 部分的に変（標準に近い）モード
IEブラウザのドキュメントモード、ブラウザモード、ストリクトモード、奇妙なモード、DOCTYPEタグについて、モードを詳しく読めますか？標準！コンテンツ。
Q：ブラウザの標準モードと奇妙なモードの違いは何ですか？

A：「標準モード」ページは、HTMLとCSSの定義に従ってレンダリングされますが、「Quirksモード」は、以前のバージョンのブラウザーとの互換性のために設計されたブラウザーであり、厳密にはW3Cに準拠していません。標準のWebページから生成されるページレンダリングモード。ブラウザは、ページにファイルタイプの説明が存在するかどうかに基づいて、使用するレンダリングモードを決定します。完全なものが存在する場合DOCTYPE、ブラウザは標準モードを使用し、見つからない場合は、奇妙なモードを使用します。

理解を深めるために読むことを強くお勧めします：HTMLページへのQuirksモードの影響。ブラウザーの標準モードと奇妙なモードの違いは次のとおりです。
1. ボックスモデル：
  
  奇妙なモードでは、ボックスモデルは、標準モードのW3Cボックスモデルではなく、IEボックスモデルです。IEボックスモデルでは、
  ボックス幅=コンテンツの幅+パディング左+パディング右+ボーダー左+ボーダー右、
  ボックス高さ=コンテンツの高さ+上詰め+下詰め+ボーダー上+ボーダー下。
  W3C標準のボックスモデルでは、ボックスのサイズはコンテンツのサイズです。
2. 絵要素の垂直方向の配置：
  
  ためinlineの要素とtable-cell垂直整列IE標準モードにおける要素の属性のデフォルト値ですbaseline。inline要素のコンテンツがtableセルなどの画像のみの場合table-cell。IE互換モードでは、table細胞ピクチャvertical-alignプロパティのデフォルト値はbottom、従って、画像の下部にいくつかのピクセル空間が存在することになります。
3. <table>要素内のフォント：
  
  CSSの説明fontプロパティが有するfont-family、、、、font-size 上記の特性を継承しています。IE互換モードでは、ための要素、いくつかのプロパティは、フォントから削除され、または他の継承された閉鎖要素、特に、プロパティ。font-stylefont-weightablebodytablefont-size
4. インライン要素の寸法：
  
  IE標準モードでは、非置き換えインライン要素サイズは、カスタマイズ、およびIE癖モード、これらの要素の定義ですることができないwidthとheight表示要素の大きさに影響を与えることができます属性。
5. 要素の高さのパーセンテージ：
  
  CSSでの要素の高さの割合は次のように指定されます。割合は要素の包含ブロックの高さであり、負の値にすることはできません。包含ブロックの高さが明示的に指定されていない場合、この値は「auto」と同じです（つまり、コンテンツの高さに依存します）。したがって、親要素に高さが宣言されている場合は、パーセンテージの高さを使用する必要があります。
  
  要素がパーセントの高さを使用する場合、IE標準モードでは高さはコンテンツの変更に依存しますが、互換モードでは、パーセントの高さが正しく適用されます。
6. 要素のオーバーフローの処理：
  
  IE標準モードでは、overflowデフォルト値visibleが使用されます。つまり、オーバーフローが表示されます。この場合、オーバーフローコンテンツはクリップされず、エレメントボックスの外側に表示されます。Quirksモードでは、オーバーフローは拡張として扱われますbox。つまり、要素のサイズはそのコンテンツによって決定され、オーバーフローはクリップされず、要素フレームはオーバーフローコンテンツを含むように自動的に調整されます。
次の資料も参照してください：https : //www.cs.tut.fi/~jkorpela/quirks-mode.html
Q：XHTMLの使用にはどのような制限がありますか？
- ページが「application / xhtml + xml」を使用している場合、問題はありますか？
A：xhtmlの構文は厳密であり、必ず存在しhead、body各domは閉じられている必要があります。空のタグも閉じる必要があります。例えば<img />、<br/>、<input />などが挙げられます。また、属性値には二重引用符を使用します。エラーが発生すると、分析はすぐに停止し、エラーメッセージが表示されます。
ページで「application / xhtml + xml」を使用している場合、一部の古いブラウザは互換性がなくなります。
Q：Webコンテンツが複数の言語をサポートする必要がある場合、どうしますか？
- 多言語ウェブサイトを設計および開発する際に考慮すべき問題は何ですか？
A：コーディングのUTF-8場合、ドメイン名は複数の閲覧アドレスをサポートし、複数のテンプレートセットを準備する必要があります。
多言語ウェブサイトを設計および開発するとき、あなたは考慮する必要があります
- アプリケーション文字セットの選択
- 言語の書き方とナビゲーションの構造
- データベース駆動型のWebサイト
- コンテンツのサイズが異なるため、CSSボックスがずれて表示されます
Q：data-属性の役割は何ですか？

A：data-フロントエンド開発者にカスタムプロパティを提供します。これらのプロパティセットdatasetは、オブジェクトのプロパティを通じて取得できます。このプロパティをサポートしないブラウザは、次のgetAttributeメソッドを通じて取得できます。

<div data-author="david" data-time="2011-06-20" data-comment-num="10">...</div>

div.dataset.commentNum; // 10

data-ハイフンで区切られた複数の単語で構成される属性は、取得時にこぶスタイルを使用することに注意してください。すべてのブラウザがdatasetプロパティをサポートするわけではありません。テストされたブラウザではChromeとOperaのみがサポートされています。

つまり、適切な属性や要素がない場合、カスタムデータ属性は、ページまたはアプリを格納できるプライベートカスタムデータです。

カスタムデータ属性は、ページまたはアプリケーションにプライベートなカスタムデータを格納するためのものであり、適切な属性や要素はありません。
Q：HTML5をオープンプラットフォームと考える場合、その構成要素は何ですか？

A：オープンネットワークプラットフォーム：

Open Web Platformは、Webを可能にするオープン（ロイヤリティフリー）テクノロジのコレクションです。Open Web Platformを使用すると、誰もが承認やライセンス料を放棄することなく、Webのソフトウェアコンポーネントを実装する権利を持ちます。

Open Web Platformは、インターネットを活性化したオープン（著作権フリー）テクノロジのコレクションです。オープンネットワークプラットフォームを使用している場合、誰もが許可や証明書を要求することなく、Webにコンポーネントを実装する権利があります。

HTML5をオープンなWebプラットフォームと見なしてください。そのビルディングブロックは何ですか。いわゆるビルディングブロックは、オープンネットワークプラットフォームのテクノロジーコレクションのテクノロジーを指していると思います。
- HTML
- JUDGMENT
- CSS
- SVG
- MathML
- Web API
  - Canvas WebGL
  - オーディオ
  - Webストレージ
  - ファイル、ファイルシステム
  - 履歴、contentEditable、ドラッグアンドドロップ、HTML編集コマンド
  - Webソケット
  - ウェブワーカー
  - サーバー送信イベント
  - XMLHttpRequest
  - 位置情報、デバイスの向き
  - DOMイベント、タッチイベント、進行イベント
  - カスタムアプリケーション開発
  - クリップボードとイベント
  - Web通知、Webメッセージング
  - Offine Webアプリケーション
  - Media Capture API
  - スクリプトベースのアニメーションのタイミング制御、ページの可視性、ナビゲーション+タイミング、リソースのタイミング
  - セレクター
  - DOMトラバーサル、DOM XPath、要素トラバーサル
  - EcmaScript / JavaScript
  - HTTP
  - URI
  - メディアアクセシビリティチェックリスト
答えは以下から引用されています：http : //witcher42.github.io/2014/06/03/open-web-platform/
Q：cookie、sessionStorage、localStorageの違いを教えてください。

A：sessionStorageとlocalStorageはHTML5 Web Storage APIによって提供され、Webリクエスト間でデータを簡単に保存できます。ローカルデータを使用すると、ブラウザとサーバー間で不必要なデータ転送を回避できます。

SessionStorage、localStorage、cookieはすべてブラウザ側に保存されるデータであり、sessionStorageの概念は非常に特殊であり、「ブラウザウィンドウ」の概念が導入されています。sessionStorageは、同じソースの同じウィンドウ（またはタブ）に常に存在するデータです。つまり、ブラウザウィンドウが閉じていない限り、ページを更新したり、同じソースで別のページを入力したりしても、データは存在し続けます。ウィンドウを閉じると、sessionStorageが破棄されます。同時に、異なるページが「独立して」開かれ、同じページであっても、sessionStorageオブジェクトも異なります

クッキーはサーバーに送信されます。残りの2つはしません。

Microsoftは、Internet Explorer 8がCookieの制限をドメイン名あたり50に増やしたと指摘しましたが、IE7もドメイン名あたり50のCookieを許可するようです。Firefoxでは、ドメインごとに50個のCookieの制限があります。Operaはドメインごとに30個のCookieの制限があります。FirefoxとSafariでは、名前、値、等号を含め、最大4097バイトのCookieを使用できます。Operaでは、名前、値、等号など、最大4096バイトのCookieを使用できます。Internet Explorerでは、名前、値、等号を含め、最大4095バイトのCookieを使用できます。
- クッキー
  - 各ドメイン名のストレージ容量は比較的小さい（ブラウザーごとに、約4K）
  - すべてのドメイン名のストレージ容量は限られています（異なるブラウザー、約4K）
  - 制限があります（ブラウザごとに異なります）
  - リクエストとともにサーバーに送信されます
- ローカルストレージ
  - 永久保管
  - 1つのドメイン名のストレージ容量は比較的大きい（5MBを推奨、ブラウザごとに異なる）
  - 無制限の総数
- SessionStorage
  - セッションでのみ有効
  - より大きなストレージ容量（制限なしに推奨されますが、実際には異なるブラウザー）
説明GETとPOSTの違い？

A：違いは次のとおりです。
- 指定されたリソースから要求データを取得すると、要求されたデータがURLに追加されます。つまり、データは要求行（要求行）に配置され、URLを分割してデータを転送します。複数のパラメーターは＆;で接続されます。
- postは、処理されるデータを指定されたリソースに送信します。getメソッド、クエリリクエストはURLに表示され、長さに制限があり、getメソッドはべき等です。postメソッド要求は、httpメッセージ本文にカプセル化されます

＆	取得する	役職
戻る/更新	無害	再提出のリクエスト
ブックマークする	ブックマーク可能	できない
キャッシュ	キャッシュ可能	キャッシュできません
歴史	ブラウザの履歴に残す	保管しないでください
データ長制限	制限（2048文字）	無制限
安全性	URLで公開されるデータ	比較的安全
可視性	URLに表示	見えない

要約：

getの場合、サーバーからデータをリクエストすることです。リクエストはURLに表示されます。その長さは制限されています（2048文字）。個々のメソッドは安全なべき等です。ここでのセキュリティとは、情報を変更するのではなく情報を取得することを指します。べき等各リクエストで同じ結果を参照します。
投稿の場合、データはサーバーに送信され、更新またはバックアップされるたびに再送信されます。投稿リクエストのデータは、httpリクエストのヘッダーにカプセル化されます。

ヒント：上記の部分に対する答えは次のとおりです。

フロントエンドの就職の面接HTML関連の質問

フロントエンドの就職の面接HTML関連の質問

おすすめ