H 5ノートの復習
5687 ワード
CSS復習強化
1、あなたが作ったページはどんな閲覧器でテストしたことがありますか.これらのブラウザのカーネルはそれぞれ何ですか?1.IE:tridentカーネル2.Firefox:geckoカーネル3.Safari:webkitカーネル4.Opera:以前はprestoカーネルでしたが、OperaはGoogle 5に変更されました.ChromeのBlinkカーネル(webkitベース、GoogleとOpera Software共同開発)
2、HTMLファイルごとに冒頭に重要なものがありますが、Doctype、何をしているか知っていますか?ドキュメントの一番前にある場所を宣言します.ラベルの前にあります.このラベルは、ブラウザドキュメントで使用されるHTMLまたはXHTML仕様を示します.(ポイント:ブラウザにどのような仕様でページを解析するかを教える)3、厳格なモードとは何ですか.厳格なモードはどうやって使いますか?Javascript構文の不合理さ、厳格さを解消し、奇妙な行為を減らす.-コード実行のいくつかの不安全な点を解消し、コード実行の安全を保証します.-コンパイラの効率性を向上させ、実行速度を向上させる.-将来の新しいバージョンのJavascriptのために敷き詰めます."use strict"; 厳格なモードに入る4、なぜ複数のドメイン名を利用してウェブサイトのリソースを格納するのがより効果的なのかを示しています.*CDNキャッシュの方が便利*ブラウザの同時制限を突破*クッキー帯域幅を節約*メインドメイン名の接続数を節約、ページ応答速度を最適化*不要なセキュリティ問題を防止5、cookies、sessionStorageとlocalStorageの違いを説明してください.sessionStorageは、同じセッション内のページにのみアクセスでき、セッションが終了するとデータも破棄されるセッション内のデータをローカルに格納するために使用されます.したがって、sessionStorageは永続的なローカルストレージではなく、セッションレベルのストレージにすぎません.一方、localStorageは、データをアクティブに削除しない限り、永続化されたローカルストレージに使用されます.データは期限切れになりません.Web storageとクッキーの違いWeb Storageの概念はクッキーと似ており、違いはより大きな容量のストレージのために設計されていることです.Cookieのサイズは制限されており、新しいページを要求するたびにCookieが送信されます.これにより、帯域幅が無形に浪費されます.また、cookieは役割ドメインを指定する必要があります.ドメイン間で呼び出すことはできません.このほか、Web StorageにはsettItem、getItem、removeItem、clearなどの方法があり、クッキーのようにフロントエンド開発者がsetCookie、getCookieを自分でカプセル化する必要はありません.しかし、Cookieも欠かせません.Cookieの役割はサーバと対話することであり、HTTP仕様の一部として存在しますが、Web Storageはローカルでデータを「格納」するためにのみ生成されます.6、srcとhrefの違いを簡単に述べる.srcは現在の要素を置き換え、hrefは現在のドキュメントと参照リソースの間で連絡を確立するために使用されます.srcはsourceの略で、外部リソースの位置を指し、指す内容はドキュメントの現在のラベルの位置に埋め込まれます.srcリソースを要求すると、jsスクリプト、imgピクチャ、frameなどの要素などのドキュメントにダウンロードされ、適用されます.
ブラウザが要素を解析すると、そのリソースをロード、コンパイル、実行が完了するまで、他のリソースのダウンロードと処理が一時停止します.ピクチャやフレームワークなどの要素も、現在のラベルに指定したリソースを埋め込むのと同じです.これもjsスクリプトを頭ではなく下に置く理由です.
hrefは、Hypertext Referenceの略で、ネットワークリソースが存在する場所、確立および現在の要素(アンカーポイント)、または現在のドキュメント(リンク)へのリンクを指します.ドキュメントに
を追加すると、ブラウザはドキュメントがcssファイルであることを認識します.リソースは並列にダウンロードされ、現在のドキュメントの処理は停止しません.@import方式ではなくlink方式でcssをロードすることをお勧めします.
7、知っているページ作成に使う画像フォーマットはどれらがありますか?
png-8,png-24,jpeg,gif,svg,WebP .
8、css/jsコードがオンラインになった後、開発者はパフォーマンスを最適化することがよくあります.ユーザーがWebページをリフレッシュすることから、jsリクエストが一般的にキャッシュ処理される場所は何ですか?
dnsキャッシュ
cdnキャッシュ
ブラウザキャッシュ
サーバキャッシュ
1ページに大量の画像(大手電子商取引サイト)があり、ロードが遅いので、これらの画像のロードを最適化し、ユーザーにより良い体験を与える方法はありますか.b>
画像をリロードし、ページ上の非可視領域にスクロールバーイベントを追加して、画像の位置とブラウザの先端の距離とページの距離を判断し、前者が後者より小さい場合は優先的にロードします.
スライドやアルバムなどの場合は、画像プリロード技術を使用して、現在展示されている画像の前と後を優先的にダウンロードできます.
ピクチャがcssピクチャであればCSSsprite,SVGsprite,Iconfont,Base 64などの技術を用いることができる.
画像が大きすぎる場合は、特殊な符号化された画像を使用することができ、ロード時に圧縮された特にすごいサムネイルをロードして、ユーザー体験を高めることができます.
画像表示領域が画像の実際のサイズより小さい場合、サーバ側で業務の必要に応じて先に画像圧縮を行うため、画像圧縮後のサイズは表示と一致する.
10、CSSで定義できる属性は、ブラウザの表示範囲内にDOM要素が表示されないようにしますか?
11、
最も基本的なのは、
display属性をnone、またはvisibility属性をhidden
に設定するテクニック:
幅を0、透明度を0、z-index位置を-1000に設定する
12、ハイパーリンクアクセス後にhoverスタイルが現れない問題は何ですか?どのように
クリックしてアクセスされたハイパーリンクスタイルがhoverとactiveを持っていないことを解決して、解決方法はCSS属性の配列順序を変えることです:L-V-H-A(link,visited,hover,active)
13、Css Hackとは何ですか?ie 6,7,8のhackはそれぞれ何なのか
異なるブラウザに対して異なるCSSコードを書く過程をCSS Hackと呼ぶ.
14、簡単なスライド効果ページをCssで書いてください
CSS 3の新しい属性を使って、アニメーションを実現します.
15、display:noneとvisibility:hiddenの違いは何ですか?
display:対応する要素を非表示にし、その要素の元の空間を占有しません.
visibility:対応する要素を非表示にし、その要素の元の空間を占有します.
つまり、CSSディスプレイ:none属性を使用すると、HTML要素(オブジェクト)の幅、高さなどの各種属性値が「失われる」.visibility:hiddenプロパティを使用すると、HTML要素(オブジェクト)は視覚的に見えない(完全に透明)だけで、その占有する空間位置は依然として存在します.
16、htmlの意味化とは何か
ページスタイルのロードに失敗した場合にページを明確な構造にすることができる
seo最適化に有利であり、検索エンジンに収録されるのに有利である(検索エンジンの爬虫類プログラムで識別しやすい)
プロジェクトの開発とメンテナンスに便利であり、htmlコードをより読みやすくし、他のデバイスの解析に便利である.
17、htmlのよくある互換性の問題?
1. ダブルピッチBUG floatによる使用display
2.3画素問題floatによるdislpay:inline-3 px
3.ハイパーリンクhoverクリックして無効にする正しい書き込み順序link visited hover active
4.le z-index問題親にpositionを追加:relative
5.Png透明はjsコードを用いて
6を変更する.Min-height最小高さ!Important解決'
7.selectはie 6の下でiframeネストを用いる
8を隠す.なぜ1 px程度の幅を定義できないのか(IE 6のデフォルトの行高によるover:hidden,zoom:0.08 line-height:1 px)
9.IE 6はPNGの透明な背景をサポートしないで、解決方法:IE 6の下でgifピクチャー18を使用して、WEB標準とW 3 Cに対する理解と認識 ラベルが閉じて、ラベルが小文字で、むやみにネストしないで、検索ロボットの検索確率を高めて、外鎖cssとjsスクリプトを使用して、構造行為の表現の分離、ファイルのダウンロードとページの速度がもっと速くて、内容はもっと多くのユーザーにアクセスすることができて、コンテンツはより広範なデバイスにアクセスされ、コードとコンポーネントが少なく、メンテナンスが容易で、改版が容易で、ページの内容を変更する必要がなく、印刷バージョンを提供し、コンテンツをコピーする必要がなく、ウェブサイトの使いやすさを高めることができます.
19、CSSセレクタはどれらがありますか?継承できる属性はどれですか?優先度アルゴリズムはどのように計算しますか?CSS 3の新しい擬似クラスはどれらがありますか?
1. idセレクタ(#myid)
2.クラスセレクタ(.myclassname)
3.ラベルセレクタ(div,h 1,p)
4.隣接セレクタ(h 1+p)
5.サブセレクタ(ul<li)
6.子孫選択器(li)
7.ワイルドカードセレクタ(*)
8.属性セレクタ(a[rel="external")
9.擬似クラスセレクタ(a:hover,li:nth-child)
JS復習強固
1、データ型
1.数値タイプnumber
2.文字列タイプstring
3.ブールタイプboolean
4.undefinedタイプ
5.nullタイプ空
6.オブジェクトobject
1、あなたが作ったページはどんな閲覧器でテストしたことがありますか.これらのブラウザのカーネルはそれぞれ何ですか?1.IE:tridentカーネル2.Firefox:geckoカーネル3.Safari:webkitカーネル4.Opera:以前はprestoカーネルでしたが、OperaはGoogle 5に変更されました.ChromeのBlinkカーネル(webkitベース、GoogleとOpera Software共同開発)
2、HTMLファイルごとに冒頭に重要なものがありますが、Doctype、何をしているか知っていますか?ドキュメントの一番前にある場所を宣言します.ラベルの前にあります.このラベルは、ブラウザドキュメントで使用されるHTMLまたはXHTML仕様を示します.(ポイント:ブラウザにどのような仕様でページを解析するかを教える)3、厳格なモードとは何ですか.厳格なモードはどうやって使いますか?Javascript構文の不合理さ、厳格さを解消し、奇妙な行為を減らす.-コード実行のいくつかの不安全な点を解消し、コード実行の安全を保証します.-コンパイラの効率性を向上させ、実行速度を向上させる.-将来の新しいバージョンのJavascriptのために敷き詰めます."use strict"; 厳格なモードに入る4、なぜ複数のドメイン名を利用してウェブサイトのリソースを格納するのがより効果的なのかを示しています.*CDNキャッシュの方が便利*ブラウザの同時制限を突破*クッキー帯域幅を節約*メインドメイン名の接続数を節約、ページ応答速度を最適化*不要なセキュリティ問題を防止5、cookies、sessionStorageとlocalStorageの違いを説明してください.sessionStorageは、同じセッション内のページにのみアクセスでき、セッションが終了するとデータも破棄されるセッション内のデータをローカルに格納するために使用されます.したがって、sessionStorageは永続的なローカルストレージではなく、セッションレベルのストレージにすぎません.一方、localStorageは、データをアクティブに削除しない限り、永続化されたローカルストレージに使用されます.データは期限切れになりません.Web storageとクッキーの違いWeb Storageの概念はクッキーと似ており、違いはより大きな容量のストレージのために設計されていることです.Cookieのサイズは制限されており、新しいページを要求するたびにCookieが送信されます.これにより、帯域幅が無形に浪費されます.また、cookieは役割ドメインを指定する必要があります.ドメイン間で呼び出すことはできません.このほか、Web StorageにはsettItem、getItem、removeItem、clearなどの方法があり、クッキーのようにフロントエンド開発者がsetCookie、getCookieを自分でカプセル化する必要はありません.しかし、Cookieも欠かせません.Cookieの役割はサーバと対話することであり、HTTP仕様の一部として存在しますが、Web Storageはローカルでデータを「格納」するためにのみ生成されます.6、srcとhrefの違いを簡単に述べる.srcは現在の要素を置き換え、hrefは現在のドキュメントと参照リソースの間で連絡を確立するために使用されます.srcはsourceの略で、外部リソースの位置を指し、指す内容はドキュメントの現在のラベルの位置に埋め込まれます.srcリソースを要求すると、jsスクリプト、imgピクチャ、frameなどの要素などのドキュメントにダウンロードされ、適用されます.
ブラウザが要素を解析すると、そのリソースをロード、コンパイル、実行が完了するまで、他のリソースのダウンロードと処理が一時停止します.ピクチャやフレームワークなどの要素も、現在のラベルに指定したリソースを埋め込むのと同じです.これもjsスクリプトを頭ではなく下に置く理由です.
hrefは、Hypertext Referenceの略で、ネットワークリソースが存在する場所、確立および現在の要素(アンカーポイント)、または現在のドキュメント(リンク)へのリンクを指します.ドキュメントに
を追加すると、ブラウザはドキュメントがcssファイルであることを認識します.リソースは並列にダウンロードされ、現在のドキュメントの処理は停止しません.@import方式ではなくlink方式でcssをロードすることをお勧めします.
7、知っているページ作成に使う画像フォーマットはどれらがありますか?
png-8,png-24,jpeg,gif,svg,WebP .
8、css/jsコードがオンラインになった後、開発者はパフォーマンスを最適化することがよくあります.ユーザーがWebページをリフレッシュすることから、jsリクエストが一般的にキャッシュ処理される場所は何ですか?
dnsキャッシュ
cdnキャッシュ
ブラウザキャッシュ
サーバキャッシュ
1ページに大量の画像(大手電子商取引サイト)があり、ロードが遅いので、これらの画像のロードを最適化し、ユーザーにより良い体験を与える方法はありますか.b>
画像をリロードし、ページ上の非可視領域にスクロールバーイベントを追加して、画像の位置とブラウザの先端の距離とページの距離を判断し、前者が後者より小さい場合は優先的にロードします.
スライドやアルバムなどの場合は、画像プリロード技術を使用して、現在展示されている画像の前と後を優先的にダウンロードできます.
ピクチャがcssピクチャであればCSSsprite,SVGsprite,Iconfont,Base 64などの技術を用いることができる.
画像が大きすぎる場合は、特殊な符号化された画像を使用することができ、ロード時に圧縮された特にすごいサムネイルをロードして、ユーザー体験を高めることができます.
画像表示領域が画像の実際のサイズより小さい場合、サーバ側で業務の必要に応じて先に画像圧縮を行うため、画像圧縮後のサイズは表示と一致する.
10、CSSで定義できる属性は、ブラウザの表示範囲内にDOM要素が表示されないようにしますか?
11、
最も基本的なのは、
display属性をnone、またはvisibility属性をhidden
に設定するテクニック:
幅を0、透明度を0、z-index位置を-1000に設定する
12、ハイパーリンクアクセス後にhoverスタイルが現れない問題は何ですか?どのように
クリックしてアクセスされたハイパーリンクスタイルがhoverとactiveを持っていないことを解決して、解決方法はCSS属性の配列順序を変えることです:L-V-H-A(link,visited,hover,active)
13、Css Hackとは何ですか?ie 6,7,8のhackはそれぞれ何なのか
異なるブラウザに対して異なるCSSコードを書く過程をCSS Hackと呼ぶ.
14、簡単なスライド効果ページをCssで書いてください
CSS 3の新しい属性を使って、アニメーションを実現します.
15、display:noneとvisibility:hiddenの違いは何ですか?
display:対応する要素を非表示にし、その要素の元の空間を占有しません.
visibility:対応する要素を非表示にし、その要素の元の空間を占有します.
つまり、CSSディスプレイ:none属性を使用すると、HTML要素(オブジェクト)の幅、高さなどの各種属性値が「失われる」.visibility:hiddenプロパティを使用すると、HTML要素(オブジェクト)は視覚的に見えない(完全に透明)だけで、その占有する空間位置は依然として存在します.
16、htmlの意味化とは何か
ページスタイルのロードに失敗した場合にページを明確な構造にすることができる
seo最適化に有利であり、検索エンジンに収録されるのに有利である(検索エンジンの爬虫類プログラムで識別しやすい)
プロジェクトの開発とメンテナンスに便利であり、htmlコードをより読みやすくし、他のデバイスの解析に便利である.
17、htmlのよくある互換性の問題?
1. ダブルピッチBUG floatによる使用display
2.3画素問題floatによるdislpay:inline-3 px
3.ハイパーリンクhoverクリックして無効にする正しい書き込み順序link visited hover active
4.le z-index問題親にpositionを追加:relative
5.Png透明はjsコードを用いて
6を変更する.Min-height最小高さ!Important解決'
7.selectはie 6の下でiframeネストを用いる
8を隠す.なぜ1 px程度の幅を定義できないのか(IE 6のデフォルトの行高によるover:hidden,zoom:0.08 line-height:1 px)
9.IE 6はPNGの透明な背景をサポートしないで、解決方法:IE 6の下でgifピクチャー
19、CSSセレクタはどれらがありますか?継承できる属性はどれですか?優先度アルゴリズムはどのように計算しますか?CSS 3の新しい擬似クラスはどれらがありますか?
1. idセレクタ(#myid)
2.クラスセレクタ(.myclassname)
3.ラベルセレクタ(div,h 1,p)
4.隣接セレクタ(h 1+p)
5.サブセレクタ(ul<li)
6.子孫選択器(li)
7.ワイルドカードセレクタ(*)
8.属性セレクタ(a[rel="external")
9.擬似クラスセレクタ(a:hover,li:nth-child)
* ： font-size font-family color, UL LI DL DD DT;
* ：border padding margin width height ;
* ， ;
* ;
:
!important > id > class > tag important
CSS 3の擬似クラスの追加例:
p:first-of-type親要素に属する最初のp要素の各p要素を選択します.
p:last-of-type親要素に属する最後のp要素の各p要素を選択します.
p:only-of-type親要素に属する唯一のp要素の各p要素を選択します.
p:only-child親要素に属する一意の子要素の各p要素を選択します.
p:nth-child(2)親要素に属する2番目のサブ要素の各p要素を選択します.
:enabled、:disabledはフォームコントロールの無効化状態を制御します.
:checked、ラジオボックスまたはチェックボックスが選択されています.
20、text-align:centerとline-heightの違いは何ですか?
text-alignは水平揃え、line-heightは行間です.
1、データ型
1.数値タイプnumber
2.文字列タイプstring
3.ブールタイプboolean
4.undefinedタイプ
5.nullタイプ空
6.オブジェクトobject