财神爷在哪里买

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

3.3 HTML 5簡介

HTML 5是HTML下一個主要修訂版本，現在仍處于發展階段。從廣義上來說，HTML 5是指包括HTML、CSS和JavaScript在內的一套技術組合。和以前的版本不同，HTML 5并非僅限于表示Web內容，它的新使命是將Web帶入一個成熟的應用平臺。

3.3.1 HTML 5的語法變化

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

在HTML 5中，提高Web瀏覽器間的兼容性是它要實現的重大目標。要確保兼容性，必須消除規范與實現的背離。因此，HTML 5需要重新定義新的HTML語法，即實現規范向實現靠攏。

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

3.3.2 HTML 5的標記方法

1．內容類型(Content Type)

HTML 5的文件擴展符與內容類型保持不變。也就是說，擴展名仍然為“.html”或“.htm”，內容類型(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聲明方法（不區分大小寫）如下。

    <!DOCTYPE html>

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

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

技巧

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

3．字符編碼的設置

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

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

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

    <meta charset="UTF-8">

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

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元素表示頁面中如章節、頁眉、頁腳或頁面中其他部分的一個內容區塊。

    語法格式：<section>...</section>
    示例：<section> 歡迎學習使用HTLM5 </section>

2．article元素

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

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

3．aside元素

aside元素表示article元素內容之外的，并且與article元素的內容相關的一些輔助信息。

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

4．header元素

header元素表示頁面中一個內容區塊或整個頁面的標題。

    語法格式：<header>...</header>
    示例：<header> HTML5應用與開發指南</header>

5．hgroup元素

hgroup元素用于組合整個頁面或頁面中一個內容區塊的標題。

    語法格式：<hgroup>...</hgroup>
    示例：< hgroup >系統功能管理</hgroup >

6．footer元素

footer元素表示整個頁面或頁面中一個內容區塊的腳注。

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

7．nav元素

nav元素用于表示頁面中導航鏈接的部分。

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

8．figure元素

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

示例：

    <figure >
    <figcaption>HTML5</figcaption>
    <p>HTML5是當今最流行的網絡應用技術之一</p>
    </figure>

9．video元素

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

示例：

    <video src= "movie.ogv" , controls= "controls" >video元素應用示例</video>

10.audio元素

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

    示例：<audio src= "someaudio.wav" >audio元素應用示例</audio>

11.embed元素

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

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

12.mark元素

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

    語法格式：<mark></mark>
    示例：<mark>HTML5技術的應用</mark>

13.progress元素

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

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

14.meter元素

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

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

15.time元素

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

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

16.wbr元素

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

示例：

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

17.canvas元素

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

示例：

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

18.command元素

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

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

19.details元素

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

    語法格式：<details> </details>
    示例：
    <details>
    <summary>HTML 5應用實例</summary>
    本節將教您如何學習和使用HTML5
    </details>

20.datalist元素

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

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

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

3.3.4 HTML 5中新增的屬性元素

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

1．表單相關的屬性

在HTML5中，新增的與表單相關的元素如下所示。

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

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

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

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

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

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

2．與鏈接相關的屬性

在HTML5中，新增的與鏈接相關的屬性如下所示。

（1）在a與area元素中增加了media屬性，該屬性規定了目標URL是什么類型的媒介進行優化的。

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

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

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

3．其他屬性

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

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

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

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

為方便讀者學習，特將HTML的標記及其含義制作成表格，如表3-1所示。

表3-1 HTML標記及其功能描述

續表

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

Adobe Dreamweaver CS5 網頁設計與制作技能基礎教程

3.3 HTML 5簡介

3.3.1 HTML 5的語法變化

3.3.2 HTML 5的標記方法

3.3.3 HTML 5中的新增元素

3.3.4 HTML 5中新增的屬性元素