1.2 HTML5概述

1.2.1 HTML5特點(diǎn)及語法介紹

HTML概述

1.HTML5特點(diǎn)

HTML的出現(xiàn)推動(dòng)了萬維網(wǎng)的快速發(fā)展，但是隨著互聯(lián)網(wǎng)應(yīng)用的不斷變化，HTML暴露出了種種弊端，不能再滿足未來網(wǎng)絡(luò)的需要。具體來講，HTML的缺點(diǎn)主要包含以下幾點(diǎn)：

●標(biāo)準(zhǔn)不統(tǒng)一，擴(kuò)展困難。

●標(biāo)記固定，語義性較差，對(duì)多媒體應(yīng)用不夠，對(duì)移動(dòng)設(shè)備支持力度不大，網(wǎng)頁布局不夠清晰明了。

為了徹底解決上述問題，2004年，W3C提出了HTML5方案。該方案表明它是HTML的下一個(gè)主要版本，于2008年1月正式公布第一份草案，并指出HTML5有兩大主要特點(diǎn)。

●強(qiáng)化了網(wǎng)頁的表現(xiàn)功能，對(duì)網(wǎng)頁中的音頻、視頻、動(dòng)畫等標(biāo)簽有了更多的支持。

●增加了網(wǎng)頁對(duì)移動(dòng)端的處理能力，對(duì)手機(jī)端的觸摸與移動(dòng)功能支持力度加大，并改善了本地?cái)?shù)據(jù)庫等網(wǎng)頁功能，包含信息存儲(chǔ)、本地定位等。

因此所謂的HTML5，實(shí)際上是一個(gè)包含了HTML、CSS、JavaScript在內(nèi)的等多種技術(shù)的組合，其中HTML和CSS主要負(fù)責(zé)頁面的搭建，而JavaScript負(fù)責(zé)邏輯處理。它在圖形處理、動(dòng)畫制作、視頻播放、網(wǎng)頁應(yīng)用、頁面布局等多個(gè)方面給網(wǎng)頁結(jié)構(gòu)帶來了巨大的改變。HTML5的目標(biāo)是取代HTML4以及XHTML1.0標(biāo)準(zhǔn)，降低網(wǎng)頁對(duì)插件的依賴，如Flash等軟件的應(yīng)用，將網(wǎng)頁帶入一個(gè)成熟的應(yīng)用平臺(tái)，實(shí)現(xiàn)各種設(shè)備的互聯(lián)與應(yīng)用，更好滿足人們的需求。

與HTML4相比，HTML5主要變化如下：

●取消了一些過時(shí)的HTML4標(biāo)記，如包含顯示效果的標(biāo)記＜font＞等，已經(jīng)被CSS所取代，＜u＞、＜strike＞等標(biāo)記則被完全去掉。除此之外，在HTML5中加入了大量的新標(biāo)記，如＜nav＞、＜footer＞、＜section＞、＜article＞、＜aside＞等，以便在制作網(wǎng)頁時(shí)使用新標(biāo)記進(jìn)行全新的布局設(shè)計(jì)。

●加入了全新的表單輸入對(duì)象，例如＜date＞、＜time＞、＜email＞、＜url＞等標(biāo)記，進(jìn)行新的表單控件開發(fā)。

●強(qiáng)化了Web頁面的表現(xiàn)性，增加了本地?cái)?shù)據(jù)庫特性。HTML5支持語義化標(biāo)記，支持網(wǎng)頁中的多媒體屬性，并引入了新的音頻標(biāo)記audio和視頻標(biāo)記video。在數(shù)據(jù)存儲(chǔ)中對(duì)本地離線存儲(chǔ)有了更好的支持。

●引入Canvas畫布的概念，通過使用Canvas畫布和SVG技術(shù)實(shí)現(xiàn)在網(wǎng)頁中二維圖形的繪制。

●用戶無需安裝插件，HTML5取代Flash在移動(dòng)設(shè)備的地位。

●采用了開放的標(biāo)準(zhǔn)與技術(shù)，加強(qiáng)了瀏覽器中的異常處理。上述特點(diǎn)決定了HTML5能夠解決許多Web中不能逾越的問題，前途一片光明。但是同時(shí)HTML5目前還存在以下問題亟待解決：

●HTML5開發(fā)應(yīng)用性能較差，啟動(dòng)較慢。

