HTML5 入門教學
隨著新版本的網頁瀏覽器推出，它們對 HTML5 的支援度也相應提升。同時，越來越多網頁開發者留意到 HTML5 的前景與發展。在使用 HTML4 或 XHTML 時，我們會利用 <div> 來排版，然後再由 stylesheets 來改變樣式。但是，複雜的網頁設計需要用到大量的 <div> 標籤，在編寫時確實令我們感到煩惱。HTML5 便針對這一點，讓新一代的標籤更語言化，如 <header>, <nav>, <article>, <footer> 等。從此，我們便能減少使用大量無意義的 <div> 標籤，使整個網頁的編碼更整潔。以下為本網站提供的 HTML5 示範網頁，其後會簡述該網頁中用到的各個標籤。Demo Page: http://qkla.com/demo/html5/HTML5 doctype在文件頂部簡單地加入 DOCTYPE 聲明，意味著一個新的 HTML5 已被建立。<!DOCTYPE html>即使用了 HTML5 doctype ，我們仍能運用 XHTML 的語法。不過，對於編寫 HTML5 網頁，過份使用 XHTML 語法，只會令網頁編碼不夠統一。Head section<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>HTML5 - Getting Started - Demo Page</title>
<style type="text/css">
...
</style>
<!-->
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<!-->
</head>
相對於過往 HTML4 或 XHTML ， DOCTYPE 聲明變得更簡短，更易記。其他的標籤都沒有大分別，依舊可以在 HTML5 中使用。Working in IE在 head 中調用了一個 JavaScript 文件，這個文件是為兼容 IE8 (或更舊版本) 瀏覽器而設。透過 IE 條件註釋，最新版本的 IE9 及非 IE 瀏覽器便會忽視這段代碼。參考來源：remy sharp’s b:log<geader>, <hgroup> and <nav> Tags<header> 用以組合網頁頂端的內容，如網頁名稱及導航列選單等。 <hgroup> 則是用來組合所有標題標籤 <h1> – <h6> 。而 <nav> 就被定義用作導航，與 <hgroup> 一樣可以放在任何位置。<header id="header"> <hgroup> <h1>QK-Style HTML5 Page</h1> <h4>Demonstration of Using HTML5</h4> </hgroup> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header>
<article>, <section>, <aside> and <figure> Tags利用 <article> 將文章獨立集起，然後用 <section> 來包裹整篇文章。假若需要在文章的旁邊加入一些圖片或注釋，就會使用 <aside> 。而在 <aside> 入面就以 <figure> 來包裹著一些有著一定流量消耗的內容，如圖表、相片及圖像等。即使沒有這些內容，也不會對整篇文章有大影響。<article id="page-content"> <section> <h2>Hello World!</h2> <p>...</p> <p>...</p> </section> <aside> <figure> <img src="HTML5-logo.png" alt="HTML5-logo" /> </figure> </aside> </article>
<aside> Tag在以上的編碼中， <aside> 為我們帶來了很多方便。過往我們設計一個有左/右側內容的網頁，都只能使用兩個 <div> ，一左一右來間隔網頁。現在，只要利用這個 <aside> 標籤，便可以輕易地為網頁排版佈局。<footer> Tag最後，在整個網頁的頁底，會使用到 <footer> 。同樣地，利用 <section> 將一些頁底資料包裹，如作者資料及版權資訊等。
嚴重支持！ 回個帖子支持一下！ 我也來頂一下..
頁:
[1]