日 - TML/CSS - 項目 ILUGC（網頁）

HTML：

• HTML 代表超文本標記語言
• HTML 是建立網頁的標準標記語言
• HTML 描述網頁的結構
• HTML 由一系列元素組成
• HTML 元素告訴瀏覽器如何顯示內容
• HTML 元素標記內容片段，例如「這是標題」、「這是一個段落」、「這是一個連結」等

參考- https://www.w3schools.com/Html/html_intro.asp

CSS：

• 層疊樣式表 (CSS) 是一種樣式表語言，用於描述 HTML 編寫的文件的呈現方式。
• CSS 描述如何在螢幕、紙張、語音或其他媒體上呈現元素。

參考 - https://developer.mozilla.org/en-US/docs/Web/CSS

HTML/CSS 與 Javascript 之間的差異。

-->HTML/CSS - 靜態頁面 - 每次載入時內容都保持不變，除非手動更新。
-->Javascript - 動態頁面 - 頁面可以回應使用者操作，例如點擊按鈕、提交表單或移動滑鼠。

HTML 語法：

<title>Page Title</title>


   <h1 id="My-First-Heading">My First Heading</h1>
   <p>My first paragraph.</p>

-->以（.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="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173594590044719.jpg?x-oss-process=image/resize,p_40" class="lazy" 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 id="代表網頁的主標題">：代表網頁的主標題。 </h1>
</li>
<li>
<h4>：表示重要性低於 <h1 id="的副標題"> 的副標題。 </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中文網其他相關文章！