相对于Html4，Html5在语法上做了较大变动，并且新增了大量新的标签，使得代码更加简洁但功能更加强大。虽然说Html5变动较大，但有Html基础的人依然很容易转到Html5，下面提供了一个基本的Html5模板，并附加了详细说明，希望能让你快速上手。
Html5 模板下载
Html5源代码
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>Basic HTML5 Template</title>
<meta name="description" content="Basic HTML5 Template from renniaofei.com">
<meta name="keyword" content="renniaofei.com">
<link rel="stylesheet" href="styles.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1 id="logo"><a href="">Logo</a></h1>
<p id="description">Description</p>
<nav>
<ul>
<li><a href="http://www.bestdesignmag.com" title="Best Design Magazine">Best Design Magazine</a></li>
<li><a href="http://www.mwtemplate.com" title="Moblie Web Template">Moblie Web Template</a></li>
<li><a href="http://www.iDesignWallpaper.com" title="iDesignWallpaper">iDesignWallpaper</a></li>
<li><a href="http://www.iPhoneFaves.com" title="iPhone Faves">iPhone Faves</a></li>
<li><a href="http://www.IndustryIdea.com" title="Industry Idea">Industry Idea</a></li>
<li><a target="_blank" href="http://www.twitter.com/noonewebdesign">Twitter</a></li>
</ul>
</nav>
</header>
<div id="wrap">
<artcile>
<section>Article Section</section>
</article>
<aside>Sidebar</aside>
</div>
<footer>Footer</footer>
</body>
</html>
Html5和Html4两者的区别
1. 文档类型 doctype 申明语法
Html4：
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN””http://www.w3.org/TR/html4/loose.dtd”>
Html5：
<!doctype html>
2. head 标签
Html4：
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
Html5：
<meta charset=”utf-8″>
3. html 标签
XHTML：
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”zh”>
Html5：
<html lang=”zh”>
4. 新增标签
Html5 新增 <header> <nav> <article> <section> <aside> <footer> 等，详见 HTML5新增元素标记。
Html5 常见布局样式
5 个评论