<!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浏览器打开，此时你会发现IE8浏览器显示的<canvas>标签内的文字，这是由于IE8不支持HTML5的画布标签。如果你使用Chrome，或者360浏览器打开，就会看到一个长宽比为2:1的红色方框，此时<canvas>的内容才是正确的表示。
简单的Web页面
<!DOCTYPE html>
<META charset=""utf-8">
<TITLE>第一个HTML5页面</TITLE>
<P>Hello,World</P>
<!DOCTYPE html>告诉浏览器需要一个doctype来触发标准模式。
<META charset="utf-8">说明文档字符编码，同时HTML5不区分字母大小写，标记结束符以及属性是否加引号，即以下代码是等效的
<meta charset="utf-8">
<META charset="utf-8">
<META charset=utf-8>
细心的人已经发现了，我们在编码时省略了<html>,<head>,<body>标记，但是在浏览器进行解析时，将会自动进行添加。
使用HTML5结构化元素
<!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">导航</div>
<div id="siderLeft">菜单</div>
<div id="siderRight">内容</div>
<div id="footer">底部说明</div>
</body>
<html>
下面是以上代码在浏览器中的正确样式
1.png
使用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>导航</header>
<nav>菜单</nav>
<article>内容</article>
<footer>底部说明</footer>
</body>
<html>
在HTML5的新增元素中，<header>标签可以明确地告诉浏览器此处是页头，<nav>标记用于构建页面的导航，<article>标记用于构建页面内容的一部分，<footer>元素表明页面已到页脚或跟元素部分，并且这些标记都可以重复使用，极大地提高了开发者的工作效率。
HTML5元素还可以单独称为一个区域
<header>
<article>
<h1>内容1</h1>
</article>
</header>
<header>
<article>
<h2>内容2</h2>
</article>
</header>
在HTML5中，一个<article>可以创建一个新的节点，并且每个节点都可以有自己的单独元素，如<h1>或<h2>，这样不仅使内容区域各自分段，便于维护，而且代码简单，局部修改方便。
使用CSS美化HTML5文档
在默认情况下，CSS会默认元素的display属性值为inline，因此，为了正确地显示设置的页面效果，需要将元素的display属性值设置为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时需要执行该段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>网易科技讯 8月 11日消息，据国外媒体报道，谷歌在主打社交网络服务Google+一键后终于重归"老本行"，推出一系列和社交网络没有关联的搜索引擎新功能</p>
</header>
</article>
</body>
<html>
由于有些浏览器不支持HTML5中的新增元素，为了解决这个问题，我们可以在头部标记<head>中加入JavaScript代码。
