HTML4和HTML5的區別[轉]

HTML5是最新的HTML標準,或遲或早,所有的web程序員都會發現需要使用到這個最新的標準,而且,很多人都會感覺到,重新開發一個HTML5的網站,要比把一個網站從HTML4遷移到HTML5上容易的多,這是因為這兩個版本之間有很大不同之處。

事實上,HTML5并沒有對HTML4做什么重大的修改,它們很多東西都是相似的。

  可是,其中有一些很重要的區別你需要知道。下面列出的就是一些HTML4和HTML5之間主要的不同之處(并不是全部,全部列出來是不可能的):

1. HTML5標準還在制定中
  這頭一個不同之處顯而易見,但非常重要,我需要先從它開始。也許你已經注意到了關于HTML5很酷的言論到處都是,但是事實情況是,HTML5是一個還未完成的標準。HTML4已經有10歲了,但它仍是當前正式的標準的事實沒有改變。

  另一方面,HTML5仍處在早期階段,以后的修改會不斷的出現。你必須考慮到這些,因為你在網站上使用的這些新增加或修改的網頁元素會每年都出 現一些變化,你需要不停的更新升級你的網站,這可不是你希望的。這就是目前為止,你最好在產品里使用HTML4,只在實驗里使用HTML5的原因。

2. 簡化的語法
  更簡單的doctype聲明是HTML5里眾多新特征之一。現在你只需要寫<!doctype html>,這就行了。HTML5的語法兼容HTML4和XHTML1,但不兼容SGML。

3. 一個替代Flash的新 <canvas> 標記
  對于Web用戶來說,Flash既是一個驚喜,也是一種痛苦。有很多的Web開發人員對HTML5對Flash產生的威脅很不滿。但對于那些忍 受著要花幾年時間加載和運行的臃腫的Flash視頻的人來說,用新的 <canvas> 標記生成視頻的技術已經到來。

  目前, <canvas> 標記并不能提供所有的Flash具有的功能,但假以時日,Flash必將從web上淘汰。我們拭目以待,因為很多人還并不認同這種觀點。

4. 新的 <header> 和 <footer> 標記
  HTML5的設計是要更好的描繪網站的解剖結構。這就是為什么這些<header> 和<footer> 等新標記的出現,它們是專門為標志網站的這些部分設計的。

  在開發網站時,你不在需要用<div>標記來標注網頁的這些部分。

5. 新的 <section> 和 <article> 標記
  跟<header> 和 <footer>標記類似,HTML5中引入的新的<section> 和 <article> 標記可以讓開發人員更好的標注頁面上的這些區域。

  據推測,除了讓代碼更有組織外,它也能改善SEO效果,能讓搜索引擎更容易的分析你的頁面。

6. 新的 <menu> 和 <figure> 標記
  新的<menu>標記可以被用作普通的菜單,也可以用在工具條和右鍵菜單上,雖然這些東西在頁面上并不常用。

  類似的,新的 <figure> 標記是一種更專業的管理頁面上文字和圖像的方式。當然,你可以用樣式表來控制文字和圖像,但使用HTML5內置的這個標記更適合。

7. 新的 <audio> 和 <video> 標記
  新的<audio> 和 <video> 標記可能是HTML5中增加的最有用處的兩個東西了。正如標記名稱,它們是用來嵌入音頻和視頻文件的。

  除此之外還有一些新的多媒體的標記和屬性,例如<track>,它是用來提供跟蹤視頻的文字信息的。有了這些標記,HTML5使Web2.0特征變得越來越友好。問題在于,在HTML5還未被廣泛的接受之前,Web2.0還是老的Web2.0。

8. 全新的表單設計
  新的 <form> 和 <forminput> 標記對原有的表單元素進行的全新的修改,它們有很多的新屬性(以及一些修改)。如果你經常的開發表單,你應該花時間更詳細的研究一下。

9. 不再使用 <b> 和 <font> 標記
  對我個人來說,這是一個讓我不太理解的改動。我并不認為去除 <b> 和 <font>標記會帶來多大的好處。我知道,官方的指導說這些標記可以通過CCS來做更好的處理,但這樣一來,為了在文章一兩個地方出現的這 種標記,你就需要在獨立的css和文本兩個地方來實現這一的功能,豈不笨拙。也許我們以后會習慣這種方法。

