跨平臺的移動Web開發(fā)實(shí)戰(zhàn)單元1-跨平臺的網(wǎng)站課件

跨平臺的移動Web開發(fā)實(shí)戰(zhàn)

（HTML5+CSS3）單元1跨平臺的網(wǎng)站首頁設(shè)計(jì) HTML5的語義化標(biāo)簽及屬性，可以讓開發(fā)者非常方便地實(shí)現(xiàn)清晰的Web頁面布局，加上CSS3的效果渲染，使快速建立豐富靈活的Web頁面變得相對簡單一些。

本單元通過對網(wǎng)站首頁設(shè)計(jì)的探析與訓(xùn)練，重點(diǎn)熟悉HTML5網(wǎng)頁的基本結(jié)構(gòu)及組成元素、HTML5的語義和結(jié)構(gòu)標(biāo)簽、<!DOCTYPE>聲明等，學(xué)會CSS樣式的定義與樣式表的插入，掌握網(wǎng)站首頁的設(shè)計(jì)方法。教學(xué)導(dǎo)航教學(xué)目標(biāo)（1）認(rèn)識HTML5和CSS3，了解HTML5的主要特性、主要變化及其發(fā)展趨勢（2）了解HTML5新增的標(biāo)簽和廢除的標(biāo)簽，了解HTML5新增的標(biāo)簽和廢除的屬性（3）掌握HTML5網(wǎng)頁的基本結(jié)構(gòu)及組成元素（4）掌握HTML5的語義和結(jié)構(gòu)標(biāo)簽及其使用方法（5）掌握CSS樣式的定義與樣式表的插入（6）學(xué)會移動平臺網(wǎng)站首頁的設(shè)計(jì)關(guān)鍵字網(wǎng)站首頁HTML5語義和結(jié)構(gòu)標(biāo)簽CSS樣式參考資料（1）HTML5的新特性簡介參考附錄A（2）HTML5的常用標(biāo)簽及其屬性、方法與事件參考附錄B（3）CSS的屬性參考附錄C（4）CSS的各種選擇器的含義和用法參考附錄D教學(xué)方法任務(wù)驅(qū)動法、分組討論法、理論實(shí)踐一體化、探究學(xué)習(xí)法課時建議8課時實(shí)例探析【任務(wù)1-1】探析攜程旅行網(wǎng)的首頁【效果展示】

攜程旅行網(wǎng)首頁0101.html的瀏覽效果如圖1-1所示。圖1-1攜程旅行網(wǎng)首頁0101.html的瀏覽效果

攜程旅行網(wǎng)首頁0101.html的主體結(jié)構(gòu)包括4個組成部分，分別為頂部、中部、底部和側(cè)邊欄，頂部內(nèi)容為廣告圖片，中部內(nèi)容為多個圖片超鏈接，底部包括多個導(dǎo)航鏈接，側(cè)邊欄為長形按鈕?！揪W(wǎng)頁探析】1．網(wǎng)頁0101.html的HTML代碼探析2．網(wǎng)頁0101.html的CSS代碼探析知識梳理1．HTML5印象 HTML5是萬維網(wǎng)的核心語言，是標(biāo)準(zhǔn)

通用置標(biāo)語言下的一個應(yīng)用超文本標(biāo)記語言

（HTML）的第五次重大修改，HTML5草案

的前身名為WebApplications1.0，于2004年被WHATWG（WebHypertextApplicationTechnologyWorkingGroup）提出，于2007

年被萬維網(wǎng)聯(lián)盟（W3C）接納，并成立了新的HTML工作團(tuán)隊(duì)。2．CSS3印象 CSS即層疊樣式表（CascadingStyleSheet）。

在網(wǎng)頁制作時采用層疊樣式表技術(shù)，可以有

效地對頁面的布局、字體、顏色、背景和其他效

果實(shí)現(xiàn)更加精確的控制。

只要對相應(yīng)的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者不同網(wǎng)頁的外觀和格式。 CSS3是CSS技術(shù)的升級版本，CSS3語言開發(fā)是朝著模塊化發(fā)展的。

以前的規(guī)范作為一個模塊實(shí)在是太龐大而且比較復(fù)雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進(jìn)來。