●HTML5對(duì)瀏覽器兼容性參差不齊，導(dǎo)致部分HTML5應(yīng)用無法跨平臺(tái)。

●目前在市場上HTML5還缺少優(yōu)秀的開發(fā)工具。

2.HTML5語法介紹HTML5標(biāo)記的書寫和HTML之前的語法基本一致，在書寫中注意以下幾點(diǎn)：

●標(biāo)記采用大小寫都可以。

●標(biāo)記要正確封閉。

●如果需要顯示中文，需設(shè)置編碼格式。

●屬性的雙引號(hào)可選。

此外在HTML5中有著豐富的語義結(jié)構(gòu)標(biāo)記，與HTML4不同，它的書寫更加簡潔與高效。在HTML5出現(xiàn)前，人們書寫網(wǎng)頁時(shí)常常會(huì)出現(xiàn)如下的代碼：

＜！DOCTYPE HTML PUBLIC"-//W3C//DTD HTML4.01 Transitional//EN" "http：//www.w3.org/TR/html4/loose.dtd"＞該語句用來表示文檔的類型聲明和介紹該文檔要符合HTML規(guī)范。

HTML5重新規(guī)范了網(wǎng)頁的書寫方式，簡化了這一約定，使用如下語法：

＜！DOCTYPE html＞

需要指出的是：

●在HTML4.01中，＜！DOCTYPE＞聲明引用DTD，因?yàn)镠TML4.01基于SGML。DTD規(guī)定了標(biāo)記語言的規(guī)則，這樣瀏覽器才能正確呈現(xiàn)內(nèi)容。而HTML5不基于SGML，所以不需要引用DTD。

●每一個(gè)HTML5文檔必須DOCTYPE元素開頭。＜！DOCTYPE HTML＞告訴瀏覽器處理的是HTML文檔。

●＜！DOCTYPE＞聲明沒有結(jié)束標(biāo)記。

●＜！DOCTYPE＞聲明對(duì)大小寫不敏感。

【例1-2】制作HTML5標(biāo)記的網(wǎng)頁，在瀏覽器中顯示如圖1-3所示。

圖1-3 HTML5網(wǎng)頁

代碼如下：

＜！DOCTYPE html＞

＜html lang="zh"＞

＜head＞

＜title＞這是我的網(wǎng)頁＜/title＞

＜/head＞

＜body＞

＜h1＞我的第一個(gè)標(biāo)題＜/h1＞

＜p＞我的第一個(gè)段落。＜/p＞

＜/body＞

＜/html＞

該例是一個(gè)使用HTML5標(biāo)記開發(fā)的網(wǎng)頁，用語句＜！DOCTYPE html＞表示。

值得注意的是：lang="zh"語句用來設(shè)置文檔的主語言，對(duì)于中文網(wǎng)頁，HTML5標(biāo)記應(yīng)當(dāng)是zh。

此外，在HTML5出現(xiàn)前，頁面中的編碼格式一般寫成如下格式：＜meta http-equiv="Content-Type"content="text/html；charset=utf-8"/＞，該語句出現(xiàn)在“meta”標(biāo)記中，能夠被瀏覽器所識(shí)別。

在HTML5出現(xiàn)后，對(duì)字符集做了簡化，書寫為：＜meta charset=utf-8"＞，以此提高了瀏覽器的運(yùn)行效率。

需要指出的是：

●HTML5推薦使用utf-8字符集。

●使用meta標(biāo)記確認(rèn)字符集編碼。

練一練

書寫一個(gè)HTML5網(wǎng)頁并在瀏覽器中顯示。

1.2.2 HTML5頁面布局及新元素介紹

1.HTML5頁面布局元素介紹

HTML5頁面布局與傳統(tǒng)的Web頁面有所區(qū)別，HTML5頁面布局方式如圖1-4所示。

圖1-4 HTML5布局

HTML5頁面布局及新元素介紹

圖1-4中，HTML5的布局把整個(gè)頁面分成了5個(gè)區(qū)域，分別如下。

●＜header＞:頁面標(biāo)題區(qū)域，用于表示區(qū)域內(nèi)的個(gè)體標(biāo)題，可用在整個(gè)文檔中，也可以在局部使用。

●＜nav＞：頁而導(dǎo)航區(qū)域，專門放置網(wǎng)頁中菜單導(dǎo)航和鏈接導(dǎo)航的區(qū)域。

