Html5與Html4的區別


語法的改變

內容類型
HTML5 的文件擴展符與內容類型保持不變。擴展符仍然為“.html”或“.htm”,內容類型(ContentType)仍然為“text/html”。
DOCTYPE聲明
DOCTYPE 聲明是 HTML 文件中必不可少的,它位於文件第一行。在 XHTML 1.0 Transitional 中,它的聲明方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

在 HTML5 中,刻意不使用版本聲明,一份文檔將會適用於所有版本的 HTML。HTML5 中的 DOCTYPE 聲明方法(不區分大小寫)如下:
<!DOCTYPE html>
另外,當使用工具時,也可以在 DOCTYPE 聲明方式中加入 SYSTEM 識別符,聲明方法如下面的代碼所示:
<!DOCTYPE HTML SYSTEM "about:legacy-compat">
在 HTML5 中像這樣的 DOCTYPE 聲明是允許的(不區分大小寫,引號不區分是單引號還是雙引號)。

指定字符編碼
在 HTML4 中,使用 meta 標簽的形式指定文件中的字符編碼,如下所示:
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" >
在 HTML5 中,可以使用對 <meta> 標簽直接追加 charset 屬性的方式來指定字符編碼,如下所示:
<meta charset="UTF-8">
兩種方法都有效,可以繼續使用前面那種方式(通過 content 屬性來指定),但是不能同時混合使用兩種方式,在以前的 HTML 代碼中可能會存在下面代碼所示的標記方式,但在 HTML5 中,這種字符編碼方式將被認為是錯誤的,這一點請注意:
<meta charset="UTF-8" http-equiv="Content-Type" content="text/html;charset=UTF-8">
從 HTML5 開始,對於文件的字符編碼推薦使用 UTF-8。

可以省略標記的元素
在 HTML5 中,標簽的標記分為“不允許寫結束標記”、“可以省略結束標記”和“開始標記和結束標記全部可以省略”三種類型。讓我們來針對這三類情況列舉一個標簽清單,其中包括 HTML5 中的新標簽。

不允許寫結束標記的標簽有:
area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。
可以省略結束標記的標簽有:
li、dt、dd、p、rt、rp、op、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。
可以省略全部標記的標簽有:
html、head、body、colgroup、tbody。

“不允許寫結束標記的標簽”是指,不允許使用開始標記與結束標記將標簽括起來的形式,只允許使用“<標簽/>”的形式進行書寫。例如“<br>...</br>”的書寫方式是錯誤的,正確的書寫方式為“<br/>”。當然,HTML5之前的版本中<br>這種寫法可以被沿用。

“可以省略全部標記的標簽”是指,該標簽可以完全被省略。請注意,即使標記被省略了,該標簽還是以隱式的方式存在的。例如將body標簽省略不寫時,但它在文檔結構中還是存在的,可以使用document.body進行訪問。

具有boolean值的屬性
對於具有boolean值的屬性,例如 disabled 與 readonly 等,當只寫屬性而不指定屬性值時,表示屬性值為true;如果想要將屬性值設為flase,可以不使用該屬性。另外,要想將屬性值設為true時,也可以將屬性名設定為屬值,或將空字符串設定為屬性值。屬性值的設定方法可以參考下面的示例:

<!--只寫屬性不寫屬性值代表屬性為true--> <input type="checkbox" checked> <!--不寫屬性代表屬性為false--> <input type="checkbox"> <!--屬性值=屬性名,代表屬性為true--> <input type="checkbox" checked="checked"> <!--屬性值=空字符串,代表屬性為true--> <input type="checkbox" checked="">

省略引號
在之前的 HTML 版本中,大家已經知道,指定屬性值的時候,屬性值兩邊既可以用雙引號,也可以用單引號。HTML5 在此基礎上做了一些改進,當屬性值不包括空字符串、“<”、“>”、"="、單引號、雙引號等字符時,屬性值兩邊的引號可以省略。如下面的代碼所示:

<!--請注意type的屬性值兩邊的引號--> <input type="text"> <input type='text'> <input type=text>

示例:

<!DOCTYPE html> <meta charset="UTF-8"> <title>HTML5 標記示例</title> <p>這段代碼是根據HTML5語法 <br/>編寫出來的。

