HTML5和HTML其實是很相似的，但是有些內容有發生了改變，今天我學習了一下HTML5發現還是挺好學的，只要有html+css基礎就可以，今天知識看了下新的標簽。
一、定義文檔類型
在文件的開頭總是會有一個標簽
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
這是顯示的html的文檔類型，上面那個是1.0的，下面這個就是HTML5的類型標簽，很是簡短
<!DOCTYPE html>
二、新的布局方式
如下圖所顯示的布局結果
正常的HTML布局就是通過div+css進行的，要是布局出這個頁面正常的就是用div進行布局，然后給div進行起名字，然后進行樣式的修改；
在HTML5中有個塊狀元素（有意義的div），也就是說不用div標簽，而是用名字式的元素，例如：布局出第一個藍色塊是使用div，起名字，然后進行改變css；HTML是使用的header標簽進行修改樣式，header就是有意義的div
使用HTML5的新的結構標簽，做出上面的布局，代碼如下：
html代碼：
<header>定義一個頁面或是區域的頭部</header>
<div>
<section>定義一個區域</section>
<aside>定義頁面內容的側邊框部分</aside>
</div>
<footer>定義一個頁面或是區域的底部</footer>
css代碼：
/*頁面頂部 header*/
header{
height:150px;
background-color:#abcdef;
}
/*頁面中間 div*/
div{
margin-top:10px;
height:300px;
}
section{
height:300px;
background-color:#abcdef;
width:70%;
float:left;
}
article{
background-color:#F33;
width:500px;
text-align:center;
margin:0px auto;
}
aside{
height:300px;
background-color:#abcdef;
width:28%;
float:right;
}
/*頁面底部*/
footer{
height:100px;
background-color:#abcdef;
clear:both;
margin-top:10px;
}
這樣就可以不用使用div而是使用的有意義的div元素就可以布局出上面的那個樣式了
三、新的標簽
（1）定義導航鏈接<nav></nav>
它也是有意義的標簽，並不是在某處加上這個標簽就有了導航的樣式了，這都是有意義的div而已，在頭部header中加入菜單標簽<nav>，nav標簽可以和<ul><li>標簽合用
html代碼：
<header>
<p>這是一個header部分</p>
<nav> <!--導航鏈接標簽-->
<ul> <!--配合ul使用-->
<li>首頁</li>
<li>關於</li>
<li>產品</li>
<li>聯系</li>
</ul>
</nav>
</header>
css代碼：
/*定義nav的高和顏色*/
nav{
height:30px;
background-color:#F33;
margin-top:100px;}
/*正常設置li的樣式*/
li{
list-style:none;
float:left;
width:100px;
height:30px;
}
這樣就可以實現之前只用div進行的菜單布局了
（2）定義文章標簽<article></article>
可以使用文章塊標簽進行寫文章，這就使用這個標簽進行寫文章在section部分，可以和<h1><p>合用
html代碼：
<article><!--文章塊div--> <h2>文章標題</h2><!--標題--> <p>文章內容文章內容文章內容文章內容文章內容文章內容 <br> 文章內容文章內容文章內容文章內容文章內容文章內容<br> 文章內容文章內容文章內容</p> </article>
css樣式：
article{
background-color:#F33;
width:500px;
text-align:center; /*水平居中*/
margin:0px auto;
}
這樣就可以寫一篇文章了
（3）定義媒介內容的分組，以及它們的標題<figure>
A。這個標簽可以和它的配套標簽聯合使用<figcaption>，不過<figcaption></figcaption>中間寫標題
<figure>
<figcaption>標題</figcaption><!--配套-->
<p>標題內容</p>
</figure>
B。還可以和<dt><dd>聯合使用，其中<dt></dt>是寫標題，而<dd>寫內容，顯示的效果和配套使用的效果也有差異
<figure>
<dt>標題1</dt>
<dd>標題內容</dd>
</figure>
（4）定義對話框或窗口<dialog>
在這個標簽中也是可以使用dd和dt標簽，對話框中的標題和內容，對話框有個屬性是open，這個標簽的兼容性不是很好
<dialog open>
<dt>1問題</dt>
<dd>1答案</dd>
<dt>2問題</dt>
<dd>2答案</dd>
</dialog>
（5）定義命令的列表或菜單<menu>
A。這個標簽可以和li合用
<menu>
<li>定義列表</li>
<li>定義列表</li>
<li>定義列表</li>
</menu>
B。可以給右鍵單擊中添加自己的內容（只有火狐瀏覽器可以兼容）
聯合（定義用戶可以從彈出菜單調用的命令/菜單項目）<menuitem>標簽使用
<menu type="context" id="cai">
<!--label是右鍵后顯示的菜單項，onclick是選中菜單后執行的代碼-->
<menuitem label="菜單一" onclick="alert('這是菜單一')" icon="右鍵單擊顯示的圖片"></menuitem>
</menu>
<span contextmenu="cai">單擊我試試</span>
右鍵單擊后出現想要的菜單項
單擊菜單項，彈出內容
（6）標題組<hgroup>
里面可以寫一些標題的結合<h3>合用
<hgroup><!--標題組-->
<h3>標題</h3>
<h3>標題1</h3>
<h3>標題2</h3>
<h3>標題3</h3>
</hgroup>
（7）定義小號文本<small>
這個標簽和其他的加粗什么的標簽其實是差不多的
<small>法律條文</small> <small>聯系我們</small> <small>客戶意見</small>
（8）定義元素的細節<details>
里面的內容可以配合標題和內容標簽來使用
<details>
<dt>問題</dt>
<dd>解答</dd>
<dt>問題</dt>
<dd>解答</dd>
<dt>問題</dt>
<dd>解答</dd>
</details>
點擊詳細信息就可以看到標題和內容了
（9）定義 ruby 注釋<ruby>
碰到不認識的字了可以使用這個進行注釋拼音，但是有的兼容性不是很好，到時候可以進行修改
<ruby>夼<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby> <!--<rp>是能夠兼容的時候讓括號不可見，不能兼容的時候讓括號可見，rt是進行這是的內容-->
（10）定義預定義范圍內的度量<meter>
有幾個屬性值，min="" max="" value="" low="" high=""，其中low和high是范圍，當value范圍超了話就會顯示不同的效果
<meter min="0" max="10" value="4" low="2" high="7">
value值超出了范圍后
<meter min="0" max="10" value="8" low="2" high="7">
（11）進度條的標簽<progress>
<progress id="jindu" max="100" value="0"></progress>進度條
最大值就是進度條的長度就行，value值就是顯示的進度，用它可以進行動態的進度條
<progress id="jindu" max="100" value="0"></progress>進度條
<script>
var pro = document.getElementById("jindu");
setInterval(function(){ pro.value+=1;},1000); //間隔1秒它的值加1
</script>
這樣進度條就可以完成了，是不是比只用js寫的好多了，不同的瀏覽器表現形式還不一樣
