HTML5 Tag

前言

本文為 HTML 相關筆記,以 HTML5 版本為主,特別標示 HTML5 新標籤、不把已刪除的舊標籤放進來,僅提供查詢,因瀏覽器的支援度更新頻繁,詳細資訊請再參考相關連結並依據所需查證。

原則上大部分的 HTML 標籤可以隨自己喜好選擇,但基於 W3C 對標籤還是有些基礎規範,例如 p 與 ul 同層級,所以不能互包、ol 的下層是 li,不能隨便放其他標籤...等等。因為很多規則是經驗法則,就不一一標示,其實只要對標籤語意有一定的認識,就不會包錯,然後基於 SEO 行銷,使用 HTML5 要注意「語意」上的辨識,所以選擇適當的 HTML 標籤還是很重要的。

注意 IE9 以上的瀏覽器才支援 HTML5 宣告,若要在 IE9 以下使用 HTML5 需用 html5shiv.jsrespond.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 文本,也就是網頁顯示在瀏覽器上的內容。

會放 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>                                         
                
<title> 網頁名稱。
<meta> 檔頭資訊。
<base> 定義相關文件連結。
<link> 外部載入資源,通常用來載入 CSS 檔案、網頁圖標。

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>
                
<link> 載入外部樣式,要放在 head 標籤裡。
<style> 內部樣式,通常放 head 標籤裡。
<style> 行內樣式,針對標籤樣式的通用屬性。

JavaScript 腳本

                    <script src="js/jquery-3.3.1.min.js"></script>
                    <script>
                        document.write("Hello Domo!");
                    </script>
                    <noscript>您的瀏覽器不支援 JavaScript!</noscript>
                
<script> 在標籤中編寫腳本或直接載入外部檔案,預設為網頁繪製會等腳本執行完才繼續,其屬性有:
<async> 網頁繪製不會停下,在背景下載。
<defer> 網頁繪製不會停下,在背景下載,等待 DOMContentLoaded 再執行腳本。
<src> 載入外部資源的相對和絕對路徑。
<type> 定義腳本的 MIME 類型。
<charset> 定義腳本編碼,只有在外部載入才使用。

<noscript> 在不支援 scripts 的情況下,提供提示說明。

註解

                    <!--我是註解-->                                                                      
                
<!--...--> 註解,不會顯示於瀏覽器上。

一般功能標籤

我是 div
                    
我是 div
<div> 區分版面的區塊,通常用來作排版。

標題 h1

標題 h2

標題 h3

標題 h4

標題 h5
標題 h6
                    

標題 h1

標題 h2

標題 h3

標題 h4

標題 h5
標題 h6
<h1>~<h6> 標題,SEO 會依順序定義重要程度。

我是 p 我是 p 我是 p 我是 p

                    

我是 p 我是 p 我是 p 我是 p

<p> 段落。
我有「藍色的 span」!
                    我有「藍色的 span」!
                
<span> 行內元素。
我是
br
                    我是
br
<br> 換行。

                    
<hr> 水平線。
我是 i
                    我是 i
                
<i> 斜體。
我是 em
                    我是 em
                
<em> 定義強調文字,斜體顯示。
我是 b
                    我是 b
                
<b> 粗體。
我是 strong
                    我是 strong
                
<strong> 定義重要文字,比 <em> 更強調,粗體顯示。
我是 small
                    我是 small
                
<small> 較小字型顯示,常用來作注釋。
下標字:H2O、上標字:210
                    下標字:H2O、上標字:210
                
<sub> 下標字。
<sup> 上標字。
我是 s
                    我是 s
                
<s> 刪除線,用來表示此段文字不再正確、恰當。
我是 u
                    我是 u
                
<u> 底線,通常用區分一般文字,像是表示拼錯的文字或是中文的專有名詞。
我是 bdo
                    我是 bdo
                
<bdo> 定義雙方向書寫,其屬性有:
dir [ ltr | rtl ],書寫方向。
  • 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,使內容脫離其父元素文本方向設置。
