HTML5+CSS3移動Web開發(fā)實戰(zhàn)(第2版)_第1頁
HTML5+CSS3移動Web開發(fā)實戰(zhàn)(第2版)_第2頁
HTML5+CSS3移動Web開發(fā)實戰(zhàn)(第2版)_第3頁
HTML5+CSS3移動Web開發(fā)實戰(zhàn)(第2版)_第4頁
HTML5+CSS3移動Web開發(fā)實戰(zhàn)(第2版)_第5頁
已閱讀5頁，還剩680頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

單元

1

跨平臺的網(wǎng)站首頁設(shè)計HTML5的語義化標簽及屬性可以讓開發(fā)者非常方便地實現(xiàn)清晰的Web頁面布局，加上CSS3的效果渲染，使快速創(chuàng)建豐富靈活的Web頁面變得相對簡單。本單元通過對網(wǎng)站首頁設(shè)計的探析與訓練，重點介紹HTML5網(wǎng)頁的基本結(jié)構(gòu)及組成元素、HTML5的語義和結(jié)構(gòu)標簽、<!doctype>聲明等內(nèi)容。讀者應學會CSS樣式的定義方法與樣式表的插入方法，掌握網(wǎng)站首頁的設(shè)計方法。實例探析任務1-1探析攜程旅行網(wǎng)的首頁【效果展示】攜程旅行網(wǎng)首頁0101.html的瀏覽效果如圖1-1所示。攜程旅行網(wǎng)首頁0101.html的主體結(jié)構(gòu)包括4個組成部分，分別為頂部、中部、底部和側(cè)邊欄，頂部內(nèi)容為廣告圖片，中部內(nèi)容為多個圖片超鏈接，底部包括多個導航鏈接，側(cè)邊欄為長形按鈕?！揪W(wǎng)頁探析】1．網(wǎng)頁0101.html的HTML代碼探析攜程旅行網(wǎng)首頁0101.html的HTML代碼如表1-1所示。圖1-1攜程旅行網(wǎng)首頁0101.html的瀏覽效果序號HTML代碼0102030405060708091011121314151617181920212223242526272829<!doctypehtml><html><head><metacharset="utf-8"><title>酒店預訂,機票預訂查詢,旅游度假-攜程旅行網(wǎng)無線版官網(wǎng)</title><linkhref="css/common.css"rel="stylesheet"type="text/css"media="screen"/><linkhref="css/main.css"rel="stylesheet"type="text/css"media="screen"/></head><body><header><divclass="img-itemimg-size"><ahref="#"><imgsrc="images/01.jpg"title="攜程旅行"/></a></div></header><nav><ulclass="nav-list"><liclass="nav-flight"><h2><atitle="機票"href="#">機票</a></h2></li><liclass="nav-train"><h2><atitle="火車票"href="#">火車票</a></h2></li><liclass="nav-car"><h2><atitle="用車"href="#">用車</a></h2></li><liclass="nav-hotel"><h2><atitle="酒店"href="#">酒店</a></h2></li><liclass="nav-fortun"><h2><atitle="財富中心"href="#">財富中心</a></h2></li><liclass="nav-strategy"><h2><atitle="攻略"href="#">攻略</a></h2></li><liclass="nav-trip"><h2><atitle="旅游"href="#">旅游</a></h2></li><liclass="nav-ticket"><h2><atitle="門票"href="#">門票</a></h2></li><liclass="nav-week"><h2><atitle="周末游"href="#">周末游</a></h2></li></ul>表1-1網(wǎng)頁0101.html的HTML代碼序號HTML代碼303132333435363738394041424344454647484950

</nav><footerclass="tool-box"><divclass="tool-cn"><ahref="#"class="link-down">下載客戶端</a><ahref="#"class="link-mc">我的攜程</a></div><divclass="tool-ver"><ahref="#"class="english">ENGLISH</a><ahref="#"class="computer">電腦版</a><ahref="#"class="wap">意見反饋</a></div><p>攜程旅行</p></footer><asideclass="c_pop_wrap"><divclass="c_pop"><iclass="c_pop_trigon"></i><divclass="c_pop_cont">單擊下方圖標，選擇“添加至主屏幕”</div></div></aside></body></html>續(xù)表

