序文

2019学校のセッションは、別の募集後、高周波面接の質問の数を整理し始めました。

HTML部分

1. <！DOCTYPE>は何ですか？

DOCTYPE宣言は、HTML5標準のWebページで、HTML文書の最初の行で宣言する必要があります。どのような文書パーサのドキュメント標準ブラウザに指示します。

文書解析タイプは次のとおりです。

BackCompat：Quirksモードでは、ブラウザがページを解析する独自のQuirksモードのレンダリングを使用しています。（DOCTYPEを指定しない場合、これがデフォルトのモードです）
CSS1Compat：標準モードでは、ブラウザがページをW3C標準的な分析レンダリングを使用しています。

2.メタタグ

いくつかのメタ情報のページ（名前/値のペア）を提供するために、SEOに役立ちます。

プロパティ値：

name：名前/値ペアの名前。作成者、説明、キーワード、発電機、改訂された、他の人。名前にコンテンツ属性を関連付けます。
http-equiv：は名前がない場合、このプロパティの値を使用します。コンテンツタイプ、有効期限が切れ、リフレッシュ、セットクッキー。HTTPヘッドにコンテンツ属性を関連付け
content：名前/値のペアは、任意の有効な文字列を指定できます。常には名前またはhttp-equiv属性のプロパティと一緒に使用しました
scheme ：あなたは、プロパティ値を変換するプログラムを指定するために使用します

3. HTMLのセマンティクス

右のラベルに正しいことを行います。
htmlの意味内容は、ページの構造が簡単なブラウザ、検索エンジンの解決に、より明確になるように構成され、
またしても、CSSスタイルケースなしで1つの文書フォーマットで利用できる、と読みやすいです。
また、文脈に依存してエンジンのクローラを検索し、HTMLタグのSEOを支援する各キーワード重みの重量を決定するために、
そこで、Webサイトのソースコードを読んで、メンテナンスを理解し、読みやすい、サイトをブロックする可能性が高くなります。

4.一般的なブラウザのカーネル

トライデントカーネル：IE、Maxthonは、TT、ワード、360、Sogouのブラウザのように。
Gecko-：NETSCAPE6以上、FF、MozillaSuite / SeaMonkeyのような。
プレストカーネル：Opera7以上。[今：ブリンク]
Webkitのコア：そうのSafari、Chromeと。【クロムで：（分岐のWebkit）ブリンク]

ブラウザカーネルの5 Aの簡単な理解

JSのレンダリングエンジンおよびエンジン：それは2つの部分に分かれています。

レンダリングエンジン：ページにコードを変換します。（etc.、CSSを追加するなどのために）メッセージをorganizeウェブページ（HTML、XML、画像など）の内容を取得する責任、およびcalculate pageはdisplayedとmonitorやプリンタに出力されます。レンダリングの効果は同じではありませんので、文法説明ページごとに異なるカーネルブラウザは、異なるものになります。すべてのWebブラウザ、電子メールクライアントや他の人には、カーネルが必要な編集、表示のWebコンテンツ・アプリケーションに必要です。
JSエンジン：あなたのページの動的性能を達成するためにはJavaScriptを解析し、実行します。

当初JSは、レンダリングエンジンと、エンジンが非常に明確に区別していない場合、JSエンジンより多くの独立した、カーネルは、レンダリングエンジンを参照する傾向があります。

新着6. HTML5は、どのような要素を削除しているのですか？新しいラベルHTML5のブラウザの互換性の問題に対処するには？

新機能：

（1）描画するためのキャンバス要素、

媒体（2）はビデオとオーディオ要素の再生、

（3）ローカル・オフライン・ストレージ、データのlocalStorage長期保存のためのよりよいサポートは、データが失われない後、ブラウザが閉じられ、そこであるのsessionStorageブラウザを閉じたときにデータが自動的に削除されます。

（4）など、ヘッダー、NAV、節など、より良いコンテンツ要素の意味論、Articleこの記事は、フッタた;

（5）新しいフォームコントロール：カレンダー、日付、時刻、メール、URL、検索;

（6）新しい技術のwebworker、websockt、ジオロケーション。

要素を削除します。

（1）純粋な素子の性能：BASEFONT、ビッグ、センター、フォント、S、ストライク、TT、U;

（2）負の影響の要素の可用性：フレーム、フレームセット、NOFRAMES。

互換性の理由：

IE8 / IE7 / IE6のサポートのdocument.createElement方法は、ラベルを生成し、これらの新しいブラウザがHTML5タグをサポートするために、この機能を使用することができ、ブラウザが新しいラベルをサポートし、ラベルは、デフォルトのスタイルを追加する必要があります。

SEOの最適化を行うことができ、ラベル7. HTML5？

さておき、タイトル、メタ、ヘッダー、フッター、ナビゲーション、記事、

8. srcと差HREF

SRCは、外部リソースの場所を指して、コンテンツへのポイントは、そのリソースSRCタグリソースのダウンロード要求が向けられ、そのようなJSのスクリプト、IMG画像フレーム及び他の要素のような内部文書に適用される文書内の現在の場所に埋め込まれます。要素へのブラウザ解決さは、それがダウンロードプロセスおよびその他のリソースを一時停止する場合は、コンパイル、実行が完了すると、それは一般的に代わりにヘッドの下部にあるJSスクリプトリソースの負荷を知っています。
HREFは、ネットワーク資源、及び現在の要素（アンカー）またはドキュメント（リンク）との間のリンクの確立が現在ハイパーリンクのために使用される場所です。

9プログレッシブ・エンハンスメントと縮退

渐进增强：最も基本的な機能を確保するために、ブラウザページの低いバージョンのために構築され、その後、効果に、インタラクティブおよびその他改善と高度なブラウザのための追加機能は、より優れたユーザーエクスペリエンスを実現します。
优雅降级：スタートは、ブラウザの低いバージョンと互換性進む前に、完全に機能構築すること。

10.非同期と延期との間の差

defer正常終了のレンダリング（DOM構造が完全に生成されるだけでなく、他のスクリプトの実行が完了すると）、メモリにページ全体まで待つために、それが実行されます。複数の延期スクリプトは、それらがページに表示される順序でロードされます。==「の再レンダリングの実装完全な」==
asyncダウンロードしたら、レンダリングエンジンは、スクリプトの実行後、レンダリング壊し、その後、レンダリングを継続します。複数の非同期スクリプトがロード順序という保証するものではありません。==「の実装にダウンロードした」==

11.どのようにブラウザ内で複数のタブ間の通信を有効にするには？

方法の一つ：コールlocalstorge

タブ1：

<input id="name">  
<input type="button" id="btn" value="提交">

<script type="text/javascript">  
    $(function(){    
        $("#btn").click(function(){    
           var name=$("#name").val();    
            localStorage.setItem("name", name); //存储需要的信息 
        });     
   });    
</script>

タブ2：

$(function(){   
    window.addEventListener("storage", function(event){    
       console.log(event.key + "=" + event.newValue);    
    });     //使用storage事件监听添加、修改、删除的动作  
});

方法2：使用クッキー+のsetInterval

情報は、クッキーに配信されるように格納されたリードクッキー情報が、あなたは定期的に任意の時点で渡される情報を得ることができます。

タブ1：

$(function(){    
    $("#btn").click(function(){    
        var name=$("#name").val();    
        document.cookie="name="+name;    
    });    
});

タブ2：

 $(function(){   
    function getCookie(key) {    
       return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key];    
    }     
    setInterval(function(){    
       console.log("name=" + getCookie("name"));    
    }, 10000);    
});

CSSセクション

1. CSSボックスモデル

IEのボックスモデルボックスのサイズ変更：ボーダー・ボックス;（奇モード）。
W3C標準のボックスモデルボックスのサイズ変更：コンテンツ・ボックス（標準モード）。

シナリオ：

（1）フォーム：
フォームは、いくつかの入力要素を持っているが、それはまだあるショーはいくつかのデフォルトのスタイルではなく、別のプラットフォームでは、伝統的なIEのボックスモデルであるか、ブラウザがショーの形の違いが生じ、異なっています。この時点では、ボックスのサイズ変更プロパティを通じて統一されたスタイルのフォーム要素を構築することができます。

ないようにすることで、要素に境界線のサイズを含むように、境界ボックス：マージン（2）が提供またはサブクラスの境界要素、親レイヤーのサイズは要素を破裂もされている場合、私はボックスのサイズ変更を使用する必要があります層の親要素の存在を破裂。