10. 不再使用 <frame>, <center>, <big> 標記
  事實上,我已經記不清曾經何時用過這些標記了,所以,我并不為去除這些標記感到悲哀。相同的原因,有更好的標記能實現它們的功能——這很好,任何作廢的標記從標準中剔除都是受歡迎的。

  這10個HTML5和HTML4之間的不同只是整個新的規范中的一小部分。除了這些主要的變動外,我還可以略提一下一些次要的改動,比如修改了<ol> 標記的屬性,讓它能夠倒排序,對<u>標記也做了修改。

  所有這些次要的改動數量眾多。而且新的修改也在不斷的增加,因此,如果你想實時跟蹤最新的動向,你需要經常的查看w3.org的HTML4 和 HTML5之間的不同這個頁面。如果你很心急,想在你的工作中使用這些新的標記和屬性,我勸告你最好只是做實驗,原因已經說的很清楚了,這些新標記和新屬性在將來也許會有很大的改變,所以,除非你不斷的更新你的代碼,它們很可能會過期失效。

  盡管如今大多數流行的瀏覽器的最新版都支持HTML5,但有些新的(或修改的)標記和屬性它們并不支持,所以你的網頁在用戶的屏幕上有可能前后顯示的不一致。耐心等待,等待HTML5真正可以實用時候。目前還不是時候。

轉載:http://www.cnblogs.com/web100/archive/2012/07/27/html4-html5.html

轉載于:https://www.cnblogs.com/lifuyun/archive/2012/07/30/lifuyun2012073001.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/274702.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/274702.shtml
英文地址,請注明出處:http://en.pswp.cn/news/274702.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

vs2017字體最佳選擇_如何為下一個項目選擇最佳字體? 一個簡單的游戲

vs2017字體最佳選擇“If I have the right font, half my design battle is already won!”“如果我使用正確的字體&#xff0c;那么我的設計大戰已經贏了一半&#xff01;” In my first UX Design job, my AVP( Satish if you’re reading this, this one’s for you. ) onc…

淺談初中級前端學習方法~

大家好&#xff0c;我是若川。 常有小伙伴問我如何學習前端開發。今天就簡單談下學習方法&#xff0c;方法可能主要適用于初中級前端。回想我們高中學習&#xff0c;是不是都是"以課本為主&#xff0c;其他資料為輔"。而且課堂上記筆記&#xff0c;然后通過大量練習&…

HDU-水餃基情 二維樹狀數組

該題就是簡單的二維樹狀數組&#xff0c;保留一份棋盤的最新狀態即可&#xff0c;樹狀數組里面就只保留在原有基礎上增加或者減少的某一種餃子的數量。 代碼如下&#xff1a; #include <cstring> #include <cstdlib> #include <cstdio> using namespace std;…

ui設計中的版式設計_設計中的版式-第3部分

ui設計中的版式設計and how not to suck at it以及如何不吸吮它 This is the 3rd and last part of the series. Here we take all our learnings from Part 1(Click to read) & Part 2(Click to read) and put to good use. Lets begin!這是本系列的第三部分也是最后一部…

聽說你還在用開發者工具手動上傳小程序,快來試試 miniprogram-ci 提效摸魚

大家好&#xff0c;我是若川。持續組織了8個月源碼共讀活動&#xff0c;感興趣的可以 點此加我微信ruochuan12 參與&#xff0c;每周大家一起學習200行左右的源碼&#xff0c;共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。另外…

ucla ai_UCLA的可持續性:用戶體驗案例研究

ucla aiRole: UX Researcher / UX Designer / Critical-thinker角色&#xff1a; UX研究人員/ UX設計人員/批判性思維者 Scope: 4 weeks, March — March 2020范圍&#xff1a; 4周&#xff0c;2020年3月至2020年3月 What I Did: UX Research, Speculative Design, Product D…

推薦10個國外圖片素材網站

下面&#xff0c;為大家帶來的 10 個國外精選的墻紙網站。 NO.1 Social Wallpapering 給我帶來全新的體驗&#xff0c; Web2.0 一個熱門話題。可以讓我自由的評選自己喜歡的東西&#xff0c;投票、評論、沉淪等等&#xff0c;對于網站內喜歡的東西可以做出自己喜歡的方式。進入…

大三的小白同學是如何拿到字節offer的,經驗分享

這是來自大三邵小白同學的投稿。原文鏈接&#xff1a;https://juejin.cn/post/7092806181856657445很多時候我們容易羨慕別人成功了&#xff0c;卻往往沒有看到別人背后的努力。1前言大家好&#xff0c;我是邵小白&#xff0c;一個長沙某不知名雙非的大三學生。今年三月份來到杭…

