HTML5和HTML4有何區(qū)別?

創(chuàng)新互聯(lián)擁有10余年成都網(wǎng)站建設(shè)工作經(jīng)驗(yàn),為各大企業(yè)提供網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)服務(wù),對于網(wǎng)頁設(shè)計(jì)、PC網(wǎng)站建設(shè)(電腦版網(wǎng)站建設(shè))、app軟件定制開發(fā)、wap網(wǎng)站建設(shè)(手機(jī)版網(wǎng)站建設(shè))、程序開發(fā)、網(wǎng)站優(yōu)化(SEO優(yōu)化)、微網(wǎng)站、域名與空間等,憑借多年來在互聯(lián)網(wǎng)的打拼,我們在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了很多網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營銷經(jīng)驗(yàn),集策劃、開發(fā)、設(shè)計(jì)、營銷、管理等網(wǎng)站化運(yùn)作于一體,具備承接各種規(guī)模類型的網(wǎng)站建設(shè)項(xiàng)目的能力。
HTML5是HTML標(biāo)準(zhǔn)的下一個(gè)版本。雖然HTML5沒有完全顛覆HTML4,但是它們也有一些不同。下面是我為大家搜索整理的關(guān)于HTML5和HTML4的區(qū)別,歡迎參考閱讀,希望對你有所幫助!想了解更多相關(guān)信息請持續(xù)關(guān)注我們應(yīng)屆畢業(yè)生培訓(xùn)網(wǎng)!
1. 簡化的語法
HTML5簡化了很多細(xì)微的語法,例如doctype的聲明,你只需要寫!doctype html就行了。HTML 5 指定 UTF-8 編碼的方式如下
meta charset="UTF-8"
2.? Flash給很多Web開發(fā)者帶來了麻煩,要在網(wǎng)頁上播放Flash需要一堆代碼和插件。canvas標(biāo)簽使得開發(fā)者只要使用一個(gè)標(biāo)簽就能和用戶產(chǎn)生UI交互。
3. 新增許多標(biāo)簽
HTML5設(shè)計(jì)的一個(gè)原則是更好的體現(xiàn)網(wǎng)站的語義性,所以增加 了header和footer這樣的標(biāo)簽,用來明確表示網(wǎng)頁的結(jié)構(gòu);新增 section 和 article 標(biāo)簽,section和article也有利于清晰化網(wǎng)頁的結(jié)構(gòu),更有利于SEO;新增 menu 和 figure 標(biāo)簽,menu可以被用于創(chuàng)建傳統(tǒng)的菜單,也可以用于工具欄和上下文菜單。figure標(biāo)簽使得網(wǎng)頁文字和圖片的排版更 專業(yè); 新增 audio 和 video 標(biāo)簽,這兩個(gè)標(biāo)簽可能是HTML5里面最有用的兩個(gè)標(biāo)簽了,使用起來時(shí)也異乎方便,如在HTML5頁面中嵌入視頻只需一小段。
復(fù)制代碼代碼如下:
video width="450" height="340" controls
source src="jamshed.mp4" type="video/mp4"
Your browser does'nt support video embedding feature.
/video
同理,音頻等其他的也類似。
4. 全新的表單
HTML5對 form 和 forminput 標(biāo)簽進(jìn)行了大量修改,添加了很多新的屬性,也修改了很多屬性
5. 刪除 b 和 font 標(biāo)簽,frame, center, big 標(biāo)簽
6. HTML5 支持了不同類型的存儲類型
HTML5 支持本地存儲,在之前版本中是通過 Cookie 實(shí)現(xiàn)的。HTML5 本地存儲速度快而且安全。并且HTML5有兩種不同的`對象可用來存儲數(shù)據(jù),HTML5通過JS來存儲和訪問數(shù)據(jù):
localStorage 適用于長期存儲數(shù)據(jù),瀏覽器關(guān)閉后數(shù)據(jù)不丟失
sessionStorage 只是針對一個(gè)session的數(shù)據(jù)存儲,存儲的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除
總的來說,HTML5已經(jīng)超越了標(biāo)記語言的范疇,更富語義的標(biāo)簽將使得HTML5更有用處。Canvas+WEBGL等技術(shù),實(shí)現(xiàn)無插件的動畫以及 圖像、圖形處理能力;本地存儲,可實(shí)現(xiàn)offline應(yīng)用;websocket,一改http的純pull模型,實(shí)現(xiàn)數(shù)據(jù)推送的夢 想;MathML,SVG等,支持更加豐富的render等等等等,現(xiàn)在對于對HTML5的了解還只停留在表面階段,以后會多閱讀一部分HTML5的書籍 增加一下見識。
;
HTML5和HTML4的區(qū)別:
第一點(diǎn),HTML5標(biāo)準(zhǔn)還在制定中
企業(yè)網(wǎng)站制作首先要注意的是,HTML5雖然現(xiàn)在很火,但是HTML5標(biāo)準(zhǔn)還在制定中,標(biāo)準(zhǔn)仍在改變,HTML4已經(jīng)10多年了,不會有任何改變了。
第二點(diǎn),HTML5簡化的語法
HTML5簡化了很多細(xì)微的語法,例如doctype的聲明,你只需要寫!doctype html就行了,HTML5與HTML5,XHTML1兼容,但是與SGML不兼容。
第三點(diǎn),canvas標(biāo)簽替代Flash
Flash給很多Web開發(fā)者帶來了麻煩,要在網(wǎng)頁上播放Flash需要一堆代碼和插件,canvas標(biāo)簽使得開發(fā)者只要使用一個(gè)標(biāo)簽就能和用戶產(chǎn)生UI交互,雖然目前canvas標(biāo)簽還不能實(shí)現(xiàn)Flash的所有功能,但是很快canvas就會讓Flash看起來老土,哈哈!
第四點(diǎn),新增header和footer標(biāo)簽
HTML5設(shè)計(jì)的一個(gè)原則是更好的體現(xiàn)網(wǎng)站的語義性,所以增加了header和footer這樣的標(biāo)簽,用來明確表示網(wǎng)頁的結(jié)構(gòu)。
第五點(diǎn),新增section和article標(biāo)簽
與header,footer類似,section和article也有利于清晰化網(wǎng)頁的結(jié)構(gòu),更有利于網(wǎng)站優(yōu)化。
第六點(diǎn),新增menu和figure標(biāo)簽
menu可以被用于創(chuàng)建傳統(tǒng)的菜單,也可以用于工具欄和上下文菜單,figure標(biāo)簽使得網(wǎng)頁文字和圖片的排版更專業(yè)。
第七點(diǎn),新增audio和video標(biāo)簽
這兩個(gè)標(biāo)簽可能是HTML5里面最有用的兩個(gè)標(biāo)簽了,顧名思義,這兩個(gè)標(biāo)簽是用來播放音頻和視頻的。
第八點(diǎn),全新的表單
HTML5對form和forminput標(biāo)簽進(jìn)行了大量修改,添加了很多新的屬性,也修改了很多屬性。
第九點(diǎn),刪除b和font標(biāo)簽
這個(gè)改進(jìn)我還無法理解,我不認(rèn)為刪除這兩個(gè)標(biāo)簽對代碼的改進(jìn)有很大的幫助,官方的解釋是應(yīng)該用CSS來替代這兩個(gè)標(biāo)簽,但我還是覺得對于簡單的文本,這兩個(gè)標(biāo)簽還是很方便的。
第十點(diǎn),刪除frame,center,big標(biāo)簽
總結(jié),這十點(diǎn)只是一部分,要看看真正了解HTML5制作出來的網(wǎng)站風(fēng)格和創(chuàng)意可以欣賞一下Y+外貿(mào)網(wǎng)站,就是通過HTML5技術(shù)制作出來的。
HTML5相對于HTML4而言最大的亮點(diǎn)主要在以下幾個(gè)方面:
(1)增加了對Canvas、Video和Audio等標(biāo)簽的支持,多媒體和繪畫、甚至動畫的展現(xiàn)能力得到極大的增強(qiáng)
(2)增加了一些更具語義的標(biāo)簽或接口,例如aside,header,footer等
(3)修改或廢棄了一些HTML標(biāo)簽和語義,如新表單特性,Marquee,frameset等
(4)建議將顏色/尺寸/對齊排版相關(guān)的屬性都移到CSS中,HTML5主要負(fù)責(zé)網(wǎng)頁的布局
1、第一個(gè)區(qū)別: html5 更加的語義化了,語法簡單化了
HTML5簡化了很多細(xì)微的語法,例如doctype的聲明,你只需要寫!doctype html就行了。HTML 5 指定 UTF-8 編碼的方式如下meta charset="UTF-8"
2、第二個(gè)區(qū)別:html5多增加了新的 標(biāo)簽:
1)canvas標(biāo)簽 :利用js控制實(shí)現(xiàn)畫圖的效果
2)header和footer標(biāo)簽
3)section和article標(biāo)簽
4)audio和video標(biāo)簽
5)html5支持本地存儲
6)刪除了html中的標(biāo)簽:b,font,frame,center,bid標(biāo)簽
7)對表單的form做了大量的修改
HTML5是HTML標(biāo)準(zhǔn)的下一個(gè)版本。越來越多的程序員開始HTML5來構(gòu)建網(wǎng)站。如果同時(shí)使用HTML4和HTML5的話 ,會發(fā)現(xiàn)用HTML5從頭構(gòu)建,比從HTML4遷移到HTML5要方便很多。雖然HTML5沒有完全顛覆HTML4,它們還是有很多相似之處,但是它們也有一些關(guān)鍵的不同。以下10個(gè)關(guān)鍵的不同之處。
1. HTML5 標(biāo)準(zhǔn)還在制定中
首先要注意的是,HTML5雖然現(xiàn)在很火,但是HTML5標(biāo)準(zhǔn)還在制定中,標(biāo)準(zhǔn)仍在改變。HTML4已經(jīng)10多年了,不會有任何改變了。
2. 簡化的語法
HTML5簡化了很多細(xì)微的語法,例如doctype的聲明,只需要寫!doctype html就行了。HTML5與HTML5,XHTML1兼容,但是與SGML不兼容。
3. canvas標(biāo)簽替代Flash
Flash給很多Web開發(fā)者帶來了麻煩,要在網(wǎng)頁上播放Flash需要一堆代碼和插件。canvas標(biāo)簽使得開發(fā)者只要使用一個(gè)標(biāo)簽就 能和用戶產(chǎn)生UI交互。雖然目前canvas標(biāo)簽還不能實(shí)現(xiàn)Flash的所有功能,但是很快canvas就會讓 Flash看起來老土!
4. 新增 header 和 footer 標(biāo)簽
HTML5設(shè)計(jì)的一個(gè)原則是更好的體現(xiàn)網(wǎng)站的語義性,所以增加了header和footer這樣的標(biāo)簽,用來明確表示網(wǎng)頁的結(jié)構(gòu)。
5. 新增 section 和 article 標(biāo)簽
與header, footer類似,section和article也有利于清晰化網(wǎng)頁的結(jié)構(gòu),更有利于SEO。
6. 新增 menu 和 figure 標(biāo)簽
menu可以被用于創(chuàng)建傳統(tǒng)的菜單,也可以用于工具欄和上下文菜單。figure標(biāo)簽使得網(wǎng)頁文字和圖片的排版更專業(yè)。
7. 新增 audio 和 video 標(biāo)簽
這兩個(gè)標(biāo)簽可能是HTML5里面最有用的兩個(gè)標(biāo)簽了。顧名思義,這兩個(gè)標(biāo)簽是用來播放音頻和視頻的。
8. 全新的表單
HTML5對 form 和 forminput 標(biāo)簽進(jìn)行了大量修改,添加了很多新的屬性,也修改了很多屬性。
9. 刪除 b 和 font 標(biāo)簽
10. 刪除 frame, center, big 標(biāo)簽
以上十點(diǎn)只是HTML5和HTML4差別的很小一部分。
HTML5是最新的HTML標(biāo)準(zhǔn),或遲或早,所有的web程序員都會發(fā)現(xiàn)需要使用到這個(gè)最新的標(biāo)準(zhǔn),而且,很多人都會感覺到,重新開發(fā)一個(gè)HTML5的網(wǎng)站,要比把一個(gè)網(wǎng)站從HTML4遷移到HTML5上容易的多,這是因?yàn)檫@兩個(gè)版本之間有很大不同之處。
事實(shí)上,HTML5并沒有對HTML4做什么重大的修改,它們很多東西都是相似的。
可是,其中有一些很重要的區(qū)別需要知道。下面列出的就是一些HTML4和HTML5之間主要的不同之處(并不是全部,全部列出來是不可能的):
1. HTML5標(biāo)準(zhǔn)還在制定中
這頭一個(gè)不同之處顯而易見,但非常重要,我需要先從它開始。也許已經(jīng)注意到了關(guān)于HTML5很酷的言論到處都是,但是事實(shí)情況是,HTML5是一個(gè)還未完成的標(biāo)準(zhǔn)。HTML4已經(jīng)有10歲了,但它仍是當(dāng)前正式的標(biāo)準(zhǔn)的事實(shí)沒有改變。
另一方面,HTML5仍處在早期階段,以后的修改會不斷的出現(xiàn)。必須考慮到這些,因?yàn)樵诰W(wǎng)站上使用的這些新增加或修改的網(wǎng)頁元素會每年都出現(xiàn)一些變化,需要不停的更新升級網(wǎng)站,這可不是希望的。這就是目前為止,最好在產(chǎn)品里使用HTML4,只在實(shí)驗(yàn)里使用HTML5的原因。
2. 簡化的語法
更簡單的doctype聲明是HTML5里眾多新特征之一。現(xiàn)在只需要寫!doctype html,這就行了。HTML5的語法兼容HTML4和XHTML1,但不兼容SGML。
3. 一個(gè)替代Flash的新 canvas 標(biāo)記
對于Web用戶來說,F(xiàn)lash既是一個(gè)驚喜,也是一種痛苦。有很多的Web開發(fā)人員對HTML5對Flash產(chǎn)生的威脅很不滿。但對于那些忍受著要花幾年時(shí)間加載和運(yùn)行的臃腫的Flash視頻的人來說,用新的 canvas 標(biāo)記生成視頻的技術(shù)已經(jīng)到來。
目前, canvas 標(biāo)記并不能提供所有的Flash具有的功能,但假以時(shí)日,F(xiàn)lash必將從web上淘汰。我們拭目以待,因?yàn)楹芏嗳诉€并不認(rèn)同這種觀點(diǎn)。
4. 新的 header 和 footer 標(biāo)記
HTML5的設(shè)計(jì)是要更好的描繪網(wǎng)站的解剖結(jié)構(gòu)。這就是為什么這些header 和
footer 等新標(biāo)記的出現(xiàn),它們是專門為標(biāo)志網(wǎng)站的這些部分設(shè)計(jì)的。
在開發(fā)網(wǎng)站時(shí),不在需要用div標(biāo)記來標(biāo)注網(wǎng)頁的這些部分。
5. 新的 section 和 article 標(biāo)記
跟header 和 footer標(biāo)記類似,HTML5中引入的新的section 和 article 標(biāo)記可以讓開發(fā)人員更好的標(biāo)注頁面上的這些區(qū)域。
據(jù)推測,除了讓代碼更有組織外,它也能改善SEO效果,能讓搜索引擎更容易的分析的頁面。
6. 新的 menu 和 figure 標(biāo)記
新的menu標(biāo)記可以被用作普通的菜單,也可以用在工具條和右鍵菜單上,雖然這些東西在頁面上并不常用。
類似的,新的 figure 標(biāo)記是一種更專業(yè)的管理頁面上文字和圖像的方式。當(dāng)然,可以用樣式表來控制文字和圖像,但使用HTML5內(nèi)置的這個(gè)標(biāo)記更適合。
7. 新的 audio 和 video 標(biāo)記
新的audio 和 video 標(biāo)記可能是HTML5中增加的最有用處的兩個(gè)東西了。正如標(biāo)記名稱,它們是用來嵌入音頻和視頻文件的。
除此之外還有一些新的多媒體的標(biāo)記和屬性,例如track,它是用來提供跟蹤視頻的文字信息的。有了這些標(biāo)記,HTML5使Web2.0特征變得越來越友好。問題在于,在HTML5還未被廣泛的接受之前,Web2.0還是老的Web2.0。
8. 全新的表單設(shè)計(jì)
新的 form 和 forminput 標(biāo)記對原有的表單元素進(jìn)行的全新的修改,它們有很多的新屬性(以及一些修改)。如果經(jīng)常的開發(fā)表單,應(yīng)該花時(shí)間更詳細(xì)的研究一下。
9. 不再使用 b 和 font 標(biāo)記
這是一個(gè)讓我不太理解的改動。不認(rèn)為去除 b 和 font標(biāo)記會帶來多大的好處。官方的指導(dǎo)說這些標(biāo)記可以通過CCS來做更好的處理,但這樣一來,為了在文章一兩個(gè)地方出現(xiàn)的這種標(biāo)記,就需要在獨(dú)立的css和文本兩個(gè)地方來實(shí)現(xiàn)這一的功能,豈不笨拙。也許我們以后會習(xí)慣這種方法。
10. 不再使用 frame, center, big 標(biāo)記
事實(shí)上,我已經(jīng)記不清曾經(jīng)何時(shí)用過這些標(biāo)記了,所以,我并不為去除這些標(biāo)記感到悲哀。相同的原因,有更好的標(biāo)記能實(shí)現(xiàn)它們的功能——這很好,任何作廢的標(biāo)記從標(biāo)準(zhǔn)中剔除都是受歡迎的。
這10個(gè)HTML5和HTML4之間的不同只是整個(gè)新的規(guī)范中的一小部分。除了這些主要的變動外,我還可以略提一下一些次要的改動,比如修改了ol 標(biāo)記的屬性,讓它能夠倒排序,對u標(biāo)記也做了修改。
所有這些次要的改動數(shù)量眾多。而且新的修改也在不斷的增加,因此,如果想實(shí)時(shí)跟蹤最新的動向,需要經(jīng)常的查看w3.org的HTML4 和 HTML5之間的不同這個(gè)頁面。如果很心急,想在工作中使用這些新的標(biāo)記和屬性,最好只是做實(shí)驗(yàn),原因已經(jīng)說的很清楚了,這些新標(biāo)記和新屬性在將來也許會有很大的改變,所以,不斷的更新的代碼,它們很可能會過期失效。
盡管如今大多數(shù)流行的瀏覽器的最新版都支持HTML5,但有些新的(或修改的)標(biāo)記和屬性它們并不支持,所以網(wǎng)頁在用戶的屏幕上有可能前后顯示的不一致。耐心等待,等待HTML5真正可以實(shí)用時(shí)候。目前還不是時(shí)候。
當(dāng)前名稱:html5和html4的區(qū)別,html5和html401的區(qū)別
標(biāo)題URL:http://chinadenli.net/article15/dsejhdi.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)網(wǎng)站建設(shè)、定制網(wǎng)站、微信小程序、網(wǎng)站維護(hù)、品牌網(wǎng)站制作、網(wǎng)站策劃
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)