Happy Designer 4 Summary(4):HTML5 Preview

(本篇內容整理自othree的演講)

HTML5的語法還在發展中,事實上目前也沒有任何Browser能讀出來,不過應該會隨著升級慢慢納入HTML5的標籤和屬性。HTML5最主要的改變在整體結構上;且多了控制聲音、影像的tag,另外更加落實將每個tag都納入整份文件的DOM tree裡。

1.整體結構

在HTML4或更早,我們用<div id="xxxx">來製作網頁的基本框架,如header, footer, content, sidebar等等;但HTML5直接提供相對應的tag來構築基本框架,這些幾乎是任何網頁都少不了的元素。下面來自 A List Apart 的兩張圖,很清楚地說明的HTML5和之前的差異。

structure-div

HTML4之前

structure-html5

HTML5

<article>代表獨立的一個文章區塊,每個<article>區塊裡可以有很多個<section>區塊。所以頁面框架的html會變成這樣:

<body>
<header>…</header>
<nav>…</nav>
<article>
<section>
</section>
</article>
<aside>…</aside>
<footer>…</footer>
</body>

<nav>內的選單仍然可用list結構來排;而<section>標籤卻是可以一層包一層,大章節裡有小章節。

<section>
<h1>Level 1</h1>
<section>
<h1>Level 2</h1>
<section>
<h1>Level 3</h1>
</section>
</section>
</section>

(這樣有沒有比較好呢?根據達人指點,小<section>裡的<h1>會繼承上一層<section>裡的<h1>,好像不是那麼好控制;再者,原來單純用<div>就能玩的效果反而不能用了。只能說是語意上的理想化。)

2.影像/聲音

主要是<video>和<audio>這兩組tag。

影像:

可以用poster屬性來指定縮圖;可用source來指定不同情況下的來源檔,比如說,在電腦上和在PDA上放映時可讀取不同解析度或格式的檔案。至於control是什麼,官方文件只說"是可以將預設控制面板,關掉或打開的一個布林值",沒人看過長相也不太清楚實際的語法,也許要再等一陣子才會有明確的文件。

<video src="video.ogv" controls poster="poster.jpg" width="320″ height="240″> <a href="video.ogv">Download movie</a>
</video>
<video poster="poster.jpg">
<source src="video.3gp" type="video/3gpp" media="handheld">
<source src="video.ogv" type="video/ogg; codecs=theora, vorbis">
<source src="video.mp4″ type="video/mp4″>
</video>

聲音的寫法就跟影像非常類似囉。

<audio src="music.oga" controls> <a href="music.oga">Download song</a>
</audio>

<audio>
<source src="music.oga" type="audio/ogg">
<source src="music.mp3″ type="audio/mpeg">
</audio>

3.Doctype

doctype,要嘛就宣告為HTML標準,要不就宣告為XML(XHTML)標準。如果循HTML標準,宣告上比以前簡化很多,只要寫<!DOCTYPE html>即可。宣告為html的好處是可以向下相容,且不像xhtml極端嚴格,比如說寫<p>時沒有寫close tag </p>,也能被browser解讀;但宣告為XHTML時,語法就必須嚴謹一些了。

[HTML]

<!DOCTYPE html>
<html>
<head>
<title>An HTML Document</title>
</head>
<body>
<h1>Example</h1>
<p>This is an example HTML document.
</body>
</html>

[XHTML]

<?xml version="1.0″ encoding="UTF-8″? >
<xmlns="http://www.w3.org/1999/xhtml" >

<head>
<title>An HTML Document</title>
</head>
<body>
<h1>Example</h1>
<p>This is an example HTML document.</p>
</body>
</html>

HTML5先寫到這裡,其他新的element,W3C那邊的文件也只是介紹,並沒有browser可以讓我們看看用起來會是什麼效果,看來還要再等一陣子,就不在這裡贅述了。

參考資料:

A List Apart: A Preview of HTML 5 http://www.alistapart.com/articles/previewofhtml5
HTML 5 differences from HTML 4 http://www.w3.org/html/wg/html5/diff/

我的Happy Designer筆記(powerpoint)

廣告

2 thoughts on “Happy Designer 4 Summary(4):HTML5 Preview

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s