Linux教程網 >> Linux編程 >> Linux編程 >> HTML5 新增文檔結構相關元素示例

HTML5 新增文檔結構相關元素示例

日期：2017/3/1 10:23:14 编辑：Linux編程

HTML5中多了許多與文檔結構相關的元素，以下是示例 (注釋都在代碼中了）：

HTML5頁面：

<!-- 以下這一行定義了這個html頁面是html 5 --> 
<!DOCTYPE html> 
 
<link rel="stylesheet" href="css/common.css" type="text/css"> 
<body> 
<h1>HTML5 文檔結構DEMO</h1> 
 
<!-- 這裡用nav定義了全局頁面導航 --> 
<nav> 
 <ul> 
   <li><a href="/">主頁</a></li> 
   <li><a href="/myaccount">我的賬號</a></li> 
 </ul> 
</nav> 
 
<!-- article元素代表了文檔，頁面或者應用程序中獨立的完整的並且可以被外部引用的內容 --> 
<article> 
 
   <!-- 這個header元素具有引導和導航作用，網頁中可以擁有任意數目的header--> 
    <header> 
     
    <!-- 如果一個區塊有多個標題，那麼hgroup則可以為這些標題/子標題分組 --> 
    <hgroup> 
    <!-- 一般標題都應該放在header元素中 --> 
    <h3>蘋果</h3> 
    <h4>好吃的蘋果</h4> 
    </hgroup> 
    <p>發表日期： 
    <time pubdate datetime="2012/5/5">2012/5/5</time> 
    </p> 
     
    <!-- 這裡的nav定義了頁內導航，它的超鏈接指向了頁面內某塊，用id選擇器語法標識 --> 
    <nav> 
    <ul> 
   <li><a href="#apple">蘋果介紹</a></li> 
 </ul> 
    </nav> 
    </header> 
     
    <!-- 這塊是這個article的正文部分 --> 
    <p> 
    <b>蘋果</b>，蘋果1，蘋果2，蘋果3，蘋果4 
    </p> 
 
     
    <!-- 這裡的section元素表明對頁面的內容進行分塊，它不是article(強調獨立)，它只是article的內容塊（強調分塊），它也有標題和內容 --> 
    <!-- section元素可以加id,這樣可以被引用，比如超鏈接的指向 --> 
    <section id="apple"> 
    <!-- section也有標題而且推薦使用標題 --> 
     <h3>評論</h3>      
     <!-- 這裡演示了article的嵌套 ，所以下面部分的article表示局部內容，而不是整體內容，它作為section的內容部分--> 
     <article> 
        <header> 
         <h4>發布者：charles.wang</h4> 
         <p> 
         <!-- time元素是HTML5中新增的元素，表示24小時中的某個時刻或者時期，允許帶時差 --> 
         <!-- datetime屬性不會顯示在網頁中，但是會被浏覽器讀到，日期和時間用T分隔，時間可以帶時差(+ -號） --> 
         <!-- pubdate屬性代表了這article的發布時間，這個屬性是可選的 --> 
          <time pubdate datetime="2012-5-5T8:00-09:00"> 
               1小時前 
          </time> 
         </p> 
        </header> 
        <p> 
        我喜歡蘋果，因為很好吃 
        </p> 
         
     </article> 
      
     <article> 
      <header> 
      <h4>發布者：charles.wang</h4> 
       <p> 
          <time pubdate datetime="2012-5-5T8:00-09:00"> 
               1小時前 
          </time> 
         </p> 
      </header> 
      <p> 
      我喜歡蘋果那種紅彤彤的感覺 
      </p> 
      
     </article> 
          
    </section> 
</article> 
 
<!-- footer表示為上層內容區塊或者根區塊做一個頁腳，footer個數不受限制，article,section,全局都可以設置footer --> 
<footer> 
<ul> 
<li>版權信息:Charles</li> 
<li>站點地圖</li> 
<li>聯系方式</li> 
 
<!-- address用於在文檔中呈現聯系信息 --> 
<address> 
 <a title="文章作者：Charles"  href="http://supercharles888.blog.51cto.com">Charles</a> 
 發表於<time datetime="2012/5/5">2012年5 月5日</time> 
</address> 
</ul> 
</footer> 
 
</body>

CSS頁面：

/********************************************************************************** 
* @CopyRight: Charles Wang (Tech Lead) 
* mailto: [email protected] 
* This file is only for studying purpose instead of commercial purpose 
* 
**********************************************************************************/ 
@CHARSET "UTF-8"; 
 
/* 
* 追加block聲明，讓浏覽器頁面當使用這些HTML5新增元素時候都使用塊方式顯示 
*/ 
article,aside,dialog,figure,footer,header,legend,nav,section {display:block;} 
 
/* 
* 其他樣式，也就是為每個元素單獨定義樣式 
*/ 
nav{float:left; width:20%;} 
article{float:right; width:79%;} 
header{display:block; color:yellow; text-align:left;} 
article header{color:blue; text-align:left;}