●＜section＞與＜article＞:頁而主內(nèi)容區(qū)域，網(wǎng)頁中的主要內(nèi)容部分，用于放置網(wǎng)頁的主要內(nèi)容，也可以嵌套放置其他標(biāo)記。

●＜aside＞:頁面?zhèn)葍?nèi)容區(qū)域，與section相似，也用于放置網(wǎng)頁內(nèi)容。

●＜footer＞:頁面頁腳區(qū)域，網(wǎng)頁最底部的區(qū)域，用于放置作者信息、用戶導(dǎo)航、聯(lián)系方式以及廣告插入等內(nèi)容。

通過頁面布局元素標(biāo)記描述對(duì)應(yīng)的頁面區(qū)域，這樣使用HTML5開發(fā)的網(wǎng)頁結(jié)構(gòu)更加清晰明了。

【例1-3】制作使用HTML5新布局元素布局網(wǎng)頁。

＜！DOCTYPE html＞

＜html＞

＜head＞

＜title＞這是HTML5網(wǎng)頁＜/title＞

＜/head＞

＜body＞

＜header＞＜/header＞

＜hgroup＞＜/hgroup＞

＜nav＞＜/nav＞

＜article＞＜/article＞

＜sectionclass="intros"＞＜/section＞

＜asideclass="content"＞＜/aside＞

＜footer＞＜/footer＞

＜/body＞

＜/html＞

布局元素詳細(xì)介紹如下。

（1）header元素

header元素用來放置頁面內(nèi)的一個(gè)內(nèi)容區(qū)塊的標(biāo)題，header區(qū)域代碼如下：

＜header＞

＜h1＞HTML5頁面＜/h1＞

＜/header＞

值得注意是：一個(gè)頁面中可以擁有多個(gè)header元素，如果將頁面分為多個(gè)區(qū)域，可以為每個(gè)區(qū)域加入header元素。代碼如下：

＜header＞

＜h1＞HTML5頁面＜/h1＞

＜/header＞

＜section class="content"＞

＜header＞文章標(biāo)題＜/header＞

＜p＞這是網(wǎng)頁的主要內(nèi)容區(qū)域＜/p＞

＜/section＞

（2）hgroup元素

hgroup區(qū)域用于對(duì)網(wǎng)頁的標(biāo)題進(jìn)行組合，通常它與h1～h6元素組合使用，一般將＜hgroup＞元素放在＜header＞元素中，代碼如下：

＜hgroup＞

＜h2＞網(wǎng)頁元素＜/h2＞

＜h2＞group元素＜/h2＞

＜/hgroup＞

值得注意的是：如果只有一個(gè)標(biāo)題元素則不建議使用hgroup元素。

（3）nav元素

nav元素用于定義導(dǎo)航鏈接，該元素將具有導(dǎo)航的鏈接放在同一個(gè)區(qū)域中，并且一個(gè)頁面可以擁有多個(gè)nav元素。HTML5頁面導(dǎo)航區(qū)域nav部分代碼如下：

＜divid="menu"＞

＜ul＞

＜li＞＜a href="#"class="top"＞Home＜/a＞＜ahre f="#"＞首頁＜/a＞＜/li＞

＜li＞＜a href="#"class="top"＞News＜/a＞＜ahre f="#"＞新聞＜/a＞＜/li＞

＜li＞＜a href="#"class="top"＞Sports＜/a＞＜ahre f="#"＞體育＜/a＞＜/li＞

＜li＞＜a href="#"class="top"＞Contact＜/a＞＜ahre f="#"＞聯(lián)系方式＜/a＞＜/li＞

＜li＞＜a href="#"class="top"＞Logo＜/a＞＜ahre f="#"＞博客＜/a＞＜/li＞

＜/ul＞

＜/div＞

這里使用ul無序列表作為導(dǎo)航的結(jié)構(gòu)。設(shè)置id="menu"是為了CSS樣式表引用。

（4）article元素

article區(qū)域用于定義獨(dú)立的內(nèi)容，如一篇完整的文章及對(duì)應(yīng)的評(píng)論等，代碼如下：

＜article＞

＜header＞

＜h1＞我的HTML5頁面＜/h1＞

＜/header＞

＜hgroup＞

＜h2＞網(wǎng)頁元素＜/h2＞

＜h2＞group元素＜/h2＞

＜/hgroup＞

