HTML4和HTML5的10個主要不同

来源:http://www.cnblogs.com/shouce/archive/2016/06/06/5562680.html
-Advertisement-
Play Games

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


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真正可以實用時候。目前還不是時候。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 如果我們需要向組件傳遞參數,可以使用 this.props 對象,實例如下: <body> <div id="example"></div> <script type="text/babel"> var HelloMessage = React.createClass({ render: funct ...
  • javascript之基本包裝類型 學習要點: 基本包裝類型概述 Boolean類型 Number類型 String類型 一、基本包裝類型概述 為了便於操作基本類型值,提供了3種特殊的引用類型:Boolean,Number和String。 二、Boolean類型 new Boolean(value) ...
  • 至今HTML5中國已經為大家分享過幾百種基於 CSS3 的Loading載入動畫,效果酷炫代碼簡潔,非常值得學習借鑒;今天就先給大家分享兩個常用的CSS3的Loading的案例。 第一種效果: HTML部分 CSS3部分 第二種效果: HTML部分 CSS3部分 上面這兩個都是大家常用的載入效果,下 ...
  • 對象是js中的一種基本的數據類型,除了可以給自身附屬性外,javascript對象還可以從一個稱為原型的對象繼承屬性。這種“原型式繼承”是javascript的核心特征。 在javascript中,創建一個對象通常可以有三個方法,對象直接量,關鍵字new和Object.create()函數。接下來會 ...
  • 1.escape() 不能直接用於URL編碼,它的真正作用是返回一個字元的Unicode編碼值。比如“春節”的返回結果是%u6625%u8282,escape()不對"+"編碼主要用於漢子編碼,現在已經不提倡使用了。 2.encodeURI()是javascript中真正用來對URL編碼的函數。編碼 ...
  • Node.js是一個基於Chrome JavaScript運行時建立的平臺,小巧方便搭建。運行的埠可以在瀏覽器上運行,顯示效果,但每次用瀏覽器也挺麻煩,我們這裡講的是在sublime text2中配置,是的js在sublimetext2中運行,再也不用切換到瀏覽器了。 1.首先安裝node.js, ...
  • ...
  • 下拉框二級聯動效果在日常應用場景中經常會碰到,尤其是涉及地區、品種等有多級選項時。例如:常見的省市聯動下拉框,在選擇省份時,城市列表也會更隨改變。 思路: 1,所謂聯動效果,是指出發父級的數據變化時,會影響到關聯性子級數據元素的變化。 下麵是造的省市的數據: var linkDatas = { pr ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...