HTML5語義元素的使用-創(chuàng)新互聯(lián)

傳統(tǒng)頁面的構造方法

創(chuàng)新互聯(lián)自2013年創(chuàng)立以來，是專業(yè)互聯(lián)網(wǎng)技術服務公司，擁有項目網(wǎng)站建設、做網(wǎng)站網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元蘇家屯做網(wǎng)站,已為上家服務,為蘇家屯各地企業(yè)和個人服務,聯(lián)系電話:18980820575

<div class="Header">
<h2>因為痛，所以叫青春</h2>
<p class="Teaser">寫給獨自站在人生路口的你</p>
<p class="Byline">[韓]金蘭都</p>
</div>
<div class="Content">
<p><span class="LeadIn">青春</span>, 之所以艱難，是因為孤單。</p>
......完整內(nèi)容見附件
</div>
<div class="Footer">
<p class="Disclaimer">上述這些是譯的觀點</p>
<p>
<a href="AboutUs.html">關于我們</a>
<a href="Disclaimer.html">申明</a>
<a href="ContactUs.html">聯(lián)系我們</a>
</p>
<p>Copyright © 2013</p>
</div>

因為使用了<div>元素，所以添加樣式表很容易。下面，就是為頁眉及其中的內(nèi)容添加樣式的規(guī)則。

• 1-1 為<div>添加樣式，使頁眉具有藍色帶邊框

  .Header {
    background-color: #7695FE;
    border: thin #336699 solid;
    padding: 10px;
    margin: 10px;
    text-align: center;
  }

• 1-2 為頁眉中的<h2>（這里是文章標題）添加樣式

  .Header h1 {
    margin: 0px;
    color: white;
    font-size: xx-large;
  }

• 1-3 為頁眉中的子標題添加樣式

  .Header .Teaser {
    margin: 0px;
    font-weight: bold;
  }

• 1-4 為頁眉中的屬名添加樣式

  .Header .Byline {
    font-style: italic;
    font-size: small;
    margin: 0px;
  }

其余的樣式參見附件。上述代碼實現(xiàn)的頁面的整體樣式如下：

上述頁面編寫規(guī)范，通過使用<div>，<span>元素把大部分的工作交給了樣式表。而通過<span>元素可以為處在其它元素中的少量文本添加樣式，通過<div>不僅可以為整個內(nèi)容區(qū)塊添加樣式，還可以構建整個頁面的結構。

使用HTML5改造頁面

<div>是當今Web設計的必備元素，它是一個直觀、多用途的容器，可以通過它為頁面中的任何區(qū)塊應用樣式。但是<div>的問題在于：它本身不反映與頁面相關的任何信息。你在頁面中看到<div>元素時，你知道這是一個獨立的區(qū)塊，但是不知道這個區(qū)塊的意圖。

HTML5可以改進這種情況，可以把<div>換成具有描述性的語義元素，如<header>、<footer>。

• 1-5 使用HTML5具有描述性的語義元素

  <header class="Header">
  <h2>因為痛，所以叫青春</h2>
  <p class="Teaser">寫給獨自站在人生路口的你</p>
  <p class="Byline">[韓]金蘭都</p>
  </header>
  <div class="Content">
  <p><span class="LeadIn">青春</span>, 之所以艱難，是因為孤單。</p>
  ......//完整代碼見附件
  </div>
  <footer class="Footer">
  <p class="Disclaimer">上述這些是譯的觀點</p>
  <p>
  <a href="#">關于我們</a>
  <a href="#">申明</a>
  <a href="#">聯(lián)系我們</a>
  </p>
  <p>Copyright © 2013</p>
  </footer>

上面的代碼中<header>和<footer>元素仍然使用了類名，這樣做的目的是不用立即修改樣式表。可不管怎么說，類名有點多余，所以最終就是把他們都刪掉。

• 1-6 使用HTML5的語義元素

  <header>
  <h2>因為痛，所以叫青春</h2>
  <p class="Teaser">寫給獨自站在人生路口的你</p>
  <p class="Byline">[韓]金蘭都</p>
  </header>

修改之后，為語義元素應用的樣式表也應該做如下調(diào)整：

• 1-7 為<header>添加樣式，使頁眉具有藍色帶邊框

  header {
     ... //與代碼1-1 的內(nèi)容一樣
  }

• 1-8 為<header>中的<h2>添加樣式

  header h1 {
       ... //與代碼 1-2 內(nèi)容一樣
  }

• 1-9 為<header>中的子標題添加樣式

  header .Teaser {
      ...//與代碼1-3內(nèi)容一樣
  }

• 1-10 為<header>中的屬名添加樣式

  header .Byline {
      ...//與代碼1-4內(nèi)容一樣
  }

這兩種樣式都會得到相同的結果。

附件：http://down.51cto.com/data/2362785

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網(wǎng)站標題：HTML5語義元素的使用-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://bm7419.com/article26/hshjg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供手機網(wǎng)站建設、建站公司、小程序開發(fā)、軟件開發(fā)、做網(wǎng)站、品牌網(wǎng)站設計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)