網(wǎng)頁0101.html主體結(jié)構(gòu)的HTML代碼如表1-2所示。該網(wǎng)頁主體結(jié)構(gòu)包括4個組成部分，分別為頂部、中部、底部和側(cè)邊欄，其中頂部結(jié)構(gòu)使用<header>標簽實現(xiàn)，中部結(jié)構(gòu)使用<nav>標簽實現(xiàn)，底部結(jié)構(gòu)使用<footer>標簽實現(xiàn)，側(cè)邊欄使用<aside>標簽實現(xiàn)。序號HTML代碼0102030405060708<body><header></header><nav><ulclass="nav-list"></ul></nav><footerclass="tool-box"></footer><asideclass="c_pop_wrap"></aside></body>表1-2網(wǎng)頁0101.html主體結(jié)構(gòu)的HTML代碼2．網(wǎng)頁0101.html的CSS代碼探析網(wǎng)頁0101.html通用的CSS代碼如表1-3所示。序號CSS代碼序號CSS代碼0102030405html,body,nav,ul,li,h2{padding:0px;margin:0px;}body{0607080910

min-width:320px;font:normal14px/1.5emTahoma,"LucidaGrande",Verdana,"MicrosoftYahei",STXihei,hei;color:#000;表1-3網(wǎng)頁0101.html通用的CSS代碼序號CSS代碼序號CSS代碼1112131415161718192021background:#e8ff;overflow-x:hidden;}html,body{height:100%;}li{list-style-type:none;}img{2223242526272829303132

border:none}a{color:#000;text-decoration:none;}h:link,h:visited{color:#fff;}續(xù)表

網(wǎng)頁0101.html主體結(jié)構(gòu)的CSS代碼如表1-4所示。序號CSS代碼序號CSS代碼01020304050607080910111213141516171819header{

position:relative;

width:100%;

min-height:50px;

overflow:hidden;

background:#e2fc}.nav-list{

padding:10px10px5px10px;}.nav-list:after{

content:'\0020';

display:block;

clear:both;

height:0;

overflow:hidden;}20212223242526272829303132333435363738footer{

line-height:27px;

text-align:center;

font-size:12px;}.tool-box{

margin:010px;

padding-bottom:5px;}.c_pop_wrap{

position:fixed;

left:10px;

right:10px;

z-index:1000;

bottom:12px;

/*display:none;*/}表1-4網(wǎng)頁0101.html主體結(jié)構(gòu)的CSS代碼

網(wǎng)頁0101.html頂部內(nèi)容的CSS代碼如表1-5所示。序號CSS代碼序號CSS代碼01020304050607.img-item{height:100%;overflow:hidden;float:left;margin:10px0px0px;padding:0px;}08091011121314.img-size{width:1280px;height:110px;}.itemimg{width:100%;}表1-5網(wǎng)頁0101.html頂部內(nèi)容的CSS代碼序號CSS代碼序號CSS代碼010203040506070809101112131415161718192021222324252627282930313233343536373839404142434445464748.nav-listli{position:relative;float:left;margin-bottom:5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}.nav-listli:before{content:"";position:absolute;-webkit-transform:translate(-50%,0);-moz-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0);background-image:

url(../images/un_ico_home.png);background-size:170px160px;background-repeat:no-repeat;}.nav-listh2{position:absolute;left:8px;top:8px;font:50014px/1"MicrosoftYahei";color:#fff;}.nav-flight,.nav-train,.nav-car,.nav-trip,.nav-ticket,.nav-week{height:70px;}.nav-hotel,.nav-fortun,.nav-strategy{height:93px;}.nav-train,.nav-car,.nav-fortun,.nav-strategy,.nav-ticket,.nav-week{border-left:5pxsolid#fff;}.nav-flight,.nav-hotel,.nav-trip{width:40%;}495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596.nav-train,.nav-car,.nav-fortun,.nav-strategy,.nav-ticket,.nav-week{width:30%;}.nav-flight{background-color:#368ff4;}.nav-train{background-color:#00ae9d;}.nav-car{background-color:#3;}.nav-hotel{background-color:#0fc4d9;}.nav-fortun{background-color:#e8ff;}.nav-strategy{background-color:#ff;}.nav-trip{background-color:#84d018;}.nav-ticket{background-color:#f3b613;}.nav-week{background-color:#78cdd1;}.nav-list.nav-fortunh2,.nav-list.nav-fortunh{color:#ff9913;}.nav-list.nav-fortunh2{top:66px;表1-6網(wǎng)頁0101.html中部內(nèi)容的CSS代碼序號CSS代碼序號CSS代碼979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133left:0;width:100%;text-align:center;}.nav-flight:before{top:24px;left:60%;width:60px;height:35px;background-position:00;}.nav-train:before{top:36px;left:50%;width:50px;height:20px;background-position:-70px0;}.nav-car:before{top:30px;left:50%;width:35px;height:31px;background-position:-130px0;}.nav-hotel:before{top:30px;left:60%;width:58px;height:44px;background-position:0-40px;}134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170.nav-fortun:before{top:24px;left:50%;width:24px;height:35px;background-position:-60px-30px;}.nav-strategy:before{top:34px;left:50%;width:34px;height:34px;background-position:-120px-80px;}.nav-trip:before{top:25px;left:60%;width:40px;height:34px;background-position:0-90px;}.nav-ticket:before{top:32px;left:50%;width:50px;height:26px;background-position:-65px-70px;}.nav-week:before{top:32px;left:50%;width:49px;height:26px;background-position:-50px-100px;}續(xù)表

網(wǎng)頁0101.html底部內(nèi)容的CSS代碼如表1-7所示。序號CSS代碼序號CSS代碼010203040506.tool-cn{margin-bottom:3px;padding:8px0;height:24px;background-color:#fff;line-height:24px;070809101112

text-align:center;}.tool-cna{display:inline-block;padding:05px;line-height:1;表1-7網(wǎng)頁0101.html底部內(nèi)容的CSS代碼序號CSS代碼序號CSS代碼13141516171819202122232425262728293031color:#333;}.tool-cn.link-mc{position:relative;margin-left:5px;padding-left:35px;border-left:1pxsolid#c4cbce;}.tool-cna.link-tel{color:#0e68d5;}.tool-cn.link-mc:before{content:"";position:absolute;top:-2px;left:10px;width:16px;32333435363738394041424344454647484950

height:16px;background:url(../images/un_ico_home.png)no-repeat-30px-130px;background-size:170px160px;}.computer{margin-left:-4px;}.tool-vera{padding:018px;text-align:center;color:#333;}footerp{margin:0;line-height:18px;color:#626262;}續(xù)表

網(wǎng)頁0101.html側(cè)邊欄的CSS代碼如表1-8所示。序號CSS代碼序號CSS代碼01020304050607080910111213141516.c_pop{position:relative;z-index:9;height:100%;margin:010px;border-radius:8px;background:#000;opacity:0.7;filter:alpha(opacity:70);}.c_pop_trigon{position:absolute;width:0;height:0;}17181920212223242526272829303132.c_pop_trigon{z-index:-1;left:50%;margin-left:-6px;bottom:-8px;border-top:8pxsolid#000;border-left:8pxsolidtransparent;border-right:8pxsolidtransparent;}.c_pop_cont{padding:10px;font-size:600;text-align:center;color:#fff;}表1-8網(wǎng)頁0101.html側(cè)邊欄的CSS代碼知識梳理1．HTML5印象HTML5是萬維網(wǎng)的核心語言，它的第一份正式草案公布于2008年1月22日。2012年12月17日，萬維網(wǎng)聯(lián)盟（WorldWideWebConsortium，W3C）正式宣布凝結(jié)了大量網(wǎng)絡(luò)工作者心血的HTML5規(guī)范正式定稿。W3C的發(fā)言稿稱：“HTML5是開放的Web網(wǎng)絡(luò)平臺的奠基石?！?013年5月6日，HTML5.1正式草案公布。該規(guī)范定義了第五次重大版本，第一次要修訂萬維網(wǎng)的核心語言：超文本標記語言（HyperTextMarkupLanguage，HTML）。在這個版本中，新功能不斷推出，以幫助Web應用程序的開發(fā)者努力提高新元素的交互操作性。支持HTML5的瀏覽器包括Chrome（谷歌瀏覽器）、Firefox（火狐瀏覽器）、IE9及其更高版本、Safari、Opera等。傲游瀏覽器（Maxthon）以及基于IE或Chromium（Chrome的工程版或稱實驗版）所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹瀏覽器等國產(chǎn)瀏覽器同樣具備支持HTML5的能力。2．CSS3印象CSS（CascadingStyleSheet）可譯為層疊樣式表或級聯(lián)樣式表，是一組格式設(shè)置規(guī)則，用于控制Web頁面的外觀。在制作網(wǎng)頁時采用層疊樣式表技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其他效果實現(xiàn)精確控制。這時，只要對相應的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者不同網(wǎng)頁的外觀和格式。CSS3是CSS技術(shù)的升級版本。CSS3語言開發(fā)是朝著模塊化發(fā)展的。CSS3將完全向后兼容，網(wǎng)絡(luò)瀏覽器也還將繼續(xù)支持CSS2。CSS3可以使用新的可用的選擇器和屬性，可實現(xiàn)新的設(shè)計效果（例如漸變、交互和分欄）。3．HTML5的主要特性（1）語義特性（Class：Semantic）HTML5賦予網(wǎng)頁更好的意義和結(jié)構(gòu)，更加豐富的標簽將隨著對RDFa、微數(shù)據(jù)與微格式等方面的支持，構(gòu)建對程序、對用戶都更有價值的數(shù)據(jù)驅(qū)動的Web。（2）本地存儲特性（Class：Offline&Storagf）基于HTML5開發(fā)的網(wǎng)頁APP擁有更短的啟動時間和更快的聯(lián)網(wǎng)速度。這得益于HTML5APPCache及本地存儲功能。（3）設(shè)備兼容特性（Class：DeviceAccess）自Geolocation功能的API（ApplicationProgrammingInterface，應用程序編程接口）文檔公開以來，HTML5為網(wǎng)頁應用開發(fā)者們提供了更多功能上的優(yōu)化選擇。HTML5提供了前所未有的數(shù)據(jù)與應用接入開放接口，使外部應用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)相連，如視頻影音可直接與Microphones及攝像頭相連。（4）連接特性（Class：Connectivity）更有效的連接使得基于頁面的實時聊天、更快速的網(wǎng)頁游戲體驗、更優(yōu)化的在線交流得到了實現(xiàn)。HTML5擁有更有效的服務器推送技術(shù)，Server-SentEvent和WebSockets就是其中的兩個特性。這兩個特性能夠幫助我們實現(xiàn)從服務器將數(shù)據(jù)“推送”到客戶端的功能。（5）多媒體特性（Class：Multimedia）支持網(wǎng)頁端的Audio、Video等多媒體功能，與各種APPS（ApplicationService，應用服務）相得益彰。（6）三維、圖形及特效特性（Class：3D,Graphics&Effects）基于SVG、Canvas、WebGL及CSS3的3D功能，讓用戶驚嘆于HTML5在瀏覽器中所能呈現(xiàn)的驚人視覺效果。（7）性能與集成特性（Class：Performance&Integration）沒有用戶會永遠等待你的Loading（加載）——HTML5會通過XMLHttpRequest2等技術(shù)，解決以前的跨域等問題，幫助你的Web應用和網(wǎng)站在多樣化的環(huán)境中更快速的工作。（8）CSS3特性（Class：CSS3）在不犧牲性能和語義結(jié)構(gòu)的前提下，CSS3中提供了更多的風格和更強的效果。此外，較之以前的Web排版，Web的開放字體格式（WebOpenFontFormat，WOFF）也提供了更高的靈活性和控制性。4．HTML5的主要變化HTML5提供了一些新的元素和屬性，如<nav>（網(wǎng)站導航塊）和<footer>。這種標簽將有利于搜索引擎的索引整理，同時更好地幫助小屏幕裝置和視障人士使用。除此之外，HTML5還為其他瀏覽要素提供了新的功能，如<audio>和<video>標記。（1）取消了一些過時的標記（2）將內(nèi)容和展示分離（3）一些全新的表單輸入對象（4）全新的、更合理的Tag（5）本地數(shù)據(jù)庫（6）Canvas對象（7）瀏覽器中的真正程序5．HTML5新增的標簽和廢除的標簽

HTML5中，新增加了多個標簽元素，同時也廢除了多個標簽元素。（1）HTML5新增的標簽HTML5新增的標簽及其功能說明如表1-9所示。序號新增標簽名稱新增標簽的功能說明01<section>表示頁面中的一個內(nèi)容區(qū)塊，如章節(jié)、頁眉、頁腳或頁面的其他部分?？梢院?lt;h1>、<h2>等元素結(jié)合起來使用，表示文檔結(jié)構(gòu)02<article>表示頁面中一塊與上下文不相關(guān)的獨立內(nèi)容，如一篇文章03<aside>表示<article>元素內(nèi)容之外的并與<article>元素內(nèi)容相關(guān)的輔助信息04<header>表示頁面中一個內(nèi)容區(qū)塊或整個頁面的標題05<hgroup>表示對整個頁面或頁面中的一個內(nèi)容區(qū)塊的標題進行組合表1-9HTML5新增的標簽及其功能說明序號新增標簽名稱新增標簽的功能說明06<footer>表示頁面或頁面中一個內(nèi)容區(qū)塊的頁腳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)那些需要突出顯示或高亮顯示的文字，典型應用搜索結(jié)果中高亮顯示搜索關(guān)鍵字13<progress>表示運行中的進程，如等待中、請稍后等，可以使用<progress>元素顯示JavaScript中耗時函數(shù)的進程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)用的命令。該標簽可以定義命令按鈕，如單選按鈕、復選框或按鈕。只有當<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屬性設(shè)置為true，則可以在列表中選取一個以上的項目25<keygen>規(guī)定用于表單的密鑰對生成器字段。當提交表單時，私鑰存儲在本地，公鑰發(fā)送到服務器26<output>定義不同類型的輸出，如腳本的輸出27<source>該標簽為媒介元素（如<video>和<audio>）定義媒介資源續(xù)表（2）HTML5廢除的標簽HTML5廢除的標簽如表1-10所示。序號被廢除的標簽替代方案序號被廢除的元素替代方案01<basefont>、<big>、<center>、<font>、<s>、<strike>、<tt>、<u>使用CSS代替02<frameset>、<frame>、<noframes>使用<frame>框架或服務器方創(chuàng)建的由多個頁面組成的復合頁面代替表1-10HTML5廢除的標簽序號被廢除的標簽替代方案序號被廢除的元素替代方案03<rb>使用<ruby>替代08<applet>、<bgsound>、<blink>、<marquee>等標簽只有部分瀏覽器支持04<acronym>使用<abbr>替代09<nextid>使用GUIDS替代05<isindex>使用<form與<input>相結(jié)合的方式替代10<xmp>使用<code>替代06<dir>使用<ul>替代11<plaintex>使用“text/plian”MIME類型替代07<listing>使用<pre>替代續(xù)表6．HTML5新增和廢除的標簽屬性

HTML5中，在新增加和廢除很多標簽元素的同時，也增加和廢除了很多屬性。（1）HTML5新增的屬性HTML5新增的屬性如表1-11所示。序號屬性類型新增的屬性屬性說明01與表單相關(guān)的屬性對<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)建合法值的范圍06為<input>、<button>元素增加formaction、formenctype、formmethod、formnovalidate與formtarget屬性用戶重載<form>元素的action、enctype、method、novalidate與target屬性。為fieldset元素增加disabled屬性，可以把它的子元素設(shè)為disabled狀態(tài)07為<input>、<button>、<form>增加novalidate屬性可以取消提交時進行的有關(guān)檢查，表單可以被無條件地提交08與鏈接相關(guān)的屬性為<a>、<area>增加media屬性規(guī)定目標URL是為什么類型的媒介/設(shè)備而進行優(yōu)化的。該屬性可接受多個值，但只能在href屬性存在時使用09為<area>增加herflang和rel屬性hreflang屬性規(guī)定在被鏈接文檔中的文本語言。只有當設(shè)置了href屬性時，才能使用該屬性。rel屬性規(guī)定當前文檔與被鏈接文檔/資源之間的關(guān)系。只有當使用href屬性時，才能使用rel屬性表1-11HTML5新增的屬性列表序號屬性類型新增的屬性屬性說明10與鏈接相關(guān)的屬性為<link>增加size屬性size屬性規(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結(jié)合使用，定義一個URL，在這個URL上描述文檔的緩存信息17為<iframe>增加sandbox、seamless和srcdoc3個屬性用來提高頁面安全性，防止不信任的Web頁面執(zhí)行某些操作續(xù)表（2）HTML5廢除的屬性HTML4中的一些屬性在HTML5中不再被使用，這些屬性被其他屬性或其他方式替代，如表1-12所示。序號在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與type屬性類調(diào)用插件。需要使用這些屬性來設(shè)置參數(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樣式表替代表1-12HTML5廢除的屬性列表序號在HTML4中使用的屬性使用該屬性的元素在HTML5中的替代方案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樣式表替代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ù)表7．HTML5語義和結(jié)構(gòu)標簽實例代碼探析新建example01.html網(wǎng)頁文件，該網(wǎng)頁的瀏覽效果如圖1-2所示。網(wǎng)頁example01.html對應的HTML代碼如表1-13所示。圖1-2example01.html網(wǎng)頁的瀏覽效果序號HTML代碼010203040506070809101112<!doctypehtml><html><head><metacharset="utf-8"><title>HTML5專題</title><styletype="text/css"rel="stylesheet">header,nav,article,footer{padding:5px}header{width:300px;border:solid1px#666;}nav{float:left;width:70px;height:180px;border-left:solid1px#666;}article{float:left;width:219px;height:180px;border-left:solid1px#666;border-right:solid1px#666;}footer{clear:both;width:300px;border:solid1px#666;}表1-13網(wǎng)頁example01.html對應的HTML代碼序號HTML代碼13141516171819202122232425262728293031323334353637383940414243

ul,li{list-style-type:none;margin:0;padding:0;}a{text-decoration:none;color:black;}</style></head><body><header><hgroup>導航數(shù)據(jù)</hgroup></header><section><nav>導航菜單<ul><li><ahref="#">Home</a></li><li><ahref="#">One</a></li><li><ahref="#">Two</a></li><li><ahref="#">Three</a></li></ul></nav><article><h1>HTML5教程</h1>發(fā)布日期:<time>2019-10-809:00</time><p>相關(guān)內(nèi)容</p><aside><h2>ArticleAside</h2></aside></article></section><footer><address>地址</address></footer></body></html>續(xù)表

下面對表1-13中的HTML代碼的結(jié)構(gòu)及組成進行解析。（1）HTML5的文檔聲明創(chuàng)建example01.html網(wǎng)頁文件，如果使用的網(wǎng)頁編寫工具支持HTML5文件類型，那么，應該生成如下的HTML5模板：<!doctypehtml><html><head><metacharset="utf-8"><title>無標題文檔</title></head><body></body></html>（2）頭部網(wǎng)頁example01.html的頭部代碼由<header>標簽實現(xiàn)，如表1-13中的18～20行所示。<header>標簽不能和h1、h2、h3這些標題混為一談。<header>元素可以是從公司logo到搜索框在內(nèi)的各式各樣的內(nèi)容。同一個頁面可以包含多個<header>元素，每個獨立的區(qū)塊或文章都可以含有自己的<header>。（3）尾部網(wǎng)頁example01.html的尾部由<footer>標簽實現(xiàn)，如表1-13中的39～41行所示。<footer>元素位于頁面或者區(qū)塊的尾部，用法和<header>基本一樣，也會包含其他元素。（4）導航網(wǎng)頁example01.html的導航由<nav>標簽實現(xiàn)，如表1-13中的22～29行所示。網(wǎng)頁導航對于一個網(wǎng)頁來說至關(guān)重要?？焖?、方便的導航是留住訪客所必需的。導航可以被包含在<header>或<footer>或者其他區(qū)塊中，一個頁面可以有多個導航。（5）區(qū)塊和文章網(wǎng)頁example01.html的區(qū)塊和文章由<section>和<article>標簽實現(xiàn)，如表1-13中的21～38行所示。<section>元素將頁面的內(nèi)容合理歸類與布局，可以看到<article>元素還可以包含很多元素。（6）旁白和側(cè)邊欄網(wǎng)頁example01.html的側(cè)邊欄由<aside>實現(xiàn)，如表1-13中的34～36行所示。<aside>標簽可實現(xiàn)旁白，一般加在<article>中使用。<aside>元素是主內(nèi)容的附加信息，通常顯示成側(cè)邊欄或一些補充內(nèi)容。側(cè)邊欄不一定是旁白，可以看作是右面的一個區(qū)域，包含鏈接，可用<section>和<nav>實現(xiàn)。8．HTML5中典型的標記方法

（1）內(nèi)容類型（ContentType）HTML5文件的擴展名仍然為“.html”或者“.htm”，內(nèi)容類型（ContentType）仍然為“text/html”。（2）doctype聲明在HTML5中，使用<!doctypehtml>聲明。該聲明方式適用所有版本的HTML。HTML5中不可以使用版本聲明。（3）指定字符編碼HTML5中的字符編碼推薦使用UTF-8。HTML5中可以使用<meta>元素直接追加charset屬性的方式來指定字符編碼：<metachaarset="utf-8">。在HTML4中使用的<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">繼續(xù)有效，但不能同時混合使用兩種方式。（4）具有boolean值的屬性當只寫屬性而不指定屬性值時表示屬性為true，也可以將其他的屬性名設(shè)定為屬性值或?qū)⒖兆址O(shè)定為屬性值。如果想要將屬性值設(shè)置為false，則可以不使用該屬性。（5）引號指定屬性時屬性值兩邊既可以用雙引號，也可以用單引號。當屬性值不包括空字符串、“<”“>”“=”、單引號、雙引號等字符時，屬性兩邊的引號可以省略。例如<inputtype="text"><inputtype='text'><inputtype=text>。9．HTML5主要的語義和結(jié)構(gòu)標簽說明HTML5提供新的元素來創(chuàng)建更好的頁面結(jié)構(gòu)。（1）<header>標簽用于定義文檔的頭部區(qū)域，表示頁面中一個內(nèi)容區(qū)塊或整個頁面的標題。（2）<section>標簽用于定義文檔中的節(jié)（section、區(qū)段），表示頁面中的一個內(nèi)容區(qū)塊，如章節(jié)、頁眉、頁腳或頁面的其他部分?？梢院?lt;h1>、<h2>等元素結(jié)合起來使用，表示文檔結(jié)構(gòu)。（3）<footer>標簽用于定義文檔或節(jié)的頁腳部分，表示整個頁面或頁面中一個內(nèi)容區(qū)塊的腳注，通常包含文檔的作者、版權(quán)信息、使用條款鏈接、聯(lián)系信息等。可以在一個文檔中使用多個<footer>元素，<footer>元素內(nèi)的聯(lián)系信息應該位于<address>標簽中。（4）<article>標簽用于定義頁面中一塊與上下文不相關(guān)的獨立內(nèi)容，如一篇文章。<article>元素的潛在來源可能有論壇帖子、報紙文章、博客條目、用戶評論等。（5）<aside>標簽用于定義頁面內(nèi)容之外的內(nèi)容，表示article元素內(nèi)容之外的與article元素內(nèi)容相關(guān)的輔助信息。（6）<hgroup>標簽用于對整個頁面或頁面中的一個內(nèi)容區(qū)塊的標題進行組合。

10．<!doctype>聲明的用法<!doctype>聲明必須是HTML文檔的第一行，位于<html>標簽之前。<!doctype>聲明不是HTML標簽，它是指示W(wǎng)eb瀏覽器關(guān)于頁面應使用哪個HTML版本進行編寫的指令。

在HTML4.01中，<!doctype>聲明引用DTD（DocumentTypeDefinition，文檔類型定義），因為HTML4.01基于SGML。DTD規(guī)定了標簽語言的規(guī)則，這樣瀏覽器才能正確地呈現(xiàn)內(nèi)容。HTML5不基于SGML，所以不需要引用DTD。在HTML4.01中有3種<!doctype>聲明。在HTML5中只有一種——<!doctypehtml>。<!doctype>聲明沒有結(jié)束標記，并且對大小寫不敏感。應始終向HTML文檔添加<!doctype>聲明，這樣瀏覽器才能獲知文檔類型。11．HTML的注釋標簽<!--…-->的用法網(wǎng)頁中HTML的注釋標簽<!--…-->使用實例如下：<!--這是一段注釋，注釋不會在瀏覽器中顯示-->所有瀏覽器都支持注釋標簽，注釋標簽用于在源代碼中插入注釋，注釋不會顯示在瀏覽器中。使用注釋對代碼進行解釋有助于以后對代碼的編輯。這在編寫了大量代碼時尤其有用。

使用注釋標簽來隱藏瀏覽器不支持的腳本也是一個好習慣，這樣就不會把腳本顯示為純文本。觀察以下JavaScript代碼：<scripttype="text/javascript"><!--functiondisplayMsg(){alert("HelloWorld!")}//--></script>

注釋行結(jié)尾處的兩條斜杠（//）是JavaScript注釋符號，這樣可以避免JavaScript執(zhí)行“-->”標簽。12．如何插入樣式表瀏覽網(wǎng)頁時，當瀏覽器讀到一個樣式表時，瀏覽器會根據(jù)它來格式化HTML文檔。插入樣式表的方法有以下3種。（1）外部樣式表當樣式需要應用于很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，可以通過改變一個文件來改變整個站點的外觀。每個頁面使用<link>標簽鏈接到樣式表。<link>標簽通常用在文檔的頭部，示例代碼如下所示：<head><linkrel="stylesheet"type="text/css"href="mystyle.css"/></head>

瀏覽器會從文件外部樣式表mystyle.css中讀到樣式聲明，并根據(jù)它來格式文檔。外部樣式表可以在任何文本編輯器中進行編輯，樣式表應該以.css擴展名進行保存。外部樣式表文件不能包含任何的html標簽，下面是一個樣式表文件的實例：hr{color:sienna;}p{margin-left:20px;}body{background-image:url("images/back40.gif");}（2）內(nèi)部樣式表當單個文檔需要特殊的樣式時，就應該使用內(nèi)部樣式表?？梢允褂?lt;style>標簽在文檔頭部定義內(nèi)部樣式表，示例代碼如下所示：<head><styletype="text/css">

hr{color:sienna;}

p{margin-left:20px;}

body{background-image:url("images/back40.gif");}</style></head>（3）內(nèi)聯(lián)樣式由于內(nèi)聯(lián)樣式要將表現(xiàn)和內(nèi)容混雜在一起，內(nèi)聯(lián)樣式會損失掉樣式表的許多優(yōu)勢，所以應慎用這種方法，當樣式僅需要在一個元素上應用一次時可以使用內(nèi)聯(lián)樣式。要使用內(nèi)聯(lián)樣式，需要在相關(guān)的標簽內(nèi)使用樣式（style）屬性。style屬性可以包含任何CSS屬性。以下代碼展示了如何改變段落的顏色和左外邊距：<pstyle="color:sienna;margin-left:20px">

Thisisaparagraph</p>13．網(wǎng)頁中的多重樣式如果網(wǎng)頁中的某些屬性在不同的樣式表中被同樣的選擇器定義，那么屬性值將被繼承過來。例如，外部樣式表擁有針對h3選擇器的3個屬性，代碼如下：h3{color:red;text-align:left;font-size:8pt;}

而內(nèi)部樣式表擁有針對h3選擇器的兩個屬性，代碼如下：h3{text-align:right;font-size:20pt;}假如擁有內(nèi)部樣式表的這個頁面同時與外部樣式表鏈接，那么h3得到的樣式是：color:red;text-align:right;font-size:20pt;即顏色屬性將被繼承于外部樣式表，而文字排列（text-alignment）和字體尺寸（font-size）會被內(nèi)部樣式表中的規(guī)則取代。14．標記-moz-、-webkit-、-o-和-ms-的解釋（1）-moz-：以-moz-開頭的樣式代表Firefox瀏覽器特有的屬性，只有Webkit瀏覽器可以解析。moz是Mozilla的縮寫。（2）-webkit-：以-webkit-開頭的樣式代表Webkit瀏覽器特有的屬性，只有Webkit瀏覽器可以解析。WebKit是一個開源的瀏覽器引擎，Chrome、Safari瀏覽器即采用WebKit內(nèi)核。（3）-o-：以-o-開頭的樣式代表Opera瀏覽器特有的屬性，只有Opera瀏覽器可以解析。（4）-ms-：以-ms-開頭的樣式代表IE瀏覽器特有的屬性，只有IE瀏覽器可以解析。引導訓練任務1-2設(shè)計蘇寧易購網(wǎng)的首頁【任務描述】編寫HTML代碼和CSS代碼，設(shè)計圖1-3所示的蘇寧易購網(wǎng)的首頁0102.html。蘇寧易購網(wǎng)首頁0102.html的主體結(jié)構(gòu)為頂部、中部、底部結(jié)構(gòu)。頂部內(nèi)容包括3個導航超鏈接和1個Logo圖片；中部內(nèi)容包括多個由圖片和文字組成的導航超鏈接；底部內(nèi)容也由3個部分組成，從上至下依次為當前用戶和“回頂部”錨點鏈接按鈕、登錄和注冊超鏈接、版權(quán)信息。

網(wǎng)頁0102.html頂部結(jié)構(gòu)使用<nav>標簽實現(xiàn)，中部結(jié)構(gòu)使用<section>標簽和<article>標簽實現(xiàn)，底部結(jié)構(gòu)使用<footer>標簽實現(xiàn)。圖1-3蘇寧易購網(wǎng)首頁0102.html的瀏覽效果【任務實施】1．網(wǎng)頁0102.html的主體結(jié)構(gòu)設(shè)計在本地硬盤的文件夾“01跨平臺的網(wǎng)站首頁設(shè)計\0102”中創(chuàng)建蘇寧易購網(wǎng)的首頁0102.html。（1）編寫網(wǎng)頁0102.html通用的CSS代碼蘇寧易購網(wǎng)的首頁0102.html通用的CSS代碼如表1-14所示。序號CSS代碼序號CSS代碼0102030405060708091011121314151617181920212223242526*{

-webkit-tap-highlight-color:rgba(0,0,0,0);}body,div,ul,ol,li,section,article,aside,header,footer,nav{margin:0;padding:0;}body{font-family:"microsoftyahei",sans-serif;font-size:12px;min-width:320px;line-height:1.5;color:#333;background:#F2EEE0;}img{border:0;}h1,h2,h3,h4,h5,h6{font-size:100%;}2728293031323334353637383940414243444546474849505152input,img{vertical-align:middle;}input:focus{outline:none;}a{color:#444;text-decoration:none;}table{border-collapse:collapse;border-spacing:0;}ul,ol,li{list-style:none;}em,i{font-style:normal;}表1-14網(wǎng)頁0102.html通用的CSS代碼（2）編寫網(wǎng)頁0102.html主體結(jié)構(gòu)的CSS代碼網(wǎng)頁0102.html主體結(jié)構(gòu)的CSS代碼如表1-15所示。序號CSS代碼序號CSS代碼01020304050607080910111213141516.w{width:320px!important;margin:0auto;}.pr{position:relative;}.nav{height:46px;background:-webkit-gradient(linear,0%0,0%100%,from(#F3E6),to(#F1E8D6));border-top:1pxsolid#FBF0;border-bottom:1pxsolid#E9E5D7;}17181920212223242526272829303132.f14{

font-size:14px;}.easy-box-con{

margin:0auto;

padding-top:15px;

background:#f4eb;}.footer{

margin-top:10px;

font-size:14px;}.layout{

margin:010px;表1-15網(wǎng)頁0102.html主體結(jié)構(gòu)的CSS代碼序號CSS代碼序號CSS代碼33343536373839404142

-webkit-box-sizing:border-box;}.user-info{

margin:010px;}.tc{

text-align:center;}43

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論