＜p＞HTML5新元素＜/p＞

＜/article＞

該段代碼描述了article區(qū)域，該區(qū)域包含一個(gè)header元素和一個(gè)hgroup元素。

（5）section元素

section元素可用于劃分文檔的節(jié)，包含與主題相關(guān)的內(nèi)容。節(jié)通常包含標(biāo)題和其他子素。section區(qū)域代碼如下：

＜section class="content"＞

＜p＞這是網(wǎng)頁的主要內(nèi)容區(qū)域＜/p＞

＜/section＞

也可以寫成如下的復(fù)雜形式：

＜section id="sidebar"＞

＜h2＞Section＜/h2＞

＜header＞

＜h2＞Side Header＜/h2＞

＜/header＞

＜nav＞

＜h3＞dao hang＜/h3＞

＜ul＞

＜li＞＜a href="2017/04"＞2014＜/a＞＜/li＞

＜li＞＜a href="2017/03"＞2015＜/a＞＜/li＞

＜li＞＜a href="2017/02"＞2016＜/a＞＜/li＞

＜li＞＜a href="2017/01"＞2017＜/a＞＜/li＞

＜/ul＞

＜/nav＞

＜/section＞

值得注意的是，在section中可以包含任意的內(nèi)容。

（6）aside元素

aside元素用來表示當(dāng)前頁面的附加信息，aside區(qū)域代碼如下：

＜aside＞

＜h3＞welcome＜/h3＞

＜ul＞

＜li＞＜ahre f="#"＞HTML5標(biāo)記＜/a＞＜/li＞

＜/ul＞

＜/aside＞

（7）footer元素

footer元素用來描述頁面的頁腳區(qū)域，footer區(qū)域代碼如下：

＜footer class="foot"＞

＜h2＞Footer＜/h2＞

＜/footer＞

同樣可以寫成如下的復(fù)雜形式：

＜footer＞

＜section id="part1"＞

＜h2＞關(guān)于＜/h2＞

＜/section＞

＜section id="part2"＞

＜h2＞聯(lián)系＜/h2＞

＜/section＞

＜section id="part3"＞

＜h2＞友情鏈接＜/h2＞

＜/section＞

＜section id="part4"＞

＜h2＞版權(quán)所有＜/h2＞

＜/section＞

＜/footer＞

上述代碼在通過CSS樣式表修飾后即可在支持HTML5的瀏覽器上顯示網(wǎng)頁效果。

值得注意的是：在一個(gè)頁面中可以出現(xiàn)多個(gè)＜header＞、＜section＞、＜nav＞元素，需要為每一個(gè)元素都編寫特定的CSS樣式。

此外，在HTML5中，還可以在網(wǎng)頁內(nèi)部放置＜main＞元素，該元素用于表示網(wǎng)頁中的主要內(nèi)容。常見語法如下：

值得注意的是：每一個(gè)網(wǎng)頁內(nèi)部只能放置一個(gè)＜main＞元素，并且＜main＞元素不能放在＜article＞、＜nav＞、＜footer＞、＜header＞、＜aside＞內(nèi)部。

對(duì)比HTML4和HTML5不同的網(wǎng)頁布局代碼書寫方式如下。

●HTML4：

＜body＞

＜div id="header"＞...＜/div＞

＜div id="navigation"＞...＜/div＞

＜div id="main"＞...＜/div＞

＜div id="sidebar"＞...＜/div＞

＜div id="footer"＞...＜/div＞

＜/body＞

在HTML4中，頁面布局常使用大量的＜div＞標(biāo)記進(jìn)行劃分區(qū)域，并命名不同的區(qū)域，如語句“＜div id="header"＞...＜/div＞”表示網(wǎng)頁頭部區(qū)域，語句“＜div id="footer"＞...＜/div＞”表示網(wǎng)頁頁腳部分區(qū)域。

●HTML5：

＜body＞

＜header＞...＜/header＞

＜nav＞...＜/nav＞

＜div id="main"＞...＜/div＞

＜section＞..＜/section＞

＜section＞..＜/section＞

＜footer＞...＜/footer＞

＜/body＞

在HTML5中，頁面布局主要使用＜header＞、＜nav＞、＜section＞和＜footer＞等標(biāo)記進(jìn)行設(shè)計(jì)，也可在其中穿插使用＜div＞標(biāo)記。

