HTML5中,在新增加和廢除很多元素的同時,也增加和廢除了很多屬性。
新增的屬性
1、表單相關的屬性
- 對input(type=text)、select、textarea與button指定autofocus屬性。它以指定屬性的方式讓元素在畫面打開時自動獲得焦點。
- 對input(type=text)、textarea指定placeholder屬性,它會對用戶的輸入進行提示,提示用戶可以輸入的內容。
- 對input、output、select、textarea、button與fieldset指定form屬性。它聲明屬於哪個表單,然后將其放置在頁面的任何位置,而不失表單之內。
- 對input(type=text)、textarea指定required屬性。該屬性表示用戶提交時進行檢查,檢查該元素內必定要有輸入內容。
- 為input標簽增加幾個新的屬性:autocomplete、min、max、multiple、pattern與step。還有list屬性與datalist元素配合使用;datalist元素與autocomplete屬性配合使用。multiple屬性允許上傳時一次上傳多個文件; pattern屬性用於驗證輸入字段的模式,其實就是正則表達式。step 屬性規定輸入字段的合法數字間隔(假如 step="3",則合法數字應該是 -3、0、3、6,以此類推),step 屬性可以與 max 以及 min 屬性配合使用,以創建合法值的范圍。
- 為input、button元素增加formaction、formenctype、formmethod、formnovalidate與formtarget屬性。用戶重載form元素的action、enctype、method、novalidate與target屬性。為fieldset元素增加disabled屬性,可以把它的子元素設為disabled狀態。
- 為input、button、form增加novalidate屬性,可以取消提交時進行的有關檢查,表單可以被無條件地提交。
2、鏈接相關屬性
- 為a、area增加media屬性。規定目標 URL 是為什么類型的媒介/設備進行優化的。該屬性用於規定目標 URL 是為特殊設備(比如 iPhone)、語音或打印媒介設計的。該屬性可接受多個值。只能在 href 屬性存在時使用。
- 為area增加herflang和rel屬性。hreflang 屬性規定在被鏈接文檔中的文本的語言。只有當設置了 href 屬性時,才能使用該屬性。注釋:該屬性是純咨詢性的。rel 屬性規定當前文檔與被鏈接文檔/資源之間的關系。只有當使用 href 屬性時,才能使用 rel 屬性。
- 為link增加size屬性。sizes 屬性規定被鏈接資源的尺寸。只有當被鏈接資源是圖標時 (rel="icon"),才能使用該屬性。該屬性可接受多個值。值由空格分隔。
- 為base元素增加target屬性,主要是保持與a元素的一致性。
3、其他屬性
- 為ol增加reversed屬性,它指定列表倒序顯示。
- 為meta增加charset屬性
- 為menu增加type和label屬性。label為菜單定義一個課件的標注,type屬性讓才當可以以上下文菜單、工具條與列表cande但三種形式出現。
- 為style增加scoped屬性。它允許我們為文檔的指定部分定義樣式,而不是整個文檔。如果使用 "scoped" 屬性,那么所規定的樣式只能應用到 style 元素的父元素及其子元素。
- 為script增減屬性,它定義腳本是否異步執行。async 屬性僅適用於外部腳本(只有在使用 src 屬性時)有多種執行外部腳本的方法:
- 如果 async="async":腳本相對於頁面的其余部分異步地執行(當頁面繼續進行解析時,腳本將被執行)
- 如果不使用 async 且 defer="defer":腳本將在頁面完成解析時執行
- 如果既不使用 async 也不使用 defer:在瀏覽器繼續解析頁面之前,立即讀取並執行腳本
- 為html元素增加manifest,開發離線web應用程序時他與API結合使用,定義一個URL,在這個URL上描述文檔的緩存信息。
- 為iframe增加撒個屬性,sandbox、seamless、srcdoc。用來提高頁面安全性,防止不信任的web頁面執行某些操作。
廢除的屬性
HTML4中一些屬性在HTML5中不再被使用,而是采用其他屬性或其他方式進行替代。
在HTML 4中使用的屬性 |
使用該屬性的元素 |
在HTML 5中的替代方案 |
rev |
link、a |
rel |
charset |
link、a |
在被鏈接的資源的中使用HTTP Content-type頭元素 |
shape、coords |
a |
使用area元素代替a元素 |
longdesc |
img、iframe |
使用a元素鏈接到校長描述 |
target |
link |
多余屬性,被省略 |
nohref |
area |
多余屬性,被省略 |
profile |
head |
多余屬性,被省略 |
version |
html |
多余屬性,被省略 |
name |
img |
id |
scheme |
meta |
只為某個表單域使用scheme |
archive、chlassid、codebose、codetype、declare、standby |
object |
使用data與typc屬性類調用插件。需要使用這些屬性來設置參數時,使用param屬性 |
valuetype、type |
param |
使用name與value屬性,不聲明之的MIME類型 |
axis、abbr |
td、th |
使用以明確簡潔的文字開頭、后跟詳述文字的形式。可以對更詳細內容使用title屬性,來使單元格的內容變得簡短 |
scope |
td |
在被鏈接的資源的中使用HTTP Content-type頭元素 |
align |
caption、input、legend、div、h1、h2、h3、h4、h5、h6、p |
使用CSS樣式表替代 |
alink、link、text、vlink、background、bgcolor |
body |
使用CSS樣式表替代 |
align、bgcolor、border、cellpadding、cellspacing、frame、rules、width |
table |
使用CSS樣式表替代 |
align、char、charoff、height、nowrap、valign |
tbody、thead、tfoot |
使用CSS樣式表替代 |
align、bgcolor、char、charoff、height、nowrap、valign、width |
td、th |
使用CSS樣式表替代 |
align、bgcolor、char、charoff、valign |
tr |
使用CSS樣式表替代 |
align、char、charoff、valign、width |
col、colgroup |
使用CSS樣式表替代 |
align、border、hspace、vspace |
object |
使用CSS樣式表替代 |
clear |
br |
使用CSS樣式表替代 |
compace、type |
ol、ul、li |
使用CSS樣式表替代 |
compace |
dl |
使用CSS樣式表替代 |
compace |
menu |
使用CSS樣式表替代 |
width |
pre |
使用CSS樣式表替代 |
align、hspace、vspace |
img |
使用CSS樣式表替代 |
align、noshade、size、width |
hr |
使用CSS樣式表替代 |
align、frameborder、scrolling、marginheight、marginwidth |
iframe |
使用CSS樣式表替代 |
autosubmit |
menu |