今天來説說切版時主要用到的技術之一：HTML5。HTML最為人熟知的就是，常用於設計網頁、行動裝置、應用程式等介面設計，網頁瀏覽器能讀取HTML並轉譯成視覺化網頁，常與CSS、JavaScript同時使用。CSS定義HTML所呈現的樣式、外觀，JavaScript則控制HTML元件的功能、行為。
HTML，全名HyperText Markup Language，又稱「超文本標記語言」，是一種用於建立網頁的標準標記語言，並不是程式語言。目前現行通用的為HTML5，為2014年W3C推薦標準發布。
-- 取自維基百科 HTML
HTML利用「標籤」的形式，告訴瀏覽器這個網頁該如何解讀，最後才會呈現出我們所看到的畫面。而HTML有固定的組成格式：
<p>Hello World!</p> <!--Html由前後標籤為元素名稱，及中間內容組成-->
HTML也提供使用者許多「屬性」，可以幫助控制、設定此元素，也能夠自訂屬性。有些元素會有常帶有的屬性搭配，而class、id這兩個屬性全部元素都可使用，id為元素的命名，在同一網頁頁面中不應重複;class為分類元素，同個類別的元素會受同個class控制。
<p class="mr-10">Hello World!</p> <!--屬性可以幫助控制、設定此元素-->
HTML是使用巢狀結構的編寫方式，每個元素依序排列，一層一層堆疊，在外層設定的樣式，內層的元素也會受外層影響。
以下為HTML最基本的架構：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--主要內容編寫區-->
</body>
</html>
<!--最基本的HTML架構-->
最基本的html、body我就不再描述了，會分標籤是為了讓瀏覽器更快速知道這塊元素所代表的是什麼，也能幫助瀏覽器推薦網頁內容。以下說明幾個常用的標籤(說明是以大部分情況而言)：
header、footer、nav、main、section等這幾個是“語義元素” (semantic element)，也就是「有意義的元素」，幫助瀏覽器知道現在在網頁中的哪個位置。
詳細語義元素說明可以參考 W3School
<body id="home">
<header> <!--header - 網頁中最上方區塊-->
<div id="logo">
<h1>Logo</h1>
</div>
<nav><!--nav - 用來擺放網頁選單的標籤-->
<ul>
<li>
<a href="#home">home</a>
</li>
<li>
<a href="#section1">section1</a>
</li>
<li>
<a href="#section2">section1</a>
</li>
</ul>
</nav>
</header>
<main><!--main - 網頁中間區塊-->
<section id="section1"><!--section - 區塊，每一個section都代表一整個區塊-->
</section>
<section id="section2">
</section>
</main>
<footer><!--footer - 網頁中最下方區塊-->
copyright by luna
</footer>
</body>
其餘的標籤，可能出現在網頁中的任何一個位置。
<h1>hello!</h1>
<h2>這是測試</h2>
<h3>這是h3</h3>
<h4>這是h4</h4>
<h5>這是h5</h5>
<h6>這是h6</h6>
<p>這是文字區塊，相連的p標籤會換行
</p>
<p>這是文字區塊，相連的p標籤會換行<span style="color: red;">但span不會換行</span>
</p>
<p>這是文字區塊，<strong>這是粗體</strong>
</p>
div - 代表一個區塊
h1、h2、h3、h4、h5、h6 - 標題文字，h後數字越小層級越高，字體通常越大。
p - 普通文字，文字類型最常使用的標籤，相連的p標籤會換行。
span - 不換行的文字。
strong - 粗體字
<a href="#" title="" target="">連結</a>
<button>按鈕</button>
<img src="https://picsum.photos/200" alt="">
a - 連結，通常與href(連結網址)、title(替代文字)、target(連結開啟方式)屬性一起搭配。
button - 按鈕
img - 圖檔，通常與src(圖檔位置)、alt(替代文字)屬性一起搭配。
<ul>
<li>ul li清單項目</li>
<li>ul li清單項目</li>
<li>ul li清單項目</li>
</ul>
<ol>
<li>ol li清單項目</li>
<li>ol li清單項目</li>
<li>ol li清單項目</li>
</ol>
ul li - 清單，無順序清單，li為清單項目
ol li - 清單，有順序清單，li為清單項目
<table>
<thead>
<tr>
<td>表頭1</td>
<td>表頭2
</td>
</tr>
</thead>
<tbody>
<tr>
<td>欄位1-1
</td>
<td>欄位1-2
</td>
</tr>
<tr>
<td>欄位2-1
</td>
<td>欄位2-2
</td>
</tr>
</tbody>
</table>
table - 表格，最外層
thead - 表格的表頭
tbody - 表格內容
tr - 一整個橫列
td - 一個欄位
<form>
<label>欄位標題</label>
<input type="text">
</form>
form - 表單
label - 表單中欄位的標題
input - 輸入欄位，通常與type(輸入欄位類型)一起搭配。
<hr>
<p>
<p>這是文字區塊，<br>
換行之後文字就會掉下來
</p>
hr - 水平線
br - 換行
其餘還有其他標籤，今天就先講這些比較常會使用到的，若想更了解HTML可以到W3School查看，你可能會想這些需要背起來嗎？我的答案是不用特別花時間背，在實作的過程中會一直用到這些標籤，慢慢的會很自然地記起來，多練習才是最重要的！
明天要開始講CSS囉～
iThome鐵人賽
看影片追技術