HTML5與HTML4的比較

標籤：

HHTML5封裝一些標籤和屬性，方便了開發。

1     <form>2         <p>3             <label>Username:<input name="search" type="text" id="search" autofocus></label>4         </p>5     </form>

HTML5的方式擷取輸入焦點

1     <form>2         <p>3             <label>Username:<input name="search" type="text" id="search"></label>4         </p>5         <script type="text/javascript">6             document.getElementById("search").focus();7         </script>8     </form>

HTML4的方式擷取輸入焦點

 

對於頁面結構，HTML5將不同結構使用不同的標記進行區分，這點在HTML4的時候，基本上都用div標籤，然後使用class屬性進行區分

 

• HTML5的出現是為瞭解決以下問題

瀏覽器之間的相容性問題

文檔結構不明確

Web應用程式功能受限

 

• HTML5與HTML4在文法上的一些區別

1、DOCTYPE聲明

2、指定字元集編碼

HTML4:

<meta http-equiv="CONTENT-TYPE" content="text/html;charset=UTF-8">

HTML5:

<meta charset="UTF-8">

兩種方式都能用，但不能混用

 

• 可以省略標記的元素

不允許寫結束標記：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr

可以省略結束標記：li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th

可以完全省略標記：html、head、body、colgroup、tbody

 

• 具有boolean值得屬性

這些屬性，只要寫上了就比表示true，如：

<input checked type="checkbox">

還有readonly、disabled等

 

• 新增結構元素

section：表示頁面中的一個內容區塊，如：章節、頁首、頁尾等，可以與h1~h6元素結合使用，標示文檔結構

article：標示頁面中的一塊與上下文不相關的獨立內容，如部落格中的一篇文章或報紙上的一篇文章

aside：標示article元素之外，但是相關的，輔助資訊

header：頁面中的一個內容區塊或整個頁面的標題

hgroup：對整個頁面或頁面中的一個內容區塊的標題進行整合

footer：整個頁面或頁面中內容區塊的腳註，一般包含作者的姓名、創作日期以及作者的連絡方式的等

nav：頁面中的導航連結

figure：表示一段獨立的流內容，一般表示文檔主體流內容中的一個獨立單元，使用figcaption元素在figure元素組添加標題

 

• 其他新增元素

video：視頻

audio：音頻

embed：插入各種多媒體格式

mark：在視覺上需要高亮的文字

progress：表示運行中的進程，一般用於顯示js耗時的時間函數

time：日期或時間

ruby：ruby注釋，中文注音或字元

rt：字元的解釋或發音

rp：在ruby注釋中石油

wbr：軟換行，當父級元素寬度不夠的時候才換行

canvas：繪圖的畫布

command：命令按鈕，如選項按鈕、複選框、複選按鈕

details：表示使用者要求得到並且可以得到的細節資訊。可以與summary元素配合使用

datalist：下拉式清單，與input配合使用

datagrid：可選資料列表，樹形列表的形式顯示

keygen：產生密匙

output：表示不同類型的輸出

source：為媒介元素定義媒介資源

menu：菜單列表

 

• 新增的input類型，也就是input元素中，type的屬性

email、url、number、range、date、month、week、time、datetime、datetime-local

 

對於新增的元素或屬性，在使用前最好查閱一下瀏覽器的支援情況

 

• 廢除的元素

能夠用CSS代替的一般都廢除了，如 basefont、big、center、font、s、strike、tt、u等

不再使用frame架構：frameset、frame、noframes元素。因為frame架構對網頁的可用性存在負面影響。HTML5中只支援iframe架構

 

• 新增的表單屬性

autofocus：自動擷取焦點

placeholder：提示使用者輸入

form：聲明屬於哪個表單，然後可以放在頁面的任何位置，不一定非要在表單內

required：表示是否必填

list：與datelist元素配合使用，產生下拉框

multiple：允許一次上傳多個檔案

 

其他屬性詳見HTML5

 

• 全域屬性

contentEditable：是否允許編輯元素內的內容

designMode：指定整個頁面是否可編輯

hidden：隱藏

speelcheck：拼字檢查

tabindex：tab擷取焦點

<input tabindex="1">
<input tabindex="2">
<input tabindex="3">

 

HTML5與HTML4的比較