1、該代碼完全是用 HTML5 寫成的;
2、省略了<html><head><body>等標簽;
3、DOCTYPE申明使用了 HTML5 支持的簡潔申明方式;
4、用<meta>標簽的 charset 屬性指定字符編碼;
5、省略了<p>標簽的結束標記;
6、使用<標簽/>的方式來結束<title>標簽以及<br>標簽。

新增和廢除的元素(標簽)

新增的結構標簽

在 HTML5 中,新增了以下與結構相關的標簽:
section標簽
section 標簽表示頁面中的一個內容區塊,比如章節、頁眉、頁腳或頁面中的其他部分。
它可以與h1h2h3h4h5h6等標簽結合起來使用,標識文檔結構。
HTML5 中代碼示例:
<section>....</section>
HTML4 中代碼示例:
<div>...</div>

article標簽
article 標簽表示頁面中的一塊與上下文不相關的獨立內容,比如博客中的一篇文章或報紙中的一篇文章。
HTML5 中代碼示例:
<article>...</article>
HTML4 中代碼示例:
<div>...</div>

aside標簽
aside 標簽表示 article 標簽的內容之外、並與article 標簽的內容相關的輔助信息。
HTML5 中代碼示例:
<aside>...</aside>
HTML4 中代碼示例:
<div>...</div>

header標簽
header 標簽表示頁面中的一個內容區塊或整個頁面的標題。
HTML5 中代碼示例:
<header>...</header>
HTML4 中代碼示例:
<div>...</div>

hgroup標簽
hgroup 標簽用於對整個頁面或頁面中一個內容區塊的標題進行組合。
HTML5 中代碼示例:
<hgroup>...</hgroup>
HTML4 中代碼示例:
<div>...</div>

footer標簽
footer 標簽表示整個頁面或頁面中一個內容區塊的腳注。一般來說,它會包含創作者的姓名、創作日期以及創作者的版權或聯系信息。
HTML5 中代碼示例:
<footer>...</footer>
HTML4 中代碼示例:
<div>...</div>

nav標簽
nav標簽表示頁面中導航鏈接的部分。
HTML5 中代碼示例:
<nav>...</nav>
HTML4 中代碼示例:
<ul>...</ul>

figure標簽
figure 標簽表示一段獨立的流內容,一般表示文檔主體流內容中的一個獨立單元。使用 figcaption 標簽為 figure 標簽組添加標題。
HTML5 中代碼示例:

<figure> <figcaption>新增的結構標簽</figcaption> <p>在 HTML5 中,新增了以下與結構相關的標簽:</p> </figure>

HTML4 中代碼示例:

<dl> <h1>新增的結構標簽</h1> <p>在 HTML5 中,新增了以下與結構相關的標簽:</p> </dl>
新增的其他標簽

除了結構標簽外,在 HTML5 中,還新增了以下標簽:
video標簽
video 標簽定義視頻,比如電影片段或其他視頻流。
HTML5 中代碼示例:
<video src="movie.ogg" controls="controls">video標簽</video>

HTML4 中代碼示例:

<object type="video/ogg" data="movie.ogv"> <param name="src" value="movie.ogv"> </object>

audio標簽
audio 標簽定義音頻,比如音樂或其他音頻流。
HTML5 中代碼示例:
<audio src="someaudio.wav">audio標簽</audio>

HTML4 中代碼示例:

<object type="application/ogg" data="someaudio.wav"> <param name="src" value="someaudio.wav"> </object>

canvas標簽
canvas 標簽表示圖形,比如圖表和其他圖像。這個標簽本身沒有行為,僅提供一塊畫布,但它把一個繪圖 API 展現給客戶端JavaScript,以使腳本能夠把想繪制的東西繪制到這塊畫布上。
HTML5 中代碼示例:
<canvas id="myCanvas" width="200" height="200"></canvas>

HTML4 中代碼示例:
<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>

embed標簽
embed 標簽用來插入各種多媒體,格式可以是 midi、wav、aiff、au、mp3等。
HTML5 中代碼示例:
<embed src="horse.wav" />

