html5 css3網(wǎng)站實例教程

html5 和css3 技術(shù)是目前整個網(wǎng)頁的基礎(chǔ)。本書共分3 部分，集中討論了html5 和css3 規(guī)范及其技術(shù)的使用方法。這一版全面講解了最新的html5 和css3 技術(shù)，所有實例均使用最新特性實現(xiàn)，針對的是最新版本的瀏覽器。

創(chuàng)新互聯(lián)公司IDC提供業(yè)務(wù):成都服務(wù)器托管,成都服務(wù)器租用,成都服務(wù)器托管,重慶服務(wù)器租用等四川省內(nèi)主機托管與主機租用業(yè)務(wù);數(shù)據(jù)中心含:雙線機房,BGP機房,電信機房,移動機房,聯(lián)通機房。

《html5與css3實例教程》適合所有使用html 和css 的web 開發(fā)人員學習參考。

HTML5怎么制作響應(yīng)式網(wǎng)頁

1.調(diào)整視口

代碼實例：

!DOCTYPE?html

head

meta?charset="UTF-8"?/

title布局之路-移動端開發(fā)實例/title

meta?name="viewport"?content="width=device-width,user-scalable?=?no"?/

link?rel="stylesheet"?type="text/css"?href="css/reset.css"?/

/head

body

div?class="wrap"/div

/body

/html

代碼解析：由于使用不同設(shè)備打開網(wǎng)頁時，寬度均有所不同，所以不能講視口設(shè)置為固定值，應(yīng)當為width=device-width,即將視口設(shè)置為當前設(shè)備的寬度。

2.確定設(shè)計圖的最小字體

瀏覽器（部分）能夠顯示的最小字體未12px，當移動端頁面寬度為320px時，要保證最小字體為12px，那么在1080px的設(shè)計圖中，最小字體應(yīng)當為42px。

代碼實例：

style?type="text/css"

html?{

font-size:?42px;

}

/style

3.浮動布局

各個區(qū)塊都是浮動的，不是固定不變的。為了能自適應(yīng)各個窗口。

代碼實例：

.main?{

float:?left;

width:?70%;

}

.box?{

float:?left;

width:?60.93%;

font-size:?1.71rem;

text-align:?center;

line-height:?4.64rem;

}

float浮動的好處就是，如果寬度不夠放置下這個元素，元素會自動滾動到下方。

4.通過媒介查詢，為不同設(shè)備加載相應(yīng)樣式

有條件應(yīng)用樣式：

style

@media?all?and(min-width:500px){?...?}

@media?(orientation){?...?}

/style

代碼解析：

第一行媒體查詢代碼指的是：為寬度大于等于500px的設(shè)備設(shè)置樣式。

第二行媒體查詢代碼指的是：為縱屏狀態(tài)（可見區(qū)域大于或等于寬度）下的移動端設(shè)備設(shè)置樣式。

有條件的加載樣式表：

head

link?rel="stylesheet"?href="wide.css"?media="screen?and(min-width:1024)"?/

link?rel="stylesheet"?href="mobile.css"?media="screen?and(max-width:320)"?/

/head

代碼解析：

第一行媒體查詢代碼指的是：為寬度大于等于1024px的設(shè)備，加載wide.css文件。

第二行媒體查詢代碼指的是：為寬度小于等于320px的設(shè)備，加載mobile.css文件。

5.使用百分比和rem替換px

除了布局和文本，"自適應(yīng)網(wǎng)頁設(shè)計"還必須實現(xiàn)圖片的自動縮放。

代碼效果對比：

/*使用固定像素*/

.box?{

float:?left;

width:?658px;

font-size:?72px;

text-align:?center;

line-height:?195px;

}

/*使用百分比和rem*/

.box?{

float:?left;

width:?60.93%;

font-size:?1.71rem;

text-align:?center;

line-height:?4.64rem;

}

代碼解析：

水平方向的值，將具體像素調(diào)整為百分比。百分比的計算是根據(jù)父級的內(nèi)容區(qū)寬度進行計算的。

例如，父級寬度為1080px， 子級元素為197px，那么子元素轉(zhuǎn)換為百分比為：197/1080*100%=18.24%。需要注意的是百分比根據(jù)父級計算，當標簽結(jié)構(gòu)級別不同時，計算公式中的“分母”也有所不同，在開發(fā)時這個地方很容易出現(xiàn)問題，請務(wù)必注意。

垂直方向的值，將具體像素調(diào)整為rem，與水平方向相比，垂直方向的計算就比較簡單。例如，行高為195px，HTML標簽當前的字體大小為42px，將行高轉(zhuǎn)換為rem單位，即195/42= 4. 64rem。

