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

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

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、新平網(wǎng)絡(luò)推廣、微信小程序開發(fā)、新平網(wǎng)絡(luò)營(yíng)銷、新平企業(yè)策劃、新平品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供新平建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：chinadenli.net

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

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

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

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

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

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

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

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

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

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

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

HTML5在這個(gè)方面完全不受限制，可以完全放在一起進(jìn)行處理。

設(shè)計(jì)師要知道，如果新聞?lì)悺⑽⒉╊悺⑸缃活悜?yīng)用的信息呈現(xiàn)中實(shí)現(xiàn)文字與多媒體混排，而不用專門嵌入webview，將是一件多美好的事情，至少現(xiàn)在原生方式實(shí)現(xiàn)起來(lái)還有困難。

3.地理定位，隨時(shí)隨地分享位置

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

可以綜合使用GPS、wifi、手機(jī)等方式讓定位更為精準(zhǔn)、靈活。

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

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

4.Canvas繪圖，提升移動(dòng)平臺(tái)的繪圖能力

使用Canvas API可以簡(jiǎn)單繪制熱點(diǎn)圖收集用戶體驗(yàn)資料

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

Canvas – 2D的繪圖功能支持

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

SVG – 向量圖支援

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

5.專為移動(dòng)平臺(tái)定制的表單元素

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

類型 用途 鍵盤

Text 正常輸入內(nèi)容 標(biāo)準(zhǔn)鍵盤

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

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

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

Search 用于搜索引擎，比如在站點(diǎn)頂部顯示的搜索框 標(biāo)準(zhǔn)鍵盤

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

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

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

HTML5開發(fā)需要學(xué)習(xí)哪些內(nèi)容

關(guān)于Web前端學(xué)習(xí)的必經(jīng)階段。正在從事Web前端學(xué)習(xí)的小伙伴們來(lái)和小伙伴們一起看一看吧。希望能夠?qū)Υ蠹矣兴鶐椭?/p>

第一階段：

● HTML+CSS:

HTML進(jìn)階、CSS進(jìn)階、div+css布局、HTML+css整站開發(fā)、

● JavaScript基礎(chǔ)：

Js基礎(chǔ)教程、js內(nèi)置對(duì)象常用方法、常見(jiàn)DOM樹操作大全、ECMAscript、DOM、BOM、定時(shí)器和焦點(diǎn)圖。

● JS基本特效：

常見(jiàn)特效、例如：tab、導(dǎo)航、整頁(yè)滾動(dòng)、輪播圖、JS制作幻燈片、彈出層、手風(fēng)琴菜單、瀑布流布局、滾動(dòng)事件、滾差視圖。

● JS高級(jí)特征：

正則表達(dá)式、排序算法、遞歸算法、閉包、函數(shù)節(jié)流、作用域鏈、基于距離運(yùn)動(dòng)框架、面向?qū)ο蠡A(chǔ)、

● JQuery：基礎(chǔ)使用

懸著器、DOM操作、特效和動(dòng)畫、方法鏈、拖拽、變形、JQueryUI組件基本使用。

第二階段：HTML5和移動(dòng)Web開發(fā)

● HTML5：

HTML5新語(yǔ)義標(biāo)簽、HTML5表單、音頻和視頻、離線和本地存儲(chǔ)、SVG、Web Socket、Canvas.

● CSS3:

CSS3新選擇器、偽元素、臉色表示法、邊框、陰影、background系列屬性改變、Transition、動(dòng)畫、景深和深透、3D效果制作、Velocity.js框架、元素進(jìn)場(chǎng)、出場(chǎng)策略、炫酷CSS3網(wǎng)頁(yè)制作。

● Bootstrap:

響應(yīng)式概念、媒體查詢、響應(yīng)式網(wǎng)站制作、刪格系統(tǒng)、刪格系統(tǒng)原理、Bootstrap常用模板、LESS和SASS。

● 移動(dòng)Web開發(fā)：

