HTML5 & CSS3的新交互特性

来源:http://www.cnblogs.com/androidshouce/archive/2016/07/19/5683426.html
-Advertisement-
Play Games

本文標題的這副圖片,是用Phosotshop製作的。但是,在搜索引擎中你卻無法搜索到它,搜索引擎還沒有強大到能夠識別圖片裡面的文字。並且由於圖片的體積不算太小,可能網速慢的網友在瀏覽的時候不得不耐心的等待圖片的刷新。那麼,有沒有一種新的方法可以避免這些缺點呢? 有的,HTML5和CSS3就可以滿足你 ...


本文標題的這副圖片,是用Phosotshop製作的。但是,在搜索引擎中你卻無法搜索到它,搜索引擎還沒有強大到能夠識別圖片裡面的文字。並且由於圖片的體積不算太小,可能網速慢的網友在瀏覽的時候不得不耐心的等待圖片的刷新。那麼,有沒有一種新的方法可以避免這些缺點呢?

有的,HTML5和CSS3就可以滿足你的需求。甚至,它可以做的更多,更好。作為一名設計師,我們應當瞭解它們是什麼東西,有什麼特性,從而進一步思考通過HTML5和CSS3我們能做些什麼。

什麼是HTML5和CSS3

HTML和CSS並不難理解。HTML為構成網頁的主要語言。通過這種語言,我們可以向電腦說明網頁格式、內容、顯示效果等等。而CSS則是專門用來控制網頁顯示效果的語言。這時候問題出來了,為什麼我們要單獨使用CSS呢,HTML不是一樣可以控制Web頁面的顯示效果麽?為了回答這個問題,我舉個簡單的例子:

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

HTML5和CSS3是HTML和CSS的最新版本,它們目前均未確定標準,但是已經公佈的新特征已經讓我們心動不已。

HTML5的新特新

1. 新的內容標簽

HTML4中的內容標簽級別相同,無法區分各部分內容。而 HTML5 中的內容標簽互相獨立,級別不同,搜索引擎以及統計軟體等均可快速識別各部分內容。

2. 更好的表格體系

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

3. 音頻、視頻API

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

4.畫布(Canvas) API

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

5. 地理(Geolocation) API

HTML5提供了地理信息的應用介面 Geolocation API。通過這個API,網頁可以通過IP,GPS等方式來獲得用戶的地理信息;同時用戶也可以選擇是否關閉這個功能。

6. 網頁存儲(Web storage) API

HTML5提供了網頁存儲的API,方便Web應用的離線使用。除此之外,新的API相對於cookie也有著高安全性,高效率,更大空間等優點。

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

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

CSS3新特性

1. RGBa

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

2. Multi-column layout

CSS3新提供的多欄佈局選擇器無需 HTML 佈局標簽即可生成多欄佈局,同時‘欄數’、‘欄寬’以及‘欄間距’都是可以定義的。

3.Round corners

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

4. @font-face

當網頁顯示某種用戶沒有安裝的字體時,CSS3提供的@font-face功能會自動的、默默地幫用戶從網路上下載相應字體。從而讓設計師更加自由的發揮,而不用考慮用戶的機器是否安裝了相應字體。

5. 其他特性

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

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

HTML5和CSS3的相容性

HTML5和CSS3的標準並未正式完成,各家瀏覽器對其支持程度也不盡相同。瞭解 HTML5和CSS3的相容性是十分必要的。下麵的連接是一個專門跟蹤HTML5和CSS3相容性的網站,有興趣的朋友可以點擊查看:

