HTML&CSS学習まとめ(1)_html/css_WEB-ITnose

私は先週 1 週間を費やし、月曜から金曜までは 1 日平均 2 ～ 3 時間、土曜と日曜は 1 日 8 時間、NetEase Cloud Classroom Yan Shima の HTML+div+CSS ビデオを見ました。とても良い感じだったので、ビデオの講義のアイデアに基づいて要約を作成しましょう。

基本的な考え方: 大きな側面 (全体的な構造) から始めて、HTML (4.0) の基本知識を「分解」してから、それを適用します。最初にすべてを学ぶのではなく、最初に使い方を学びます。

学習効果: 以下の知​​識を習得すると、基本的に主要な Web サイトのホームページを作成できるようになります。主なことは、div レイアウトと CSS 効果の表示を使用する練習です。

1. HTML 文書構造

doctype 文書タイプ

厳密: すべての HTML 要素と属性が含まれますが、プレゼンテーション要素や非推奨の要素 (フォントなど) は含まれません。フレームセットは許可されません。

暫定: プレゼンテーション要素や非推奨要素 (フォントなど) を含む、すべての HTML 要素と属性が含まれます。フレームセットは許可されません。

フレームセット: Transitional と同じですが、フレームセットのコンテンツを許可します。フレームワークを作成したい場合は、これを宣言する必要があります。

head

title: ブラウザのツールバーのタイトル、ページをお気に入りに追加したときに表示されるタイトル、検索エンジンの結果に表示されるページのタイトル

meta: メタデータはページには表示されませんが、機械可読。

ページの説明、キーワード、ドキュメントの作成者、最終更新時刻、その他のメタデータを指定します。

タグは常に head 要素内に配置されます。

メタデータは、ブラウザー (コンテンツの表示方法やページのリロード方法)、検索エンジン (キーワード)、またはその他の Web サービスで使用できます。

Style:タグは、HTML文書のスタイル情報を定義するために使用されます。

bodyは主にdivと様々なタグです

2. divを使用してレイアウトを制御します

レイアウトの原則: 大きいものから小さいもの、上から下、左から右へ

ボックスモデル: 幅(幅)高さ(高さ)、ボーダー、マージン、パディング

フローティング レイアウト: div はフローティングまたはクリアできます

自分で試すことができます。 次に、単純な div + 背景色を使用してレイアウトを試し、「全体像」を強化します。

3. CSS を使用して表示効果を制御する

まず、さまざまなセレクターを理解します: di、クラス、タグ、派生、疑似クラス、ワイルドカード

次に、さまざまな効果を制御する方法を理解します

段落制御

text-align文本水平对齐设置
text-decoration 划線方式
letter-spacing 文本中单字の间間隔
text-transform 大小写转换

文字制御

color色设置font-style 斜体设置 font-weight 文字粗细 font-size 文字サイズfont-family text font

background control

background-color color
background-image image
background-repeat image tiling
background-attachment scroll
background-position 背景の画像位置

CSSの導入方法：ページ内style タグ、外部 CSS ファイル、インライン スタイル タグ、インポート import

CSS の初期化

原因: ブラウザには要素のデフォルトの CSS パラメータがあり、それらが矛盾している可能性があり、その結果、ブラウザ間で表示効果が異なります

解決方法: 統一共通の要素に共通の CSS パラメーターを使用し、統合効果を手動で設定します

4 つの HTML タグ

セマンティックタグなし: div、span
セマンティックタグあり
h1-h6 タイトル
p 段落
img ピクチャ
ハイパーリンクとアンカー
ul 順序なしリスト
OLオーダーリスト
テーブルテーブル