世界衛生組織 WHO 創立於 1948 年
                    世界衛生組織 WHO 創立於 1948 年
                
<abbr> 定義縮寫或首字母縮寫。
I'm a code.
                    I'm a code.
                
<code> 定義電腦碼,monospace 字體顯示。
Keyboard input
                    Keyboard input
                
<kbd> 定義鍵盤輸入的內容,monospace 字體顯示,通常用在電腦相關的文檔中。
&可能會被轉換為 & 字符
                    &可能會被轉換為 & 字符
                
<samp> 定義電腦代碼樣式文本,monospace 字體顯示,用來標示特殊的電腦字符。
我是 var
                    我是 var
                
<var> 定義變數值和使用者提供的值,斜體顯示,常與 <code> 和 <pre> 一起使用。
HTML 是一種網頁的標準標示語言
                    HTML 是一種網頁的標準標示語言
                
<dfn> 定義具意義的術語或名詞,通常會有描述的文字,斜體顯示。
The Scream 挪威畫家愛德華·孟克(Edvard Munch)1893 年的作品
                    The Scream 挪威畫家愛德華·孟克(Edvard Munch)1893 年的作品
                
<cite> 定義作品名稱,例如:書籍、音樂、電影、畫作等等,斜體顯示。
我的名字是 Domo DOMO
                    我的名字是 Domo DOMO
<del> 本文被刪除或被取代的部分,刪除線顯示,其屬性有:
cite 刪除原因,指向另一個用來解釋的檔案路徑。
datetime 刪除的時間點。
<ins> 本文被新增的部分,底線顯示,其屬性有:
cite 新增原因,指向另一個用來解釋的檔案路徑。
datetime 新增的時間點。
跟 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.
<blockquote> 引用非本網站的其他資源內容,其屬性有:
cite 引用來源的網址。
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.
                
<q> 短引文,其屬性有:
cite 引用來源的網址。
  1. Coffee
  2. Tea
  • Coffee
  • Tea
                    
  1. Coffee
  2. Tea
  • Coffee
  • Tea
<ol> 有順序意義的項目清單,其屬性有:
type 項目符號,有 1|a|A|i|I。
start 起始號碼。
reversed 反向排序。
<ul> 無順序意義的項目清單。
<li> 清單裡的項目,其屬性有:
value 項目數值。
Coffee
Black hot drink
Milk
White cold drink
                    
Coffee
Black hot drink
Milk
White cold drink
<dl> 定義描述清單。
<dt> 定義物件名稱。
<dd> 定義物件描述。
                    超連結
                
<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 對應裝置進行優化。
                    
                
<iframe> 框架,用來嵌入其他文檔和外部文本,其屬性有:
width 框架寬。
height 框架高。
name 框架名稱。
src 框架來源。
sandbox 沙盒模式(IE10 以上)。
srcdoc html 取代(IE 不支援)。
菊花
是菊目菊科多年生草本植物的一個屬。其下約有 40 種,其中大多數原產於東亞,其變異中心在中國。
                    
菊花
是菊目菊科多年生草本植物的一個屬。其下約有 40 種,其中大多數原產於東亞,其變異中心在中國。
<img> 定義圖片,其屬性有:
src 圖片路徑。
width 圖片寬。
height 圖片高。
alt 圖片文字說明。
usemap 對應 map 名稱。
ismap 滑鼠點擊圖片會回傳對應座標。
<figure> 圖片區塊。
<figcaption> 圖片區塊內的文字說明,一定只能放在 <figure> 內的最前或最後。
Planets Sun Mercury Venus
                    行星地圖
                    
                        太陽
                        水星
                        金星
                    
                
<map> 建立圖片上的地圖,其屬性有:
name 地圖名稱。
<area> 建立地圖上的不規則圖形連結,一定要在 <map> 內,其屬性有:
shape 形狀。
coords 圖形描繪座標。
alt 文字說明。
其餘屬性與 a link 相同。
我是 mark
                    我是 mark
                
<mark> 重點文字標示。
demomemomemohellodomodomodomo
                    demomemomemohellodomodomodomo
                
