【フロントエンド就活必読】フロントエンド開発面接一問一答_HTML
HTML
Doctype の役割は何ですか? 厳密モードと混合モードを区別するにはどうすればよいですか?どういう意味ですか?
(1)、<!DOCTYPE> 宣言はドキュメント内の最初、<html> タグの前にあります。このドキュメントを解析するためにどのドキュメント タイプ仕様を使用するかをブラウザのパーサーに指示します。
(2)、厳密モードの組版と JS 操作モードは、ブラウザでサポートされる最高の標準に従って実行されます。
(3). 混合モードでは、ページは緩やかな下位互換性のある方法で表示されます。古いブラウザの動作をエミュレートして、サイトが機能しなくなるのを防ぎます。
(4)、DOCTYPE が存在しないか、形式が正しくないため、ドキュメントが混合モードで表示されます。
たとえば、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>
(2) ページが読み込まれると、リンクも同時に読み込まれ、 @import によって参照される CSS は、ページが読み込まれるまで待機してから読み込みます;
(3) import は IE5 以降でのみ認識でき、リンクは XHTML タグであるため、互換性の問題はありません;
(4) リンクスタイル style の重み @import よりも重みが高くなります
# 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 フレームワークです
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode .com/svn/trunk/html5 .js"</script>
<![endif]-->
区別方法: DOCTYPE宣言\新しい構造要素\機能要素
HTML セマンティクスは、ブラウザや検索エンジンによる分析を容易にするためにページのコンテンツを構造化することです。
スタイル CCS を使用しないドキュメント形式でも表示され、読みやすくなります。
検索エンジン クローラーは、タグに依存して個々のキーワードのコンテキストと重みを判断します。これは SEO にとって有益です。
ソース コードを読む人が Web サイトをいくつかのチャンクに分割して、読みやすく、保守しやすく、理解しやすくします。
sessionStorage のデータはブラウザを閉じた後、自動的に削除されます。
はセマンティック デザインの原則に基づいています)
< div id="header">
< h1>タイトル< /h1>
< h2>Web フロントエンド技術に焦点を当てる< /h2>
< /div>
*iframe はメイン ページの Onload イベントをブロックします。
*iframe とメイン ページは接続プールを共有し、ブラウザには同じドメイン内の接続に制限があるため、並列処理に影響します。ページの読み込み中。
iframe を使用する前に、これら 2 つの欠点を考慮する必要があります。 iframe を使用する必要がある場合は、javascript
を通じて src 属性値を iframe に動的に追加するのが最善です。これにより、上記 2 つの問題を回避できます。
Cookie、sessionStorage、localStorage の違いについて説明してください。
Cookie はブラウザとサーバーの間でやり取りされます。 sessionStorage と localStorage は異なります。
sessionStorage と localStorage には、より大きなストレージ スペースがあります。
sessionStorage と localStorage には、より豊富で使いやすいインターフェイスがあります。
sessionStorage と localStorage には、独立したストレージ スペースがあります。
