Html5和Html4的區別

html5解決了:web瀏覽器之間的兼容性很低、文檔結構不明確等功能。

一、Html5和Html4的區別

(1)語法的改變:

? ? ? ? ? ? ?內容類型:文件名還是 .html或 .htm;文件類型還是 texttype

? ? ? ? ? ? DOCTYPE聲明:變化較大(在html4中要指定版本),指定字符編碼:html4:<meta http-equiv ="content-type" content="text/html" charset ="UTF-8"> ;?html5 :<meta charset="UTF-8">

(2)可以省略標記的元素:具有boolean值得屬性

值為true的情況:

<input type="checkbox" ?checked>

<input type="checkbox" checked="checked">

<input type="checkbox" ?checked=" ">

值為false的情況:

<input type="checkbox">

(3)新增元素:

結構元素:section(內容塊)? article(博客中的一篇文章)? aside(輔助信息)? ? header(標題)? ? ? ? hgroup(標題的結合)? footer(作者姓名)? ? nav (導航)? figure(文檔主體中的一個單元)

其他元素:video? ? audio ? canves ? embed? mark progress meter? time ruby? rt? rp? wbr

command ?details ?datalist ?datagrid ? keygen ? output ? source ?menu

input元素的類型: email(地址)、? url、? number、? range、? Date Pickers(日歷)

二、祥講

article元素:article元素代表文檔、頁面或應用程序中獨立的、完整的、可以獨立被外部引用的內容。它可以是一篇博客或者報刊中的文章,一片論壇帖子、一段用戶評論、或獨立的插件,或其他任何獨立的內容。article元素是可以嵌套使用的;article元素可以用來表示插件。

section元素:用于對網站或應用程序中頁面上的內容進行分塊。一個section元素通常由內容及其標題組成。但 section元素并非一個普通的容器元素; 當一個容器需要被直接定義成樣式或通過腳本定義行為時,推薦使用div而非section元素。

通常不推薦沒有標題內容使用section元素,對頁面中的內容進行分段,對文章進行分塊。

不要與article元素混淆

特別注意:

1、不要將section元素作為設置樣式的頁面容器

2、如果 article元素、aside元素、nav元素更符合使用條件,那就不要使用section元素

3、沒有標題內容 ?不要使用section元素

nav元素:是一個可以用作頁面導航的連接組,其中的導航元素連接到其他頁面或當前頁面的其他部分。并不是所有的連接組都要被放進nav元素,只需要將主要的、基本的連接組放進nav元素即可。

應用場景:

傳統導航條、側邊欄導航、頁內導航、翻頁操作

特別注意:

不能用menu元素替代nav元素

aside元素:用來表示當前頁面或文章的附屬信息部分,它可以包含于當前頁面或主要內容相關的引用、側邊欄、廣告、導航條,以及其他類似的有區別與主要主要內容的部分。

aside元素在article元素內,作為主要信息的一個附屬信息;aside元素在article元素外。

header元素:是一種具有引導和導航作用的結構元素,通常用來放置整個頁面或頁面內的一個內容區塊的標題,也可以是其他內容,例如:數據表格,搜索表單,或者相關的logo圖片。可以出現多次。

footer元素:可以作為其上層父級內容塊或是一個根區塊的腳注。footer通常包括其相關區塊的腳注信息,如:作者、相關閱讀鏈接及版權信息等。

hgroup 元素:是將標題及其子標題進行分組的元素。hgroup元素通常會將h1~h6元素進行分組,譬如:一個內容區塊的標題及其子元素算一組。

address元素:用來在文檔中呈現聯系信息,包括文檔作者或文檔維護者的名字、他們的網站鏈接、電子信箱、真實地址、電話號碼等。address應該不只用來呈現電子信箱或真實地址,還用來展示跟文檔相關的聯系人的所有信息。

2.1廢除元素

能使用css替代的元素:basefont ?big ?center ?font ? s ? tt ?u;不再使用frame框架;只有部分瀏覽器支持的元素;其他被廢除的元素

2.2新增屬性

表單相關的屬性:

