免费亚洲欧美精品电影_国内精品偷拍福利视频_美女黄网站色视免费国产_国产不卡福利片在线观看

24小時(shí)咨詢電話:0571-88023217商城網(wǎng)站建設(shè)公司 10年專業(yè)網(wǎng)絡(luò)服務(wù)供應(yīng)商

資訊中心

- 直擊網(wǎng)站建設(shè)第一現(xiàn)場(chǎng),掌握全球化的消息 -

當(dāng)前位置 : 首頁 > 資訊中心 > HTML 5 & CSS 3 的新交互特性分享

HTML 5 & CSS 3 的新交互特性分享

分享 2011.12.03 瀏覽次數(shù):7661次

HTML 5 & CSS 3 的新交互特性分享

標(biāo)簽:HTML5  CSS3  杭州網(wǎng)站建設(shè)     杭州精典網(wǎng)站制作

www.hl2000.com網(wǎng)站建設(shè)

本文標(biāo)題的這副圖片,是用Phosotshop制作的。但是,在搜索引擎中你卻無法搜索到它,搜索引擎還沒有強(qiáng)大到能夠識(shí)別圖片里面的文字。并且由 于圖片的體積不算太小,可能網(wǎng)速慢的網(wǎng)友在瀏覽的時(shí)候不得不耐心的等待圖片的刷新。那么,有沒有一種新的方法可以避免這些缺點(diǎn)呢?

 

有的,HTML5和CSS3就可以滿足你的需求。甚至,它可以做的更多,更好。作為一名設(shè)計(jì)師,我們應(yīng)當(dāng)了解它們是什么東西,有什么特性,從而進(jìn)一步思考通過HTML5和CSS3我們能做些什么。

什么是HTML5和CSS3

HTML和CSS并不難理解。HTML為構(gòu)成網(wǎng)頁的主要語言。通過這種語言,我們可以向計(jì)算機(jī)說明網(wǎng)頁格式、內(nèi)容、顯示效果等等。而CSS則是專門 用來控制網(wǎng)頁顯示效果的語言。這時(shí)候問題出來了,為什么我們要單獨(dú)使用CSS呢,HTML不是一樣可以控制Web頁面的顯示效果么?為了回答這個(gè)問題,我 舉個(gè)簡(jiǎn)單的例子:

 

www.hl2000.com網(wǎng)站設(shè)計(jì)

有沒有發(fā)現(xiàn)如果一旦形容的事情過多,想要把事情描述清楚的時(shí)候,我們不得不重復(fù)大量的信息?頁面語言也是一樣,在這種情況下顯得雜亂無章,非常難以 理出頭緒。通過將控制顯示效果的語言集成到CSS里,我們不但可以保證頁面語言主體部分的簡(jiǎn)潔,而且可以非常方便的復(fù)用各種語言集合。

HTML5和CSS3是HTML和CSS的最新版本,它們目前均未確定標(biāo)準(zhǔn),但是已經(jīng)公布的新特征已經(jīng)讓我們心動(dòng)不已。

HTML 5的新特新

1. 新的內(nèi)容標(biāo)簽

 

www.hl2000.com網(wǎng)站制作

HTML4中的內(nèi)容標(biāo)簽級(jí)別相同,無法區(qū)分各部分內(nèi)容。而HTML5中的內(nèi)容標(biāo)簽互相獨(dú)立,級(jí)別不同,搜索引擎以及統(tǒng)計(jì)軟件等均可快速識(shí)別各部分內(nèi)容。

2. 更好的表格體系

 www.hl2000.com杭州網(wǎng)站建設(shè)

現(xiàn)在,你可以拋棄JavaScript或者是PHP,只通過HTML5來定義表格。你可以定義每個(gè)表格單元的輸入格式,也可以定義這個(gè)單元是否是必填的等等。

3. 音頻、視頻API

 

www.hl2000.com杭州網(wǎng)站設(shè)計(jì)

www.hl2000.com杭州網(wǎng)站制作

HTML5不但允許你在網(wǎng)頁中直接整合視頻、音頻,同時(shí)更提供了一套功能豐富的API用來控制媒體播放,而這些用來控制媒體播放的元素也都是可以被編輯的。因此,HTML5在視頻以及音頻層面上實(shí)際已經(jīng)可以替代常用的flash插件了。

4. 畫布(Canvas) API

 

www.sharetheflairshow.com網(wǎng)站建設(shè)

在網(wǎng)頁中繪制圖形一直是個(gè)大難題,我們不得不借助flash、silverlight等插件。然而HTML5允許你直接在網(wǎng)頁上進(jìn)行繪圖,甚至允許你與網(wǎng)頁生成更多的交互,例如繪制圖形、放大縮小,等等。圖例是一個(gè)用HTML5制作的小游戲。

5. 地理(Geolocation) API

 

www.sharetheflairshow.com網(wǎng)站設(shè)計(jì)

HTML5提供了地理信息的應(yīng)用接口Geolocation API。通過這個(gè)API,網(wǎng)頁可以通過IP,GPS等方式來獲得用戶的地理信息;同時(shí)用戶也可以選擇是否關(guān)閉這個(gè)功能。

6. 網(wǎng)頁存儲(chǔ)(Web storage) API

 

www.sharetheflairshow.com網(wǎng)站制作

HTML5提供了網(wǎng)頁存儲(chǔ)的API,方便Web應(yīng)用的離線使用。除此之外,新的API相對(duì)于cookie也有著高安全性,高效率,更大空間等優(yōu)點(diǎn)。

7. 拖拽釋放(Drag and drop) API

 

