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♪