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

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

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

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

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

通用置標語言下的一個應用超文本標記語言

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

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

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

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

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

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

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

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

這些模塊包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等。3．HTML5的主要特性（1）語義特性（Class：Semantic）（2）本地存儲特性（Class：Offline&Storagf）（3）設備兼容特性（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)站導航塊）和<footer>。

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

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

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

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

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

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

HTML5新增的屬性列表序號屬性類型新增的屬性屬性說明06與表單相關的屬性為<input>、<button>元素增加formaction、formenctype、formmethod、formnovalidate與formtarget屬性用戶重載<form>元素的action、enctype、method、novalidate與target屬性。為fieldset元素增加disabled屬性，可以把它的子元素設為disabled狀態(tài)07為<input>、<button>、<form>增加novalidate屬性可以取消提交時進行的有關檢查，表單可以被無條件地提交08與鏈接相關屬性為<a>、<area>增加media屬性規(guī)定目標URL是為什么類型的媒介/設備進行優(yōu)化的。該屬性用于規(guī)定目標URL是為特殊設備（如iPhone）、語音或打印媒介設計的。該屬性可接受多個值。只能在href屬性存在時使用09為<area>增加herflang和rel屬性hreflang屬性規(guī)定在被鏈接文檔中的文本的語言。只有當設置了href屬性時，才能使用該屬性。rel屬性規(guī)定當前文檔與被鏈接文檔/資源之間的關系。只有當使用href屬性時，才能使用rel屬性10為<link>增加size屬性sizes屬性規(guī)定被鏈接資源的尺寸。只有當被鏈接資源是圖標時（rel="icon"），才能使用該屬性。該屬性可接受多個值，并且值由空格分隔11為<base>增加target屬性主要是保持與<a>元素的一致性12其他屬性為<ol>增加reversed屬性它指定列表倒序顯示13為<meta>增加charset屬性定義HTML文檔的字符集14為<menu>增加label和type屬性label屬性規(guī)定菜單的可見標簽，type屬性規(guī)定要顯示哪種菜單類型15為<style>增加scoped屬性它允許我們?yōu)槲臋n的指定部分定義樣式，而不是整個文檔。如果使用“scoped”屬性，那么所規(guī)定的樣式只能應用到<style>元素的父元素及其子元素16為<html>增加manifest屬性開發(fā)離線Web應用程序時，它與API結合使用，定義一個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ù)時，使用param屬性12valuetype、type<param>使用name與value屬性，不聲明其MIME類型13axis、abbr<Td>、<th>使用以明確簡潔的文字開頭、后跟詳述文字的形式?？梢詫Ω敿殐?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語義和結構標簽實例代碼探析圖1-2

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

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

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

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

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

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

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

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

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

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

左側結構使用<aside>標簽和<section>標簽嵌套實現(xiàn)，右側結構使用<section>標簽實現(xiàn)。

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

網(wǎng)頁左側的導航欄也分為上、中、下3個組成部分，分別使用<section>、<nav>和<section>標簽實現(xiàn)?！救蝿諏嵤?．網(wǎng)頁0103.html的主體結構設計（1）定義網(wǎng)頁0103.html通用CSS代碼（2）定義網(wǎng)頁0103.html主體結構的CSS代碼（3）編寫網(wǎng)頁0103.html主體結構的HTML代碼2．網(wǎng)頁0103.html的局部內(nèi)容設計（1）網(wǎng)頁0103.html的主體頂部內(nèi)容設計（2）網(wǎng)頁0103.html的主體中部內(nèi)容設計（3）網(wǎng)頁0103.html的主體底部內(nèi)容設計（4）網(wǎng)頁0103.html的側邊欄設計同步訓練【任務1-4】設計同程旅游網(wǎng)的首頁【任務描述】

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

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

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

網(wǎng)頁0104.html頂部結構使用<header>標簽實現(xiàn)，中部結構使用<article>標簽實現(xiàn)，底部結構使用<footer>標簽實現(xiàn)?！救蝿諏嵤?．網(wǎng)頁0104.html的主體結構設計

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