html5程序開發(fā)范例寶典第三章

使用details標(biāo)記元素現(xiàn)交實(shí)實(shí)例說實(shí)提供了一個展開/detailsChrome瀏覽器中運(yùn)行本實(shí)例的初始效果如圖頁面運(yùn)行初始效技術(shù)要

3.2使用details元素實(shí)現(xiàn)與頁面的交HTML5details，details 將會在頁面中顯示detailsdetailsopen <details Chrome瀏覽器支持details實(shí)現(xiàn)過<imgsrc="images/1.png" 是一家以計算機(jī)軟件技術(shù) 的高科技型企業(yè)<imgsrc="images/1.png" 是一家以計算機(jī)軟件技術(shù) 的高科技型企業(yè) 物開 定義detailsCSS<style<styledetailsoverflow:hidden;background:#e3e3e3;margin-bottom:10px;disy:block;}detailsdivfloat:left;width:75%;}detailsdivh3margin-top:}detailsimgfloat:left;width:200px;padding:030px10px}--舉一反應(yīng)用output元素拖動竿改變數(shù)實(shí)例說本實(shí)例將介紹一種HTML5中新增的元素——output元素。在這個實(shí)例中，output元素被rangeinputrange元素的滑竿時，output元素的父表單會outputrangeOpera瀏覽器中的運(yùn)行效果如圖3.3所示。技術(shù)要

3.3output元素顯示range的HTML5output元素，output元素顯示出一些計算的結(jié)果或者的其他結(jié)果。output元素必須從屬于某個表單，也就是說，必須將它書寫在表單內(nèi)部，或?qū)λ砑觙orm屬性。Opera10瀏覽器支持output實(shí)現(xiàn)過<metahttp-equiv="content-type"<form<metahttp-equiv="content-type"<form<inputname="range1"type=rangemin=0max=100<output<output舉一反使用output元素定義的輸出。使用output元素顯示數(shù)值。實(shí)現(xiàn)下拉彈出效實(shí)例說本實(shí)例將使用HTML5中為單行文本框新增的list屬性實(shí)現(xiàn)下拉彈出效果。在Opera瀏覽器中運(yùn)行實(shí)例，當(dāng)單擊文本框使其獲得焦點(diǎn)時將彈出輸入提示，運(yùn)行結(jié)果如圖3.4所示。技術(shù)要

3.4彈出輸入提HTML5listdatalist元素（selectCSSOpera10list實(shí)現(xiàn)過<metahttp-equiv="content-type"請選擇：<inputtype="text"name="mr<!--使用style="disy:none;"將detalist元素設(shè)定為不顯示<metahttp-equiv="content-type"請選擇：<inputtype="text"name="mr<!--使用style="disy:none;"將detalist元素設(shè)定為不顯示<datalistid="mr"style="disy:<option<option<option舉一反應(yīng)用list屬性數(shù)據(jù)列表。實(shí)list實(shí)無刷新彈和文實(shí)例說顯示出和文字，結(jié)果如圖3.6所示。3.5頁面運(yùn)行初始效圖3.6彈出和文技術(shù)要實(shí)現(xiàn)過<imgsrc="images/1.png" 是一家以計算機(jī)軟件技術(shù) 的高科技型企業(yè)<imgsrc="images/1.png" 是一家以計算機(jī)軟件技術(shù) 的高科技型企業(yè) 物開 定義detailsCSS<style<styledetailsoverflow:hidden;background:#e3e3e3;margin-bottom:10px;disy:block;}detailssummarycursor:pointer;padding:}detailsdivfloat:left;width:75%;}detailsdivh3margin-top:}detailsimgfloat:left;width:200px;padding:padding:030px10px}--舉一反使用detailssummary使用summary標(biāo)記元實(shí)現(xiàn)交實(shí)例說summaryChrome3.7所示。當(dāng)單擊文字左側(cè)的三角形符號后，所有文字將隱藏，效果如圖3.8所示。圖3.7使用summary元素實(shí)現(xiàn)與頁面的交 圖3.8文字隱技術(shù)要details元素中，配合details元素一起使用。<summary>標(biāo)記的功能是說明文檔的標(biāo)題，而details元素的功能是說明文檔的詳細(xì)信息。summary元素是details元素中的實(shí)現(xiàn)過<details <details 定義detailsCSS<style<styletype="text/css">}font-}detailsoverflow:hidden;height:0;position:relative;disy:block;}details[open]{}舉一反使用summary元素定義文章標(biāo)題。使用summary元素定義的名稱。菜單交標(biāo)記元素實(shí)使實(shí)例說在HTML5中，除了常用的內(nèi)容交互元素外，使用較多的還有菜單交互元素。本實(shí)例將介 >標(biāo)記元素的基本用法。實(shí)例運(yùn)行結(jié)果如圖3.9所示。技術(shù)要<>HTML5中的標(biāo)記，在HTML5中為其賦予了全新的功能。實(shí)現(xiàn)過