綜上所述，HTML5改變了以往網(wǎng)頁設(shè)計(jì)的模式，引入了大量的新布局元素使得Web頁面在結(jié)構(gòu)上變得簡單且語義明確。在設(shè)計(jì)網(wǎng)頁時(shí)，設(shè)計(jì)人員應(yīng)當(dāng)學(xué)會(huì)使用新的布局標(biāo)記設(shè)計(jì)HTML頁面。

練一練

將上述代碼用記事本編寫并保存后用瀏覽器打開，查看運(yùn)行結(jié)果。

練一練

編寫如下網(wǎng)頁并運(yùn)行。該例運(yùn)用了HTML5中標(biāo)記＜head＞、＜title＞、＜body＞、＜h2＞、＜p＞及布局元素＜header＞、＜hgroup＞、＜article＞、＜section＞、＜nav＞、＜aside＞、＜footer＞。

在該例中使用標(biāo)記＜head＞表示網(wǎng)頁的頭部，標(biāo)記＜header＞表示網(wǎng)頁正文的頭部區(qū)域；標(biāo)記＜article＞表示網(wǎng)頁正文部分的標(biāo)題欄區(qū)域，標(biāo)記＜hgroup＞、＜section＞表示網(wǎng)頁正文部分的主要欄目區(qū)域，標(biāo)記＜footer＞表示網(wǎng)頁正文部分的頁腳區(qū)域。

2.HTML5其他新標(biāo)簽元素介紹

除了上節(jié)介紹的布局元素之外，HTML5還引入了大量的新元素用于對(duì)網(wǎng)頁的設(shè)計(jì)。

1）figure：是一種元素的組合，可以帶有標(biāo)題，用于關(guān)聯(lián)獨(dú)立的流內(nèi)容，表示網(wǎng)頁中的一塊獨(dú)立區(qū)域，可用來制作圖表、視頻和圖片。常見語法如下：

＜figure＞

＜p＞重慶嘉陵江大橋＜/p＞

＜imgsrc="bridge.jpg"width="300"height="270"/＞

＜/figure＞

2）mark：用于標(biāo)記文本，突出顯示文本內(nèi)容。常見語法如下：

＜！DOCTYPE html＞

＜html＞

＜body＞

＜p＞＜mark＞CSS3＜/mark＞樣式表技術(shù)＜/p＞

＜/body＞

＜/html＞

該例對(duì)mark標(biāo)記中的內(nèi)容“CSS3”作了亮度的改變。

3）datalist：與表單屬性input配合，定義input出現(xiàn)的值。常見語法如下：

＜！DOCTYPE html＞

＜html＞

＜body＞

＜input list="city"/＞

＜datalist id="city"＞

＜o(jì)ption value="中國"＞

＜o(jì)ption value="美國"＞

＜o(jì)ption value="德國"＞

＜o(jì)ption value="韓國"＞

＜/datalist＞

＜/body＞

＜/html＞

4）progress：用于顯示頁面中的進(jìn)度條狀態(tài)。常見語法如下：

＜！DOCTYPE html＞

＜html＞

＜body＞

當(dāng)前下載進(jìn)度：＜progress value=80 max=100＞＜/progress＞

＜/body＞

＜/html＞

運(yùn)行結(jié)果如圖1-5所示。

圖1-5 進(jìn)度條顯示

5）meter：與progress類似，主要用于顯示網(wǎng)頁中一定范圍內(nèi)的值。常見語法如下：

＜！DOCTYPE html＞

＜html＞

＜body＞

＜p＞支持率：＜/p＞

＜p＞中國：

＜meter value="90"optimum="100"high="100"max="100"＞＜/meter＞＜span＞90%＜/span＞

＜/p＞

＜p＞韓國：

＜meter value="10"optimum="100"high="100"max="100"＞＜/meter＞＜span＞10%＜/span＞

＜/p＞

＜/body＞

＜/html＞

運(yùn)行結(jié)果如圖1-6所示。

圖1-6 meter標(biāo)記

6）video：用于顯示視頻。常見語法如下：

＜video src="movie1.ogg"controls="controls"＞

瀏覽器不支持

＜/video＞

7）audio：用于顯示音頻。常見如法如下：

＜audio src="audio1.wav"controls="controls"＞

瀏覽器不支持

＜/audio＞

8）canvas：中文稱為“畫布”，主要用于圖形的繪制，通過腳本（通常是JavaScript）來完成。常見語法如下：

