移植游戏平台

書名： Adobe Dreamweaver CS5 網(wǎng)頁設(shè)計與制作技能基礎(chǔ)教程
作者名：易連雙趙林
本章字數(shù)： 2807字
更新時間： 2020-04-22 16:19:55

3.3 HTML 5簡介

HTML 5是HTML下一個主要修訂版本，現(xiàn)在仍處于發(fā)展階段。從廣義上來說，HTML 5是指包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。和以前的版本不同，HTML 5并非僅限于表示W(wǎng)eb內(nèi)容，它的新使命是將Web帶入一個成熟的應(yīng)用平臺。

3.3.1 HTML 5的語法變化

在HTML 5中，語法發(fā)生了很大的變化。但是，HTML 5的“語法變化”和其他編程語言的語法變化意義有所不同。在以前的HTML中，遵循規(guī)范實現(xiàn)的Web瀏覽器幾乎沒有。HTML原本是通過SGML(Standard Generalized Markup Language）語言來規(guī)定語法的。但是由于SGML的語法非常復(fù)雜，文檔結(jié)構(gòu)解析程序的開發(fā)也比較難，多數(shù)Web瀏覽器不作為SGML解析器運行。因此，HTML規(guī)范中雖然要求“應(yīng)遵循SGML的語法”，但實際情況卻是HTML執(zhí)行時在各瀏覽器之間并沒有一個統(tǒng)一的標(biāo)準(zhǔn)。

在HTML 5中，提高Web瀏覽器間的兼容性是它要實現(xiàn)的重大目標(biāo)。要確保兼容性，必須消除規(guī)范與實現(xiàn)的背離。因此，HTML 5需要重新定義新的HTML語法，即實現(xiàn)規(guī)范向?qū)崿F(xiàn)靠攏。

由于文檔結(jié)構(gòu)解析的算法也有著詳細的記載，使得Web瀏覽器廠商可以專注于遵循規(guī)范去進行實現(xiàn)工作。在新版本的FireFox和WebKit（Nightly Builder版）中，已經(jīng)內(nèi)置了遵循HTML 5規(guī)范的解析器。IE (Internet Explorer)和Opera也為了保證兼容性更好地實現(xiàn)而緊鑼密鼓地努力著。

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

1．內(nèi)容類型(Content Type)

HTML 5的文件擴展符與內(nèi)容類型保持不變。也就是說，擴展名仍然為“.html”或“.htm”，內(nèi)容類型(Content Type)仍然為“text/html”。

2．DOCTYPE聲明

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

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

在HTML 5中，可以不使用版本聲明，聲明文檔將會適用于所有版本的HTML。HTML 5中的DOCTYPE聲明方法（不區(qū)分大小寫）如下。

    <!DOCTYPE html>

另外，當(dāng)使用工具時，也可以在DOCTYPE聲明方式中加入SYSTEM識別符，聲明方法如下面的代碼所示。

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

技巧

在HTML 5中，DOCTYPE聲明可以不區(qū)分大小寫，并且引號不區(qū)分單引號還是雙引號。

3．字符編碼的設(shè)置

在HTML 5中，字符編碼的設(shè)置方法也有些新的變化。在以往設(shè)置HTML文件的字符編碼時，要用到如下<meta>元素。

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

在HTML 5中，可以使用<meta>元素的新屬性charset來設(shè)置字符編碼，如下面的代碼所示。

    <meta charset="UTF-8">

以上兩種方法都有效。因此也可以繼續(xù)使用以往的設(shè)置方法（通過content屬性來設(shè)置）。但要注意不能同時使用。

3.3.3 HTML 5中的新增元素

在HTML 5中，新增加了以下一些元素，其中包括section、article、aside、header、hgroup、footer、nav、figure、video、audio、embed、mark、progress、meter、time、wbr、canvas、command、details、datalist等，下面詳細介紹這些元素。

1．section元素

section元素表示頁面中如章節(jié)、頁眉、頁腳或頁面中其他部分的一個內(nèi)容區(qū)塊。

    語法格式：<section>...</section>
    示例：<section> 歡迎學(xué)習(xí)使用HTLM5 </section>

2．a(chǎn)rticle元素

article元素表示頁面中的一塊與上下文不相關(guān)的獨立內(nèi)容，例如，博客中的一篇文章或報紙中的一篇文章。

    語法格式：<article>...</article>
    示例：<article>HTLM5華麗蛻變</article>

3．a(chǎn)side元素

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

    語法格式：<aside>...</aside>
    示例：< aside>HTML5將開啟一個新的時代</aside >

4．header元素

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

    語法格式：<header>...</header>
    示例：<header> HTML5應(yīng)用與開發(fā)指南</header>

5．hgroup元素

hgroup元素用于組合整個頁面或頁面中一個內(nèi)容區(qū)塊的標(biāo)題。

    語法格式：<hgroup>...</hgroup>
    示例：< hgroup >系統(tǒng)功能管理</hgroup >

6．footer元素

footer元素表示整個頁面或頁面中一個內(nèi)容區(qū)塊的腳注。

    語法格式：<footer></footer>
    示例：
    < footer>李若<br />
        135*******1<br />
        2012-2-7
    </ footer >

7．nav元素

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

    語法格式：<nav></nav>

8．figure元素

figure元素表示一段獨立的流內(nèi)容，一般表示文檔主體流內(nèi)容中的一個獨立單元。

示例：

    <figure >
    <figcaption>HTML5</figcaption>
    <p>HTML5是當(dāng)今最流行的網(wǎng)絡(luò)應(yīng)用技術(shù)之一</p>
    </figure>

9．video元素

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

