私は先週 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オーダーリスト
テーブルテーブル