HTML5幾個設計和修改的頁面範例分享_html5教學技巧

要了解並熟悉 HTML5 中的新的語意元素，最好的方式就是拿一經典的 HTML 文件作例子，然後把 HTML5 的一些新鮮營養充實進入。如下就是我們要改造的頁面，該頁面很簡單，只包含一篇文章。

ApocalypsePage_Original.html，這是一個格式非常規範的頁面，所有的樣式都來自於外部樣式表。

XML/HTML Code複製內容到剪貼簿

1. html>  
2. html lang=lang=lang
=
3. 裡> ">  
頭>     元 字符集
4. >     
標題>現代啟示錄書名>
5.      連結 rel=rel=樣式 href=
"ApocalypsePage_Original.css"
6. >頭>
  
  
8. 身體>
  
9. div 類別=類=
類別
10. 🎜>>     h1>世界會如何終結
>h1
11. >     p 班級=班級== >
我們所知的意味著生命終結的場景
12. p>p>p>p>p>p>
p
13. >     p 
14. 類=
15. 類= 🎜>>Ray N. 康乃馨p>p>p
>p>p>p>p>p>pdiv>    div class="內容" >  
16.   p>跨度跨度跨度跨度跨山>🎜> 班級=「導入」>現在現在>現在> 🎜>>，您可能覺得不錯。畢竟，已開發國家的生活很舒適span class==「風格🎜>=「風格🎜>=
17. 「風格1”>—跨度>可能比有記錄的歷史上的普通人比較舒服。 p
>
18.   
19.   p>但不要太自鳴得意。 仍然有很多可怕的方式可能導致它崩潰。 在本文中，您將了解我們最喜歡的一些內容。 p>  
20.         h2>瑪雅> h2>  
21.   
p>懷疑論者認為瑪雅曆法只是滾到了一個新的5,126 年元之後，並且實際上並沒有預測生命終結的世界末日。 但是，既然死去已久的瑪雅人在其他方面幾乎都錯了，我們為什麼要在這一點上相信他們呢？ p>         
22.   h2>機器人接手>機器人接手 >
  
  
24. p>不像吸血鬼接管或活死人接管令人不安的想法。我們的科技產品已經在數量上超過了我們，甚至比爾·蓋茨也擔心有一天他的日本機器人奴隸會把他的腳踝翻過來，並（以適當的機器人聲音）問“現在誰是你的爸爸？         h2
>無法解釋的奇點>h2>  
25.   p>我們不知道宇宙是如何開始的，所以我們不能確保它不會就這麼結束，也許就在今天，也許沒有什麼比一股反物質和輕微的嘶嘶聲更令人興奮的了。 p >  
26.      
27.   h2>失控的氣候變遷>失控的氣候變遷 >h2>
  
28.   p>被一些末日預言，阿爾·戈爾的末日預言可能仍然會實現。 如果確實如此，我們可能不得不與惡性風暴、廣泛的糧食短缺和粗暴的空調維修人員作鬥爭。 p>
  
     
30.   h2>全球疫情>全球疫情
31. >     p>在未來的某個時候，一種致命的病毒可能會襲擊。關於疾病來源的預測各不相同，但候選人包括非洲叢林中的猴子、生物恐怖分子、患有流感的鳥類和豬、未來的戰士、外星種族、使用過多抗生素的醫院、吸血鬼、中央情報局和未洗過的人抱子甘藍。 無論來源為何，這顯然都是壞消息。 p
32. >  
33.    div>
35.    div class=
36. class=class=“腳頁” >     p 類別
37. >這些末日預言並不反映作者的觀點。 p>   
38.   p>       a href> html">
關於我們a>a>a> >
39.     a href href href href href
 
40. href href href「 html">免責聲明a>a>a
41. > >     a 
42. href> html">聯絡我們a>a>a
>
43. >   p>  
44.   p>版權所有 © 2014
45. >p>  

div

>

身體>

   html>   在不增加任何CSS樣式表之前，效果如下：上面通過三個

; 將頁面縮短了三個部分，頂部的頁眉，中部的內容和底部的頁尾。 這個範例中的樣式表很簡單，整個頁面最大寬度設定為800像素，避免文字在寬螢幕顯示器上顯示過長。頁首位於一個標記藍色邊框的盒子中，內容區的像素都增加了內邊距，而頁腳在整個頁面的底部居中。 ApocalypsePage_Original.css樣式檔案內容如下： XML/HTML 程式碼將內容複製到剪貼簿

