HTML5 Tag 介紹
參考 HTML 標準驗證
英文的參考 HTML 標準驗證

 

HTML5 標準格式

html

<html manifest="cache.manifest">

 快取檔案清單，可在離線狀態下被使用

<html lang="zh-Hant-TW">

 設定網頁使用者所用的主要語言。 最主要的規範是依照IETF(Internet Engineering Task Force 國際網路工程研究團隊)的RFC 4646 ( http://www.ietf.org/rfc/rfc4646.txt )的Tags for Identifying Languages所定義

head

中介資料 (metadata) 用來描述網頁文件資料的資料 , 有以下幾種的中介資料

標準HTML5文件內容 
<!DOCTYPE html>
<html lang="zh-Hant-TW">
    <head>
        <meta charset="utf-8">
        <title>title</title>
        <link rel="stylesheet" href="style.css">
        <script src="script.js"></script>
    </head>
    <body>
        <!-- page content -->
    </body>
</html>

<meta name="apple-mobile-web-app-capable" content="yes" />

允許開發者去關掉 typical pinching and zooming available <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
title 識別標題
document.title
base 支援網頁文件的基準網址 (document base URL)
一份網頁只能存在一個base元素

                    <base href="http://www.ddmg.com.tw/html5" target="_blank" />

                    按我會導到http://www.ddmg.com.tw/html5/newpage.html
網頁中唯一不受base影響的是根元素html的manifest屬性
style

css樣式內容

style屬性
  • type : 預設為 text/css (可不必特別指定)
  • media : 預設為 all
  • scoped : boolean型態 (html5新元素) 表示樣式僅套用於此元素的父元素與所有子元素 尚無browser支援這個屬性
link

外部資源 (有可能為外部css檔)

link 屬性
href 外部資源URL (必須)
rel

描述連結型態

alternate
author
bookmark
help
icon
license
next
nofollow
noreferrer
prefetch
prev
search
stylesheet
tag
sizes 型態指定為icon時 , 提示icon大小 . 當browser面對多組icon時可以決定要下載哪一組icon
type 連結資源的MIME型態 (此屬性單純提醒browser , 避免擷取不支援的資源)
hreflang 僅標記 , 提示資源所使用的語言
media 媒體 , 預設為 all
script/noscript

腳本語言

src 外部檔案
async 透過src載入外部資源時以非同步執行
defer 透過src載入外部資源時以以延遲方式執行 (在網頁全部載完解析完成後才會執行) 
                                            
                                            <script src="../../Resources/JavaScript/Auction.js" defer> <script>
type 使用的MIME type
  • application/ecmascript
  • application/javascript
  • application/x-ecmascript
  • application/x-javascript
  • text/javascript
  • text/javascript1.0
  • text/javascript1.1
  • text/javascript1.2
  • text/javascript1.3
  • text/javascript1.4
  • text/javascript1.5
  • text/jscript
  • text/livescript
  • text/x-ecmascript
  • text/x-javascript
charset 透過src載入外部資源時指定字元編碼
meta 以上元素外的網頁文件中介資料
name 中介資料項目名稱
http-equiv 表示網頁某種狀態意義
content-type 編碼宣告
default-style 預設樣式
refresh 更新 
                                                        
                                                        <meta http-equiv="refresh" content="30" />
                                                        
                                                        <meta http-equiv="refresh" content="30; URL=index.aspx" />
content 描述name 或 http-equiv屬性內容
charset 網頁字元集編碼 
                                            
                                    



                                        
                        < meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
                        < meta name="description" content="HTML 範例" />
                        < meta name="keywords" content="key|words" />
                        < meta name="author" content="林瑞生" />
                        < meta charset="utf-8" />
meta 的 property , 如下 , 這是RDFa技術規格導入。目前被廣泛應用在Facebook專頁的OGP技術中
                        < meta property="og:title" content="HTML 5 介紹" />
屬性 
                            
                            <input type=radio />
                            <input type='radio' />
                            <input type="radio" />
                            
                            <input type="radio" checked disabled />
                            <input type="radio" checked=checked disabled="" />
列舉屬性 enumerated attribute 
                            <input type="text" dir="ltr" value="一二三四五六" />
忽略標籤的設計
最好還是不要省略
HTML5 新增的元素
video
audio
source
track
embed
mark
文件標註功能
在想要強調網頁中某個部份內容時
progress
meter
time
ruby/rt/rp
支援亞洲文字的呈現方式
                                            <ruby >
                                                康<rt>ㄎㄤ</rt>
                                            </ruby>

康ㄎㄤ 
                                    
                                            瑞(ㄖㄨㄟˋ)
                                            生(ㄕㄥ)
                                            小(ㄒ一ㄠˇ)
                                            鋪(ㄆㄨˋ)

瑞(ㄖㄨㄟˋ) 生(ㄕㄥ) 小(ㄒ一ㄠˇ) 鋪(ㄆㄨˋ)
bdi
wbr 表示一個斷行的 可能時機 (它的意思是說會布適當的時候自己斷行 
                                            ABCD, FGHI,JKLMN,OPQ. abcd, 

                                           figh, jklmn, opq, rstuv, wxyz
ABCD, FGHI,JKLMN,OPQ. abcd, figh, jklmn, opq, rstuv, wxyz
canvas
command
details/summary
支援特定內容的動態隱
open屬性為直接顯示內容
                                            <details  open>
                                                <summary>標題</summary>
                                                隱藏內容
                                            </details>
                                            <details>
                                                <summary>標題二二</summary>
                                    
    
                                    
  • ASP
    • 
                                    
  • ASP.NET
    • 
                                    
  • C#
    • 
                                    
  • SQL
    • 
                                                

                                            </details>
標題 隱藏內容
標題二二
  • ASP
  • ASP.NET
  • C#
  • SQL
datalist
keygen
金鑰的建立
                                            <form id="form2" action="keygen-demo.aspx" method="get">
                                                選擇加密長度<keygen name="security"></keygen>
                                            </form>
                                            在keygen-demo.aspx裡使用
                                            Request.QueryString[0].ToString()去取值
選擇加密長度
output
代表一個運算式的輸出結果 (好像沒什麼用)
123456
menu
HTML5 全域屬性成員
global attributes
HTML 4.01元素擴充為全域屬性
accesskey
鍵盤快速鍵 (按下Alt + 設定的字元即可快速到達
瑞生 (A)
尹瑄 (B)
芳儀 (C)
冠廷 (D)
class
可以用 getElementsByClassName()
dir
指定文字呈現方向
good morning !!
good morning !!
lang
style
tabindex
title 描述元素的關聯提示資訊
HTML 5導入的全域屬性
contenteditable
表示元素本身為一可編輯的區域
本身為可編輯的區域 , javaScript 同樣以 innerHTML來取得內容值
hidden
直接設屬性讓物件隱藏
                                            <h5 id="h1">直接設屬性讓物件隱藏</h5>
                                            <script>
                                                function onclick_hiddenPara() {
                                                    document.getElementById('hidden_para').setAttribute('hidden');
                                                    document.getElementById('hidden_para').hidden = true;           //因為 'hidden' 為true故皆可
                                                    document.getElementById('hidden_para').hidden = 'hidden';
                                                }
                                            </script>
spellcheck
針對可編輯區域, input textarea元素可設定之用來檢查拼字
此區域為可編輯區域
draggable/dropzone
第五章討論
data-*/data-
自訂資料屬性
                                            <div id="Div1" data-price="900"
                                                       data-title="HTML5 完美風暴"
                                                       data-english-title="HTML5 perfect storm"
                                                       data-author="呂高旭">
                                        
                                            function onclick_data_self() {
                                                var bookdt = document.getElementById('book').dataset;
                                                var msg = '書名(中) : ' + bookdt.title + 
                                                          '<br />書名(En) : ' + bookdt.englishTitle +     //這個englishTitle 對照的是 data-english-title
                                                          '<br />$ :' + bookdt.price + 
                                                          '<br />作者 :' + bookdt.author;
                                                document.getElementById('data-self-div').innerHTML = msg;
                                            }
特定元素的新增屬性
media
hreflang/type
target
charset
autofocus
placeholder input, textarea
form
require
disabled
name
list
width/height
dirname
maxlength
wrap textarea , 支援文句折行
novalidate form
scoped