2.線要素とブロックレベル要素の差？互換性のインラインブロックレベル要素は、でしょうか？（IE8以下）

块级元素：DIV、P、H1、フォーム、UL、李

（1）個別の行は、垂直に配置され、

（2）は、他のブロックレベルまたはインライン要素を含んでいてもよい;

（3）高さ、行の高さとマージンおよびパディングを制御することができる;

（4）それ自体がデフォルト幅の親であります（均一な幅および親要素）にかかわらず、コンテンツの容器の100％が、。

行内元素：スパン、ラベル、入力、IMG、強い、EM

（1）水平に配置されていないラップ;

（2）ブロックレベル要素を含んではならないが、他のインライン要素またはテキストを含んでいてもよい;

エレメントは、空隙高さ（行の高さに設けられていてもよい）、（3）線幅内に配置され、余裕ダウンとパディング無効;

（4）そのテキストと画像の幅である幅は、変更することはできません。

ブロックレベル要素IE8以下の互換性（アナログブロック要素インラインブロック）の行

div {
    display： inline-block；
    zoom： 1；   //在IE下触发hasLayout
    display：inline；//一旦触发了hasLayout设置display：inline和display：block效果相似。
}

haslayoutは 独自のプロパティIE7-ブラウザです。trueまたはfalse：hasLayoutは、2つの状態があり、読み取り専用属性です。それがtrueの場合、要素の代わりに、独自のレイアウトを持つ、または親要素から継承された要素のレイアウトの代わりに。

注：これは、element.currentStyle.hasLayout hasLayoutに現在の要素を締結することができます。

3.インポートスタイルページ、リンクを使用して、違いは何ですか@import？

（1）XHTML、ロードにCSSの他に、リンクタグを、RSSは次のように他のトランザクションを定義することができます; @importのCSSカテゴリは唯一の負荷CSSに属します。

（2）リンクページのロード時にロードされている間、CSSを参照;完全にロードされたページへの@importの必要性をページの後負荷に。

（3）リンクは、XHTMLタグ、互換性の問題である。@importは、ブラウザの低いバージョン（IE5以下）でサポートされていないCSS2.1に提示されています。

（4）リンクは、DOM変化パターンを制御するために使用Javascriptをサポートしています;と@importはサポートされていません。

4.クリアフロートどのような方法？

（1）非浮遊要素は以下フロート追加

<div>
    <div style="float:left;width:45%;"></div>
    <div style="float:right;width:45%;"></div>
    <div style="clear:both;"></div>
</div>

親コンテナが今確かにFLOATED要素の下に表示される非浮動子要素の位置を考慮する必要があり、それが表示され、すべての子要素を配置する親コンテナは、それに含まれています。この方法は簡単ですが、ページ内の冗長タグを高めるために、セマンティックWebの原則に違反します。

（2）親コンテナも変更フロート位置

<div style="float:left;">
    <div style="float:left;width:45%;"></div>
    <div style="float:right;width:45%;"></div>
</div>

このアプローチではない編集HTMLコードが、欠点は、後の浮遊コンテナの父親になったということです、それは背後にある要素の配置に影響を与えます、そして時には、親コンテナが死んで配置され、浮動になることはできません。

（3）親血管のオーバーフローを設定：非表示または自動。（オープンBFC）

<div style="overflow: hidden;">
    <div style="float:left;width:45%;"></div>
    <div style="float:right;width:45%;"></div>
</div>

缺点：A IE6は、他のサブエレメントのサイズは、親コンテナのサイズを超えると、表示が問題となり、サポートされていません。

（4）使用：疑似セレクタの後、自動的に親コンテナ==（これをお勧めします）の終了時にサブ要素を作成する==

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
//兼容ie6：激活父元素的"hasLayout"属性，让父元素拥有自己的布局
.clearfix {
    zoom: 1;  //或者height：1%；
}

簡単なBFCとIFC

BFC - ブロックレベルフォーマットコンテキスト

（1）BFCトリガ条件：

ルート要素または他の要素が含まれ、彼
浮動要素フロート：左/右
位置：絶対/固定
表示：インラインブロック、テーブルセル、テーブルキャプション
オーバーフローは見えません
弾性ボックス：ディスプレイ：フレックスまたはインラインフレックス

（2）BFC特性

