官术网_书友最值得收藏!

第2章 HTML 5與HTML 4的區(qū)別

HTML 5以HTML 4為基礎(chǔ),對(duì)HTML 4進(jìn)行了大量修改。本章從總體上概要介紹HTML 5對(duì)HTML 4進(jìn)行了哪些修改,HTML 5與HTML 4之間比較大的區(qū)別是什么地方。

學(xué)習(xí)內(nèi)容:

?掌握HTML 5與HTML 4在基本語(yǔ)法上的區(qū)別,這個(gè)基本語(yǔ)法區(qū)別包括DOCTYPE聲明、內(nèi)容類型(ContentType)、字符編碼的指定方法、元素標(biāo)記的省略、具有布爾值的屬性、引號(hào)的省略等幾個(gè)方面。

?了解在HTML 5中新增的元素,刪除了哪些HTML 4中的元素,以及為什么要?jiǎng)h除這些元素,用什么元素或方法來(lái)取代這些被刪除的元素。

?了解在HTML 5中新增的屬性,刪除了哪些HTML 4中的屬性,在HTML 5中用什么方法來(lái)取代這些被刪除的屬性。

?掌握什么是全局屬性,本章主要介紹幾個(gè)常用全局屬性,如contentEditable屬性、designMode屬性、hidden屬性、spellcheck屬性以及tabindex屬性。

2.1 語(yǔ)法的改變

2.1.1 HTML 5的語(yǔ)法變化

與HTML 4相比,HTML 5在語(yǔ)法上發(fā)生了很大的變化。可能很多人會(huì)因?yàn)椤爸暗腍TML已經(jīng)相當(dāng)普及”,“如果改變基礎(chǔ)語(yǔ)法,會(huì)產(chǎn)生什么影響”等想法而感到不安。

但是,HTML 5中的語(yǔ)法變化,與其他開(kāi)發(fā)語(yǔ)言中的語(yǔ)法變化在根本意義上有所不同。它的變化,正是因?yàn)樵贖TML 5之前幾乎沒(méi)有符合標(biāo)準(zhǔn)規(guī)范的Web瀏覽器導(dǎo)致的。

HTML的語(yǔ)法是在SGML(Standard Generalized Markup Language)語(yǔ)言的基礎(chǔ)上建立起來(lái)的。但是SGML語(yǔ)法非常復(fù)雜,要開(kāi)發(fā)能夠解析SGML語(yǔ)法的程序也很不容易,因此很多瀏覽器都不包含SGML的分析器。因此,雖然HTML基本上遵從SGML的語(yǔ)法,但是對(duì)于HTML的執(zhí)行在各瀏覽器之間并沒(méi)有一個(gè)統(tǒng)一的標(biāo)準(zhǔn)。

在這種情況下,各瀏覽器之間的互兼容性和互操作性在很大程度上取決于網(wǎng)站或網(wǎng)絡(luò)應(yīng)用程序的開(kāi)發(fā)者在開(kāi)發(fā)上所做的共同努力,而瀏覽器本身始終是存在缺陷的。

如上所述,在HTML 5中提高Web瀏覽器之間的兼容性是它的一個(gè)很大的目標(biāo),為了確保兼容性,就要有一個(gè)統(tǒng)一的標(biāo)準(zhǔn)。因此,在HTML 5中,圍繞著這個(gè)Web標(biāo)準(zhǔn),重新定義了一套在現(xiàn)有HTML的基礎(chǔ)上修改而來(lái)的語(yǔ)法,以便各瀏覽器在運(yùn)行HTML的時(shí)候能夠符合一個(gè)通用標(biāo)準(zhǔn)。

因?yàn)殛P(guān)于HTML 5語(yǔ)法解析的算法也都提供了詳細(xì)的記載,所以各Web瀏覽器的供應(yīng)商可以把HTML 5分析器集中封裝在自己的瀏覽器中。最新的Firefox(默認(rèn)為4.0以后的版本)與WebKit瀏覽器引擎中都迅速地封裝了供HTML 5使用的分析器,IE(Internet Explorer)與Opera也在努力加快對(duì)HTML 5的支持——提高瀏覽器的兼容性指日可待。

接下來(lái),讓我們具體看一下在HTML 5中對(duì)語(yǔ)法進(jìn)行了哪些改變。

2.1.2 HTML 5中的標(biāo)記方法

首先看一下HTML 5中的標(biāo)記方法。

1. 內(nèi)容類型(ContentType)

首先,HTML 5的文件擴(kuò)展符與內(nèi)容類型保持不變。也就是說(shuō),擴(kuò)展符仍然為“.html”或“.htm”,內(nèi)容類型(ContentType)仍然為“text/html”。

2. DOCTYPE聲明

DOCTYPE聲明是HTML文件中必不可少的,它位于文件第一行。在HTML 4中,它的聲明方法如下:

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

在HTML 5中,刻意不使用版本聲明,一份文檔將會(huì)適用所有版本的HTML。HTML 5中的DOCTYPE聲明方法(不區(qū)分大小寫(xiě))如下:

    <!DOCTYPE html>

