<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title></title>
<style type="text/css">
#myCanvas{
background:red;
width:200px;
height:100px;
}
</style>
</head>
<body>
<canvas id="myCanvas">該瀏覽器不支持HTML5的畫布標記！></canvas>
</body>
<html>
將以上代碼保存為index.html文件，并使用IE8瀏覽器打開帕涌，此時你會發(fā)現(xiàn)IE8瀏覽器顯示的<canvas>標簽內(nèi)的文字值依，這是由于IE8不支持HTML5的畫布標簽。如果你使用Chrome碌补，或者360瀏覽器打開，就會看到一個長寬比為2:1的紅色方框，此時<canvas>的內(nèi)容才是正確的表示奈揍。
簡單的Web頁面
<!DOCTYPE html>
<META charset=""utf-8">
<TITLE>第一個HTML5頁面</TITLE>
<P>Hello,World</P>
<!DOCTYPE html>告訴瀏覽器需要一個doctype來觸發(fā)標準模式。
<META charset="utf-8">說明文檔字符編碼赋续，同時HTML5不區(qū)分字母大小寫男翰，標記結(jié)束符以及屬性是否加引號，即以下代碼是等效的
<meta charset="utf-8">
<META charset="utf-8">
<META charset=utf-8>
細心的人已經(jīng)發(fā)現(xiàn)了纽乱，我們在編碼時省略了<html>,<head>,<body>標記蛾绎，但是在瀏覽器進行解析時，將會自動進行添加鸦列。
使用HTML5結(jié)構(gòu)化元素
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title></title>
<style type="text/css">
#header,#siderLeft,#siderRight,#footer{
border:solid 1px #666;
padding:10px;
margin:6px;
}
#header{width:500px}
#siderLeft{
float: left;
width:60px;
height:100px;
}
#siderRight{
float: left;
width:406px;
height: 100px;
}
#footer{
clear: both;
width: 500px;
}
</style>
</head>
<body>
<div id="header">導(dǎo)航</div>
<div id="siderLeft">菜單</div>
<div id="siderRight">內(nèi)容</div>
<div id="footer">底部說明</div>
</body>
<html>
下面是以上代碼在瀏覽器中的正確樣式
使用HTML5新增元素改編以上代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title></title>
<style type="text/css">
header,nav,article,footer{
border:solid 1px #666;
padding:10px;
margin:6px;
}
header{width:500px}
nav{
float: left;
width:60px;
height:100px;
}
article{
float: left;
width:406px;
height: 100px;
}
footer{
clear: both;
width: 500px;
}
</style>
</head>
<body>
<header>導(dǎo)航</header>
<nav>菜單</nav>
<article>內(nèi)容</article>
<footer>底部說明</footer>
</body>
<html>
在HTML5的新增元素中租冠，<header>標簽可以明確地告訴瀏覽器此處是頁頭，<nav>標記用于構(gòu)建頁面的導(dǎo)航薯嗤，<article>標記用于構(gòu)建頁面內(nèi)容的一部分顽爹，<footer>元素表明頁面已到頁腳或跟元素部分，并且這些標記都可以重復(fù)使用骆姐，極大地提高了開發(fā)者的工作效率话原。
HTML5元素還可以單獨稱為一個區(qū)域
<header>
<article>
<h1>內(nèi)容1</h1>
</article>
</header>
<header>
<article>
<h2>內(nèi)容2</h2>
</article>
</header>
在HTML5中，一個<article>可以創(chuàng)建一個新的節(jié)點诲锹，并且每個節(jié)點都可以有自己的單獨元素繁仁，如<h1>或<h2>，這樣不僅使內(nèi)容區(qū)域各自分段归园，便于維護黄虱，而且代碼簡單，局部修改方便庸诱。
使用CSS美化HTML5文檔
在默認情況下捻浦，CSS會默認元素的display屬性值為inline，因此桥爽，為了正確地顯示設(shè)置的頁面效果朱灿，需要將元素的display屬性值設(shè)置為block
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title></title>
<style type="text/css">
article{display: block}
article header p{
font-size:13px;}
article header h1{
font-size: 16px;
}
.p-date{font-size: 11px}
</style>
<script type="text/javascript">
if (typeof(Worker) == "undefined") {
/*不支持HTML5時需要執(zhí)行該段script代碼*/
document.createElement('article')
document.createElement('header')
}
</script>
</head>
<body>
<article>
<header>
<h1><a>谷歌退出多項新搜索功能 避談Google+</a></a></h1>
<p class="p-date">日期：2012-8-11</p>
<p>網(wǎng)易科技訊 8月 11日消息，據(jù)國外媒體報道钠四，谷歌在主打社交網(wǎng)絡(luò)服務(wù)Google+一鍵后終于重歸"老本行"盗扒，推出一系列和社交網(wǎng)絡(luò)沒有關(guān)聯(lián)的搜索引擎新功能</p>
</header>
</article>
</body>
<html>
由于有些瀏覽器不支持HTML5中的新增元素跪楞，為了解決這個問題，我們可以在頭部標記<head>中加入JavaScript代碼侣灶。