這些模塊包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等。3．HTML5的主要特性（1）語義特性（Class：Semantic）（2）本地存儲特性（Class：Offline&Storagf）（3）設(shè)備兼容特性（Class：DeviceAccess）（4）連接特性（Class：Connectivity）（5）網(wǎng)頁多媒體特性（Class：Multimedia）（6）三維、圖形及特效特性（Class：3D,Graphics&Effects）（7）性能與集成特性（Class：Performance&Integration）（8）CSS3特性（Class：CSS3）4．HTML5的主要變化 HTML5提供了一些新的元素和屬性，如<nav>（網(wǎng)站導(dǎo)航塊）和<footer>。

這種標(biāo)簽將有利于搜索引擎的索引整理，同時更好地幫助小屏幕裝置和視障人士使用，除此之外，還為其他瀏覽要素提供了新的功

能，如<audio>和<video>標(biāo)記。（1）取消了一些過時的HTML4標(biāo)記。（2）將內(nèi)容和展示分離。（3）一些全新的表單輸入對象。（4）全新的、更合理的Tag。（5）本地?cái)?shù)據(jù)庫。（6）Canvas對象。（7）瀏覽器中的真正程序。（8）HTML5取代Flash在移動設(shè)備的地位。（9）HTML5突出的特點(diǎn)就是強(qiáng)化了Web頁的表現(xiàn)性，增加了本地?cái)?shù)據(jù)庫。5．HTML5的發(fā)展趨勢 HTML5規(guī)范開發(fā)完成時，將成為主流。

據(jù)統(tǒng)計(jì)，2013年全球約有10億手機(jī)瀏覽器支持HTML5，同時HTMLWeb開發(fā)者數(shù)量已達(dá)到200多萬。毫無疑問，HTML5將成為未來5～10年內(nèi)，移動互聯(lián)網(wǎng)領(lǐng)域的主宰者。6．HTML5新增的標(biāo)簽和廢除的標(biāo)簽 HTML5中，新增加了多個標(biāo)簽元素，同時也廢除了多個標(biāo)簽元素。（1）HTML5新增的標(biāo)簽（2）HTML5廢除的標(biāo)簽序號新增標(biāo)簽名稱新增標(biāo)簽的功能說明01<section>表示頁面中的一個內(nèi)容區(qū)塊，如章節(jié)、頁眉、頁腳或頁面的其他部分?？梢院?lt;h1>、<h2>等元素結(jié)合起來使用，表示文檔結(jié)構(gòu)02<article>表示頁面中一塊與上下文不相關(guān)的獨(dú)立內(nèi)容，如一篇文章03<aside>表示<article>元素內(nèi)容之外的并與<article>元素內(nèi)容相關(guān)的輔助信息04<header>表示頁面中一個內(nèi)容區(qū)塊或整個頁面的標(biāo)題05<hgroup>表示對整個頁面或頁面中的一個內(nèi)容區(qū)塊的標(biāo)題進(jìn)行組合06<footer>表示頁面或頁面中一個內(nèi)容區(qū)塊的頁腳表1-9

