参照 - https://www.w3schools.com/Html/html_intro.asp
参照- https://developer.mozilla.org/en-US/docs/Web/CSS
HTML/CSS と Javascript の違い。
-->HTML/CSS - 静的ページ - 手動で更新しない限り、コンテンツはロードされるたびに同じままになります。
-->JavaScript - 動的ページ - ページは、ボタンのクリック、フォームの送信、マウスの移動などのユーザーのアクションに応答できます。
HTML 構文:
<html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
--> ファイルを拡張子 (.html) で保存し、ダブルクリックしてプログラムを実行します。
HTML 要素:
HTML では通常、要素は開始タグと終了タグを使用して囲まれ、開始タグと終了タグが定義されます。
-->開始タグ : HTML 要素の始まりをマークします。
-->終了タグ : 要素名の前にスラッシュを付けて HTML 要素の終わりを示します。
例:
Hello,World!
スタンドアロン タグ: HTML のスタンドアロン タグ (自己終了タグとも呼ばれる) は、開始タグと終了タグの間にコンテンツがないため、終了タグを必要としない要素です。タグ。
例-
- ブレーク: 改行を挿入するために使用されます
ILUGC Web ページのレイアウトを準備しています:(https://ilugc.in/)
<title>ILUGC</title>
。容器{
境界線:1 ピクセルの実線;
高さ:200%;
幅:85%;
マージン:自動;
}
.header h4{
テキスト変換: 大文字;
色:#e22d30;
ボーダートップ:1px ソリッドグリーン;
幅: コンテンツに合わせて;
パディングトップ:10px;
}
。ヘッダ{
マージン:25px;
}
</スタイル>
</head>
<div>
<p>出力:</p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173594590044719.jpg" alt="Day - TML/CSS - Project ILUGC(web page)"></p>
<p><strong>説明:</strong></p>
<ol>
<li>
<html>: HTML ドキュメントのルート要素。</li>
<li>
<head>: ドキュメントのメタデータとリソースが含まれます。</li>
<li>
<title>: ブラウザのタブに表示される Web ページのタイトルを設定します。</li>
<li>
<style>: HTML ドキュメントのスタイルを設定するための CSS を埋め込みます。</li>
</ol>
<ul>
<li><p>.container: コンテナー div:<br> のスタイルを設定します。
a) border: 1px Solid;: 1 ピクセルの実線の境界線を追加します。<br>
b) height: 200%;: 高さをビューポートの高さの 2 倍に設定します。<br>
c) width: 85%;: 幅をビューポート幅の 85% に設定します。<br>
d) margin: auto;: コンテナを水平方向の中央に配置します。</p></li>
<li><p>.header h4: <h4> のスタイルを設定します。 .header クラス内の要素:<br>
a) text-transform: uppercase;: テキストを大文字に変換します。<br>
b) color: #e22d30;: テキストの色を赤の特定の色合いに設定します。<br>
c) border-top: 1px Solid green;: 緑色の上境界線を追加します。<br>
d) width: fit-content;: コンテンツに合わせて要素の幅を縮小します。<br>
e) padding-top: 10px;: テキストの上に 10 ピクセルのパディングを追加します。</p></li>
<li><p>.header: ヘッダー div:<br> のスタイルを設定します。
a) margin: 25px;: ヘッダーの周囲に 25 ピクセルのマージンを追加します。</p></li>
</ul>
<ol>
<li>
<body>: Web ページに表示されるすべてのコンテンツが含まれます。</li>
<li>
<div>: コンテンツをグループ化してスタイル設定するためのコンテナ要素。</li>
<li>
<h1>: Web ページのメイン見出しを表します。</li>
<li>
<h4>: <h1> よりも重要度の低い小見出しを表します。</h1>
</h4>
</li>
</ol>
<p><strong>属性:</strong><br>
属性は、HTML 要素に関する追加情報を、通常は名前と値のペアの形式で提供します。<br>
例: `</p>
<div>
<p><strong>パディング:</strong><br>
パディングは、要素のコンテンツとその境界線の間のスペースです。コンテンツの周囲に内部マージンを作成し、コンテンツを要素の端から遠ざけます。</p>
<p><strong>マージン:</strong><br>
マージンは、要素の境界線の外側にある要素を他の要素から分離するスペースです。要素間の外部空間を定義し、要素の周囲に距離を作成します。</p>
<p><strong>クラスセレクターと要素セレクター:</strong></p>
<ul>
<li>クラス セレクターは、ピリオド (.) に続いてクラス名を使用して、特定のクラス属性を持つ HTML 要素をターゲットにします。</li>
<li>要素セレクターは、タグ名によって HTML 要素を直接ターゲットにします</li>
</ul>
</div>
</div>以上が日 - TML/CSS - プロジェクト ILUGC(Web ページ)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
