其實網路上一堆文章可以學習，最近要切版，有點長時間沒有切版，趁這時候紀錄一下
基本HTML骨架
<!DOCTYPE html> // 證明是 html5文件
<html lang="zh-tw"> // 語系
<head>
<meta charset="UTF-8"> // 編碼
<meta http-equiv="X-UA-Compatible" content="IE=edge"> // brower >= IE8
<meta name="viewport" content="width=device-width, initial-scale=1.0"> // RWD
<title>Document</title>
</head>
<body>
... 開始撰寫
</body>
</html>
注意事項
- 一定要有頭也有尾
<p> ... </p> - 程式碼是由上往下閱讀，正常狀況下後方語言覆蓋前方宣告
區塊切割
<header> <!-- 頂部區塊 -->
<nav> <!-- 選單區塊 --> </nav>
</header>
<main> <!-- 主要區塊 -->
<section> <!-- 次要區塊 -->
<div> <!-- 區塊 --> </div>
</section>
</main>
<footer> <!-- 尾部區塊 --> </footer>
表單輸入
<form action="網址" method="GET,POST,PATCH,PUT,DELETE"> <!-- 表單區塊 -->
<label for="input名稱">First name:</label> <!-- 表格簡介 -->
<input type="樣式" name="input名稱"> <!-- 表格 -->
<label for="myTextarea">myTextarea:</label>
<textarea name="myTextarea"></textarea> <!-- 通常用途：編輯文章 -->
<label for="mySelect">Choose mySelect:</label>
<select name="mySelect"> <!-- 下拉選單 -->
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>
<input type="submit" value="Submit"> <!-- 表格(送出按鈕) -->
</form>
(序)列表
<ul>
<li><!-- 樣式： * --><li>
<li><!-- 樣式： * --><li>
<li><!-- 樣式： * --><li>
</ul>
<ol>
<li><!-- 樣式： 1 --><li>
<li><!-- 樣式： 2 --><li>
<li><!-- 樣式： 3 --><li>
</ol>
表格
<table>
<thead><!-- table 頭：通常欄位名 -->
<tr><!-- 列 -->
<th><!-- 欄位： 預設粗體置中--></th>
</tr>
</thead>
<tbody><!-- table 身：資料 -->
<tr><!-- 列 -->
<td><!-- 欄位： 預設正常靠左--></td>
</tr>
</tbody>
<tfoot><!-- table 尾：合計/註解 -->
<tr><!-- 列 -->
<td><!-- 欄位： 預設正常靠左--></td>
</tr>
</tfoot>
</table>
文字
<h1>大標題</h1>
<h2>副標題</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>
<p>文字，會因為視窗縮小而換排</p>
<pre>文字，在編輯的時
候
會因為斷行在視窗顯示時，換行，幾乎不會用</pre>
<a href="https://example.com">超連結</a>
詳細訊息
<!-- 其實這個是我在翻 w3c文件時所看到的功能，我以前沒用過 -->
<details>
<summary>點擊之標題</summary>
<p>內文</p>
</details>
多媒體
<!-- 圖片系列 -->
<!-- 以前只會用 img 而已 後來看到有這項功能，其實也可在HTML指定 RWD，但RWD通常都會寫在css，不會用這個方式撰寫 -->
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
<!-- 影片 -->
<!-- 但是通常都是引用，影音平台分享堪入使用 -->
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>