圖3.9使 標(biāo)記元素實(shí)現(xiàn)菜單交<metacharset=utf-8 標(biāo)記元素實(shí)現(xiàn)菜單交互<styletype="text/css">}{disborder:solid<metacharset=utf-8 標(biāo)記元素實(shí)現(xiàn)菜單交互<styletype="text/css">}{disborder:solid1px#365167;}}border:solid1px#7DA2CE;}liimg{}lispan{} <img<img<span>Internet<img 舉一反 元素的CSS樣式。實(shí)現(xiàn)右鍵菜單功實(shí)例說對于一個企業(yè)來說充分利用鼠標(biāo)右鍵操作鼠標(biāo)右鍵彈出菜單更簡便更快捷，只需輕擊鼠標(biāo)就可以制作出具有專業(yè)水準(zhǔn)的動態(tài)菜單，其獨(dú)特的菜單懸浮和任意定位的功能更是最大限度地節(jié)省了頁面空間，而絲毫不影響頁面布局。運(yùn)行本實(shí)例，在頁面任意位置單擊鼠標(biāo)右鍵，即會彈出如圖3.10所示的快捷菜單，單擊任意選項(xiàng)，即可登錄到相關(guān)網(wǎng)站。3.10鼠標(biāo)右鍵菜技術(shù)要本實(shí)例主要通過JavaScript中鼠標(biāo)的右鍵單擊oncontext和鼠標(biāo)的左鍵單onclickdiv實(shí)現(xiàn)過functionc(css){}function.write("<divclass=linkonMouseOver=this.className='overlink'onMouseOut=this.className='link'style='padding-left:16;padding-top:1;padding-bottom:1'onclick="+act+">"+txt+"</div>")}function varrightedge=varbottomedge=if(rightedge< Height- if returnfalseY}function }function}CSS<style<style.style1font-size:14pt;color:}--運(yùn)用div層設(shè)計快捷菜單的名稱及。代碼如下<div<div class=upstyle="text-align:left;position:absolute;visibility:hidden;width:125px;z-index:網(wǎng)com")','com")','明日編程詞典網(wǎng)<scriptif }<tablewidth="825"height="409"border="0"align="center"cellpadding="0"<tdbackground="images/bg.gif"><tablewidth="825"height="148"border="0"cellpadding="0"<td <tdheight="122"align="center"><spanclass="style1">舉一反實(shí)現(xiàn)的右鍵菜單功能實(shí)現(xiàn)動框效使用command標(biāo)記元實(shí)例說command是HTML5中新增的標(biāo)記元素，該元素功能是定義各種類型令按鈕。本實(shí)例時，頁面中會出現(xiàn)框的效果，如圖3.11所示。圖3.11實(shí)現(xiàn)動態(tài)框效技術(shù)要本實(shí)例主要應(yīng)用了HTML5中新增的command標(biāo)記元素。command元素包含的屬性及其描述信息如表3.1所示。表 command元素屬性及描述信 值 定義是否被選中，僅用于radio或checkbox類定義command是否可定義作為command來顯示的圖像的為command定義可見的定義command所屬的組名，僅在類型為radio時使定義該command的類型，默認(rèn)是command元素和元素結(jié)合使用，可以在網(wǎng)頁中實(shí)現(xiàn)彈出式的下拉菜單。當(dāng)單擊菜單中的說明：目前只有InternetExplorer瀏覽器支持<command>實(shí)現(xiàn)過index.htmlCSS樣式，CSS<style<styletype="text/css">}{disy:block;border:solid1px#365167;}}disy:none;border:#666solid3px}#dialog.title{}#dialog.title.fleft{}#dialog.title.fright{}#dialog.content{}<scripttype="text/javascript">functioncommandclick(str){.geementById("dialog").style.disvarstrContent="您正在操作<font<scripttype="text/javascript">functioncommandclick(str){.geementById("dialog").style.disvarstrContent="您正在操作<fontcolor=red>"+str+"</font>選項(xiàng).ge} <commandonClick="commandclick('打開')">打開 <div<div<divclass="fleft">提示信息<divclass="fright">關(guān)閉窗口<div<div舉一反使用command標(biāo)記元素實(shí)現(xiàn)按鈕效果。command標(biāo)記元素定義復(fù)選框按鈕效果。使用progress實(shí)例說條由0%變成了100%的效果，如圖3.13所示。圖3.12單擊按鈕之前的進(jìn)度條效 圖3.13單擊按鈕之后的進(jìn)度條效技術(shù)要HTML5progress。該元素主要有兩個屬性：value屬性表示已經(jīng)完成了多少工作量，max屬性表示總共有多少工作量。工作量的單位是隨意的，不注意：valuemax0，valuemax屬性的值。實(shí)現(xiàn)過indexhtml文件，定義progressmax100，然后定義一個按鈕，當(dāng)單擊該按鈕時執(zhí)行JavaScript中的相應(yīng)<p><p>完成百分比<progressid="p"<inputtype="button"onclick="buttononclick()" 在頁面中編寫JavaScript，實(shí)現(xiàn)進(jìn)度條由0%變成100%的效果，主要代碼如下varprogressBar=functionbuttononclick(){varprogressBar.ge.geprogressBar.geementsByTagName('span')[0].textContent="0";for(vari=0;i<=100;i++)}functionvarprogressBar= .geementById('p');progressBar.value=newValue;progressBar.geementsByTagName('span')[0].textContent=}舉一反使用progress標(biāo)記元素實(shí)現(xiàn)上傳文件時的進(jìn)度條效果。使用progress使用meter標(biāo)記元素實(shí)百分比效實(shí)例說在HTML5新增頁面元素中，meter元素用來表示規(guī)定范圍內(nèi)的數(shù)量值，如磁盤使用meter標(biāo)記元素來實(shí)現(xiàn)規(guī)定范圍內(nèi)數(shù)量值的百分比效果，其在Chrome瀏覽器中的運(yùn)行結(jié)果如圖3.14所示。3.14使用meter元素實(shí)現(xiàn)百分比效技術(shù)要HTML5的新增頁面元素meter6認(rèn)為是其當(dāng)前實(shí)際值，例如<meter>2outof10</meter>中的“2”；如果內(nèi)沒有數(shù)字，那么標(biāo)量的實(shí)際值就是0。實(shí)現(xiàn)過<!DOCTYPE<metacharset="UTF-<!DOCTYPE<metacharset="UTF-<p>磁盤使用量：<metervalue="50"min="0"<p>你的得分是：<metervalue="91"min="0"max="100low="10"high="90"optimum="100">A+</meter>舉一反使用meter標(biāo)記元素顯示投票率。使用meter標(biāo)記元素顯示匹配程度設(shè)置progress樣實(shí)例說051progress標(biāo)記元素實(shí)現(xiàn)了進(jìn)度條效果。本實(shí)例在它的基礎(chǔ)上為進(jìn)度條增加自定義樣式。其在Chrome瀏覽器中的運(yùn)行效果如圖3.15、圖3.16所示。圖3.15單擊按鈕之前的進(jìn)度條效 圖3.16單擊按鈕之后的進(jìn)度條效技術(shù)要<styletype="text/css">progress{width:border:<styletype="text/css">progress{width:border:1pxsolid#0064B4;}progress::-moz-progress-bar{background:#0064B4;}progress::-webkit-progress-bar{background:#e6e6e6;}progress::-webkit-progress-value{background:#0064B4;}實(shí)現(xiàn)過<p>完成百分比<progressid="p"index.html文件，定義progressmax<p>完成百分比<progressid="p"<input<inputtype="button"onclick="buttononclick()"varprogressBar=functionbuttononclick(){varprogressBar.ge.geprogressBar.geementsByTagName('span')[0].textContent="0";for(varvarprogressBar=functionbuttononclick(){varprogressBar.ge.geprogressBar.geementsByTagName('span')[0].textContent="0";for(vari=0;i<=100;i++)}functionvarprogressBar= .geementById('p');progressBar.value=newValue;progressBar.geementsByTagName('span')[0].textContent=}在頁面中為progressCSS<style<styletype="text/css">progress{width:border:1pxsolid#0064B4;}progress::-moz-progress-bar{background:#0064B4;}progress::-webkit-progress-bar{background:#e6e6e6;}progress::-webkit-progress-value{background:#0064B4;}舉一反自定義載入時的進(jìn)度條樣式使用html根元素顯示文實(shí)例說在HTML5中，html元素用于告知瀏覽器這是一個HTML文檔。html元素也被稱為根元素，是HTML文檔中最外層的元素。本實(shí)例主要實(shí)現(xiàn)應(yīng)用html3.17技術(shù)要

3.17使用html根元素在任何的一個HTML文件里，最先出現(xiàn)的HTML就是<html>，它用于表示該文件是別位于文件的開始和末尾，文件中的所有內(nèi)容和HTML都包含在其中。例如：實(shí)現(xiàn)過<!DOCTYPE<!DOCTYPE<metacharset="utf-8"<styletype="text/css">font-}舉一反使用html根元素顯示。使用html通設(shè)置目實(shí)例說字上面時，可以看到在IE的狀態(tài)欄中顯示出其完整的地址，它是由代碼中設(shè)置的基底網(wǎng)址加上設(shè)置的相對地址組成的。單擊文字后，將在新窗口打開的目標(biāo)地址，如圖3.19技術(shù)要

