html5與傳統html區別

才智咖 人氣:8.26K

一. HTML5語法的改變

html5與傳統html區別

該知識點所說變化指的是基於HTML4基礎上所定義的改變,主要有如下:

1.HTML5的檔案擴充套件符(.html或.htm)與內容型別(text/html)保持不變。

2.HTML5中,刻意不使用版本宣告,一份文件將會適用於所有版本的HTML。

3.從HTML5開始,對於檔案的字元編碼推薦使用UTF-8。

4.HTML5確保了與之前HTML版本的最大程度的相容性。

為了保證相容性,需從元素說起,在HTML5.中,元素的標記可以省略。其體來說,元素的標記分為“不允許寫結束標記”、“可以省略結束標記”和‘“開始標記和結束標記全部可以省略”三種類型。

不允許寫結束標記元素有:area、base、br、col.....

可以省略結束標記:li、dt、dd、p、rt......

開始標記和結束標記全部可以省略:html、head、body.....

二.新增的結構元素

section元素表示頁面中的一個內容區塊,比如章節、頁首、頁尾或頁面中的其他部分;

article元素表示頁面中的一塊與上下文不相關的獨立內容,譬如部落格中的一篇文章或報紙中的一篇文章;

aside元素表示article元素的內容之外的、與article元素的內容相關的輔助資訊;

header元素表示頁面中一個內容區塊或整個頁面的標題;

hgroup元素用於對整個頁面或頁面中一個內容區塊的標題進行組合;

footer元素表示整個頁面或頁面中一個內容區塊的腳註。一般來說,它會包含創作者的姓名、創作日期以及創作者聯絡資訊;

nav元素表示頁面中導航連結的.部分;

figure元素表示一段獨立的流內容,一般表示文件主體流內容中的一個獨立單元,使用figcaption元素為figure元素組新增標題

2、新增的其他元素

audio元素定義音訊,比如音樂或其他音訊流;

embed元素用來插入各種多媒體,格式可以是Midi、Wav、AU、MP3等;

mark元素上要用來在視覺上向用戶呈現那些需要突出顯示或高亮顯示的文字,典型應用就是在搜尋結果中向用戶高亮顯示搜素關鍵詞;

progress元素表示執行中的程序

ruby元素表示ruby註釋(中文注音或字元)

rt元素表示字元(中文注音或字元)的解釋或發音

rp元素在ruby註釋中使用,以定義不支援ruby素的瀏覽器所顯示的內容。

wbr元素表示軟換行,而當寬度不夠時,主動在此處進行換行

canvas元素表示圖形,比如圖表和其他影象

cammand元素表示命令按鈕,比如單選按鈕、複選框或按鈕

details元素表示使用者要求得到並且可以得到的細節資訊

datagrid元素表示可選資料的列表,它以樹形列表的形式來顯示

keygen元素表示生成金鑰

output元素表示不同型別的輸出,比如指令碼的輸出

source元素為媒介元素(比如和)定義媒介資源

menu元素表示選單列表

3、新增的input元素

email 型別表示必須輸入E-main地址的文字輸入框

url 型別表示必須輸入URL地址的文字輸入框

number型別表示必須輸人數值的文字輸入框

range 型別表示必須輸入一定範圍內數字值的文字輸人框

HTML5擁有多個可供選取日期和時間的新型輸入文字框:

date ——選取日、月、年

month ——選取月、年

week ——選取周和年

time ——選取時間(小時和分鐘)

datetime ——一選取時間、日、月、年(UTC 時間)

datetime.local ——選取時間、日、月、年(本地時間)

三.廢除元素

1、能使用CSS替代的元素

對幹basefont、big、center、font、s、strike、tt、u這些元素,由於它們的功能都是純粹去畫面展示服務的,而HTML5中提倡把畫面展示性功能放在CSS樣式表中統一編輯,所以這些元素廢除了

2、不再使用frame框架