<wbr> 標示一段文字換行時保留不斷的字詞(IE 不支援)。
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.

<details> 標示描述文檔或某個部份的細節(IE、Firefox、Opera 不支援)。
<summary> 細節的摘要(IE、Firefox、Opera 不支援)。
我是 dialog
                    我是 dialog
                
<dialog> 浮動對話框(IE、Firefox 不支援),其屬性有:
open 規定 dialog 在 HTML 頁面上顯示。
(ㄏㄢˋ)
                    (ㄏㄢˋ)
                                        
                
<rp> 定義 ruby 注釋中文注音或字符。
<rt> 標示 ruby 注釋的整段訊息。
<rp> 不支援 ruby 標籤時顯示。
2/10
60%
                    2/10
60%
<meter> 範圍長條量(Edge 以上才支援)。
form 規定所屬的一個或多個表單。
high 設定範圍的高值。
low 設定範圍的低值。
max 範圍最大值。
min 範圍最小值。
optimum 規定測量範圍的最佳值。
value 當前的值,一定要有。
                    
                
<progress> 標示任務進度。
max 進度總數值。
value 已經完成的數值。
                    <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>                                 
                
<canvas> 畫布,需使用 JavaScript 畫圖,屬性有:
width 畫布寬。
height 畫布高。

LOGO

網站短文描述

                    

LOGO

網站短文描述

<header> 通常是網頁最上方的區塊元素,放置網站的前言介紹或是導行連結,也可以是每篇文章的標題區域,標籤內可能會有 Logo、<h1>~<h6> 標籤、作者資訊...等等。

Posted by: Domo Huang

Copyright © 2016 DOMO.

                    

Posted by: Domo Huang

Copyright © 2016 DOMO.

<footer> 通常是網頁最下方的區塊元素,放置網站著作權設定、作者資訊、連絡資訊、網站地圖、回頂端按鈕、相關文件...等等。
                                                                            
                
<aside> 側邊欄,通常放置與本文相關的連結內容。

Title

Hello Domo :D

                    

Title

Hello Domo :D

<main> 主要內容區域,不可放置其他排版語意標籤下(Edge 以上才支援)。

標題

內容內容內容內容

                    

標題

內容內容內容內容

<article> 帶有標題性的文章獨立區塊,通常使用在部落格文章、討論文章、留言內容...等等。

標題

內容內容內容內容

                    

標題

內容內容內容內容

<section> 帶有標題性的區段,通常定義在章節、頁首、頁尾等等。
                    
                
<nav> 導航連結,內放 a link,通常會放 ul li 架構。
咖啡店早上 營業
我有個約會
今天是
                    咖啡店早上  營業
我有個約會
今天是
<time> 紀錄日期和時間,其屬性有:
datetime 指定的時間點,需用時間格式。
Written by Domo.
Visit:Example.com
Box 564, Disneyland
USA
                    
Written by Domo.
Visit:Example.com
Box 564, Disneyland
USA
<address> 定義文檔或文章作者的聯絡訊息。
                    
                
<template> 使標籤內的元素隱藏,常用來做模版(重複使用的 HTML 碼)使用,就可以放在(Edge 以上才支援)。

表格標籤

記帳本
月份 收入 支出 餘額
總額     $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 定義橫跨的欄數。

表單標籤

帳號:
密碼:
                    
帳號:
密碼:
<form> 定義表單,其屬性有:
action 提交後的動作。
method 資料傳遞的方式。
target 提交後的開啟方式。
name 表單名稱。
accept-charset 提交後請伺服器處理資料的方式。
enctype 提交前進行編碼。
autocomplete 是否啟用自動完成,方便輸入過的內容重新輸入;反之,確保資料不外流。
novalidate 提交時不進行驗證。
留言區塊 暱稱:
內容:
                    