另外,當(dāng)使用工具時(shí),也可以在DOCTYPE聲明方式中加入SYSTEM識(shí)別符,聲明方法如下:

    <!DOCTYPE HTML SYSTEM "about:legacy-compat">

在HTML 5中像這樣的DOCTYPE聲明方式是允許的(不區(qū)分大小寫(xiě),引號(hào)不區(qū)分是單引號(hào)還是雙引號(hào))。

3. 指定字符編碼

在HTML 4中,使用meta元素的形式指定文件中的字符編碼,如下所示:

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

在HTML 5中,可以使用對(duì)<meta>元素直接追加charset屬性的方式來(lái)指定字符編碼,如下所示:

    <meta charset="UTF-8">

兩種方法都有效,可以繼續(xù)使用前面一種方式(通過(guò)content元素的屬性來(lái)指定),但是不能同時(shí)混合使用兩種方式。在以前的網(wǎng)站代碼中可能會(huì)存在下面代碼所示的標(biāo)記方式,但在HTML 5中,這種字符編碼方式將被認(rèn)為是錯(cuò)誤的,這一點(diǎn)請(qǐng)注意。

    <meta charset="UTF-8" http-equiv="Content-Type"
    content="text/html;charset=UTF-8">

從HTML 5開(kāi)始,對(duì)于文件的字符編碼推薦使用UTF-8。

2.1.3 HTML 5確保的兼容性

HTML 5的語(yǔ)法是為了保證與之前的HTML語(yǔ)法也能夠達(dá)到最大程度的兼容而設(shè)計(jì)的。例如,符合“沒(méi)有<p>的結(jié)束標(biāo)記”的HTML代碼隨處可見(jiàn),HTML 5中并沒(méi)有把這種情況作為錯(cuò)誤來(lái)處理,而是允許存在這種情況,但明確規(guī)定了這種情況應(yīng)該怎么處理。

那么,針對(duì)這個(gè)問(wèn)題,我們從元素標(biāo)記的省略、具有boolean值的屬性、引號(hào)的省略這幾方面來(lái)詳細(xì)看一下在HTML 5中是如何確保與之前版本的HTML實(shí)現(xiàn)兼容的。

1.可以省略標(biāo)記的元素

在HTML 5中,元素的標(biāo)記可以省略。具體來(lái)說(shuō),分為“不允許寫(xiě)結(jié)束標(biāo)記”、“可以省略結(jié)束標(biāo)記”和“開(kāi)始標(biāo)記和結(jié)束標(biāo)記全部可以省略”三種類型。

接著,我們針對(duì)這三類情況列舉一個(gè)元素清單,其中包括本書(shū)到現(xiàn)在為止還沒(méi)有介紹的HTML 5中的新元素(關(guān)于這些新元素,2.2節(jié)將進(jìn)行介紹)。

?不允許寫(xiě)結(jié)束標(biāo)記的元素有:area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。

?可以省略結(jié)束標(biāo)記的元素有:li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。

?可以省略全部標(biāo)記的元素有:html、head、body、colgroup、tbody。

說(shuō)明

“不允許寫(xiě)結(jié)束標(biāo)記的元素”是指不允許使用開(kāi)始標(biāo)記與結(jié)束標(biāo)記將元素括起來(lái)的形式,只允許使用“<元素/>”的形式進(jìn)行書(shū)寫(xiě)。例如“<br>...</br>”的書(shū)寫(xiě)方式是錯(cuò)誤的,只允許“<br/>”的書(shū)寫(xiě)形式。當(dāng)然,HTML 5之前的<br>這種寫(xiě)法可以被沿用。

“可以省略全部標(biāo)記的元素”是指該元素可以完全被省略。注意,即使標(biāo)記被省略了,該元素還是以隱式的方式存在的。例如省略不寫(xiě)body元素時(shí),在文檔結(jié)構(gòu)中它還是存在的,可以使用document.body訪問(wèn)。

2. 具有boolean值的屬性

對(duì)于具有boolean值的屬性,例如disabled與readonly等,當(dāng)只寫(xiě)屬性而不指定屬性值時(shí),表示屬性值為true,如果想要將屬性值設(shè)為false,則可以不使用該屬性。另外,要想將屬性值設(shè)定為true時(shí),也可以將屬性名設(shè)定為屬性值,或?qū)⒖兆址O(shè)定為屬性值。

屬性值的設(shè)定方法可以參考下面的代碼示例:

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

3. 省略引號(hào)

大家已經(jīng)知道,在指定屬性值的時(shí)候,屬性值兩邊加引號(hào)時(shí)既可以用雙引號(hào),也可以用單引號(hào)。

HTML 5在此基礎(chǔ)上做了一些改進(jìn),當(dāng)屬性值不包括空字符串、“<”、“>”、“=”、單引號(hào)、雙引號(hào)等字符時(shí),屬性值兩邊的引號(hào)可以省略。如下面的代碼所示:

    <!-- 請(qǐng)注意type的屬性值兩邊的引號(hào) -->
    <input type="text">
    <input type='text'>
    <input type=text>