圖3.18顯示文 圖3.19進(jìn)入明日網(wǎng)首一個基底標(biāo)記，而且要將其放置在頭部以及任何包含URL地址的語句之前。<base“置為不同的效果，其屬性值及含義如表3.2所示。表 窗口的打開方屬性值在上一級窗口打開，一般常用在分幀的框架頁在新窗口打在同一窗口打開，可以在瀏覽器的整個窗口打開，忽略任何框?qū)崿F(xiàn)過<metacharset="utf-8" 標(biāo)記的使用<base<styletype="text/css">text-}border:solid1px#ccc;}<ahref="index.php">/"target="網(wǎng)<metacharset="utf-8" 標(biāo)記的使用<base<styletype="text/css">text-}border:solid1px#ccc;}<ahref="index.php">/"target="網(wǎng)舉一反實(shí)例說本實(shí)例將以一個簡單的頁面為例，介紹如何通過JavaScript獲取并顯示文本框的3.20技術(shù)要

3.20獲取并顯示文本框的實(shí)現(xiàn)本實(shí)例的關(guān)鍵是如何通過JavaScript獲取表單元素的值。每個表單都是一個表單元素的，要想表單元素主要有3種方式。通過elements[]進(jìn)行，例 通過name屬性按名稱，例 在支持DOM的瀏覽器中，使用 技術(shù)要<formname="form1"method="post"用戶名：<inputtype="text"name="username<formname="form1"method="post"用戶名：<inputtype="text"name="username密 ;碼：<inputtype="password"name="password"<inputtype="button"name="sub1"value="提交 <scriptlanguage="javascript">functiongetValue(){}<scriptlanguage="javascript">functiongetValue(){} 是舉一反通過JavaScript獲取單選按鈕的值。通過JavaScript獲取文本域的內(nèi)容。通過JavaScript獲取下拉菜單的值實(shí)現(xiàn)樹節(jié)點(diǎn)效實(shí)例說在HTML5中新增了許多用于標(biāo)志節(jié)點(diǎn)的元素，通過這些元素可以將頁面內(nèi)容實(shí)現(xiàn)分段或分區(qū)顯示。本實(shí)例主要使用nav元素實(shí)現(xiàn)節(jié)點(diǎn)效果，其運(yùn)行結(jié)果如圖3.21技術(shù)要HTML5中新增的nav元素。在HTML5中，nav

