html5上新增加了語義化標簽(結構標簽)，表單屬性，表單種類，全局屬性。

css3增加了transition過渡屬性，transfrom變形屬性，animation幀動畫

標簽語義化：用合理的標簽做合理的事情

CSS3有哪些新特性？

1、css3實現了圓角(border-radius)，陰影(box-shadow)

2、對文字加特效(text-shadow)，線性漸變(gradient)，旋轉(transform)

3、transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜

4、增加了更多的css選擇器和多背景 rgba

5、在css3中唯一引用的偽元素是 ：selection

6、媒體查詢和多欄布局

7、border-image：將圖片規定為包圍 div 元素的邊框

2、html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

新特性：

1、拖拽釋放(Drag and drop) API

2、語義化更好的內容標簽(header：頭部，nav：導航部分，footer：尾部，aside：用于主要內容部分，article：表示獨立的一塊，section：表示頁面中的一塊區域)

3、音頻，視頻(audio，video)API

4、畫布(Canvas)API

5、地理(Geolocation)API

6、本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉數據不丟失

7、sessionStorage的數據瀏覽器關閉后會自動刪除

8、表單控件，calendar、date、time、email、url、search

9、新的技術webworker, websocket, Geolocation

表單種類：

time：時間

tel：手機號 數字鍵盤

表單屬性：

autocomplete：是否保存用戶輸入信息

required： 必須輸入內容

移除了的元素：

1、純表現的元素：basefont，big，center，font，s，strike，tt，u。

2、對可用性產生負面影響的的元素：frame，frameset，noframes。

新增標簽的兼容問題：

HTML5語義化標簽在IE6-8下，對于不支持的標簽不會有任何的樣式,也默認的當成行內元素來出理,所以在樣式表里要對這些標簽定義一下 它默認的display

通過引入如下js來解決ie9以下新增標簽的兼容問題

什么是響應式設計？

他是關于網頁制作的過程中讓不同的設備有不同的尺寸和不同的功能。響應式設計是讓所有的人能在這些設備上讓網站正常運行

CSS3新增加了那些偽類？

1、p:first-of-type 選擇屬于其父元素的首個 p 元素的每個p元素。

2、p:last-of-type 選擇屬于其父元素的最后 p元素的每個 p 元素。

3、p:only-of-type 選擇屬于其父元素唯一的 p 元素的每個 p 元素。

4、p:only-child 選擇屬于其父元素的唯一子元素的每個 p 元素。

5、p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個 p 元素。

:enabled：啟用、:disabled：關閉( 控制表單控件的禁用狀態)。:checked，單選框或復選框被選中

css3的核心模塊：

transition：過渡動畫

transform：變形屬性

animation：幀動畫

Transition過渡：

transition-property 過渡屬性 all|[attr]

transition-duration 過渡時間

transition-delay 延遲時間

linear：(勻速)

2D變換：

rotate() 旋轉函數

css3的結構選擇器：

nth-child(n) 獲取第幾個子元素

first-child 第一個子元素

在css2中所有的屬性都是即時效果的

在css3中增加了動畫屬性，可以實現動畫效果

響應式開發：

1、設置viewport(視口)

2、頁面布局不能使用絕對寬度

3、引入媒體查詢

現存的三種布局方式:

固定布局

流式布局

彈性布局

響應式布局：

響應式布局說白就是頁面根據不同的屏幕像素寬高適應頁面布局

就是隨著頁面的屬性(寬高)變化，頁面也跟這變化

主要css技術：

1、多使用max-width/min-width，不寫死寬度

2、多使用 media查詢來響應不同的分辨率

3、使用動態，rem方案保證移動端的顯示效果

響應式和自適應的區別：

1、自適應布局(流體布局、fluid、layout)值得是頁面的寬度不固定，跟響應式寬度沒關系

2、自適應頁面強調不寫死寬度；響應式頁面強調 響應

3、自適應頁面可以響應式，也可以不響應式

4、響應式頁面可以自適應，也可以不自適應，(也就是定寬度)

移動端常用的事件類庫

1、百度云TOUCH手勢事件庫

2、Zepto(移動端的小型jQuery=>它的用法和實現完全是按照JQ實現的)

css預處理器-less

less自帶一套語法及解析器，通過解析器可以將less代碼轉換成css代碼

1、增加了變量

2、增加了Mixin混合：其實指的就是將其他選擇器里的內容拿過來用

增加了變量、Mixin、函數等特性

在當前LESS文件中導入所依賴的LESS文件

reference：只是導入過來供調取使用,編譯的時候不編譯這里的代碼

@import "reset";

@import (reference) "public";

簡述一下Sass、Less，且說明區別？

他們是動態的樣式語言，是css預處理器，css上的一種抽象層，他們是一種特殊的語法/語言而編譯成css

1、變量符不一樣，less是@，Sass$

2、Sass支持條件語句，可以使用if{}，else{}，for循環等等，而less不支持

3、Sass是基于Ruby的，是在服務器端處理的，而less是需要引入ess.js來處理less代碼輸出css到瀏覽器

Sass和less的相同之處

1、變量：可以單獨定義一些通用的樣式，在需要的時候進行調用

2、混合(Mixin)：class中的class(將一個class引入另一個class中，實現class之間的繼承)，還可以帶參數的混合，就像函數一樣

3、嵌套：class中嵌套class，從而較少class的重復

4、運算：提供了加減乘除

Sass和less的不同之處

1、實現方式：less是基于JavaScript，是在客戶端進行處理的。而sass是基于Ruby的，是在服務器端進行的處理的

2、定義變量：less定義變量使用前綴是@，而sass是$

3、混合：less使用混合時，只需要在classB中根據classA的命名來使用，Sass中首先在定義混合時需要使用@mixin命令，其次在調用時需要使用@include命令來引入之前定義的混合。

4、解析方式：Less可以向上/向下解析；Sass只能向上解析

5、變量的作用域：Less中的變量有全局和局部之分；Sass可以變量可以理解為都是全局的，但可以通過在變量后面跟！default，在引入Sass文件之前改變變量的屬性值來解決這一問題。

6、比起Less，Sass中增加了條件語句(if、if...else)和循環語句(for循環、while循環和each循環)還有自定義函數：

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的html5嵌套css语言,HTML5和CSS3的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。