2.1.4 標(biāo)記示例

現(xiàn)在,我們通過(guò)前面學(xué)到的HTML 5的語(yǔ)法知識(shí)來(lái)看一個(gè)關(guān)于HTML 5標(biāo)記的示例。

代碼清單2-1完全是用HTML 5寫(xiě)成的。其中省略了<html>、<head>、<body>等元素。可以通過(guò)這個(gè)示例復(fù)習(xí)一下HTML 5的DOCTYPE聲明、用<meta>元素的charset屬性指定字符編碼、<p>元素的結(jié)束標(biāo)記的省略、使用<元素/>的方式來(lái)結(jié)束<meta>元素,以及

<br>元素等本節(jié)中所介紹的知識(shí)要點(diǎn)。

代碼清單2-1 HTML 5標(biāo)記示例

    <!DOCTYPE html>
    <meta charset="UTF-8">
    <title>HTML 5標(biāo)記示例</title>
    <p>這段代碼是根據(jù)HTML 5語(yǔ)法
    <br/>編寫(xiě)出來(lái)的。

這段代碼在Firefox 4瀏覽器中的運(yùn)行結(jié)果如圖2-1所示,另外,本書(shū)中如果沒(méi)有特別說(shuō)明使用什么瀏覽器,則使用的都是Firefox 4瀏覽器。

圖2-1 HTML 5標(biāo)記示例

2.2 新增的元素和廢除的元素

本節(jié)將詳細(xì)介紹HTML 5中新增和廢除了哪些元素其他資料介紹的新增元素可能會(huì)比這里要多,這是因?yàn)镠TML 5在最新發(fā)布的版本中又把這些本來(lái)想新增的元素刪除了。

2.2.1 新增的結(jié)構(gòu)元素

在HTML 5中,新增以下與結(jié)構(gòu)相關(guān)的元素。

(1)section元素

section元素表示頁(yè)面中的一個(gè)內(nèi)容區(qū)塊,比如章節(jié)、頁(yè)眉、頁(yè)腳或頁(yè)面中的其他部分。它可以與h1、h2、h3、h4、h5、h6等元素結(jié)合使用,標(biāo)示文檔結(jié)構(gòu)。

HTML 5中的代碼示例:

    <section>…</section>

HTML 4中的代碼示例:

    <div>…</div>

(2)article元素

article元素表示頁(yè)面中的一塊與上下文不相關(guān)的獨(dú)立內(nèi)容,譬如博客中的一篇文章或報(bào)紙中的一篇文章。

HTML 5中的代碼示例:

    <article>…</article>

HTML 4中的代碼示例:

    <div>…</div>

(3)aside元素

aside元素表示article元素的內(nèi)容之外的、與article元素的內(nèi)容相關(guān)的輔助信息。

HTML 5中的代碼示例:

    <aside>…</aside>

HTML 4中的代碼示例:

    <div>…</div>

(4)header元素

header元素表示頁(yè)面中一個(gè)內(nèi)容區(qū)塊或整個(gè)頁(yè)面的標(biāo)題。

HTML 5中的代碼示例:

    <header>…</header>

HTML 4中的代碼示例:

    <div>…</div>

(5)footer元素

footer元素表示整個(gè)頁(yè)面或頁(yè)面中一個(gè)內(nèi)容區(qū)塊的腳注。一般來(lái)說(shuō),它會(huì)包含創(chuàng)作者的姓名、創(chuàng)作日期以及創(chuàng)作者聯(lián)系信息。

HTML 5中的代碼示例:

    <footer></footer>

HTML 4中的代碼示例:

    <div>…</div>

(6)nav元素

nav元素表示頁(yè)面中導(dǎo)航鏈接的部分。

HTML 5中的代碼示例:

    <nav></nav>

HTML 4中的代碼示例:

    <ul></ul>

(7)figure元素

figure元素表示一段獨(dú)立的流內(nèi)容,一般表示文檔主體流內(nèi)容中的一個(gè)獨(dú)立單元。使用figcaption元素為figure元素組添加標(biāo)題。

HTML 5中的代碼示例:

    <figure>
    <figcaption>PRC</figcaption>
    <p>The People's Republic of China was born in 1949...</p>
    </figure>

HTML 4中的代碼示例:

    <dl>
    <h1>PRC</h1>
    <p>The People's Republic of China was born in 1949...</p>
    </dl>

(8)main元素

main元素表示網(wǎng)頁(yè)中的主要內(nèi)容。主內(nèi)容區(qū)域意指與網(wǎng)頁(yè)標(biāo)題或應(yīng)用程序中本頁(yè)面主要功能直接相關(guān)或進(jìn)行擴(kuò)展的內(nèi)容。

HTML 5中的代碼示例:

    <main>…</main>

HTML 4中的代碼示例:

    <div>…</div>

2.2.2 新增的其他元素

除了結(jié)構(gòu)元素外,在HTML 5中,還新增以下元素。

(1)video元素

video元素用于定義視頻,比如電影片段或其他視頻流。