3.21使用<nav>元素實(shí)現(xiàn)節(jié)點(diǎn)效接的部分，它是頁面的一個導(dǎo)航元素。該元素可以將具有導(dǎo)航性質(zhì)的放置在一塊區(qū)域<ahref="index.html">首頁<a 通過上述代碼創(chuàng)建了一個導(dǎo)航區(qū)域，在nav元素中包含了兩個用于導(dǎo)航的超級。該導(dǎo)實(shí)現(xiàn)過 前臺<li><a<li><a.. 前臺<li><a<li><a.. <li><a<li><a..<section 分類<section 分類..<p><ahref="?edit">編輯</a>|ahref="?delete">刪除</a>|ahref="?Rename">重命名<p><small>?copyright2008明日科技舉一反應(yīng)用nav在<article>內(nèi)應(yīng)用nav元素實(shí)例實(shí)例 使用mark元素高亮顯搜實(shí)例說mark它通常使用于原文的時候目的是引起讀者的注意本實(shí)例將應(yīng)用mark元素高亮顯示對于“HTML5”的搜索結(jié)果。其運(yùn)行結(jié)果如圖3.22所示。技術(shù)要

3.22mark元素應(yīng)用在網(wǎng)頁檢索時的HTML5mark但相比而言，HTML5中新增的mark元素在突出顯示時，更加隨意與靈活。實(shí)現(xiàn)過<sectionid="search-在頁面中應(yīng)用<sectionid="search-<a<a專題：<mark>HTML5</mark>下一 開發(fā)標(biāo)準(zhǔn)詳 -技術(shù)成就夢想<a <mark>HTML5</mark>|<p><mark>html5</mark>最近被討論的越來越多，越來越烈<a <a <p>about<mark>HTML5</mark>Form,thewebform2.0舉一反使用mark實(shí)使用mark實(shí)在網(wǎng)頁中突出顯示某些文實(shí)例說本實(shí)例是了一篇關(guān)于“明日科技”的介紹，在原文中并沒有把“編程詞典”標(biāo)示出來，但在網(wǎng)頁中為了強(qiáng)調(diào)“編程詞典”，特意把這個詞高亮顯示出來。其運(yùn)行結(jié)果如圖3.23所示。技術(shù)要

