html基礎起航

時間 2019-11-13

標籤 html 基礎起航欄目 HTML 简体版

原文原文鏈接

廢話很少說，直接上例子！css

　　工欲善其事，必先利其器html

瀏覽器要有吧~ 好比：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網頁

　　打開瀏覽器，將文件拖曳到瀏覽器內，就能夠看到結果了，嚯嚯！html5

示例網頁以下：瀏覽器

　　這樣彷佛還不夠美觀，加上CSS語法會變成這樣：ide

　　　　CSS後續會介紹，這裏先暫時略過……　　svn

　　代碼僅共參考：學習

  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

　　小結：這只是一個簡單的引例，旨在開啓個人學習之旅，將理論付諸於實踐，當看到美美的頁面展示在眼前時，是一種極大的知足啊！又該去看書了，先撤……google

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。