HTML 5中的代碼示例:

    <video src="movie.ogg" controls="controls">video元素</video>

HTML 4中的代碼示例:

    <o(jì)bject type="video/ogg" data="movie.ogv">
            <param name="src" value="movie.ogv">
    </object>

(2)audio元素

audio元素用于定義音頻,比如音樂(lè)或其他音頻流。

HTML 5中的代碼示例:

    <audio src="someaudio.wav">audio元素</audio>

HTML 4中的代碼示例:

    <o(jì)bject type="application/ogg" data="someaudio.wav">
        <param name="src" value="someaudio.wav">
    </object>

(3)embed元素

embed元素用來(lái)插入各種多媒體,格式可以是 Midi、Wav、AIFF、AU、MP3等。

HTML 5中的代碼示例:

    <embed src="horse.wav" />

HTML 4中的代碼示例:

    <o(jì)bject data="flash.swf"  type="application/x-shockwave-flash"></object>

(4)mark元素

mark元素主要用來(lái)在視覺(jué)上向用戶呈現(xiàn)那些需要突出顯示或高亮顯示的文字。mark元素的一個(gè)比較典型的應(yīng)用就是在搜索結(jié)果中向用戶高亮顯示搜索關(guān)鍵詞。

HTML 5中的代碼示例:

    <mark></mark>

HTML 4中的代碼示例:

    <span></span>

(5)progress元素

progress元素表示運(yùn)行中的進(jìn)程,可以使用 progress元素來(lái)顯示 JavaScript 中耗費(fèi)時(shí)間的函數(shù)的進(jìn)程。

HTML 5中的代碼示例:

    <progress></progress>

這是HTML 5中的新增功能,故無(wú)法用HTML 4代碼來(lái)實(shí)現(xiàn)。

(6)meter元素

meter元素表示度量衡,僅用于已知最大值和最小值的度量。必須定義度量的范圍,既可以在元素的文本中,也可以在 min/max 屬性中定義。

HTML 5中的代碼示例:

    <meter></meter>

這是HTML 5中的新增功能,故無(wú)法用HTML 4代碼來(lái)實(shí)現(xiàn)。

(7)time元素

time元素用于表示日期或時(shí)間,也可以同時(shí)表示兩者。

HTML 5中的代碼示例:

    <time></time>

HTML 4中的代碼示例:

    <span></span>

(8)ruby元素

ruby元素表示 ruby 注釋(中文注音或字符)。

HTML 5中的代碼示例:

    <ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>

這也是HTML 5中的新增功能。

(9)rt元素

rt元素表示字符(中文注音或字符)的解釋或發(fā)音。

HTML 5中的代碼示例:

    <ruby>漢 <rt> ㄏㄢˋ </rt></ruby>

這是HTML 5中的新增功能。

(10)rp元素

rp元素在 ruby 注釋中使用,以定義不支持 ruby 元素的瀏覽器所顯示的內(nèi)容。

HTML 5中的代碼示例:

    <ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>

這是HTML 5中的新增功能。

(11)wbr元素

wbr元素表示軟換行。wbr元素與br元素的區(qū)別是:br元素是此處必須換行,而wbr元素意思就是瀏覽器窗口或父級(jí)元素的寬度足夠?qū)挄r(shí)(沒(méi)必要換行時(shí)),不進(jìn)行換行,而當(dāng)寬度不夠時(shí),主動(dòng)在此處進(jìn)行換行。wbr元素好像對(duì)字符型的語(yǔ)言用處比較大,但是對(duì)于中文,貌似沒(méi)多大用處。

HTML 5中的代碼示例:

    <p> To learn AJAX, you must be fami<wbr>liar with the XMLHttp<wbr>
    Request Object. </p>

這是HTML 5中的新增功能。

(12)canvas元素

canvas元素表示圖形,比如圖表和其他圖像。這個(gè)元素本身沒(méi)有行為,僅提供一塊畫(huà)布,但把一個(gè)繪圖API展現(xiàn)給客戶端JavaScript,以使腳本能夠把想繪制的東西繪制到這塊畫(huà)布上。

HTML 5中的代碼示例:

    <canvas id="myCanvas" width="200" height="200"></canvas>

HTML 4中的代碼示例:

    <o(jì)bject data="inc/hdr.svg" type="image/svg+xml" width="200" height="200">
    </object>

(13)command元素

command元素表示命令按鈕,比如單選按鈕、復(fù)選框或按鈕。

HTML 5中的代碼示例:

    <command onclick=cut()" label="cut">

這是HTML 5中的新增功能。

(14)details元素

details元素表示用戶要求得到并且可以得到的細(xì)節(jié)信息。它可以與summary元素配合使用。summary元素提供標(biāo)題或圖例。標(biāo)題是可見(jiàn)的,用戶點(diǎn)擊標(biāo)題時(shí),會(huì)顯示細(xì)節(jié)信息。summary元素應(yīng)該是details元素的第一個(gè)子元素。

HTML 5中的代碼示例:

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

這是HTML 5中的新增功能。

(15)datalist元素

