html基础起航

浏览数：20 / 时间：2015年06月09日

废话不多说，直接上例子！

　　工具善其事，必先利其器

浏览器要有吧~ 比如：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>

View Code

保存，注意后缀为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>