歡迎來到Linux教程網
設為首頁 加入收藏
Linux教程網
Linux教程網
Linux教程網
您现在的位置： Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

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

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

HTML5頁面：

  1. <!-- 以下這一行定義了這個html頁面是html 5 --> 
  2. <!DOCTYPE html> 
  3.  
  4. <link rel="stylesheet" href="css/common.css" type="text/css"> 
  5. <body> 
  6. <h1>HTML5 文檔結構DEMO</h1> 
  7.  
  8. <!-- 這裡用nav定義了全局頁面導航 --> 
  9. <nav> 
  10.  <ul> 
  11.    <li><a href="/">主頁</a></li> 
  12.    <li><a href="/myaccount">我的賬號</a></li> 
  13.  </ul> 
  14. </nav> 
  15.  
  16. <!-- article元素代表了文檔，頁面或者應用程序中獨立的完整的並且可以被外部引用的內容 --> 
  17. <article> 
  18.  
  19.    <!-- 這個header元素具有引導和導航作用，網頁中可以擁有任意數目的header--> 
  20.     <header> 
  21.      
  22.     <!-- 如果一個區塊有多個標題，那麼hgroup則可以為這些標題/子標題分組 --> 
  23.     <hgroup> 
  24.     <!-- 一般標題都應該放在header元素中 --> 
  25.     <h3>蘋果</h3> 
  26.     <h4>好吃的蘋果</h4> 
  27.     </hgroup> 
  28.     <p>發表日期： 
  29.     <time pubdate datetime="2012/5/5">2012/5/5</time> 
  30.     </p> 
  31.      
  32.     <!-- 這裡的nav定義了頁內導航，它的超鏈接指向了頁面內某塊，用id選擇器語法標識 --> 
  33.     <nav> 
  34.     <ul> 
  35.    <li><a href="#apple">蘋果介紹</a></li> 
  36.  </ul> 
  37.     </nav> 
  38.     </header> 
  39.      
  40.     <!-- 這塊是這個article的正文部分 --> 
  41.     <p> 
  42.     <b>蘋果</b>，蘋果1，蘋果2，蘋果3，蘋果4 
  43.     </p> 
  44.  
  45.      
  46.     <!-- 這裡的section元素表明對頁面的內容進行分塊，它不是article(強調獨立)，它只是article的內容塊（強調分塊），它也有標題和內容 --> 
  47.     <!-- section元素可以加id,這樣可以被引用，比如超鏈接的指向 --> 
  48.     <section id="apple"> 
  49.     <!-- section也有標題而且推薦使用標題 --> 
  50.      <h3>評論</h3>      
  51.      <!-- 這裡演示了article的嵌套 ，所以下面部分的article表示局部內容，而不是整體內容，它作為section的內容部分--> 
  52.      <article> 
  53.         <header> 
  54.          <h4>發布者：charles.wang</h4> 
  55.          <p> 
  56.          <!-- time元素是HTML5中新增的元素，表示24小時中的某個時刻或者時期，允許帶時差 --> 
  57.          <!-- datetime屬性不會顯示在網頁中，但是會被浏覽器讀到，日期和時間用T分隔，時間可以帶時差(+ -號） --> 
  58.          <!-- pubdate屬性代表了這article的發布時間，這個屬性是可選的 --> 
  59.           <time pubdate datetime="2012-5-5T8:00-09:00"> 
  60.                1小時前 
  61.           </time> 
  62.          </p> 
  63.         </header> 
  64.         <p> 
  65.         我喜歡蘋果，因為很好吃 
  66.         </p> 
  67.          
  68.      </article> 
  69.       
  70.      <article> 
  71.       <header> 
  72.       <h4>發布者：charles.wang</h4> 
  73.        <p> 
  74.           <time pubdate datetime="2012-5-5T8:00-09:00"> 
  75.                1小時前 
  76.           </time> 
  77.          </p> 
  78.       </header> 
  79.       <p> 
  80.       我喜歡蘋果那種紅彤彤的感覺 
  81.       </p> 
  82.       
  83.      </article> 
  84.           
  85.     </section> 
  86. </article> 
  87.  
  88. <!-- footer表示為上層內容區塊或者根區塊做一個頁腳，footer個數不受限制，article,section,全局都可以設置footer --> 
  89. <footer> 
  90. <ul> 
  91. <li>版權信息:Charles</li> 
  92. <li>站點地圖</li> 
  93. <li>聯系方式</li> 
  94.  
  95. <!-- address用於在文檔中呈現聯系信息 --> 
  96. <address> 
  97.  <a title="文章作者：Charles"  href="http://supercharles888.blog.51cto.com">Charles</a> 
  98.  發表於<time datetime="2012/5/5">2012年5 月5日</time> 
  99. </address> 
  100. </ul> 
  101. </footer> 
  102.  
  103. </body> 

CSS頁面：

 

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

最後效果圖：

 

650) this.width=650;" border=0>

Linux編程

Inode 結構：Quota相關字段

Linux賬號相關文檔解讀

Android-屏幕元素層次結構

Python解析XML文檔示例代碼

HTML5新增的元素詳解

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

IPv4 IPv6 Socket 編程相關結構

Linux中表示“時間”的結構體和相關函數

相關文章
  • Linux編程
  • SHELL編程
  • PERL編程
    • Copyright © Linux教程網 All Rights Reserved