HTML5新增的標(biāo)簽及其功能說明序號新增標(biāo)簽名稱新增標(biāo)簽的功能說明07<nav>表示頁面中導(dǎo)航鏈接的部分08<figure>表示一段獨(dú)立的流內(nèi)容，一般表示主體文檔內(nèi)容中的一個獨(dú)立單元。使用<figcaption>元素為<figure>元素組添加標(biāo)題09<video>定義視頻，如電影片段或其他視頻流等10<audio>定義音頻，如音樂或其他音頻流11<embed>用來嵌入內(nèi)容（包括各種媒體），格式可以是midi、wav、MP3、flash等12<mark>主要用來在視覺上向用戶呈現(xiàn)那些需要突出顯示或高亮顯示的文字，典型應(yīng)用搜索結(jié)果中高亮顯示搜素關(guān)鍵字13<progress>表示運(yùn)行中的進(jìn)程，如等待中、請稍后等，可以使用<progress>元素顯示JavaScript中耗時函數(shù)的進(jìn)程14<time>表示日期或時間，也可以兩者結(jié)合使用15<ruby>由一個或多個字符（需要一個解釋/發(fā)音）和一個提供該信息的<rt>元素組成，還包括可選的<rp>元素16<rt>定義字符（中文注音或字符）的解釋或發(fā)音17<rp>在<ruby>注釋中使用，以定義不支持<ruby>元素的瀏覽器所顯示的內(nèi)容18<wbr>表示軟換行。與<br>元素的區(qū)別：br元素表示此處必須換行；<wbr>表示瀏覽器窗口或父級元素足夠?qū)挄r（沒必要換行時）不換行，而寬度不夠時主動在此處換行19<canvas>定義圖形，如圖表和其他圖像。<canvas>元素只是圖形容器（畫布），必須使用腳本來繪制圖形20<command>表示用戶能夠調(diào)用的命令，該標(biāo)簽可以定義命令按鈕，如單選按鈕、復(fù)選框或按鈕。只有當(dāng)<command>元素位于<menu>元素內(nèi)時，該元素才是可見的。否則不會顯示這個元素，但是可以用它規(guī)定鍵盤快捷鍵21<menu>用于定義命令的列表或菜單列表，該標(biāo)簽用于上下文菜單、工具欄以及用于列出表單控件和命令22<details>用于描述文檔或文檔某個部分的細(xì)節(jié)，可以與<summary>標(biāo)簽配合使用，<summary>可以為<details>定義標(biāo)題。標(biāo)題是可見的，用戶單擊標(biāo)題時，會顯示出<details>標(biāo)簽定義的內(nèi)容。<summary>應(yīng)該是<details>的第一個子元素。目前只有Chrome瀏覽器支持<details>標(biāo)簽23<datalist>定義選項(xiàng)列表。與<input>元素配合使用該元素來定義<input>可能的值。<datalist>及其選項(xiàng)不會被顯示出來，它僅僅是合法的輸入值列表。使用<input>元素的list屬性來綁定<datalist>24<datagrid>定義可選數(shù)據(jù)的列表。<datagrid>作為樹列表來顯示。如果把該元素的multiple屬性設(shè)置為true，則可以在列表中選取一個以上的項(xiàng)目25<keygen>規(guī)定用于表單的密鑰對生成器字段。當(dāng)提交表單時，私鑰存儲在本地，公鑰發(fā)送到服務(wù)器26<output>定義不同類型的輸出，如腳本的輸出27<source>該標(biāo)簽為媒介元素（如<video>和<audio>）定義媒介資源續(xù)表序號被廢除的標(biāo)簽替代方案序號被廢除的元素替代方案01<basefont>、<big>、<center>、<font>、<s>、<strike>、<tt>、<u>使用CSS代替07<listing>使用<pre>替代02<frameset>、<frame>、<noframes>使用<frame>框架或服務(wù)器方創(chuàng)建的由多個頁面組成的復(fù)合頁面代替08<applet>、<bgsound>、<blink>、<marquee>等標(biāo)簽只有部分瀏覽器支持03<rb>使用<ruby>替代09<nextid>使用GUIDS替代04<acronym>使用<abbr>替代10<xmp>使用<code>替代05<isindex>使用<form與<input>相結(jié)合的方式替代11<plaintex>使用“text/plian”MIME類型替代06<dir>使用<ul>替代表1-10

HTML5廢除的標(biāo)簽7．HTML5新增和廢除的標(biāo)簽屬性（1）HTML5新增的屬性（2）HTML5廢除的屬性序號屬性類型新增的屬性屬性說明01與表單相關(guān)的屬性對<input>（type=text）、<select>、<textarea>與<button>指定autofocus屬性以指定屬性的方式讓元素在畫面打開時自動獲得焦點(diǎn)02對<input>（type=text）、<textarea>指定placeholder屬性對用戶的輸入進(jìn)行提示，提示用戶可以輸入的內(nèi)容03對<input>、<output>、<select>、<textarea>、<button>與<fieldset>指定form屬性聲明屬于哪個表單，然后將其放置在頁面的任何位置，而不在表單之內(nèi)04對input（type=text）、textarea指定required屬性表示用戶提交時進(jìn)行檢查，檢查該元素內(nèi)必定要有輸入內(nèi)容05為<input>標(biāo)簽增加幾個新的屬性：autocomplete、min、max、multiple、pattern與step。還有l(wèi)ist屬性與<datalist>元素配合使用。<datalist>元素與autocomplete屬性配合使用。multiple屬性允許上傳時一次上傳多個文件。pattern屬性用于驗(yàn)證輸入字段的模式，其實(shí)就是正則表達(dá)式。step屬性規(guī)定輸入字段的合法數(shù)字間隔（假如step="3"，則合法數(shù)字應(yīng)該是