3.23在網(wǎng)頁中突出顯示某些文HTML5mark058，這實(shí)現(xiàn)過index.htmlmark<!DOCTYPE<!DOCTYPE<metacharset=UTF-8 化舉一反實(shí)實(shí)使用cite元文實(shí)例說cite元素可以創(chuàng)建一個標(biāo)記用于文檔中參考文獻(xiàn)的說明如書名或文章名稱等。本實(shí)例將介紹如何使用cite元素文檔。運(yùn)行本實(shí)例，結(jié)果如圖3.24所示。技術(shù)要本實(shí)例主要應(yīng)用的是cite可以只在頁面中提一下通過cite元素的實(shí)現(xiàn)過

圖3.24使用cite元素文HTML語言（HypertextMarkupLanguage，中文通常稱為超文本置標(biāo)語言或超文本標(biāo)記語言）是一種文本類、解釋---cite>HTML語言簡介</cite>HTML語言（HypertextMarkupLanguage，中文通常稱為超文本置標(biāo)語言或超文本標(biāo)記語言）是一種文本類、解釋---cite>HTML語言簡介</cite>舉一反使用cite元素書名。使用cite元素一部名稱在網(wǎng)頁中顯示一實(shí)例說實(shí)例將通過figure元素在網(wǎng)頁中顯示一幅。運(yùn)行本實(shí)例，結(jié)果如圖3.25所示。技術(shù)要