datalist元素表示可選數(shù)據(jù)的列表,與input元素配合使用,可以制作出輸入值的下拉列表。

HTML 5中的代碼示例:

    <datalist></datalist>

這是HTML 5中的新增功能。

(16)datagrid元素

datagrid元素表示可選數(shù)據(jù)的列表,它以樹(shù)形列表的形式顯示。

HTML 5中的代碼示例:

    <datagrid></datagrid>

這是HTML 5中的新增功能。

(17)keygen元素

keygen元素表示生成密鑰。

HTML 5中的代碼示例:

    <keygen>

這是HTML 5中的新增功能。

(18)output元素

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

HTML 5中的代碼示例:

    <o(jì)utput></output>

HTML 4中的代碼示例:

    <span></span>

(19)source元素

source元素為媒介元素(比如<video>和<audio>)定義媒介資源。

HTML 5中的代碼示例:

    <source>

HTML 4中的代碼示例:

    <param>

(20)menu元素

menu元素表示菜單列表。當(dāng)希望列出表單控件時(shí)使用該標(biāo)簽。

HTML 5中的代碼示例:

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

在HTML 4中,menu元素不被推薦使用。

(21)dialog元素

dialog元素表示對(duì)話框。

HTML 5中的代碼示例:

    <dialog></dialog>

2.2.3 新增的input元素的類型

HTML 5中新增很多input元素的類型,現(xiàn)列舉如下:

?email:email類型表示必須輸入e-mail地址的文本輸入框。

?url:url類型表示必須輸入U(xiǎn)RL地址的文本輸入框。

?number:number類型表示必須輸入數(shù)值的文本輸入框。

?range:range類型表示必須輸入一定范圍內(nèi)數(shù)字值的文本輸入框。

?Date Pickers:HTML 5擁有多個(gè)可供選取日期和時(shí)間的新型輸入文本框。

● date:選取日、月、年。

● month:選取月、年。

● week:選取周和年。

● time:選取時(shí)間(小時(shí)和分鐘)。

● datetime:選取時(shí)間、日、月、年(UTC時(shí)間)。

● datetime-local:選取時(shí)間、日、月、年(本地時(shí)間)。

2.2.4 廢除的元素

由于各種原因,在HTML 5中廢除了很多元素,簡(jiǎn)單介紹如下。

1. 能使用CSS替代的元素

對(duì)于basefont、big、center、font、s、strike、tt、u等元素,由于它們的功能都是純粹為畫(huà)面展示服務(wù)的,而HTML 5中提倡把畫(huà)面展示性功能統(tǒng)一放在CSS樣式表中統(tǒng)一編輯,所以將這些元素廢除,使用編輯CSS、添加CSS樣式表的方式進(jìn)行替代。其中font元素允許由“所見(jiàn)即所得”的編輯器進(jìn)行插入,s元素、strike元素可以由del元素進(jìn)行替代,tt元素可以由CSS的font-family屬性進(jìn)行替代。

2. 不再使用frame框架

對(duì)于frameset元素、frame元素與noframes元素,由于frame框架對(duì)網(wǎng)頁(yè)可用性存在負(fù)面影響,在HTML 5中已不支持frame框架,只支持iframe框架,或者由服務(wù)器方創(chuàng)建的由多個(gè)頁(yè)面組成的復(fù)合頁(yè)面的形式,同時(shí)將這三個(gè)元素廢除。

3. 只有部分瀏覽器支持的元素

對(duì)于applet、bgsound、blink、marquee等元素,由于只有部分瀏覽器支持這些元素,特別是bgsound元素以及marquee元素,只被Internet Explorer所支持,所以在HTML 5中被廢除。其中applet元素可由embed元素或object元素進(jìn)行替代,bgsound元素可由audio元素進(jìn)行替代,marquee可以由JavaScript編程的方式所替代。

4. 其他被廢除的元素

其他被廢除元素還有:

?廢除rb元素,使用ruby元素替代。

?廢除acronym元素,使用abbr元素替代。

?廢除dir元素,使用ul元素替代。

?廢除isindex元素,使用form元素與input元素相結(jié)合的方式替代。

?廢除listing元素,使用pre元素替代。

?廢除xmp元素,使用code元素替代。

?廢除nextid元素,使用GUIDS替代。

?廢除plaintext元素,使用"text/plian" MIME類型替代。

2.3 新增的屬性和廢除的屬性

在HTML 5中,在增加和廢除很多元素的同時(shí),也增加和廢除了很多屬性,本節(jié)對(duì)于這些增加和廢除的屬性進(jìn)行簡(jiǎn)單介紹其他資料介紹的新增屬性可能會(huì)比本節(jié)要介紹的更多,這是因?yàn)镠TML 5在最新發(fā)布的版本中又把這些本來(lái)想新增的屬性刪除了。

2.3.1 新增的屬性

1. 表單相關(guān)的屬性

新增的與表單相關(guān)的元素如下:

?可以對(duì)input(type=text)、select、textarea與button元素指定autofocus屬性。它以指定屬性的方式讓元素在畫(huà)面打開(kāi)時(shí)自動(dòng)獲得焦點(diǎn)。