＜！DOCTYPE html＞

＜html＞

＜head＞

＜meta charset="utf-8"＞

＜title＞畫布＜/title＞

＜/head＞

＜body＞

＜canvas id="myCanvas"width="200"height="100"style="border：1px solid#000000；"＞

瀏覽器不支持HTML5 canvas標(biāo)簽。

＜/canvas＞

＜/body＞

＜/html＞

運(yùn)行結(jié)果如圖1-7所示。

圖1-7 canvas顯示

9）details：用于描述文檔部分的細(xì)節(jié)，常與summary元素配合使用。常見語法如下：

＜details＞

＜summary＞商品顯示列表＜/summary＞

＜ul＞

＜li＞商品1＜/li＞

＜li＞商品2＜/li＞

＜/ul＞

＜/details＞

10）em：為文本添加樣式，強(qiáng)調(diào)內(nèi)容中的重點(diǎn)。常見語法如下：

＜em＞強(qiáng)調(diào)的文本＜/em＞

11）i：為文字添加效果，將文本定義為斜體類型。常見語法如下：

＜i＞斜體文本＜/i＞

12）time：該標(biāo)記用來定義時(shí)間，可以代表24小時(shí)中的某一時(shí)間。常見屬性值包含以下兩種。

●datetime：定義相應(yīng)的日期或時(shí)間。

●pubdate：定義文檔的發(fā)布日期。

13）cite：用于在文檔中創(chuàng)建一個(gè)引用標(biāo)記，作為對(duì)文檔參考文獻(xiàn)的引用說明。常見語法如下：

＜p＞

＜cite＞故宮博物院＜/cite＞建立于1925年。

＜/p＞

14）menu：用于定義菜單列表，常用在表單中。常見語法如下：

＜menu＞

＜li＞＜input type="checkbox"＞中國＜/li＞

＜li＞＜input type="checkbox"＞韓國＜/li＞

＜/menu＞

15）keygen：用于生成密鑰。常見語法如下：

加密：＜keygen name="security"/＞

練一練

將上述代碼用記事本編寫并保存后用瀏覽器打開，查看運(yùn)行結(jié)果。

1.2.3 HTML5常見元素介紹

1.HTML5圖像和文本標(biāo)簽的應(yīng)用

（1）圖像

在HTML5中，圖像與文本標(biāo)簽的使用和HTML4是一樣的。通常使用＜img＞定義圖像標(biāo)簽，屬性src給出圖像的地址，width和height定義圖像的寬度和高度，alt描述圖像的相關(guān)信息。常見語法如下：

＜img src="2.jpg"width="128"height="128"alt="人物圖像"/＞

值得注意的是，在HTML5不再支持下列屬性：“align”“border”“hspace”以及“vspace”。

（2）文本

對(duì)于文本字符，可以將網(wǎng)頁中的文本內(nèi)容直接輸入在＜body＞＜/body＞之間，也可在文本中應(yīng)用下列標(biāo)記設(shè)置文本：標(biāo)記＜p＞分段，標(biāo)記＜br＞分行，標(biāo)記＜hr＞加入水平線，標(biāo)記＜h1＞-＜h6＞設(shè)置文檔標(biāo)題，標(biāo)記＜b＞＜/b＞設(shè)置粗體文字，標(biāo)記＜sub＞＜/sub＞設(shè)置文字下標(biāo)，標(biāo)記＜sup＞＜/sup＞設(shè)置文字上標(biāo)。

【例1-4】制作一個(gè)純文本顯示的網(wǎng)頁，該例使用了＜sub＞標(biāo)記。在瀏覽器中顯示如圖1-8所示。

圖1-8 網(wǎng)頁中的文本

代碼如下：

＜！DOCTYPE HTML＞

＜html＞

＜body＞

＜p＞HTML5基礎(chǔ)教程＜/p＞

＜p＞H＜sub＞2＜/sub＞O是水分子＜/p＞

＜/body＞

＜/html＞

（3）圖像和文字的排列

【例1-5】制作網(wǎng)頁中的圖文排列，在瀏覽器中顯示如圖1-9所示。

圖1-9 圖像的顯示

代碼如下：

＜！DOCTYPE HTML＞

＜html＞

＜body＞

＜img src="1.jpg"width="50"height="50"＞

＜br/＞

＜img src="1.jpg"width="100"height="100"＞

