【初探HTML5之使用新標籤佈局】用html5佈局我的博客頁！

時間 2021-01-05

前言

一直覺得該學習HTML5，這是web前端大勢所趨，若此時還不學習，必將被淹沒於技術的洪流，何談成爲優秀的web前端技術人員？

於是乎，小的來了。昨天初略看了下大綱，HTML包括以下東西：

1 增加了一些新元素，以更好的支持web語義化操作，提供更友好的seo

2 解決現有瀏覽器幾個標準問題，視頻播放、音頻播放

3 強化頁面特效控制，增加原生拖放相關，增加表單驗證相關

4 增加本地存儲功能，讓頁面響應效果提高，增加移動端用戶體驗

5 增加地理位置相關接口，用於獲取地理信息

6 增加web 通訊相關功能，可以將服務器信息推送至頁面

7 增加web worker對象用於處理頁面影響效率腳步

8 增加畫布功能，可在頁面繪製複雜圖形

9 增加了更多的元素選擇器

......

千里之行始於足下，讓我揭開HTML5新增的佈局類標籤吧！

HTML5的佈局

就佈局來說，大概就是以下幾個，其實有些也不是佈局相關的了：

標籤	個人理解
article	相當於：<divclass="article"></div> 出現動機不明，小的不明，據說是爲了增加語義化，小的就在想在低版本瀏覽器下咋辦，無解。一般用於一個獨立的環境，比如：帖子、文章或者其它獨立的地方
section	小的感覺還是div了，據說該元素用於網站內容分塊，小的亦不明白爲神馬我不老老實實的用div就算了，答案是語義化。提示： 1、當使用該容器需要直接定義樣式時建議使用div（不懂啊） 2、section元素內容可以單獨存儲到數據庫或者輸出到word中（這個聽起來靠譜點，比如用戶評論） 3、該元素一般具有標題總結：在書上得到的結論是能不用就不用，這樣對嗎？？？
nav	相當於：<divclass="nav"><ul></ul></div> 該元素個人認爲較靠譜……，一般用於頁面頭部導航或者其它會使用到ul的地方，或者分頁處。
aside	該元素一般就是我們所謂兩列布局的話，左邊出現菜單欄容器
time	html5中，使用時間標籤被單獨提了出來，這個還算可以理解，且用着試試支持一pubdate屬性，表示爲發佈日期
header	語義化標籤，相當於<divclass="header"></div>小的認爲能用其中有個hgroup可以用作副標題的存在
footer	語義化標籤，相當於<divclass="footer"></div>
address	相當於div了，小的認爲沒什麼意義了，又要考慮向下兼容，一般在footer中包含與聯繫人地址有關的東東

新標籤製作博客頁

現在來一張我博客頁的截圖

其中大概包括以下幾塊：

1、header 頭部

2、navigation 導航

3、aside 左欄信息

4、main 正文

5、評論

在做的過程中，我總把div和section等不太分的清楚，慢慢的就模糊了彼此之間的界限，最後得出一個結論：

一些新元素不是很有必要！這就是我的第一感受，但應該是不夠宏觀，到html5學到後面，估計會看到他們存在的意義。

完成的界面

昨晚做完，大概是以下模樣，到後面確實晚了，就沒做了，因爲我要給我女朋友幸福。。。。

基本用到了以上每個元素，一些我理解了，但是一些我不能完全理解；