-3、0、3、6，以此類推），step屬性可以與max及min屬性配合使用，以創(chuàng)建合法值的范圍表1-11

HTML5新增的屬性列表序號屬性類型新增的屬性屬性說明06與表單相關(guān)的屬性為<input>、<button>元素增加formaction、formenctype、formmethod、formnovalidate與formtarget屬性用戶重載<form>元素的action、enctype、method、novalidate與target屬性。為fieldset元素增加disabled屬性，可以把它的子元素設(shè)為disabled狀態(tài)07為<input>、<button>、<form>增加novalidate屬性可以取消提交時進(jìn)行的有關(guān)檢查，表單可以被無條件地提交08與鏈接相關(guān)屬性為<a>、<area>增加media屬性規(guī)定目標(biāo)URL是為什么類型的媒介/設(shè)備進(jìn)行優(yōu)化的。該屬性用于規(guī)定目標(biāo)URL是為特殊設(shè)備（如iPhone）、語音或打印媒介設(shè)計(jì)的。該屬性可接受多個值。只能在href屬性存在時使用09為<area>增加herflang和rel屬性hreflang屬性規(guī)定在被鏈接文檔中的文本的語言。只有當(dāng)設(shè)置了href屬性時，才能使用該屬性。rel屬性規(guī)定當(dāng)前文檔與被鏈接文檔/資源之間的關(guān)系。只有當(dāng)使用href屬性時，才能使用rel屬性10為<link>增加size屬性sizes屬性規(guī)定被鏈接資源的尺寸。只有當(dāng)被鏈接資源是圖標(biāo)時（rel="icon"），才能使用該屬性。該屬性可接受多個值，并且值由空格分隔11為<base>增加target屬性主要是保持與<a>元素的一致性12其他屬性為<ol>增加reversed屬性它指定列表倒序顯示13為<meta>增加charset屬性定義HTML文檔的字符集14為<menu>增加label和type屬性label屬性規(guī)定菜單的可見標(biāo)簽，type屬性規(guī)定要顯示哪種菜單類型15為<style>增加scoped屬性它允許我們?yōu)槲臋n的指定部分定義樣式，而不是整個文檔。如果使用“scoped”屬性，那么所規(guī)定的樣式只能應(yīng)用到<style>元素的父元素及其子元素16為<html>增加manifest屬性開發(fā)離線Web應(yīng)用程序時，它與API結(jié)合使用，定義一個URL，在這個URL上描述文檔的緩存信息17為<iframe>增加sandbox、seamless和srcdoc3個屬性用來提高頁面安全性，防止不信任的Web頁面執(zhí)行某些操作續(xù)表序號在HTML4中使用的屬性使用該屬性的元素在HTML5中的替代方案01rev<link>、<a>rel02charset<link>、<a>在被鏈接的資源的中使用HTTPContent-type頭元素03shape、coords<a>使用<area>元素代替<a>元素04longdesc<img>、<iframe>使用<a>元素鏈接到較長描述05target<link>多余屬性，被省略06nohref<area>多余屬性，被省略07profile<head>多余屬性，被省略08version<html>多余屬性，被省略09name<img>id10scheme<meta>只為某個表單域使用scheme11archive、chlassid、codebose、codetype、declare、standby<object>使用data與typc屬性類調(diào)用插件。需要使用這些屬性來設(shè)置參數(shù)時，使用param屬性12valuetype、type<param>使用name與value屬性，不聲明其MIME類型13axis、abbr<Td>、<th>使用以明確簡潔的文字開頭、后跟詳述文字的形式。可以對更詳細(xì)內(nèi)容使用title屬性，來使單元格的內(nèi)容變得簡短14scope<td>在被鏈接的資源的中使用HTTPContent-type頭元素15align<caption>、<input>、<legend>、<div>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<p>使用CSS樣式表替代16alink、link、text、vlink、background、bgcolor<body>使用CSS樣式表替代17align、bgcolor、border、cellpadding、cellspacing、frame、rules、width<table>使用CSS樣式表替代18align、char、charoff、height、nowrap、valign<tbody>、<thead>、<tfoot>使用CSS樣式表替代19align、bgcolor、char、charoff、height、nowrap、valign、width<td>、<th>使用CSS樣式表替代20align、bgcolor、char、charoff、valign<tr>使用CSS樣式表替代表1-12

HTML5廢除的屬性列表序號在HTML4中使用的屬性使用該屬性的元素在HTML5中的替代方案21align、char、charoff、valign、width<col>、<colgroup>使用CSS樣式表替代22align、border、hspace、vspace<object>使用CSS樣式表替代23clear<br>使用CSS樣式表替代24compace、type<ol>、<ul>、<li>使用CSS樣式表替代25compace<dl>使用CSS樣式表替代26compace<menu>使用CSS樣式表替代27width<pre>使用CSS樣式表替代28align、hspace、vspace<img>使用CSS樣式表替代29align、noshade、size、width<hr>使用CSS樣式表替代30align、frameborder、scrolling、marginheight、marginwidth<iframe>使用CSS樣式表替代續(xù)表8．HTML5語義和結(jié)構(gòu)標(biāo)簽實(shí)例代碼探析圖1-2

example01.html網(wǎng)頁的瀏覽效果（1）HTML5的文檔聲明

說明：第一行<!DOCTYPEhtml>是HTML5對文檔類型的簡化描述，文檔類型的作用是驗(yàn)證器依據(jù)它來判斷該采用何種規(guī)則去驗(yàn)證代碼；強(qiáng)制瀏覽器以標(biāo)準(zhǔn)模式渲染頁面。（2）頭部（2）頭部（3）尾部（4）導(dǎo)航（5）區(qū)塊和文章（6）旁白和側(cè)邊欄9．HTML5中典型的標(biāo)記方法（1）內(nèi)容類型（ContentType）（2）DOCTYPE聲明（3）指定字符編碼（4）具有boolean值的屬性（5）引號10．HTML5主要的語義和結(jié)構(gòu)標(biāo)簽說明（1）<header>標(biāo)簽（2）<section>標(biāo)簽（3）<footer>標(biāo)簽（4）<article>標(biāo)簽（5）<aside>標(biāo)簽（6）<hgroup>標(biāo)簽11．<!DOCTYPE>聲明的用法 <!DOCTYPE>聲明必須是HTML文檔的第一行，位于<html>標(biāo)簽之前。 <!DOCTYPE>聲明不是HTML標(biāo)簽，它是指示W(wǎng)eb瀏覽器關(guān)于頁面應(yīng)使用哪個HTML版本進(jìn)行編寫的指令。12．HTML的注釋標(biāo)簽<!--…-->的用法13．如何插入樣式表

瀏覽網(wǎng)頁時，當(dāng)瀏覽器讀到一個樣式表時，瀏覽器會根據(jù)它來格式化HTML文檔。

插入樣式表的方法有以下3種。（1）外部樣式表（2）內(nèi)部樣式表（3）內(nèi)聯(lián)樣式14．網(wǎng)頁中的多重樣式15．標(biāo)記-moz-、-webkit-、-o-和-ms-的解釋引導(dǎo)訓(xùn)練【任務(wù)1-2】設(shè)計(jì)蘇寧易購網(wǎng)的首頁【任務(wù)描述】【任務(wù)實(shí)施】1．網(wǎng)頁0102.html的主體結(jié)構(gòu)設(shè)計(jì)

在本地硬盤的文件夾“01跨平臺的網(wǎng)站首頁設(shè)計(jì)\0102”中創(chuàng)建蘇寧易購網(wǎng)的首頁0102.html。

（1）定義網(wǎng)頁0102.html通用CSS代碼

（2）定義網(wǎng)頁0102.html主體結(jié)構(gòu)的CSS代碼

