废话不多说，直接上例子！
工具善其事，必先利其器
- 浏览器要有吧~ 比如：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>
小结：这只是一个简单的引例，旨在开启我的学习之旅，将理论付诸于实践，当看到美美的页面展现在眼前时，是一种极大的满足啊！又该去看书了，先撤……
时间： 2024-11-03 05:48:54