如何使用HTML5地理位置定位功能

HTML5提供了地理位置定位功能（Geolocation API），能確定用戶位置，我們可以借助HTML5的該特性開發(fā)基于地理位置信息的應(yīng)用。本文結(jié)合實例給大家分享如何使用HTML5，借助百度、谷歌地圖接口來獲取用戶準確的地理位置信息。

定位功能（Geolocation）是HTML5的新特性，因此只有在支持HTML5的現(xiàn)代瀏覽器上運行，特別是手持設(shè)備如iphone，地理定位更加精確。首先我們要檢測用戶設(shè)備瀏覽器是否支持地理定位，如果支持則獲取地理信息。注意這個特性可能侵犯用戶的隱私，除非用戶同意，否則用戶位置信息是不可用的，所以我們在訪問該應(yīng)用時會提示是否允許地理定位，我們當然選擇允許即可。

?

1

2

3

4

5

6

7

function getLocation(){

if (navigator.geolocation){

navigator.geolocation.getCurrentPosition(showPosition,showError);

}else{

alert("瀏覽器不支持地理定位。");

}

}

上面的代碼可以知道，如果用戶設(shè)備支持地理定位，則運行 getCurrentPosition() 方法。如果getCurrentPosition()運行成功，則向參數(shù)showPosition中規(guī)定的函數(shù)返回一個coordinates對象，getCurrentPosition() 方法的第二個參數(shù)showError用于處理錯誤，它規(guī)定當獲取用戶位置失敗時運行的函數(shù)。

我們先來看函數(shù)showError()，它規(guī)定獲取用戶地理位置失敗時的一些錯誤代碼處理方式：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

function showError(error){

switch(error.code) {

case error.PERMISSION_DENIED:

alert("定位失敗,用戶拒絕請求地理定位");

break;

case error.POSITION_UNAVAILABLE:

alert("定位失敗,位置信息是不可用");

break;

case error.TIMEOUT:

alert("定位失敗,請求獲取用戶位置超時");

break;

case error.UNKNOWN_ERROR:

alert("定位失敗,定位系統(tǒng)失效");

break;

}

}

我們再來看函數(shù)showPosition(),調(diào)用coords的latitude和longitude即可獲取到用戶的緯度和經(jīng)度。

?

1

2

3

4

5

function showPosition(position){

var lat = position.coords.latitude; //緯度

var lag = position.coords.longitude; //經(jīng)度

alert('緯度:'+lat+',經(jīng)度:'+lag);

}

利用百度地圖和谷歌地圖接口獲取用戶地址

上面我們了解了HTML5的Geolocation可以獲取用戶的經(jīng)緯度，那么我們要做的是需要把抽象的經(jīng)緯度轉(zhuǎn)成可讀的有意義的真正的用戶地理位置信息。幸運的是百度地圖和谷歌地圖等提供了這方面的接口，我們只需要將HTML5獲取到的經(jīng)緯度信息傳給地圖接口，則會返回用戶所在的地理位置，包括省市區(qū)信息，甚至有街道、門牌號等詳細的地理位置信息。

我們首先在頁面定義要展示地理位置的div，分別定義id#baidu_geo和id#google_geo。我們只需修改關(guān)鍵函數(shù)showPosition()。先來看百度地圖接口交互，我們將經(jīng)緯度信息通過Ajax方式發(fā)送給百度地圖接口，接口會返回相應(yīng)的省市區(qū)街道信息。百度地圖接口返回的是一串JSON數(shù)據(jù)，我們可以根據(jù)需求將需要的信息展示給div#baidu_geo。注意這里用到了jQuery庫，需要先加載jQuery庫文件。

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

function showPosition(position){

var latlon = position.coords.latitude+','+position.coords.longitude;

//baidu

var url = ";callback=renderReverselocation="+latlon+"output=jsonpois=0";

$.ajax({

type: "GET",

dataType: "jsonp",

url: url,

beforeSend: function(){

$("#baidu_geo").html('正在定位...');

},

success: function (json) {

if(json.status==0){

$("#baidu_geo").html(json.result.formatted_address);

}

},

error: function (XMLHttpRequest, textStatus, errorThrown) {

$("#baidu_geo").html(latlon+"地址位置獲取失敗");

}

});

});