（3）編寫網(wǎng)頁0102.html主體結(jié)構(gòu)的HTML代碼2．網(wǎng)頁0102.html的局部內(nèi)容設(shè)計(jì)（1）網(wǎng)頁0102.html的頂部內(nèi)容設(shè)計(jì)（2）網(wǎng)頁0102.html的中部內(nèi)容設(shè)計(jì)（3）網(wǎng)頁0102.html的底部內(nèi)容設(shè)計(jì)【網(wǎng)頁瀏覽】

保存網(wǎng)頁0102.html，在瀏覽器GoogleChrome中的瀏覽效果如圖1-3所示?！救蝿?wù)1-3】設(shè)計(jì)窮游網(wǎng)的首頁【任務(wù)描述】圖1-4窮游網(wǎng)首頁0103.html的瀏覽效果

窮游網(wǎng)首頁0103.html主體結(jié)構(gòu)為左、右結(jié)構(gòu)，左側(cè)為首頁的導(dǎo)航欄，右側(cè)為首頁的主體內(nèi)容，如圖1-4所示。

左側(cè)結(jié)構(gòu)使用<aside>標(biāo)簽和<section>標(biāo)簽嵌套實(shí)現(xiàn)，右側(cè)結(jié)構(gòu)使用<section>標(biāo)簽實(shí)現(xiàn)。

網(wǎng)頁右側(cè)的主體內(nèi)容部分又分為上、中、下3個組成部分，網(wǎng)頁右側(cè)上部使用<header>標(biāo)簽實(shí)現(xiàn)，右側(cè)中部使用<section>標(biāo)簽實(shí)現(xiàn)，右側(cè)底部使用<footer>標(biāo)簽實(shí)現(xiàn)。

網(wǎng)頁左側(cè)的導(dǎo)航欄也分為上、中、下3個組成部分，分別使用<section>、<nav>和<section>標(biāo)簽實(shí)現(xiàn)。【任務(wù)實(shí)施】1．網(wǎng)頁0103.html的主體結(jié)構(gòu)設(shè)計(jì)（1）定義網(wǎng)頁0103.html通用CSS代碼（2）定義網(wǎng)頁0103.html主體結(jié)構(gòu)的CSS代碼（3）編寫網(wǎng)頁0103.html主體結(jié)構(gòu)的HTML代碼2．網(wǎng)頁0103.html的局部內(nèi)容設(shè)計(jì)（1）網(wǎng)頁0103.html的主體頂部內(nèi)容設(shè)計(jì)（2）網(wǎng)頁0103.html的主體中部內(nèi)容設(shè)計(jì)（3）網(wǎng)頁0103.html的主體底部內(nèi)容設(shè)計(jì)（4）網(wǎng)頁0103.html的側(cè)邊欄設(shè)計(jì)同步訓(xùn)練【任務(wù)1-4】設(shè)計(jì)同程旅游網(wǎng)的首頁【任務(wù)描述】

編寫HTML代碼和CSS代碼，設(shè)計(jì)圖1-5所示同程旅游網(wǎng)的首頁0104.html。圖1-5同程旅游網(wǎng)首頁0104.html的瀏覽效果

同程旅游網(wǎng)首頁0104.html的主體結(jié)構(gòu)為上、中、下結(jié)構(gòu)，如圖1-5所示。

頂部內(nèi)容包括返回鏈接按鈕、標(biāo)題文字和主頁鏈接按鈕，中部內(nèi)容為多個熱點(diǎn)鏈接按鈕，底部內(nèi)容包括多個超鏈接和版權(quán)信息。

網(wǎng)頁0104.html頂部結(jié)構(gòu)使用<header>標(biāo)簽實(shí)現(xiàn)，中部結(jié)構(gòu)使用<article>標(biāo)簽實(shí)現(xiàn)，底部結(jié)構(gòu)使用<footer>標(biāo)簽實(shí)現(xiàn)?！救蝿?wù)實(shí)施】1．網(wǎng)頁0104.html的主體結(jié)構(gòu)設(shè)計(jì)

在本地硬盤的文件夾“01跨平臺的網(wǎng)站首頁設(shè)計(jì)\