跨終端WEB和主流設(shè)備簡(jiǎn)介、視口、流式布局、彈性盒子、rem、移動(dòng)終端JavaScript事件、手機(jī)中常見(jiàn)JS效果制作、Zepto.js、手機(jī)聚劃算頁(yè)面、手機(jī)滾屏。

第三階段：HTTP服務(wù)和AJAX編程

● WEB服務(wù)器基礎(chǔ)：

服務(wù)器基礎(chǔ)知識(shí)、Apache服務(wù)器和其他WEB服務(wù)器介紹、Apache服務(wù)器搭建、HTTP介紹。

● PHP基礎(chǔ)：

PHP基礎(chǔ)語(yǔ)法、使用PHP處理簡(jiǎn)單的GET或者POST請(qǐng)求、

● AJAX上篇：

Ajax簡(jiǎn)介和異步的概念、Ajax框架的封裝、XMLHttpRequest對(duì)象詳細(xì)介紹方法、兼容性處理方法、Ajax框架的封裝、Ajax中緩存問(wèn)題、XML介紹和使用。

● AJAX下篇：

JSON和JSON解析、數(shù)據(jù)綁定和模板技術(shù)、JSONP、跨域技術(shù)、圖片預(yù)讀取和lazy-load技術(shù)、JQuery框架中的AjaxAPI、使用Ajax實(shí)現(xiàn)瀑布流案例額。

第四階段：面向?qū)ο筮M(jìn)階

● 面向?qū)ο蠼K極篇：

從內(nèi)存角度到理解JS面向?qū)ο蟆⒒绢愋汀?fù)雜類型、原型鏈、ES6中的面向?qū)ο蟆傩宰x寫權(quán)限、設(shè)置器、訪問(wèn)器。

● 面向?qū)ο笕筇卣鳎?/p>

繼承性、多態(tài)性、封裝性、接口。

● 設(shè)計(jì)模式：

面向?qū)ο缶幊趟季S、單例模式、工廠模式、策略模式、觀察者模式、模板方法模式、代理模式、裝飾者模式、適配器模式、面向切面編程。

第五階段：封裝一個(gè)屬于自己的框架

● 框架封裝基礎(chǔ)：

事件流、冒泡、捕獲、事件對(duì)象、事件框架、選擇框架。

● 框架封裝中級(jí)：

運(yùn)動(dòng)原理、單物體運(yùn)動(dòng)框架、多物體運(yùn)動(dòng)框架、運(yùn)動(dòng)框架面向?qū)ο蠓庋b。

● 框架封裝高級(jí)和補(bǔ)充：

JQuery框架雛形、可擴(kuò)展性、模塊化、封裝屬于傳智自己的框架。

第六階段：模塊化組件開發(fā)

● 面向組件編程：

面向組件編程的方式、面向組件編程的實(shí)現(xiàn)原理、面向組件編程實(shí)戰(zhàn)、基于組件化思想開發(fā)網(wǎng)站應(yīng)用程序。

● 面向模塊編程：

AMD設(shè)計(jì)規(guī)范、CMD設(shè)計(jì)規(guī)范、RequireJS，LoadJS、淘寶的SeaJS。

第七階段：主流的流行框架

● Web開發(fā)工作流：

GIT/SVN、Yeoman腳手架、NPM/Bower依賴管理工具、Grunt/Gulp/Webpack。

● MVC/MVVM/MVW框架：

Angular.js、Backbone.js、Knockout/Ember。

● 常用庫(kù)：

React.js、Vue.js、Zepto.js。

第八階段：HTML5原生移動(dòng)應(yīng)用開發(fā)

● Cordova：

WebApp/NativeApp/HybirdApp簡(jiǎn)介、Cordova簡(jiǎn)介、與PhoneGap之間的關(guān)系、開發(fā)環(huán)境搭建、Cordova實(shí)戰(zhàn)(創(chuàng)建項(xiàng)目，配置，編譯，調(diào)試，部署發(fā)布)。

