---
# System prepended metadata

title: HTML筆記
tags: [frontend, web]

---

HTML筆記
===
###### tags: `web` `frontend`

## HTML5
1. 是標記（markup）語言，以 tag 組成 Ex:
  ```
  <tagname>
  ```
2. 每組 tag 稱之為 element(元素) Ex: 
  ```
  <tagname>content</tagname>
  ```
3. 每組 tag 描述的內容不同 Ex:
  ```
  <html>、<body>、<h1>、<p>...等
  ```
4. 各組 element 以樹狀結構形成

### DOCTYPE
- 需是第一行代碼
- 讓瀏覽器知道該如何來渲染網頁 
- 沒寫、錯置、誤寫，都會被認定為 quirks mode(怪異模式)

```htmlmixed=
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>我是標題</title>
</head>
<body>
</body>
</html>
```
## 標題
h1~h6，瀏覽器在解析時會有權重之分
```html=
<h1>我是標題</h1>
```

## 段落
```html=
<p>文字段落</p>
```

## 語意標籤
header、aside、section、article、footer
- 可表達資料的意義
- 讓頁面結構化
- 搜尋引擎會依照語意來分析網頁

## 坑
- Text 中的空白，不管連續幾個 space、tab，都只會被渲染出一個空白，可用 ``&nbsp``
- 設定編碼避免中文亂碼，並使用 UTF-8 編碼儲存檔案
  ```html=
  <meta charset="UTF-8" />
  ```

## 小東西
平方
```htmlmixed=
e = mc<sup>2</sup>
```
斜體
```htmlmixed=
<i>我是斜體</i>
```
粗體
```htmlmixed=
<b>我是粗體</b>
```
空白
```htmlmixed=
<p>
&nbsp我前面有一格空白
<!-- 也可以用全形空白 但是其他非中文編碼會出現亂碼 -->
</p>
```
換行
```htmlmixed=
<br />
```
水平線
```htmlmixed=
<hr />
```

## 連結
target為開啟方式，可指定開啟到的視窗名稱(如搭配iframe)，若是沒有同名視窗，則另開新分頁。
``_blank``為在新分頁中開啟(不會直接從當前頁面中跳轉)
``_self``為當前頁面開啟
```htmlmixed=
<a href="#" target="_blank">連結</a>
```
連結可以做成書籤型式
```htmlmixed=
<a href="#s5">第五章</a>
<!-- 也可以跳到別的頁面中的某id -->
<a href="html/page2.html#s5">第五章</a>
<p id="s5">
...
</p>
```
Email連結
```htmlmixed=
<!-- 主旨可不打,即mailto:...就好 -->
<a href="mailto:123@abc.com?subject=Hello!">123@abc.com</a>
```
## 圖片
```html=
<img src="img/logo.png" title="移動到圖片出現的描述" alt="死圖出現的描述"/>
```
路徑分為**相對路徑**、**絕對路徑**
- 相對路徑:``img/logo.png``
- 絕對路徑:``http://xxx/xxx/logo.png``

## 清單
清單有兩種ul(前面都是點點)、ol(有數字排序)
用法
```html=
<ul>
  <li>abcd</li>
  <li>fghj</li>
  <li>123</li>
  <!--可使用巢狀-->
    <ul>
      <li>456</li>
      <li>789</li>
    </ul>
  ...
</ul>
```
```html=
<!--可加可不加開始編號-->
<ol start="5">
  <li>abcd</li>
  <li>fghj</li>
  <li>123</li>
  ...
</ol>
```

## 表格
```htmlmixed=
<!--th是標題的意思 其他項目用td-->
<table>
  <caption>我是表格標題</caption>
  <tr>
    <th>我是第一列第1行</th>
    <th>我是第一列第2行</th>
  </tr>
  <tr>
    <td>我是第二列第1行</td>
    <td>我是第二列第2行</td>
  </tr>
</table>
```
合併
colspan:合併指定欄數
rowspan:合併指定列數
```htmlmixed=
<table>
  <tr>
    <th colspan="2">星期1&星期2</th>
    <!-- <th>星期2</th> -->
    <th>星期3</th>
  </tr>
  <tr>
    <td>國</td>
    <td>英</td>
    <td rowspan="2">數學</td>
  </tr>
  <tr>
    <td>物理</td>
    <td>化學</td>
    <!-- <td>數學</td> -->
  </tr>
</table>
```

## 表單
在form中建立input，有多個input可以用``fieldset``包起來。

