參考- 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 元素的結束。
例如：
你好，世界！
獨立標籤：HTML中的獨立標籤（也稱為自關閉標籤）是不需要關閉標籤的元素，因為它在開始和結束之間沒有任何內容標籤。
例如-
- break：用於插入換行符
準備 ILUGC 網頁版：(https://ilugc.in/)
ILUGC標題>
。容器{
邊框：1px實線；
高度：200%；
寬度：85%；
邊距：自動；
}
.標題h4{
文字轉換：大寫；
顏色：#e22d30；
上邊框：1px 純綠色；
寬度：適合內容；
頂部填充：10px；
}
.標題{
邊距：25px；
}
風格>
頭>
<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 文件的根元素。 </li>
<li>
：包含文件的元資料和資源。 </li>
<li>
<title>：設定瀏覽器標籤上顯示的網頁標題。 </title>
</li>
<li>
<style>：嵌入 CSS 以設定 HTML 文件的樣式。 </style>
</li>
</ol>
<ul>
<li><p>.container：設定容器 div 的樣式：<br>
a) border: 1pxsolid;: 新增1像素的實心邊框。 <br>
b) height: 200%;: 將高度設定為視窗高度的兩倍。 <br>
c) width: 85%;：設定寬度為視窗寬度的85%。 <br>
d) margin: auto;：使容器水平居中。 </p></li>
<li>
<p>.header h4：設定 </p>
<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 像素的填充。 </h4>
</li>
<li><p>.header：設定標題 div 的樣式：<br>
a) margin: 25px;: 在標題周圍加入 25 像素的邊距。 </p></li>
</ul>
<ol>
<li>
：包含網頁所有可見內容。 </li>
<li>
<div>：用於將內容分組並設定樣式的容器元素。
<li>
<h1>：代表網頁的主標題。 </h1>
</li>
<li>
<h4>：表示重要性低於 <h1> 的副標題。 </h1>
</h4>
</li>
<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>
</li>
</ol>
</div>以上是日 - TML/CSS - 項目 ILUGC（網頁）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