再來看谷歌地圖接口交互。同樣我們將經(jīng)緯度信息通過Ajax方式發(fā)送給谷歌地圖接口，接口會返回相應(yīng)的省市區(qū)街道詳細信息。谷歌地圖接口返回的也是一串JSON數(shù)據(jù)，這些JSON數(shù)據(jù)比百度地圖接口返回的要更詳細，我們可以根據(jù)需求將需要的信息展示給div#google_geo。

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

function showPosition(position){

var latlon = position.coords.latitude+','+position.coords.longitude;

//google

var url = ''+latlon+'language=CN';

$.ajax({

type: "GET",

url: url,

beforeSend: function(){

$("#google_geo").html('正在定位...');

},

success: function (json) {

if(json.status=='OK'){

var results = json.results;

$.each(results,function(index,array){

if(index==0){

$("#google_geo").html(array['formatted_address']);

}

});

}

},

error: function (XMLHttpRequest, textStatus, errorThrown) {

$("#google_geo").html(latlon+"地址位置獲取失敗");

}

});

}

以上的代碼分別將百度地圖接口和谷歌地圖接口整合到函數(shù)showPosition()中，我們可以根據(jù)實際情況進行調(diào)用。當然這只是一個簡單的應(yīng)用，我們可以根據(jù)這個簡單的示例開發(fā)出很多復雜的應(yīng)用，建議用手機瀏覽器訪問DEMO演示。

如何用html5開發(fā)wap版實例

下面列舉HTML5適合移動應(yīng)用開發(fā)的幾大特性：

1.離線緩存為HTML5開發(fā)移動應(yīng)用提供了基礎(chǔ)

HTML5 Web Storage API可以看做是加強版的cookie，不受數(shù)據(jù)大小限制，有更好的彈性以及架構(gòu)，可以將數(shù)據(jù)寫入到本機的ROM中，還可以在關(guān)閉瀏覽器后再次打開時恢復數(shù)據(jù)，以減少網(wǎng)絡(luò)流量。

同時，這個功能算得上是另一個方向的后臺“操作記錄”，而不占用任何后臺資源，減輕設(shè)備硬件壓力，增加運行流暢性。

在線app支持邊使用邊下載離線緩存，或者不下載離線緩存；而離線app必須是下載完離線緩存才能使用。

形象點說，cookie就是存了電話和菜單，想吃什么要叫外賣，等多長時間才能吃到就得看交通情況了；離線緩存就是直接在冰箱里存了食物，想吃就能馬上吃到（當然，想吃最新的食物同樣可以打電話預(yù)定）。

設(shè)計師要知道，什么時候讓用戶下載離線緩存（注意在線和離線app的區(qū)別）。

2.音頻視頻自由嵌入，多媒體形式更為靈活

原生開發(fā)方式對于文字和音視頻混排的多媒體內(nèi)容處理相對麻煩，需要拆分開文字、圖片、音頻、視頻，解析對應(yīng)的URL并分別用不同的方式處理。

HTML5在這個方面完全不受限制，可以完全放在一起進行處理。

設(shè)計師要知道，如果新聞類、微博類、社交類應(yīng)用的信息呈現(xiàn)中實現(xiàn)文字與多媒體混排，而不用專門嵌入webview，將是一件多美好的事情，至少現(xiàn)在原生方式實現(xiàn)起來還有困難。

3.地理定位，隨時隨地分享位置

充分發(fā)揮移動設(shè)備對定位上的優(yōu)勢，推動LBS應(yīng)用發(fā)展。

可以綜合使用GPS、wifi、手機等方式讓定位更為精準、靈活。

地理位置定位，讓定位和導航不再專屬導航軟件，地圖也不用下載非常大的地圖包，可以通過緩存來解決，到哪兒下哪兒，更靈活。

設(shè)計師要知道，現(xiàn)在嵌入LBS功能的應(yīng)用越來越多，這也是移動設(shè)備與臺式PC相比最大的優(yōu)勢之一，HTML5能把這個優(yōu)勢再度擴大化，好好想想怎么在你設(shè)計的應(yīng)用里用上吧！

4.Canvas繪圖，提升移動平臺的繪圖能力

使用Canvas API可以簡單繪制熱點圖收集用戶體驗資料

支持圖片的移動、旋轉(zhuǎn)、縮放等常規(guī)編輯

Canvas – 2D的繪圖功能支持

Canvas 3D – 3D的繪圖功能支持

SVG – 向量圖支援

設(shè)計師要知道，圖片的移動、旋轉(zhuǎn)、縮放？那都太基礎(chǔ)了，自己畫都是小case，至于怎么用，好好想想吧！

5.專為移動平臺定制的表單元素