### label
``label``可以在輸入欄位前面加上文字，for以及id的指定可以使點擊label文字時，也點擊了輸入欄位。
```htmlmixed=
<!-- 用法1 -->
<label><input type="radio" name="sex" value="m">男性</label>

<!-- 用法2 -->
<input type="radio" name="sex" value="m" id="man">
<label for="man">男性</label>
```

**Attribute**:
- ``type``:輸入類型，``text``,``password``,``file``,``color``,``date``,``reset``,``submit``,``image``,``hidden``
- ``action``:表單送出目的地
- ``placeholder``:未輸入時顯示在表單中的文字
- ``method``分為``post``、``get``:表單訊息出現在網址(預設)
- ``name``:傳送到資料庫時的名字,``value``:傳送到資料庫時的值
- ``maxlength="20"``:輸入不能超過20個字元
- ``minlength="20"``:輸入不能小於20個字元
- ``required``:要求此欄必須輸入
- ``pattern``:正則式
```htmlmixed=
<!-- 表單內容若是含有上傳檔案,須加上enctype... -->
<form action="..." method="post" enctype="multipart/form-data">
  <h2>資料</h2>
  <input type="hidden" name="isNCNU" value="true">
  <label for="mail">電子郵件:</label>
  <input id="mail" type="text" placeholder="請輸入電子郵件" name="mail">
  <label for="photo">Photo:</label>
  <input type="file" id="photo" name="photo">
  <!-- submit、image 皆為提交 -->
  <input type="submit" value="送出">
  <input type="image" src="">
</form>
```

### fieldset
```htmlmixed=
<fieldset>
  <!-- input前可用可不用li -->
  <legned>我是說明文字</legned>
  <li><input type="text">姓名</li>
  <li><input type="text">身分證</li>
  <li><input type="image" src=""></li>
</fieldset>
```

### radio、checkbox
可加上``checked``預設勾選
``radio``為單選
``checkbox``為複選,可以在name加上``[]``,儲存多個選項
```htmlmixed=
<h2>性別</h2>
<input type="radio" name="sex" value="male">男性
<input type="radio" name="sex" value="women">女性
<h2>興趣</h2>
<input type="checkbox" name="hobby[]" value="movie">看電影
<input type="checkbox" name="hobby[]" value="music">聽音樂
<input type="checkbox" name="hobby[]" value="commic">看漫畫
<br>
<input type="submit" value="送出">
```

### select、textarea
可加上``selected``預選選取
``select``為下拉式選單 ``option``為選單中的選項
若``option``沒有設定``value``則回傳內容
``textarea``類似留言板的形式
``cols``表一列可以輸入的字數
``rows``表總共有幾列
```html=
<h2>生日</h2>
<label for="birth">出生年</label>
<select name="birth" id="birth">
  <option value="1997">1997</option>
  <option value="1998">1998</option>
  <option value="1999">1999</option>
</select>
<h2>想說的話</h2>
<textarea name="content" cols="30" rows="10"></textarea>
<br>
<input type="submit" value="送出">
```
### pattern
詳細可看W3C:
https://www.w3schools.com/tags/att_input_pattern.asp
```htmlmixed=
<form>
Email:
<input name="mail" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
</form>
```

## iframe
可以在當前頁面中嵌入另外一個網頁
Ex:粉絲團、影片、Blog...
```html=
<iframe src="要嵌入的網頁網址" width="寬度" height="高度" frameborder="0、1(設0沒有框線)"></iframe>

<p><a href="https://www.w3schools.com/html/" target="iframe_a">W3Schools HTML</a></p>
<p><a href="https://www.w3schools.com/css/" target="iframe_a">W3Schools CSS</a></p>
<iframe height="300px" width="100%" name="iframe_a"></iframe>
```

## head常見語法
```html=
<head>
    <meta charset="UTF-8">
    <title>HTML</title>
    /*網站標題旁的小圖示*/ 
    <link rel="shortcut icon" href="favicon.ico">
    <meta name='keywords' content='網站關鍵字' />
    <meta name='description' content='網站描述文字' />
 
 
    <meta property="og:title" content="FB的標題" />
    <meta property="og:description" content="FB的描述">
    <meta property="og:type" content="website" />
    <meta property="og:url" content="FB上的網址" />
    <meta property="og:image" content="FB的圖片" />
 
    <link href="圖片路徑" rel="apple-touch-icon" />
 
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
 
    <link rel="stylesheet" href="CSS檔案路徑">
    <script type="text/javascript" src="JS檔案路徑"></script>
</head>
```

## 推薦好物
Yahoo工程師開發的框架，RWD或是button、table、form的寫法值得參考
http://purecss.io/


<style>
.ui-infobar { display: none; }    
</style>