废话不多说,直接上例子!
工欲善其事,必先利其器
- 浏览器要有吧~ 比如:IE、Chrome、Firefox……
- 纯文本编辑软件不可少~ 比如:最简单的记事本就可以了
- 打开记事本,输入以下示例代码:
![ContractedBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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后续会介绍,这里先暂时略过……
代码仅共参考:
![ContractedBlock.gif](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
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>
小结:这只是一个简单的引例,旨在开启我的学习之旅,将理论付诸于实践,当看到美美的页面展现在眼前时,是一种极大的满足啊!又该去看书了,先撤……