编写第一个HTML5页面

<!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代码。