垂直方向に配置され次々内部ボックス。
決定垂直距離マージン（オーバーラップの同じ2つの隣接するボックスBFCマージンに所属する方向に関係なく、発生します）。
左マージンボックス要素のそれぞれ、ブロック境界を含む;（適切なフォーマットに左ため、またはその逆）は、左と接触している箱。同じことは、フローティングがある場合も同様です。
BFC領域は、フロート要素の領域と重なりません。
BFCの高さを計算する場合、浮動子要素も計算に関与している、問題の崩壊を解決することができ、親要素の高さ。
BFCは、ページ別の容器に隔離され、容器は素子の外部にサブエレメントの内側に影響を与え、その逆もありません。
文書のBFC要素の流れ、自動車に対する幅は、現在の行の残りの幅を充填します。

（3）アプリケーション

垂直方向に折り畳まれたマージンは、通常のストリーム内の2つの隣接するブロック要素を防ぎます。
BFCは、フローティング要素、伸延親要素を含むことができます。
BFC素子は、フローティング要素を防ぐために覆われていてもよいです。

（4）BFC与hasLayout

IE6-7は、BFCをサポートしていませんが、私有財産のhasLayoutの使用は、ズームを使用：1つのトリガーhasLayoutプロパティを。ズームは、要素の、すなわち、使用、設定するために使用されるか、スケーリング要素を取得し、サイズの実際の値が「1」です。

IFC - インライン書式コンテキスト

（1）が作成しました：

BFCと比較し、それは受動的な方法を作成し、暗黙の、サブ要素に含ま作成されます。のみ水平配向要素、サブ要素がテキストであることができる含む領域にのみ生成されますインラインレベル要素またはインラインブロックレベル要素。

（2）特徴：

IFC内の要素は、左から右へ、上から下へとが配置されています。
IFC内の各要素は、垂直方向のアライメントを調整するために、垂直-alignプロパティによって提供することができます。
内部要素を含む矩形領域は、各列が形成され、行ボックス（行ブロック）と呼ばれます。

6.優先セレクタ

！重要>インラインスタイル> IDセレクタ>クラスセレクタ>タグセレクタ>ワイルドカード>継承

权重算法：（0,0,0,0） - 重要なの最初の数> 0対応し、第二セレクタのIDに対応する番号0、第3のセレクタ対応するクラス0番目です数は、第四のタグ選択に対応する番号0で、現在の体重が一緒量セレクタです。

比较：最初の1と同じ場合は、最初のゼロの比較とスタートは、最初の大きな0ならば、それは第二の比較、およびその上で、高重量の正しい選択です。

水平方向と垂直方向のセンタリングを達成するためにどのよう7.

要素の水平方向の中心線内の（1）

text-align: center;
line-height: 100px;

（2）ブロックレベル要素が水平に中央に配置され

margin: 0 auto;

水平垂直中心の高さ幅を既知の（3）の要素

実現絶対位置と負の余白を使用します

.container{
    width: 600px;
    height: 600px;
    position: relative;
}
.center{
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -150px 0 0 -150px;
}

絶対位置とマージンを使用します