3.25通過figure元素顯示一幅HTML5figure元素。該元素用來表示網(wǎng)頁上一塊獨(dú)立的內(nèi)容，figcaptionfigurefigurefigure元figurefigure元素內(nèi)最多只允許放置一個figcaption元素，但允許放置多個其他元素。實(shí)現(xiàn)過<!DOCTYPE<metacharset="UTF-<!DOCTYPE<metacharset="UTF- <imgsrc="images/1.png"alt="明日科技舉一反figure元素定義文檔的插圖。通過figure元素定義圖表。在網(wǎng)頁中顯示一個文本框?qū)崒?shí)例說實(shí)在HTML5中，iframeiframe3.26技術(shù)要

3.26在網(wǎng)頁中顯示一個文本框 <iframesrc="文件"height="數(shù)值"width="數(shù)值"name="框架名稱"scrolling="值"frameborder="值 <iframe>的屬性及其說明如表3.3所示表 <iframe>的屬性及其說屬性說明用于對齊包含在<iframe>中的數(shù)據(jù)，并且可以取left、right、center以及justify值。因支持使用CSS對齊元素而過時一個以逗號分隔的樣式類別表，這些樣式類實(shí)例化為已定義的類的一個取值為0或者1，判斷是否應(yīng)該在幀四周畫一指定<iframe>的高 通常由樣式單來定義應(yīng)該被應(yīng)用于中數(shù)據(jù)的樣式類到內(nèi)容的一個較長描述幀的內(nèi)容與邊框上、下邊之間的像素幀的內(nèi)容與邊框左、右邊之間的像素用于給一個塊定義一個名字。它可以由JavaScript用來對層進(jìn)行當(dāng)該屬性出現(xiàn)時，用戶重新調(diào)整幀的大取值為auto、yes或者no，判斷滾動條是否顯指定包含<iframe>內(nèi)容的允許在內(nèi)指定一個樣式定義，而不是在一個樣式表內(nèi)指允許為提供一個比<iframe>更有信息量的標(biāo)題，應(yīng)用于整個文指定<iframe>的寬實(shí)現(xiàn)過<!DOCTYPE<metacharset=utf-<iframe<!DOCTYPE<metacharset=utf-<iframe 舉一反iframe元素。使用object中顯示一個實(shí)例說object元素在網(wǎng)頁中顯示一技術(shù)要

3.27使用object元素顯示本實(shí)例主要應(yīng)用object元素將Flash顯示在網(wǎng)頁中。object元素可支持多種不同的媒介類型例如音頻等在本實(shí)例中主要使用object元素的typedata屬性來顯示Flash <objectwidth="300"height="200"type="application/x-shockwave-flash" 實(shí)現(xiàn)過<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"<metahttp-equiv="content-type"<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"<metahttp-equiv="content-type"<divstyle="border:5pxsolidblack;padding:5px;<objectwidth="300"height="200"type="application/x-shockwave-flash"data="cd舉一反使用object元素在網(wǎng)頁中文件使用object元素在網(wǎng)頁中音頻文件使用鼠標(biāo)光標(biāo)拖動網(wǎng)頁實(shí)例說本實(shí)例將實(shí)現(xiàn)使用鼠標(biāo)光標(biāo)拖動網(wǎng)頁中文字的效果。在Chrome瀏覽器中運(yùn)行本實(shí)例，當(dāng)用戶選中網(wǎng)頁中的文字并移動鼠標(biāo)時，可以實(shí)現(xiàn)拖動的效果。運(yùn)行結(jié)果如圖3.28所示。技術(shù)要

3.28使用鼠標(biāo)拖動網(wǎng)頁中的文HTML5draggable <element 3Firefox、ChromeSafaridraggable實(shí)現(xiàn)過<!DOCTYPE<metacharset="utf-8"<linkhref="css.css"<!DOCTYPE<metacharset="utf-8"<linkhref="css.css"rel="stylesheet"<articledraggable="true"這是一段可以拖動的文字,舉一反自動隱藏或顯示網(wǎng)頁中實(shí)例說Chrome圖3.29顯示網(wǎng)頁中的文 圖3.30隱藏網(wǎng)頁中的文技術(shù)要HTML5hiddenHTML5hidden <element 在頁面中可以對元素的hidden