废话不多说，直接上例子！
工欲善其事，必先利其器
- 浏览器要有吧~ 比如：IE、Chrome、Firefox……
- 纯文本编辑软件不可少~ 比如：最简单的记事本就可以了
- 打开记事本，输入以下示例代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="big5">
5 <title>背包客旅行札记</title>
6 </head>
7 <body>
8 <header id="header">
9 <hgroup>
10 <h1>背包客旅行札记</h1>
11 <h4>旅行是一种休息，而休息是为了走更长远的路</h4>
12 </hgroup>
13 <nav>
14 <ul>
15 <li><a href="#">关于背包客</a></li>
16 <li class="current-item"><a href="#">国内旅游</a></li>
17 <li><a href="#">国外旅游</a></li>
18 <li><a href="#">与我联络</a></li>
19 </ul>
20 </nav>
21 </header>
22 <article id="travel">
23 <section>
24 <h2>Hello World!</h2>
25 <p>�四季都是适合旅行的季节。�</p>
26 <p>不一定要花大钱，做点功课和多点自信，就能享受旅游的美好。</p>
27 </section>
28 <aside>
29 <figure>
30 <img src="photo.png" alt="眣盯" />
31 </figure>
32 </aside>
33 </article>
34 <footer>
35 HTML5网页练习
36 </footer>
37
38 </body>
39 </html>
- 保存，注意后缀为htm
- 预览HTML网页
打开浏览器，将文件拖曳到浏览器内，就可以看到结果了，嚯嚯！
示例网页如下：
这样似乎还不够美观，加上CSS语法会变成这样：
CSS后续会介绍，这里先暂时略过……
代码仅共参考：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="big5"> 5 <title>背包客旅行札记</title> 6 <style type="text/css"> 7 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } 8 html { 9 background-color: #F1F0DF; 10 } 11 body { 12 border: 3px solid #660000; 13 background-color: #FFF; 14 font: 15px Helvetica, "稬硁タ堵砰", Sans-Serif; 15 margin: 20px auto; 16 padding: 5px 10px; 17 width: 750px; 18 } 19 a { 20 color: #996600; 21 text-decoration: none; 22 } 23 h1, h2, h4 { 24 margin: 0; 25 } 26 a:hover { 27 color: #cc3300; 28 } 29 #header { 30 margin-bottom: 15px; 31 } 32 #header hgroup h4 { 33 font-style: italic; 34 font-weight: normal; 35 margin-bottom: 18px; 36 text-indent: 10px; 37 } 38 #header nav { 39 border-bottom: 1px solid #DDDCCC; 40 font-size: 16px; 41 } 42 #header nav ul { 43 overflow: hidden; 44 padding: 0 0 5px 0; 45 margin: 0; 46 } 47 #header nav li { 48 float: left; 49 list-style: none; 50 padding: 0 5px; 51 } 52 #header nav li.current-item a { 53 color: #765C07; 54 } 55 #travel { 56 overflow: hidden; 57 text-align: justify; 58 } 59 #travel section { 60 float: left; 61 width: 350px; 62 } 63 #travel aside { 64 margin-left: 400px; 65 } 66 #travel aside figure { 67 margin: 0; 68 } 69 footer { 70 margin: 15px 0 10px; 71 text-align: center; 72 } 73 </style> 74 75 <!--[if lte IE 8]> 76 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 77 <![endif]--> 78 79 </head> 80 81 <body> 82 83 <header id="header"> 84 85 <hgroup> 86 <h1>背包客旅行札记</h1> 87 <h4>旅行是一种休息，而休息是为了走更长远的路</h4> 88 </hgroup> 89 90 <nav> 91 <ul> 92 <li><a href="#">关于背包客</a></li> 93 <li class="current-item"><a href="#">国内旅游</a></li> 94 <li><a href="#">国外旅游</a></li> 95 <li><a href="#">与我联络</a></li> 96 </ul> 97 </nav> 98 99 </header> 100 101 <article id="travel"> 102 103 <section> 104 <h2>Hello World!</h2> 105 <p>四季都是适合旅行的季节。</p> 106 <p>不一定要花大钱，做点功课和多点自信，就能享受旅游的美好。</p> 107 </section> 108 109 <aside> 110 <figure> 111 <img src="photo.png" alt="眣盯" /> 112 </figure> 113 </aside> 114 115 </article> 116 117 <footer> 118 HTML5网页练习 119 </footer> 120 121 </body> 122 </html>
小结：这只是一个简单的引例，旨在开启我的学习之旅，将理论付诸于实践，当看到美美的页面展现在眼前时，是一种极大的满足啊！又该去看书了，先撤……