UNIBO大學博物館網絡設計—品牌重塑和數字產品設計

Brief / Redesign the Visual Identity of the University of Bologna Museum Network (SMA) and apply the new designs to a Digital Product簡介/重新設計博洛尼亞大學博物館網絡(SMA)的視覺識別&#xff0c;并將新設計應用于數字產品 Period / Mar 2020 — June 2020期間/…

oracle中的sga和pga

oracle中的sga包含了幾個主要的部分 1.shared pool 共享池 2.database buffer cache 數據庫高速緩沖區 3.redo log buffers 重做日志緩沖區 4.large pool 大池 5.java pool java池 a.shared pool: oracle shared pool包括library cache(庫緩存)和dictionary cache(數據字典高速…

進來做幾道 JavaScript 基礎題找找自信?

大家好&#xff0c;我是若川。持續組織了8個月源碼共讀活動&#xff0c;感興趣的可以 點此加我微信ruochuan12 參與&#xff0c;每周大家一起學習200行左右的源碼&#xff0c;共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。另外…

人物肖像速寫_驕傲家庭:肖像項目

人物肖像速寫2020 has been a solemn, transformative year. Pride month takes place in the context of a groundswell up-rising against racism and police brutality and in the continued isolation of COVID-19.2020年是莊嚴&#xff0c;變革的一年。 驕傲月的發生是在反…

答讀者問:錢和成長,哪個更重要?

大家好&#xff0c;我是若川。持續組織了8個月源碼共讀活動&#xff0c;感興趣的可以 點此加我微信ruochuan12 參與&#xff0c;每周大家一起學習200行左右的源碼&#xff0c;共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。另外…

ui設計顏色的使用_UI設計中顏色使用的10條原則

ui設計顏色的使用重點 (Top highlight)1.顏色術語 (1. Color Terminology) Color terminology forms our foundation of color knowledge. Think of color terms like hue, tint, and shade as tools that we can employ to develop unique color palettes.顏色術語構成了我們顏…

Chrome插件:網易云音樂聽歌識曲

大家好&#xff0c;我是若川。持續組織了8個月源碼共讀活動&#xff0c;感興趣的可以 點此加我微信ruochuan12 參與&#xff0c;每周大家一起學習200行左右的源碼&#xff0c;共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。另外…

五大常用算法之四:回溯法

1、概念 回溯算法實際上一個類似枚舉的搜索嘗試過程&#xff0c;主要是在搜索嘗試過程中尋找問題的解&#xff0c;當發現已不滿足求解條件時&#xff0c;就“回溯”返回&#xff0c;嘗試別的路徑。 回溯法是一種選優搜索法&#xff0c;按選優條件向前搜索&#xff0c;以達到目標…

如何設置ad18捕捉圖標_圖標設計中的像素捕捉

如何設置ad18捕捉圖標More in the iconography series:? Foundations of Iconography? 7 Principles of Icon Design? 5 Ways to Create a Settings Icon? Icon Grids & Keylines Demystified? 3 Classic Icon FamiliesWe all want our designs to display sharp on a…

React Hooks 原理與最佳實踐

大家好&#xff0c;我是若川。持續組織了8個月源碼共讀活動&#xff0c;感興趣的可以 點此加我微信ruochuan12 參與&#xff0c;每周大家一起學習200行左右的源碼&#xff0c;共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》 包含20余篇源碼文章。歷史面試系列。另外…

BW:BW增量更新方法(假增量)

1 說說假增量 我們都知道&#xff0c;對于BW來說&#xff0c;很多ECC的標準數據源自帶了增量更新功能&#xff0c;每天各種憑證產生的增量數據會自動堆積到增量隊列里&#xff0c;然后BW端做一個增量信息包按天把這些增量抽取到數據倉庫里&#xff0c;非常輕松自然&#xff0c;…

插圖 引用 同一行兩個插圖_為什么插圖是產品的重要組成部分

插圖 引用 同一行兩個插圖“Hi, my name is Ludmila and I’m a UX/UI designer”“嗨&#xff0c;我叫Ludmila&#xff0c;我是UX / UI設計師” “Hi, Ludmila”“嗨&#xff0c;路德米拉” “Welcome”“歡迎” Not anonymously at all, I’ve been doing UX/UI design fo…