.container{
    width: 600px;
    height: 600px;
    position: relative;
}
.center{
    width: 300px;
    height: 300px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

垂直中心元素の未知の高さと幅のレベル（4）

中央にある要素は、インラインブロック要素やインラインであります

.container{
    width: 600px;
    height: 600px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

transformプロパティをCSS3

.container{
    width: 100%;
    height: 600px;
    position: relative;
}
.center{
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

フレックスレイアウト

.container{
    width: 100%;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}

最も簡単な言葉遣い：

.container{
    display: flex;
    height: 600px;
}
.center{
    margin : auto;
}

8.左右の適応レイアウト幅所定達成します

（1）左のボックス左右ボックス幅= 100％浮い

左側のボックスは、ボックスの左右カセットマージン左=左幅浮上（2）

計算値（100：（3）左のボックスは、右の設定幅をフローティング左右ボックスを浮かべ％ -ボックスの左側幅）

（4）が設けられている親コンテナの表示：フレックス、右カセットフレックス：1

9.約2列のレイアウトの仲介適応、固定幅の幅

2つのストロークは、3列レイアウトを取得 - 聖杯のレイアウトを、フライングウイング

ドキュメントフローのうち10

（1）文書フローのうちフローティング：文書フローのうちフロートを使用する場合、ボックスは、他の要素を無視しますが、この要素は、包囲するための他のテキストボックスにまだ位置を行います。

（2）文書の流れからの絶対位置：使用絶対：位置|文書フロー、および他のテキストボックスから、固定要素が他のボックスでそれを無視します。

11. CSS3の新機能

色：追加RGBA、HSLAモード
テキストの影（テキストシャドウ）
ボーダー：角丸（境界半径）暗い境界：ボックス影
ボックスモデル：ボックスサイズ変更
背景：背景サイズ背景画像セットのサイズ、背景原点は、原点セット背景画像、背景クリップセット背景画像「は、」バックグラウンド・パーティション複数を設定することができる、適応レイアウトする領域をトリミング
グラデーション：線形グラデーション、放射状の勾配
移行：移行は、アニメーションを実現することができます
アニメーション
擬似要素でのみCSS3を導入している::選択を
マルチメディアのお問い合わせ、マルチカラムのレイアウト
ボーダー-画像
2D转换：変換：変換（x、y）の回転（x、y）の傾き（x、y）のスケール（x、y）は
3D変換

12.ディスプレイ：なし;可視性：隠されたが、違いは何ですか？

（1）display:none;等の属性のHTML要素（ターゲット）の幅と高さ、高さ、種々の「失われた」であろう、と考えが存在しない、およびロードされていません。

（2）visibility:hidden;HTML要素（オブジェクト）はそれはまだ高さ、幅等のその属性値を有する、（完全に透明）不可視であり、それは空間位置残るを占めます。

13.応答原則的にレイアウト

メディアクエリ、現在の画面（メディア・メディア）の幅に問い合わせて、別の画面に対応するために異なる画面の幅のための一連の異なるスタイル。

14.フレックスレイアウト

：フレックスレイアウトが二条のルアンYifengの先生を見ることができますFlexのレイアウトチュートリアル：文法、Flexはチュートリアルをレイアウト：例ピース、非常に詳細を。

（1）容器特性に設けられています。

flex-direction：row | row-reverse | column | column-reverse プロジェクトの配列方向
flex-wrap：nowrap | wrap | wrap-reverse かどうかラップ
flex-flow：<flex-direction> || <flex-wrap> フレックス方向とフレックスラップ速記
justify-content：flex-start | flex-end | center | space-between | space-around 水平方向のアライメント
align-items: flex-start | flex-end | center | baseline | stretch 垂直方向に規定の位置合わせ
align-content: flex-start | flex-end | center | space-between | space-around | stretch 複数の軸の位置合わせは、一つのみのプロジェクトであれば、そのプロパティしませんワーク（項目複数の行）軸定義

（2）プロパティ項目上に配置されました

order：<number> 容器内に定義された順序項目は、小さい方の値、より前方に配置、デフォルト値は0であります
flex-basis：<length> | auto 余分なスペースを割り当てる前に定義され、プロジェクトスペースは、スピンドルによって占められる余分なスペースがある場合、このプロパティに基づいて、ブラウザは、スピンドルを計算します
flex-grow: <number>拡大規模プロジェクトを定義します。デフォルト値は、空きスペースがある場合は、拡大しない、すなわち、0であります
flex-shrink: <number>減速比は、プロジェクトを定義します。デフォルト：1、で、スペースが不足している場合、プロジェクトが減少します、負の属性が無効です。
flex：none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]ショートフレックス成長し、フレックス収縮、及びフレックス基礎デフォルト：0 1自動、すなわち拡大されていない、低減することができるが、大きさは、プロジェクト自体のサイズです。
align-self：auto | flex-start | flex-end | center | baseline | stretch 単一のプロジェクトを許可し、他のプロジェクトは、同じアライメントではありません

更新していきます...後に

HTTPの側面についての知識を、私は記事の要約を見ることができます：HTTPプロトコルの知識がまとめ

たJavaScriptの基礎は、これら2つの関連するマインドマップを見ることができます：あなたは（上でJavaScriptを知りませんボリューム）、あなたは最初の部分のボリューム内のJavaScript（）を知らない

第二のボリュームのを、低音量はまだ仕上げています。

前面の質問の2019セッションは、学校の仕上げ--html、CSSの記事を募集します

序文

HTML部分

CSSセクション

おすすめ