www.sharetheflairshow.com杭州網(wǎng)站建設(shè)

我們可以通過HTML5的Drag and drop API來完成網(wǎng)頁中的拖拽釋放效果,避免了以往的網(wǎng)頁在拖拽釋放過程中需要不停修改元素的位置,代碼繁多的弊端。

CSS3 新特性

1. RGBa

 

www.sharetheflairshow.com杭州網(wǎng)站設(shè)計(jì)

CSS3的RGBa新特性允許你對(duì)每個(gè)元素進(jìn)行色彩以及透明度的設(shè)置。而原來常用的opacity命令只能對(duì)元素及其子元素進(jìn)行設(shè)置。

2. Multi-column layout

 

www.sharetheflairshow.com杭州網(wǎng)站制作

CSS3新提供的多欄布局選擇器無需HTML布局標(biāo)簽即可生成多欄布局,同時(shí)‘欄數(shù)’、‘欄寬’以及‘欄間距’都是可以定義的。

3. Round corners

 

www.sharetheflairshow.com杭州精典網(wǎng)站建設(shè)

圓角功能可能是CSS3提供的最實(shí)用的功能了。通過Border-radius,你可以沒有任何難度的給指定的HTML元素添加圓角。并且你還可以定義圓角的大小,以及哪個(gè)角是圓角,哪個(gè)角不是圓角。

4. @font-face

 

www.sharetheflairshow.com杭州精典網(wǎng)站設(shè)計(jì)

當(dāng)網(wǎng)頁顯示某種用戶沒有安裝的字體時(shí),CSS3提供的@font-face功能會(huì)自動(dòng)的、默默地幫呼叫中心用戶從網(wǎng)絡(luò)上下載相應(yīng)字體。從而讓設(shè)計(jì)師更加自由的發(fā)揮,而不用考慮用戶的機(jī)器是否安裝了相應(yīng)字體。

5. 其他特性

此外,CSS3還給我們帶來了漸變、防止字符串過長(zhǎng)溢出、多重背景以及用圖片來作為元素邊框等功能。

利用好CSS3,你可以更快捷的得到以往用很多插件才能得到的效果。同過使用元素本身來取代大部分圖片,網(wǎng)頁的加載速度會(huì)得到提升,這些原本是圖片的內(nèi)容,也可以被搜索引擎檢索到。

HTML5和CSS3的兼容性

HTML5和CSS3的標(biāo)準(zhǔn)并未正式完成,各家瀏覽器對(duì)其支持程度也不盡相同。了解HTML5和CSS3的兼容性是十分必要的。

更多關(guān)于網(wǎng)站建設(shè)行業(yè)資訊:漫談Java開源5年意味著自由并帶著枷鎖

 

最新網(wǎng)站案例

洞悉市場(chǎng)趨勢(shì)演變讓傳播回歸社會(huì)

    免費(fèi)獲取網(wǎng)站建設(shè)與網(wǎng)絡(luò)推廣方案報(bào)價(jià)

    • 關(guān)于我們

      杭州帷拓科技有限公司,是一家新型的全案網(wǎng)絡(luò)開發(fā)公司,作為以互聯(lián)網(wǎng)高端網(wǎng)站建設(shè)、APP開發(fā)、小程序開發(fā)為核心的專業(yè)網(wǎng)絡(luò)技術(shù)服務(wù)供應(yīng)商,帷拓科技致力于全面分析市場(chǎng)環(huán)境、衡量與預(yù)測(cè)市場(chǎng)需求、整合區(qū)別于行業(yè)競(jìng)爭(zhēng)對(duì)手的絕對(duì)優(yōu)勢(shì),結(jié)合品牌理念深度挖掘項(xiàng)目?jī)?yōu)勢(shì)和產(chǎn)品價(jià)值,提升客戶品牌認(rèn)知、認(rèn)可度。

    • 我們的客戶

      帷拓科技?xì)v經(jīng)十年沉淀,與國(guó)內(nèi)外上千家客戶達(dá)成合作關(guān)系,其中穩(wěn)定合作的公司有:浙江華為、浙江移動(dòng)、浙江5G產(chǎn)業(yè)聯(lián)盟、浙江省社科院、綠城足球俱樂部、娃哈哈雙語學(xué)校、健康中國(guó)杭州峰會(huì)、科雷機(jī)電等,帷拓科技始終堅(jiān)持“帷有專業(yè),才能拓展無限”的服務(wù)理念,堅(jiān)持“認(rèn)真堅(jiān)持細(xì)節(jié)”的優(yōu)質(zhì)服務(wù)理念,不斷完善自身,成就企業(yè),最終實(shí)現(xiàn)共贏。

    • 我們的業(yè)務(wù)

      帷拓科技主營(yíng)業(yè)務(wù)范圍包含互聯(lián)網(wǎng)高端網(wǎng)站建設(shè)、APP開發(fā)、小程序開發(fā)、商城網(wǎng)站建設(shè)、公眾號(hào)運(yùn)營(yíng)以及數(shù)字營(yíng)銷等,涵蓋了服務(wù)、房產(chǎn)、數(shù)碼、服裝、物流貿(mào)易等行業(yè),根據(jù)品牌現(xiàn)狀,為每個(gè)客戶量身定制項(xiàng)目整體服務(wù)方案,以敏銳的市場(chǎng)洞察力、創(chuàng)新的市場(chǎng)策劃能力,全面把握市場(chǎng)變化,為客戶實(shí)現(xiàn)從企業(yè)到消費(fèi)者的價(jià)值轉(zhuǎn)換。

    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur