html5新增的屬性和廢除的屬性簡要概述 詳細出處參考:http://www.jb51.net/html5/73524.html

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  


新增的結構標籤

section元素
表示頁面中的一個內容區塊,比如章節、頁眉、頁腳或頁面的其他部分。可以和h1、 h2……等元素結合起來使用,表示文檔結構。例:HTML5中<section>……</section>;HTML4中<div> ……</div>。
article元素
表示頁面中一塊與上下文不相關的獨立內容。比如一篇文章。
aside元素
表示article元素內容之外的、與article元素內容相關的輔助信息。
header元素
表示頁面中一個內容區塊或真個頁面的標題。
hgroup元素
表示對真個頁面或頁面中的一個內容區塊的標題進行組合。
footer元素
表示整個頁面或頁面中一個內容區塊的腳註。一般來說,他會包含創作者的姓名、創作日期以及創作者的聯繫信息。
nav元素
表示頁面中導航鏈接的部分。
figure元素
表示一段獨立的流內容,一般表示文檔主體流內容中的一個獨立單元。使用figcaption元素爲figure元素組添加標題。例如:

複製代碼代碼如下:
<figure>
<figcaption>PRC</figcaption>
<p>The People's Republic of China was born in 1949</p>
</figure>
HTML4中常寫作
<dl>
<h1>prc</h1>
<p>The People's Republic of China was born in 1949</p>
</dl>

新增的其他元素
video元素
定義視頻。像電影片段或其他視頻流。例:<video src="movie.ogg" controls="controls">video元素</video>
HTML4中寫法:
<object type="video/ogg" data="move.ogv">
  <param name ="src" value="movie.ogv">
</object>
audio元素
定義音頻。如音樂或其他音頻流。例:<audio src ="someaudio.wav">audio元素</audio>
html4中寫法:

複製代碼代碼如下:
<object tyle="application/ogg" data="someaudio.wav">
<param name ="src" value= "someaudio.wav">
</object>

embed元素
用來嵌入內容(包括各種媒體)。格式可以是Midi、Wav、AIFF、AU、MP3,flash等。例:<embed src="flash.swf" />
HTML4中代碼示例<object data="flash.swf" type="application/x-shockwave-flash"><object>
mark元素
主要用來在視覺上向用戶呈現哪些需要突出顯示或高亮顯示的文字。典型應用搜索結果中高亮顯示搜素關鍵字。
HTML5<mark></mark>;HTML4 <span></span>。
progress元素
表示運行中的進程,可以使用progress元素顯示JavaScript中耗時時間函數的進程。等待中……、請稍後等。<progress></progress>。
time元素
表示日期或時間,也可以兩者同時。
ruby元素
定義 ruby 註釋(中文註音或字符)。
與 <ruby> 以及 <rt> 標籤一同使用。ruby 元素由一個或多個字符(需要一個解釋/發音)和一個提供該信息的 rt 元素組成,還包括可選的 rp 元素,定義當瀏覽器不支持 "ruby" 元素時顯示的內容。

複製代碼代碼如下:
<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>

rt元素
定義字符(中文註音或字符)的解釋或發音。
rp元素
在 ruby 註釋中使用,以定義不支持 ruby 元素的瀏覽器所顯示的內容。
wbr元素
表示軟換行。與br元素的區別:br元素表示此處必須換行;wbr表示瀏覽器窗口或父級元素足弓寬時(沒必要換行時),不換行,而寬度不夠時主動在此處換行。
canvas元素
定義圖形,比如圖表和其他圖像。<canvas> 元素只是圖形容器(畫布),必須使用腳本來繪製圖形。

複製代碼代碼如下:
<canvas id="myCanvas"></canvas><script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>

command元素——貌似沒什麼效果。是不是支持有問題
表示命令按鈕,比如單選按鈕、複選框或按鈕。
只有當 command 元素位於 menu 元素內時,該元素纔是可見的。否則不會顯示這個元素,但是可以用它規定鍵盤快捷鍵。。

 

複製代碼代碼如下:
<menu>
<command οnclick="alert('Hello World')">
Click Me!</command>
</menu>