?可以對(duì)input元素(type=text)與textarea元素指定placeholder屬性,它會(huì)對(duì)用戶的輸入進(jìn)行提示,提示用戶可以輸入的內(nèi)容。

?可以對(duì)input、output、select、textarea、button與fieldset指定form屬性,聲明它屬于哪個(gè)表單,然后將其放置在頁(yè)面上任何位置,而不是表單之內(nèi)。

?可以對(duì)input元素(type=text)與textarea元素指定required屬性。該屬性表示在用戶提交的時(shí)候進(jìn)行檢查,檢查該元素內(nèi)一定要有輸入內(nèi)容。

?為input元素增加了幾個(gè)新的屬性:autocomplete、min、max、multiple、pattern與step。同時(shí)還有一個(gè)新的list元素與datalist元素配合使用。datalist元素與autocomlete屬性配合使用。multiple屬性允許在上傳文件時(shí)一次上傳多個(gè)文件。

?為input元素與button元素增加了新屬性formaction、formenctype、formmethod、formnovalidate與formtarget,它們可以重載form元素的action、enctype、method、novalidate與target屬性。為fieldset元素增加了disabled屬性,用于把它的子元素設(shè)為disabled(無(wú)效)狀態(tài)。

?為input元素、button元素、form元素增加了novalidate屬性,該屬性可以取消提交時(shí)進(jìn)行的有關(guān)檢查,表單可以被無(wú)條件提交。

?為所有可使用標(biāo)簽(label元素)的表單元素(包括非隱藏的input元素(type屬性值不等于hidden)、button元素、select元素、textarea元素、meter元素、output元素、progress元素以及keygen元素)定義一個(gè)labels屬性,屬性值為一個(gè)NodeList對(duì)象,代表該元素所綁定的標(biāo)簽元素所構(gòu)成的集合。

?可以在標(biāo)簽(label元素)內(nèi)部放置一個(gè)表單元素,并且通過(guò)該標(biāo)簽的control屬性訪問(wèn)該表單元素。

?針對(duì)input元素與textarea元素,在HTML 5中增加SelectionDirection屬性。當(dāng)用戶在這兩個(gè)元素中用鼠標(biāo)選取部分文字時(shí),可以使用該屬性來(lái)獲取選取方向。當(dāng)用戶正向選取文字時(shí),該屬性值為“forward”,當(dāng)用戶反向選取文字時(shí),該屬性值為“backward”。當(dāng)用戶沒(méi)有選取任何文字時(shí),該屬性值為“forward”。

?對(duì)復(fù)選框(checkbox元素)添加indeterminate屬性,以說(shuō)明復(fù)選框處于“尚未明確是否選取”狀態(tài)。

?對(duì)類型為image的input元素添加用于指定圖片按鈕中圖片高度的height屬性與圖片寬度的width屬性。

?對(duì)textarea元素新增用于限定可輸入文字個(gè)數(shù)的maxlength屬性與用于指定表單提交時(shí)是否在文字換行處添加換行符的wrap屬性。

2. 鏈接相關(guān)的屬性

新增的與鏈接相關(guān)的屬性如下:

?為a與area元素增加了media屬性、download屬性以及ping屬性,其中media屬性規(guī)定目標(biāo)URL是為什么類型的媒介/設(shè)備進(jìn)行優(yōu)化的,download屬性用于讓用戶下載目標(biāo)鏈接所指向的資源,而不是直接打開(kāi)該目標(biāo)鏈接,這些屬性均只能在href屬性存在時(shí)使用。

?為area元素增加了href lang屬性與rel屬性,以保持與a元素、link元素的一致。

?為link元素增加了新屬性sizes。該屬性可以與icon元素結(jié)合使用(通過(guò)rel屬性),該屬性指定關(guān)聯(lián)圖標(biāo)(icon元素)的大小。

?為base元素增加了target屬性,主要目的是保持與a元素的一致性。

3. 其他屬性

除了上面介紹的與表單和鏈接相關(guān)的屬性外,HTML 5還增加了下面的屬性:

?為ol元素增加start屬性與reversed屬性,其中start屬性定義列表的開(kāi)始編號(hào), reversed屬性指定列表倒序顯示。

?為meta元素增加charset屬性,因?yàn)檫@個(gè)屬性已經(jīng)得到廣泛支持,而且為文檔的字符編碼的指定提供了一種比較良好的方式。

?為menu元素增加了兩個(gè)新的屬性——type與label。label屬性為菜單定義一個(gè)可見(jiàn)的標(biāo)注,type屬性讓菜單可以以上下文菜單、工具條、與列表菜單三種形式出現(xiàn)。

?為style元素增加scoped屬性,用來(lái)規(guī)定樣式的作用范圍,譬如只對(duì)頁(yè)面上某個(gè)樹(shù)起作用。

?為script元素增加async屬性,它定義腳本是否異步執(zhí)行。

?為html元素增加屬性manifest,開(kāi)發(fā)離線Web應(yīng)用程序時(shí)它與API結(jié)合使用,定義一個(gè)URL,在這個(gè)URL上描述文檔的緩存信息。

