HTML5 筆記

想

  • 開 MozTW HTML5 Tour: 網路公司想快速了解 HTML5 在搞什麼把戲，可以約 1 小時演講。其中半小時講改變、另外半小時討論。這基本上是 Copy 韓國 Channy Yun 的作法。

外部資料

筆記

HTML5 相關

  • HTML5 標籤
    • Web Application 1.0
    • Web Form 2.0
  • WebApps JavaScript API
    • 地理資訊
    • 離線存取、資料庫
    • 本地檔案
    • 拖曳行為
    • 多執行緒行為
    • Selector API
    • WebSockets
    • WebGL <- mmm…
    • Canvas 2D… 3D?
  • DeviceAPI
  • CSS3 遙遙無期定不完的規格，大概要砍掉重練個五次吧。

雜述

2004 一群瀏覽器 Vendor 在 Workshop 之後開創了 WHATWG，議事方法與 W3C 不同：

  • W3C: 提出議題 -> 討論 -> 投票決議
  • WHATWG: 提出議題 -> 討論 -> 編輯 (now hixie) 直接裁決

WHATWG 提出 Web Application 1.0 及 WebForm 2，這兩項是現在所謂 HTML5 的基礎。而 W3C 那時在做 XHTML2，進度很慢、2009 宣告陣亡。

HTML5 重點之一是要支援現存的文件。在遇到議題時的需求優先權：訪客>網頁作者>瀏覽器實作>規格制定>理論最佳狀況

首度描述 Error Handling，告知瀏覽器出問題時要怎麼處理。

No "deprecated," obsolete. (Use obsolete feature and your document becomes "non-conforming.")

標準沒有的東西瀏覽器還是可以實作（但設計師不該被鼓勵使用吧）

「布林」型態的屬性，只要出現就算 true，不管內容寫什麼，所以假設「attribute」是布林型態的屬性，以下三者作用相同：

<tag attribute>
<tag attribute="false">
<tag attribute="哥哥爸爸真偉大">

簡化

標籤不管大小寫、屬性不管有沒有英式括號、標籤不管要不要 self-closing 統統可以用。(might not be a good news for parser, but browsers has done this for a long time.)

doctype 為

<!doctype html>

不過不寫也可以過驗證。

標示編碼只要這樣：

<meta charset="UTF-8">

不用 text/javascript 了：

<script src="script.js"><script>

不過那是否就表示不再支援其他種類的 script? (VBScript… 雖然沒人用了)

也不用 text/css 了：

<link rel="stylesheet" href="style.css">

Obsolete / Redefined tags

See http://www.w3.org/TR/html5/obsolete.html for more information.

Obsolete tags

  • frame, frameset, noframe
  • acronym (use abbr instead)
  • font, big, center, strike

Obsolete attributes

  • bgcolor
  • cellspaceing, cellpadding
  • valign
  • … etc.

Redefined tags

  • small — small print
  • 詞意的重要性相同，但特性有所不同。（這應該是為了相容過去的文件、賦予語意。）
    • i — 情緒不同
    • b — 顯示方式不同 (而如何不同沒有限制，只是在語意上表現「這個詞的表現方式需要不同」而已。)
  • cite — the title of a work, no human name (though you can still use it just like before)
  • a — now can be a "block," the only restriction is that you can't nest an a in another a.

New tags with JavaScript API

這邊舉的幾項 Accessibility 都會是麻煩。

canvas
http://dev.w3.org/html5/spec/Overview.html#the-canvas-element
畫布，以 JavaScript 動態繪製圖片。

audio
http://dev.w3.org/html5/spec/Overview.html#audio
preload=none|auto|metadata (因為如果為布林屬性的話，就沒辦法告訴瀏覽器「不要先讀」)

video
poster 是指定「還沒播的時候的畫面」，其他跟 audio 大同小異。

特別還是要提醒「Fallback content =\= accessibility content」，想想 alt 跟 title 的模式即可。把兩者混用會讓描述內容失準。

目前要通吃所有瀏覽器的作法是：

<video>
  <source (大眾格式 1)>
  <source (大眾格式 2)>
  <source (大眾格式 3.. 以此類推)>
  <object>
    <embed>
      Fallback content
    </embed>
  </object>
</video>

幹麼這麼荼毒自己呢？

Web Form 2.0

Common attributes:

  • placeholder: "輸入搜尋字串" 那類提示文字
  • autofocus: once per document. so you can make a "stop auto-focusing" extension.
  • required
  • autocomplete = off | on

datalist 可以拿來做 combobox，input with list="A", and datalist with id="A".

input 有很多表現輸入欄特性的 type 屬性：
http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#states-of-the-type-attribute

  • search
  • email
  • url
  • tel (要自訂 patten 用 RegExp 驗證)
  • range (with min and max)
  • number
  • date
  • time
  • datetime
  • datetime-local
  • month
  • color

語意部份

inline -> text-level

  • mark: highlight text (not visually,) not necessary more important, but shows current interest.
  • time: with a datetime attr for the "time" value (ISO YYYY-MM-DDThh:mm:ss,) but you can skip this attr if you shows the time metadata to have users notice the change.
  • meter: for markup measurement. attrs: value, min, max, low, high, optimum. Example from the book "HTML5 for Web Designer" :
<meter low="-273" high="100" min="12" max="30" optimum="21" value="25"> 
  It's quite warm for this time of year.
</meter>
  • progress: min, max, value. 進度
  • section: 區段，與 div 的差異是要結合語意上相關的區塊，typically with a header
  • header: 文件區段前頭的東西，前言、主導覽… etc. 一份文件可以有很多個 header 區塊、也不見得真要放在文件的最前面，因為重點是語意上的表現。
  • footer: 就… footer，適合授權聲明、作者、聯絡資訊、相關資訊等
  • aside: something aside the main content, 「不真的那麼相關、刪掉也沒關係的資訊」，pull quote.
  • nav: for MAJOR navigation
  • article: 含括 "自成一格" self-contained 的內容，並以這個準則可與 section 區別。
    • 在 article 中的 time 標籤們，其中可以有一個含有 pubdate 屬性標明文件發布日期。
    • can also be used as "self-contained widgets"
  • hgroup: grouping heading tags, and only the first grouped tag has meaning for semantic.

其他

section roots element

"whether how many heading tags grouped by the section root tag, will not contribute the semantic of the whole document.

  • blockquote
  • fieldset
  • td

style now has a scoped attribute: only documents in the scope apply the style.

什麼時候可以用？現在就可以了啊 XD

  • 大部分的瀏覽器都支援用 CSS 自訂標籤顯示樣式
  • VIDEO、CANVAS、AUDIO 大部分的瀏覽器都支援了（猜猜看哪個不支援？ XD）
  • WebForm 2.0 的效果可用 JavaScript 偵測、替代

IE6 「註冊」新元素
http://remysharp.com/2009/01/07/html5-enabling-script/comment-page-4/
http://qingda.wikidot.com
http://xians.wikidot.com
http://ensh.wikidot.com
http://huizh.wikidot.com

page revision: 4, last edited: 02 Nov 2022 08:35
Edit Tags Discuss History Files Print Site tools + Options
Creative Commons License
本站文字除特別聲明者外，係採創用 CC 姓名標示-非商業性-相同方式分享 2.5 台灣授權條款授權，利用前請見說明。