details標籤 目前只有 Chrome 支持 details 標籤
用於描述文檔或文檔某個部分的細節 。
可與 summary 標籤配合使用,summary可以爲 details 定義標題。標題是可見的,用戶點擊標題時,會顯示出 details。summary應該是details的第一個子元素。

datalist標籤
定義選項列表。請與 input 元素配合使用該元素,來定義 input 可能的值。datalist 及其選項不會被顯示出來,它僅僅是合法的輸入值列表。使用 input 元素的 list 屬性來綁定 datalist。

 

複製代碼代碼如下:
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>

datagrid標籤 如何用?
定義可選數據的列表。datagrid 作爲樹列表來顯示。
如果把 multiple 屬性設置爲 true,則可以在列表中選取一個以上的項目。

keygen標籤 如何用?
標籤規定用於表單的密鑰對生成器字段。

當提交表單時,私鑰存儲在本地,公鑰發送到服務器。

 

複製代碼代碼如下:
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

output標籤
定義不同類型的輸出,比如腳本的輸出。

複製代碼代碼如下:
<form action="form_action.asp" method="get" name="sumform">
<output name="sum"></output>
</form>

source標籤
標籤爲媒介元素(比如 <video> 和 <audio>)定義媒介資源。
menu標籤
定義菜單列表。當希望列出表單控件時使用該標籤。注意與nav的區別,menu專門用於表單控件。

複製代碼代碼如下:
<menu>
<li><input type="checkbox" />Red</li>
<li><input type="checkbox" />blue</li>
</menu>

新增input標籤email
必須輸入email url
必須輸入url地址 number
必須輸入數值 range
必須輸入一定範圍內數值 Date Pickers(日期選擇器)
擁有多個可供選取日期和時間的新輸入類型:
date - 選取日、月、年
month - 選取月、年
week - 選取周和年
time - 選取時間(小時和分鐘)
datetime - 選取時間、日、月、年(UTC 時間)
datetime-local - 選取時間、日、月、年(本地時間) search
用於搜索域,域顯示爲常規的文本域。 color

廢除的元素

1、能用css代替的元素
basefont、big、center、font、s、strike、tt、u。這些元素純粹是爲畫面展示服務的,HTML5中提倡把畫面展示性功能放在css中統一編輯。

2、不再使用frame框架。

frameset、frame、noframes。HTML5中不支持frame框架,只支持iframe框架,或者用服務器方創建的由多個頁面組成的符合頁面的形式,刪除以上這三個標籤。

3、只有部分瀏覽器支持的元素

applet、bgsound、blink、marquee等標籤。

4、其他被廢除的元素

廢除rb,樹勇ruby替代。

廢除acronym使用abbr替代。

廢除dir使用ul替代。

廢除isindex使用form與input相結合的方式替代

廢除listing使用pre替代

廢除xmp使用code替代

廢除nextid使用guids

廢除plaintex使用“text/plian”(無格式正文)MIME類型替代。

===========================================================

看着這麼多新增標籤和元素,我在想HTML5真的來了嗎?鋪天蓋地的相關資訊、教程,大家張口閉口的HTML5、CSS3以及各大瀏覽器廠商宣佈對html5的支持,讓我感覺html5時代真的來了。那我能在我的項目中放心的用它麼?還不能。雖然IE9已經宣稱支持html5了,但是IE8完全不支持。現在仍有一大批的人坐在06、07年的奔四老爺機面前,用着xp的系統,裝着IE8在爬網;還有一些戀舊老哥、老姐們,買的新機咔嚓掉正版win7,換上D版XP。雖然現在有了Html5shiv,可以讓IE8有限支持一些HTML新標籤,也僅僅是幾個新標籤而已。我可以選擇使用什麼新技術,但是不能要求你產品的用戶必須裝什麼瀏覽器。其實做東西也不一定非得新技術,適合的就好,就想現在有些用asp.net2寫的東東功能一樣強大;就像鄧爺爺的“貓論”,管用就行。

 

發佈了42 篇原創文章 · 獲贊 3 · 訪問量 11萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章