废话不多说，直接上例子！
工欲善其事，必先利其器
- 浏览器要有吧~ 比如：IE、Chrome、Firefox……
- 纯文本编辑软件不可少~ 比如：最简单的记事本就可以了
- 打开记事本，输入以下示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="big5">
<title>背包客旅行札记</title>
</head>
<body>
<header id="header">
<hgroup>
<h1>背包客旅行札记</h1>
<h4>旅行是一种休息，而休息是为了走更长远的路</h4>
</hgroup>
<nav>
<ul>
<li><a href="#">关于背包客</a></li>
<li class="current-item"><a href="#">国内旅游</a></li>
<li><a href="#">国外旅游</a></li>
<li><a href="#">与我联络</a></li>
</ul>
</nav>
</header>
<article id="travel">
<section>
<h2>Hello World!</h2>
<p>四季都是适合旅行的季节。</p>
<p>不一定要花大钱，做点功课和多点自信，就能享受旅游的美好。</p>
</section>
<aside>
<figure>
<img src="photo.png" alt="眣盯" />
</figure>
</aside>
</article>
<footer>
HTML5网页练习
</footer> </body>
</html>
- 保存，注意后缀为htm
- 预览HTML网页
打开浏览器，将文件拖曳到浏览器内，就可以看到结果了，嚯嚯！
示例网页如下：
这样似乎还不够美观，加上CSS语法会变成这样：
CSS后续会介绍，这里先暂时略过……
代码仅共参考：
<!DOCTYPE html>
<html>
<head>
<meta charset="big5">
<title>背包客旅行札记</title>
<style type="text/css">
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
html {
background-color: #F1F0DF;
}
body {
border: 3px solid #660000;
background-color: #FFF;
font: 15px Helvetica, "稬硁タ堵砰", Sans-Serif;
margin: 20px auto;
padding: 5px 10px;
width: 750px;
}
a {
color: #996600;
text-decoration: none;
}
h1, h2, h4 {
margin: 0;
}
a:hover {
color: #cc3300;
}
#header {
margin-bottom: 15px;
}
#header hgroup h4 {
font-style: italic;
font-weight: normal;
margin-bottom: 18px;
text-indent: 10px;
}
#header nav {
border-bottom: 1px solid #DDDCCC;
font-size: 16px;
}
#header nav ul {
overflow: hidden;
padding: 0 0 5px 0;
margin: 0;
}
#header nav li {
float: left;
list-style: none;
padding: 0 5px;
}
#header nav li.current-item a {
color: #765C07;
}
#travel {
overflow: hidden;
text-align: justify;
}
#travel section {
float: left;
width: 350px;
}
#travel aside {
margin-left: 400px;
}
#travel aside figure {
margin: 0;
}
footer {
margin: 15px 0 10px;
text-align: center;
}
</style> <!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> </head> <body> <header id="header"> <hgroup>
<h1>背包客旅行札记</h1>
<h4>旅行是一种休息，而休息是为了走更长远的路</h4>
</hgroup> <nav>
<ul>
<li><a href="#">关于背包客</a></li>
<li class="current-item"><a href="#">国内旅游</a></li>
<li><a href="#">国外旅游</a></li>
<li><a href="#">与我联络</a></li>
</ul>
</nav> </header> <article id="travel"> <section>
<h2>Hello World!</h2>
<p>四季都是适合旅行的季节。</p>
<p>不一定要花大钱，做点功课和多点自信，就能享受旅游的美好。</p>
</section> <aside>
<figure>
<img src="photo.png" alt="眣盯" />
</figure>
</aside> </article> <footer>
HTML5网页练习
</footer> </body>
</html>
小结：这只是一个简单的引例，旨在开启我的学习之旅，将理论付诸于实践，当看到美美的页面展现在眼前时，是一种极大的满足啊！又该去看书了，先撤……