フロントエンドの面接問題と答え(まとめ)
1.HTML 5はなぜ書くだけなのか
HTML 5はSGML(標準共通タグ言語)に基づいていないのでDTDを参照する必要はないが、ブラウザの動作を規範化するためにdoctypeが必要である(ブラウザがどのような解析方法でドキュメントを解析すべきかを知るようにする).
HTML4.0 SGMLに基づいているため、ブラウザドキュメントで使用するドキュメントタイプを通知するにはDTDを参照する必要がある.
2.行内の要素、ブロック要素、空の要素について説明します.
行内要素:a,span,img,input,select,strong,em,b(マーキング要素)ブロック要素:div,p,ul,li,ol,dd,dt,dl,h 1-h 6 空の要素:hr,br,input,img,link,meta 3.スタイルをインポートする場合、linkと@importの違いを使用します.
linkはXHTMLタグに属し、cssをロードできるほか、SSRを定義し、rel接続属性を定義するなどの役割を果たす.@importはcssが提供するもので、cssスタイルしかロードできない.
ページロード時にlinkが導入するリソースを同時にロードすることができ、@importが導入したcssはページロードが完了するまでロードを行う必要がある.
linkはXHTMLタグで互換性の問題はありませんが、@importはcss 2です.1によると、IE 5以下の低バージョンブラウザでははサポートされていない.
4.HTML 5の意味化の理解を簡単に述べる
cssスタイルがない場合は、ドキュメントの形式で表示され、読みやすいです.
HTML 5の意味化はページの内容を構造化し、構造をより明確にし、ブラウザ、検索エンジンの解析に便利である.
スクリーンリーダーを使用して、タグに基づいてWebサイトにアクセスするのに役立つ視覚障害者
チームの開発とメンテナンスに役立つSEOに有利:爬虫類がより多くの有効な情報をつかむのに便利5.クッキー、localStorage、sessionStorageの違いを説明する
クッキーは、クライアントがサービス側と通信するために用いるものであり、記憶機能があるため、情報を記憶するために借用され、クッキーデータは常に同源http要求においてを携帯する.
localStorageおよびsessionStorageは、サーバに自動的にデータを送信せず、ローカルストレージのみを格納します.
ストレージ・サイズ
クッキーは4 kしかありません.一方、localStorageとsessionStorageは5 M以上のに達することができます.
有効期限
クッキーは設定の有効期限まで有効であり、localStorageは長期的に有効であり、ユーザーが自発的にデータを削除しない限り、ブラウザを閉じるデータは失われない.
セッションストアデータは、現在のブラウザウィンドウが閉じた後に自動的に削除されます.
6.borderを使わずに1 pxの高い線を描くことで、異なるブラウザで標準モードと怪異モードで一致する効果を実現
7.ウェブ認証コードの役割と解決する安全問題
ユーザーが人間か機械かを区別し、パスワードの悪意のある解読、切符のブラシなどを防止することができる.ハッカーが特定の登録ユーザーに対して暴力的に解読する方法でログインを試みることを防止することができる.
8.data-属性の役割
Data-*は、ページまたはアプリケーションのプライベートカスタムデータを格納するために使用され、すべてのhtml要素にdata-カスタム属性を埋め込むことができ、jsによってデータを操作するために利用することができる.
注意:data属性は小文字であるべきで、data-の後に少なくとも1つの文字が必要で、dataだけを使用することはできません.data属性値は任意の文字列であってもいいです.
9.HTML 5の新しい特性、削除された要素について(HTML 5について)
新しい機能:
ペイントcanvas メディア再生用のビデオ、audio要素ローカルオフラインlocaStorageは長期にわたってデータを格納し、ブラウザが閉じた後にデータが失われないsessionStorageブラウザが閉じた後にデータが自動的に削除されるフォームコントロール:data、email、search、url、calendar、time 意味化ラベル:header、footer、nav、section、article 新しいテクノロジー:webworker、websocket、Geolocation 除去された要素
純表現要素:basefont、center、font、big、u、tt、strike、s 可用性に悪影響を及ぼす要素:frame、frameset、noframes CSS
1.標準的なボックスモデルとIEの怪異なボックスモデルを紹介する
w 3 c標準ボックスモデル:contentのwidthが設定されたwidth IE怪異箱モデル:contentのwidthはborderとpadding を含む
2.css優先度計算
優先度近接の原則は、同じ重みの場合のスタイルの最近接者の優先度がより高い.
!import > id > class > tag
!importは、インラインスタイルよりも優先度が高い3.cssファイルがなぜresetなのかを簡単に説明する
ブラウザの種類が多く、ブラウザのデフォルトスタイルによって異なり、reset統一ブラウザのスタイルが必要です
4.2つのdivを水平にレイアウトする方法
flexレイアウトの使用:親要素設定:display:flex フローティングレイアウトを使用する(またはdisplay:inline-blockを使用する)
HTML 5はSGML(標準共通タグ言語)に基づいていないのでDTDを参照する必要はないが、ブラウザの動作を規範化するためにdoctypeが必要である(ブラウザがどのような解析方法でドキュメントを解析すべきかを知るようにする).
HTML4.0 SGMLに基づいているため、ブラウザドキュメントで使用するドキュメントタイプを通知するにはDTDを参照する必要がある.
2.行内の要素、ブロック要素、空の要素について説明します.
行内要素:a,span,img,input,select,strong,em,b(マーキング要素)ブロック要素:div,p,ul,li,ol,dd,dt,dl,h 1-h 6 空の要素:hr,br,input,img,link,meta 3.スタイルをインポートする場合、linkと@importの違いを使用します.
linkはXHTMLタグに属し、cssをロードできるほか、SSRを定義し、rel接続属性を定義するなどの役割を果たす.@importはcssが提供するもので、cssスタイルしかロードできない.
ページロード時にlinkが導入するリソースを同時にロードすることができ、@importが導入したcssはページロードが完了するまでロードを行う必要がある.
linkはXHTMLタグで互換性の問題はありませんが、@importはcss 2です.1によると、IE 5以下の低バージョンブラウザでははサポートされていない.
4.HTML 5の意味化の理解を簡単に述べる
cssスタイルがない場合は、ドキュメントの形式で表示され、読みやすいです.
HTML 5の意味化はページの内容を構造化し、構造をより明確にし、ブラウザ、検索エンジンの解析に便利である.
スクリーンリーダーを使用して、タグに基づいてWebサイトにアクセスするのに役立つ視覚障害者
チームの開発とメンテナンスに役立つSEOに有利:爬虫類がより多くの有効な情報をつかむのに便利5.クッキー、localStorage、sessionStorageの違いを説明する
クッキーは、クライアントがサービス側と通信するために用いるものであり、記憶機能があるため、情報を記憶するために借用され、クッキーデータは常に同源http要求においてを携帯する.
localStorageおよびsessionStorageは、サーバに自動的にデータを送信せず、ローカルストレージのみを格納します.
ストレージ・サイズ
クッキーは4 kしかありません.一方、localStorageとsessionStorageは5 M以上のに達することができます.
有効期限
クッキーは設定の有効期限まで有効であり、localStorageは長期的に有効であり、ユーザーが自発的にデータを削除しない限り、ブラウザを閉じるデータは失われない.
セッションストアデータは、現在のブラウザウィンドウが閉じた後に自動的に削除されます.
6.borderを使わずに1 pxの高い線を描くことで、異なるブラウザで標準モードと怪異モードで一致する効果を実現
<div style="height: 1px;overflow:hidden;">div>7.ウェブ認証コードの役割と解決する安全問題
ユーザーが人間か機械かを区別し、パスワードの悪意のある解読、切符のブラシなどを防止することができる.ハッカーが特定の登録ユーザーに対して暴力的に解読する方法でログインを試みることを防止することができる.
8.data-属性の役割
Data-*は、ページまたはアプリケーションのプライベートカスタムデータを格納するために使用され、すべてのhtml要素にdata-カスタム属性を埋め込むことができ、jsによってデータを操作するために利用することができる.
注意:data属性は小文字であるべきで、data-の後に少なくとも1つの文字が必要で、dataだけを使用することはできません.data属性値は任意の文字列であってもいいです.
9.HTML 5の新しい特性、削除された要素について(HTML 5について)
新しい機能:
ペイントcanvas メディア再生用のビデオ、audio要素ローカルオフラインlocaStorageは長期にわたってデータを格納し、ブラウザが閉じた後にデータが失われないsessionStorageブラウザが閉じた後にデータが自動的に削除されるフォームコントロール:data、email、search、url、calendar、time 意味化ラベル:header、footer、nav、section、article 新しいテクノロジー:webworker、websocket、Geolocation 除去された要素
純表現要素:basefont、center、font、big、u、tt、strike、s 可用性に悪影響を及ぼす要素:frame、frameset、noframes CSS
1.標準的なボックスモデルとIEの怪異なボックスモデルを紹介する
w 3 c標準ボックスモデル:contentのwidthが設定されたwidth IE怪異箱モデル:contentのwidthはborderとpadding を含む
2.css優先度計算
優先度近接の原則は、同じ重みの場合のスタイルの最近接者の優先度がより高い.
!import > id > class > tag
!importは、インラインスタイルよりも優先度が高い3.cssファイルがなぜresetなのかを簡単に説明する
ブラウザの種類が多く、ブラウザのデフォルトスタイルによって異なり、reset統一ブラウザのスタイルが必要です
4.2つのdivを水平にレイアウトする方法
flexレイアウトの使用:親要素設定:display:flex フローティングレイアウトを使用する(またはdisplay:inline-blockを使用する)
// html
<div class="box">
<div class="left">fffdddf
//css
.left{
float: left;
background: red;
/*display: inline-block;*/
}
.right{
overflow: hidden;
background: green;
/*display: inline-block;*/
}
5.左固定幅、右適応
左の定幅+フローティングwidth:300 pxを設定します.float:left;右側にoverflow:hidden(またはmargin-left:左の幅)を設定します.
親要素設定display:flex;左にwidth:300 pxを設定します.右側にflex-grow:1 を設定
親要素設定display:table;左にwidth:300 pxを設定します.右側にdisplayを設定します:table-cell;width:100%;
親要素設定position:relative;左にpositionを設定:absolute;width:300px;右側にmargin-leftを設定:左の幅6.2つのdivは2つの列のレイアウトを完成します:要求の高さは不定です(親要素も)、2つのdivはリアルタイムで等高です(左のdivの高さは布団要素が高くなったとき、右のdivの高さは左と一致します)
親要素設定display:table;右側の設定:display:table-cell 親要素設定display:flex;右側にflex-grow:1 を設定
7.左右両側幅固定、中間適応を実現
左右のフローティングレイアウトを使用して、中央にレイアウトを配置します.この場合、中央divは右フローティングの下に配置します(centerのdivは通常のドキュメントストリームで全画面幅を占めているため、右側のフローティング要素は次の行に配置されます).
//css
.left{
float: left;
background: red;
/*display: inline-block;*/
}
.right{
overflow: hidden;
background: green;
/*display: inline-block;*/
}
5.左固定幅、右適応
左の定幅+フローティングwidth:300 pxを設定します.float:left;右側にoverflow:hidden(またはmargin-left:左の幅)を設定します.
.left{
float: left;
width: 300px;
background: red;
}
.right{
overflow: hidden;
background: green;
}親要素設定display:flex;左にwidth:300 pxを設定します.右側にflex-grow:1 を設定
親要素設定display:table;左にwidth:300 pxを設定します.右側にdisplayを設定します:table-cell;width:100%;
親要素設定position:relative;左にpositionを設定:absolute;width:300px;右側にmargin-leftを設定:左の幅6.2つのdivは2つの列のレイアウトを完成します:要求の高さは不定です(親要素も)、2つのdivはリアルタイムで等高です(左のdivの高さは布団要素が高くなったとき、右のdivの高さは左と一致します)
親要素設定display:table;右側の設定:display:table-cell 親要素設定display:flex;右側にflex-grow:1 を設定
7.左右両側幅固定、中間適応を実現
左右のフローティングレイアウトを使用して、中央にレイアウトを配置します.この場合、中央divは右フローティングの下に配置します(centerのdivは通常のドキュメントストリームで全画面幅を占めているため、右側のフローティング要素は次の行に配置されます).
// html
<div class="box">
<div class="left">fffddddd