＜br/＞

＜img src="1.jpg"width="200"height="200"＞

＜p＞通過改變img標(biāo)簽的"height"和"width"屬性的值，放大或縮小圖像。＜/p＞

＜/body＞

＜/html＞

該例在網(wǎng)頁中顯示了3幅圖像，并在圖像下方加入了說明性的文字。

（4）網(wǎng)頁中背景圖像的顯示

【例1-6】制作網(wǎng)頁中的背景圖像，在瀏覽器中顯示如圖1-10所示。

圖1-10 網(wǎng)頁中的背景圖像

代碼如下：

＜！DOCTYPE HTML＞

＜html＞

＜body background="1.jpg"＞

＜h3＞圖像背景＜/h3＞

＜p＞gif和jpg文件均可用作HTML背景。＜/p＞

＜p＞如果圖像小于頁面，圖像會(huì)進(jìn)行重復(fù)。＜/p＞

＜/body＞

＜/html＞

該例用標(biāo)記background實(shí)現(xiàn)了背景圖像的制作。

列表與超鏈接

2.列表標(biāo)記

在網(wǎng)頁中進(jìn)行文本排版時(shí)，經(jīng)常會(huì)用到列表標(biāo)記，HTML5主要有3種列表形式：＜ul＞無序列表、＜o(jì)l＞有序列表和＜dl＞定義列表。

（1）無序列表

無序列表中的列表項(xiàng)沒有順序，只有項(xiàng)目符號(hào)放在最前面。常見語法如下：

＜ul type="類型"＞

＜li＞列表項(xiàng)＜/li＞

＜li＞列表項(xiàng)＜/li＞

＜li＞列表項(xiàng)＜/li＞

＜/ul＞

在無序列表存在著下列的type屬性，如表1-2所示。

表1-2 無序列表類型

值得注意的是：＜ul＞＜/ul＞表示一個(gè)無序列表的開始和結(jié)束，＜li＞表示一個(gè)列表項(xiàng)，在＜ul＞中可以包含多個(gè)＜li＞。一般來說＜ul＞標(biāo)記和＜li＞標(biāo)記要配合使用，并且在＜ul＞標(biāo)記內(nèi)部不能出現(xiàn)其他的標(biāo)記。＜o(jì)l＞標(biāo)記與＜dl＞標(biāo)記存在同樣的用法。

（2）有序列表

有序列表的列表項(xiàng)排列有順序，常見語法如下：

＜o(jì)l＞

＜li＞列表項(xiàng)＜/li＞

＜li＞列表項(xiàng)＜/li＞

＜li＞列表項(xiàng)＜/li＞

＜/ol＞

（3）定義列表

定義列表在列表的各項(xiàng)前沒有任何數(shù)字和符號(hào)，常見語法如下：

＜dl＞

＜dt＞列表項(xiàng)＜/dt＞

＜dd＞列表項(xiàng)＜/dd＞

＜dt＞列表項(xiàng)＜/dt＞

＜dd＞列表項(xiàng)＜/dd＞

＜/dl＞

【例1-7】制作列表網(wǎng)頁，在瀏覽器中顯示如圖1-11所示。

圖1-11 列表的運(yùn)用

代碼如下：

＜！DOCTYPE HTML＞

＜html＞

＜body＞

＜h1＞列表的使用＜/h1＞

＜o(jì)l＞

＜li＞早上＜/li＞

＜li＞中午＜/li＞

＜li＞晚上＜/li＞

＜/ol＞

＜ul＞

＜li＞早上＜/li＞

＜li＞中午＜/li＞

＜li＞晚上＜/li＞

＜/ul＞

＜/body＞

＜/html＞

該例包含一個(gè)有序列表和一個(gè)無序列表。

3.超鏈接標(biāo)記

超鏈接是網(wǎng)站的靈魂，超鏈接標(biāo)記是網(wǎng)站中最重要的標(biāo)記。通過超鏈接的制作可以讓網(wǎng)站中的每個(gè)頁面相互訪問。超鏈接標(biāo)記的常見語法如下：

＜a herf=""＞內(nèi)容＜/a＞