?為iframe元素增加三個(gè)屬性——sandbox、seamless與srcdoc,用來(lái)提高頁(yè)面安全性,防止不信任的Web頁(yè)面執(zhí)行某些操作。

2.3.2 廢除的屬性

HTML 4中的一些屬性在HTML 5中不再使用,而是采用其他屬性或其他方案進(jìn)行替代,具體如表2-1所示。

表2-1 HTML 5中廢除的屬性

2.4 全局屬性

在HTML 5中,新增了一個(gè)“全局屬性”的概念。所謂全局屬性,是指可以對(duì)任何元素都使用的屬性,本節(jié)將詳細(xì)介紹幾種常用的全局屬性。

2.4.1 contentEditable屬性

contentEditable是由微軟開(kāi)發(fā)的,被其他瀏覽器反編譯并投入應(yīng)用的一個(gè)全局屬性。該屬性的主要功能是允許用戶編輯元素中的內(nèi)容,所以該元素必須是可以獲得鼠標(biāo)焦點(diǎn)的元素,而且在點(diǎn)擊鼠標(biāo)后要向用戶提供一個(gè)插入符號(hào),提示用戶該元素中的內(nèi)容允許編輯。contentEditable屬性是一個(gè)布爾值屬性,可以被指定為true或false。

除此之外,該屬性還有個(gè)隱藏的inherit(繼承)狀態(tài),當(dāng)屬性值為true時(shí),元素被指定為允許編輯;當(dāng)屬性值為false時(shí),元素被指定為不允許編輯;當(dāng)未指定true或false時(shí),則由inherit狀態(tài)來(lái)決定,如果元素的父元素是可編輯的,則該元素就是可編輯的。

另外,除了contentEditable屬性外,元素還具有一個(gè)isContentEditable屬性,當(dāng)元素可編輯時(shí),該屬性值為true;當(dāng)元素不可編輯時(shí),該屬性值為false。

代碼清單2-2中給出了一個(gè)使用contentEditable屬性的示例,當(dāng)列表元素被加上contentEditable屬性后,該元素就變成可編輯的了,讀者可自行在瀏覽器中對(duì)該示例進(jìn)行試驗(yàn)。

代碼清單2-2 contentEditable屬性示例

    <!DOCTYPE html>
    <head>
    <meta charset="UTF-8">
    <title>conentEditalbe屬性示例</title>
    </head>
    <h2>可編輯列表</h2>
    <ul contentEditable="true">
    <li>列表元素1</li>
    <li>列表元素2</li>
    <li>列表元素3</li>
    </ul>

這段代碼運(yùn)行后的結(jié)果如圖2-2所示。

圖2-2 可編輯列表示例

在編輯完元素中的內(nèi)容后,要想保存其中內(nèi)容,只能把該元素的innerHTML發(fā)送到服務(wù)器端進(jìn)行保存,因?yàn)楦淖冊(cè)貎?nèi)容后該元素的innerHTML內(nèi)容也會(huì)隨之改變,目前還沒(méi)有特別的API來(lái)保存編輯后元素中的內(nèi)容。

最后,在這里列舉一下支持contentEditable屬性的元素:defaults、A、ABBR、ACRONYM、ADDRESS、B、BDO、BIG、BLOCKQUOTE、BODY、BUTTON、CENTER、CITE、CODE、CUSTOM、DD、DEL、DFN、DIR、DIV、DL、DT、EM、FIELDSET、FONT、FORM、hn、I、INPUT type=button、 INPUT type=password、INPUT type=radio、INPUT type=reset、INPUT type=submit、INPUT type=text、INS、ISINDEX、KBD、LABEL。

2.4.2 designMode屬性

designMode屬性用來(lái)指定整個(gè)頁(yè)面是否可編輯,當(dāng)頁(yè)面可編輯時(shí),頁(yè)面中任何支持上文所述的contentEditable屬性的元素都變成了可編輯狀態(tài)。designMode屬性只能在JavaScript腳本中被編輯修改。該屬性有兩個(gè)值——“on”與“off”。當(dāng)該屬性值被指定為“on”時(shí),頁(yè)面可編輯;當(dāng)該屬性值被指定為“off”時(shí),頁(yè)面不可編輯。使用JavaScript腳本來(lái)指定designMode屬性的方法如下所示:

    document.designMode="on"

針對(duì)designMode屬性,各瀏覽器的支持情況也各不相同:

?IE 8:出于安全考慮,不允許使用designMode屬性讓頁(yè)面進(jìn)入編輯狀態(tài)。

?IE 9:允許使用designMode屬性讓頁(yè)面進(jìn)入編輯狀態(tài)。

?Chrome 3和Safari:使用內(nèi)嵌frame的方式,該內(nèi)嵌frame是可編輯的。

?Firefox和Opera:允許使用designMode屬性讓頁(yè)面進(jìn)入編輯狀態(tài)。

2.4.3 hidden屬性

