【フロントエンド就活必読】フロントエンド開発面接一問一答

HTML

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

(1)、<!DOCTYPE> 宣言はドキュメント内の最初、<html> タグの前にあります。このドキュメントを解析するためにどのドキュメントタイプ仕様を使用するかをブラウザのパーサーに指示します。

(2)、厳密モードの組版と JS 操作モードは、ブラウザでサポートされる最高の標準に従って実行されます。

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

(4)、DOCTYPE が存在しないか、形式が正しくないため、ドキュメントが混合モードで表示されます。

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

(1) CSS 仕様では、各要素には要素の型を決定する表示属性があることが規定されており、各要素にはデフォルトの表示値があります。

たとえば、div のデフォルトの表示属性値は次のようになります。 "block" は、"ブロックレベル" 要素になります。
スパンのデフォルトの表示属性値は "inline" で、これは "インライン" 要素です。

(2) インライン要素には以下が含まれます: a b span img input select Strong (強調トーン)
ブロックレベル要素には以下が含まれます: div ul ol li dl dt dd h1 h2 h3 h4…p

(3) よく知られている空要素:
<br> <hr> <img> <input> <link> <meta>
あまり知られていない要素:
<area> ; <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

link and@ Whatインポートとの違いは何ですか？

(1) リンクは XHTML タグに属し、@import は CSS によって提供されます;

(2) ページが読み込まれると、リンクも同時に読み込まれ、 @import によって参照される CSS は、ページが読み込まれるまで待機してから読み込みます;

(3) import は IE5 以降でのみ認識でき、リンクは XHTML タグであるため、互換性の問題はありません;

(4) リンクスタイル style の重み @import よりも重みが高くなります

ブラウザのカーネルとは何ですか?

* IE ブラウザのカーネルTrident、Mozilla の Gecko、Chrome の Blink (WebKit ブランチ)、Opera カーネルは元々 Presto でしたが、現在は Blink です;

一般的な互換性の問題?

# png 24 ビット画像が iE6 ブラウザの背景として表示されます。解決策は、それを PNG8 にすることです。

* ブラウザのデフォルトのマージンとパディングは異なります。解決策は、グローバル *{margin:0;padding:0;} を追加して統合することです。

* IE6 の二重マージンのバグ: ブロック属性ラベルがフローティングされ、水平方向のマージンがあると、IE6 で表示されるマージンが設定値よりも大きくなります。

フローティング IE によって生成される 2 倍の距離 #box{ float:left; width:10px; margin:0 0 0 10px;}

この場合、IE は 20px の距離を生成します。解決策は、フロートラベルスタイルコントロールに -_display:inline; を追加して、それをインライン属性に変換することです。 (_この記号はie6でしか認識できません)

段階的に認識する方法では、全体から部分を徐々に排除していきます。

まず、「\9」マークを上手に使って、IE ブラウザとあらゆる状況を区別します。
次に、再度「」を使用して IE8 を IE7 および IE6 から分離し、IE8 が独立して認識されるようにします。

css
.bb{
background-color:#f1ee18;/*すべての認識*/
.background-color:#00deff\9; /*IE6、7、8 の認識*/
background-color:#a200ff;/*IE6, 7 の認識*/
_background-color:#1e0bd1;/*IE6 の認識*/
}

* IE では、通常の属性を取得するメソッドを使用してカスタム属性を取得できます。
getAttribute() を使用してカスタム属性を取得することもできます。
Firefox では、getAttribute() を使用してカスタム属性を取得することしかできません。解決策: getAttribute() を通じてカスタム属性を統合して取得します。

* IE では、even オブジェクトには x、y 属性がありますが、pageX、pageY 属性はありません;
Firefox では、イベントオブジェクトには pageX、pageY があります

* 解決策: (条件付きコメント) 欠点は、IE ブラウザで追加の HTTP リクエストが追加される可能性があることです。

