HTML5設計和修改的頁面實例分析

今天小編給大家分享一下HTML5設計和修改的頁面實例分析的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

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

XML / HTML代碼將內容復制到文本

<！DOCTYPE html >  

< html lang = “ zh-CN” >   

<頭>  

  < meta charset = “ utf-8” >   

  < title >立即啟示</ title >  

  < link rel = “ stylesheet” href = “ ApocalypsePage_Original.css” >    

</頭>  

<身體>  

< div class = “標題” >   

  < h2 >世界如何終結</ h2 >  

  < p class = “ Teaser” >我們所知道的會終結生命的場景</ p >   

  < p class = “ Byline” > Ray N.康乃馨</ p >   

</ div > <！-結束標題->  

< div class = “內容” >   

  < p > < span class = “ LeadIn” >現在</ span > ，您可能感覺不錯。畢竟，發達國家的生活很舒適< span class = “ style1” > &mdash; </ span >可能比整個記錄的歷史上的普通人類要舒適得多。</ p >    

  < p >但是不要自鳴得意。仍然有很多可怕的方法可以使它崩潰。在本文中，您將了解一些我們的最愛。</ p >  

  < h3 >瑪雅世界末日</ h3 >  

  < p >懷疑論者的看法是瑪雅歷法簡單地卷到一個新的5126年時代的2012年之后，而實際上并沒有預測結束生命的啟示。但是考慮到已死的瑪雅人實際上在其他所有方面都是錯誤的，為什么我們應該在此方面信任他們呢？</ p >  

  < h3 >機器人接管</ h3 >  

  < p >雖然沒有像吸血鬼接管或活死人接管那樣令人恐懼，但是機器人叛亂仍然是令人不安的想法。我們的科技產品已經不勝枚舉了，甚至比爾&middot;蓋茨（Bill Gates）都擔心他的日本機器人奴隸被腳踝翻過來的那一天，并問（以適當的機器人聲音）“現在你是誰的爸爸？” </ p >  

  < h3 >無法解釋的奇點</ h3 >  

  < p >我們不知道宇宙是如何開始的，所以我們不能確定宇宙不會只是結束，也許是今天，也許只有一點點反物質和輕微的嘶嘶聲才令人興奮。</ p >  

  < h3 >失控的氣候變化</ h3 >  

  < p >有些不屑一顧，厄運戈爾的預言仍可能成真。如果確實如此，我們可能不得不應對惡性風暴，廣泛的食物短缺以及空調維修人員的狀況。</ p >  

  < h3 >全球流行</ h3 >  

  < p >在今后一段時間內，一種致命的病毒可能會罷工。對該疾病的來源有不同的預測，但候選對象包括非洲叢林中的猴子，生物恐怖分子，患有流感的鳥類和豬，未來的戰士，外星人種族，使用過多抗生素的醫院，吸血鬼，CIA和未洗凈的球芽甘藍。無論來源如何，這顯然都是壞消息。</ p >  

</ div > <！-最終內容->  

< div class = “頁腳” >   

  < p class = “ Disclaimer” >這些世界末日的預測并不反映作者的觀點。</ p >   

  < p >  

    <一個HREF = “AboutUs.html” >關于我們</一>   

    <一個HREF = “Disclaimer.html” >聲明</一>   

    <一個HREF = “ContactUs.html” >聯系我們</一>   

  </ p >  

  < p >版權所有&copy;2014 </ p >  

</ div > <！-結束頁腳->  

</ body >  

</ html >  

在不增加任何CSS樣式表之前，效果如下：上面通過三個<div>將頁面分成了三個部分，頂部的頁眉，中部的內容和底部的頁腳。

這個示例中的樣式表很簡單，整個頁面最大寬度設置為800 ，，避免文本在寬屏顯示器上顯示過長。頁眉放在一個帶有藍色邊框的盒子中，內容區的多個都增加了內邊距，而頁腳在整個頁面的底部居中。

ApocalypsePage_Original.css樣式文件內容如下：

XML / HTML代碼將內容復制到文本

@charset“ utf-8”;   

/ * CSS文檔* /   

