---
# System prepended metadata

title: HTML

---

# HTML

> - HyperText Markup Language
> - Tim Berners-Lee 發明

> - 歷程
>   - HTML(1993) > HTML2(1995) > HTML3.2(1996) > HTML4.0.1(1999) > HTML5(2008)
>   - HTML(1999) > XHTML1.0(2000) > HTML1.1(2001)

> - [w3school](https://www.w3school.com.cn/index.html)
> - [MDN文檔](https://developer.mozilla.org/zh-CN/docs/Web/HTML)
> - [HTML規範](https://whatwg-cn.github.io/html/multipage/)


## 標籤
> - 不區分大小寫, 一般都小寫
> - 雙標籤 vs 單標籤
>   - 雙標籤 `<標籤名></標籤名>`
>     - `/` : 結束符
>     - 需要兩個標籤才能完整描述
>   - 單標籤 `<標籤名 />`
>     - 一個標籤就能描述完成
> - 嵌套 vs 並列
>   - 嵌套
>     ```html
>     <父標籤>
>         <子標籤></子標籤>
>     </父標籤>
>     ```
>   - 並列
>     ```html
>     <兄標籤></兄標籤>
>     <弟標籤></弟標籤>
>     ```

## 結構
```htmlmixed=
<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'/>
    <title></title>
    <link src='style.css' rel='stylesheet' type='text/css'/>
    <script src='xx.js'></script>
  </head>
  <body></body>
</html>
```
### `<!DOCTYPE>`
> - 文檔標籤, 向瀏覽器說明使用哪種協議 ( `html` `xml` ) 與版本
> - `<!DOCTYPE html>` : 使用 html5
> - 放在文檔最前面
### `<meta>`
`<meta charset="UTF-8">` : 編碼方式
> - utf-8: 全世界通用字符集
> - gb2312: 簡中
> - BIG5: 繁中
> - GBK: 繁簡中
### `<base />`
> - 設置全局屬性
> #### 屬性
> - href
> - target
```htmlmixed=
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <base target="_blank">
  </head>
  <body>
    <a href="http://www.google.com">google</a><br />
    <a href="http://www.yahoo.com" target="_self">yahoo</a>
  </body>
</html>
```

### `<title></title>`
> - 標題
### `<link></link>`
> - 連結標籤
> - 常用來引入 CSS
### `<script></script>`
> - JS 標籤
> - 放上面的話, JS 必要時要開 `window.onload`

## Block Level
`<h1>~<h6>` `<p>` `<div>` `<ul><li>` `<ol>`

> - 特點:
>   - 從新行開始(獨佔一行)
>   - 可朔性高
>   - 寬度默認100%
>   - 內容可以隨便塞
>     - 文字類塊級 ( `<p>` `<h1>~<h6>` `dt` ) 只能放文本, 不能放塊級, 否則會有bug :
>     `<p><div></div></p>` 解析後會變成 `<p></p><div></div><p></p>`

### 標題標籤
> - `<h1></h1>` ~ `<h6></h6>`

### `<p></p>`
>   - paragraph

### `<div></div>`
> - 佈局盒子
> - division



## Inline Level
`<a>` `<strong>` `<b>` `<em>` `<i>` `<del>` `<s>` `<ins>` `<u>` `<span>`
> - 特點:
>   - 和相鄰行內元素在一行
>   - 可朔性低
>     - 高寬調整無效
>     - 水平方向可用padding,margin設置
>     - 垂直方向調整無效
>   - 默認寬度為內容本身寬度
>   - 除 `<a>` 外, 內容只能容納文本或其他行內, 不允許塊級
>     - `<a>` 不能再放 `<a>`, 否則點了要連誰？
>     - `<a>` 也不能放 `<input>`

### `<span></span>`
> - span 有一種橫跨一小段距離的意思, 常用來改一小段文字的樣式
> - 有點類似看書畫螢光筆的那段螢光筆的概念

### 文本格式化標籤
> - 小東西常用 i, s , u 來裝, 例如 icon, 但一般都會把樣式清掉

> #### 粗體
> - `<b></b>`
> - `<strong></strong>` (薦)

> #### 斜體
> - `<i></i>`
> - `<em></em>` (薦)

> #### 刪除線
> - `<s></s>`
> - `<del></del>` (薦)

> #### 底線
> - `<u></u>`
> - `<ins></ins>` (薦)


### `<a></a>`
`<a href="跳轉目標URL" target="彈出方式">內容</a>`
```htmlmixed=
<a href="01_課堂練習-新聞頁面.html">課堂練習</a> <br />
<a href="www.google.com">Google</a> <br />
```
> - href:
>   - Hypertext Reference
> #### 錨點定位
> - 常用於長篇頁面, 設定錨點可快速到達
> - `href="#"` 傳送到空錨點
```htmlmixed=
<a href="#test">test</a><br /> <!-- 點擊傳送到 id=text -->
<h3 id="test">
```

> - target:
>   - _self: 默認值, 直接跳轉
>   - _blank: 新窗口






## Inline-Block Level
`<img />` `<input />` `<td>`
> - 特點:
>   - 和相鄰行內元素在一行
>   - 可朔性高
> - inline-block 間會有一點點縫隙, 那是 innerHTML 裡標籤間的空格
>   <img src='https://i.imgur.com/v2LRMVU.png' style='width: 200px;'/><img src='https://i.imgur.com/0pSeonD.png' style='width: 200px;'/>
>   - 解決辦法: 就把父元素的 font-size 設 0 就好了
>   - 或是標籤間不要換行, 只是源碼看起來會很怪

```htmlmixed=
<!-- 解決中間縫隙 -->
<head>
  <meta charset='utf-8'>
  <style>
  body {
    font-size: 0; /* 父層文字大小設為 0 */
  }
  div {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid red;
  }
  </style>
</head>
<body>
  <div></div>
  <div></div>
</body>
```

### `<img />`
> - 圖片標籤

> #### 屬性
> - src
>   `src="圖片的URL"`
>   - img 幾乎是綁定了這個屬性, 沒有 src 的 img 差不多也廢了
>   - 測試用路徑:
>     - `src='https://api.fnkr.net/testimg/大小/背景顏色/字體顏色'`
>       - `https://api.fnkr.net/testimg/100x100/FFF/000`
>     - `src='https://picsum.photos/寬/高?random=1'`
>       - https://picsum.photos/
> - alt
>   `alt="text"`
>   - 圖掛掉時顯示的文字
>   - 可能影響 SEO, 有空要寫
> - title
>   `title="text"`
>   - 鼠標懸停時的文字
> - width & height
>   - `width="Pixel"`
>   - `height="Pixel"`
>   - 寬高只改一個時, 等比縮放
> - border
>   - `border="Num"`
>   - 編框

> #### 其他
> - Icon 資源
>   - [iconfinder](https://www.iconfinder.com/)



## 列表
### 無序列表 
```htmlmixed=
<ul>
  <li>列表項1</li>
  <li>列表項2</li>
  <li>列表項3</li>
  <li>
      <ul>
          <li>111</li>
      </ul>
  </li>
</ul>
```
> - `<ul>` 只能嵌套 `<li>`
> - `<li>` 可以嵌套其他元素

### 有序列表 \<ol>\</ol>
```htmlmixed=
<ol>
    <li>列表項1</li>
    <li>列表項2</li>
    <li>列表項3</li>
    <li>
        <ol>
            <li>111</li>
        </ol>
    </li>
</ol>
```

### 自定義列表
```htmlmixed=
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <dl>
      <dt>名詞1</dt>
      <dd>名詞1解釋1</dd>
      <dd>名詞1解釋2</dd>
      <dd>名詞1解釋3</dd>

      <dt>程式語言</dt>
      <dd>python</dd>
      <dd>c++</dd>
      <dd>java</dd>
    </dl>
  </body>
</html>
```

## 表格 \<table>
> - tr別亂放, td隨便放
> - 表格沒有列元素, 列由行(tr)中的單元格(td)個數決定
```htmlembedded=
<table> <!-- 表格 -->
  <caption>a</caption> <!-- caption : 表格標題 --> 
  <thead> <!-- thead : 表頭 -->   
    <tr> <!-- tr : 行 -->   
      <th>1</th> <!-- th : 表頭單元格 -->
      <th>1</th>
    </tr>
  </thead>
  
  <tbody> <!-- tbody : 表身 -->
    <tr>     
      <td>2</td> <!-- td : 單元格 -->
      <td>2</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
    </tr>
  </tbody>
  
  <tfoot> <!-- tfoot : 表尾 -->
    <tr>
      <td>3</td>
      <td>3</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3</td>
    </tr>
  </tfoot>
</table>
```

### `<table></table>`
> - `border="Pixel"`: 邊框
> - `cellspacing="Pixel"`: 單元格間的距離(默認為2)
> - `cellpadding="Pixel"`: 單元格與內容間的距離(默認為1)
> - `width="Pixel"`: 寬
> - `height="Pixel"`: 高
> - `align="Center/Right/Left"`: 「水平」對齊方式


### `<td></td>`
> - `rowspan="行數"`: 跨行合併
> - `colspan="列數"`: 跨列合併

```htmlembedded=
<!-- 表格標籤 -->
<table border="1" cellspacing="0" cellpadding="1"
width="300" height="100" align="center">

  <caption>LMS</caption> <!-- 表格標題-->

  <thead> <!-- 定義表頭-->
      <tr> <!-- 行標籤 -->
          <th>Name</th> <!-- 表頭標籤-->
          <th>Sex</th>
          <th>Trait</th>
      </tr>
  </thead>

  <tbody> <!-- 定義主體-->
      <tr>
          <td>GodJJ</td> <!-- 單元格標籤-->
          <td>男</td>
          <td rowspan="2">怪怪的</td> <!--跨行合併-->
      </tr>
      <tr>
          <td>Toyz</td>
          <td>男</td>
      </tr>
      <tr>
          <td>Stanly</td>
          <td>男</td>
          <td>哭啊</td>
      </tr>
      <tr>
          <td>七龍珠</td>
          <td colspan="2">Man</td> <!-- 跨列合併-->
      </tr>
  </tbody>   
</table>
```



## 表單標籤
> - 表單三部分
>   - 表單控件
>     - Input
>     - Select
>     - textarea
>     - button
>   - 提示信息
>   - 表單域
### Input 控件
```htmlmixed=
<!--text 文本-->
帳號: <input type="text" value="輸入帳號"/><br />
<!--password -->
  <!-- 常使用maxlength來設定最大長度-->
密碼: <input type="password" maxlength="8"><br />

<!--radio單選-->
  <!--name要設定一樣才有意義-->
性別: 
<input type="radio" name="sex" checked="checked" value="male">男
<input type="radio" name="sex" value="female">女<br />
<!--checkbox多選-->
興趣: 
<input type="checkbox" name="hobby" checked="checked">棒球
<input type="checkbox" name="hobby">藍球<br />


<!-- button普通按鈕-->
<input type="button" value="HAHA"/>
<!-- submit提交紐-->
<input type="submit" />
<!-- reset重置鈕-->
<input type="reset">
<!-- image圖片鈕-->
  <!-- 記得設置圖片src-->
<input type="image" src="trump.jpeg"/ >
<!-- file文件域-->
<input type="file"/>
```
#### 屬性
> - type
>   - text: 單行文本
>   - password: 密碼
>   - radio: 單選按鈕
>   - checkradio: 複選按鈕
>   - button: 普通按鈕
>   - submit: 提交按鈕
>   - reset: 重置按鈕
>   - image: 圖片按鈕
>     - src
>   - file: 文件域

> - name: 控件名
>   - `input.name` 很重要, 
>     - 他是 URL 參數的 key 
>     - 輸入的值 `input.value` 是參數的value
>     - 也就是 `?<input.name>=<input.value>`
> - value: 默認值
> - checked: 定義選擇控鍵默認
> - maxlength: 最大字符數
>   - 正整數
> - size: 空鍵寬度
> - `disabled: disabled` : 讓文本框不能點擊

### label
> - 綁定表單元素, 點擊被綁定的內容, 皆會獲得input焦點
> - 當元素有兩個以上時, 可以使用for來指定id名
```htmlmixed=
<label>帳號: 
<input type="text" value="輸入帳號"/ size="30"></label><br />

<!--for指定two, 點擊時會跳至id="two"那格-->
<label for="two">密碼: 
    <input type="password" maxlength="8">
    <input type="password" maxlength="8" id="two"> 
</label><br />
```

### textarea文本域
`<textarea></textarea>`
#### 屬性
> - cols: 每行字符
> - rows: 顯示行數

### select 下拉菜單
```htmlmixed=
<select>
    <option>1</option>
    <option>2</option>
    <!--selected 默認選項-->
    <option selected="selected">3</option>
</select>
```

### 表單域 form
> - 創建表單, 實現信息收集與傳遞給服務器
> - 每個標單都要有自己的表單域
```htmlmixed=
<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
  </head>
  <body>
      <form action="haha.py" method="post" name="login">
          <input type="text" name="user"/><br />
          <input type="password" name="pwd"/><br />
          <input type="submit"/>
          <input type="reset"/>
      </form>
  </body>
</html>
```
#### 屬性
> - action: 指定要傳給誰，沒指定會傳到當前頁面中
> - method
>   - get: 較快, 但會顯示表單內容 > 不能做密碼提交
>     `/haha?user=123&pwd=456`
>   - post: 慢些, 不會顯示表單內容 > 安全一些
>     `/haha`
> - name


### Button
> - 類似於 `<input type="button"/>`
> - 只是這個是雙標籤
```htmlmixed=
<!-- 差異 
     - 事實上都能用,
     - 如果是送表單, 語意上a就比較不適合, a比較是導覽的概念
     
     - 但是如果懶惰的話, 用 a 比較快(不用清一堆樣式)
     - 如果不考慮清樣式, button 看起來比較清爽且語意比較合
-->
<a>Test</a>
<input type='button' value='Test'/>
<button>Test</button>
  
```

## HTML5


### 常用新標籤
> - `<header>頁面頭部</header>`
> - `<footer>頁面尾部</footer>`
>    - `<header>` 跟 `<footer>` 雖然常常被用在整個頁面的頭尾,
>       所以常常一個頁面可能只有一組這個
>    - 但是這組合可能可以把它想成一個盒子的頭尾區域來使用
> - `<nav>導航鏈接</nav>`
>   - 既然是導航鏈接, 裡面包的應該大多都是 `<a>` 為主體的東西
> - `<article>文章</article>`
> - `<section>節，小區域</section>`
>   - 常見的搭配語意: 章節裡面的文章
> - `<aside>側邊欄</aside>`
> - `<datalist></datalist>`
>   - 標籤製造選項列表, 與input配合使用
>   - 可以製造Google輸入的關聯效果
```htmlmixed=
<input type="text" list="star"/> <!--list連結datalist-->
<datalist id="star">
    <option>彭政閔</option>
    <option>彭恰恰</option>
    <option>林志玲</option>
    <option>林志穎</option>
</datalist>
```
> - fieldset
>   - 搭配legend使用
>   - 效果:
>   ![](https://i.imgur.com/vOJ1pcv.png)

```htmlmixed=
<fieldset>
    <legend>xx</legend>
    oo
</fieldset>
```

> - `<figure></figure>` 與 `<figcaption></figcation>`
>   <img src='https://i.imgur.com/U72wHFT.png' style='width: 100px'/>
```htmlmixed=
<!-- 在做這種盒子的時候, 
     以往可能常常用這種方式來做
     但盒子的語意非常不明確
-->
<body>
  <div>
    <img src=''/>
    <span>圖片描述</span>
  </div>
</body>


<!-- 現在可以考慮使用
     <figure></figure>包<figcaption></figcation>,
     語意上會比較明確些
-->
<figure>
  <div>
    <img src=''/>
    <figcaption>圖片描述</figcaption>
  </div>
</figure>
```

> - `<meter>`
>   - 進度條
>     ![](https://i.imgur.com/HzvhnjB.png)
>   - 屬性
>     `min` : 最小值, 預設為0
>     `max` : 最大值, 預設為1
>     `value` : 當前數值, 必須在 `min` 跟 `max` 之間, 說白了就是顯示進度

```htmlmixed=
<meter value='50' min='0' max='100'></meter>
```




### 常用新Type屬性值
> 這些標籤在手機上效果更明顯, 會依據標籤跳出不同鍵盤
```htmlmixed=
<form>
    email:<input type="email"><br/>
    tel:<input type="tel"><br/><!-- 跳出數字鍵盤-->
    number:<input type="number"><br/> <!--只能輸入數字-->
    url:<input type="url"><br/>
    search:<input type="search"><br/>
    range:<input type="range"><br/>

    time:<input type="time"><br/>
    date:<input type="date"><br/>
    datetime:<input type="datetime"><br/>	
    month:<input type="month"><br/>
    week:<input type="week"><br/>

    color:<input type="color"><br/>	
    <input type="submit"><input type="reset">
</form>
```

### 常用新屬性

```htmlmixed=
<form>
    <!--placeholder: 佔位符-->
    <!--autofocus: 自動獲焦-->
    <input type="text" value="帳號"/><br />
    <input type="text" placeholder="帳號" autofocus/><br />

    <!--multiple: 多文件上傳-->
    <input type="file"/><br />
    <input type="file" multiple/><br />

    <!--
    - autocomplete
      - 紀錄輸入, 自動填資料
      - 必須要有name來儲存紀錄, 且需有提交鈕傳輸資料
      - 預設為on, 另一value為off
    -->
    <input type="text" autocomplete="off" name="haha"/><br />
    <!--required必填-->
    <!--accesskey設定快捷鍵-->
    <input type="text" required accesskey="s"/><br />
    <input type="submit"/>
</form>
```

## 多媒體
```htmlmixed=
<!-- 嵌入: 直接複製貼上-->
<iframe width="400" height="200" src="https://www.youtube.com/embed/jWpGRSh7iCU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


<!-- audio基本寫法
<audio src="兜圈.mp3" autoplay controls loop="-1"></audio>
缺點: 如果瀏覽器不支援該播放格式就掛了, 故可以將src拆出來寫
-->
<audio autoplay controls loop>
    <source src="兜圈.mp3">
    <!-- <source src="兜圈.ogg"> -->
    <!-- 瀏覽器會依序判斷-->
</audio>


<!-- vedio同上
<video src="兜圈.mp4" autoplay controls loop="-1" width="400"></audio>
-->
<video autoplay controls loop width="400">
    <source src="兜圈.mp4">
</video>

<!-- Key
- loop
  - value代表重複播放幾次
  - 不寫或寫-1 代表無限重播
-->
```

## 其他
### \<hr />
> - horizontal
### \<br />
> - break

### 特殊字符
> - 空格 &nbsp;
>   - 不論文本有多少個空格, 解析都只會有一個
>   - 故空格最好都用 &nbsp;
`
G&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;O&nbsp;    D    J    J
`
> - `<` \&lt;
> - `>` \&gt;
>   - 大小於會被當成標籤, 故大小於屬特殊字符
> - `&` \&amp;
>   - & 會被當成特殊字符解析
> - `©` : \&copy;
> - `"` : \&quot
> - `\` : \&apos

### 註釋 
> `<!-- 內容 -->`
> - Sublime 註釋快捷 Ctrl+/


### 為什麼不要全部div+css？
> - 因為一些輔助身障人士的功能是讀取原始碼來告訴他們這邊是標題，那邊是列表，這個列表有一二三項等的
> - Google排序也是依據原始碼來解讀你的網站功能，去找相關資料(Title, Description, Keywords, h1)來排序(SEO)，例如標題，如果都沒有用標題，google怎麼知道你這個網站是在幹嘛的

### 標籤的選擇
> - 簡單說就是根據人性語意去選擇合理的標籤, 只要不違反規則, 例如a包a, p包div等






























