標題
內容內容內容內容
Title
Hello Domo :D
HTML5 Tag
前言
本文為 HTML 相關筆記，以 HTML5 版本為主，特別標示 HTML5 新標籤、不把已刪除的舊標籤放進來，僅提供查詢，因瀏覽器的支援度更新頻繁，詳細資訊請再參考相關連結並依據所需查證。
原則上大部分的 HTML 標籤可以隨自己喜好選擇，但基於 W3C 對標籤還是有些基礎規範，例如 p 與 ul 同層級，所以不能互包、ol 的下層是 li，不能隨便放其他標籤...等等。因為很多規則是經驗法則，就不一一標示，其實只要對標籤語意有一定的認識，就不會包錯，然後基於 SEO 行銷，使用 HTML5 要注意「語意」上的辨識，所以選擇適當的 HTML 標籤還是很重要的。
注意 IE9 以上的瀏覽器才支援 HTML5 宣告，若要在 IE9 以下使用 HTML5 需用 html5shiv.js 和 respond.js 外掛自動轉換成 HTML4 讀得懂的標籤！或許會注意到有些標籤有「/」結尾，這是因為早期 HTML4 的版本對於單一、沒有結尾的標籤做結束的標示，例如：<br/>，但 HTML5 對於斜線的標示不那麼嚴謹，所以在 HTML5 裡的標籤可以不做斜線結尾。
另外也提供專案常用到的 Meta 設定以及讓各瀏覽器顯示最佳效果的 Hack 筆記喔！😘
基本標籤
起手式
<!DOCTYPE HTML>
<html>
<head>
<title>網頁標題</title>
</head>
<body>
網頁內容，會顯示在瀏覽器上～
</body>
</html>
<!DOCTYPE> 宣告 HTML 文件版本類型。
<html> 定義 HTML 文件。
<head> 定義文件檔頭資訊及其他外嵌內容，不顯示在瀏覽器上。
<body> 定義 HTML 文本，也就是網頁顯示在瀏覽器上的內容。
<html> 定義 HTML 文件。
<head> 定義文件檔頭資訊及其他外嵌內容，不顯示在瀏覽器上。
<body> 定義 HTML 文本，也就是網頁顯示在瀏覽器上的內容。
會放 head 裡面的標籤
<head>
<meta charset="UTF-8">
<title>網頁標籤</title>
<meta name="description" content="網頁描述">
<meta name="keywords" content="關鍵字1,關鍵字2,關鍵字3">
<meta name="author" content="作者名字">
<base href="http://www.w3schools.com/images/" target="_blank">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
CSS 樣式
<head>
<link rel="stylesheet" type="text/css" href="layout.css">
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<p style="color: green;">行內樣式</p>
</body>
JavaScript 腳本
<script src="js/jquery-3.3.1.min.js"></script>
<script>
document.write("Hello Domo!");
</script>
<noscript>您的瀏覽器不支援 JavaScript!</noscript>
一般功能標籤
標題 h1
標題 h2
標題 h3
標題 h4
標題 h5
標題 h6
標題 h1
標題 h2
標題 h3
標題 h4
標題 h5
標題 h6
<h1>~<h6> 標題，SEO 會依順序定義重要程度。
- User hrefs: 60 points
- User jdoe: 80 points
- User إيان: 90 points
- User hrefs: 60 points
- User jdoe: 80 points
- User إيان: 90 points
<bdi> Bi-Directional Isolation，使內容脫離其父元素文本方向設置。
The Scream 挪威畫家愛德華·孟克（Edvard Munch）1893 年的作品
The Scream 挪威畫家愛德華·孟克（Edvard Munch）1893 年的作品
<cite> 定義作品名稱，例如：書籍、音樂、電影、畫作等等，斜體顯示。
我的名字是 Domo DOMO！
我的名字是 Domo DOMO！
跟 HTML 碼顯示空格的樣子一樣耶！
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and line breaks
<pre>
跟 HTML 碼顯示空格的樣子一樣耶！
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and line breaks
</pre>
<pre> 預格式化的段落，保留在 HTML 檔撰寫的空格和斷行。
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
WWF's goal is to:
Build a future where people live in harmony with nature.We hope they succeed.
WWF's goal is to: Build a future where people live in harmony with nature.
We hope they succeed.
- Coffee
- Tea
- Coffee
- Tea
- Coffee
- Tea
- Coffee
- Tea
- Coffee
- Black hot drink
- Milk
- White cold drink
- Coffee
- Black hot drink
- Milk
- White cold drink
超連結
<a> 定義超連結，其屬性有：
href 超連結路徑，可以使用同一文本的 id 名稱、JavaScript 腳本、網路通訊協定（https://、ftp://、intent://、mailto:、tel:、sms:...等等）。
target 連結開啟的方式，包含 _blank|_parent|_self|_top|frameName。
hreflang 連結文檔的語言。
rel 指定當前文本與被連結文檔的關係，參考 Link Relations。
type 連結媒體類型，參考 Media Type。
download 超連結內容可下載，並指定下載時的名稱。
media 對應裝置進行優化。
href 超連結路徑，可以使用同一文本的 id 名稱、JavaScript 腳本、網路通訊協定（https://、ftp://、intent://、mailto:、tel:、sms:...等等）。
target 連結開啟的方式，包含 _blank|_parent|_self|_top|frameName。
hreflang 連結文檔的語言。
rel 指定當前文本與被連結文檔的關係，參考 Link Relations。
type 連結媒體類型，參考 Media Type。
download 超連結內容可下載，並指定下載時的名稱。
media 對應裝置進行優化。
是菊目菊科多年生草本植物的一個屬。其下約有 40 種，其中大多數原產於東亞，其變異中心在中國。
Copyright 2018.
All pages and graphics on this web site are the property of Domo.
Copyright 2018.
All pages and graphics on this web site are the property of Domo.
2/10
60%
<canvas id="myCanvas" height="100"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>
LOGO
網站短文描述
LOGO
網站短文描述
<header> 通常是網頁最上方的區塊元素，放置網站的前言介紹或是導行連結，也可以是每篇文章的標題區域，標籤內可能會有 Logo、<h1>~<h6> 標籤、作者資訊...等等。
表格標籤
| 月份 | 收入 | 支出 | 餘額 |
|---|---|---|---|
| 總額 | $90 | ||
| 一月 | $100 | $30 | $70 |
| 二月 | $100 | $50 | $20 |
| 月份 | 收入 | 支出 | 餘額 |
|---|---|---|---|
| 總額 | $90 | ||
| 一月 | $100 | $30 | $70 |
| 二月 | $100 | $50 | $20 |
<table> 表格。
<tr> 表格內的列。
<th> 表格標題欄位，預設為置中粗體，其屬性有：
abbr 欄位內容的縮寫。
colspan 單元橫跨欄數。
rowspan 單元直跨列數。
headers 設置多個 header 對應一個 id 作關聯。
scope 表頭數據與單元相關連的方法。
<td> 表格欄位，預設為置左一般，其屬性有：
colspan 單元橫跨欄數。
rowspan 單元直跨列數。
headers 設置多個 header 對應一個 id 作關聯。
<caption> 表格標題，要寫在 <table> 標籤內的開始。
<thead> 表頭。
<tbody> 表格主要內容。
<tfoot> 表格註腳。
<colgroup> 對表格裡的欄位做格式化，常用來定義表格的標準樣式。
<col> 定義欄的屬性，一定要在 <colgroup> 裡面。
span 定義橫跨的欄數。
<tr> 表格內的列。
<th> 表格標題欄位，預設為置中粗體，其屬性有：
abbr 欄位內容的縮寫。
colspan 單元橫跨欄數。
rowspan 單元直跨列數。
headers 設置多個 header 對應一個 id 作關聯。
scope 表頭數據與單元相關連的方法。
<td> 表格欄位，預設為置左一般，其屬性有：
colspan 單元橫跨欄數。
rowspan 單元直跨列數。
headers 設置多個 header 對應一個 id 作關聯。
<caption> 表格標題，要寫在 <table> 標籤內的開始。
<thead> 表頭。
<tbody> 表格主要內容。
<tfoot> 表格註腳。
<colgroup> 對表格裡的欄位做格式化，常用來定義表格的標準樣式。
<col> 定義欄的屬性，一定要在 <colgroup> 裡面。
span 定義橫跨的欄數。
表單標籤
<form> 定義表單，其屬性有：
action 提交後的動作。
method 資料傳遞的方式。
target 提交後的開啟方式。
name 表單名稱。
accept-charset 提交後請伺服器處理資料的方式。
enctype 提交前進行編碼。
autocomplete 是否啟用自動完成，方便輸入過的內容重新輸入；反之，確保資料不外流。
novalidate 提交時不進行驗證。
action 提交後的動作。
method 資料傳遞的方式。
target 提交後的開啟方式。
name 表單名稱。
accept-charset 提交後請伺服器處理資料的方式。
enctype 提交前進行編碼。
autocomplete 是否啟用自動完成，方便輸入過的內容重新輸入；反之，確保資料不外流。
novalidate 提交時不進行驗證。
<fieldset> 標示表單內相關內容的區域，其屬性有：
name 區域名稱。
disabled 整個區域不可填寫。
form 如果欄位在表單外，可對應表單 id（IE 不支援）。
<legend> 用來標示表單內群組的名稱。
name 區域名稱。
disabled 整個區域不可填寫。
form 如果欄位在表單外，可對應表單 id（IE 不支援）。
<legend> 用來標示表單內群組的名稱。
帳號：
密碼：
信箱：
電話：
網站：
生日：
性別：
訂閱電子報： 月報 雙週報 週報 日報
上傳頭像：
密碼：
信箱：
電話：
網站：
生日：
性別：
訂閱電子報： 月報 雙週報 週報 日報
上傳頭像：
帳號：
密碼：
信箱：
電話：
網站：
生日：
性別：
訂閱電子報：
月報
雙週報
週報
日報
上傳頭像：
顏色選取：
數字選取：
滑桿範圍：
搜尋方塊：
選擇年月：
選擇年週：
選擇時間：
選擇時間：
輸入時間：
readonly：
required：
disabled：
數字選取：
滑桿範圍：
搜尋方塊：
選擇年月：
選擇年週：
選擇時間：
選擇時間：
輸入時間：
readonly：
required：
disabled：
顏色選取：
數字選取：
滑桿範圍：
搜尋方塊：
選擇年月：
選擇年週：
選擇時間：
選擇時間：
輸入時間：
readonly：
required：
disabled：
<button> 定義可按按鈕，其屬性有：
disabled 不可按。
type 按鈕類型，有 button|submit|reset。
送出按鈕相關的屬性：
form 如果欄位在表單外，可對應表單 id(IE 不支援)。
formaction 覆蓋表單 action 屬性，type 一定是 image/submit（IE10 以上）。
formenctype 覆蓋表單 enctype 屬性。
formmethod 覆蓋表單 method 屬性，type 一定是 image/submit（IE10 以上）。
formnovalidate 覆蓋表單 novalidate 屬性(IE10 以上、Safari 不支援)。
formtarget 提交後的開啟方式（IE10 以上）。
disabled 不可按。
type 按鈕類型，有 button|submit|reset。
送出按鈕相關的屬性：
form 如果欄位在表單外，可對應表單 id(IE 不支援)。
formaction 覆蓋表單 action 屬性，type 一定是 image/submit（IE10 以上）。
formenctype 覆蓋表單 enctype 屬性。
formmethod 覆蓋表單 method 屬性，type 一定是 image/submit（IE10 以上）。
formnovalidate 覆蓋表單 novalidate 屬性(IE10 以上、Safari 不支援)。
formtarget 提交後的開啟方式（IE10 以上）。
學歷：
清單內容功能：
學歷：
清單內容功能：
<select> 定義下拉式選單，其屬性有：
name 文字區域名稱。
disabled 不可填寫。
size 顯示看得到區域項目數量。
multiple 選取多個(用ctrl/commad)。
autofocus 自動 focus。
form 如果欄位在表單外，可對應表單 id（IE 不支援）。
required 必填欄位。
<optgroup> 定義下拉式選單的群組名稱，其屬性有：
label 群組名稱
disabled 整個群組不可選取
<option> 定義下拉式選單的選項名稱，其屬性有：
label 項目名稱（最優先）。
disabled 項目不可選取。
selected 已選取。
value 項目值。
<datalist> 定義選項列表，常用來與 input 配合，定義 input 可能的值。
name 文字區域名稱。
disabled 不可填寫。
size 顯示看得到區域項目數量。
multiple 選取多個(用ctrl/commad)。
autofocus 自動 focus。
form 如果欄位在表單外，可對應表單 id（IE 不支援）。
required 必填欄位。
<optgroup> 定義下拉式選單的群組名稱，其屬性有：
label 群組名稱
disabled 整個群組不可選取
<option> 定義下拉式選單的選項名稱，其屬性有：
label 項目名稱（最優先）。
disabled 項目不可選取。
selected 已選取。
value 項目值。
<datalist> 定義選項列表，常用來與 input 配合，定義 input 可能的值。
留言：
留言：
多媒體標籤
<object data="images/helloworld.swf" width="420"></object>
<object data="images/sample.mp4">
<param name="autoplay" value="true">
</object>
<audio src="images/music.mp3" controls>瀏覽器不支援 audio</audio>
<audio controls preload="none">
<source src="images/music.mp3">
<track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
<track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</audio>
<audio> 載入聲音，標籤中不能加任何文字，避免瀏覽器支援檔案的問題，所以有些聲音檔需要搭配轉檔，並在同一個 audio 加上多個 source 來使用，其屬性有：
src 檔案路徑。
autoplay 自動播放。
controls 顯示控制面板。
muted 靜音。
loop 循環播放。
preload 播放前的提示。
<source> 定義檔案來源，其屬性有：
media 依據裝置優化。
src 檔案路徑。
type 檔案類型。
<track> 媒體播放器的文本軌道，其屬性有：
default 默認軌道。
kind 軌道的文本類型。
label 軌道標題。
src 軌道檔案來源路徑。
srclang 軌道語言。
src 檔案路徑。
autoplay 自動播放。
controls 顯示控制面板。
muted 靜音。
loop 循環播放。
preload 播放前的提示。
<source> 定義檔案來源，其屬性有：
media 依據裝置優化。
src 檔案路徑。
type 檔案類型。
<track> 媒體播放器的文本軌道，其屬性有：
default 默認軌道。
kind 軌道的文本類型。
label 軌道標題。
src 軌道檔案來源路徑。
srclang 軌道語言。
<video src="images/sample.mp4" width="240" height="160" controls>瀏覽器不支援 video</video>
<video src="images/sample.mp4" width="240" height="160" poster="images/pic.jpg" controls preload></video>
<video width="240" height="160" controls loop>
<source src="images/sample.mp4" type="video/mp4">
<source src="images/sample.ogg" type='video/ogg'>
</video>
<video> 載入影片，標籤中不能加任何文字，檔案適用於 mp4、webm、ogg，避免瀏覽器支援檔案的問題，所以有些影音需要搭配轉檔，並在同一個 video 加上多個 source 來使用，其屬性有：
src 檔案路徑。
width 影片寬。
height 影片高。
autoplay 自動播放。
controls 顯示控制面板。
muted 靜音。
loop 循環播放。
poster 播放前的示意圖。
preload 播放前的提示（IE 不支援）。
<source> 定義檔案來源，其屬性有：
media 依據裝置優化。
src 檔案路徑。
type 檔案類型。
<track> 媒體播放器的文本軌道，其屬性有：
default 默認軌道。
kind 軌道的文本類型。
label 軌道標題。
src 軌道檔案來源路徑。
srclang 軌道語言。
src 檔案路徑。
width 影片寬。
height 影片高。
autoplay 自動播放。
controls 顯示控制面板。
muted 靜音。
loop 循環播放。
poster 播放前的示意圖。
preload 播放前的提示（IE 不支援）。
<source> 定義檔案來源，其屬性有：
media 依據裝置優化。
src 檔案路徑。
type 檔案類型。
<track> 媒體播放器的文本軌道，其屬性有：
default 默認軌道。
kind 軌道的文本類型。
label 軌道標題。
src 軌道檔案來源路徑。
srclang 軌道語言。