http://www.findmebyip.com/litmus


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、數組(一維): 對於聲明變數,int score1 = 81; 等等這些操作,如果我們有四個成績,是不是可以定義變數score 1、2、3、4呢?但是,如果我們要定義400個成績又當如何呢? 這就可以用到數組了,數組可以指定一個長度,然後在數組裡可以存放這個長度範圍的同類型數組,可以將數組理解為 ...
  • JSP的基本語法 一、JSP頁面中的JAVA代碼 二、JSP頁面中的指令 三、JSP頁面中的隱含對象(九大內置對象) 一、JSP頁面中的JAVA代碼 JSP表達式(方便輸出) JSP小腳本(完成相對較長的邏輯運算) JSP聲明(添加屬性或方法) 1、JSP表達式(格式:<%=%>) 註意:表達式結束 ...
  • 一、SpEL:Spring 表達式語言,在使用的時候類似於 EL 表達式,但是需要註意的是,SpEL 使用在 Spring Config 文件中。 二、格式:使用 #{} 作為界定符,所有在大括弧中的字元都將被認為成是 SeEL 三、作用: 1.通過 Bean 的 id 對 Bean 進行引用 2. ...
  • 新建一個線程並啟動,開銷會很大,因為運行線程需要的資源比調用對象方法需要的資源多得多。在很多情況下,線程被用於執行一類任務,而這類任務數量很多,發生的時間分佈不均,如果為每個新任務都啟用一個新線程來執行,則開銷會太大,可以採用一種性能優化技術,就是使用線程池。 將若幹執行任務的線程放在池中,當有任務 ...
  • css是網頁的外衣,好不好看全憑css樣式,而佈局是css中比較重要的部分,下麵來分析一下常見的幾種佈局。 流動模型 流動模型是網頁佈局的預設模式,也是最常見的佈局模式,他有兩個特點: 1.塊狀元素都在所處包含元素內自上而下按順序垂直延伸分佈。常見的塊狀元素有:div,p,ul,ol,h1~h6,a ...
  • 方法:直接判斷瀏覽器是否支持某個CSS屬性才是王道,document.documentElement.style 如:判斷是否支持 transform if( 'MozTransform' in document.documentElement.style || 'WebkitTransform' ...
  • 作者:白狼 出處:http://www.manks.top/javascript-dynamic-event.html 本文版權歸作者,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接,否則保留追究法律責任的權利。 其所謂的動態添加事件實質就是指js中的事件委托。 我們知道 ...
  • 線上實例 實例演示 使用方法 複製 複製 下載 ...
一周排行
    -Advertisement-
    Play Games
  • C#TMS系統代碼-基礎頁面BaseCity學習 本人純新手,剛進公司跟領導報道,我說我是java全棧,他問我會不會C#,我說大學學過,他說這個TMS系統就給你來管了。外包已經把代碼給我了,這幾天先把增刪改查的代碼背一下,說不定後面就要趕鴨子上架了 Service頁面 //using => impo ...
  • 委托與事件 委托 委托的定義 委托是C#中的一種類型,用於存儲對方法的引用。它允許將方法作為參數傳遞給其他方法,實現回調、事件處理和動態調用等功能。通俗來講,就是委托包含方法的記憶體地址,方法匹配與委托相同的簽名,因此通過使用正確的參數類型來調用方法。 委托的特性 引用方法:委托允許存儲對方法的引用, ...
  • 前言 這幾天閑來沒事看看ABP vNext的文檔和源碼,關於關於依賴註入(屬性註入)這塊兒產生了興趣。 我們都知道。Volo.ABP 依賴註入容器使用了第三方組件Autofac實現的。有三種註入方式,構造函數註入和方法註入和屬性註入。 ABP的屬性註入原則參考如下: 這時候我就開始疑惑了,因為我知道 ...
  • C#TMS系統代碼-業務頁面ShippingNotice學習 學一個業務頁面,ok,領導開完會就被裁掉了,很突然啊,他收拾東西的時候我還以為他要旅游提前請假了,還在尋思為什麼回家連自己買的幾箱飲料都要叫跑腿帶走,怕被偷嗎?還好我在他開會之前拿了兩瓶芬達 感覺感覺前面的BaseCity差不太多,這邊的 ...
  • 概述:在C#中,通過`Expression`類、`AndAlso`和`OrElse`方法可組合兩個`Expression<Func<T, bool>>`,實現多條件動態查詢。通過創建表達式樹,可輕鬆構建複雜的查詢條件。 在C#中,可以使用AndAlso和OrElse方法組合兩個Expression< ...
  • 閑來無聊在我的Biwen.QuickApi中實現一下極簡的事件匯流排,其實代碼還是蠻簡單的,對於初學者可能有些幫助 就貼出來,有什麼不足的地方也歡迎板磚交流~ 首先定義一個事件約定的空介面 public interface IEvent{} 然後定義事件訂閱者介面 public interface I ...
  • 1. 案例 成某三甲醫預約系統, 該項目在2024年初進行上線測試,在正常運行了兩天後,業務系統報錯:The connection pool has been exhausted, either raise MaxPoolSize (currently 800) or Timeout (curren ...
  • 背景 我們有些工具在 Web 版中已經有了很好的實踐,而在 WPF 中重新開發也是一種費時費力的操作,那麼直接集成則是最省事省力的方法了。 思路解釋 為什麼要使用 WPF?莫問為什麼,老 C# 開發的堅持,另外因為 Windows 上已經裝了 Webview2/edge 整體打包比 electron ...
  • EDP是一套集組織架構,許可權框架【功能許可權,操作許可權,數據訪問許可權,WebApi許可權】,自動化日誌,動態Interface,WebApi管理等基礎功能於一體的,基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
  • .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 實測可以完整運行在 win7sp1/win10/win11. 如果用其他工具打包,還可以運行在mac/linux下, 傳送門BlazorHybrid 發佈為無依賴包方式 安裝 WebView2Runtime 1.57 M ...