HTML5的新特性(1) _html5教學技巧

HTML5是用於取代1999年所製定的HTML 4.01 和XHTML 1.0 標準的HTML [1]（標準通用標記語言下的一個應用）標準版本；現在仍處於發展階段，但大部分瀏覽器已經支援某些HTML5 技術。

1. 新的文件類型聲明
HTML4規定的三種文件類型聲明：

XML/HTML Code複製內容到剪貼簿

1. HTML PUBLIC 「-//W3C//DTD HTML 4.01//EN」」http:/www.w3.org/TR/html4/strict.dtd」>  
2. HTML PUBLIC 「-//W3C//DTD HTML4.01//EN」」http://www.w3.org/TR/html4/loose.dtd」>
  
3. HTML PUBLIC 「-//W3C//DTD HTML4.01//EN」」http://www.w3.org/TR/html4/frameset.dtd」>
  

XHTML 1.0  規定的三種文件類型聲明:

XML/HTML Code

複製內容到剪貼簿

1. html PUBLIC 「-//W3C//DTD XHTML 1.0 Strict//EN」」http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict. dtd”>  
2. html PUBLIC 「-//W3C//DTD XHTML 1.0 Transitional//EN」」http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」>
  
3. 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. html PUBLIC 「-//W3C//DTD XHTML 1.1//EN」」http://www.w3.org/TR/xhtml11/DTD/xhtml1.dtd」>  

HTML 5的文檔類型聲明

XML/HTML Code

複製內容到剪貼簿

1. html>  

2. script和link裡不需要寫type

XML/HTML Code

複製內容到剪貼簿

1. 連結 rel=”樣式表rel=”樣式表=”樣式表=”path/to/stylesheet.css” 類型=”text/css” />  連結 rel=「樣式表」 =「樣式表」  >=”path/to/stylesheet.css”/>
  
2. 腳本 src=”path/to/script.js" 🎜>類型=”text/javascript”>腳本> ;    ==》  腳本 src src src ”
>

腳本>
  

3。 語意化頁首和頁尾標籤

在HTML4或XHTML裡，我們定義網頁的頁首或頁尾時會這樣：

1. XML/HTML 程式碼將內容複製到剪貼簿 div 
2. id=”標題”
3.    …  
div
5. >   或    div
 
6. id
>頁腳」
7. id >   …  

div

>  

1. 而在HTML5裡直接定義了上面的元素塊的標籤，可以使程式碼更簡潔、語意化 XML/HTML 程式碼將內容複製到剪貼簿
3. 標題>   …  
5. 標題>   或   
頁腳>   …  

頁腳>

  

4。 hgroup標籤，主要是表明標題的集合。如果有主標題、副標題，可以用這個來圍一下。但是這個標籤沒什麼大的用處，在最新的HTML5.1版本中被廢除了。我們如果想聲明主標題和對應副標題說明，可以向下面這樣。 使用標點符號分割，一般適合於文章標題，較不適合網站標題。 XML/HTML 程式碼將內容複製到剪貼簿

1. h1>前端試題：HTML5的新特性h1>  

使用span標籤標註副標題說明

XML/HTML Code複製內容到剪貼簿

1. h1>前端試題   
2. 前端試題        span>HTML5的新特性span
>
3.    h1
>

  

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

XML/HTML Code

複製內容到剪貼簿
1. header>
2.        h1>前端試題>  
3.     p>HTML5的新特性>HTML5的新特性
4. p>  

header

>

  

5. 標記元素 mark

1. XML/HTML Code複製內容到剪貼簿 The 
mark

>

 reference purposes, due to its relevance in another context.  

可以把它當作高亮標籤，被它包起來的字元以高亮顯示。 …

6. 圖形元素figure在HTML4或XHTML中，以下的這些程式碼被用來修飾圖片的註解。

1. XML/HTML Code複製內容到剪貼簿 img src alt=”About image”
/>
2.    p>Image of FlowerImage of Flower

Image of Flower

Image of Flower

Image of FlowerImage of Flower

Image of Flower> p>   上面程式碼並沒有將文字和圖片記憶體連結起來，不過HTML5加入的figure和figcaption組合可以為圖文完美連結。 XML/HTML Code複製內容到剪貼簿

1. figure>  
2. img src alt=”About image”/>  
3. figcaption>  
4.     p>beautiful h> >  
5. figcaption>  
6. figure>  

7. 重新定義了small標籤

HTML5裡標籤將旁注呈現為小型文本，負責聲明、注意事項、法律限製或版本聲明的特徵通常都是小型文字。 在HTML4或XHTML裡已經定義過small，不過對它的使用卻沒有一個完整的說明。在HTML裡，它主要用於網頁下方的版本聲明，郵箱等小型文字。
8.佔位符placeholder

在HTML4或XHTML裡，如果我們想實現輸入框為空時顯示提示信息，輸入框字段獲得焦點時該提示消失的效果，只能用js寫出這種效果。而在HTML5新增的placeholder則直接實現了這種效果.placeholder屬性適用於以下的類型：text,search,url,telephone,email以及password.
XML/HTML Code

複製內容到剪貼簿

input
1.  placeholder