你的位置:首页 > 网页设计

[网页设计]html基础起航


废话不多说,直接上例子!

  工具善其事,必先利其器

  1. 浏览器要有吧~                       比如:IE、Chrome、Firefox……
  2. 纯文本编辑软件不可少~          比如:最简单的记事本就可以了
  • 打开记事本,输入以下示例代码:

 

 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>

View Code

  小结:这只是一个简单的引例,旨在开启我的学习之旅,将理论付诸于实践,当看到美美的页面展现在眼前时,是一种极大的满足啊!又该去看书了,先撤……