其中元素＜a＞表示超鏈接的開始，＜/a＞表示超鏈接的結(jié)束。屬性href表示該超鏈接的鏈接地址，鏈接路徑必須為URL地址，URL用于標(biāo)識(shí)Web或者本地磁盤上的文件，如＜a href="http：//www.baidu.com"＞百度＜/a＞，或者＜a href="image/1.jpg"＞圖片＜/a＞。前者表示該鏈接方式為絕對(duì)路徑，后者表示鏈接方式為相對(duì)路徑。也可以將地址設(shè)置為空鏈接，用href="#"表示。

值得注意的是：在制作超鏈接時(shí)，網(wǎng)頁里的任何文字和圖像都可以創(chuàng)建相應(yīng)的鏈接。

【例1-8】制作超鏈接網(wǎng)頁，在瀏覽器中顯示如圖1-12所示。

圖1-12 超鏈接的運(yùn)用

代碼如下：

＜！DOCTYPE html＞

＜html lang="zh"＞

＜head＞

＜title＞超鏈接網(wǎng)頁＜/title＞

＜/head＞

＜body＞

＜h1＞熱門電影＜/h1＞

＜a href="#"＞大上海＜/a＞

＜a href="#"＞情圣＜/a＞

＜a href="#"＞金剛狼3＜/a＞

＜a href="#"＞乘風(fēng)破浪＜/a＞

＜a href="#"＞朗讀者＜/a＞

＜/body＞

＜/html＞

該例在頁面中制作5個(gè)超鏈接。

4.表格標(biāo)記

在HTML5中使用標(biāo)記＜table＞＜/table＞來定義表格。但是這還不夠，要表示一個(gè)完整的表格，還需要使用＜tr＞、＜td＞、＜th＞以及＜caption＞等標(biāo)記。其中＜tr＞表示表格的行，＜td＞表示表格中的單元格，＜th＞表示表格的列，＜caption＞表示表格的標(biāo)題。此外，＜table＞還保留了一個(gè)屬性border用來設(shè)置表格的邊框。

使用表格常見的語法如下：

＜table border="1"＞

＜tr＞

＜td＞...＜/td＞

＜/tr＞

＜/table＞

【例1-9】制作表格網(wǎng)頁，在瀏覽器中顯示如圖1-13所示。

圖1-13 表格的運(yùn)用

代碼如下：

＜！DOCTYPE html＞

＜html lang="zh"＞

＜head＞

＜title＞表格網(wǎng)頁＜/title＞

＜/head＞

＜body＞

＜table border="1"＞

＜tr＞

＜td＞年份＜/td＞

＜td＞月份＜/td＞

＜td＞銷售數(shù)量＜/td＞

＜/tr＞

＜tr＞

＜td＞2016年＜/td＞

＜td＞7月＜/td＞

＜td＞300臺(tái)＜/td＞

＜/tr＞

＜tr＞

＜td＞2016年＜/td＞

＜td＞8月＜/td＞

＜td＞400臺(tái)＜/td＞

＜/tr＞

＜tr＞

＜td＞2016年＜/td＞

＜td＞9月＜/td＞

＜td＞500臺(tái)＜/td＞

＜/tr＞

＜/table＞

＜/body＞

＜/html＞

該例在網(wǎng)頁中用表格顯示企業(yè)中的銷售量。

5.HTML5標(biāo)記綜合練習(xí)

【例1-10】制作HTML5標(biāo)記完整的網(wǎng)頁，在該例中用＜article＞標(biāo)記放置正文內(nèi)容，其中包含3個(gè)＜section＞標(biāo)記和1個(gè)頁腳＜footer＞標(biāo)記。在＜section＞標(biāo)記中又包含了＜h3＞字體標(biāo)記和＜p＞段落標(biāo)記，在＜footer＞標(biāo)記中又包含了＜h4＞和＜h5＞文字大小標(biāo)記。

代碼如下：

練一練

將上述代碼用記事本編寫并保存后用瀏覽器打開，查看運(yùn)行結(jié)果。

練一練

為下列文檔添加內(nèi)容，并插入圖像顯示在瀏覽器中。

＜！DOCTYPE html＞

＜html＞

＜head＞

＜title＞這是HTML5網(wǎng)頁＜/title＞

＜/head＞

＜body＞

＜header＞＜/header＞

＜hgroup＞＜/hgroup＞

＜nav＞＜/nav＞

＜article＞＜/article＞

＜p＞＜/p＞

＜section class="intros"＞＜/section＞

＜aside class="content"＞＜/aside＞

＜footer＞＜/footer＞

＜/body＞

＜/html＞