本篇文章專注於HTML標籤，盡量少提 JavaScript和CSS
一個網頁的格式大致如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Index</title>
...
</head>
<body>
... //元素標籤撰寫處
</body>
</html>
Doctype標籤宣告html文件版本
在過去會看到各式各樣的宣告，如html4：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
在過去的發展中，HTML有各式各樣的版本，目前最新的為HTML5
在HTML5以後只要使用<!DOCTYPE html>就能宣告為網頁文件
以後的版本也只要這樣即可，而且這個標籤能相容於舊瀏覽器
<meta>元素包含在<head>元素內，紀錄網頁的相關資訊
這些資訊並非記載給使用者看，而是提供給搜尋引擎
使用上透過name屬性標註網頁特性，content屬性則記錄特性值，能設定的大致如下：
<meta name="description" content="test page" />
description描述網頁特性給搜尋引擎，最多能用155字元
<meta name="keywords" content="test,html" />
keywords包含了使用者可能用來搜尋此網頁的字詞清單，使用","分隔
目前對搜尋引擎的索引效果已經不大了
<meta name="robots" content="nofollow" />
robots標明搜尋引擎是否該加入頁面到搜尋結果中，不想被加入的話指定值為noindex
若允許加入此頁面，但不加入此頁連結的其他頁面則使用 nofollow
另有http-equiv屬性標註不同目的
<meta http-equiv="author" content="vencil" /> 標註網頁作者
<meta http-equiv="pragma" content="no-cache" /> 指定pragma為no-cache能避免瀏覽器儲存cache
指定頁面語系則使用<meta charset="utf-8">的形式
若要在頁面下註解需使用<!-- 註解 --> 的形式
註解能下在文件中的任何地方，作為提醒或記錄設計者之用，而不會在頁面上顯示出來
我們在網頁中使用的每一項元素均由標籤構成
元素標籤的擺放位置於<body>標籤之中
要寫出良好的網頁便要了解各種標籤的使用方式
每個元素均可被指定 id、class屬性
id能代表在頁面中的特定元素，所以每個id在頁面裡均應為唯一值
class屬性則能對元素進行分類，以方便群組操作
這兩種屬性均常應用在JavaScript操作和CSS套用
<p></p> 段落文字標籤，預設值中瀏覽器會使用新的一行來顯示每個段落
段落之間也會保留一些空間。
<b></b> 粗體標籤
<i></i> 斜體標籤
<sup></sup> 上標，被標注在其中的文字呈現方式就像是數學中的次方
<sub></sub> 下標，和上標相反，常用在註解或化學式
<br /> 斷行標籤
<hr /> 水平線標籤，可以用於區隔不同主題
為了網頁的易讀性，編輯者常在其中加入一些空白
當瀏覽器遇上兩個或以上的空白時，它只會顯示一個
如果遇到斷行也是視為單一空白字元處理
這種處理方式被稱為空白壓縮(white space collapsing)
螢幕閱讀器或搜尋引擎可以使用這些額外資訊
例如搜尋引擎可能會將網頁中用了<blockquote>的內容登錄起來
<strong></strong> 表示內容重要程度，瀏覽器預設以粗體顯示<strong>裡的內容
<em></em> 表示了文義轉折的強調字眼，瀏覽器預設以斜體顯示
<blockquote></blockquote> <blockquote>是標示引述
用在較長的文章篇幅，裡面的內容應該用<p>包著
大多數瀏覽器會將包在裡面的文字縮排
但若僅要縮排效果的話不應該使用這個標籤，應改用CSS達成
<q></q> 用在段落中比較短的引述
因為IE在顯示<q>上會與其他瀏覽器有差異，所以也是有人不使用<q>。
兩種引述標籤都可以使用cite屬性標明引述來源
其值必須要是URL，這樣才能提供更多資訊
<abbr></abbr> 標記縮寫或縮略字，其title屬性可以標記其全名
在HTML4中有一個專門給縮略字用的<acronym>標籤
但HTML5在兩者都使用<abbr>
<cite></cite> 指引讀者參考書籍、電影或論文等。在HTML5中這個標籤不應該用在人名上
<dfn></dfn> 在文件中第一次解釋某些術語時使用(defining instance)
有些瀏覽器會將dfn中的內容顯示為斜體
<address></address> 用來包含網頁作者的聯絡細節，瀏覽器通常以斜體表示
<ins></ins> 用來顯示被出入文件的內容，通常瀏覽器是以加上底線表示
<del></del> 用來顯示被刪除的文字，通常瀏覽器是在文字上加上刪節線表示
<s></s> 此標籤用來標示不再正確(但不該刪掉)的內容
雖然清單標籤有type屬性可以指定編號類型，但最好還是用CSS list-style-type
編號清單(ordered list)標籤<ol></ol>、項目清單標籤(unordered list)<ul></ul>
定義清單稍微特殊一點<dl></dl>
裡面包含<dt></dt>標籤來容納要被定義的名詞，<dd></dd>則容納其解釋
實務上有可能發生複數名詞共用同樣的定義，或同一個名詞有不同定義
清單本身可以做成巢狀結構，瀏覽器也通常會改變符號的樣式
清單使用形式：
<ul>
<li></li>
<li></li>
</ul>
網頁的連結是用<a>元素製作
其href屬性設定欲前往的頁面，如果在同一網域的頁面可以使用相對URL表示
<a> 元素的target屬性若設定成 _blank 則會在新視窗中開啟連結頁面
除了連結到其他頁面外，也可以設定成EMAIL連結，href屬性增加mailto即可，如：
<a href="mailto:a@a.com">mail to a</a>
而如果是要連到同網頁的某個部分，則寫成 <a href="#topBar">連結標題列</a>這樣的形式
href裡填上'#' 和頁面中某個元素的id後就可以連結到該元素
要連結到其他頁面的某個部份則依此類推， <a href="...otherPage/#topBar">...</a>
圖片的標籤是<img>，它是一個空白元素
意思是他沒有結束標籤，而是在標籤結尾增加 "/" 表示內容結束
其中有幾個屬性可以使用：
src指定圖片的位置
alt提供該圖片的文字敘述，當圖片無法顯示時便會以這段文字代替
title屬性提供圖片額外的資訊，大部分瀏覽器的處理方式是滑鼠移到圖片上時會出現提示
height、width屬性現在較常以CSS指定
如果<img>後跟著<h1>、<p>等區塊元素，區塊(block)元素則會在圖片後另起一行
若跟著<b>、<em>、<img>等行內(inline)元素，則不會換行
圖片的格式選擇上
建議當使用一張有許多顏色(雪地、天空等也是，他們並非單色)的圖片時用JPEG
而當圖片顏色較少或單色較多時採用GIF或PNG
因多數桌上型電腦的網頁瀏覽器的解析度是72像素
使用較好解析度的圖片並不會有較好的效果，只會因為檔案變大而增加傳輸成本
HTML5中增加了<figure>元素，他組合了圖片及其解說(<figcaption>標籤)
其中的圖片可以放置一張以上，如果他們共用相同的說明的話
<figure>
<img src="/new.jpg" alt="test" />
<br />
<figcaption>HTML5 feature!</figcaption>
</figure>
網頁的表格可以使用<table>標籤製作
基本的table結構大致如下
<table>
<tr>
<th scope="col">title1</th>
<th scope="col">title5</th>
<th scope="col">title3</th>
</tr>
<tr>
<th scope="row">row title</th>
<td>3</td>
<td>4</td>
</tr>
</table>
<tr> 標籤區分每一列的內容，<td>則表示儲存格，td就是table data的意思
這三種標籤就是表格最基本的組成
<th>的用法和<td>相同，但<th>標籤的意思是欄或列的標題，th=table heading
使用<th>標籤除了方便控制表格外觀外，對於搜尋引擎的檢索也有幫助
<th>可以指定scope屬性來標記他是欄或列的標題
瀏覽器通常會以粗體以及放置於儲存格中央的外觀顯示<th>
<th>或<td>均可指定 colspan (橫向)或 rowspan (縱向)屬性來做到儲存格合併的效果，例如：
<td colspan="2">...</td>
這個<td>標籤會佔據原本橫向<td>的寬度，而該位置原本的兩個<td>就不需要寫了
另外在表格裡面還有些標籤可以使用
<table>
<colgroup>
<col style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<thead>
<tr>...</tr>
</thead>
<tbody>
<tr>...</tr>
</tbody>
<tfoot>
<tr>...</tr>
</tfoot>
</table>
<colgroup>是個有趣的標籤
如果產出的Table要套用不能預先固定的CSS內容，例如依內容調整欄位寬度等
你可以在Table開頭使用這個標籤指定，table的後續欄位會套用<col>上的CSS指定
<thead>標籤放置表格的標題、<tbody>放置內容、<tfoot>放置註腳
製作長表格時可以利用這3種標籤
三者與<th>一樣不會對使用效果有影響，但區別出這些部位對於使用CSS控制外觀有所幫助
一個表單可能會使用多個表單控制項來收集資訊
所有的控制項必須位於<form>元素內
這個標籤的action屬性指定接收被送出資訊的網頁URL
method屬性能指定 get/post
target屬性則能設定回應的顯示方式，共有_self、_blank、_parent、_top、framename
_self是這個屬性的預設值，指定回應顯示在目前的頁面框架中
_blank指定回應顯示在新的視窗/分頁，_parent指定回應顯示在母視窗，_top指定回應顯示在網頁結構上層
其實這個屬性並不常使用，少數會用到的需求則是將此屬性指定為iframe的名稱
這樣一來就可以讓表單送出的回應內容顯示在 iframe 中，有些特殊技巧需藉此達成
表單及其內的控制項通常會指定 id 及 name 屬性
name屬性能讓server side辨識表單及控制項
method指定get時，表單的值會被加到action屬性指定的URL，也因此特性的安全考量
get方法適用於不涉及修改資料庫內容的處理
post方法則會透過HTTP header傳送資料，適用於檔案上傳、有安全需求的處理
需要注意一點的是，雖然控制項能獨立存在，並發揮輸入等功能
但部分功能，特別是HTML5中新增的validation等功能，需要控制項存在於form元素中才能生效
而瀏覽器自動記憶登入過的帳號、密碼也是如此
當然如果是刻意讓登入用的輸入框不會記憶輸入過的資料，則可以讓目標控制項獨立存在
所以如果沒什麼特殊目的的話，撰寫輸入控制項時最好還是將其放在form元素中
<input> 元素經指定其type屬性，能製作幾種不同的表單控制項，<input> 本身是個空白元素
type="text" - 單行的文字輸入欄位
maxlength屬性能限制使用者可輸入的文字數，而size屬性能設定欄位寬度
type="password" - 製作一個顯示上會遮蔽內容的文字輸入欄位，它能使用的屬性同 "text"
type="radio" - 製作單選控制項，name屬性值相同的radio控制項會被視為同一個選項組合
value屬性設定了要送到server的值
checked屬性可以設定"checked"值，表示預先選好的選項
同一組中只能有一個單選按鈕使用這個屬性
注意單選按鈕一旦選取後就無法取消選取，除非選取同一組的其他單選按鈕
所以若只提供一個選項時，使用勾選按鈕會是比較好的做法
type="checkbox" - 勾選按鈕和單選按鈕的使用相同
差別在於它能用來選取同一選項組中的多個選項
type="file" - 製作上傳檔案用的欄位，注意使用時form的method屬性需指定為post
選擇上傳檔案時用的視窗依作業系統而定，無法控制
type="button" - 跟下面提到的<button>標籤可以相互替代，製作一顆沒有功能的按鈕
type="submit" - 按下按鈕會送出表單到server，其value屬性可以設定按鈕上的文字
type="image" - 製作一個使用圖片作為外觀的 submit 按鈕
它能使用src、alt、width、height等<image>標籤能用的屬性
type="reset" - 製作一個清除表單中已輸入的資料的按鈕
type="hidden" - 製作一個隱藏的表單控制項，此控制項不會顯示在頁面上
透過指定其value屬性可以讓我們暗中紀錄並送出某些值
<textarea>元素能製作多行文字的輸入區塊
位在開始標籤和結束標籤之間的文字會出現在文字區塊內
文字區塊內的文字會再送出表單時一併被送到server端
<select>標籤能製作下拉選項
name屬性指定了和被選取的選項值一起送到server的控制項名稱
下拉選項須搭配<option>標籤製作的選項使用，如：
<select name="s">
<option value="op1">option1</option>
<option value="op1">option1</option>
</select>
<option>的起始標籤和結束標籤間的文字會被顯示在下拉選單中
<option>元素使用value屬性指定在該選項被選取時，送到server的值
selected屬性能設定"selected"值指定預先選取的選項
如果沒用selected屬性指定選取的選項，預設會是第一個選項
<select>可另外指定size屬性轉變為多重選擇區塊
size指定的值便是一次顯示出來的選項項目
須注意瀏覽器對此屬性的支援可能不夠好，特別是Mac上的版本
multiple屬性指定為"multiple"值後則能讓使用者能選擇多重選項
選擇時在PC上需按住ctrl鍵，Mac則是command鍵
<button>元素的設計用意是讓使用者自行控制按鈕外觀
其type屬性共有三種值 button、submit、reset，預設是submit
所以對於開發人員比較麻煩的是，如果你的button element不打算做submit，一定要設定type屬性
使用上相當於<input>元素，差別在於允許其他元素放置在<buton>元素裡，如：
<button><img src="test.gif" /> test</button> //this sample is almost the same as <input type="image" />
<label>元素如同其名，正是做為控制項的說明標籤存在
<label>元素的for屬性值搭配表單控制項的id屬性更是好用，如：
<input id="demo" type="checkbox" value="r" /><label for="demo">click me!</label>
將label的for屬性指定為控制項的id後就形同一組，點擊label也同時會有點擊checkbox的效果
具有擴大點擊區域、增加使用者易用度的效果在
在JavaScript中要指定for屬性須改用label.htmlFor = "..." 這樣的形式以避免與for關鍵字重複
<fieldset>可以集結相關的表單控制項，大部分的瀏覽器看來fieldset的四周會是以線條包著
在表單內容較長時，很適合讓區域的劃分更明確
<legend>元素放在<fieldset>開始標籤後，做為整組fieldset的標題存在，使用如下：
<fieldset>
<legend>demo fieldset</legend>
<input id="demo" type="checkbox" value="r" />
<label for="demo">click me!</label>
</fieldset>
以上這些用來提交資訊的元素有些共通屬性，大部分是針對表單內的處理
設定 readonly 屬性可以讓元素保持唯讀狀態，無法修改其內容
設定 disabled 屬性會讓元素無法被操作，在大部分瀏覽器看到的效果會套上灰色的區別色
disabled屬性有一個特點滿有趣的，該元素不會跟著表單被送出去，所以常搭配JavaScript使用
<iframe>標籤能製作 inline frame ，能將其他頁面的內容鑲到目前頁面
其中的屬性有 src 指定顯示於框內的頁面URL 、height指定iframe高度、width指定寬度
seamless則是HTML5新增的屬性，能套用到不需要卷軸的iframe上
html5 對表單裡的input控制項增加了許多新特性
以往的一些需要用JavaScript或server端達成的功能可以轉移用html5做
當然考量目前還須對舊瀏覽器相容，還沒辦法完全倚賴html5
各家瀏覽器對於使用上增加了不少協助，對於表單驗證、使用者體驗有很大的提升
以下用一個表單做示範
<form name="html5" action="" method="post">
<fieldset>
<legend>demo fieldset</legend>
<label for="pw1">Password:</label>
<input type="password" name="pw1" id="pw1" required onchange="checkPasswords();" />
<br />
<label for="pw2">Confirm Password:</label>
<input type="password" name="pw2" id="pw2" required onchange="checkPasswords();">
<br />
<button onclick="document.html5.pw1.checkValidity();">Check Validity</button>
<br />
<label for="pd">patternDemo</label>
<input id="pd" type="text" autofocus pattern="[0-9]+" />
<br />
<label for="search">search</label>
<input id="search" type="search" placeholder="enter word" autocomplete="on" />
<br />
<label for="number">number</label>
<input id="number" type="number" min="1" max="13" step="2" value="3" />
<br />
<label for="range">range</label>
<input id="range" type="range" min="1" max="13" step="2" value="3" />
<br />
<label for="url">url</label>
<input id="url" type="url" />
<br />
<label for="color">color</label>
<input id="color" type="color" />
<br />
<label for="mail">email</label>
<input id="mail" type="email" />
<br />
<label for="date">Date</label>
<input id="date" type="date" required />
<br />
<input type="submit" value="submit" />
</fieldset>
</form>
<script>
function checkPasswords() {
var pass1 = document.getElementById("pw1");
var pass2 = document.getElementById("pw2");
if (pass1.value != pass2.value) pass1.setCustomValidity("密碼不同");
else pass1.setCustomValidity("");
}
</script>
首先第一部分先來觀察 password 組的情況
password裡增加了 required 特性
增加了此特性的欄位為必填欄位，瀏覽器會針對未填寫值的必填欄位做提醒
在HTML4的規範中，每種屬性值都必須有值
所以若要符合HTML4的標準也常看到 required = "required" 這樣的寫法
其餘HTML5新增的屬性也是依此類推
每當兩個password被鍵入文字時都會呼叫checkPasswords()比對
透過HTML5新增的 setCustomValidity() 設定驗證狀態的文字
當表單被送出或Check Validity按鈕按下時的 checkValidity() 這個HTML5方法均會觸發控制項的驗證
當然後者因只指定document.html5.password1做驗證，不影響其他控制項
以此例來說，會先驗證 required 值，若均無填寫密碼，則會優先提醒需輸入密碼
若有輸入密碼後才會跳出 setCustomValidity() 設定的驗證狀態
另外就是經過測試，控制項的<input type="button" />無法觸發checkValidity();
但<button>元素則可以，這點就當作測試時的小細節吧
要取得驗證結果的另一方法是藉由取得控制項的驗證物件後
再透過其valid屬性得知驗證結果，如下：
var pwCheck = document.getElementById("password").validity;
if(pwCheck.valid){....}
接著看 patternDemo
這裡設定了 autofocus ，一樣常見到 autofocus = "autofocus" 的寫法
表單中會自動focus在唯一被設定的元素上，若有複數的元素設定此屬性則無效
pattern裡可輸入正規表示法做驗證，例如此處便限制 pd 只能輸入數字
type="search" 製作一個搜尋輸入框
placeholder屬性為輸入框中的輸入提示文字，外觀多半為灰色，在使用者開始輸入後就消失了
autocomplete屬性則選擇是否讓自動完成功能開啟(on/off)
type="number" 和 type="range" 相近，均是讓使用者選定範圍內的數字
只是呈現方式有別，後者外觀是橫向的拖曳軸
min 和 max 可指定其上下限，step是一次變動的數值量，value屬性則能指定預設值
type="url" 會驗證輸入的內容是否為url
如果不是(猜測是不含.com結尾之類的)則瀏覽器會提示驗證失敗，需輸入正確格式後才能送出表單資訊
type="color" 製作一個顏色選擇器
type="email" 會驗證輸入內容是否為mail網址(推測是判斷@符號和.com之類的網址結尾)
type="date" 製作日期選擇器，個人認為這是各家瀏覽器實作上差異最多的部分
例如safari核心的瀏覽器可能會是一個很漂亮的轉輪選擇器
影片的播放已經在網路上的常見需求，而HTML5規格提出的時候也有相關的規定
現在已經可以透過<video>標籤來直接撥放影片，而不需要另外透過第三方外掛(如：Flash)
如果要讓舊瀏覽器支援，也有open source的video4all可以選擇
只是瀏覽器因編碼格式的專利規範或權利金等因素，而有不同的支援，使用時要特別注意
目前Chrome支援的編碼種類最廣；Firefox支援webM、Ogg；IE和Safari則支援mp4
使用時最好預先提供數種格式，使用如下：
<video controls preload="metadata" poster="images/test.png">
<source src="test.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="test.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="test.ogv" type='video/ogg; codecs="theora, vorbis"' />
<p>test HTML video tag</p>
</video>
影片來源可以直接寫在video標籤的src屬性中
但如果有提供多種格式，也可以像範例一樣寫在<source>標籤裡
瀏覽器播放時會從從頭開始檢查，如果碰到支援的格式，就會設定播放該影片
假如<source>標籤沒有指定type，則瀏覽器會下載部分影片測試是否能撥放，如此會浪費一些頻寬
不支援<video>標籤的瀏覽器，會因此只顯示出標籤內的文字
video標籤有幾個屬性，controls會開啟瀏覽器提供的影片撥放控制器
preload屬性有三種設定值 -
"none"為在使用者按下撥放前，不預先載入影片，"auto"則是網頁載入時自動載入影片
"metadata"則是僅收集影片相關資訊，如片長、大小、撥放清單等
autoplay屬性則是設定後，影片會自動撥放
loop屬性則是設定撥放完畢後會重新撥放
poster設定播放前或影片還在下載時，預先展示的影像
<audio>標籤和<video>標籤類似，用途是撥放音樂，如：
<audio controls="controls" autoplay loop>
<source src="/sound/test.mp3" type="audio/mp3" />
<source src="/sound/test.ogg" type="audio/ogg" />
<source src="/sound/test.aac" type="audio/aac" />
<source src="/sound/test.wav" type="audio/x-wav" />
</audio>
preload、autoplay、loop、controls等屬性用途也幾乎同<video>
有些元素在使用上會在瀏覽器裡另起一行，被稱為區塊層級元素(block level)
包含了<h1>、<p>、<ul>、<li>等
有些元素則會和鄰近元素保持在同一行，被稱為行內元素(inline)
包含了<a>、<b>、<em>、<img>等
HTML裡提供了<div>、<span>兩種標籤來進行元素的群組分類
<div>可以將一組元素組合成一個區塊層級的方塊
使用上會將裏頭的內容另起一行，而透過id和class屬性的使用也會讓管理及外觀操作更加方便
<span>則是<div>的行內版本，適用於1.區隔部分文字 2.容納數個行內元素
因為過往常見<div>的大量使用(濫用)，HTML5提出了一些標籤讓元素的群組分類更明確
這些標籤待日後補上整理
一個網頁的格式大致如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Index</title>
...
</head>
<body>
... //元素標籤撰寫處
</body>
</html>
Doctype標籤宣告html文件版本
在過去會看到各式各樣的宣告，如html4：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
在過去的發展中，HTML有各式各樣的版本，目前最新的為HTML5
在HTML5以後只要使用<!DOCTYPE html>就能宣告為網頁文件
以後的版本也只要這樣即可，而且這個標籤能相容於舊瀏覽器
<meta>元素包含在<head>元素內，紀錄網頁的相關資訊
這些資訊並非記載給使用者看，而是提供給搜尋引擎
使用上透過name屬性標註網頁特性，content屬性則記錄特性值，能設定的大致如下：
<meta name="description" content="test page" />
description描述網頁特性給搜尋引擎，最多能用155字元
<meta name="keywords" content="test,html" />
keywords包含了使用者可能用來搜尋此網頁的字詞清單，使用","分隔
目前對搜尋引擎的索引效果已經不大了
<meta name="robots" content="nofollow" />
robots標明搜尋引擎是否該加入頁面到搜尋結果中，不想被加入的話指定值為noindex
若允許加入此頁面，但不加入此頁連結的其他頁面則使用 nofollow
另有http-equiv屬性標註不同目的
<meta http-equiv="author" content="vencil" /> 標註網頁作者
<meta http-equiv="pragma" content="no-cache" /> 指定pragma為no-cache能避免瀏覽器儲存cache
指定頁面語系則使用<meta charset="utf-8">的形式
若要在頁面下註解需使用<!-- 註解 --> 的形式
註解能下在文件中的任何地方，作為提醒或記錄設計者之用，而不會在頁面上顯示出來
我們在網頁中使用的每一項元素均由標籤構成
元素標籤的擺放位置於<body>標籤之中
要寫出良好的網頁便要了解各種標籤的使用方式
每個元素均可被指定 id、class屬性
id能代表在頁面中的特定元素，所以每個id在頁面裡均應為唯一值
class屬性則能對元素進行分類，以方便群組操作
這兩種屬性均常應用在JavaScript操作和CSS套用
結構標籤
<h1></hi>~<h6></h6> 標題標籤，h1最大，h6最小<p></p> 段落文字標籤，預設值中瀏覽器會使用新的一行來顯示每個段落
段落之間也會保留一些空間。
<b></b> 粗體標籤
<i></i> 斜體標籤
<sup></sup> 上標，被標注在其中的文字呈現方式就像是數學中的次方
<sub></sub> 下標，和上標相反，常用在註解或化學式
<br /> 斷行標籤
<hr /> 水平線標籤，可以用於區隔不同主題
為了網頁的易讀性，編輯者常在其中加入一些空白
當瀏覽器遇上兩個或以上的空白時，它只會顯示一個
如果遇到斷行也是視為單一空白字元處理
這種處理方式被稱為空白壓縮(white space collapsing)
語法標籤
語法標籤用在更精確地描述網頁內容螢幕閱讀器或搜尋引擎可以使用這些額外資訊
例如搜尋引擎可能會將網頁中用了<blockquote>的內容登錄起來
<strong></strong> 表示內容重要程度，瀏覽器預設以粗體顯示<strong>裡的內容
<em></em> 表示了文義轉折的強調字眼，瀏覽器預設以斜體顯示
<blockquote></blockquote> <blockquote>是標示引述
用在較長的文章篇幅，裡面的內容應該用<p>包著
大多數瀏覽器會將包在裡面的文字縮排
但若僅要縮排效果的話不應該使用這個標籤，應改用CSS達成
<q></q> 用在段落中比較短的引述
因為IE在顯示<q>上會與其他瀏覽器有差異，所以也是有人不使用<q>。
兩種引述標籤都可以使用cite屬性標明引述來源
其值必須要是URL，這樣才能提供更多資訊
<abbr></abbr> 標記縮寫或縮略字，其title屬性可以標記其全名
在HTML4中有一個專門給縮略字用的<acronym>標籤
但HTML5在兩者都使用<abbr>
<cite></cite> 指引讀者參考書籍、電影或論文等。在HTML5中這個標籤不應該用在人名上
<dfn></dfn> 在文件中第一次解釋某些術語時使用(defining instance)
有些瀏覽器會將dfn中的內容顯示為斜體
<address></address> 用來包含網頁作者的聯絡細節，瀏覽器通常以斜體表示
<ins></ins> 用來顯示被出入文件的內容，通常瀏覽器是以加上底線表示
<del></del> 用來顯示被刪除的文字，通常瀏覽器是在文字上加上刪節線表示
<s></s> 此標籤用來標示不再正確(但不該刪掉)的內容
功能性標籤
清單的項目均是用<li>標籤表示(list item)，在預設值下瀏覽器會縮排清單雖然清單標籤有type屬性可以指定編號類型，但最好還是用CSS list-style-type
編號清單(ordered list)標籤<ol></ol>、項目清單標籤(unordered list)<ul></ul>
定義清單稍微特殊一點<dl></dl>
裡面包含<dt></dt>標籤來容納要被定義的名詞，<dd></dd>則容納其解釋
實務上有可能發生複數名詞共用同樣的定義，或同一個名詞有不同定義
清單本身可以做成巢狀結構，瀏覽器也通常會改變符號的樣式
清單使用形式：
<ul>
<li></li>
<li></li>
</ul>
網頁的連結是用<a>元素製作
其href屬性設定欲前往的頁面，如果在同一網域的頁面可以使用相對URL表示
<a> 元素的target屬性若設定成 _blank 則會在新視窗中開啟連結頁面
除了連結到其他頁面外，也可以設定成EMAIL連結，href屬性增加mailto即可，如：
<a href="mailto:a@a.com">mail to a</a>
而如果是要連到同網頁的某個部分，則寫成 <a href="#topBar">連結標題列</a>這樣的形式
href裡填上'#' 和頁面中某個元素的id後就可以連結到該元素
要連結到其他頁面的某個部份則依此類推， <a href="...otherPage/#topBar">...</a>
圖片的標籤是<img>，它是一個空白元素
意思是他沒有結束標籤，而是在標籤結尾增加 "/" 表示內容結束
其中有幾個屬性可以使用：
src指定圖片的位置
alt提供該圖片的文字敘述，當圖片無法顯示時便會以這段文字代替
title屬性提供圖片額外的資訊，大部分瀏覽器的處理方式是滑鼠移到圖片上時會出現提示
height、width屬性現在較常以CSS指定
如果<img>後跟著<h1>、<p>等區塊元素，區塊(block)元素則會在圖片後另起一行
若跟著<b>、<em>、<img>等行內(inline)元素，則不會換行
圖片的格式選擇上
建議當使用一張有許多顏色(雪地、天空等也是，他們並非單色)的圖片時用JPEG
而當圖片顏色較少或單色較多時採用GIF或PNG
因多數桌上型電腦的網頁瀏覽器的解析度是72像素
使用較好解析度的圖片並不會有較好的效果，只會因為檔案變大而增加傳輸成本
HTML5中增加了<figure>元素，他組合了圖片及其解說(<figcaption>標籤)
其中的圖片可以放置一張以上，如果他們共用相同的說明的話
<figure>
<img src="/new.jpg" alt="test" />
<br />
<figcaption>HTML5 feature!</figcaption>
</figure>
網頁的表格可以使用<table>標籤製作
基本的table結構大致如下
<table>
<tr>
<th scope="col">title1</th>
<th scope="col">title5</th>
<th scope="col">title3</th>
</tr>
<tr>
<th scope="row">row title</th>
<td>3</td>
<td>4</td>
</tr>
</table>
<tr> 標籤區分每一列的內容，<td>則表示儲存格，td就是table data的意思
這三種標籤就是表格最基本的組成
<th>的用法和<td>相同，但<th>標籤的意思是欄或列的標題，th=table heading
使用<th>標籤除了方便控制表格外觀外，對於搜尋引擎的檢索也有幫助
<th>可以指定scope屬性來標記他是欄或列的標題
瀏覽器通常會以粗體以及放置於儲存格中央的外觀顯示<th>
<th>或<td>均可指定 colspan (橫向)或 rowspan (縱向)屬性來做到儲存格合併的效果，例如：
<td colspan="2">...</td>
這個<td>標籤會佔據原本橫向<td>的寬度，而該位置原本的兩個<td>就不需要寫了
另外在表格裡面還有些標籤可以使用
<table>
<colgroup>
<col style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<thead>
<tr>...</tr>
</thead>
<tbody>
<tr>...</tr>
</tbody>
<tfoot>
<tr>...</tr>
</tfoot>
</table>
<colgroup>是個有趣的標籤
如果產出的Table要套用不能預先固定的CSS內容，例如依內容調整欄位寬度等
你可以在Table開頭使用這個標籤指定，table的後續欄位會套用<col>上的CSS指定
<thead>標籤放置表格的標題、<tbody>放置內容、<tfoot>放置註腳
製作長表格時可以利用這3種標籤
三者與<th>一樣不會對使用效果有影響，但區別出這些部位對於使用CSS控制外觀有所幫助
一個表單可能會使用多個表單控制項來收集資訊
所有的控制項必須位於<form>元素內
這個標籤的action屬性指定接收被送出資訊的網頁URL
method屬性能指定 get/post
target屬性則能設定回應的顯示方式，共有_self、_blank、_parent、_top、framename
_self是這個屬性的預設值，指定回應顯示在目前的頁面框架中
_blank指定回應顯示在新的視窗/分頁，_parent指定回應顯示在母視窗，_top指定回應顯示在網頁結構上層
其實這個屬性並不常使用，少數會用到的需求則是將此屬性指定為iframe的名稱
這樣一來就可以讓表單送出的回應內容顯示在 iframe 中，有些特殊技巧需藉此達成
表單及其內的控制項通常會指定 id 及 name 屬性
name屬性能讓server side辨識表單及控制項
method指定get時，表單的值會被加到action屬性指定的URL，也因此特性的安全考量
get方法適用於不涉及修改資料庫內容的處理
post方法則會透過HTTP header傳送資料，適用於檔案上傳、有安全需求的處理
需要注意一點的是，雖然控制項能獨立存在，並發揮輸入等功能
但部分功能，特別是HTML5中新增的validation等功能，需要控制項存在於form元素中才能生效
而瀏覽器自動記憶登入過的帳號、密碼也是如此
當然如果是刻意讓登入用的輸入框不會記憶輸入過的資料，則可以讓目標控制項獨立存在
所以如果沒什麼特殊目的的話，撰寫輸入控制項時最好還是將其放在form元素中
<input> 元素經指定其type屬性，能製作幾種不同的表單控制項，<input> 本身是個空白元素
type="text" - 單行的文字輸入欄位
maxlength屬性能限制使用者可輸入的文字數，而size屬性能設定欄位寬度
type="password" - 製作一個顯示上會遮蔽內容的文字輸入欄位，它能使用的屬性同 "text"
type="radio" - 製作單選控制項，name屬性值相同的radio控制項會被視為同一個選項組合
value屬性設定了要送到server的值
checked屬性可以設定"checked"值，表示預先選好的選項
同一組中只能有一個單選按鈕使用這個屬性
注意單選按鈕一旦選取後就無法取消選取，除非選取同一組的其他單選按鈕
所以若只提供一個選項時，使用勾選按鈕會是比較好的做法
type="checkbox" - 勾選按鈕和單選按鈕的使用相同
差別在於它能用來選取同一選項組中的多個選項
type="file" - 製作上傳檔案用的欄位，注意使用時form的method屬性需指定為post
選擇上傳檔案時用的視窗依作業系統而定，無法控制
type="button" - 跟下面提到的<button>標籤可以相互替代，製作一顆沒有功能的按鈕
type="submit" - 按下按鈕會送出表單到server，其value屬性可以設定按鈕上的文字
type="image" - 製作一個使用圖片作為外觀的 submit 按鈕
它能使用src、alt、width、height等<image>標籤能用的屬性
type="reset" - 製作一個清除表單中已輸入的資料的按鈕
type="hidden" - 製作一個隱藏的表單控制項，此控制項不會顯示在頁面上
透過指定其value屬性可以讓我們暗中紀錄並送出某些值
<textarea>元素能製作多行文字的輸入區塊
位在開始標籤和結束標籤之間的文字會出現在文字區塊內
文字區塊內的文字會再送出表單時一併被送到server端
<select>標籤能製作下拉選項
name屬性指定了和被選取的選項值一起送到server的控制項名稱
下拉選項須搭配<option>標籤製作的選項使用，如：
<select name="s">
<option value="op1">option1</option>
<option value="op1">option1</option>
</select>
<option>的起始標籤和結束標籤間的文字會被顯示在下拉選單中
<option>元素使用value屬性指定在該選項被選取時，送到server的值
selected屬性能設定"selected"值指定預先選取的選項
如果沒用selected屬性指定選取的選項，預設會是第一個選項
<select>可另外指定size屬性轉變為多重選擇區塊
size指定的值便是一次顯示出來的選項項目
須注意瀏覽器對此屬性的支援可能不夠好，特別是Mac上的版本
multiple屬性指定為"multiple"值後則能讓使用者能選擇多重選項
選擇時在PC上需按住ctrl鍵，Mac則是command鍵
<button>元素的設計用意是讓使用者自行控制按鈕外觀
其type屬性共有三種值 button、submit、reset，預設是submit
所以對於開發人員比較麻煩的是，如果你的button element不打算做submit，一定要設定type屬性
使用上相當於<input>元素，差別在於允許其他元素放置在<buton>元素裡，如：
<button><img src="test.gif" /> test</button> //this sample is almost the same as <input type="image" />
<label>元素如同其名，正是做為控制項的說明標籤存在
<label>元素的for屬性值搭配表單控制項的id屬性更是好用，如：
<input id="demo" type="checkbox" value="r" /><label for="demo">click me!</label>
將label的for屬性指定為控制項的id後就形同一組，點擊label也同時會有點擊checkbox的效果
具有擴大點擊區域、增加使用者易用度的效果在
在JavaScript中要指定for屬性須改用label.htmlFor = "..." 這樣的形式以避免與for關鍵字重複
<fieldset>可以集結相關的表單控制項，大部分的瀏覽器看來fieldset的四周會是以線條包著
在表單內容較長時，很適合讓區域的劃分更明確
<legend>元素放在<fieldset>開始標籤後，做為整組fieldset的標題存在，使用如下：
<fieldset>
<legend>demo fieldset</legend>
<input id="demo" type="checkbox" value="r" />
<label for="demo">click me!</label>
</fieldset>
以上這些用來提交資訊的元素有些共通屬性，大部分是針對表單內的處理
設定 readonly 屬性可以讓元素保持唯讀狀態，無法修改其內容
設定 disabled 屬性會讓元素無法被操作，在大部分瀏覽器看到的效果會套上灰色的區別色
disabled屬性有一個特點滿有趣的，該元素不會跟著表單被送出去，所以常搭配JavaScript使用
<iframe>標籤能製作 inline frame ，能將其他頁面的內容鑲到目前頁面
其中的屬性有 src 指定顯示於框內的頁面URL 、height指定iframe高度、width指定寬度
seamless則是HTML5新增的屬性，能套用到不需要卷軸的iframe上
html5 對表單裡的input控制項增加了許多新特性
以往的一些需要用JavaScript或server端達成的功能可以轉移用html5做
當然考量目前還須對舊瀏覽器相容，還沒辦法完全倚賴html5
各家瀏覽器對於使用上增加了不少協助，對於表單驗證、使用者體驗有很大的提升
以下用一個表單做示範
<form name="html5" action="" method="post">
<fieldset>
<legend>demo fieldset</legend>
<label for="pw1">Password:</label>
<input type="password" name="pw1" id="pw1" required onchange="checkPasswords();" />
<br />
<label for="pw2">Confirm Password:</label>
<input type="password" name="pw2" id="pw2" required onchange="checkPasswords();">
<br />
<button onclick="document.html5.pw1.checkValidity();">Check Validity</button>
<br />
<label for="pd">patternDemo</label>
<input id="pd" type="text" autofocus pattern="[0-9]+" />
<br />
<label for="search">search</label>
<input id="search" type="search" placeholder="enter word" autocomplete="on" />
<br />
<label for="number">number</label>
<input id="number" type="number" min="1" max="13" step="2" value="3" />
<br />
<label for="range">range</label>
<input id="range" type="range" min="1" max="13" step="2" value="3" />
<br />
<label for="url">url</label>
<input id="url" type="url" />
<br />
<label for="color">color</label>
<input id="color" type="color" />
<br />
<label for="mail">email</label>
<input id="mail" type="email" />
<br />
<label for="date">Date</label>
<input id="date" type="date" required />
<br />
<input type="submit" value="submit" />
</fieldset>
</form>
<script>
function checkPasswords() {
var pass1 = document.getElementById("pw1");
var pass2 = document.getElementById("pw2");
if (pass1.value != pass2.value) pass1.setCustomValidity("密碼不同");
else pass1.setCustomValidity("");
}
</script>
首先第一部分先來觀察 password 組的情況
password裡增加了 required 特性
增加了此特性的欄位為必填欄位，瀏覽器會針對未填寫值的必填欄位做提醒
在HTML4的規範中，每種屬性值都必須有值
所以若要符合HTML4的標準也常看到 required = "required" 這樣的寫法
其餘HTML5新增的屬性也是依此類推
每當兩個password被鍵入文字時都會呼叫checkPasswords()比對
透過HTML5新增的 setCustomValidity() 設定驗證狀態的文字
當表單被送出或Check Validity按鈕按下時的 checkValidity() 這個HTML5方法均會觸發控制項的驗證
當然後者因只指定document.html5.password1做驗證，不影響其他控制項
以此例來說，會先驗證 required 值，若均無填寫密碼，則會優先提醒需輸入密碼
若有輸入密碼後才會跳出 setCustomValidity() 設定的驗證狀態
另外就是經過測試，控制項的<input type="button" />無法觸發checkValidity();
但<button>元素則可以，這點就當作測試時的小細節吧
要取得驗證結果的另一方法是藉由取得控制項的驗證物件後
再透過其valid屬性得知驗證結果，如下：
var pwCheck = document.getElementById("password").validity;
if(pwCheck.valid){....}
接著看 patternDemo
這裡設定了 autofocus ，一樣常見到 autofocus = "autofocus" 的寫法
表單中會自動focus在唯一被設定的元素上，若有複數的元素設定此屬性則無效
pattern裡可輸入正規表示法做驗證，例如此處便限制 pd 只能輸入數字
type="search" 製作一個搜尋輸入框
placeholder屬性為輸入框中的輸入提示文字，外觀多半為灰色，在使用者開始輸入後就消失了
autocomplete屬性則選擇是否讓自動完成功能開啟(on/off)
type="number" 和 type="range" 相近，均是讓使用者選定範圍內的數字
只是呈現方式有別，後者外觀是橫向的拖曳軸
min 和 max 可指定其上下限，step是一次變動的數值量，value屬性則能指定預設值
type="url" 會驗證輸入的內容是否為url
如果不是(猜測是不含.com結尾之類的)則瀏覽器會提示驗證失敗，需輸入正確格式後才能送出表單資訊
type="color" 製作一個顏色選擇器
type="email" 會驗證輸入內容是否為mail網址(推測是判斷@符號和.com之類的網址結尾)
type="date" 製作日期選擇器，個人認為這是各家瀏覽器實作上差異最多的部分
例如safari核心的瀏覽器可能會是一個很漂亮的轉輪選擇器
影片的播放已經在網路上的常見需求，而HTML5規格提出的時候也有相關的規定
現在已經可以透過<video>標籤來直接撥放影片，而不需要另外透過第三方外掛(如：Flash)
如果要讓舊瀏覽器支援，也有open source的video4all可以選擇
只是瀏覽器因編碼格式的專利規範或權利金等因素，而有不同的支援，使用時要特別注意
目前Chrome支援的編碼種類最廣；Firefox支援webM、Ogg；IE和Safari則支援mp4
使用時最好預先提供數種格式，使用如下：
<video controls preload="metadata" poster="images/test.png">
<source src="test.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="test.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="test.ogv" type='video/ogg; codecs="theora, vorbis"' />
<p>test HTML video tag</p>
</video>
影片來源可以直接寫在video標籤的src屬性中
但如果有提供多種格式，也可以像範例一樣寫在<source>標籤裡
瀏覽器播放時會從從頭開始檢查，如果碰到支援的格式，就會設定播放該影片
假如<source>標籤沒有指定type，則瀏覽器會下載部分影片測試是否能撥放，如此會浪費一些頻寬
不支援<video>標籤的瀏覽器，會因此只顯示出標籤內的文字
video標籤有幾個屬性，controls會開啟瀏覽器提供的影片撥放控制器
preload屬性有三種設定值 -
"none"為在使用者按下撥放前，不預先載入影片，"auto"則是網頁載入時自動載入影片
"metadata"則是僅收集影片相關資訊，如片長、大小、撥放清單等
autoplay屬性則是設定後，影片會自動撥放
loop屬性則是設定撥放完畢後會重新撥放
poster設定播放前或影片還在下載時，預先展示的影像
<audio>標籤和<video>標籤類似，用途是撥放音樂，如：
<audio controls="controls" autoplay loop>
<source src="/sound/test.mp3" type="audio/mp3" />
<source src="/sound/test.ogg" type="audio/ogg" />
<source src="/sound/test.aac" type="audio/aac" />
<source src="/sound/test.wav" type="audio/x-wav" />
</audio>
preload、autoplay、loop、controls等屬性用途也幾乎同<video>
有些元素在使用上會在瀏覽器裡另起一行，被稱為區塊層級元素(block level)
包含了<h1>、<p>、<ul>、<li>等
有些元素則會和鄰近元素保持在同一行，被稱為行內元素(inline)
包含了<a>、<b>、<em>、<img>等
HTML裡提供了<div>、<span>兩種標籤來進行元素的群組分類
<div>可以將一組元素組合成一個區塊層級的方塊
使用上會將裏頭的內容另起一行，而透過id和class屬性的使用也會讓管理及外觀操作更加方便
<span>則是<div>的行內版本，適用於1.區隔部分文字 2.容納數個行內元素
因為過往常見<div>的大量使用(濫用)，HTML5提出了一些標籤讓元素的群組分類更明確
這些標籤待日後補上整理
留言
張貼留言