1. @charset "utf-8";   
2. /* CSS Document */   
3. 身體{   
4.   /*font-family 要使用安全字體，依照先特殊後一般的原則，   
5.   先給你想要的字體，然後是保險一些的字體，   
6.   最後以 sans-serif 字體結尾*/   
7.   font-family: "Lucida sans Unicode", "Lucida Grande", Geneva, sans-serif;   
8.   max-width: 800px; /*最大寬度不超過 800 像素*/   
9. }   
10. /*頁上方的標題區樣式*/   
11. .Header {   
12.   background-color: #7695FE; /*接受任何顏色值*/   
13.   border: thin #336699 solid; /*多合一的 border 屬性*/   
14.   padding: 10px; /* 10像素的內邊距，邊框與內容物之間的距離*/   
15.   margin: 10px; /* 10像素的外邊距，邊框與周圍元素之間的距離*/   
16.   text-align: center; /*頭部文字居中*/   
17. }   
18. /*頁眉中標題h1>樣式*/   >
19. 樣式*/   
.Header h1{   
  margin: 0px;   
  color: white;   
  font-size: xx-large; /*精確控制可用像素或em單位*/   
}   
/*頁眉中子標題樣式*/   
.Header .Teaser{   
  margin: 0px;   
  font-weight: bold;   
}   
/*頁眉中署名行樣式*/   
.Header .Byline{   
  font-style: italic;   
  font-size: small;   
  margin: 0px;   
}   
.Content{   
  font-size: medium;   
  font-family: Cambria, Cochin, Georgia, "Times New Roman", Times, serif;   
  /*左右內邊距最大*/   
  padding-top: 20px;   
  padding-right: 50px;   
  padding-bottom: 5px;   
  padding-left: 50px;   
  line-height: 120%; /*相鄰兩個文字行之間的距離*/   
}   
.Content .LeadIn{   
  font-weight: bold;   
  font-size: large;   
  font-variant: small-caps;   
}   
.Content .h2{   
  color: #24486C;   
  margin-bottom: 2px;   
  font-size: medium;   
}   
.Content p{   
  margin-top: 0px;   
57. }  
58. .Footer{   
59.   text-align: center;   
60.   font-size: x-small;   
61. }   
62. .Footer .Disclaimer{   
63.   font-style: italic;   
64. }   
65. .Footer p{   
66.   margin: 3px;   
67. }  

這樣我們的樣式表就彎沉過了，現在去看看結果會怎麼樣呢？如下圖：

使用 HTML5 建構頁

目前仍舊是 Web 設計的必備元素，它是一個直觀、多用途的容器，可以透過它為頁面中的任何區塊應用樣式。但

的問題在於，它本身不反映與頁面相關的任何資訊。

要透過 HTML5 改進這種情況，可以把

替換成更具描述性語意的元素。

ApocalypsePage_Revised.html中已經將 class 屬性為 Header 和 Footer 兩個

替換為

和

，部分程式碼如下：

XML/HTML Code複製內容到剪貼簿

1. 標題>  
2.   h1>世界會如何終結 >h1>  
3.   p 班級=班級== >我們所知的意味著生命終結的場景p>
4. p>p>p>p>p>p>  
  
5. p 類=
類
6. = 🎜>
>
7. Ray N. 康乃馨p>p
>
8. p>p>p>p>p>p>p
9. 標題>  
10. ...    頁腳>     p 類別
11. >這些末日預言並不反映作者的觀點。
12. p>      
13. p>       a href
> html"
14. >關於我們a>
a

>

a

>

> ...   

  p>     p>版權所有 © 2014 >p>   頁腳>   當然，對應的ApocalypsePage_Revised.css 檔案也需要進行修改，將其中的 .Header 和 .Footer 替換為 header 和 footer 。部分程式碼如下： XML/HTML 程式碼將內容複製到剪貼簿

1. /*頁上方的標題區樣式*/   
2. header {   
3.   background-color: #7695FE; /*接受任何顏色值*/   
4.   border: thin #336699 solid; /*多合一的 border 屬性*/   
5.   padding: 10px; /* 10像素的內邊距，邊框與內容物之間的距離*/   
6.   margin: 10px; /* 10像素的外邊距，邊框與周圍元素之間的距離*/   
7.   text-align: center; /*頭部文字居中*/   
8. }   
9. /*頁眉中標題h1>樣式*/   >
10. 樣式*/   
header h1{   
  margin: 0px;   
  color: white;   
  font-size: xx-large; /*精確控制可用像素或em單位*/   
}  

最後還有一個元素需要用在範例文件中，就是

元素，表示一個完整的、自成一體的內容。

元素應該包含新聞報導或文章的內容，包括標題、署名和正文。因此加入了

元素後的結構如下：

XML/HTML Code

複製內容到剪貼簿