form屬性:在HTML4中,表單內的從屬元素必須寫在表單內部。而在HTML5中,可以把他們寫在頁面上任何地方,然后為該元素指定一個form屬性,屬性值為該表單的id,這樣就可以聲明該元素從屬于指定表單了。

formmethod屬性:在HTML4中,一個表單內只能有一個action屬性用來對表單內所有元素統一指定提交頁面,所以每個表單內也只有一個method屬性來統一指定提交方法。在HTML5中,可以使用formmethod屬性來對每一個表單元素分別指定不同的提交方法(提交方法:get和post)。

formenctype屬性:在HTML4中,表單元素具有一個enctyp屬性,該屬性用于指定在表單發送到服務器之前應該如何對表單內的數據進行編碼。

在HTML5中,可以使用formenctype屬性對表單元素分別指定不同的編碼方式。

三種形式:

<input type="text" formenctype="text/plain">

<!-- formenctype = "text/plain":表單中的空格被轉化為+號,但不對表單中的特殊符號進行編碼 。 -->

<input type="text" formenctype="multipart/form-data">

<!-- formenctype="multipart/form-data": 不對字符進行編碼,在使用文件上傳時需要使用該編碼 -->

<input type="text" ?formenctype="application/x-www-form-urlencoded">

<!--formenctype="application/x-www-form-urlencoded"? : 提交方式為get時,瀏覽器將此編碼方式將表單數據轉換成字符-->

formtarget屬性:在HTML4中,表單元素具有一個target屬性,該屬性用于指定在何處打開表單提交后所需要加載的頁面。在HTML5中,可以對多個提交按鈕分別使用formtarget屬性來指定提交后在何處打開所需加載的頁面。

autofocus屬性:為文本框、選擇框或按鈕控件加上autofocus屬性,當畫面打開時,該控件自動獲得光標焦點。

required屬性:HTML5中新增的required屬性可以應用在大多數輸入元素上,在提交時,如果元素中內容為空白,則不允許提交,同時在瀏覽中顯示信息提示文字。

labels屬性:在HTML5中,為所有可使用標簽的表單元素、button、select 元素等,定義一個labels屬性,屬性值為一個NodeList對象,代表該元素所綁定的標簽元素所構成的集合。

2.3新增的全局屬性 (Html5)

contentEditable屬性:主要功能是,允許用戶編輯元素中的內容,是boolean類型值,未說明類型時,則由繼承的狀態來指定(如:父元素是可編輯的,其子元素也是)。

designMode屬性:值有兩個 : On,可編輯;Off,不可編輯。

hidden屬性:也是boolean類型值。

spellcheck屬性:用于輸入框中拼寫檢查。

tabindex屬性

<body>

<a href=""><tabindex="1"></a>

</body>

tabindex="-1":是無法獲取焦點的,但是在程序中是可以獲取tabindex的。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,501評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,673評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,610評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,939評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,668評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,004評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,001評論 3 449
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,173評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,705評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,426評論 3 359
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,656評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,139評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,833評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,247評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,580評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,371評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,621評論 2 380

推薦閱讀更多精彩內容

  • 本文主要介紹Html5和Html4的區別。 語法的改變 內容類型HTML5 的文件擴展符與內容類型保持不變。擴展符...
    layjoy閱讀 1,861評論 0 23
  • 接上 關于HTML/HTML5(一)http://www.lxweimin.com/p/33fc7840c079 學...
    Amyyy_閱讀 815評論 0 4
  • 學習HTML的最佳網站沒有之一http://www.w3school.com.cn/html/ 關于HTML/HT...
    Amyyy_閱讀 2,116評論 0 16
  • 工作以后確實不曾靜下心來好好寫點文字,即使心有詩意,卻拙于表達,久之,更甚。三十天,三十篇文字,我為自己驚喜! ...
    盛世回首閱讀 209評論 0 0
  • 4.飛流 飛流在劇中就像是萌萌噠的小狗,瞪著黑白分明的眼眸,看著長蘇。 長蘇對他,更多的是憐惜。 憐惜他幼時的可怖...
    冷水沉香閱讀 1,268評論 0 2