---
# System prepended metadata

title: ITC NCUE 共筆

---

ITC NCUE 共筆 <i class="fa fa-pencil fa-fw"></i>
===
[TOC]
# 一、 網頁前端
## 1. HTML(網頁架構)
### (1) 基礎介紹
:seedling: HTML 代表 Hyper Text Markup 語言
:seedling: HTML 是建立網頁的 **<font color=#cd5c5c>標準 markup 語言</font>**
:seedling: HTML 描述了網頁的結構
:seedling: HTML 由一系列元素組成
:seedling: HTML 元素告訴瀏覽器如何顯示內容
:seedling: HTML 元素標記內容片段，例如「這是標題」、「這是段落」、「這是連結」等。
### (2) 基礎架構
#### <font size=5>a. 宣告 html</font>
<hr>

> <strong>\# <kbd><font color=#80000, size=2>&lt;!DOCTYPE html&gt;</font></kbd> 聲明定義該文檔是 HTML5 文檔</strong>
```htmlembedded==
<!DOCTYPE html>
```

#### <font size=5>b. 設定瀏覽器語言</font>
<hr>

> <strong>\# <kbd><font color=#80000, size=2>&lt;html lang="en"&gt;</font></kbd> 包含有關 HTML 頁面的元信息且語言預設為英文</strong>
```htmlembedded==
<html lang="en">
    
</html>
```
#### <font size=5>c. 設定 html 架構</font>
<hr>

> <strong>\# <kbd><font color=#80000, size=2>&lt;head&gt;</font></kbd> 包含有關 HTML 頁面的元素信息，<font color=#cd5c5c>不可見內容的容器</font></strong>
> <strong>\# <kbd><font color=#80000, size=2>&lt;body&gt;</font></kbd> 定義文件的主體，是所有<font color=#cd5c5c>可見內容的容器</font>，例如標題、段落、圖像、超連結、表格、清單等</strong>

#### <font size=5>d. 引用風格</font>
<hr>

> <strong>\# <kbd><font color=#80000, size=2><link></font></kbd> 利用<code class="w3-codespan"><font color=#d2691e>href</font></code>連結引用、超連結, <code class="w3-codespan"><font color=#d2691e>src</font></code>使用他人資源</strong>
```htmlembedded==
<head>
    <title> This is a page's name </title>
    
</head>

<link rel="stylesheet" href="index.css">
<body>
    
</body>
```
<hr>

<font size=5> :file_folder: **範例**</font>

```htmlembedded==
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Page Title</title>
    
</head>
    
<link rel="stylesheet" href="This is a CSS document.">
<body>
    <h1>This is a Heading.</h1>
    <p>This is a paragraph.</p>

</body>
</html>
```
![image](https://hackmd.io/_uploads/rk7277ZxJx.png)
<hr>

### (3) 功能介紹
#### a.  標題
#####  <font size=5>:pig_nose:<font color=#80000> Title</font> - The Head Element</font>
<hr>

###### # 基本定義
> **<p><kbd><font color=#80000, size=2>&lt;title&gt;</font></kbd> 定義文檔的標題。標題必須是純文本，並且顯示在<font color=#cd5c5c>瀏覽器的標題列</font>或頁面的標籤中。</p>**
> **<p><kbd><font color=#80000, size=2>&lt;title&gt;</font></kbd> HTML 文件中需要！！</p>**
> **<p>頁面標題的內容對於搜尋引擎優化（SEO）非常重要！搜尋引擎演算法使用頁面標題來決定在查尋結果中列出頁面時的<font color=#cd5c5c>搜尋順序</font>。</p>**
> **<p><kbd><font color=#80000, size=2>&lt;title&gt;</font></kbd> 功能 :</p>**
> <ul>
  > <strong><li>定義瀏覽器工具列中的標題>定義瀏覽器工具列中的標題</li>
  > <li>當頁面新增到收藏夾時提供頁面標題</li>
    > <li>在搜尋引擎結果中顯示頁面的標題</li></strong>
> </ul>


##### <font size=5>:pig_nose:<font color=#80000> Heading</font> - The Body Element</font>
<hr>

###### # 基本定義
> <p><strong>HTML 標題是您想要在網頁上顯示的<font color=#cd5c5c>標題或副標題</font>。</p>
> <p>HTML 標題是用 <kbd><font color=#80000, size=2>&lt;h1&gt;</font></kbd> 到 <kbd><font color=#80000, size=2>&lt;h6&gt;</font></kbd> 標籤定義的。<br>
> <kbd><font color=#80000, size=2>&lt;h1&gt;</font></kbd> 定義最重要的標題。 <kbd><font color=#80000, size=2>&lt;h6&gt;</font></kbd> 定義最不重要的標題</p>
> <p>搜尋引擎使用標題來索引網頁的<font color=#cd5c5c>結構和內容</font>。<br>
> 使用者經常透過標題瀏覽頁面。使用標題來顯示文件結構非常重要。<br>
> <kbd><font color=#80000, size=2>&lt;h1&gt;</font></kbd> 標題套用於主標題，然後是 <kbd><font color=#80000, size=2>&lt;h2&gt;</font></kbd> 標題，然後是不太重要的 <kbd><font color=#80000, size=2>&lt;h3&gt;</font></kbd> 標題，依此類推。</p>
> <p>文字風格可用 CSS 進行編輯</p>
    
</strong>
<hr>

<font size=5> :file_folder: **範例**</font>

```htmlembedded==
<!DOCTYPE html>
<html lang="en">
<head>
    <title>這是一個批評ccc的page</title>
    
</head>

<body>
    <h1>ccc的批鬥大會正式開始!!!</h1>
    <h2>一、 ccc都不把規則講清楚</h2>
    <h2>二、 ccc都不加分</h2>
    <h2>三、 ccc都在亂改分數</h2>
    <h2>四、 ccc題目還亂出</h2>
    <h2>五、 ccc補考都在補寂寞的</h2>
    <h3>1. 自己評測系統都搞不清楚</h3>
    <h3>2. 出錯題目還不改正</h3>
    <h3>3. 出錯測資也不改</h3>
    <!--以上社團不負言論責任-->
    
</body>
</html>
```
![image](https://hackmd.io/_uploads/rkn9VQ-x1l.png)
<hr>

#### b. 段落
##### <font size=5>:pig_nose:<font color=#80000> Paragraphs</font> - The Body Element</font>
<hr>

###### <strong># 基本定義</strong>
> <strong><p>HTML <kbd><font color=#80000, size=2>&lt;p&gt;</font></kbd> 元素定義一個<font color=#cd5c5c>段落</font>。</p>
> <p>段落總是以新行開始，瀏覽器會自動在段落前後添加一些空白（邊距）。</p>
> <p>無法確定 HTML 將如何顯示。<br>
> 大或小螢幕以及調整大小的視窗都會產生不同的結果。
> 對於 HTML，您無法透過在 HTML 程式碼中新增額外的空格或額外的行來變更顯示。
> 當頁面顯示時，瀏覽器會自動刪除任何多餘的空格和行。</p>
> </strong>

###### <strong># 水平規定</strong>
> <strong>
    > <p><kbd><font color=#80000, size=2>&lt;hr&gt;</font></kbd> 標籤定義 HTML 頁面中的主題中斷，並且最常顯示為<font color=#cd5c5c>水平線</font>。<br>
> <kbd><font color=#80000, size=2>&lt;hr&gt;</font></kbd> 元素用於分隔 HTML 頁面中的內容（或定義變更）：<br>
> <kbd><font color=#80000, size=2>&lt;hr&gt;</font></kbd> 標籤是一個空標籤，這表示它沒有結束標籤。</p>
> </strong>

###### <strong># 段落的換行</strong>
> <strong>
    > <p>HTML <kbd><font color=#80000, size=2>&lt;br&gt;</font></kbd> 元素定義<font color=#cd5c5c>換行</font>符號。<br>
> 如果想要換行（新行）而不開始新段落，請使用 <kbd><font color=#80000, size=2>&lt;br&gt;</font></kbd>：<br>
> <kbd><font color=#80000, size=2>&lt;br&gt;</font></kbd> 標籤是一個空標籤，這表示它沒有結束標籤。</p>
> </strong>
<hr>

<font size=5>:file_folder: **範例**</font>

```htmlembedded==
<!DOCTYPE html>
<html lang="en">
<head>
    <title>這是一個批評ccc的page</title>
    
</head>

<body>
    <h1>Paragraphs - The Body Element</h1>
    <hr>
    <h2># 基本介紹</h2>
    <p>段落總是以新行開始，瀏覽器會自動在段落前後添加一些空白（邊距）。</p>
    <p>無法確定 HTML 將如何顯示。<br>
       大或小螢幕以及調整大小的視窗都會產生不同的結果。
       對於 HTML，您無法透過在 HTML 程式碼中新增額外的空格或額外的行來變更顯示。
       當頁面顯示時，瀏覽器會自動刪除任何多餘的空格和行。</p>
    <h2># 水平規定</h2>
    <h2># 段落的換行</h2>
    
</body>
</html>
```
![image](https://hackmd.io/_uploads/Sk7yH7Zeyg.png)

###### <strong># 常見問題 - The Poem Problem</strong>
> <strong>這首詩欲換行卻顯示在同一行上：</strong>
```htmlembedded==
<p>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</p>
```

![image](https://hackmd.io/_uploads/HkSPB7-gJl.png)

> <strong>解決方法: 
    > HTML <kbd><font color=#80000, size=2>&lt;pre&gt;</font></kbd> 元素定義預先<font color=#cd5c5c>格式化文字</font>。
> <kbd><font color=#80000, size=2>&lt;pre&gt;</font></kbd> 元素內的文字以固定寬度字體（通常是 Courier）顯示，並且保留空格和換行符：
> </strong>
```htmlembedded==
<pre>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</pre>
```
![image](https://hackmd.io/_uploads/HJpiHmWeJl.png)

<hr>

#### c. 表格
##### <font size=5>:pig_nose:<font color=#80000> Tables</font> - The Body Element</font>
<hr>

###### # 基本定義
> <strong><p>HTML 表格可讓 Web 開發人員將資料排列成行和列。</p>
> <p>HTML 中的表格由行和列內的<font color=#cd5c5c>表格儲存格組成</font>。</p>
> <p>每個表格單元格由 <kbd><font color=#80000, size=2>&lt;td&gt;</font></kbd> 和 <kbd><font color=#80000, size=2>&lt;/td&gt;</font></kbd> 標記定義。</p>
> <p><kbd><font color=#80000, size=2>&lt;td&gt;</font></kbd> 和 <kbd><font color=#80000, size=2>&lt;/td&gt;</font></kbd> 之間的所有內容都是<font color=#cd5c5c>表格單元格</font>的內容。</p>
> </strong>

###### # 表格的列
> <strong>
> <p>每個表格行都以 <kbd><font color=#80000, size=2>&lt;tr&gt;</font></kbd> 開始，以 <kbd><font color=#80000, size=2>&lt;/tr&gt;</font></kbd> 標記結束。</p>
> <p>一個表格中可以有任意多的行；只需確保每行中的單元格<font color=#cd5c5c>數量相同</font>即可。</p>
> </strong>

###### # 表格的標題
> <strong>
> <p>有時您希望儲存格成為表格標題儲存格。在這些情況下，請使用 <kbd><font color=#80000, size=2>&lt;th&gt;</font></kbd> 標籤而不是 <kbd><font color=#80000, size=2>&lt;td&gt;</font></kbd> 標籤。</p>
> <p>預設情況下，<kbd><font color=#80000, size=2>&lt;th&gt;</font></kbd> 元素中的文字為粗體且居中，但您可以使用 CSS 變更它。</p>
> </strong>
<hr>

<font size=5>:file_folder: **範例**</font>
```htmlembedded==
<table class="ws-table-all notranslate">
<tbody><tr>
    <th>Type</th>
    <th>Description</th>
    </tr>
    <tr>
    <td>type="1"</td>
    <td>清單項目將以數字編號（預設）</td>
    </tr>
    <tr>
    <td>type="A"</td>
    <td>列表項目將以大寫字母編號</td>
    </tr>
    <tr>
    <td>type="a"</td>
    <td>列表項目將以小寫字母編號</td>
    </tr>
    <tr>
    <td>type="I"</td>
    <td>清單項目將以大寫羅馬數字編號</td>
    </tr>
    <tr>
    <td>type="i"</td>
    <td>列表項目將以小寫羅馬數字編號</td>
    </tr>
</tbody></table>
```
![image](https://hackmd.io/_uploads/BJGg8Q-g1l.png)

<hr>

#### d. 列表
##### <font size=5>:pig_nose:<font color=#80000> Lists</font> - The Body Element</font>
<hr>

###### # 基本定義
> <strong>
> <p>HTML 也支援描述清單。</p>
> <p>描述列表是術語列表，其中包含每個術語的描述。</p>
> <p><kbd><font color=#80000, size=2>&lt;dl&gt;</font></kbd> 標籤定義<font color=#cd5c5c>描述列表</font>，<kbd><font color=#80000, size=2>&lt;dt&gt;</font></kbd> 標籤定義<font color=#cd5c5c>術語（名稱）</font>，<kbd><font color=#80000, size=2>&lt;dd&gt;</font></kbd> 標籤描述<font color=#cd5c5c>每個術語</font>。</p>
> </strong>
> <hr>

<font size=5>:file_folder: **範例**</font>
```htmlembedded==
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
```
![image](https://hackmd.io/_uploads/S1KGUm-gJe.png)

<hr>

#### e. 表單
##### <font size=5>:pig_nose:<font color=#80000> Ordered Lists</font> - The Body Element</font>
<hr>

###### # 基本定義
> <strong>
> <p>HTML <kbd><font color=#80000, size=2>&lt;ol&gt;</font></kbd> 標籤定義一個有序列表。有序列表可以是數字的或字母的。</p>
> <p>有序列表以 <kbd><font color=#80000, size=2>&lt;ol&gt;</font></kbd> 標記開頭。每個列表項都以 <kbd><font color=#80000, size=2>&lt;li&gt;</font></kbd> 標記開頭。</p>
> <p>列表項預設會用<font color=#cd5c5c>數字標記</font>。</p>
> </strong>
<table class="ws-table-all notranslate">
<tbody><tr>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td>type="1"</td>
<td>清單項目將以數字編號（預設）</td>
</tr>
<tr>
<td>type="A"</td>
<td>列表項目將以大寫字母編號</td>
</tr>
<tr>
<td>type="a"</td>
<td>列表項目將以小寫字母編號</td>
</tr>
<tr>
<td>type="I"</td>
<td>清單項目將以大寫羅馬數字編號</td>
</tr>
<tr>
<td>type="i"</td>
<td>列表項目將以小寫羅馬數字編號</td>
</tr>
</tbody></table>
<hr>

<font size=5>:file_folder: **範例**</font>
```htmlembedded==
<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
```
![image](https://hackmd.io/_uploads/HJ99LQ-xJl.png)
<hr>

#### f. 圖片
##### <font size=5>:pig_nose:<font color=#80000> Images</font> - The Body Element</font>
<hr>

###### # 基本定義
> <strong>
> <p>圖像可以改善網頁的設計和外觀。</p>
> <p>HTML <kbd><font color=#80000, size=2>&lt;img&gt;</font></kbd> 標籤用於在網頁中嵌入圖片。</p>
> <p>從技術上講，圖像並未插入網頁；圖像連結到網頁。 <kbd><font color=#80000, size=2>&lt;img&gt;</font></kbd> 標籤為<font color=#cd5c5c>引用影像</font>建立保留空間。</p>
> <p><kbd><font color=#80000, size=2>&lt;img&gt;</font></kbd> 標籤是空的，它只包含屬性，並且沒有結束標籤。</p>
> <p><kbd><font color=#80000, size=2>&lt;img&gt;</font></kbd> 標籤有兩個必要的屬性。</p>
> </strong>

###### # src - <font color=#cd5c5c>指定影像的路徑</font>
> <strong>必需的 <code class="w3-codespan"><font color=#d2691e>src</font></code> 屬性指定映像的路徑 (URL)。
:::warning
注意：當網頁載入時，瀏覽器會從網頁伺服器取得圖像並將其插入到頁面中。因此，請確保圖像實際上保持在與網頁相關的相同位置，否則您的訪客將看到一個損壞的連結圖示。如果瀏覽器找不到圖像，則會顯示損壞的連結圖示和替代文字。
:::
</strong>

###### # alt - <font color=#cd5c5c>指定圖像的替代文本</font>
> <strong><code class="w3-codespan"><font color=#d2691e>alt</font></code> 屬性的值應該描述圖像。
> 圖片無法顯現時出現的文字。
:::warning
注意: 如果使用者因某種原因無法查看圖像（由於連接速度慢、src 屬性中的錯誤或使用者使用螢幕閱讀器），則必需的 alt 屬性會為圖像提供替代文字。
:::
</strong>
<hr>

<font size=5>:file_folder: **範例**</font>
```htmlembedded==
<img src="楊敦傑很累.jpg" width="500" alt="lead要衝秀水">
```
![image](https://hackmd.io/_uploads/By7S_mbgye.png)
<hr>

#### g. 連結
##### <font size=5>:pig_nose:<font color=#80000> Links</font> - The Body Element</font>
<hr>

###### # 基本定義
> <strong>
> <p>HTML 連結是超連結。<br>
> 您可以點擊<font color=#cd5c5c>連結並跳到另一個文件</font>。<br>
> 當您將滑鼠移到連結上時，滑鼠箭頭會變成一隻小手。</p>
> <p>HTML <kbd><font color=#80000, size=2>&lt;a&gt;</font></kbd> 標籤定義超連結。它具有以下語法：<br>
> <kbd><font color=#80000, size=2>&lt;a&gt;</font></kbd> 元素最重要的屬性是 <code class="w3-codespan"><font color=#d2691e>href</font></code> 屬性，它指示連結的目的地。<br>
> 連結文本是讀者可見的部分。<br>
> <font color=#cd5c5c>點擊連結文本，會將讀者發送到指定的 URL 位址。</font></p>
> </strong>
<hr>

<font size=5>:file_folder: **範例**</font>
```htmlembedded==
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
```
:::info
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
:::
<hr>

<i class="fa fa-book"></i> [<font color=###48d1cc>HTML 參考資料</font>](https://www.w3schools.com/html/default.asp)

## 2. CSS(網頁風格)
### 字體
#### <font size=5>:pig_nose:<font color=#80000> Font</font> - The Style Element</font>
##### :star: color
##### :star: size
```htmlembedded==
<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>
```

<i class="fa fa-book"></i> [<font color=###48d1cc>CSS 參考資料</font>](https://www.w3schools.com/css/default.asp)

## 3. JavaScript(網頁互動)
<i class="fa fa-book"></i> [<font color=###48d1cc>JavaScript 參考資料</font>](https://www.w3schools.com/js/default.asp)

## 4. 前端框架(Bootstrap)
### (1) 基礎介紹
* 響應式設計
Bootstrap 的開發以 行動優先 為策略，按照這個策略，我們優先為行動裝置優化程式碼，然後使用 CSS media queries 在必要時放大元件。為了確保全部裝置上有正確渲染和和觸控縮放，將響應式中繼標籤記 添加到你的 <kbd><font color=#80000, size=2>&lt;head&gt;</font></kbd> 中。
* 美化與調整
CSS 中能夠更加直接的調整尺寸

### (2) Bootstrap 前置作業
1. 將 link 引用到
![image](https://hackmd.io/_uploads/SJl7quJzJl.png)

2. 網格系統
<ul>
<li>
<p><strong>我們的網格系統支援 <a href="/docs/5.1/layout/breakpoints/">六個響應式斷點</a>。</strong> 斷點主要是基於 <code>min-width</code> 來設置 media queries, 這代表著它們將會影響該斷點及其上的所有斷點（例如，<code>.col-sm-4</code> 適用於<code>sm</code>，<code>md</code>，<code>lg</code>，<code>xl</code> 和 <code>xxl</code>）。 這也意味著您可以通過每個斷點控制容器和欄的大小以及行為。</p>
</li>
<li>
<p><strong>容器水平居中並填滿內容。</strong> 使用 <code>.container</code> 作為響應式的固定寬度, <code>.container-fluid</code> 的寬度在所有的設備上均為 <code>width: 100%</code>, 而響應式容器 (例如. <code>.container-md</code>) 主要用於搭配流體容器以及固定寬度容器的組合。</p>
</li>
<li>
<p><strong>Rows 與 Columns 的組合。</strong> 每個欄位之間的水平 <code>padding</code> (稱為 gutter)是用來控制兩者之間的間距。 然後在每個列上加上負值抵消這個 <code>padding</code>，以確保每一列中的內容在視覺上沿左側向下對齊。每一行也支持使用修飾符 class，以<a href="#row-columns">統一行與欄的大小</a>和 <a href="/docs/5.1/layout/gutters/">Gutters</a> 來更改內容的間距。</p>
</li>
<li>
<p><strong>欄的靈活性非常高。</strong> 每一行總共有 12 欄，你可以建立一個任意跨越欄的組合。 Column 代表著要跨越的欄數 (例如：<code>col-4</code> 跨越四欄)。 <code>width</code> 將會以百分比作為基準，因此可以確保尺寸的正常.</p>
</li>
<li>
<p><strong>Gutters 可以響應式也可以自定義</strong> 。<a href="/docs/5.1/layout/gutters/">Gutter 類別可用於任何斷點</a>， 其大小會與 <a href="/docs/5.1/utilities/spacing/">margin 和 padding 的間隔</a>相同. 使用 <code>.gx-*</code> 類別來更改水平方向的 Gutters、用 <code>.gy-*</code> 更改垂直方向的 Gutters，或是用 <code>.g-*</code> 更改所有方向的 Gutters。也可以使用 <code>.g-0</code> 來移除所有 Gutters。</p>
</li>
<li>
<p><strong>主要是透過 Sass 變數, maps, 與 mixins 來達到網格系統</strong> 如果您不想在 Bootstrap 中使用預先定義好的網格，那麼你可以考慮使用 <a href="#sass">Grid Sass 原始碼</a> 建立更多客製化的網格系統。我們也包含一些 CSS 自定義屬性，使用這些 Sass 變數，就可以為你提供更大的靈活性。</p>
</li>
</ul>
* 個人資訊

### (3) 利用 Bootstrap 元件製作履歷
1. 容器 (Containers)
><p><strong>(1)</strong><kbd><font color=#80000>&lt;div class="container"&gt;</font></kbd>是一個<font color=#cd5c5c>固定寬度</font>的容器</p>
![image](https://hackmd.io/_uploads/BylL7dBGkx.png)
><li><font size=4 color=#80000><strong>Extra small : </strong></font>超小型螢幕</li>
![image](https://hackmd.io/_uploads/ByU_XurMkx.png)
><li><font size=4 color=#80000><strong>Small : </strong></font>小型螢幕</li>
![image](https://hackmd.io/_uploads/S1TF7_rGJe.png)
><li><font size=4 color=#80000><strong>Medium : </strong></font>中型螢幕</li>
![image](https://hackmd.io/_uploads/HJ-s7_BMJl.png)
><li><font size=4 color=#80000><strong>Large : </strong></font>大型螢幕</li>
![image](https://hackmd.io/_uploads/BywhmuHGJg.png)
><li><font size=4 color=#80000><strong>Extra Large : </strong></font>超大型螢幕</li>
![image](https://hackmd.io/_uploads/rJa6Q_HzJg.png)

><p><strong>(2)</strong><kbd><font color=#80000>&lt;div class="container-fluid"&gt;</font></kbd>是一個<font color=#cd5c5c>全寬</font>容器</p>
![image](https://hackmd.io/_uploads/H1KkN_rGyx.png)
<hr>

2. 間隔 (Spacing)
###### # 基本定義
><strong>
><p>Bootstrap 提供了基於類別的間距工具<br>
>能快速設定元素的外距 (margin) 或內距 (padding)<br>
>可以直接在 HTML 的 <kbd><font color=#80000, size=2>&lt; style &gt;</font></kbd> 屬性中直接定義樣式<br>
>以下是 class 和 style 格式的詳細說明及範例：</p>

<hr>

###### # 使用 Class 設定間距
<strong>
    
><p>Bootstrap 預設定義了一組規則化的類別名稱<br>
>格式為：<kbd><font color=#80000, size=2>&lt; {property}{sides}-{size} &gt;</font></kbd><br></p>
    
>組成規則：
>(1) Property(屬性)：<br>
><li>m：margin（外邊距）</li>
><li>p：padding（內邊距）</li>
    
>(2) Sides (邊)：<br>
><li>t：頂部(top)</li>
><li>b：下方(bottom)</li>
><li>s：起始邊 (根據文字方向，LTR 為左，RTL 為右)</li>
><li>e：結束邊 (LTR 為右，RTL 為左)</li>
><li>x：水平邊 (左右)</li>
><li>y：垂直邊 (上下)</li>
><li>(空白)：適用於所有邊</li>
    
>(3)Size (大小):<br>
><li>0：間距為 0</li>
><li>1-5：間距為 <kbd><font color=#80000, size=2>&lt; $spacer &gt;</font></kbd> 的倍數</li>
><li>auto：自動間距<font color=#cd5c5c>（僅適用於 margin）</font></li>
</strong>

<hr>

<font size=5>:file_folder: **範例**</font>
    

```htmlembedded==
<!-- 設定 margin-top 為 0 -->
<div class="mt-0"></div>
<!-- 設定 margin-bottom 為 $spacer 的 50% -->
<div class="mb-2"></div>
<!-- 設定 padding-left 和 padding-right 為 $spacer -->
<div class="px-3"></div>
<!-- 設定 margin 自動水平置中 -->
<div class="mx-auto"></div>
```

<hr>

###### # 使用 Style 屬性設定間距
<strong>
    
><p>如果需要更靈活的非標準值，或者不想使用 Bootstrap 的預設類別，可以直接在 HTML 的<kbd><font color=#80000, size=2>&lt; style &gt;</font></kbd>屬性中內聯設置間距。<br></p>
    
>格式：
><li>margin: [top] [right] [bottom] [left];</li>
><li>padding: [top] [right] [bottom] [left];</li>
    
>單獨屬性：<br>
><li><kbd><font color=#80000, size=2>&lt;margin-top: ...;&gt;</font></kbd></li>
><li><kbd><font color=#80000, size=2>&lt;margin-bottom: ...;&gt;</font></kbd></li>
><li><kbd><font color=#80000, size=2>&lt;padding-left: ...;&gt;</font></kbd></li>
><li><kbd><font color=#80000, size=2>&lt;padding-right: ...;&gt;</font></kbd></li>
</strong>
    
<hr>    

<font size=5>:file_folder: **範例**</font>
    
```htmlembedded==
<!-- 設定 margin-top 為 10px，margin-bottom 為 20px -->
<div style="margin-top: 10px; margin-bottom: 20px;"></div>
<!-- 設定內距 padding-top 為 15px，padding-right 為 30px -->
<div style="padding-top: 15px; padding-right: 30px;"></div>
<!-- 同時設置所有邊的 margin -->
<div style="margin: 10px 15px 20px 25px;"></div>
```
    
<hr>

<font size=5>:file_folder: **範例(綜合應用)**</font>

```htmlembedded==
<div class="container">
<!-- 原始狀態 -->
    <p style="border: 1px solid;">原始狀態</p>
    <hr>
    <!-- 使用 style 屬性設置 -->
    <p style="border: 1px solid; margin: 80px 0 40px 50px; padding: 20px;">
        設置外間距：上 80px；右 0；下 40px；左 50px<br>
        設置內間距：20px
    </p>
    <hr>
    <!-- 使用 class 設定間距 -->
    <div style="border: 1px solid;" class="mx-5 pt-5">
        外水平間距：5 ($spacer * 3, 約等於 3rem)；<br>
        內上間距：5 ($spacer * 3, 約等於 3rem)
    </div>
```
<div class="container">
<!-- 原始狀態 -->
    <p style="border: 1px solid;">原始狀態</p>
    <hr>
    <!-- 使用 style 屬性設置 -->
    <p style="border: 1px solid; margin: 80px 0 40px 50px; padding: 20px;">
        設置外間距：上 80px；右 0；下 40px；左 50px<br>
        設置內間距：20px
    </p>
    <hr>
    <!-- 使用 class 設定間距 -->
    <div style="border: 1px solid;" class="mx-5 pt-5">
        外水平間距：5 ($spacer * 3, 約等於 3rem)；<br>
        內上間距：5 ($spacer * 3, 約等於 3rem)
    </div>
</div>

<hr>
3. 網格系統
    
><li>每列有<font color=#cd5c5c><strong>12</strong></font>行</li>
><li>六種斷點 : </li>
>
>![image](https://hackmd.io/_uploads/BJLZNOHz1e.png)

<strong>(1)等寬 :</strong> 容器中列(row)<font color=#cd5c5c><strong>平分</strong></font>n等份 (n=行(col)的數量)
>```htmlembedded=
><div class="container">
>   <div class="row">
>       <div class="col bg-light">
>           1 of 3
>       </div>
>       <div class="col bg-primary">
>           1 of 3
>       </div>
>       <div class="col bg-light">
>           1 of 3
>       </div>
>   </div>
></div>
>```
>![image](https://hackmd.io/_uploads/ryqycaHfJl.png)

<strong>(2)設定固定寬度 : </strong> <kbd><font color=#80000>&lt;div class="col-{width}"&gt;</font></kbd>, (width=col寬度)
>```htmlembedded=
><div class="container">
>    <div class="row">
>        <div class="col-6 bg-light">
>           <!--col占6/12行-->
>           6 of 12
>       </div>
>       <div class="col bg-primary">
>           3 of 12
>       </div>
>       <div class="col bg-light">
>           3 of 12
>       </div>
>   </div>
></div>
>```
>![image](https://hackmd.io/_uploads/S1tN4dSMJl.png)

<strong>(3)設定可變動寬度 : </strong><kbd><font color=#80000>&lt;div class="col-{breakpoint}-auto"&gt;</font></kbd>, (breakpoint=xs|xm|md|lg|xl|xxl)
><li>依據<font color=#cd5c5c>字串的寬度</font>自動調整行的寬度</li>
>
>```htmlembedded=
><div class="container">
>    <div class="row">
>        <div class="col-md-2 bg-light">
>            <!--col占6/12行-->
>            6 of 12
>        </div>
>        <div class="col-md-auto bg-primary">
>            3 of 12
>        </div>
>        <div class="col-md-2 bg-light">
>            3 of 12
>        </div>
>    </div>
></div>
>```
>![image](https://hackmd.io/_uploads/HyF8NOrMkl.png)
><li>依據<font color=#cd5c5c>視窗大小</font>決定寬度 : <kbd><font color=#80000>&lt;div class="col-{breakpoint1}-{width1} col-{breakpoint2}-{width2}"&gt;</font></kbd></li>
>
>```htmlembedded=
><div class="container">
>    <div class="row">
>        <!--當視窗大小為中型以上時選擇col-md-4-->
>        <!--否則選擇col-6-->
>        <div class="col-6 col-md-4 bg-light">.col-6 .col-md-4</div>
>        <div class="col-6 col-md-4 bg-primary">.col-6 .col-md-4</div>
>        <div class="col-6 col-md-4 bg-light">.col-6 .col-md-4</div>
>    </div>
></div>
>```
>中型視窗(col-md-4):每行占4/12
>![image](https://hackmd.io/_uploads/BJa0VdHzyl.png)
>小型視窗(col-6):每行占6/12，故最右邊一行被擠到下一列
>![image](https://hackmd.io/_uploads/HkPeSdSfJl.png)

<strong>(4)列與行 : </strong><kbd><font color=#80000>&lt;div class="row row-cols-{num}"&gt;</font></kbd>
>快速設置一列中需有多少(num)行
><li>第一種情況 :</li>
>
>```htmlembedded=
><div class="container">
>    <div class="row row-cols-2">
>        <div class="col bg-light">Column1</div>
>        <div class="col bg-primary">Column2</div>
>        <div class="col bg-light">Column3</div>
>    </div>
></div>
>```
>![image](https://hackmd.io/_uploads/rkLfHdHz1x.png)
><li>第二種情況:</li>
>
>```htmlembedded=
><div class="container">
>    <div class="row row-cols-4">
>        <div class="col bg-light">Column1</div>
>        <div class="col bg-primary">Column2</div>
>        <div class="col-6 bg-light">Column3</div>
>        <div class="col bg-primary">Column4</div>
>    </div>
></div>
>```
>![image](https://hackmd.io/_uploads/B174ruHMkg.png)
>因為第三個col占6行所以剩下的空間(2行)不足以容納下第四個col

<strong>(5)巢狀網格</strong>
>```htmlembedded=
><div class="container">
>    <div class="row bg-dark">
>        <div class="col text-white">
>            Level 1
>        </div>
>        <div class="col">
>            <div class="row bg-primary">
>                <div class="col text-white">
>                    Level 2
>                </div>
>                <div class="col text-white">
>                   Level 2
>               </div>
>           </div>
>       </div>
>       <div class="col text-white">
>           Level 1
>       </div>
>   </div>
></div>
>```
>![image](https://hackmd.io/_uploads/BkKBSdrM1e.png)

<hr>

### 4. 色彩 (Color)
<hr>
    
><strong>
    
><li>設置文字色彩 格式：<kbd><font color=#80000, size=2>&lt; text-{color} &gt;</font></kbd></li> 
><li>設置背景色彩 格式：<kbd><font color=#80000, size=2>&lt; bg-{color} &gt;</font></kbd></li>
>下圖是bootstrap提供的色彩，可以將其填入{color}中：
></strong>
![image](https://hackmd.io/_uploads/BkSMdwXfkl.png)
<hr>

<font size=5>:file_folder: **範例**</font>
    
```htmlembedded==
<div class="bg-primary text-white text-center">
    <p>將背景設置為藍色、文字為白色</p>
</div>
```
<div class="bg-primary text-white text-center">
    <p>將背景設置為藍色、文字為白色</p>
</div>

<hr>

```htmlembedded==
<!DOCTYPE html>
<html lang="zh-TW">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>個人履歷網站</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <!-- Header Section -->
    <header class="bg-primary text-white text-center py-5">
        <h1>我的履歷</h1>
        <p>歡迎來到我的個人履歷網站</p>
    </header>

    <!-- Personal Info Section -->
    <section id="personal-info" class="container py-5">
        <h2 class="text-center">個人資訊</h2>
        <div class="row justify-content-center">
            <div class="col-md-6">
                <ul class="list-group">
                <li class="list-group-item">姓名：施家畯</li>
                    <li class="list-group-item">聯絡方式：zhao@example.com</li>
                    <li class="list-group-item">電話：+886 000 000 000</li>
                </ul>
            </div>
        </div>
    </section>

    <!-- Work Experience Section -->
    <section id="work-experience" class="bg-light py-5">
        <div class="container">
            <h2 class="text-center">工作經歷</h2>
            <div class="row">
                <div class="col-md-4">
                    <div class="card mb-4">
                        <div class="card-body">
                            <h5 class="card-title">Academia Sinica</h5>
                            <p class="card-text">研究助理（2022年至今）</p>
                            <p class="card-text">負責量子計算相關研究及數據分析。</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card mb-4">
                        <div class="card-body">
                            <h5 class="card-title">AppWorks</h5>
                            <p class="card-text">區塊鏈工程師（2018-2022）</p>
                            <p class="card-text">開發 GameFi 和穩定收益金融產品。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer Section -->
    <footer class="bg-dark text-white text-center py-3">
        <p>© 2024 我的履歷網站. 保留所有權利.</p>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>
```
<i class="fa fa-book"></i> [<font color=###48d1cc>Bootstrap 參考資料</font>](https://github.com/Shihjiajyun/GCG_1114)
<i class="fa fa-book"></i> [<font color=###48d1cc>Bootstrap Bootstrap 六角學院</font>](https://bootstrap5.hexschool.com/docs/5.1/getting-started/introduction/)
<i class="fa fa-book"></i> [<font color=###48d1cc>Bootstrap Bootstrap w3c</font>](https://www.w3schools.com/bootstrap/)


# 二、 網頁後端
## 1. Xampp
<i class="fa fa-book"></i> [<font color=###48d1cc>Xampp 參考資料</font>](https://hackmd.io/@cmrdb/SJQC1GlaY)

## 2. PHP
### (1) PHP 基礎入門
#### (a) PHP 基本語法
**PHP標籤**
>PHP程式碼必須寫在<kbd><font color=#80000>&lt;?php</font></kbd>,<kbd><font color=#80000>?&gt;</font></kbd>之間
>以<font color=#80000>分號(;)</font>結尾
>```php=
><?php
>    echo "Hello World!";
>?>
>```
><kbd><font color=#80000>?&gt;</font></kbd>通常省略於純PHP文件中以避免錯誤

**注解**
>```php=
>// 第一種單行注解
>#  第二種單行注解
>/*
>   多行注解
>   多行注解
>*/
>```

**變數與資料型態**
>變數: <kbd><font color=#80000>$</font></kbd> + 字母or底線 + (數字)
>```php=
>$number = 10; //Integer
>$pi = 3.14; //Float
>$text = "John"; //String
>$isTrue = true; //Boolean
>$colors = array("red", "blue", "green"); //Array
>$empty = null; //NULL value
>```
>可利用<kbd><font color=#80000>var_dump()</font></kbd>查看變數型態
>```php=
>var_dump($number); //Output: int(10)
>```

**常量**
>使用<kbd><font color=#80000>define()</font></kbd>定義不可改變的值
>```php=
>define("SITE_NAME", "My Website");
>echo SITE_NAME; //Output: MyWebsite
>```

**運算符**
>1.算數運算符: +(加)、-(減)、*(乘)、/(除)、%(餘)
>2.比較運算符: ==(相等)、!=(不等)、>(大於)、<(小於)
>3.邏輯運算符: &&(AND)、||(OR)、!(NOT)

**字串**
>1.串接: 使用<kbd><font color=#80000>.</font></kbd>串接兩個字串
>```php=
>$firstName = "John";
>$lastName = "Doe";
>$fullName = "John" . " " . "Doe"; //Output: John Doe
>```
>2.插值: 使用雙引號內的變數會被解析、單引號不會
>```php=
>$name = "Alice";
>echo "Hello, $name"; //Output: Hello, Alice
>echo 'Hello, $name'; //Output: Hello, $name
>```

**錯誤與警告**
>1.E_NOTICE: 警告
>2.E_WARNING: 輕微警告
>3.E_ERROR: 致命警告
>```php=
>error_reporting(E_ALL); //顯示所有錯誤
>```

**流程控制**
>1.if...elseif...else
>```php=
><?php
>$score = 85;
>
>if ($score >= 90) {
>    echo "Grade: A";
>} elseif ($score >= 80) {
>    echo "Grade: B";
>} elseif ($score >= 70) {
>    echo "Grade: C";
>} else {
>    echo "Grade: F";
>}
>?>
>```
>2.switch...case
>```php=
><?php
>$day = "Monday";
>
>switch ($day) {
>    case "Monday":
>        echo "Start of the work week.";
>        break;
>    case "Friday":
>        echo "Weekend is coming!";
>        break;
>    case "Sunday":
>        echo "Relax, it's the weekend.";
>        break;
>    default:
>        echo "It's just another day.";
>}
>?>
>```
>3.for loop
>```php=
><?php
>for ($i = 1; $i <= 5; $i++) {
>    echo "Iteration: $i<br>";
>}
>?>
>```
>4.while loop
>```php=
><?php
>$count = 1;
>while ($count <= 5) {
>    echo "Count: $count<br>";
>    $count++;
>}
>?>
>```
>5.do...while loop
>```php=
><?php
>$count = 1;
>
>do {
>    echo "Count: $count<br>";
>    $count++;
>} while ($count <= 5);
>?>
>```
>6.foreach loop: 用於歷遍陣列或物件中所有的元素
>```php=
><?php
>$fruits = array("Apple", "Banana", "Cherry");
>
>foreach ($fruits as $fruit) {
>    echo "Fruit: $fruit<br>";
>}
>?>
>```
>如有鍵值:
>```php=
><?php
>$students = array("John" => 85, "Jane" => 92, "Mark" => 74);
>
>foreach ($students as $name => $score) {
>    echo "$name scored $score<br>";
>}
>?>
>```
>7.控制迴圈
>>可利用break結束迴圈
>>可利用continue進入下一次迴圈

**函數**
>1.傳遞參數
>```php=
>function add($a, $b) {
>    return $a + $b;
>}
>
>echo add(3, 5); // 輸出：8
>```
>2.預設參數
>```php=
>function greet($name = "Guest") {
>    echo "Hello, $name!";
>}
>
>greet(); // 輸出：Hello, Guest!
>greet("Bob"); // 輸出：Hello, Bob!
>```
>3.多參數: 可利用<kbd><font color=#80000>...</font></kbd>接收任意多個參數
>```php=
>function sum(...$numbers) {
>    return array_sum($numbers);
>}
>
>echo sum(1, 2, 3, 4); // 輸出：10
>```
>4.返回值
>>(1)單一值
>>```php=
>>function multiply($a, $b) {
>>    return $a * $b;
>>}
>>
>>echo multiply(4, 5); // 輸出：20
>>```
>>(2)多值
>>```php=
>>function getUserInfo() {
>>    return ["name" => "Alice", "age" => 25];
>>}
>>
>>$user = getUserInfo();
>>echo $user["name"]; // 輸出：Alice
>>```
>5.變數範圍
>>(1)本地變數: 只在函數內部有效
>>```php=
>>function localExample() {
>>    $localVar = "I am local.";
>>    echo $localVar;
>>}
>>
>>localExample(); // 輸出：I am local.
>>
>>```
>>(2)全域變數: 使用global關鍵字存取函數外的變數
>>```php=
>>$counter = 10;
>>
>>function increment() {
>>    global $counter;
>>    $counter++;
>>}
>>
>>increment();
>>echo $counter; // 輸出：11
>>```
>>(3)靜態變數: 使用static關鍵字<font color=#80000>保留</font>函數變數值
>>```php=
>>function staticExample() {
>>    static $count = 0;
>>    $count++;
>>    echo $count;
>>}
>>
>>staticExample(); // 輸出：1
>>staticExample(); // 輸出：2
>>```
>
>6.匿名函數: 可以直接賦值給變數或傳遞作為參數
>```php=
>$greet = function($name) {
>    return "Hello, $name!";
>};
>
>echo $greet("Alice"); // 輸出：Hello, Alice!
>```
>7.閉包: 可以捕捉外部函數
>```php=
>$greeting = "Hello";
>
>$greet = function($name) use ($greeting) {
>    return "$greeting, $name!";
>};
>echo $greet("Bob"); // 輸出：Hello, Bob!
>```
>8.回呼函數: 函數做為另一個函數的參數
>```php=
>function processArray($array, $callback) {
>    foreach ($array as $item) {
>        echo $callback($item) . "<br>";
>    }
>}
>
>$numbers = [1, 2, 3];
>processArray($numbers, function($n) {
>    return $n * 2;
>});
>
>// 輸出：
>// 2
>// 4
>// 6
>```
>9.遞迴函數: 自己呼叫自己
>```php=
>function factorial($n): int { //預設回傳型別為int
>    if ($n == 0) {
>        return 1;
>    }
>    return $n * factorial($n - 1);
>}
>
>echo factorial(5); // 輸出：120
>```
>10.常見函數:
>>(1)字串
>>>(i)  strlen($string): 獲取字串長度
>>>
>>>(ii) strpos($string, $search): 查找子字串
>>>
>>>(iii)str_replace($search, $replace, $subject): 替換字串
>>
>>(2)陣列
>>>(i)  array_push($array, $value): 添加元素到陣列末尾
>>>
>>>(ii) array_merge($array1, $array2): 合併陣列
>>>
>>>(iii)in_array($value, $array): 檢查值是否在陣列中
>>
>>(3)數學
>>>(i)  abs($number): 絕對值
>>>
>>>(ii) pow($base, $exp): 次方運算
>>>
>>>(iii)rand($min, $max): 隨機數

**錯誤與例外處理**
>1.錯誤類型:
>>(1)語法錯誤: 程式與法錯誤，無法執行
>>(2)警告(Warning): 非致命錯誤，可執行
>>(3)通知(Notice): 非嚴重錯誤，可執行
>>(4)致命錯誤(Fatal Error): 致命錯誤，程式停止執行
>```php=
><?php
>echo $undefinedVar; // Notice: 未定義變數
>echo 10 / 0;        // Warning: 除以零
>```
>2.自定義錯誤處理函數: 使用<kbd><font color=#80000>set_error_handler()</font></kbd>
>```php=
><?php
>function customErrorHandler($errno, $errstr, $errfile, $errline) {
>    echo "Error [$errno]: $errstr in $errfile on line $errline<br>";
>    return true; // 表示錯誤已處理，避免顯示 PHP 預設錯誤
>}
>
>set_error_handler("customErrorHandler");
>
>// 觸發錯誤
>echo $undefinedVar; // 自定義錯誤輸出
>?>
>```
>3.錯誤控制運算符<kbd><font color=#80000>@</font></kbd>
>```php=
><?php
>$result = @file("nonexistent.txt"); // 隱藏 Warning 錯誤
>if (!$result) {
>    echo "File not found.";
>}
>?>
>```
>4.try...catch 語法
>```php=
><?php
>try {
>    // 潛在錯誤的程式碼
>    if (!file_exists("test.txt")) {
>        throw new Exception("File not found.");
>    }
>} catch (Exception $e) {
>    // 捕捉例外並處理
>    echo "Error: " . $e->getMessage();
>}
>?>
>```
### (2) 動態履歷網站開發
#### (a) 設計靜態履歷頁面

><p><b>利用 <font color=#cd5c5c>HTML</font> 和 <font color=#cd5c5c>CSS</font> 完成基本版面設計：<br>
>•　使用 HTML 建立標頭區域（<kbd><font color=#80000, size=2>&lt; header &gt;</font></kbd>），顯示網站名稱與簡要介紹。<br>
>•　分區展示「個人資訊」及「工作經歷」，搭配 Bootstrap 排版。<br>
>•　使用 <kbd><font color=#80000, size=2> list-group </font></kbd> 與 <kbd><font color=#80000, size=2> card </font></kbd> 元件整理呈現資料。<br>
</b></p>   
#### (b) 實作表單

###### # <kbd><font color=#80000, size=2>&lt; form &gt;</font></kbd> 標籤與屬性
>1. <kbd><font color=#80000, size=2>&lt; action &gt;</font></kbd>：伺服器接收表單數據的端點。
>•　完整的 URL：完整的 URL，包含協議、域名和路徑。
•　相對路徑：相對於當前文檔的路徑。
•　空值："" 或 不填。
>2. <kbd><font color=#80000, size=2>&lt; method &gt;</font></kbd>：定義提交方式<font color=#cd5c5c>（預設為GET）</font>：
>•　<kbd><font color=#80000, size=2>GET </font></kbd>：將表單數據附加到 URL 作為查詢字串（Query String）傳送，適用於<font color=#cd5c5c>非隱私</font>數據。
•　<kbd><font color=#80000, size=2> POST </font></kbd>：將表單數據放在請求體中（Request Body）發送，適用於<font color=#cd5c5c>敏感</font>數據。
```htmlembedded==
<!--完整的URL-->
    <form action="https://example.com/process-form" method="POST"></form>
<!--表單數據提交到 https://example.com/process-form。-->
    
<!--相對路徑-->
    <form action="/submit" method="POST"></form>
<!--如果當前網站的域名是 https://example.com，表單數據會提交到 https://example.com/submit。-->
    
<!--空值-->
    <form action="" method="POST"></form>
<!--如果當前頁面是 https://example.com/contact，表單數據會提交回 https://example.com/contact。-->

```
    
###### #表單元素
    
>1.  <kbd><font color=#80000, size=2>&lt; label &gt;</font></kbd> 與 <kbd><font color=#80000, size=2>&lt; input &gt;</font></kbd>
>標籤和輸入框組合：
•　<kbd><font color=#80000, size=2>&lt; label &gt;</font></kbd> 提供輸入描述，<kbd><font color=#80000, size=2>&lt; for &gt;</font></kbd> 屬性連結目標輸入框。
常用 <kbd><font color=#80000, size=2>&lt; input &gt;</font></kbd> 屬性：
•　<kbd><font color=#80000, size=2>&lt; type &gt;</font></kbd>：定義輸入類型。
•　<kbd><font color=#80000, size=2>&lt; id &gt;</font></kbd>：用於前端（CSS、JavaScript），標識和操作元素。
•　<kbd><font color=#80000, size=2>&lt; name &gt;</font></kbd>：用於後端伺服器提取與處理數據，<font color=#cd5c5c>若未設置，數據不會傳至伺服器</font>。
•　<kbd><font color=#80000, size=2>&lt; required &gt;</font></kbd>：必填。
```htmlembedded==
<label for="name">姓名:</label>
<input id="name" type="text" name="name" required />
```
>2. <kbd><font color=#80000, size=2>&lt; input &gt;</font></kbd> 類型
>•　文字輸入：<kbd><font color=#80000, size=2>&lt; type="text" &gt;</font></kbd>
•　密碼輸入：<kbd><font color=#80000, size=2>&lt; type="password" &gt;</font></kbd>
•　數字輸入：<kbd><font color=#80000, size=2>&lt; type="number" &gt;</font></kbd>，支持數值範圍、步進值。
•　選擇按鈕：<kbd><font color=#80000, size=2>&lt; type="radio" &gt;</font></kbd> 和 <kbd><font color=#80000, size=2>&lt; type="checkbox" &gt;</font></kbd>
```htmlembedded==
<!--文字輸入-->
<input type="text" name="username" placeholder="輸入文字" />
    
<!--密碼輸入-->
<input type="password" name="password" minlength="8" required />
    
<!--數字輸入-->
<input type="number" name="age" min="1" max="100" step="1" />   
    
<!--單選-->
<input type="radio" name="gender" value="male" /> 
<input type="radio" name="gender" value="female" />
    
<!--複選-->
<input type="checkbox" name="subscribe" value="yes" /> 
```
>3. 特殊輸入類型
>•　電子郵件：<kbd><font color=#80000, size=2>&lt; type="email" &gt;</font></kbd>，可以自動檢查格式
•　選擇檔案：<kbd><font color=#80000, size=2>&lt; type="file" &gt;</font></kbd>
•　選擇數字範圍：<kbd><font color=#80000, size=2>&lt; type="range" &gt;</font></kbd>
```htmlembedded==
<!--電子郵件-->
<input type="email" name="email" required />
<!--選擇檔案-->
<input type="file" name="upload" />
<!--選擇數字範圍-->
<input type="range" name="volume" min="0" max="100" step="10" />
```
###### #多行文字輸入

>1.　輸入長文本：<kbd><font color=#80000, size=2>&lt; textarea &gt;</font></kbd>

```htmlembedded==
<label for="message">留言:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
```
###### #選單與建議列表

>1.　下拉選單：<kbd><font color=#80000, size=2>&lt; select &gt;</font></kbd>
```htmlembedded==
<label for="gender">性別:</label>
<select id="gender" name="gender" required>
  <option value="male">男性</option>
  <option value="female">女性</option>
  <option value="other">其他</option>
</select>
```
>2.　 建議選單：<kbd><font color=#80000, size=2>&lt; datalist &gt;</font></kbd>
    
```htmlembedded==
<label for="city">城市:</label>
<input list="cities" id="city" name="city">
<datalist id="cities">
  <option value="台北市"></option>
  <option value="台中市"></option>
  <option value="高雄市"></option>
</datalist>
```
###### # 按鈕操作
>1.　提交：<kbd><font color=#80000, size=2>&lt; type="submit" &gt;</font></kbd>
2.　重置：<kbd><font color=#80000, size=2>&lt; type="reset" &gt;</font></kbd>
3.　自定義：<kbd><font color=#80000, size=2>&lt; type="button &gt;</font></kbd>（需搭配 JavaScript）
```htmlembedded==
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button" onclick="alert('Hello!')">點擊</button>
```
<hr>
    
<font size=5> :file_folder: **範例**</font>
```htmlembedded==
<!-- 聯繫表單 -->
<section id="contact-form" class="container py-5">
    <h2 class="text-center">聯繫我</h2>
    <!-- 表單容器 -->
    <form action="send_email.php" method="POST">
        <!-- Email 輸入欄位 -->
        <div class="mb-3">
            <label for="email" class="form-label">您的 Email</label>
            <input type="email" class="form-control" id="email" name="email" placeholder="請輸入您的 Email" required>
        </div> 
        <!-- 訊息輸入欄位 -->
        <div class="mb-3">
            <label for="message" class="form-label">訊息內容</label>
            <textarea class="form-control" id="message" name="message" rows="5" placeholder="請輸入您的訊息" required></textarea>
        </div>
        <!-- 提交按鈕 -->
        <div class="text-center">
            <button type="submit" class="btn btn-primary">發送</button>
        </div>
    </form>
</section>
```
### (3) 自動寄送電子郵件功能
#### (a) 基本電子郵件功能介紹
###### # PHP - 驗證名稱
> 下面的程式碼顯示了檢查名稱欄位是否僅包含字母、破折號、撇號和空格的簡單方法。如果名稱欄位的值無效，則儲存錯誤訊息：
```htmlembedded==
$name = test_input($_POST["name"]);
if (!preg_match("/^[a-zA-Z-' ]*$/",$name)) {
  $nameErr = "Only letters and white space allowed";
}
```
###### # PHP - 驗證電子郵件
> 檢查電子郵件地址是否格式正確的最簡單、最安全的方法是使用 <kbd><font color=#80000, size=2> PHPfilter_var() </font></kbd> 函數。在下面的程式碼中，如果電子郵件地址格式不正確，則儲存錯誤訊息：
```htmlembedded==
$email = test_input($_POST["email"]);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
  $emailErr = "Invalid email format";
}
```
###### # PHP - 驗證 URL
> 下面的程式碼顯示了檢查 URL 位址語法是否有效的方法（此正規表示式也允許 URL 中包含破折號）。如果 URL 位址語法無效，則儲存錯誤訊息：
```htmlembedded==
$website = test_input($_POST["website"]);
if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) {
  $websiteErr = "Invalid URL";
}
```
###### # PHP - 驗證姓名、電子郵件和 URL
```htmlembedded==
// define variables and set to empty values
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (empty($_POST["name"])) {
    $nameErr = "Name is required";
  } else {
    $name = test_input($_POST["name"]);
    // check if name only contains letters and whitespace
    if (!preg_match("/^[a-zA-Z-' ]*$/",$name)) {
      $nameErr = "Only letters and white space allowed";
    }
  }
  
  if (empty($_POST["email"])) {
    $emailErr = "Email is required";
  } else {
    $email = test_input($_POST["email"]);
    // check if e-mail address is well-formed
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
      $emailErr = "Invalid email format";
    }
  }
  
  if (empty($_POST["website"])) {
    $website = "";
  } else {
    $website = test_input($_POST["website"]);
    // check if URL address syntax is valid (this regular expression also allows dashes in the URL)
    if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) {
      $websiteErr = "Invalid URL";
    }
  }
  
  if (empty($_POST["comment"])) {
    $comment = "";
  } else {
    $comment = test_input($_POST["comment"]);
  }
  
  if (empty($_POST["gender"])) {
    $genderErr = "Gender is required";
  } else {
    $gender = test_input($_POST["gender"]);
  }
}
```
<hr>
    
<font size=5> :file_folder: **範例**</font>
```htmlembedded==
<?php
// 引入 PHPMailer
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

// 載入 Composer 的自動加載器
require 'vendor/autoload.php';

// 檢查表單是否提交
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 獲取表單資料
    $email = $_POST['email'] ?? '';
    $message = $_POST['message'] ?? '';

    // 驗證 Email 和訊息
    if (filter_var($email, FILTER_VALIDATE_EMAIL) && !empty($message)) {
        // 初始化 PHPMailer
        $mail = new PHPMailer(true);
        try {
            // 郵件伺服器設定
            $mail->isSMTP();                                 // 使用 SMTP
            $mail->Host = 'smtp.gmail.com';                 // SMTP 伺服器
            $mail->SMTPAuth = true;                         // 啟用驗證
            $mail->Username = 'YIUR_EMAIL';       // Gmail 帳號
            $mail->Password = 'YOUR_PASSWORD';        // Gmail 應用程式密碼

            $mail->SMTPSecure = PHPMailer::ENCRYPTION_SMTPS; // 加密方式
            $mail->Port = 465;                              // SMTP 埠號

            // 收件人設定
            $mail->setFrom('YIUR_EMAIL', '履歷網站'); // 這裡仍然使用 SMTP 帳號
            $mail->addAddress('YIUR_EMAIL');         // 收件人（你的信箱）

            // 新增 Reply-To（回覆用戶的 Email）
            $mail->addReplyTo($email, '用戶訊息');

            // 郵件內容設定（支援中文）
            $mail->CharSet = 'UTF-8';                       // 設定字符集為 UTF-8
            $mail->isHTML(true);                            // 設定為 HTML 格式
            $mail->Subject = '履歷網站的聯繫表單訊息';       // 郵件標題（中文）
            $mail->Body = "<h3>來自聯繫表單的訊息</h3>
                           <p><strong>Email:</strong> {$email}</p>
                           <p><strong>訊息內容:</strong></p>
                           <p>{$message}</p>";

            // 發送郵件
            $mail->send();
            echo "訊息已成功寄出！";
        } catch (Exception $e) {
            echo "訊息無法寄出。錯誤: {$mail->ErrorInfo}";
        }
    } else {
        echo "請填寫有效的 Email 和訊息！";
    }
} else {
    echo "無效的請求方法！";
}
?>
```
### (4) 網站優化與總結
#### (a) 簡單安全性優化
使用 Bootstrap 提供的內建功能與工具，有助於快速構建高效且美觀的響應式網站。同時，結合壓縮資產、圖片優化和延遲加載等技巧，能有效減少載入時間並提高 SEO 排名。未來的網站設計應聚焦於用戶需求，將技術實現與使用體驗完美結合。








<i class="fa fa-book"></i> [<font color=###48d1cc>PHP 參考資料</font>](https://www.w3schools.com/php/default.asp)

# 三、 框架

# 四、 競賽題目

# 五、 Google Cloud AI Study Jam 2024 
1. 報名流程
https://rsvp.withgoogle.com/events/csj-tw-2024
2. 會寄google cloud連結到mail
https://www.cloudskillsboost.google/?qlcampaign=6s-TSJ24-90
3. 登陸google cloud
4. 學習Generative AI with Vertex AI: Prompt Design 
https://www.cloudskillsboost.google/paths/118/course_templates/976/labs/489805
5. 結束後登出等5分鐘在登陸確認有209積分

# 六、 上課簡報與影片
## 1. HTML 基本語法
:::spoiler 2024.09.19
<i class="fa fa-camera"></i> **影片**
{%youtube jBgcDR--NaI %}

<i class="fa fa-file-text"></i> **簡報**
{%slideshare aa0983563272/gdg-gdsc-ncue-html-xampp-css-js-todo-list/271934547 %}

:hedgehog: 第一次上課不知道在幹嘛
歡迎重看不用謝 o(\*￣▽￣\*)o 

:::
## 2. CSS 基本語法
:::spoiler 2024.10.05
:hedgehog: 不用上課!!!
o((\*\^▽\^\*))o
<i class="fa fa-camera"></i> **影片**
{%youtube  %}

<i class="fa fa-file-text"></i> **簡報**
{%slideshare aa0983563272/cloud-ai-study-jam-2024-ncue-ai-pdf/272199216 %}

:::
:::spoiler 2024.10.17 
:hedgehog: 文書生日，所以不用上課!!!（沒
o((\*\^▽\^\*))o
:::

## 3. JavaScript 基本語法
:::spoiler 2024.10.31
:hedgehog: 不用上課!!!
o((\*\^▽\^\*))o
:::
:::spoiler 2024.11.14
<i class="fa fa-camera"></i> **影片**
{%youtube EKxUBZQyi7Y %}

<i class="fa fa-file-text"></i> **簡報**
<iframe src="https://www.slideshare.net/slideshow/embed_code/key/hpsUvPFnIRbTSY?hostedIn=slideshare&page=upload" width="476" height="400" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
:::

## 4. Xampp 
:::spoiler 2024.11.28
<i class="fa fa-camera"></i> **影片**
{%youtube _KM0I82TN_8 %}
:::
:::spoiler 2024.12.12

:::

## 5. PHP 基本語法
:::spoiler 2024.12.26

:::

# 七、 課程資訊
## 1. 理念
>🤝 **我們是 GDG on Campus NCUE**
>
>* **一個充滿活力的學生社群，致力於探索和討論最新的資訊技術。**
>
>💡 **我們的目標 是為學習者提供一個互相學習和成長的平臺，讓大家在實際中提升技能，解決真實問題。**
>
>🚀 **加入我們，成為技術社群的一部分，一起在這個充滿機遇的領域中開創未來！**
>
>✨ **現在就加入我們，一起探索無限可能！**

## 2. 幹部簡介
> **(1) 社長: 季正偉-> 最親民社長 aka 學分殺手-> 職位問就是大師等級**
> **(2) 副社長: 施丞澤-> 兼任萬能教學-> 職位是隨叫隨到**
> **(3) 教學: 楊敦傑-> Google 大使-> 職位就是找一堆資源**
> **(4) 副教學: 施家駿-> 區塊鏈大社長**
> **(4) 文書: 郭品辰-> 莫名其妙變秘書-> 職位是呃...好喔**
> **(5) 美宣:**
> **(6) 公關:**
> **(7) 總務:**
> **(8) 顧問: 李仁瑋-> chill哥 aka 仁瑋剪刀-> 職位是只出一張嘴**
> **:hedgehog: 其實有在徵幹部d(`･∀･)b**

## 3. 相關資料
> <strong>(1) GDG NCUE 官網: [<font color=###48d1cc>GDG on Campus National Changhua University of Education - Changhua City, Taiwan</font>](https://gdg.community.dev/gdg-on-campus-national-changhua-university-of-education-changhua-city-taiwan/)
> (2) GDG NCUE youtube: [<font color=###48d1cc>NCUE GDG</font>](https://youtube.com/@ncuegdg?si=EYKQ7hn8xSNtU0L1)
> (3) GDG NCUE ig: [<font color=###48d1cc>gdsc_ncue</font>](https://www.instagram.com/gdsc_ncue?utm_source=ig_web_button_share_sheet&igsh=ZDNlZDc0MzIxNw==)
> :hedgehog: 歡迎追蹤!!!</strong>

---
:fish: 死掉次數 <kbd>1</kbd> 次
> [name=pumpkinnn] [time=Sun, Sep 22, 2024 5:14 AM] [color=#907bf7]

o(＊＾▽＾＊)o♪