TShopping

 找回密碼
 註冊
搜索
查看: 2252|回復: 3

[教學] HTML5 入門教學

[複製鏈接]
發表於 2012-1-5 12:35:09 | 顯示全部樓層 |閱讀模式
 
Push to Facebook
隨著新版本的網頁瀏覽器推出,它們對 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
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>HTML5 - Getting Started - Demo Page</title>
  6.   <style type="text/css">
  7.   ...
  8.   </style>
  9.   <!--[if lte IE 8]>
  10.   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  11.   <![endif]-->
  12. </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> 一樣可以放在任何位置。
  1. <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> 來包裹著一些有著一定流量消耗的內容,如圖表、相片及圖像等。即使沒有這些內容,也不會對整篇文章有大影響。
  1. <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> 將一些頁底資料包裹,如作者資料及版權資訊等。


 

臉書網友討論
*滑块验证:
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2024-3-28 18:45 , Processed in 0.043653 second(s), 19 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表