---
# System prepended metadata

title: HTML 常見標籤功能

---

# 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
