1-2 上課範例
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>待辦清單</title>
</head>
<body>
</body>
</html>
viewport 的作用是告訴瀏覽器，目前裝置有多寬(或多高)，以便在縮放時有個基準。尤其當設定頁面寬度需自動調整時，如寬度100%或螢幕由垂直轉為水平， viewport 大小是一個根據。
// 指定螢幕寬度為裝置寬度，畫面載入初始縮放比例 100%
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" >
網頁寬度 width 通常設為手機寬度 device-width，用意是適應各家裝置的大小，這樣寫CSS時就能放心的把版面寬度設為100%。
蘋果在iOS9更新中更改了initial-scale 的用途，故使用shrink-to-fit=no 來替代，以讓網頁的寬度自動適應手機螢幕的寬度。
meta 標籤，及<title></title>來設定頁面名稱meta 標籤主要用於網頁的內容說明，以利自己或搜索引擎使用，有無 meta 標籤，並不影響網頁正常顯示，其最大目的在於提供網頁各種資訊及產生特殊效果。|
標題
|
<h1></h1>（1~6）除了作為標題外，一般也拿來當作網站的架構或大綱。 | ||||
| 段落 | <p></p> | 區塊容器 | <div></div> | 行內容器 | <span></span> |
| 換行 | <br> | 輸出標籤 | <pre></pre> | 引用 | <blockquote></blockquote> |
| 水平線 | <hr> | 註釋標籤 | <!--註釋--> | ||
<p>
<span style="margin-left: 2em;">教育部發放400萬份，每份價值500元的「動滋券」，7月20日至7月26日登記抽籤，依身分證尾數單雙數分流。</span><br>但動滋券網站從凌晨起就被塞爆，許多民眾興匆匆上網登記，網頁無法正常運作，持續一片空白轉圈圈，最後顯示「無法連上這個網站」。
</p>
|
有序列表 |
無序列表 |
定義列表 |
|
<ol> <li>項目1</li> <li>項目2</li> </ol> |
<ul> <li>項目1</li> <li>項目2</li> </ul> |
<dl> <dt>項目名稱</dt> <dd>項目說明</dd> </dl> |
|
<table> <tr><th>表頭1</th><th>表頭2</th></tr> <tr><td>表格1</td><td>表格2</td></tr> </table> |
|
border="1" width="1920" 及表格| 是否完成 | 標題 | 到期日 | 優先順序 | 指派對象 |
|---|