1. 文章>  
2.   標題>  
3.   h1>世界會如何終結 >h1>  
4.   p 班級=班級== >我們所知的意味著生命終結的場景p>
5. p>p>p>p>p>p>  
  
6. p 類=
類
7. = 🎜>>Ray N. 康乃馨p>p>p
>
8. p>p>p>p>p>p  標題>     div class="內容" >     p>
9. 跨度
10. 跨度跨度跨度跨山>🎜> 班級=「導入」>
11. 現在現在>現在
>

🎜>

>

，您可能覺得不錯。畢竟，已開發國家的生活很舒適

span

 

class

=

=「風格🎜>=

「風格🎜>=「風格1”>—跨度>可能比有記錄的歷史上的普通人比較舒服。 p>   ...      div> 🎜> 文章>   重新設計後，頁面架構如下： 用; 加插圖 很多頁面都是包含圖片的。但是，插圖（圖）與圖片的概念不太完全一樣。插圖雖然獨立於文本，但是文本中會提到它。 一般來說插圖應該是浮動的，還會有浮動圖題。以下是在文章中加入插圖的第一個 HTML 標記，在正文的段落和第二段之間的位置，部分程式碼如下： XML/HTML 程式碼將內容複製到剪貼簿

1. ...   
2. div class="內容" >  
3. p>跨度 班級=「導入」>現在現在>現在> 🎜>>，你...
4. p>  🎜>>  🎜>>  🎜>>  🎜>>  🎜>>
 🎜>
5. > div class="FloatFigure" >   img
6.  src=“人類頭骨。 jpg" alt
7. =「人類頭骨」> >
8. p>如果這些世界末日之一，你會是最後一個站著的人 劇情上演？
9. p>   div>  

p

>

但不要太自鳴得意。 有...

p>

  

1. ...  
2. 對應的樣式表規則如下：
3. XML/HTML 程式碼
4. 將內容複製到剪貼簿
.FloatFigure{   
7.   浮動：向左；   
8.   邊距： 0px 20px 0px 0px；  
9. }   
10. .FloatFigure p{   

  最大寬度：300px；   

  字體大小：小；   

  字體樣式：斜體；   

  底部邊距：5px；   

}   下圖展示了這個範例的外觀，插圖正好在我們的第一段文字之後，漂浮在後面文字的左邊，圖題的文字寬度限制住了，讓圖題顯示很是水果、非常優雅。 HTML5 中提供了一個

; 元素，圖題可以放在

; 中的

元素裡，改造後，程式碼如下： XML/HTML 程式碼將內容複製到剪貼簿

1. figure class=class=類=
2. " 🎜>>     img src>src> alt="Human skull"
>
3.   figcaption>
Will 🎜 >
4.    scenarios plays out?figcaption>figcaption
>
5. figure>
  

當然樣式表中的選擇符，就相應修改一下即可。

XML/HTML Code

複製內容到剪貼簿

1. .FloatFigure{   
  float: left;   
  margin: 0px 20px 0px 0px;   
}   
.FloatFigure figcaption{   
  max-width: 300px;   
  font-size: small;   
  font-style: italic;   
  margin-bottom: 5px;   
}  

最後還有就是 元素中的 alt 屬性可以刪除掉，因為圖題包含了圖片的完整說明。

用

加入附註

新的

元素表示與它周圍的文字沒有密切關係的內容。可以透過它介紹另一個相關的話題，或是對主文檔中提出的某個觀點進行解釋。也可以用來放置廣告、相關內容連結。
下面的範例中將用作醒目引文（pull quote），使用

元素可以創造這種效果，但是用

元素讓標記更有意義：

部分程式碼如下：

XML/HTML Code

複製內容到剪貼簿

1.   p>...（用適當的機器人聲音是誰）「誰是現在你爸爸了？    旁邊
2.  類別
3.  類別=類別 🎜>>     img
4.  src alt="引用">  我們不知道宇宙是如何開始的，所以我們不能確定它不會結束，也許今天。      img
 
5. src
6.  alt=「引用結束」> > 一邊>     
7. h2>無法解釋的奇點
8. h2
>
9.    對應樣式表內容如下： XML/HTML 程式碼將內容複製到剪貼簿

.PullQuote{   

  浮動：右；   

  最大寬度：300px；   

  上框：細黑色實心；   
1.   邊框底部：厚黑色實心；   
2.   字體大小：30px；   
3.   行高：130%；   
4.   字體樣式：斜體；   
5.   頂部填充：5px；   
6.   底部填充：5px；   
7.   左邊距：15px；   
8.   底部邊距：10px；   
9. }   
10. .PullQuote img{   
11.   垂直對齊：底部；   
12. }