# HTML 常見標籤功能 HTML 簡介 --- 超文本標記語言（英語：**H**yper**T**ext **M**arkup **L**anguage，簡稱：HTML）是一種用於建立網頁的標準**標記語言**。--Wikipedia > **🌵 可以將 HTML 視為建立網頁的主要"結構"。** 標籤功能 --- ### HTML 功能範例 : ```html <!-- 註解 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>網頁標籤頁名稱</title> <link rel="stylesheet" href="css/style.css"> <script src="all.js"></script> </head> <body> <h1>標題</h1> <input type="text"> <div class="wrap"> <ul> <li>項目一</li> <li><a href="https:\\www.google.com">項目二</a></li> <li>項目三</li> </ul> <ol> <li>項目一</li> <li>項目二</li> <li>項目三</li> </ol> </div> <div class="style"> <a href="#">red</a> <a href="#">red</a> <a href="#">red</a> <p class="content">這是段落</p> <p>這是段落</p> </div> <a title="停留時顯示註解" href="https://www.google.com">連到 Google</a> <a target="_blank" href="https://www.google.com">新開分頁連到 Google</a> <a href="https://www.google.com.tw" target="_blank" class="btn">按鈕</a> <div class="box"> <P> 新冠病毒的治療出現曙光，而且研究團隊還是台灣之光！ <hr> <br> 身兼中研院士和台大醫院內科教授<span>楊泮池</span>所帶領的團隊正開發新藥物，可以阻斷新冠病毒感染細胞，劑量足夠的話，抑制病毒感染率甚至可以超過9成，可以說是重大突破。不過因為還在研發中，需要經過動物以及臨床試驗，研究已登上國際期刊<a target="_blank" title="維基百科" href="https://zh.wikipedia.org/wiki/欧洲分子生物学组织">EMBO</a>分子醫學。 </P> <P> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum eaque illo corrupti labore a eum temporibus nam provident, qui laborum inventore aspernatur quas voluptatem soluta aliquid, nisi tempora odio. Laborum. </P> </div> <P class="style2"> 原本治療新冠病毒引發的肺炎主要都靠瑞德西韋救治，幸好國內的中研院院士、台大醫學院內科教授楊泮池團隊藥物研發有了新進展， 台大醫學院內科教授楊泮池說：「它的結構其實是像這樣。」，還以如來神掌比喻，因為新冠病毒是透過棘蛋白結合人體細胞表面的蛋白質ACE2受體感染，而新藥的誘餌抗體，前端也有ACE2受體，可以抓住病毒阻斷感染。 </P> <P class="style1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, laborum.</P> <img src="img/mail.png" alt="資料夾/首頁Logo檔名"> <img src="https://s.yimg.com/cv/apiv2/twfrontpage/logo/TW_desktop_homerun@2x_new.png" alt="網路圖片位置"> <P>段落</P> </body> </html> ``` ### 標籤功能解釋 : ==**<!DOCTYPE html>**== Document Type 宣告文件為HTML5格式 ==**<html lang="en">**== 網頁語法 / language 語系(english) ==**<head>**== 放入網頁起始功能 ==**<meta>**== meta-information 設定目前網頁文件的相關資訊 ==**<meta charset="UTF-8">**== 編碼 ==**<meta name="viewport" content="width=device-width, initial-scale=1.0">**== 指定螢幕寬度為裝置寬度,初始載入畫面縮放比例 (配合不同裝置畫面尺寸優化用) ==**<meta http-equiv="X-UA-Compatible" content="ie=edge">**== 使用舊版IE瀏覽器時更新至新版開啟 ==**< title>**== 網頁標籤頁名稱 ==**<link rel="stylesheet" href="style.css">**== 連接外部資源 / relationship 關係 / stylesheet 樣式表 / hyperlink reference 連結css路徑 **`(快捷輸入 link : css )`** ==**<script src="all.js"></script>**== 連接JavaScript / source 來源路徑 ==**<body>**== 網頁內容 ==**< h1>**== header 標題 (h1~h6 ⇒ 大~小) **`一個網頁只會有一個h1 (*有些會放在logo)`** ==**< p class="style1">**== paragraph 段落 / class 自訂樣式 ==**< hr>**== horizontal rule 水平分隔線 ==**< br>**== break 強制換行 ==**< span>**== 標示以供排版指設定樣式用 ==**< img src="img/logo.png" alt="品牌logo圖片">**== image 圖片 / source 來源路徑(可放圖片原始網址) / alternate 替代文字 (*img不用結束標籤) ==**< a target="_blank" title="指標停留提示文字" href="https://www.google.com">**== anchor 連結錨點 / _blank 連結新開分頁 / hyperlink reference 連結參照網址 / #id移到同頁id處或不同頁id處 ==**< div>**== 標示以供切割版面區塊用 ==**< ul>**== unordered list 無排序列表 **`(*列表適用於同類型、同內容或同功能，盡可能使用列表)`** ==**< ol>**== ordered list 有排序列表 ==**< li>**== list item 列表項目 ==**<input type="text">**== 文字表單輸入欄位(取得的欄位內容皆視為字串) > 學習資源 : [金魚都能懂網頁設計入門](https://www.youtube.com/playlist?list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre) 重點知識 --- - **空元素**(Empty Element / Void Element) 沒有結束標籤的元素，因為沒有內容，如: **`<meta>`**，**`<link>`**，**`<input>`**，**`<img>`**，**`<br>`**，**`<hr>`** - block **區塊元素**特性: - 預設為盡可能滿版，會依照父元素的寬度自適應延伸佔滿 - 會另起一行來呈現 - 如: **`<h1>`**，**`<p>`**，**`<li>`**，**`<div>`** - inline **行內元素**特性: - 比較常用在段落裡 - 沒辦法直接設定寬高 (可以在css改 **`display: block;`**) - 如: **`<a>`**，**`<span>`** - **lorem**+數字: 依數字產生等量的偽文(排版測試用) - **同名id只能有一個** - head跟footer通常會建layout檔作為樣板檔 (動態網頁時layout區塊與個別page區塊會分開) - page.html: 靜態網頁(沒有跟後端要資料) - page.aspx: 動態網頁(有跟後端要資料才顯示) ex.Chrome(發送page.aspx)<->伺服器<->資料庫 - 網頁運作方式: https://developer.mozilla.org/zh-TW/docs/Learn/Server-side/First_steps/Introduction