HTML4 中代碼示例:
<object data="flash.swf" type="application/x-shockwave-flash"></object>

mark標簽
mark 標簽主要用來在視覺上向用戶呈現那些需要突出顯示或高亮顯示的文字。mark 標簽的一個比較典型的應用就是在搜索結果中向用戶高亮顯示搜索關鍵詞。
HTML5 中代碼示例:
<mark>...</mark>

HTML4 中代碼示例:
<span>...</span>

progress標簽
progress 標簽表示一個進度條,可以使用 progress 標簽來顯示那些執行耗時較長的操作,提升用戶體驗。
HTML5 中代碼示例:
<progress value="22" max="100"></progress>

HTML4 中代碼示例:
這是 HTML5 中新增功能,故無法用 HTML4 代碼來實現,只能通過 javascript 來控制。

time標簽
time 標簽表示日期或時間,也可以同時表示兩者。
HTML5 中代碼示例:
<time>...</time>

HTML4 中代碼示例:
<span>...</span>

ruby標簽
ruby 標簽表示 ruby 注釋(中文注音或字符)。
HTML5 中代碼示例:
<ruby>漢<rt><rp>(</rp>魏<rp>)</rp></rt></ruby>

HTML4 中代碼示例:
這是 HTML5 中新增的功能。

rt標簽
rt 標簽表示字符(中文注音或字符)的解釋或發音。
HTML5 中代碼示例:
<ruby>漢<rt>魏</rt></ruby>

HTML4 中代碼示例:
這是 HTML5 中新增的功能。

rp標簽
rp 標簽在 ruby 注釋中使用,以定義不支持 ruby 標簽的瀏覽器所顯示的內容。
HTML5 中代碼示例:
<ruby>漢<rt><rp>(</rp>魏<rp>)</rp></rt></ruby>

HTML4 中代碼示例:
這是 HTML5 中新增的功能。

wbr標簽
wbr 標簽表示軟換行。wbr 標簽與 br 標簽的區別是:br 標簽表示此處必須換行;而 wbr 標簽的意思是瀏覽器窗口或父級標簽的寬度足夠寬時(沒必要換行時),不進行換行,而當寬度不夠時,主動在此處進行換行。wbr 標簽好像對字符型的語言作用挺大,但是對於中文,貌似沒多大用處。
HTML5 中代碼示例:
<p>To learn AJAX, you must be fami<wbr>liar with the XMLHttp<wbr>Request Object.</p>

HTML4 中代碼示例:
這是 HTML5 中新增的功能。

command標簽
command 標簽表示命令按鈕,比如單選按鈕、復選框或按鈕。
HTML5 中代碼示例:
<command onclick="cut()" label="cut">

HTML4 中代碼示例:
這是 HTML5 中新增的功能。

details標簽
details 標簽表示用戶要求得到並且可以得到的細節信息。它可以與 summary 標簽配合使用。summary 標簽提供標題或圖例。標題是可見的,用戶點擊標題時,會顯示出細節信息。summary 標簽應該是 details 標簽的第一個子標簽。

HTML5 中代碼示例:

<details> <summary>HTML5</summary> This document teaches you everything you have to learn about HTML 5. </details>

HTML4 中代碼示例:
這是 HTML5 中新增的功能。

datalist標簽
datalist 標簽表示可選數據的列表,與 input 標簽配合使用,可以制作出輸入值的下拉列表。
HTML5 中代碼示例:
<datalist></datalist>

HTML4 中代碼示例:
這是 HTML5 中新增的功能。

datagrid標簽
datagrid 標簽表示可選數據的列表,它以樹形列表的形式來顯示。
HTML5 中代碼示例:
<datagrid></datagrid>

HTML4 中代碼示例:
這是 HTML5 中新增的功能。

keygen標簽
keygen 標簽表示生成密鑰。
HTML5 中代碼示例:
<keygen>

HTML4 中代碼示例:
這是 HTML5 中新增的功能。

output標簽
output 標簽表示不同類型的輸出,比如腳本的輸出。

HTML5 中代碼示例:
<output></output>

HTML4 中代碼示例:
<span></span>

