本文只是本身學習HTML5時的一些筆記。但願本身可以學好HTML5. 若是有感興趣的同窗。能夠互相學習。css
我以爲HTML5在將來的開發中站主導地位。html
下面開始學習HTML5. 仍是從HTML5標籤開始。html5
1、HTML5標籤ruby
之前的佈局都是用div+css 控制。自從HTML出來之後。W3C給出了一些明確規範。ide
用一些標籤去從新定義了HTML標籤意義。佈局
<!DOCTYPE html"> 首先必需要定義 doctype 或者 DOCTYPE 不區分大小寫。學習
<header> 標籤訂義文檔的頁眉ui
<section> 標籤訂義獨立的內容spa
<aside> 側邊欄標籤htm
<article> 標籤訂義獨立的內容。
<footer> 這個就不用說了，底部標籤
<hr/> 這個分割行標籤，這個沒有變化。只是HTML5 從新定義了意義
<hgroup> 標籤用於對網頁或區段（section）的標題進行組合。
<figure> 規定獨立的流內容（圖像、圖表、照片、代碼等等）。
figure 元素的內容應該與主內容相關，但若是被刪除，則不該對文檔流產生影響。
<figurecaption> 定義 figure 元素的標題（caption）
<dt> 標籤訂義一個定義列表中的一個項目。
<dd> 標籤訂義一個定義列表中對項目的描述。
<dialog> 標籤訂義對話框或窗口。
<menu> 標籤可定義一個菜單列表。
<menuitem> 菜單列表的內容
<meter> 標籤訂義度量衡。僅用於已知最大和最小值的度量。
<progress> 標籤訂義運行中的進度（進程）
<details> 標籤用於描述文檔或文檔某個部分的細節。
<ruby><rp><rt> 這三個基本上一塊兒使用
<mark> 標籤訂義帶有記號的文本。請在須要突出顯示文本時使用 <m> 標籤。
暫時就學這麼多了。一口吃不了胖子。下面會繼續的。
2、實例
<!DOCTYPE html">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style>
/* 頁面頭部 */
div{margin-top:10px;height:1000px;}
header{height:150px;background:#abcdef}
nav{height:30px;background:#ff9900;margin-top:100px;}
nav ul li{width:100px; height:30px;float:left;line-height:30px;}
/* 頁面中間*/
section{height:1000px;background:#abcdef; width:70%;float:left;}
article{background:#f90;width:500px;margin:0 auto;text-align:center;}
aside{height:1000px;background:#abcdef; width:28%;float:right;}
/* 頁面底部*/
footer{ height:100px;background:#abcdef;clear:both;margin-top:10px;}
</style>
</head>
<body>
<header>
<p>這是一個header標籤</p>
<nav>
<ul>
<li>首頁</li>
<li>婚紗攝影</li>
<li>社區</li>
<li>旅行</li>
<li>聯繫咱們</li>
</ul>
</nav>
</header>
<div>
<section>
<p>這是一個section標籤</p>
<article>
<h2>春曉</h2>
<p>
春眠不覺曉，<br/>
春眠不覺曉，<br/>
春眠不覺曉，<br/>
春眠不覺曉，<br/>
</p>
</article>
<hr/>
<article>
<h2>上學歌</h2>
<p>
太陽當空照，<br/>
花兒對我笑，<br/>
小鳥說早早早，<br/>你爲何背上小書包，<br/>
早上老師好！<br/>
</p>
</article>
<hr/>
<figure>
<figurecaption>UFO</figurecaption>
<P>不明飛行物 Unknown Flying object</P>
</figure>
<figure>
<dt>DDS</dt>
<p>大屌絲</p>
</figure>
<hr/>
<dialog>
<dt>唐僧：悟空，你又調皮了，觀音姐姐的月光寶盒怎麼能扔呢？</dt>
<dd>悟空：........</dd>
<dt>唐僧：亂扔是不對的，碰到小朋友怎麼辦？</dt>
<dd>悟空：....(糾結)</dd>
<dt>唐僧：悟空你想要麼？想要你就告訴我呀？你不告訴我我怎麼知道你想要呢？</dt>
<dd>悟空：我靠；(一棍子輪上去)</dd>
</dialog>
<hr/>
<menu>
<li>點擊</li>
<li>右鍵單擊</li>
</menu>
<hr/>
<span contextmenu="caidan">右鍵單擊我試試</span>
<menu type="context" id="caidan">
<menuitem label="菜單一" onclick="alert('這是一個內嵌菜單')" icon="http://www.baidu.com/img/bdlogo.gif"></menuitem>
</menu>
<hr/>
<meter min="0" max="10" value="5" lew="3" high="7"></meter>
<progress max="100" value="0" id="pro"></progress>
<script>
var pro = document.getElementById('pro');
setInterval(function(){
pro.value+=1;
},100)
</script>
<hr/>
<details>
<dt>這是一個問題？</dt>
<dd>to be or not to be</dd>
<dt>這是一個問題？</dt>
<dd>to be or not to be</dd>
</details>
<hr/>
<ruby>夼<rp>(</rp><rt>kuang</rt><rp>)</rp><ruby>
<hr/>
女人<mark>最喜歡作的事情</mark>就是逛街，吃零食！
因而總結一下女人：逛吃，逛吃，逛吃。
</section>
<hr/>
<section>
<p>HTML5有點：簡單，標記數量有限和語法較弱；不足：結構性差，（不能建立自定義標籤）惡性競爭。
</p>
</section>
<aside>
<p>這是一個aside標籤</p>
<hgroup>
<h3>女生宿舍爲什麼頻頻被盜</h3>
<h3>兩百頭母豬爲什麼慘死</h3>
<h3>是人性的扭曲？</h3>
<h3>男人爲什麼壓力大！</h3>
</hgroup>
</aside>
</div>
<footer>
<p>這是一個footer標籤</p>
<hr/>
<small>聯繫咱們</small>
<small>客戶意見</small>
<small>招商引資</small>
</footer>
</body>
</html>
爲了我所愛的，要學會愛我所不愛的！