● Ionic：

Ionic簡(jiǎn)介和同類對(duì)比、模板項(xiàng)目解析、常見(jiàn)組件及使用、結(jié)合Angular構(gòu)建APP、常見(jiàn)效果(下拉刷新，上拉加載，側(cè)滑導(dǎo)航，選項(xiàng)卡)。

● React Native：

React Native簡(jiǎn)介、React Native環(huán)境配置、創(chuàng)建項(xiàng)目，配置，編譯，調(diào)試，部署發(fā)布、原生模塊和UI組件、原生常用API。

● HTML5+：

HTML5+中國(guó)產(chǎn)業(yè)聯(lián)盟、HTML5 Plus Runtime環(huán)境、HBuilder開發(fā)工具、MUI框架、H5+開發(fā)和部署。

第九階段： Node.js全棧開發(fā)

● 快速入門：

Node.js發(fā)展、生態(tài)圈、Io.js、Linux/Windows/OS X環(huán)境配置、REPL環(huán)境和控制臺(tái)程序、異步編程，非阻塞I/O、模塊概念，模塊管理工具、開發(fā)流程，調(diào)試，測(cè)試。

● 核心模塊和對(duì)象：

全局對(duì)象global，process，console，util、事件驅(qū)動(dòng)，事件發(fā)射器、加密解密，路徑操作，序列化和反序列化、文件流操作、HTTP服務(wù)端與客戶端、Socket.IO。

● Web開發(fā)基礎(chǔ)：

HTTP協(xié)議，請(qǐng)求響應(yīng)處理過(guò)程、關(guān)系型數(shù)據(jù)庫(kù)操作和數(shù)據(jù)訪問(wèn)、非關(guān)系型數(shù)據(jù)庫(kù)操作和數(shù)據(jù)訪問(wèn)、原生的Node.js開發(fā)Web應(yīng)用程序、Web開發(fā)工作流、Node.js開發(fā)Blog案例。

● 快速開發(fā)框架：

Express簡(jiǎn)介+MVC簡(jiǎn)介、Express常用API、Express路由模塊、Jade/Ejs模板引擎、使用Express重構(gòu)Blog案例、Koa等其他常見(jiàn)MVC框架。

● Node.js開發(fā)電子商務(wù)實(shí)戰(zhàn)：

需求與設(shè)計(jì)、賬戶模塊注冊(cè)登錄、會(huì)員中心模塊、前臺(tái)展示模塊、購(gòu)物車，訂單結(jié)算、在線客服即時(shí)通訊模塊。

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

1.調(diào)整視口

代碼實(shí)例：

!DOCTYPE?html

head

meta?charset="UTF-8"?/

title布局之路-移動(dòng)端開發(fā)實(shí)例/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)頁(yè)時(shí)，寬度均有所不同，所以不能講視口設(shè)置為固定值，應(yīng)當(dāng)為width=device-width,即將視口設(shè)置為當(dāng)前設(shè)備的寬度。

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

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

代碼實(shí)例：

style?type="text/css"

html?{

font-size:?42px;

}

/style

3.浮動(dòng)布局

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

代碼實(shí)例：

.main?{

float:?left;

width:?70%;

}

.box?{

float:?left;

width:?60.93%;

font-size:?1.71rem;

text-align:?center;

line-height:?4.64rem;

}

float浮動(dòng)的好處就是，如果寬度不夠放置下這個(gè)元素，元素會(huì)自動(dòng)滾動(dòng)到下方。

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

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

style

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

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

/style

代碼解析：

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

第二行媒體查詢代碼指的是：為縱屏狀態(tài)（可見(jiàn)區(qū)域大于或等于寬度）下的移動(dòng)端設(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)頁(yè)設(shè)計(jì)"還必須實(shí)現(xiàn)圖片的自動(dòng)縮放。

代碼效果對(duì)比：

/*使用固定像素*/