身體{   

  / * font-family要使用安全字體，按照先特殊后一般的原則，   

  先指定您想要的字體，然后是保險一些的字體，   

  最后以sans-serif字體結尾* /   

  字體系列：“ Lucida sans Unicode”，“ Lucida Grande”，日內瓦，sans-serif；   

  最大寬度：800px；/ *最大寬度不超過800預期* /   

}   

/ *頁面頂部的標題區樣式* /   

。標題{   

  背景顏色：＃7695FE; / *接受任何顏色值* /   

  邊框：薄＃336699固體；/ *多合一的border屬性* /   

  填充：10px; / * 10的內邊距，包圍與內容之間的距離* /   

  邊距：10px; / * 10的外邊距，包圍與周圍元素之間的距離* /   

  文本對齊：居中；/ *頭部文字居中* /   

}   

/ *頁眉中標題< h2 >樣式* /   

。標題h2 {   

  邊距：0px;   

  白顏色;   

  字體大小：xx-大；/ *精確控制可以用預期或者em單位* /   

}   

/ *頁眉中子標題樣式* /   

.Header .Teaser {   

  邊距：0px;   

  font-weight：粗體;   

}   

/ *頁眉中署名行樣式* /   

。標題.Byline {   

  字體樣式：斜體；   

  字體大小：小；   

  邊距：0px;   

}   

。內容{   

  字號：中等；   

  字體家族：Cambria，Cochin，喬治亞州，“ Times New Roman”，Times，襯線；   

  / *左右內邊距最大* /   

  padding-top：20像素；   

  padding-right：50px；   

  padding-bottom：5px;   

  padding-left：50px;   

  行高：120％；/ *相鄰兩個文本行之間的距離* /   

}   

.Content .LeadIn {   

  font-weight：粗體;   

  字體大小：大；   

  font-variant：小寫；   

}   

.Content .h3 {   

  顏色：＃24486C;   

  底邊距：2px;   

  字號：中等；   

}   

內容p {   

  margin-top：0px;   

}   

。頁腳{   

  文本對齊：居中；   

  字號：x-small；   

}   

。頁腳。免責聲明{   

  字體樣式：斜體；   

}   

。頁腳{   

  邊距：3px；   

}  

這樣我們的樣式表就彎沉過了，現在去看看結果會怎樣呢？如下圖：使用HTML5來構造頁面

<div>目前仍舊是Web設計的必備元素，它是一個直觀，多用途的容器，可以通過它為頁面中的任何區塊鏈應用樣式。但<div>的問題在于，它本身不反映與頁面相關的任何信息。

要通過HTML5改進這種情況，可以把<div>替換成更具有描述性語義的元素。

ApocalypsePage_Revised.html中已經將class屬性設置為Header和Footer兩個<div>替換為<header>和<footer>，部分代碼如下：

XML / HTML代碼將內容復制到文本

<標題>  

  < h2 >世界如何終結</ h2 >  

  < p class = “ Teaser” >我們所知道的會終結生命的場景</ p >   

  < p class = “ Byline” > Ray N.康乃馨</ p >   

</標頭>  

...   

<頁腳>  

  < p class = “ Disclaimer” >這些世界末日的預測并不反映作者的觀點。</ p >   

  < p >  

    <一個HREF = “AboutUs.html” >關于我們</一>   

...   

  </ p >  

  < p >版權所有&copy;2014 </ p >  

</ footer >  

當然，對應的ApocalypsePage_Revised.css文件也需要進行修改，將其中的.Header和.Footer替換為header和footer。部分代碼如下：

XML / HTML代碼將內容復制到文本

/ *頁面頂部的標題區樣式* /   

標頭{   

  背景顏色：＃7695FE; / *接受任何顏色值* /   

  邊框：薄＃336699固體；/ *多合一的border屬性* /   

  填充：10px; / * 10的內邊距，包圍與內容之間的距離* /   

  邊距：10px; / * 10的外邊距，包圍與周圍元素之間的距離* /   

  文本對齊：居中；/ *頭部文字居中* /   

}   

/ *頁眉中標題< h2 >樣式* /   

標頭h2 {   

  邊距：0px;   

  白顏色;   

  字體大小：xx-大；/ *精確控制可以用預期或者em單位* /   

}  

最后還有一個元素需要用在示例文件中，就是<article>元素，表示一個完整的，自成一體的內容。

<ariticle>元素應該包含新聞報道或文章的內容，包括標題，署名和正文。因此添加了<article>元素后的結構如下：