* Chrome 中国語インターフェイスでは、デフォルトで 12 ピクセルより小さいテキストが 12 ピクセルで表示されるように強制されます。
これは、CSS プロパティ -webkit-text-size-adjust: none; ## を追加することで解決できます。
# ハイパーリンクにアクセスすると、ホバースタイルが表示されなくなります。クリックして訪問したハイパーリンクスタイルはホバー表示されなくなり、アクティブになりません。解決策は、CSS 属性の順序を変更することです:
L-V-H-A: a: link {} a:visited {} a :hover {} a:active {}

HTML5 の新機能と削除された要素は何ですか? HTML5 の新しいタグによるブラウザーの互換性の問題にどう対処するか? HTML と HTML5 を区別するにはどうすればよいですか?

* HTML5 はもはや SGML のサブセットではなく、主に画像、場所、ストレージ、マルチタスク、その他の機能の追加を目的としています。

* ペイントキャンバス
メディア再生用のビデオおよびオーディオ要素
ローカルオフラインストレージ localStorage データの長期保存。ブラウザを閉じてもデータは失われません。
sessionStorage データブラウザを閉じると閉じられます

記事、フッター、ヘッダー、ナビゲーション、セクションなど、より適切なセマンティクスを持つコンテンツ要素を自動的に削除します
フォームコントロール、カレンダー、日付、時刻、電子メール、URL、検索
新しいテクノロジー webworker、websockt、Geolocation

* 削除された要素

純粋に表現力豊かな要素:basefont、big、center、font、s、strike、tt、u;

Yes ユーザビリティに悪影響を与える要素:frame、frameset、noframes;

HTML5 の新しいタグのサポート:

* IE8/IE7/IE6 は document.createElement メソッドによって生成されたタグをサポートします。この機能を使用して、これらのブラウザが HTML5 の新しいタグをサポートできるようにします。

ブラウザが新しいタグをサポートした後、タグのデフォルトのスタイルを追加する必要があります:

* もちろん、成熟したタグを直接使用する方法です。最も一般的に使用されるフレームワークは html5shim フレームワークです

区別方法: DOCTYPE宣言\新しい構造要素\機能要素

意味は理解できますか?

正しいことを行うには、正しいタグを使用してください。

HTML セマンティクスは、ブラウザや検索エンジンによる分析を容易にするためにページのコンテンツを構造化することです。
スタイル CCS を使用しないドキュメント形式でも表示され、読みやすくなります。
検索エンジンクローラーは、タグに依存して個々のキーワードのコンテキストと重みを判断します。これは SEO にとって有益です。
ソースコードを読む人が Web サイトをいくつかのチャンクに分割して、読みやすく、保守しやすく、理解しやすくします。

HTML5 のオフラインストレージ?

localStorage はデータの長期保存であり、ブラウザを閉じてもデータは失われません。

sessionStorage のデータはブラウザを閉じた後、自動的に削除されます。

(書き込み) セマンティクスの一部を記述する HTML コード。

(HTML5 で追加された多くの新しいタグ (<article>、<nav>、<header>、<footer> など)

はセマンティックデザインの原則に基づいています)
< div id="header">
< h1>タイトル< /h1>
< h2>Web フロントエンド技術に焦点を当てる< /h2>
< /div>

iframe の欠点は何ですか?

*iframe はメインページの Onload イベントをブロックします。

*iframe とメインページは接続プールを共有し、ブラウザには同じドメイン内の接続に制限があるため、並列処理に影響します。ページの読み込み中。
iframe を使用する前に、これら 2 つの欠点を考慮する必要があります。 iframe を使用する必要がある場合は、javascript
を通じて src 属性値を iframe に動的に追加するのが最善です。これにより、上記 2 つの問題を回避できます。

Cookie、sessionStorage、localStorage の違いについて説明してください。

Cookie はブラウザとサーバーの間でやり取りされます。 sessionStorage と localStorage は異なります。
sessionStorage と localStorage には、より大きなストレージスペースがあります。
sessionStorage と localStorage には、より豊富で使いやすいインターフェイスがあります。
sessionStorage と localStorage には、独立したストレージスペースがあります。