View Code

  1 <!DOCTYPE html>
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <title></title>
  5     <style type="text/css">
  6         body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
  7         h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
  8         html, body { background: none repeat scroll 0 0 #FFFFFF; color: #000000; }
  9         body { background-image: url("http://common.cnblogs.com/Skins/sea/images/back.gif"); font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; font-size: 13px; line-height: 1.5; word-wrap: break-word; }
 10         p { line-height: 1.7;}
 11         a { text-decoration: none; color: #1A8BC8; }
 12         a:visited { color: #1A8BC8; }
 13         li { list-style: none; }
 14         img { border: none;}
 15         footer { text-align: center; color: Gray;}
 16         .c { clear: both;}
 17         .l-h-1 { line-height: 1;}
 18         .f-n { float: none;}
 19         .l { float : left;}
 20         .r { float: right;}
 21         
 22         
 23         .header { background: white url("http://common.cnblogs.com/Skins/sea/images/bg_header.jpg") no-repeat left top; height: 195px; border: 1px dotted #8B8D72; }
 24         .header hgroup{ margin: 50px 0 0 265px;  }
 25         .header h1 a{ font-size: 17px; font-weight: bold; text-decoration: none; color: Black;}
 26         
 27         .nav { margin: 0 20px 20px 260px; background: white; border: 1px dotted #8B8D72; border-top: none;}
 28         .nav ul{ padding: 5px 0 0 5px; }
 29         .nav li{ display: inline; padding: 5px 5px 0; }
 30         .nav aside { text-align: right; padding: 0 5px 5px;}
 31         
 32         .main { margin: 0 20px 20px 260px; background: white; border: 1px dotted #8B8D72; padding: 20px;}
 33         .main article header { margin-bottom: 10px; }
 34         .main article header h1{ font-size: 16px; font-weight: bold; }
 35         .main article header h1 a{ color: #1A8BC8; text-decoration: none; }
 36         .main article header h1 time, .main article header h1 span{ font-size: 12px; font-weight:  normal; float: right; }
 37         .main article section h2{ background: none repeat scroll 0 0 #2B6695; border-radius: 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); color: #FFFFFF; font-size: 14px; font-weight: bold; height: 25px; line-height: 25px; margin: 15px 0 !important; padding: 5px 0 5px 20px; text-shadow: 2px 2px 3px #222222; }
 38         .main .book { margin: 10px; }
 39         .main .book header { border-bottom: 1px solid  #2B6695; }
 40         .main .book .author { font-weight: bold;}
 41         .main .book h3 { background: #2B6695; padding: 5px 20px; border-radius: 4px 4px 0 0; display: inline-block; margin-left: 20px; font-weight: bold; color: White; }
 42         
 43         .main .green_channel { border: 1px dotted #8B8D72; padding: 10px 10px ; margin: 10px 0 10px 0; width: 420px;}
 44         .main .green_channel a { margin: 0 2px; display: inline-block; padding: 2px 10px; font-size: 12px; font-weight: bold; color: White; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D") repeat-x scroll 0 0 transparent;}
 45         .main .green_channel .green { background-color: #2DAEBF; }
 46         .main .green_channel .red { background-color: #E33100;}
 47         .main .green_channel .yellow { background-color: #FFB515;}
 48         .main .green_channel .gray { background-color: #EEEEEE; color: #555555;}
 49         .main .green_channel img { vertical-align: -7px;}
 50                 
 51         .main .author_info { display: inline-block; }
 52         .main .author_info .info_txt { display: inline-block; text-decoration: none; font-size: 12px; line-height: 1.5 }
 53         .main .digg { float: right;}
 54         .main .digg div { margin: 0 10px; display: inline-block; color: #075DB3; font-family: Verdana; font-size: 14px; text-align: center;}
 55         .main .digg div.f-n { float: none; display: block;color: gray; font-size: 12px;}
 56         .main .digg .top { background: url("http://static.cnblogs.com/images/upup.gif") no-repeat scroll 0 0 transparent; width: 46px; height: 52px;}
 57         .main .digg .down { background: url("http://static.cnblogs.com/images/downdown.gif") no-repeat scroll 0 0 transparent; width: 46px; height: 52px;}
 58        
 59         .aside { position: absolute; left: 20px; top: 105px; width: 220px; border: 1px dotted #8B8D72; background: white;}
 60         .aside .my_info { margin: 10px; line-height: 1.4;}
 61         .aside .side_bar { margin: 10px;}
 62         .aside .side_bar h3{ background: url("http://common.cnblogs.com/Skins/sea/images/bg_listtitle.gif") ; background-repeat: no-repeat; margin: 10px 0; font-weight: bold;}
 63         
 64         .comment { margin: 0 20px 20px 260px;}
 65         .comment h2 { padding: 5px 0;}
 66         .comment li { padding: 5px 15px; margin: 10px 0; border: 1px dotted #8B8D72; background: white; }
 67         .comment li a{ padding: 0 3px; }
 68     </style>
 69 </head>
 70 <body>
 71     <header class="header">
 72         <hgroup>
 73             <h1>
 74                 <a href="http://www.cnblogs.com/yexiaochai/">葉小釵</a></h1>
 75             <h2>
 76                 兩年內我會成爲國內優秀的web前端工程師！2013-04-15</h2>
 77         </hgroup>
 78     </header>
 79     <nav class="nav">
 80         <ul>
 81             <li><a href="http://www.cnblogs.com/">博客園</a></li>
 82             <li><a href="http://www.cnblogs.com/yexiaochai/">首頁</a></li>
 83             <li><a href="http://q.cnblogs.com">博問</a></li>
 84             <li><a href="http://home.cnblogs.com/ing/">閃存</a></li>
 85             <li><a href="http://www.cnblogs.com/yexiaochai/admin/EditPosts.aspx?opt=1">新隨筆</a></li>
 86             <li><a href="http://space.cnblogs.com/msg/send/%e5%8f%b6%e5%b0%8f%e9%92%97">聯繫</a></li>
 87             <li><a href="http://www.cnblogs.com/yexiaochai/rss">訂閱<img alt="訂閱" src="http://images.cnblogs.com/xml.gif"></a></li>
 88             <li><a href="http://www.cnblogs.com/yexiaochai/admin/EditPosts.aspx">管理</a></li>
 89         </ul>
 90         <!--不知道是否合理-->
 91         <aside>
 92               隨筆-20  評論-260  文章-0  trackbacks-0 
 93         </aside>
 94     </nav>
 95     <div class="main">
 96         <article>
 97             <header>
 98                 <h1>
 99                     <a href="#">HTML5書籍推薦</a><time pubdate="pubdate" value="2013-04-15">2013年4月15日</time><span>閱讀(1363) 評論(24）</span></h1>
100             </header>
101             <p>
102                 HTML5是用於取代1999年所制定的 HTML 4.01 和 XHTML 1.0 標準的 HTML 標準版本，現在仍處於發展階段，但大部分瀏覽器已經支持某些
103                 HTML5 技術。<br />
104                 HTML 5有兩大特點：首先，強化了 Web 網頁的表現性能。其次，追加了本地數據庫等 Web 應用的功能。廣義論及HTML5時，實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。<br />
105                 它希望能夠減少瀏覽器對於需要插件的豐富性網絡應用服務（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft
106                 Silverlight，與Oracle JavaFX的需求，並且提供更多能有效增強網絡應用的標準集。<br />
107                 <b>作爲前端開發人員你還未學習HTML5?</b>看來你已經OUT了，現在由老夫來推薦幾本書籍：</p>
108             <section>
109                 <h2>
110                     書籍推薦</h2>
111                 <article class="book">
112                     <header>
113                         <h3>
114                             HTML5高級程序設計</h3>
115                     </header>
116                     <div class="author">
117                             （荷）柳伯斯，（美）阿伯斯，（美）薩姆 著</div>
118                     <p>
119                         本書首先介紹了HTML5的歷史背景、新的語義標籤及與以往HTML版本相比的根本變化，同時揭示了HTML5背後的設計原理．從第2章起，分別圍繞構建令人神往的富Web應用，逐一討論了HTML5的Canvas、Geolocation、Communication、WebSocket、Forms、Web
120                         Workers、Storage等API的使用，輔以直觀明瞭的客戶端和服務器端示例代碼，讓開發人員能夠迅速理解和掌握新一代Web標準所涵蓋的核心技術。本書最後探索了離線Web應用並展望了HTML5未來的發展前景。<br />
121                         本書面向有一定經驗的Web應用開發人員，對HTML5及未來Web應用技術發展抱有濃厚興趣的讀者也可以學習參考。
122                     </p>
123                 </article>
124                 <article class="book">
125                     <header>
126                         <h3>
127                             HTML5&CSS3權威指南</h3>
128                     </header>
129                     <div class="author">
130                             陸凌牛</div>
131                     <p>
132                         如果你是一位有前瞻性的Web前端工作者，那麼你一定會從《HTML5與CSS3權威指南》中受益，因爲它就是專門爲你打造的。《HTML 5與CSS 3權威指南》內容系統而全面，詳盡地講解了HTML
133                         5和CSS 3的所有新功能和新特性；技術新穎，所有知識點都緊跟HTML 5與CSS 3的最新發展動態（HTML 5和CSS 3仍在不斷完善之中）；實戰性強（包含246個示例頁面），不僅每個知識點都配有精心設計的小案例（便於動手實踐），而且還有兩個綜合性的案例（體現用HTML
134                         5與CSS 3開發Web應用的思維和方法）。《HTML5與CSS3權威指南》不僅能滿足你全面而系統地學習理論知識的需求，還能滿足你需要充分實踐的需求。</p>
135                 </article>
136                 <article class="book">
137                     <header>
138                         <h3>
139                             Javascript高級程序設計</h3>
140                     </header>
141                     <div class="author">
142                             (美)(Nicholas C.Zakas)扎卡斯</div>
143                     <p>
144                         JavaScript 是根據 "ECMAScript"標準制定的網頁腳本語言。這個標準由 ECMA 組織發展和維護。ECMA-262 是正式的 JavaScript
145                         標準。JavaScript是目前Web客戶端開發的主要編程語言，也是Ajax的核心技術之一。
146                     </p>
147                 </article>
148             </section>
149             <footer>該文章屬於葉小釵原創文章，歡迎轉載，轉載請註明出處</footer>
150         </article>
151         <div class="green_channel">
152             綠色通道： <a class="green" href="javascript:void(0);">好文要頂</a> <a href="javascript:void(0);"
153                 class="red">關注我</a> <a href="javascript:void(0);" class="yellow">收藏該文</a> <a target="_blank"
154                     href="#" class="gray">與我聯繫</a> <img alt="" src="http://static.cnblogs.com/images/icon_weibo_24.png">
155         </div>
156 
157         <div class="author_info">
158             <a target="_blank" href="http://home.cnblogs.com/u/yexiaochai/">
159                 <img alt="" class="author_avatar" src="http://pic.cnitblog.com/face/u294743.jpg?id=23185449"></a>
160             <div class="info_txt">
161                 <a href="http://home.cnblogs.com/u/yexiaochai/">葉小釵</a><br>
162                 <a href="http://home.cnblogs.com/u/yexiaochai/followees">關注 - 19</a><br>
163                 <a href="http://home.cnblogs.com/u/yexiaochai/followers">粉絲 - 130</a>
164             </div>
165             <div class="l-h-1">
166                 <a href="#">+加關注</a>
167             </div>
168             <div class="c"></div>
169         </div>
170         <div class="digg">
171             <div class="top">6</div>
172             <div class="down">0</div>
173             <div class="f-n">(請您對文章做出評價)</div>
174         </div>
175     </div>
176     <aside class="aside">
177         <div class="my_info">
178             暱稱：<a href="http://home.cnblogs.com/u/yexiaochai/">葉小釵</a><br>
179             園齡：<a title="入園時間：2011-04-23" href="http://home.cnblogs.com/u/yexiaochai/">1年11個月</a><br>
180             粉絲：<a href="http://home.cnblogs.com/u/yexiaochai/followers/">130</a><br>
181             關注：<a href="http://home.cnblogs.com/u/yexiaochai/followees/">19</a><div id="p_b_follow">
182             </div>
183             <div id="p_b_ing">
184                 <a href="http://home.cnblogs.com/ing/my/">我的閃存</a></div>
185         </div>
186 
187         <div class="side_bar">
188             <h3>常用鏈接</h3>
189             <ul>
190                 <li><a href="http://www.cnblogs.com/yexiaochai/MyPosts.html" id="ctl01_rptMainLinks_lnkLinkItem_0">
191                     我的隨筆</a></li>
192                 <li><a href="http://www.cnblogs.com/yexiaochai/MyComments.html" id="ctl01_rptMainLinks_lnkLinkItem_1">
193                     我的評論</a></li>
194                 <li><a href="http://www.cnblogs.com/yexiaochai/OtherPosts.html" title="我發表過評論的隨筆"
195                     id="ctl01_rptMainLinks_lnkLinkItem_2">我的參與</a></li>
196                 <li><a href="http://www.cnblogs.com/yexiaochai/RecentComments.html" id="ctl01_rptMainLinks_lnkLinkItem_3">
197                     最新評論</a></li>
198                 <li><a href="http://www.cnblogs.com/yexiaochai/tag/" id="ctl01_rptMainLinks_lnkLinkItem_4">
199                     我的標籤</a></li>
200             </ul>
201             <h3>隨筆分類</h3>
202             <ul>
203                 <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/471015.html"
204                     class="listitem" id="ctl04_CatList_LinkList_0_Link_0">css</a></li>
205                 <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/471013.html"
206                     class="listitem" id="ctl04_CatList_LinkList_0_Link_1">HTML5&amp;CSS3初探</a></li>
207                 <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/471016.html"
208                     class="listitem" id="ctl04_CatList_LinkList_0_Link_2">javascript</a></li>
209                 <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/309100.html"
210                     class="listitem" id="ctl04_CatList_LinkList_0_Link_3">Java學習(3)</a></li>
211                 <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/326208.html"
212                     class="listitem" id="ctl04_CatList_LinkList_0_Link_4">Web前端(13)</a></li>
213                 <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/329149.html"
214                     class="listitem" id="ctl04_CatList_LinkList_0_Link_5">工作點滴(3)</a></li>
215                 <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/326205.html"
216                     class="listitem" id="ctl04_CatList_LinkList_0_Link_6">設計模式</a></li>
217                 <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/306145.html"
218                     class="listitem" id="ctl04_CatList_LinkList_0_Link_7">學習感悟(3)</a></li>
219             </ul>
220              <h3>最近評論</h3>
221             <ul>
222                 <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658242">
223                     1. Re:兩年內，我要成爲國內優秀的前端技術人員！</a></li>
224                 <li class="recent_comment_body"><a title="查看所回覆的評論" href="#2658237">@</a>SmileCoder<br>
225                     你目標有點難哦</li>
226                 <li class="recent_comment_author">--葉小釵</li>
227                 <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658237">
228                     2. Re:兩年內，我要成爲國內優秀的前端技術人員！</a></li>
229                 <li class="recent_comment_body"><a title="查看所回覆的評論" href="#2658193">@</a>葉小釵<br>
230                     2年內我一定要成爲國內優秀的NET軟件工程師</li>
231                 <li class="recent_comment_author">--SmileCoder</li>
232                 <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658218">
233                     3. Re:兩年內，我要成爲國內優秀的前端技術人員！</a></li>
234                 <li class="recent_comment_body">真正要改變自己不是一件容易的事。</li>
235                 <li class="recent_comment_author">--izhangxu</li>
236                 <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658196">
237                     4. Re:兩年內，我要成爲國內優秀的前端技術人員！</a></li>
238                 <li class="recent_comment_body"><a title="查看所回覆的評論" href="#2658081">@</a>zuiaitianxibi<br>
239                     我一直認爲這種題非常2.。。</li>
240                 <li class="recent_comment_author">--葉小釵</li>
241                 <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658193">
242                     5. Re:兩年內，我要成爲國內優秀的前端技術人員！</a></li>
243                 <li class="recent_comment_body"><a title="查看所回覆的評論" href="#2658180">@</a>趙弟棟<br>
244                     哪個是你妹。。。</li>
245                 <li class="recent_comment_author">--葉小釵</li>
246                 <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658180">
247                     6. Re:兩年內，我要成爲國內優秀的前端技術人員！</a></li>
248                 <li class="recent_comment_body">好久不見了 妹</li>
249                 <li class="recent_comment_author">--趙弟棟</li>
250                 <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658167">
251                     7. Re:兩年內，我要成爲國內優秀的前端技術人員！</a></li>
252                 <li class="recent_comment_body">加油吧！</li>
253                 <li class="recent_comment_author">--劉玲</li>
254                 <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658148">
255                     8. Re:兩年內，我要成爲國內優秀的前端技術人員！</a></li>
256                 <li class="recent_comment_body">好吧 支持一下</li>
257                 <li class="recent_comment_author">--clith</li>
258                 <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658144">
259                     9. Re:兩年內，我要成爲國內優秀的前端技術人員！</a></li>
260                 <li class="recent_comment_body"><a title="查看所回覆的評論" href="#2658132">@</a>月漩渦<br>
261                     多謝道友</li>
262                 <li class="recent_comment_author">--葉小釵</li>
263                 <li class="recent_comment_title"><a href="http://www.cnblogs.com/yexiaochai/archive/2013/04/15/3022395.html#2658132">
264                     10. Re:兩年內，我要成爲國內優秀的前端技術人員！</a></li>
265                 <li class="recent_comment_body">送你一首<a target="_blank" href="http://bz.5sing.com/1790260.html">初心</a></li>
266                 <li class="recent_comment_author">--月漩渦</li>
267             </ul>
268         </div>
269 
270     </aside>
271 
272     <div class="comment">
273         <h2>
274             評論：</h2>
275         <ul>
276             <li><a href=""># 1樓</a>
277                 <time>2013-04-15 16:48</time>
278                 | <a href="">2013-04-15 16:48</a>
279                 <p>
280                     感覺渾身氣爽啊，我也何嘗不是有過此想法，其實捨去與捨去，需要改變的都是自己，而自己改變了，周圍的一切也會隨之改變，大道在於實踐，希望你的實踐能夠幫助自己，祝你早日走上那一步了。</p>
281                 <div>
282                     <a href="javascript:void(0);">回覆</a> <a href="javascript:void(0);">引用</a> <a href="javascript:void(0);">
283                         刪除</a> <a class="r" href="javascript:void(0);">反對(0)</a> <a href="javascript:void(0);"
284                             class="r">支持(0)</a>
285                 </div>
286             </li>
287             <li><a href=""># 1樓</a>
288                 <time>2013-04-15 16:48</time>
289                 | <a href="">2013-04-15 16:48</a>
290                 <p>
291                     感覺渾身氣爽啊，我也何嘗不是有過此想法，其實捨去與捨去，需要改變的都是自己，而自己改變了，周圍的一切也會隨之改變，大道在於實踐，希望你的實踐能夠幫助自己，祝你早日走上那一步了。</p>
292                 <div>
293                     <a href="javascript:void(0);">回覆</a> <a href="javascript:void(0);">引用</a> <a href="javascript:void(0);">
294                         刪除</a> <a class="r" href="javascript:void(0);">反對(0)</a> <a href="javascript:void(0);"
295                             class="r">支持(0)</a>
296                 </div>
297             </li>
298             <li><a href=""># 1樓</a>
299                 <time>2013-04-15 16:48</time>
300                 | <a href="">2013-04-15 16:48</a>
301                 <p>
302                     感覺渾身氣爽啊，我也何嘗不是有過此想法，其實捨去與捨去，需要改變的都是自己，而自己改變了，周圍的一切也會隨之改變，大道在於實踐，希望你的實踐能夠幫助自己，祝你早日走上那一步了。</p>
303                 <div>
304                     <a href="javascript:void(0);">回覆</a> <a href="javascript:void(0);">引用</a> <a href="javascript:void(0);">
305                         刪除</a> <a class="r" href="javascript:void(0);">反對(0)</a> <a href="javascript:void(0);"
306                             class="r">支持(0)</a>
307                 </div>
308             </li>
309             <li><a href=""># 1樓</a>
310                 <time>2013-04-15 16:48</time>
311                 | <a href="">2013-04-15 16:48</a>
312                 <p>
313                     感覺渾身氣爽啊，我也何嘗不是有過此想法，其實捨去與捨去，需要改變的都是自己，而自己改變了，周圍的一切也會隨之改變，大道在於實踐，希望你的實踐能夠幫助自己，祝你早日走上那一步了。</p>
314                 <div>
315                     <a href="javascript:void(0);">回覆</a> <a href="javascript:void(0);">引用</a> <a href="javascript:void(0);">
316                         刪除</a> <a class="r" href="javascript:void(0);">反對(0)</a> <a href="javascript:void(0);"
317                             class="r">支持(0)</a>
318                 </div>
319             </li>
320             <li><a href=""># 1樓</a>
321                 <time>2013-04-15 16:48</time>
322                 | <a href="">2013-04-15 16:48</a>
323                 <p>
324                     感覺渾身氣爽啊，我也何嘗不是有過此想法，其實捨去與捨去，需要改變的都是自己，而自己改變了，周圍的一切也會隨之改變，大道在於實踐，希望你的實踐能夠幫助自己，祝你早日走上那一步了。</p>
325                 <div>
326                     <a href="javascript:void(0);">回覆</a> <a href="javascript:void(0);">引用</a> <a href="javascript:void(0);">
327                         刪除</a> <a class="r" href="javascript:void(0);">反對(0)</a> <a href="javascript:void(0);"
328                             class="r">支持(0)</a>
329                 </div>
330             </li>
331             <li><a href=""># 1樓</a>
332                 <time>2013-04-15 16:48</time>
333                 | <a href="">2013-04-15 16:48</a>
334                 <p>
335                     感覺渾身氣爽啊，我也何嘗不是有過此想法，其實捨去與捨去，需要改變的都是自己，而自己改變了，周圍的一切也會隨之改變，大道在於實踐，希望你的實踐能夠幫助自己，祝你早日走上那一步了。</p>
336                 <div>
337                     <a href="javascript:void(0);">回覆</a> <a href="javascript:void(0);">引用</a> <a href="javascript:void(0);">
338                         刪除</a> <a class="r" href="javascript:void(0);">反對(0)</a> <a href="javascript:void(0);"
339                             class="r">支持(0)</a>
340                 </div>
341             </li>
342             <li><a href=""># 1樓</a>
343                 <time>2013-04-15 16:48</time>
344                 | <a href="">2013-04-15 16:48</a>
345                 <p>
346                     感覺渾身氣爽啊，我也何嘗不是有過此想法，其實捨去與捨去，需要改變的都是自己，而自己改變了，周圍的一切也會隨之改變，大道在於實踐，希望你的實踐能夠幫助自己，祝你早日走上那一步了。</p>
347                 <div>
348                     <a href="javascript:void(0);">回覆</a> <a href="javascript:void(0);">引用</a> <a href="javascript:void(0);">
349                         刪除</a> <a class="r" href="javascript:void(0);">反對(0)</a> <a href="javascript:void(0);"
350                             class="r">支持(0)</a>
351                 </div>
352             </li>
353         </ul>
354     </div>
355 
356     <footer>版權所有·博客園</footer>
357 </body>
358 </html>

關於IE7、8

不必說低版本瀏覽器是不能識別該元素的！

傳說中的解決方案：

<script type="text/javascript">
        document.createElement('header');
    </script>
    <style type="text/css">
        header { display: block;}
    </style>

　　但老夫在衝忙中試了試，亦不行，具體相關問題，留待小弟第一次學完後，2次學習時在一併回顧。

結束語

因爲是初學HTML5，肯定會有很多不足的地方，當我真正做起來的時候，感覺有所不同，最後居然給header等標籤單獨定義了class？？？

新東西還是需要很多思考的，這樣和直接用div的界限更加不分明瞭，此問題留待以後解決，有必要學習看看比較成熟的HTML5網站。

昨晚學的東西比較實在，也沒有什麼難點，下次小的看看新增的form標籤會不會有所不同呢？