XML / HTML代碼將內容復制到文本

<文章>  

  <標題>  

  < h2 >世界如何終結</ h2 >  

  < p class = “ Teaser” >我們所知道的會終結生命的場景</ p >   

  < p class = “ Byline” > Ray N.康乃馨</ p >   

  </標頭>  

  < div class = “內容” >   

  < p > < span class = “ LeadIn” >現在</ span > ，您可能感覺不錯。畢竟，發達國家的生活很舒適< span class = “ style1” > &mdash; </ span >可能比整個記錄的歷史上的普通人類要舒適得多。</ p >    

...   

  </ div > <！-最終內容->  

</ article >  

重新設計后，頁面結構如下：

用<figure>添加插圖

很多頁面都是包含圖片的。但是，插圖（圖）與圖片的概念還不完全一樣。插圖雖然獨立于文本，但是文本中會提到它。

下面是在文章中添加插圖的HTML標記，在正文的第一段和第二段之間的位置，部分代碼如下：

XML / HTML代碼將內容復制到文本

...   

< div class = “內容” >   

< p > < span class = “ LeadIn” >現在</ span > ，您正在... </ p >   

< div class = “ FloatFigure” >   

< img src = “ human_skull.jpg” alt = “人類頭骨” >    

< p >請問你是站著，如果這些啟示之一的最后一個人   

劇情發揮？</ p >  

</ div >  

< p >但是不要自鳴得意。有... </ p >  

...  

相應的樣式表規則如下：

XML / HTML代碼將內容復制到文本

.FloatFigure {   

  向左飄浮;   

  邊距：0px 20px 0px 0px;   

}   

.floatFigure p {   

  最大寬度：300像素；   

  字體大小：小；   

  字體樣式：斜體；   

  底邊距：5px;   

}  

下圖展示了這個示例的外觀，插圖恰好在第一段文本之后，浮動在后面的文本的位置，圖題的文本的寬度我們限制住了，讓圖題顯示很充實，很優雅。

HTML5中提供了一個<figure>元素，圖題可以放在<figure>中的<figcaption>元素里，經過改造，代碼如下：

XML / HTML代碼將內容復制到文本

<圖類= “ FloatFigure” >   

  < img src = “ human_skull.jpg” alt = “人類頭骨” >    

  < figcaption >如果這些啟示之一，您將是最后一個站著的人嗎？   

   劇情發揮？</ figcaption >  

</圖>  

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

XML / HTML代碼將內容復制到文本

.FloatFigure {   

  向左飄浮;   

  邊距：0px 20px 0px 0px;   

}   

.FloatFigure figcaption {   

  最大寬度：300像素；   

  字體大小：小；   

  字體樣式：斜體；   

  底邊距：5px;   

}  

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

用<aside>添加注釋

新的<aside>元素表示與它周圍的文本沒有密切關系的內容。可以通過它介紹另一個相關的話題，或者對主文檔中提出的某個觀點進行解釋。還可以放置廣告，相關內容鏈接。

下面的示例中將將利用醒目引文（pull quote），使用<div>元素可以創造這種效果，但是用<aside>元素讓標記更容易替換：部分代碼如下：

XML / HTML代碼將內容復制到文本

  < p > ...（在適當的機器人的聲音）“誰是你爸爸嗎？” </ p >  

<除了類= “ PullQuote” >   

  < img src = “ quotes_start.png” alt = “報價” >    

  我們不知道宇宙是如何開始的，所以我們不能確定宇宙不會只是結束，也許是今天。   

  < img src = “ quotes_end.png” alt = “結束報價” >    

</一旁>  

< h3 >無法解釋的奇點</ h3 >  

對應的樣式表內容如下：

XML / HTML代碼將內容復制到文本

.PullQuote {   

  浮動：正確；   

  最大寬度：300像素；   

  邊框頂部：黑色細固體；   

  底邊：黑色粗實物；   

  font-size：30px;   

  行高：130％；   

  字體樣式：斜體；   

  padding-top：5像素；   

  padding-bottom：5px;   

  左邊距：15px;   

  底邊距：10px;   

}   

.PullQuote img {   

  垂直對齊：底部；   

}  

以上就是“HTML5設計和修改的頁面實例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。