示例：

    <video src= "movie.ogv" , controls= "controls" >video元素應(yīng)用示例</video>

10.audio元素

在HTML 5中，audio元素用于定義音頻，例如音樂或其他音頻流。

    示例：<audio src= "someaudio.wav" >audio元素應(yīng)用示例</audio>

11.embed元素

embed元素用來插入各種多媒體，其格式可以是Midi、Wav、AIFF、AU和MP3等。

    示例：<embed src= "horse.wav"/>

12.mark元素

mark元素主要用來在視覺上向用戶呈現(xiàn)那些需要突出顯示或高亮顯示的文字。

    語法格式：<mark></mark>
    示例：<mark>HTML5技術(shù)的應(yīng)用</mark>

13.progress元素

progress元素表示運行中的進程，可以使用progress元素來顯示JavaScript中耗費時間函數(shù)的進程。

    語法格式：<progress></progress>

14.meter元素

meter元素表示度量衡。僅用于已知最大值和最小值的度量。

    語法格式：<meter></meter>

15.time元素

time元素表示日期或時間，也可以同時表示兩者。

    語法格式：<time></time>

16.wbr元素

wbr元素表示軟換行。wbr元素與br元素的區(qū)別是，br元素表示此處必須換行；而wbr元素則表示瀏覽器窗口或父級元素的寬度足夠?qū)挄r(沒必要換行時)，不進行換行，而當(dāng)寬度不夠時，主動在此處進行換行。wbr元素對字符型的語言作用很大，但是對于中文卻沒多大用處。

示例：

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

17.canvas元素

canvas元素用于表示圖形，例如，圖表和其他圖像。這個元素本身沒有行為，僅提供一塊畫布，但它把一個繪圖API展現(xiàn)給客戶端JavaScript，以使腳本能夠把想繪制的圖像繪制到畫布上。

示例：

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

18.command元素

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

    示例：<command onclick=cut()"label="cut">

19.details元素

details元素通常與summary元素配合使用，表示用戶要求得到并且可以得到的細節(jié)信息。summary元素提供標(biāo)題或圖例。標(biāo)題是可見的，用戶點擊標(biāo)題時，會顯示出細節(jié)信息。summary元素是details元素的第一個子元素。

    語法格式：<details> </details>
    示例：
    <details>
    <summary>HTML 5應(yīng)用實例</summary>
    本節(jié)將教您如何學(xué)習(xí)和使用HTML5
    </details>

20.datalist元素

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

    語法格式：<datalist></datalist>

除了以上這些之外，還有datagrid、keygen、output、source、menu等元素，這里就不再一一介紹了，有興趣的朋友可以購買HTML5專業(yè)書籍進行學(xué)習(xí)。

3.3.4 HTML 5中新增的屬性元素

在HTML 5中還新增加了很多的屬性，下面簡單介紹一些新增的屬性。

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

在HTML5中，新增的與表單相關(guān)的元素如下所示。

（1）autofocus屬性，該屬性可以用在input(type=text)、select、textarea與button元素當(dāng)中。autofocus屬性可以讓元素在打開畫面時自動獲得焦點。

（2）placeholder屬性，該屬性可以用在input元素(type=text)和textarea元素當(dāng)中，使用該屬性會對用戶的輸入進行提示，通常用于提示用戶可以輸入的內(nèi)容。

（3）form屬性，該屬性用在input、output、select、textarea、button和rieldset元素當(dāng)中。

（4）required屬性，該屬性用在input元素(type=text)和textarea元素當(dāng)中。該屬性表示在用戶提交的時候進行檢查，檢查該元素內(nèi)一定要有輸入內(nèi)容。

（5）在input元素與button元素中增加了新屬性formaction、formenctype、formmethod、formnovalidate和formtarget，這些屬性可以重載form元素的action、enctype、method、novalidate和target屬性。

（6）在input元素、button元素和form元素中增加了novalidate屬性，該屬性可以取消提交時進行的有關(guān)檢查，表單可以被無條件地提交。

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

在HTML5中，新增的與鏈接相關(guān)的屬性如下所示。

（1）在a與area元素中增加了media屬性，該屬性規(guī)定了目標(biāo)URL是什么類型的媒介進行優(yōu)化的。

（2）在area元素中增加了hreflang屬性與rel屬性，以保持與a元素、link元素的一致。

（3）在link元素中增加了sizes屬性。該屬性用于指定關(guān)聯(lián)圖標(biāo)(icon元素)的大小，通常可以與icon元素結(jié)合使用。

（4）在base元素中增加了target屬性，主要目的是保持與a元素的一致性。

3．其他屬性

（1）在meta元素中增加了charset屬性，該屬性為文檔的字符編碼的指定提供了一種良好的方式。

（2）在meta元素中增加了type和label兩個屬性。label屬性為菜單定義一個可見的標(biāo)注，type屬性使菜單可以以上下文菜單、工具條與列表菜單3種形式出現(xiàn)。

（3）在style元素中增加了scoped屬性，用于規(guī)定樣式的作用范圍。

（4）在script元素中增加了async屬性，該屬性用于定義腳本是否異步執(zhí)行。

為方便讀者學(xué)習(xí)，特將HTML的標(biāo)記及其含義制作成表格，如表3-1所示。

表3-1 HTML標(biāo)記及其功能描述

續(xù)表

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

Adobe Dreamweaver CS5 網(wǎng)頁設(shè)計與制作技能基礎(chǔ)教程

3.3 HTML 5簡介

3.3.1 HTML 5的語法變化

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

3.3.3 HTML 5中的新增元素

3.3.4 HTML 5中新增的屬性元素