對於frameset元素、frame元素與noframes元素,由於frame框架對網頁可用性存在負面影響,在HTML5中已不支援frame框架,只支援iframe框架,或者用伺服器方建立的由多個頁面組成的複合頁面的形式,同時將以上這三個元素廢除。

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

對於applet、bgsound、blink、marquee等元素,由於只有部分瀏覽器支援這些元素,特別是bgsound元素以及marquee元素,只被Internet Explorer所支援,所以在HTML 5中被廢除。其中applet元素可由ernedd元素或object元素替代,bgsound元素可由audio元素替代,marquee可以由JavaScript程式設計的方式所替代

4、其他被廢除的元素:

廢除rb元素,使用ruby元素替代

廢除acronym元素,使用abbr元素替代

廢除dir元素,使用ul元素替代

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

廢除listing元素,使用pre元素替代

廢除xmp元素,使用code元素替代

廢除nextid元素,使用GUIDS替代

廢除plaintext元素,使用“ text/plian” MIME型別替代

四.新增屬性和廢除屬性

一、新增屬性

1、與表單相關屬性

新增autofocus屬性,它以指定屬性的方式讓元素在畫面開啟時自動獲得焦點;

新增placeholder屬性,它會對使用者的輸入進行提示,提示使用者可以輸入的內容;

新增form屬性,宣告它屬於哪個表單,然後將其放置在頁面上任何位置,而不是表單之內;

新增required屬性,該屬性表示在使用者提交的時候進行檢查,檢查該元素內一定要有輸入內容;

2、與連結相關屬性

增加media屬性,該屬性規定目標URL是為什麼型別的媒介/裝置進行優化的,只能在href屬性存在時使用;

增加hreflang屬性與rel屬性,以保持與a元素、link元素的一致;

3、其他屬性

屬性reverend,它指定列表倒序顯示;

為script元素增加async屬性,它定義指令碼是否非同步執行;

二、廢除屬性

能被CSS樣式表替代的屬性全部廢除掉;

多餘屬性,例如:target、profile、version等被廢除掉;

五.全域性屬性

在HTML5中,新增了一個’‘全域性屬性“的概念。所謂全域性屬性,是指可以對任何元素都使用的屬性。

1、contentEditable 屬性

該屬性允許使用者編輯元素中的內容,可以獲得滑鼠焦點,屬性為布林值,可被指定為true或false。另外,該屬性還有個隱藏inherit狀態,為true時,允許編輯,為false時,不允許編輯,未指定時,由inherit決定。

2、designMode 屬性

該屬性用來決定整個頁面是否可編輯。有兩個屬性“on”與"off"。屬性為"on"時,可編輯,為“off”時,不可編輯。

3、hidden屬性

所有元素都允許使用一個hidden屬性,該屬性類似於input元素中的hidden元素,功能是通知瀏覽器不渲染該元素,使該元素處於不可見狀態。該屬性值為布林值,為true時,不可見,為false時,可見。

4、spellcheck屬性

該屬性是HTML 5針對input元素(type=text) 與textarea這兩個文字輸入框提供的一個新屬性,主要對使用者輸入內容進行拼寫與語法檢查。屬性值為布林值,書寫時必須明確宣告屬性值為true或false書寫方式如下:

詳解form屬性

在HTML4中,表單內的從屬元素必須書寫在表單內部,但是在HTML5中,可以把他們書寫在頁面上任何地方,然後給元素制定一個form屬性,屬性值為該表單單位的id,這樣就可以宣告該元素從屬於指定表單了。

input元素從屬於表單,它唄書寫在表單內部,用不著再對它制定form屬性。textarea元素唄書寫在表單之外,但它從屬於表單,所以表單的id制定給textareea元素的form屬性。

這樣做的好處是當需要給頁面中的元素新增樣式時可以更方便地新增,因為它們不是被分散在各表單之內的了。

TAGS:HTML5 html