本文标題的這副圖檔，是用Phosotshop制作的。但是，在搜尋引擎中你卻無法搜尋到它，搜尋引擎還沒有強大到能夠識别圖檔裡面的文字。并且由 于圖檔的體積不算太小，可能網速慢的網友在浏覽的時候不得不耐心的等待圖檔的重新整理。那麼，有沒有一種新的方法可以避免這些缺點呢？
有的，HTML5和CSS3就可以滿足你的需求。甚至，它可以做的更多，更好。作為一名設計師，我們應當了解它們是什麼東西，有什麼特性，進而進一步思考通過HTML5和CSS3我們能做些什麼。
HTML和CSS并不難了解。HTML為構成網頁的主要語言。通過這種語言，我們可以向計算機說明網頁格式、内容、顯示效果等等。而CSS則是專門 用來控制網頁顯示效果的語言。這時候問題出來了，為什麼我們要單獨使用CSS呢，HTML不是一樣可以控制Web頁面的顯示效果麼？為了回答這個問題，我 舉個簡單的例子：
有沒有發現如果一旦形容的事情過多，想要把事情描述清楚的時候，我們不得不重複大量的資訊？頁面語言也是一樣，在這種情況下顯得雜亂無章，非常難以 理出頭緒。通過将控制顯示效果的語言內建到CSS裡，我們不但可以保證頁面語言主體部分的簡潔，而且可以非常友善的複用各種語言集合。
HTML5和CSS3是HTML和CSS的最新版本，它們目前均未确定标準，但是已經公布的新特征已經讓我們心動不已。
HTML4中的内容标簽級别相同，無法區分各部分内容。而HTML5中的内容标簽互相獨立，級别不同，搜尋引擎以及統計軟體等均可快速識别各部分内容。
現在，你可以抛棄JavaScript或者是PHP，隻通過HTML5來定義表格。你可以定義每個表格單元的輸入格式，也可以定義這個單元是否是必填的等等。
HTML5不但允許你在網頁中直接整合視訊、音頻，同時更提供了一套功能豐富的API用來控制媒體播放，而這些用來控制媒體播放的元素也都是可以被編輯的。是以，HTML5在視訊以及音頻層面上實際已經可以替代常用的flash插件了。
在網頁中繪制圖形一直是個大難題，我們不得不借助flash、silverlight等插件。然而HTML5允許你直接在網頁上進行繪圖，甚至允許你與網頁生成更多的互動，例如繪制圖形、放大縮小，等等。圖例是一個用HTML5制作的小遊戲。
HTML5提供了地理資訊的應用接口Geolocation API。通過這個API，網頁可以通過IP，GPS等方式來獲得使用者的地理資訊；同時使用者也可以選擇是否關閉這個功能。
HTML5提供了網頁存儲的API，友善Web應用的離線使用。除此之外，新的API相對于cookie也有着高安全性，高效率，更大空間等優點。
我們可以通過HTML5的Drag and drop API來完成網頁中的拖拽釋放效果，避免了以往的網頁在拖拽釋放過程中需要不停修改元素的位置，代碼繁多的弊端。
CSS3的RGBa新特性允許你對每個元素進行色彩以及透明度的設定。而原來常用的opacity指令隻能對元素及其子元素進行設定。
CSS3新提供的多欄布局選擇器無需HTML布局标簽即可生成多欄布局，同時‘欄數’、‘欄寬’以及‘欄間距’都是可以定義的。
圓角功能可能是CSS3提供的最實用的功能了。通過Border-radius，你可以沒有任何難度的給指定的HTML元素添加圓角。并且你還可以定義圓角的大小，以及哪個角是圓角，哪個角不是圓角。
當網頁顯示某種使用者沒有安裝的字型時，CSS3提供的@font-face功能會自動的、默默地幫使用者從網絡上下載下傳相應字型。進而讓設計師更加自由的發揮，而不用考慮使用者的機器是否安裝了相應字型。
此外，CSS3還給我們帶來了漸變、防止字元串過長溢出、多重背景以及用圖檔來作為元素邊框等功能。
利用好CSS3，你可以更快捷的得到以往用很多插件才能得到的效果。同過使用元素本身來取代大部分圖檔，網頁的加載速度會得到提升，這些原本是圖檔的内容，也可以被搜尋引擎檢索到。
HTML5和CSS3的标準并未正式完成，各家浏覽器對其支援程度也不盡相同。了解HTML5和CSS3的相容性是十分必要的。下面的連接配接是一個專門跟蹤HTML5和CSS3相容性的網站，有興趣的朋友可以點選檢視：
<a href="http://www.findmebyip.com/litmus">http://www.findmebyip.com/litmus</a>
<a href="http://www.apple.com/HTML5/showcase/">http://www.apple.com/HTML5/showcase/ </a>
<a href="http://html5watch.tumblr.com/">http://html5watch.tumblr.com/</a>
<a href="http://w3school.com.cn/index.html">http://w3school.com.cn/index.html</a>
<a href="http://www.mhtml5.com/">http://www.mhtml5.com/</a>
<a href="http://html5demos.com/">http://html5demos.com/</a>
<a href="http://www.sencha.com/">http://www.sencha.com/</a>
<a href="http://www.findmebyip.com/litmus/">http://www.findmebyip.com/litmus/</a>
<a href="http://www.thetimes.co.uk/tto/news/">http://www.thetimes.co.uk/tto/news/</a>
<a href="http://maps.google.com/">http://maps.google.com/</a>