淺談HTML5 & CSS3的新交互特性

2020-03-24 18:01:52

字體：大中小

供稿：網(wǎng)友

本文標(biāo)題的這副圖片，是用Phosotshop制作的。但是，在搜索引擎中你卻無(wú)法搜索到它，搜索引擎還沒(méi)有強(qiáng)大到能夠識(shí)別圖片里面的文字。并且由于圖片的體積不算太小，可能網(wǎng)速慢的網(wǎng)友在瀏覽的時(shí)候不得不耐心的等待圖片的刷新。那么，有沒(méi)有一種新的方法可以避免這些缺點(diǎn)呢？有的，HTML5和CSS3就可以滿足你的需求。甚至，它可以做的更多，更好。作為一名設(shè)計(jì)師，我們應(yīng)當(dāng)了解它們是什么東西，有什么特性，從而進(jìn)一步思考通過(guò)HTML5和CSS3我們能做些什么。什么是HTML5和CSS3HTML和CSS并不難理解。HTML為構(gòu)成網(wǎng)頁(yè)的主要語(yǔ)言。通過(guò)這種語(yǔ)言，我們可以向計(jì)算機(jī)說(shuō)明網(wǎng)頁(yè)格式、內(nèi)容、顯示效果等等。而CSS則是專門用來(lái)控制網(wǎng)頁(yè)顯示效果的語(yǔ)言。這時(shí)候問(wèn)題出來(lái)了，為什么我們要單獨(dú)使用CSS呢，HTML不是一樣可以控制Web頁(yè)面的顯示效果么？為了回答這個(gè)問(wèn)題，我舉個(gè)簡(jiǎn)單的例子：有沒(méi)有發(fā)現(xiàn)如果一旦形容的事情過(guò)多，想要把事情描述清楚的時(shí)候，我們不得不重復(fù)大量的信息？頁(yè)面語(yǔ)言也是一樣，在這種情況下顯得雜亂無(wú)章，非常難以理出頭緒。通過(guò)將控制顯示效果的語(yǔ)言集成到CSS里，我們不但可以保證頁(yè)面語(yǔ)言主體部分的簡(jiǎn)潔，而且可以非常方便的復(fù)用各種語(yǔ)言集合。HTML5和CSS3是HTML和CSS的最新版本，它們目前均未確定標(biāo)準(zhǔn)，但是已經(jīng)公布的新特征已經(jīng)讓我們心動(dòng)不已。HTML5的新特新1. 新的內(nèi)容標(biāo)簽HTML4中的內(nèi)容標(biāo)簽級(jí)別相同，無(wú)法區(qū)分各部分內(nèi)容。而 HTML5 中的內(nèi)容標(biāo)簽互相獨(dú)立，級(jí)別不同，搜索引擎以及統(tǒng)計(jì)軟件等均可快速識(shí)別各部分內(nèi)容。2. 更好的表格體系現(xiàn)在，你可以拋棄JavaScript或者是PHP，只通過(guò)HTML5來(lái)定義表格。你可以定義每個(gè)表格單元的輸入格式，也可以定義這個(gè)單元是否是必填的等等。3. 音頻、視頻APIHTML5不但允許你在網(wǎng)頁(yè)中直接整合視頻、音頻，同時(shí)更提供了一套功能豐富的API用來(lái)控制媒體播放，而這些用來(lái)控制媒體播放的元素也都是可以被編輯的。因此，HTML5在視頻以及音頻層面上實(shí)際已經(jīng)可以替代常用的flash插件了。4.畫布(Canvas) API在網(wǎng)頁(yè)中繪制圖形一直是個(gè)大難題，我們不得不借助flash、silverlight 等插件。然而HTML5允許你直接在網(wǎng)頁(yè)上進(jìn)行繪圖，甚至允許你與網(wǎng)頁(yè)生成更多的交互，例如繪制圖形、放大縮小，等等。圖例是一個(gè)用HTML5制作的小游戲。5. 地理(Geolocation) APIHTML5提供了地理信息的應(yīng)用接口 Geolocation API。通過(guò)這個(gè)API，網(wǎng)頁(yè)可以通過(guò)IP，GPS等方式來(lái)獲得用戶的地理信息；同時(shí)用戶也可以選擇是否關(guān)閉這個(gè)功能。6. 網(wǎng)頁(yè)存儲(chǔ)(Web storage) APIHTML5提供了網(wǎng)頁(yè)存儲(chǔ)的API，方便Web應(yīng)用的離線使用。除此之外，新的API相對(duì)于cookie也有著高安全性，高效率，更大空間等優(yōu)點(diǎn)。7.拖拽釋放(Drag and drop) API我們可以通過(guò)HTML5的Drag and drop API來(lái)完成網(wǎng)頁(yè)中的拖拽釋放效果，避免了以往的網(wǎng)頁(yè)在拖拽釋放過(guò)程中需要不停修改元素的位置，代碼繁多的弊端。CSS3新特性1. RGBaCSS3的RGBa新特性允許你對(duì)每個(gè)元素進(jìn)行色彩以及透明度的設(shè)置。而原來(lái)常用的opacity命令只能對(duì)元素及其子元素進(jìn)行設(shè)置。2. Multi-column layoutCSS3新提供的多欄布局選擇器無(wú)需 HTML 布局標(biāo)簽即可生成多欄布局，同時(shí) 欄數(shù) 、欄寬以及欄間距都是可以定義的。3.Round corners圓角功能可能是CSS3提供的最實(shí)用的功能了。通過(guò)Border-radius，你可以沒(méi)有任何難度的給指定的html' target='_blank'>HTML元素添加圓角。并且你還可以定義圓角的大小，以及哪個(gè)角是圓角，哪個(gè)角不是圓角。4. @font-face當(dāng)網(wǎng)頁(yè)顯示某種用戶沒(méi)有安裝的字體時(shí)，CSS3提供的@font-face功能會(huì)自動(dòng)的、默默地幫用戶從網(wǎng)絡(luò)上下載相應(yīng)字體。從而讓設(shè)計(jì)師更加自由的發(fā)揮，而不用考慮用戶的機(jī)器是否安裝了相應(yīng)字體。5. 其他特性此外，CSS3還給我們帶來(lái)了漸變、防止字符串過(guò)長(zhǎng)溢出、多重背景以及用圖片來(lái)作為元素邊框等功能。利用好CSS3，你可以更快捷的得到以往用很多插件才能得到的效果。同過(guò)使用元素本身來(lái)取代大部分圖片，網(wǎng)頁(yè)的加載速度會(huì)得到提升，這些原本是圖片的內(nèi)容，也可以被搜索引擎檢索到。HTML5和CSS3的兼容性HTML5和CSS3的標(biāo)準(zhǔn)并未正式完成，各家瀏覽器對(duì)其支持程度也不盡相同。了解 HTML5和CSS3的兼容性是十分必要的。下面的連接是一個(gè)專門跟蹤HTML5和CSS3兼容性的網(wǎng)站，有興趣的朋友可以點(diǎn)擊查看：http://fmbip.com/litmus以上這篇淺談HTML5 CSS3的新交互特性就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持phpstudy。原文地址：http://www.cnblogs.com/androidshouce/archive/2016/07/19/5683426.htmlhtml教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：HTML與CSS中2D轉(zhuǎn)換模塊

下一篇：用CSS制作具有親和力的表單