source標簽
source 標簽為媒介標簽(比如<video>和<audio>)定義媒介資源。
HTML5 中代碼示例:
<source>

HTML4 中代碼示例:
<param>

menu標簽
menu 標簽表示菜單列表。當希望列出表單控件時使用該標簽。

HTML5 中代碼示例:

<menu> <li><input type="checkbox" />Red</li> <li><input type="checkbox" />Blue</li> </menu>

HTML4 中代碼示例:
在 HTML4 中 menu 標簽不被推薦使用。

新增的input標簽的類型

HTML5 中新增了很多 input 標簽的類型,現列舉如下:
email
email 類型表示必須輸入 E-mail 地址的文本輸入框。

HTML5 中代碼示例:
<input type="email" />

HTML4 中代碼示例:
這是 HTML5 中新增的功能。

url
url 類型表示必須輸入URL地址的文本輸入框。
HTML5 中代碼示例:
<input type="url" />

HTML4 中代碼示例:
這是 HTML5 中新增的功能。

number
number 類型表示必須輸入數值的文本輸入框。

HTML5 中代碼示例:
<input type="number" />

HTML4 中代碼示例:
這是 HTML5 中新增的功能。

range
range 類型表示必須輸入一定范圍內數字值的文本輸入框。

HTML5 中代碼示例:
<input type="range" />

HTML4 中代碼示例:
這是 HTML5 中新增的功能。

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

HTML5 中代碼示例:

<input type="date" />----選取日、月、年 <input type="month" />----選取月、年 <input type="week" />----選取周和年 <input type="time" />----選取時間(小時和分鍾) <input type="datetime" />----選取時間、日、月、年(UTC時間) <input type="datetime-local" />----選取時間、日、月、年(本地時間)

HTML4 中代碼示例:
這是 HTML5 中新增的功能。

廢除的標簽

由於各種原因,在 HTML5 中廢除了很多標簽,簡單介紹如下。

1、能使用CSS替代的標簽

對於 basefont、big、center、font、s、strike、tt、u這些標簽,由於它們的功能都是純粹為畫面展示服務的,在 HTML5 中提倡把畫面展示型功能放在 CSS 樣式表中統一編輯,所以將這些標簽廢除了,並使用添加或編輯 CSS 樣式表的方式進行替代。

2、不再使用frame框架

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

3、只有部分瀏覽器支持的標簽

對於 applet、bgsound、blink、marquee 等標簽,由於只有部分瀏覽器支持這些標簽,特別是 bgsound 標簽以及 marquee 標簽,只被 IE 所支持,所以在 HTML5 中被廢除。其中 applet 標簽可由 embed 標簽或 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. contentEditable

主要功能:是否允許用戶編輯元素內容。bool值。
例:
<p contenteditable="true">這是一段可編輯的段落。請試着編輯該文本。</p>
語法:
<element contenteditable="value">
屬性值:

描述
true 規定可以編輯元素內容。
false 規定無法編輯元素內容。
classname 繼承父元素的 contenteditable 屬性。

2. designMode

主要功能:指定整個頁面是否允許用戶編輯元素內容。bool值。

3. hidden

主要功能:隱藏頁面元素。bool值。

4. spellcheck

主要功能:規定是否對元素內容進行拼寫檢查。
可對以下文本進行拼寫檢查:
類型為 text 的 input 元素中的值(非密碼)
textarea 元素中的值
可編輯元素中的值

5. tabindex

主要功能:規定當使用 "tab" 鍵進行導航時元素的順序。

以下元素支持tableindex屬性:<a>, <area>, <button>, <input>, <object>, <select> 以及 <textarea>

<!DOCTYPE HTML> <html> <body> <a href="http://layjoy.xyz/" tabindex="2">xyz</a><br /> <a href="http://layjoy.space/" tabindex="1">space</a><br /> <a href="http://layjoy.com/" tabindex="3">com</a> </body> </html>

6.draggable

主要功能:規定元素是否可拖動。

提示:鏈接和圖像默認是可拖動的。

<p draggable="true">This is a draggable paragraph.</p>
屬性值:

描述
true 規定元素是可拖動的。
false 規定元素是不可拖動的。
auto 使用瀏覽器的默認特性


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM