Web開発の基礎 HTML+CSS
学習目標と学習内容
1. Web開発に必要な技術的なポイントを説明できる
2. HTMLの機能を説明できる
3. リストを実装できる
4. フォームを作成する機能
5. フォームを実装する能力
6. CSSの役割を説明できるようになる
7. セレクターを使用してタグを取得できる
8. CSSを使用してフォントの色とサイズを設定する機能
1. Web開発の概要
1. なぜ Web 開発を学ぶ必要があるのですか?
運用保守エンジニア
ジュニア エンジニア: 基本環境の保守 (システムのインストール、サーバーの問題の処理、実装、表示、監視) を担当します。
中級エンジニア: 大規模なクラスターを維持し、クラスター アーキテクチャを展開します。
==シニアエンジニア: 既存の面倒な作業をページベースで開発し、運用保守作業を簡素化します (サーバーが 1,000 台の場合、システム管理を使用します) ==
==資産管理システム==
資産管理システム (==cmdb== と呼ばれます)。
オープンソースの資産管理システム ==jumpserver== は会社のビジネスを 100% 完了することはできません
外部および内部のユーザーによる侵入や損害からネットワークとデータを保護するために、要塞マシンはさまざまな技術的手段を使用して、ネットワーク環境内の各コンポーネントのシステム ステータス、セキュリティ イベント、およびネットワーク アクティビティをリアルタイムで収集および監視し、集中アラーム、タイムリーな処理と監査。
上級エンジニアは、自身のビジネス ニーズを満たすために同様のシステムを開発する必要がある
デモ関連のデモプロジェクト
2. Web開発について学ぶべきこと
HTML ハイパーテキスト マークアップ テキスト
CSS カスケード スタイル シート
JavaScript 動的スクリプト言語
DOMドキュメント
jQuery JavaScript ライブラリ
ブートストラップ html+css+js フロントエンド テンプレート ライブラリ
ajax 非同期 + JavaScript + xml の一連のテクノロジー
バックエンド言語の学習と組み合わせる (java、php、==python==、ruby[howbrew]~~~)
3. 関連する学習教材
MDN： 学习 Web 开发 | MDN
ルーキー チュートリアル:ルーキー チュートリアル - スキルだけでなく夢も学びましょう!
2. HTML、Web開発の基礎
HTMLを使用してページを開発する能力
1. フロントエンド言語の概要
HTML はページ上のコンテンツ (構造とコンテンツ) を提供します。
CSS は Web ページ (スタイル) を美しくします。
JavaScriptはWebページ上のコンテンツを制御（コントロール）します。
2. 開発ツールの準備
一般的に使用される開発ツール:
軽量のテキスト タイプ: ==VSCode==、Sublime
重量IDE型：WebStrom
3. 初期HTML
HTMLとは
HTML (英語の Hyper Text Markup Language の略) は、中国語に翻訳すると ==Hypertext Markup Language== となります。
HTML タグを使用して、Web ページ内のテキスト、画像、サウンド、その他のコンテンツを記述します。
インターネット上のページを開き、ブラウザのデバッグ ツールを通じてソース コードを表示します。
HTML形式
基本フォーマット
<html> <head> <title>标题显示</title> </head> <本文> </body> </html>
html タグ: すべての html タグのルート ノード
headタグ:Webページの一部の情報を記述します。内部のコンテンツは表示されません。
title タグ: Web ページのタイトル
==body== タグ: ページのテーマ部分。主にコンテンツの作成と開発を行います。
ヒント: エディターを使用して HTML ページ構造をすばやく作成します
vscodeで新しいhtmlファイルを作成したら、「!」と入力します。 Tab キーを押すと、HTML5 標準に基づいたページ構造がすぐに生成されます。
4. HTMLタグの分類
①ダブルラベル
構文形式:
<タグ名>内容</タグ名>
<タグ名>はタグ全体の先頭にあり、「開始タグ」と呼ばれます
</タグ名> タグ全体の最後にあるものを「終了タグ」といいます
終了タグには、開始タグの前に終了文字「/」が 1 つだけあります。
例えば：
<body>私はこのページのメインコンテンツです</body>
②シングルレーベル
構文形式:
<タグ名/>
単一ラベルは空ラベルとも呼ばれ、ある機能を 1 つのラベル記号で完全に記述できるラベルを指します。
例えば：
<br /> 改行タグ <hr /> 水平線水平線ラベル
5. 文字セット
==UTF-8== は、現在最も一般的に使用されている文字セット エンコード方式です。一般的に使用されている文字セット エンコード方式には、gbk および gb2312 があります。
GB2312 簡体字中国語には 6763 文字が含まれています
BIG5 香港、マカオ、台湾の繁体字中国語
GBK にはすべての中国語の文字が含まれており、GB2312 の拡張機能です。繁体字のサポートが追加され、GB2312 と互換性があります。
UTF-8 には、世界中のすべての国で必要な文字が含まれています
ヒント: 将来的には、一貫性のない文字セットによって引き起こされる文字化けを避けるために、UTF-8 文字セットを統一的に使用できるようになります。
6.よく使われるHTMLの基本タグ
6.1. タイトルタグ
単語の略語: ヘッドヘッダー
文法：
<h1>これは h1 タグです</h1> <h2>これは h2 タグです</h2> <h3>これは h3 タグです</h3> <h4>これは h4 タグです</h4> <h5>これは h5 タグです</h5> <h6>これは h6 タグです</h6>
6.2. 段落タグ
単語の略語: 段落パラグラフ
段落タグを使用すると、Web ページ内のテキストを一度に 1 段落ずつ書式設定できます。
文法：
<p>段落の内容</p>
6.3. 横線ラベル
単語の略称：水平水平線
文法：
<hr /> は単一のタグです
6.4. 改行ラベル
単語の略語: ブレーク、ブレーク、改行
HTML では、デフォルトの行折り返しではブラウザ ウィンドウの右端で自動行折り返しが必要となるため、レンダリング効果はデバイスごとに異なります。特定のテキストを強制的に改行する必要がある場合は、改行タグを使用する必要があります。
文法：
<br />
演習: 簡単なニュース ページを実装する
6.5. divspanタグ
ボックスモデルの 2 つのレイアウト方法:
div Divisionの略で分割という意味ですが、実際にはWebページを結合するdivがたくさんあります。ブロックレベルの要素
スパン スパン、スパン; 範囲、インライン要素
文法：
<div>これはヘッダーです</div> <span>今日の価格</span>
6.6. ラベル属性
HTML を使用して Web ページを作成する場合、タグでより多くの情報を提供したい場合は、タグのいくつかの属性を使用して設定できます。
文法：
<タグ名 属性1="属性値1" 属性2="属性値2" ...> 内容
例：
<時間幅="200" align="左" />
width 属性、値 200 は幅を制御します
align 属性、値 left は水平方向の配置を制御します
6.7. イメージタグ img
単語の略語：イメージイメージ
文法：
<img src="画像 URL" />
src 属性で画像ファイルのパスとファイル名を設定します。 imgタグの必須属性です。
6.8. リンクタグ
略称：アンカーアンカー
文法：
<a href="ジャンプターゲット">テキストまたは画像</a>
href 属性は、リンク先の URL アドレスを指定します。
URL アドレスには、絶対パスと相対パスを使用できます。契約書等も含めて
ヒント：
href では空の接続を示すために「#」を使用できますが、当面はジャンプ リンク アドレスはありません。
新しいページタブを開く
6.9. 特殊文字タグ
HTML の一部のタグは特別な意味を持ち、ブラウザによって直接解析されます。これらのタグを出力する必要がある場合は、エスケープ構文と置換構文を使用する必要があります。
6.10 アノテーションタグ
コメント タグを使用すると、読みやすく理解しやすい HTML ドキュメントにテキストを追加できます。このタグの内容は直接表示されず、ソース コードを通じてのみ確認できます。
文法：
<!-- コメントステートメント -->
7. リストタグ ul li
文法：
ヒント：
①<ul></ul>タグ内に入れ子にできるのは<li></li>タグのみであり、他のタグを直接入れ子にすることは構文上認められません。
②<li></li>タグはコンテナとして機能し、他のタグ要素を収容できます。
③順序なしリストにはデフォルトのスタイルがあり、CSSで変更できます。
8. 表
データをより規則的に表示できるようにするには、通常、テーブルを使用してデータを表示する必要があります。
8.1. テーブルの作成
文法：
<表> <tr> <td>单元格内の文字</td> ... </tr> ... </テーブル>
テーブルはテーブルを定義します
tr はテーブル内の行を定義し、テーブル タグ内でネストする必要があります。tr タグのいくつかのペアは、テーブルの行数を表します。
td はテーブル内のセルを定義し、tr タグでネストする必要があります。tr タグのペアには複数の td タグのペアがあり、これは行内にセルが何個あるかを意味します。 td は、他のラベル要素を含めるコンテナとして使用できます。
8.2. テーブルの属性
ヒント：
①thタグを使用してヘッダーを設定できます
②CSSを使用して表のスタイルを変更できます
9. フォーム
9.1. フォームの紹介
HTML では、form タグを使用してフォームを定義します。ユーザー関連情報の収集と送信、およびバックエンドとの対話に使用されます。フォーム内のすべてのコンテンツはサーバーに送信されます。
文法：
<form action="URL アドレス"method="送信方法"> さまざまなフォーム コントロール </フォーム>
共通のプロパティ:
アクション値は、バックエンドに送信される URL アドレスです。
Method はフォーム送信メソッドを設定します。値は get または post です。
9.2. フォームコントロールの構成
フォームには、単一行のテキスト入力ボックス、パスワード入力ボックス、チェック ボックス、送信ボタン、リセット ボタンなど、さまざまなフォーム スペースが用意されています。
9.3. 入力制御（ポイント）
入力コントロールはフォームで最も一般的に使用されるものであり、これも習得する必要があります。基本的なラベル属性は type 属性であり、さまざまなコントロール タイプを定義するために使用されます。
その他の一般的な属性:
9.4. textareaコントロール（テキストエリア）
大量の情報を入力する必要がある場合は、textarea タグを使用できます。複数行のテキスト入力ボックスを実装します。
文法：
<textarea cols="各行の文字数" rows="表示行数"> テキストの内容 </textarea>
9.5. コントロールの選択 (ドロップダウン メニュー)
選択コントロールは、ユーザーにいくつかの一般的なオプションを提供できます。
文法：
<選択> <オプション>选项1</オプション <option>選択项2</option> <option>選択项3</option> ... </選択>
ヒント：
select タグには、option タグが含まれている必要があります。
オプション タグで、selected="selected" を定義して、現在の値をデフォルトのオプションとして設定できます。
9.6、ラベルラベル
ラベル label は、入力要素の定義ラベル (ラベル) です。
フォーム要素をバインドするために使用できます。ラベル label をクリックすると、バインドされたフォーム要素が入力フォーカスを取得します。
文法：
<入力タイプ=「ラジオ」名前=「性別」 id="男性"値="男性">
3. CSS、Web開発の基本
1. CSS の概要
1.1. CSSの役割
1.2. CSSとは何ですか?
CSS (カスケード スタイル シート)。CSS スタイル シートまたはカスケード スタイル シート (カスケード スタイル シート) とも呼ばれます。
主に、HTML ページ内のテキストの内容 (フォント、サイズ、配置など)、ボックスの形状 (幅と高さ、境界線のスタイル、余白など)、およびレイアウトのレイアウトを設定するために使用されます。
HTMLをベースに、フォント、カラー、背景制御、組版全般など豊富な機能を提供します。
2. CSS がどこでどのように定義されているか
1.1. インラインスタイル（インラインスタイル）
インライン スタイルは、タグの style 属性を通じて要素のスタイルを設定します。
文法：
<タグ名 style="属性 1: 属性値 1; 属性 2: 属性値 2; 属性 3: 属性値 3;"> 内容 </タグ名>
スタイルはタグの属性です。どの HTML タグにも style 属性があり、インライン スタイルを設定するために使用されます。
1.2. 埋め込みスタイル
埋め込みとは、HTML文書のheadタグ内にCSSコードを記述し、styleタグで定義することです。
<頭>
<style type="text/CSS">
セレクター {属性 1: 属性値 1; 属性 2: 属性値 2; 属性 3: 属性値 3;}
</style>
</head>
ヒント：
①style タグは通常 head タグ内にあり、実際には HTML ドキュメント内のどこにでも配置できます。
②type="text/css"属性は省略可能ですが、もちろん追加した方が標準化されます。
1.3. 外部スタイルシート（インポートファイル）
外部スタイル シートは、すべてのスタイルを .css で終わる 1 つ以上のファイルに保存します。 link タグを使用して、外部スタイル シート ファイルを HTML ドキュメントにリンクします。
文法：
<頭> <link href="CSS ファイルのパス" type="テキスト/CSS" rel="スタイルシート" /> </head>
href: リンクによって導入されるスタイル シート ファイルの URL を定義します。相対パスと絶対パスの両方を使用できます。
type: リンクされたドキュメントのタイプを定義します。「text/CSS」は、リンクされた外部ファイルが CSS スタイル シートであることを示します。
rel: 現在のドキュメントとリンクされたドキュメント間の関係を定義します。ここでは、リンクされたドキュメントがスタイル シート ファイルであることを示す「stylesheet」として指定する必要があります。
要約:
| スタイルシート | アドバンテージ | 欠点がある | 使用法 | 制御範囲 |
|---|---|---|---|---|
| インラインスタイルシート | 書きやすい | スタイルと構造が分離されていない | 少ない | 1 つのラベルを制御 (少ない) |
| 内部スタイルシート | 部分的な構造とスタイルの分離 | 完全に分離されていない | もっと | ページの制御 (中) |
| 外部スタイルシート | 完全に分離した構造とスタイル | 紹介が必要 | 最も強く推奨される | サイト全体を制御する |
優先度：
==インライン>外側=インライン==
3.CSSセレクター
HTML で CSS スタイルをタグに適用する場合は、まず (class) タグを見つける必要があります。 CSS では、セレクター (セレクター) を通じて見つけることができます。
3.1. タグセレクター
タグセレクターとは、==HTML タグ名== をセレクターとして使用し、ページ内でそのようなタグ名で定義されたタグに統一された CSS スタイルを設定することを指します。
文法：
タグ名 {属性1:属性値1; 属性2:属性値2; 属性3:属性値3; }
3.2. IDセレクター
ID セレクターは、特定の ID でマークされた HTML 要素の特定のスタイルを指定できます。
文法：
#id name {属性 1: 属性値 1; 属性 2: 属性値 2; 属性 3: 属性値 3; }
ヒント：
①id名はHTMLタグのid属性の値です
②要素のid値は一意であり、ドキュメント内の特定の要素にのみ適用できます。
3.3. クラスセレクター
クラス セレクターは、要素のグループのスタイルを記述するために使用されます。クラス セレクターは、ID セレクターとは異なります。クラスは複数の要素で使用できます。
文法：
.クラス名 {属性 1: 属性値 1; 属性 2: 属性値 2; 属性 3: 属性値 3; }
ヒント：
ID セレクターとクラス セレクターの違い:
①クラスセレクターは何度でも再利用可能
②idセレクターの一意の識別子は1回のみ使用でき、繰り返し使用することはできません。
つまり使用回数の違いです。同じ HTML ドキュメント内で、複数のタグに同じ id 属性値を指定することはできません。
ヒント: セレクターの優先順位
==id > クラス > タグ==
3.4. マルチカテゴリ名セレクター
より多くの選択肢を得るために、複数のクラス名をラベルに割り当てることができます。
<div class="font14 colorred">アンキラージ</div>
==ヒント: 組み合わせセレクター==
CSS3 では、次の 4 つの組み合わせ方法が提供されています。
① 子孫セレクター（スペース区切り）
子孫セレクターは、要素の子孫要素を選択するために使用されます。
文法：
div p { 背景色:黄色; }②サブ要素セレクター（不等号で区切る）
子孫セレクターと比較して、子セレクターは要素の子である要素のみを選択できます。
div>p { 背景色:黄色; }③隣接する兄弟セレクター（プラス記号で区切る） 隣接する兄弟セレクターは、別の要素の直後の要素を選択でき、両方とも同じ親要素を持ちます。別の要素の直後の要素を選択する必要があり、2 つの要素が同じ親要素を持つ場合は、隣接兄弟セレクター (隣接兄弟 > セレクター) を使用できます。
div+p { 背景色:黄色; }④共通の兄弟セレクター（ダッシュで区切られています）
後続の兄弟セレクターは、指定された要素の後にあるすべての隣接する兄弟要素を選択します。
div~p { 背景色:黄色; }
4. CSSの基本的なスタイルプロパティ
4.1. CSS フォント
font-size フォント サイズ。単位は通常 px (ピクセル) です。
font-family フォント スタイル Microsoft Yahei Song Ti Kai Ti
4.2、CSSテキスト（テキスト）
色の文字の色
設定方法は次の 3 つがあります。
①16進数値：#FF0000
②RGB値：RGB(255,0,0)
③色の名前：赤など
text-align 水平方向の配置
設定方法は次の 3 つがあります。
①left 左揃え（デフォルト）
②右揃え
③中心中心合わせ
テキスト装飾 テキスト装飾
| 価値 | 説明する |
|---|---|
| なし | デフォルト。標準を定義するテキスト。 |
| 下線 | テキストの下に行を定義します。リンクにはアンダースコアも含まれています。 |
| 上線 | テキスト上の行を定義します。 |
| ラインスルー | テキストの下を通る線を定義します。 |
4.3. 表示と非表示
display:none は要素を非表示にすることができ、非表示の要素はスペースを占有しません。つまり、要素が非表示になるだけでなく、その要素が元々占めていたスペースもページ レイアウトから消えます。
文法：
h1{表示:なし;}
4.4. ボックスのサイズ
width はボックスの幅を設定します。単位: px パーセント
高さはボックスの幅を設定します。単位: px パーセント
文法：
ディビジョン{
幅:400px;
高さ:200px;
}
4.5、ボーダー（ボックスボーダー）
文法：
ボーダー : ボーダー幅 ||ボーダースタイル ||ボーダの色
border-style は多くの場合、境界線のスタイルを設定します
- none: 境界線はありません。つまり、すべての境界線の幅は無視されます (デフォルト値)。
- 実線: 境界線は単一の実線です (最も一般的に使用されます)
- 破線: 境界線が点線になります
- dotted: 境界線は点線です
- double: 境界線は二重実線です
4.6、背景（背景）
①背景色
ボディ {背景色:赤;}
②背景画像
本文 {背景画像:url('bg.jpg');}