瀏覽器中出現(xiàn)的html5表單元素與對應(yīng)的鍵盤：

類型 用途 鍵盤

Text 正常輸入內(nèi)容 標準鍵盤

Tel 電話號碼 數(shù)字鍵盤

Email 電子郵件地址文本框 帶有@和.的鍵盤

url 網(wǎng)頁的URL 帶有.com和.的鍵盤

Search 用于搜索引擎，比如在站點頂部顯示的搜索框 標準鍵盤

range 特定值范圍內(nèi)的數(shù)值選擇器，典型的顯示方式是滑動條 滑動條或轉(zhuǎn)盤

只需要簡單的聲明 input type=”email” 即可完成對不同樣式鍵盤的調(diào)用，簡捷方便。

設(shè)計師要知道，用的時候記得告訴研發(fā)同事一聲！

html5有什么新的功能？

HTML5提供了一些新的元素和屬性，例如nav（網(wǎng)站導航塊）和footer。這種標簽將有利于搜索引擎的索引整理，同時更好的幫助小屏幕裝置和視障人士使用，除此之外，還為其他瀏覽要素提供了新的功能，如audio和video標記。 1.取消了一些過時的HTML4標記 其中包括純粹顯示效果的標記，如font和center，它們已經(jīng)被CSS取代。 HTML5 吸取了XHTML2 一些建議，包括一些用來改善文檔結(jié)構(gòu)的功能，比如，新的HTML 標簽 header, footer, dialog, aside, figure 等的使用，將使內(nèi)容創(chuàng)作者更加語義地創(chuàng)建文檔，之前的開發(fā)者在實現(xiàn)這些功能時一般都是使用div。 2.將內(nèi)容和展示分離 b 和 i 標簽依然保留，但它們的意義已經(jīng)和之前有所不同，這些標簽的意義只是為了將一段文字標識出來，而不是為了為它們設(shè)置粗體或斜體式樣。u，font，center，strike 這些標簽則被完全去掉了。 3.一些全新的表單輸入對象 包括日期，URL，Email 地址，其它的對象則增加了對非拉丁字符的支持。HTML5 還引入了微數(shù)據(jù)，這一使用機器可以識別的標簽標注內(nèi)容的方法，使語義Web 的處理更為簡單。總的來說，這些與結(jié)構(gòu)有關(guān)的改進使內(nèi)容創(chuàng)建者可以創(chuàng)建更干凈，更容易管理的網(wǎng)頁，這樣的網(wǎng)頁對搜索引擎，對讀屏軟件等更為友好。 4.全新的，更合理的Tag 多媒體對象將不再全部綁定在 object 或 embed Tag 中，而是視頻有視頻的Tag，音頻有音頻的 Tag。 5.本地數(shù)據(jù)庫 這個功能將內(nèi)嵌一個本地的SQL 數(shù)據(jù)庫，以加速交互式搜索，緩存以及索引功能。同時，那些離線Web 程序也將因此獲益匪淺。不需要插件的富動畫。 6.Canvas 對象 將給瀏覽器帶來直接在上面繪制矢量圖的能力，這意味著用戶可以脫離Flash 和Silverlight，直接在瀏覽器中顯示圖形或動畫。 7.瀏覽器中的真正程序 將提供 API 實現(xiàn)瀏覽器內(nèi)的編輯，拖放，以及各種圖形用戶界面的能力。內(nèi)容修飾Tag 將被剔除，而使用CSS。 8.Html5取代Flash在移動設(shè)備的地位。

重要標記

video標記

定義和用法： video 標簽定義視頻，比如電影片段或其他視頻流。

audio 標記

定義和用法 audio 標簽定義聲音，比如音樂或其他音頻流。 實例： 一段簡單的HTML 5 音頻 audio src="someaudio.wav" 您的瀏覽器不支持 audio 標簽。 /audio

canvas 標記

定義和用法： canvas 標簽定義圖形，比如圖表和其他圖像。 HTML5 的 canvas 元素使用JavaScript 在網(wǎng)頁上繪制圖像。 畫布是一個矩形區(qū)域，您可以控制其每一像素。 canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。 實例： 通過 canvas 元素來顯示一個紅色的矩形： canvas id="myCanvas"/canvas script type="text/javascript" var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); /script

分享題目：包含html5開發(fā)實例的詞條
分享路徑：http://chinadenli.net/article24/dsisjje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、營銷型網(wǎng)站建設(shè)、品牌網(wǎng)站制作、小程序開發(fā)、動態(tài)網(wǎng)站、網(wǎng)站導航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)