在HTML 5中,所有的元素都允許使用一個(gè)hidden屬性。該屬性類似于input元素中的hidden元素,功能是通知瀏覽器不渲染該元素,使該元素處于不可見(jiàn)狀態(tài)。但是元素中的內(nèi)容還是被瀏覽器創(chuàng)建的,也就是說(shuō)頁(yè)面裝載后允許使用JavaScript腳本將該屬性取消,取消后該元素變?yōu)榭梢?jiàn)狀態(tài),同時(shí)元素中的內(nèi)容也即時(shí)顯示出來(lái)。hidden屬性是一個(gè)布爾值的屬性,當(dāng)設(shè)為true時(shí),元素處于不可見(jiàn)狀態(tài);當(dāng)設(shè)為false時(shí),元素處于可見(jiàn)狀態(tài)。

2.4.4 spellcheck屬性

spellcheck屬性是HTML 5針對(duì)input元素(type=text)與textarea這兩個(gè)文本輸入框提供的一個(gè)新的屬性,它的功能對(duì)用戶輸入的文本內(nèi)容進(jìn)行拼寫(xiě)和語(yǔ)法檢查。spellcheck屬性是一個(gè)布爾值的屬性,具有true或false兩種值。但是它在書(shū)寫(xiě)時(shí)有一個(gè)特殊的地方,就是必須明確聲明屬性值為true或false,書(shū)寫(xiě)方法如下所示:

    <!—以下兩種書(shū)寫(xiě)方法正確-->
    <textarea spellcheck="true" >
    <input type=text spellcheck=false>
    <!—以下書(shū)寫(xiě)方法為錯(cuò)誤-->
    <textarea spellcheck >

需要注意的是,如果元素的readOnly屬性或disabled屬性設(shè)為true,則不執(zhí)行拼寫(xiě)檢查。

目前除了IE之外,F(xiàn)irefox、Chrome、Safari、Opera等瀏覽器都對(duì)該屬性提供了支持。

圖2-3為Opera瀏覽器中spellcheck屬性的表現(xiàn)形式。

圖2-3 Operal瀏覽器中spellcheck的屬性示例

2.4.5 tabindex屬性

tabindex是開(kāi)發(fā)中的一個(gè)基本概念,當(dāng)不斷敲擊Tab鍵讓窗口或頁(yè)面中的控件獲得焦點(diǎn),當(dāng)對(duì)窗口或頁(yè)面中的所有控件進(jìn)行遍歷的時(shí)候,每一個(gè)控件的tabindex表示該控件是第幾個(gè)被訪問(wèn)到的。

過(guò)去這個(gè)屬性在編輯網(wǎng)頁(yè)時(shí)是非常有用的,但如今控件的遍歷順序是由元素在頁(yè)面上所處位置決定的,所以就不再需要了。

但是tabindex還有另外一個(gè)作用,在默認(rèn)情況下,只有鏈接元素與表單元素可以通過(guò)按鍵獲得焦點(diǎn)。如果對(duì)其他元素使用tabindex屬性后,也能讓該元素獲得焦點(diǎn),那么當(dāng)腳本中執(zhí)行focus()語(yǔ)句的時(shí)候,就可以讓該元素獲得焦點(diǎn)。但這樣做會(huì)產(chǎn)生一個(gè)副作用:該元素也可以通過(guò)按Tab鍵獲得焦點(diǎn),而這有時(shí)可能不是開(kāi)發(fā)者想要的結(jié)果。

把元素的tabindex值設(shè)為負(fù)數(shù)(通常為-1)后就可以解決這個(gè)問(wèn)題。tabindex值為負(fù)數(shù)后,仍然可以通過(guò)編程的方式讓元素獲得焦點(diǎn),但按下Tab鍵時(shí)該元素就不能獲得焦點(diǎn),這在復(fù)雜的頁(yè)面中或復(fù)雜的Web應(yīng)用程序中是十分有用的。在HTML 4中,-1是一個(gè)無(wú)用的屬性值,但到了HTML 5中,通過(guò)巧妙運(yùn)用可以讓該屬性值獲得極大應(yīng)用。

2.5 新增的事件

HTML 5中對(duì)頁(yè)面、表單、鍵盤(pán)元素新增了各種事件,如表2-2所示(在HTML 5的新增API中使用到的部分事件將在介紹這些API時(shí)介紹)。

表2-2 HTML 5中對(duì)頁(yè)面、表單、鍵盤(pán)元素新增的各種事件

主站蜘蛛池模板: 秀山| 迭部县| 武汉市| 泰来县| 弋阳县| 江油市| 昌乐县| 浙江省| 化隆| 化隆| 香格里拉县| 黄浦区| 清镇市| 古蔺县| 平乡县| 吴旗县| 丰城市| 呼伦贝尔市| 定兴县| 化州市| 邳州市| 隆昌县| 稷山县| 西丰县| 岫岩| 禹州市| 青神县| 民县| 澳门| 临泽县| 常山县| 汉寿县| 剑阁县| 罗江县| 达孜县| 刚察县| 常州市| 甘洛县| 靖州| 台东市| 井陉县|