⑴ web前端和html5開發有什麼區別
區別：
HTML5是HTML標准，它本身是一項標准化協議，然而被炒熱後登上了互聯網行業的招聘條目，HTML5開發這個名詞本身就是不專業的稱呼，通常意義上指使用HTML5等較為潮流的技術進行前端開發。
而web前端，主要職責是利用(X)HTML/CSS/JavaScript/Flash等各種Web技術進行客戶端產品的開發。完成客戶端程序（也就是瀏覽器端）的開發，開發JavaScript以及Flash模塊，同時結合後台開發技術模擬整體效果，進行豐富互聯網的Web開發，致力於通過技術改善用戶體驗。
1、Web前端開發工程師職責
Web前端開發工程師，除了主要職責外，還要為網站上提供的產品和服務實現一流的Web界面，優化代碼並保持良好兼容性；
Web前端表現層及與前後端交互的架構設計和開發；
配合後台開發人員實現產品界面和功能；
利用各種Web技術模擬開發產品原型；
Web新技術調研和資訊整理；
精通HTML/XHTML、CSS，熟悉頁面架構和布局，對Web標准和標簽語義化有深入理解；
熟悉Ajax、JavaScript(或者ActionScript)、DOM等前端技術，掌握面向對象編程思想；
對常用的一些JS框架了解，如jQuery、YUI等。
掌握最基本的JavaScript計算方法編寫。
對目前互聯網流行的網頁製作方法（Web2.0）HTML+CSS，以及各大瀏覽器兼容性有很大的了解。
對前沿技術（HTML5+CSS3）的基本掌握。
還要對IT其他編程語言有所了解如：PHP，Java，.net！有一些公司還要求懂一點SEO優化！
2、Web前端開發工程師基本技術
⑵ 什麼是HTML5和CSS3
HTML5和CSS3是HTML和CSS的最新版本。
HTML和CSS並不難理解。HTML為構成網頁的主要語言。通過這種語言，我們可以向計算機說明網頁格式、內容、顯示效果等等。而CSS則是專門用來控制網頁顯示效果的語言。
⑶ css3代碼怎麼應用到html5中
先簡單介紹下，也許你很熟悉下面的代碼: <div id="news">
代碼如下:
<div class="section">
<div class="article">
<div class="header">
<h1>Div Soup Demonstration</h1>
<p>Posted on July 11th, 2009</p>
</div>
<div class="content">
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
</div>
<div class="footer">
<p>Tags: HMTL, code, demo</p>
</div>
</div>
<div class="aside">
<div class="header">
<h1>Tangential Information</h1>
</div>
<div class="content">
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
</div>
<div class="footer">
<p>Tags: HMTL, code, demo</p>
</div>
</div>
</div>
</div>
盡管這有些勉強，但上面這個實例還是可以說明使用HTML4對一個復雜的設計進行代碼化後依然過於臃腫(其實xHTML1.1也不過如此)。不過值得激動的是，HTML5解決「<div>-soup」 綜合症並帶給我們一套新的結構化元素。這些新的HTML5元素富有更細致的語義從而代替了那些毫無語義的<div>標簽，並同時為CSS的調用提供了」自然」的CSS鉤子。
下面是 HTML5的解決方案實例: <section>
代碼如下:
<section>
<article>
<header>
<h1>Div Soup Demonstration</h1>
<p>Posted on July 11th, 2009</p>
</header>
<section>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
</section>
<footer>
<p>Tags: HMTL, code, demo</p>
</footer>
</article>
<aside>
<header>
<h1>Tangential Information</h1>
</header>
<section>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
<p>Lorem ipsum text blah blah blah.</p>
</section>
<footer>
<p>Tags: HMTL, code, demo</p>
</footer>
</aside>
</section>
</section>
正如我們所見，HTML5可以讓我們用很多更語義化的結構化代碼標簽代替那些大量的無意義的<div>標簽。這種語義化的特性不僅提升了我們網頁的質量和語義，並且大量減少了曾經代碼中用於CSS必須調用的class和id屬性。事實上，CSS3也是可以然通過我們忽略掉所有class和id 的。
跟class屬性說再見，歡迎整潔的標簽
結合了富有新的語義化標記的HTML5，CSS3為web設計師們的網頁提供了神一般的力量。有了HTML5的能量，我們將得到更多的對文檔代碼的控制權，有了CSS3的能量，我們的控制權將趨於無窮大！
即使沒有那些高級的CSS選擇器，我們仍然可以通過強大的HTML5條調用不同的容器而不勞駕class和id這類屬性。像以往的DIV布局，我們在css中可能要這樣調用: div#news {}
代碼如下:
div.section {}
div.article {}
div.header {}
div.content {}
div.footer {}
div.aside {}
我們再來看看基於HTML5的實例: section {}
復制代碼
代碼如下:
article {}
header {}
footer {}
aside {}
這是個進步，但仍有一些問題需要解決。在<div>實例中，我們需要通過class或id屬性來調用頁面中的元素。這種邏輯將允許我們將樣式應用到文檔中的任何一個元素上，無論是整體還是個體。例如在<div>實例中，.section 和 .content元素很容易定位。但是在HTML5實例中，實際文檔中會有很多個section元素。其實我們可以添加一些特定的屬性選擇器來調用那些不同的section元素，不過謝天謝地，我沒現在可以用少量的高級CSS選擇器來定位不同的section元素。
不使用class和id定位HTML-5元素
下面讓我們來看看如何在不使用class和id的情況下定位HTML5頁面元素的一個實例，我們可以使用三種CSS選擇器來定位和辨別實例中的元素。如下:
後代選擇器:[CSS 2.1]: EF
兄弟選擇器:[CSS 2.1]: E + F
子元素選擇器:[CSS 2.1]: E > F
下面讓我們來看看如何不使用class和id而完成對文檔中的那些section元素的定位吧:
定位最外層的<section>元素
考慮到我們的例子並不是一套完整的HTML5代碼，所以我們假定在<body>元素下有個<nav>元素與<section>元素是兄弟元素。這樣的話，我們就可以向下面代碼那樣定位最外層的
<section>了:
代碼如下:
body nav+section {}
定位下一個<section>元素
作為最外層<section>元素下的唯一直屬子集元素，這個<section>元素也許可以這樣定位:
復制代碼
代碼如下:
section>section {}
定位<article>元素
可以定位<article>元素的方法有很多，不過最簡單的方法當然就是後代選擇器了:
代碼如下:
section section article {}
定位<header>、<section> 和<footer>元素
這三個元素分別在兩個地方都出現過，一是在<article>元素中出現，另一是在<aside>元素中出現。這種差別能讓我們輕松定位每個元素。
代碼如下:
article header {}
article section {}
article footer {}
或者一起定義:
代碼如下:
section section header {}
section section section {}
section section footer {}
到目前為止，我們已經使用CSS2.1選擇器排除掉了所有的class和id。那麼我們為什麼還需要使用CSS3 呢？我很高興你能這么問…
使用CSS3對HTML5元素進行高級定位
雖然我們已經使用CSS2.1選擇器排除掉了所有的class和id，顯然還會有很多更復雜的情況需要CSS3的高級選擇器來解決。讓我們通過完成一下的實例來了解一下如何在不使用無用的class和id屬性的情況下利用CSS3定位頁面元素。
使用一個唯一的日誌 (post)ID定位所有日誌
wordpress提供給我們一種包含了ID的每篇日誌的源代碼輸出。這種信息通常用於導航和/或了解資料的意圖，不過CSS3可以利用這些唯一的ID來定義這些日誌的樣式。當然，你還可以像往常那樣為每篇日誌添加class=」post」這樣的屬性，但這就與我們練習的意圖相沖突了(再加上它沒有一點樂趣所在)。使用」子字元串匹配選擇器」，我們就可以像下面這樣定位所有日誌和它們的不同元素了。
代碼如下:
article[id*=post-] {} /* 定位所有日誌 */
article[id*=post-] header h1 {} /* 定位所有日誌中的h1標簽 */
article[id*=post-] section p {} /* 定位所有日誌中的p標簽 */
我們仍然可以使用同樣的方式定位評論的元素和它們的子元素。
代碼如下:
article[id*=comment-] {} /* 定位所有評論 */
article[id*=comment-] header h1 {} /* 定位所有評論中的h1標簽 */
article[id*=comment-] section p {} /* 定位所有評論中的p標簽 */
定位一些指定的區域(section)或文章(article)
有很多博客的日誌量和評論量都相當大，HTML 5 會將它們由<section>或<article>元素組成。為了定位哪些指定的<section> 或<article>元素，我們就要轉而使用強大的「:nth-child」選擇器了:
代碼如下:
section:nth-child(1) {} /* 選擇第一個 <section> */
article:nth-child(1) {} /* 選擇第一個 <article> */
section:nth-child(2) {} /* 選擇第二個 <section> */
article:nth-child(2) {} /* 選擇第二個 <article> */
同樣，我們可以使用「:nth-last-child」選擇器定位反序的一些元素。
代碼如下:
section:nth-last-child(1) {} /* 選擇最後一個 <section> */
article:nth-last-child(1) {} /* 選擇最後一個 <article> */ </p> <p>section:nth-last-child(2) {} /* 選擇倒數第二個 <section> */
article:nth-last-child(2) {} /* 選擇倒數第二個 <article> */
使用更多的方式選擇指定元素
另一種選擇HTML5中指定元素(如 header、section和footer)的方法就是利用」:only-of-type」選擇器的優勢。由於這些HTML5元素通常會在很多地方出現不止一次，所以當我們想定位那種在父元素下僅出現過一次的標簽時這種方法很方便。例如，我們要選擇的是在某元素中有切僅有的唯一一個元素，如以下代碼:
代碼如下:
<section>
<section></section>
<section>
<section>定位這個section元素</section>
</section>
<section>
<section>定位這個section元素</section>
</section>
<section>
<section>但不定位這個section元素</section>
<section>和這個section元素</section>
</section>
<section></section>
</section>
我們可以僅使用以下一行選擇器:
代碼如下:
section>section:only-of-type {}
再次嘮叨，你可以固執的為每個元素添加ID屬性，但你會失去代碼的可擴展性、維護性和絕對簡潔的結構與表現相分離。 CSS3的確能讓我們可快速更方便的定位幾乎所有沒有ID和class屬性的頁面元素。
⑷ 學習web前端，需要掌握哪些知識點以怎樣的學習順序
第一階段:
HTML CSS:HTML進階、CSS進階、div css布局、HTML css整站開發。
JavaScript基礎:Js基礎教程、js內置對象常用方法、常見DOM樹操作大全、ECMAscript、DOM、BOM、定時器和焦點圖。
JS基本特效:常見特效、例如:tab、導航、整頁滾動、輪播圖、JS製作幻燈片、彈出層、手風琴菜單、瀑布流布局、滾動事件、滾差視圖。
JS高級特徵:正則表達式、排序演算法、遞歸演算法、閉包、函數節流、作用域鏈、基於距離運動框架、面向對象基礎。
JQuery:基礎使用懸著器、DOM操作、特效和動畫、方法鏈、拖拽、變形、JQueryUI組件基本使用。
第二階段:
HTML5和移動Web開發
HTML5:HTML5新語義標簽、HTML5表單、音頻和視頻、離線和本地存儲、SVG、Web Socket、Canvas。
CSS3:CSS3新選擇器、偽元素、臉色表示法、邊框、陰影、background系列屬性改變、Transition、動畫、景深和深透、3D效果製作、Velocity.js框架、元素進場、出場策略、炫酷CSS3網頁製作。
Bootstrap:響應式概念、媒體查詢、響應式網站製作、刪格系統、刪格系統原理、Bootstrap常用模板、LESS和SASS。
移動Web開發:跨終端WEB和主流設備簡介、視口、流式布局、彈性盒子、rem、移動終端JavaScript事件、手機中常見JS效果製作、Zepto.js、手機聚劃算頁面、手機滾屏。
第三階段:
HTTP服務和AJAX編程
WEB伺服器基礎:伺服器基礎知識、Apache伺服器和其他WEB伺服器介紹、Apache伺服器搭建、HTTP介紹。
PHP基礎:PHP基礎語法、使用PHP處理簡單的GET或者POST請求。
AJAX上篇:Ajax簡介和非同步的概念、Ajax框架的封裝、XMLHttpRequest對象詳細介紹方法、兼容性處理方法、Ajax框架的封裝、Ajax中緩存問題、XML介紹和使用。
AJAX下篇:JSON和JSON解析、數據綁定和模板技術、JSONP、跨域技術、圖片預讀取和lazy-load技術、JQuery框架中的AjaxAPI、使用Ajax實現爆布流案例額。
第四階段:
面向對象進階
面向對象終極篇:從內存角度到理解JS面向對象、基本類型、復雜類型、原型鏈、ES6中的面向對象、屬性讀寫許可權、設置器、訪問器。
面向對象三大特徵:繼承性、多態性、封裝性、介面。
設計模式:面向對象編程思維、單例模式、工廠模式、策略模式、觀察者模式、模板方法模式、代理模式、裝飾者模式、適配器模式、面向切面編程。
第五階段:
封裝一個屬於自己的框架
框架封裝基礎:事件流、冒泡、捕獲、事件對象、事件框架、選擇框架。
框架封裝中級:運動原理、單物體運動框架、多物體運動框架、運動框架面向對象封裝。
框架封裝高級和補充:JQuery框架雛形、可擴展性、模塊化、封裝屬於傳智自己的框架。
第六階段:
模塊化組件開發
面向組件編程:面向組件編程的方式、面向組件編程的實現原理、面向組件編程實戰、基於組件化思想開發網站應用程序。
面向模塊編程:AMD設計規范、CMD設計規范、RequireJS，LoadJS、淘寶的SeaJS。
第七階段:
主流的流行框架
Web開發工作流:GIT/SVN、Yeoman腳手架、NPMer依賴管理工具、Grunt/Gulp/Webpack。
MVC/MVVM/MVW框架:Angular.js、Backbone.js、Knockout/Ember。
常用庫:React.js、Vue.js、Zepto.js。
第八階段:
HTML5原生移動應用開發
Cordova:WebApp/NativeApp/HybirdApp簡介、Cordova簡介、與PhoneGap之間的關系、開發環境搭建、Cordova實戰(創建項目，配置，編譯，調試，部署發布)。
Ionic:Ionic簡介和同類對比、模板項目解析、常見組件及使用、結合Angular構建APP、常見效果(下拉刷新，上拉載入，側滑導航，選項卡)。
React Native:React Native簡介、React Native環境配置、創建項目，配置，編譯，調試，部署發布、原生模塊和UI組件、原生常用API。
HTML5 :HTML5 中國產業聯盟、HTML5 Plus Runtime環境、HBuilder開發工具、MUI框架、H5 開發和部署。
第九階段:
Node.js全棧開發
快速入門:Node.js發展、生態圈、Io.js、Linux/Windows/OS X環境配置、REPL環境和控制台程序、非同步編程，非阻塞I/O、模塊概念，模塊管理工具、開發流程，調試，測試。
核心模塊和對象:全局對象global，process，console，util、事件驅動，事件發射器、加密解密，路徑操做。
祝你學有所成！
如果你對於學習前端有任何不懂的可以隨時來問我，我給你提供一個非常不錯的前端交流學習qun：前面是一一四，中間是一八八，後面是四九三一。有問題就在裡面問我，這樣你可以少走很多彎路，做起來有效率，記得多跟有經驗的人交流，別閉門造車。如果沒有比較好的教程，也可以管我要。
⑸ HTML5+CSS3是WEB趨勢嗎
是的。超過六成的開發者正在使用HTML5+CSS3來構建應用，而不足兩成的本地應用開發者正打算盡可能少地使用本地技術來實現功能和服務。這個趨勢，無疑是有利於HTML5+CSS3的發展的，而且開發者們也越來越多地將HTML5作為首選平台。
⑹ 《響應式Web設計HTML5和CSS3實戰》pdf下載在線閱讀，求百度網盤雲資源
《響應式Web設計》（Ben Frain）電子書網盤下載免費在線閱讀
鏈接：https://pan..com/s/1dkxel1FOOKV7bUlPJFKrYQ
書名：響應式Web設計
作者：Ben Frain
譯者：王永強
豆瓣評分：7.3
出版社：人民郵電出版社
出版年份：2013-1-1
頁數：231
內容簡介：
隨著iPad mini的發布，又一個新的屏幕尺寸誕生了。用不著全面統計，你就會發現移動互聯網時代眾多的屏幕規格，從智能手機的3、4、5英寸，到平板電腦的7、8、9、10英寸，再到筆記本和台式機的13至30英寸，絕非目前單一的固定或流式布局所能應付。於是，響應式設計應運而生，而且它也將成為移動互聯網時代前端設計與開發人員的一門必修課。
說到底，響應式Web設計並非一門獨立的技術，而只是現有技術的一個組合應用。只要有一點HTML和CSS基礎的讀者都能順利地掌握它。對於中、高級的前端設計和開發人員，翻閱本書也有助於理清自己的知識脈絡，對這個新的設計理念獲得更全面、深入的理解和把握。
作者簡介：
Ben Frain是一名具有十多年經驗的網頁設計師和前端工程師，直接與世界各地的客戶和設計機構並肩工作。同時他還是一名技術記者，定期為一些關注Mac平台、前沿科技、網頁設計和航空技術的刊物撰稿。
在此之前，他曾是一名懷才不遇的（而且謙虛謹慎的）電視演員，畢業於索爾福德大學的媒體與表演專業。他寫了四部（自認為）同樣被低估的劇本，而且始終心懷能賣出一部的信念（盡管不像最初那麼強烈了）。
工作之餘，在身體（和妻子）允許的情況下，他喜歡玩室內足球。 他的個人網站是www.benfrain.com，Twitter地址是twitter.com/benfrain。
⑺ HTML5和Web前端是什麼意思，有什麼區別
HTML5是一個標記語言，WEB前端是展示web應用的。可以這么簡單的理解。
一個WEB應用可以分為前端和後端。前端負責頁面展示，展示數據。後端負責程序邏輯和數據處理。
我覺的一個WEB前端應該包括：HTML、JS、CSS技術，來展示一個WEB應用。
這里HTML語言在這里充當一個頁面框架的作用，就像搭建一個房屋的骨架，房梁和柱子。那麼此時，這個頁面是很醜的，沒有任何色彩裝飾。那麼利用CSS後，就可以在這個框架上裝飾頁面，使頁面變得漂亮。此時，頁面雖然變得華麗漂亮，但是如果點擊頁面的一個按鈕就不會有任何反應，點擊搜索不會出現現象，那就是JS要完成的事情了。這個三者配合使用，才會使頁面變得豐富多彩、華麗繽紛、炫酷的頁面。
以上是我淺薄的見解，希望對您有所幫助。
⑻ 《響應式Web設計HTML5和CSS3實戰》epub下載在線閱讀，求百度網盤雲資源
《響應式Web設計》（Ben Frain）電子書網盤下載免費在線閱讀
鏈接：
書名：響應式Web設計
作者：Ben Frain
譯者：王永強
豆瓣評分：7.3
出版社：人民郵電出版社
出版年份：2013-1-1
頁數：231
內容簡介：
隨著iPad mini的發布，又一個新的屏幕尺寸誕生了。用不著全面統計，你就會發現移動互聯網時代眾多的屏幕規格，從智能手機的3、4、5英寸，到平板電腦的7、8、9、10英寸，再到筆記本和台式機的13至30英寸，絕非目前單一的固定或流式布局所能應付。於是，響應式設計應運而生，而且它也將成為移動互聯網時代前端設計與開發人員的一門必修課。
本書堪稱學習響應式Web設計的難得佳作。它不僅全面、細致、圖文並茂地介紹了響應式設計相關的技術，比如媒體查詢、流式布局、彈性媒體和彈性字體等，還把近幾年來Web設計領域公認的最佳設計理念有機地融入到了實例當中，比如移動先行（Mobile First）、漸進增強、平穩退化、無障礙設計等。更加難得的是，本書以設計跨屏幕的網頁（響應式設計）為出發點，以點帶面，把如今Web設計領域兩大標準的最新版本HTML5和CSS3也納入其中，讀者在掌握先進設計方法的同時也能掌握最新的設計技術（比如使用新的HTML5結構化語義標記、嵌入媒體、響應式視頻，以及CSS3的新選擇器、特效、過渡、變形和動畫等），從而可以免除重復學習新標准之苦，讓自己一步跨入Web設計領域的最前沿。無論你想學習響應式Web設計，還是學習HTML5和CSS3的實際應用，本書都能滿足你的需要，是毋庸置疑的明智之選。
說到底，響應式Web設計並非一門獨立的技術，而只是現有技術的一個組合應用。只要有一點HTML和CSS基礎的讀者都能順利地掌握它。對於中、高級的前端設計和開發人員，翻閱本書也有助於理清自己的知識脈絡，對這個新的設計理念獲得更全面、深入的理解和把握。
習慣移動閱讀的讀者，可訪問圖靈社區，購買本書電子版：http://www.ituring.com.cn/book/1055
作者簡介：
Ben Frain是一名具有十多年經驗的網頁設計師和前端工程師，直接與世界各地的客戶和設計機構並肩工作。同時他還是一名技術記者，定期為一些關注Mac平台、前沿科技、網頁設計和航空技術的刊物撰稿。
在此之前，他曾是一名懷才不遇的（而且謙虛謹慎的）電視演員，畢業於索爾福德大學的媒體與表演專業。他寫了四部（自認為）同樣被低估的劇本，而且始終心懷能賣出一部的信念（盡管不像最初那麼強烈了）。
工作之餘，在身體（和妻子）允許的情況下，他喜歡玩室內足球。 他的個人網站是www.benfrain.com，Twitter地址是twitter.com/benfrain。
⑼ HTML5+CSS3新手怎麼學習
隨著移動互聯網的發展，web前端逐漸受到企業的重視，前端開發人員的薪資也水漲船高，越來越多的人看好前端行業的發展，想要轉行加入。下面，給大家分享一份web前端學習路線圖，希望對初學者有所幫助。Web前端行業的發展，讓前端人員能完成比以前更多的職責范圍，所以未來前端可以寬口徑就業，前景非常好。
對於零基礎的人而言，要怎麼學習web前端呢?
1、 前端頁面重構。主要內容為PC端網站布局、Photoshop 工具及切圖、H5移動端網頁布局、HTML5+CSS3新特性與交互。學習目標是完成PC端網站布局，可實現響應式布局，一套代碼適配 PC 端、移動端、平板設備等。
2、 前後端網頁交互。主要內容為JavaScript語法全面進階、ES6 到 ES10 新語法實踐、jQuery 應用及插件使用、設計模式及插件編寫、封裝JS工具庫及Web APIS、AJAX+PHP+MySQL前後端交互、前端工程化與模塊化應用以及PC 端全棧開發項目等。學習目標是可以掌握前端工程化工具，如 git、gulp、webpack 等，搭建項目及開發項目。
3、 Node.js + 前端框架。主要內容為Node.js 全面進階、Koa2+MongoDB搭建服務、Vue.js 框架、React.js 框架、小程序雲開發與小程序框架、原生APP與混合APP、數據可視化與桌面應用等。學習目標是掌握桌面應用及可視化大數據，實現復雜數據展示類項目，能夠獨立完成前後台相關功能，勝任HTML5全棧開發工程師職位。很多學習web前端的朋友都希望在學成後能找到一份滿意的工作，所以我們在學習過程中一定要注意實戰經驗的積累，如果你所學的東西對企業沒有用，那你所做的一切都是無用功
⑽ 有沒有關注html5和css3
本文標題的這副圖片，是用Phosotshop製作的。但是，在搜索引擎中你卻無法搜索到它，搜索引擎還沒有強大到能夠識別圖片裡面的文字。並且由於圖片的體積不算太小，可能網速慢的網友在瀏覽的時候不得不耐心的等待圖片的刷新。那麼，有沒有一種新的方法可以避免這些缺點呢?
有的，HTML5和CSS3就可以滿足你的需求。甚至，它可以做的更多，更好。作為一名設計師，我們應當了解它們是什麼東西，有什麼特性，從而進一步思考通過HTML5和CSS3我們能做些什麼。
什麼是HTML5和CSS3
HTML和CSS並不難理解。HTML為構成網頁的主要語言。通過這種語言，我們可以向計算機說明網頁格式、內容、顯示效果等等。而CSS則是專門用來控制網頁顯示效果的語言。這時候問題出來了，為什麼我們要單獨使用CSS呢，HTML不是一樣可以控制Web頁面的顯示效果么?為了回答這個問題，我舉個簡單的例子：
有沒有發現如果一旦形容的事情過多，想要把事情描述清楚的時候，我們不得不重復大量的信息?頁面語言也是一樣，在這種情況下顯得雜亂無章，非常難以理出頭緒。通過將控制顯示效果的語言集成到CSS里，我們不但可以保證頁面語言主體部分的簡潔，而且可以非常方便的復用各種語言集合。
HTML5和CSS3是HTML和CSS的最新版本，它們目前均未確定標准，但是已經公布的新特徵已經讓我們心動不已。
HTML 5的新特新
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，你可以更快捷的得到以往用很多插件才能得到的效果。同過使用元素本身來取代大部分圖片，網頁的載入速度會得到提升，這些原本是圖片的內容，也可以被搜索引擎檢索到。