.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ì)算是根據(jù)父級(jí)的內(nèi)容區(qū)寬度進(jìn)行計(jì)算的。

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

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

使用 html5 怎么開發(fā)一個(gè)動(dòng)態(tài)網(wǎng)站？

使用 html5 開發(fā)一個(gè)動(dòng)態(tài)網(wǎng)站方法：

工具/原料

HBuilder6.6

MUI2.5

方法/步驟

為了演示HTML5 APP頁(yè)面是如何做到動(dòng)態(tài)調(diào)整布局。

1、首先，我們創(chuàng)建一個(gè)移動(dòng)APP項(xiàng)目，然后，添加一個(gè)index.html頁(yè)面。代碼里，添加一個(gè)圖標(biāo)，以及添加引入一個(gè)JS文件，該文件的作用在于：請(qǐng)求后臺(tái)JS文件。

2、接下來(lái)，我們看看service.js文件是如何請(qǐng)求后臺(tái)JS文件的。編寫該service.js文件的重點(diǎn)是：A、如何異步請(qǐng)求后臺(tái)JS文件；B、請(qǐng)求回來(lái)的后臺(tái)文件，如何動(dòng)態(tài)添加到頁(yè)面的Head里。

3、緊接著，我們對(duì)APP項(xiàng)目進(jìn)行打包操作：選擇需要的打包類型，然后，填寫相應(yīng)的證書信息。如果選擇IOS打包，請(qǐng)?jiān)诖虬C書里，添加需要安裝的蘋果手機(jī)UDID（未提供UDID，則不能安裝APP)。

4、打包完成后，便可以下載安裝APP。先用蘋果手機(jī)連接電腦，然后通過(guò)工具安裝APP。當(dāng)然，這種連接數(shù)據(jù)線安裝的方式，只能適合個(gè)人測(cè)試使用。如果想給別人批量安裝測(cè)試，請(qǐng)參考《HTML5 APP開發(fā)之APP測(cè)試》經(jīng)驗(yàn)。

1HTML5 APP開發(fā)之APP測(cè)試

5、APP安裝完成后，我們看看打開APP現(xiàn)有的效果是怎樣的。我們看到APP頁(yè)面的左上角，顯示了一個(gè)聯(lián)系人的圖標(biāo)。

6、由于菜果手機(jī)不同系列的屏幕大小不一樣，而且屏幕的分辨率也不一樣【安桌手機(jī)的也一樣】。導(dǎo)致同一個(gè)頁(yè)面布局，在不同的手機(jī)上，顯示的位置有時(shí)偏差比較大，有時(shí)也好。當(dāng)然，這也加大了開發(fā)和測(cè)試的難度。不可能因一些位置問(wèn)題，就重新發(fā)布APP。下面是蘋果手機(jī)不同系列的屏幕大小分辨率說(shuō)明：

7、所以，才有了動(dòng)態(tài)調(diào)試頁(yè)面布局的想法。回到第二步，我們是有請(qǐng)求后臺(tái)JS文件的（showJSPage.js）。下面看看showJSPage.js，是如何編寫的：A、首先判斷手機(jī)操作系統(tǒng)類型；B、判斷屏幕大小。

8、添加了showJSPage.js代碼后，啟動(dòng)后臺(tái)服務(wù)。然后，關(guān)閉原來(lái)打開的APP軟件，再重新打開APP軟件，便可查看修改后的效果。

9、整個(gè)方案的理解重點(diǎn)在于：熟悉JS執(zhí)行的先后順序，以及對(duì)手機(jī)屏幕大小與屏幕分辨率的關(guān)系。才能靈活運(yùn)用，達(dá)到自己想要的目的。

網(wǎng)站名稱：關(guān)于html5實(shí)例開發(fā)的信息
本文路徑：http://chinadenli.net/article44/dsgsoee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、虛擬主機(jī)、用戶體驗(yàn)、網(wǎng)站改版、網(wǎng)站設(shè)計(jì)公司、商城網(wǎng)站

廣告

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