DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> HTML5的新特性(1)
HTML5的新特性(1)
編輯:HTML5詳解     

Html5是用於取代1999年所制定的 HTML 4.01 和 XHTML 1.0 標准的 HTML [1](標准通用標記語言下的一個應用)標准版本;現在仍處於發展階段,但大部分浏覽器已經支持某些 Html5 技術。

1. 新的文檔類型聲明
Html4規定的三種文檔類型聲明:

XML/Html Code復制內容到剪貼板
  1. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN””http:/www.w3.org/TR/Html4/strict.dtd”>  
  2. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML4.01//EN””http://www.w3.org/TR/Html4/loose.dtd”>  
  3. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML4.01//EN””http://www.w3.org/TR/Html4/frameset.dtd”>  

XHtml 1.0  規定的三種文檔類型聲明:

XML/Html Code復制內容到剪貼板
  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN””http://www.w3.org/TR/xhtml1/DTD/xHtml1-strict.dtd”>  
  2. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN””http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd”>  
  3. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN””http://www.w3.org/TR/xhtml1/DTD/xHtml1-frameset.dtd”>  

XHTML 1.1文檔嚴格定義類型,等同於XHtml1.0文檔過渡定義類型

XML/Html Code復制內容到剪貼板
  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN””http://www.w3.org/TR/xhtml11/DTD/xHtml1.dtd”>  

Html 5的文檔類型聲明

XML/Html Code復制內容到剪貼板
  1. <!DOCTYPE Html>  

2. script和link裡不需要寫type

XML/Html Code復制內容到剪貼板
  1. <link rel=”stylesheet” href=”path/to/stylesheet.CSS” type=”text/CSS” />   ==》  <link rel=”stylesheet” href=”path/to/stylesheet.CSS”/>  
  2. <script src=”path/to/script.JS” type=”text/Javascript”></script>    ==》  <script src=”path/to/script.JS”></script>  

3. 語義化header和footer標簽
在HTML4或XHtml裡,我們定義網頁的頁眉或頁腳時會這樣:

XML/Html Code復制內容到剪貼板
  1. <div id=”header”>  
  2. …   
  3. </div>  
  4. 或   
  5. <div id=”footer”>  
  6. …   
  7. </div>  

而在Html5裡有直接定義上面元素塊的標簽,可以使代碼更加的簡潔和語義化

XML/Html Code復制內容到剪貼板
  1. <header>  
  2. …   
  3. </header>  
  4. 或   
  5. <footer>  
  6. …   
  7. </footer>  

4. hgroup標簽,它主要是表明標題的集合。如果有主標題、副標題,可以用這個來包裹一下。但是這個標簽沒什麼大的用處,在最新的Html5.1版中被廢除了。我們如果想聲明主標題和對應副標題說明,可以向下面這樣。
使用標點符號分割,一般適合於文章標題,不太適合網站標題。

XML/Html Code復制內容到剪貼板
  1. <h1>前端試題:Html5的新特性</h1>  

使用span標簽標注副標題說明

XML/Html Code復制內容到剪貼板
  1. <h1>前端試題   
  2.     <span>Html5的新特性</span>  
  3. </h1>  

使用header標簽包裹標題和描述

XML/Html Code復制內容到剪貼板
  1. <header>  
  2.     <h1>前端試題</h1>  
  3.     <p>Html5的新特性</p>  
  4. </header>  

5. 標記元素 mark

XML/Html Code復制內容到剪貼板
  1. The <mark> element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.  

可以把它當做高亮標簽,被它包起來的字符以高亮顯示。<mark>…</mark>
6. 圖形元素figure
在HTML4或XHtml中,下面的這些代碼被用來修飾圖片的注釋。

XML/Html Code復制內容到剪貼板
  1. <img src=”path/to/image” alt=”About image”/>  
  2. <p>Image of Flower</p>  

上面代碼並沒有將文字和圖片內存聯系起來,不過Html5添加的figure和figcaption組合可以為圖文完美聯系起來。

XML/Html Code復制內容到剪貼板
  1. <figure>  
  2. <img src=”path/to/image” alt=”About image”/>  
  3. <figcaption>  
  4.     <p>beautiful flower</p>  
  5. <figcaption>  
  6. </figure>  

7. 重新定義了small標簽
Html5裡<small>標簽將旁注呈現為小型文本,負責聲明、注意事項、法律限制或版本聲明的特征通常都是小型文本。
在HTML4或XHTML裡已經定義過small,不過對它的使用卻沒有一個完整的說明。在Html裡,它主要用於網頁下方的版本聲明,郵箱等小型文本。
8.占位符 placeholder
在HTML4或XHTML裡,如果我們想實現輸入框為空時顯示提示信息,輸入框字段獲得焦點時該提示消失的效果,只能用JS寫這種效果。而在Html5添加的placeholder則直接實現了這種效果.
placeholder屬性適用於以下的<input>類型:text,search,url,telephone,email以及passWord.

XML/Html Code復制內容到剪貼板
  1. <input placeholder=”text”>  
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved