css+html 概要+summary_html/css_WEB-ITnose

清明祭の 3 日間を利用して、一連の xhtml ビデオを視聴しました。xhtml ですが、多くの経験を比喩し、自分自身の基礎を固めました。しかし、書けば書くほど自分の基礎が弱いことに気づきます、それは本当です。これまで理解していなかった、または知らなかった概念や経験をいくつか学びました。ここにまとめた記事を書きます。

1. まず、W3C標準

の構造、パフォーマンス、アクションは、html、css、javascriptに対応しており、構造とパフォーマンスを分離し、それに合わせて構造を記述することが本来の目的です。 htmlの仕様に準じます。

タグ:

-すべてのタグは小文字で閉じられ、適切にネストされている必要があり、ID を繰り返すことはできません

-タグには属性が必要で、属性には値が必要で、「」で表される必要があります

-img tag alt 属性は無視できません

- height 属性は table タグには適用できません

- iframe の使用を最小限に抑えるとブラウザの応答速度に影響しますが、iframe は html5 でも使用できます

コンテンツ モデル:

-body、form、blockquote にはブロックレベルの要素のみを含めることができます

-テキスト、画像、リンクなどのインライン要素は body タグで直接公開できず、他のタグでラップする必要があります

-インライン要素には次の要素を含めることはできませんブロックレベルの要素

その他の側面:

- 特殊文字はエンコーディングによって表現されます

補足:

初心者向けの誤解:

1. div は全能です!

2. テーブルは残念です！

3. 標準のための標準

1. 一部のページ装飾は div をネストすることで実現できますが、多くのタグは特定の意味を持っていません。 、h1~h3、p、strongなど、HTML5でよりセマンティックなタグ、たとえば、フッター、ヘッド、ナビゲーション、記事、セクションなどのタグがたくさんありますが、ここでは簡単に説明します。ここでは一般的に使用されるタグ、およびページ全体が div で記述されている場合、検索エンジンが Web サイトを検索するのが不便になります。

2. テーブルは恥ずかしいものではありませんが、ほとんど使用されません。テーブルはデータをロードするために使用され、適切に使用されている限り、すべてのタグは恥ずかしいものではありません。

3. 端的に言えば、私たちは顧客とユーザーのニーズに合わせて Web サイトのページを作成します。ページは厳格ではなく、柔軟に作成する必要があります。

2. マスターしなければならないこと

1. ブロック要素とインライン要素

(1) ブロック要素

ブロック要素は通常、他の要素のコンテナ要素であり、ブロック要素は通常 new から始まります。行には、テキスト、インライン要素、その他のブロック要素を含めることができます。そのサイズは、幅と高さの属性によって設定できます。一般的なブロック要素には、h タグ、p タグ、div タグが含まれます

追加: form タグもブロック タグです。ブロックレベルのタグのみを収容できます

(2) インライン要素

インライン要素は非ブロックレベルの要素です。インライン要素はテキストまたは他のインライン要素のみを収容でき、幅と高さはそれに影響しません。一般的なインライン要素には、img のスパンなどが含まれます。開発者にとってより便利になるよう、inline-block 属性値が追加されました。これには、ブロック要素の特性 (要素のサイズを変更する機能) が含まれます。また、インライン要素の特性 (サイズはサイズのみです) も含まれています。ボックス内の要素

2. ボックス モデル

詳細と詳細については、さまざまなマスター テクノロジー ブログを参照してください。

3. CSS ページ コントロール スタイル メソッド

(1) インライン

(2) 埋め込み

(3) リンク タイプ

(4) インポート タイプ

優先順位:

近くの要素、インライン > リンク > , 国内のフロントエンドではリンク型がよく使われています。

4. 一般的に使用されるセレクター

-tag セレクター (div, p)

-id セレクター (#)

-class セレクター (.)

-universal セレクター (*)

- 疑似クラス セレクター(:link,:active,:hover,:visited)

優先度:

ID>クラス>タグ>全般

5. テキスト フロー

テキスト フローは概念的なもの、ページ上の要素です。上から下、左から右の順に配置されます。

番外編:

テキストフローから抜け出すには?

レイアウトを容易にするために、通常はフローティングおよび位置決めメソッドを使用します

6. 命名方法

-ラクダの命名法

-パスカルの命名法

-ハンガリー語の命名法

-またはすべての最初の文字が大文字になります

命名規則:

ヘッダー: head/header

Content: content/container

Tail: foot/footer

Navigation: nav/navigation

サイドバー:sidebar

3. CSS制御機能

1. 1行目のインデント

text-indent:2em;

テキストが英語の場合は、漢字2文字分の幅でインデントされます

知識のポイント:

ピクセル

rem 相対ブラウザ単位

% パーセント単位

cm、mm 絶対単位

2. ページテキストの柔軟性を高める

本文のテキストサイズを設定します font-size: 62.5% 12px を設定する必要がある場合テキスト サイズはローカルで 1.2em などに設定され、14px は 1.4em を基準とします

どのブラウザのデフォルトのフォント高さも 16px であるため、1em=16px

1px=1/16em 10px=10/16em=0.625em =0.625*1em =62.5%*1em

12px=62.5%*1.2em

14px=62.5%*1.4em

16px=62.5%*1.6em

追加:

セットアップie の下に 1.2em が 12px より大きいのですが、なぜですか? どうやって対処すればいいのでしょうか？

IE ブラウザは常に小数点 62.5 を誤って変換するため、将来すべてのブラウザと互換性を持たせるためにページ サイズを直接 63% に設定します

3. フローティング:

フロート: 左

フロート: 右

位置決め:

位置:絶対

位置:相対

追加:

クリアフロート:

-クリア: 両方

-クリア: 左

-クリア: そうです

float によってクリアされるのは、この要素の float ではなく、この要素に対する上位要素の影響です。ページ全体が 3 つのレベルに分かれていると言えます

最初のレベルはテキストフローです。はページのデフォルトの表示方法です

第2レベルはフローティングで、テキストから離れて上のレベルに流れます

第3レベルはフローティングより1つ上のレベルです。

4.position

-absolute

-relative

-static

-Inherit

-Fixed

Absolute: この属性値は、絶対的な位置決めを行います。要素の絶対位置を相対的に柔軟に設定できる

Relative: 親レベル ボックスの位置を基準とした相対位置です。

static: デフォルトの要素の位置決め方法です。

inherit: 親ボックスの位置属性を継承します。これはあまり役に立ちません。継承したい場合は、自分で書き直して要素を再度検索する方がよいでしょう。

固定: 要素はブラウザ本体内の位置に固定されており、ブラウザを上下に引っ張っても位置は変わりません

補足: 一般的に、Web サイトは主にフローティングに基づいており、位置決めによって補うことができます。現在のタオバオのウェブサイトを見てください。

5. CSS Reset

cssスタイルには継承とリセットの機能があります

よく使われるCSS Reset

*{ margin:0,padding:0 }

body,div,p,ul ,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,textarea,th,td {padding:0; margin:0;}

table {border-collapse:折りたたむ; ボーダー間隔: 0;}

img {ボーダー: 0;}

ol,ul{リストスタイル: なし;}

h1,h2,h3,h4,h5,h6 {フォントの太さ: 通常; font-size: 100%;}

4: ページのデバッグ/修正方法

2. 削除方法

追加:

ウェブサイトのページの読み込み

ページを作成する際には、次のことを優先します:

1. 検索エンジンの読み込み

2. 閲覧者にとって見やすい

3. ページの構造がシンプルで整然としている

最後に

デバッグ成果物について教えてください: http://getf5.com/

上記はいくつかの経験といくつかの基本的な事項です。
この記事に記述上の誤りがある場合は、時間内にご指摘ください。積極的に修正します。

人生に終わりはなく、学習に終わりはありません。

勉強すればするほど、まだまだ足りないことがたくさんあることが分かり、これからも頑張ります！