留言區塊 暱稱:
內容:
<fieldset> 標示表單內相關內容的區域,其屬性有:
name 區域名稱。
disabled 整個區域不可填寫。
form 如果欄位在表單外,可對應表單 id(IE 不支援)。
<legend> 用來標示表單內群組的名稱。
帳號:
密碼:
信箱:
電話:
網站:
生日:
性別:  
訂閱電子報: 月報 雙週報 週報 日報
上傳頭像:
                    帳號: 
密碼:
信箱:
電話:
網站:
生日:
性別:  
訂閱電子報: 月報 雙週報 週報 日報
上傳頭像:
<input> 單行文字欄位或送出/清除按鈕,其屬性有:
name 欄位名稱。
size 欄位長度。
maxlength 設定欄位最多字數。
checked 已選取,type 一定是 radio/checkbox。
type 欄位類型。
accept 指定提交檔案類型。
src 定義圖像來源。
alt 說明文字,type 一定是 image。
value 欄位值,一開始就有值為初始值。
<label> 定義 input 標記,方便於點選或說明,其屬性有:
for 對應 id 綁定元素。
form 如果標籤在表單外,可對應表單 id。
顏色選取:
數字選取:
滑桿範圍:
搜尋方塊:
選擇年月:
選擇年週:
選擇時間:
選擇時間:
輸入時間:
readonly:
required:
disabled:
                    顏色選取:
數字選取:
滑桿範圍:
搜尋方塊:
選擇年月:
選擇年週:
選擇時間:
選擇時間:
輸入時間:
readonly:
required:
disabled:
其他屬性:
autocomplete 是否啟用自動完成。
autofocus 自動 focus。
width 圖像寬度,type 一定是 image。
height 圖像高度,type 一定是 image]。
list 對應 datalist 產生下拉選單(IE10 以上)。
max 設定最大值。
min 設定最小值。
step 設定間隔倍數改變數值。
multiple 設定選取多個檔案。
pattern 規定輸入的格式。
placeholder 顯示提示字元。
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 以上)。
學歷: 清單內容功能:
                    學歷:
                    
                    清單內容功能:
                    
                        
                        
                     
                
<select> 定義下拉式選單,其屬性有:
name 文字區域名稱。
disabled 不可填寫。
size 顯示看得到區域項目數量。
multiple 選取多個(用ctrl/commad)。
autofocus 自動 focus。
form 如果欄位在表單外,可對應表單 id(IE 不支援)。
required 必填欄位。
<optgroup> 定義下拉式選單的群組名稱,其屬性有:
label 群組名稱
disabled 整個群組不可選取
<option> 定義下拉式選單的選項名稱,其屬性有:
label 項目名稱(最優先)。
disabled 項目不可選取。
selected 已選取。
value 項目值。
<datalist> 定義選項列表,常用來與 input 配合,定義 input 可能的值。
留言:
                    留言:
                     
                
<textarea> 多行文字區域或說明,其屬性有:
name 文字區域名稱。
cols 寬度字數。
rows 高度行數。
disabled 不可填寫。
readonly 只供讀。
maxlength 設定欄位最多字數。
required 必填欄位。
placeholder 顯示提示字元。
autofocus 自動 focus。
form 如果欄位在表單外,可對應表單 id(IE 不支援)。
wrap 提交時規定文字區域內如何換行。
0 100 + =
                    
0 100 + =
<output> 計算輸出(IE 不支援)。
<keygen> 表單密鑰生成器,當提交表單時,私鑰儲存在本機、公鑰發送到伺服器(IE 不支援)。

多媒體標籤

                    <object data="images/helloworld.swf" width="420"></object>
                    <object data="images/sample.mp4">
                    <param name="autoplay" value="true">
                    </object>
                
<object> 嵌入媒體物件(包括 audio, video, Java applets, ActiveX, PDF, and Flash),其屬性有:
name 媒體物鍵名稱。
width 物件寬。
height 物件高。
type 媒體類型。
form 對應的表單名稱。
<param> 在嵌入媒體時的參數設定,其屬性有:
name 參數名稱。
width 參數值。
                    <embed src="images/helloworld.swf">
                
<embed> 嵌入媒體。
                    <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 軌道語言。
                    <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 軌道語言。
DEMO MEMO