html5上新增加了語義化標(biāo)簽(結(jié)構(gòu)標(biāo)簽)，表單屬性，表單種類，全局屬性。

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

標(biāo)簽語義化：用合理的標(biāo)簽做合理的事情

CSS3有哪些新特性？

1、css3實(shí)現(xiàn)了圓角(border-radius)，陰影(box-shadow)

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

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

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

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

6、媒體查詢和多欄布局

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

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

新特性：

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

2、語義化更好的內(nèi)容標(biāo)簽(header：頭部，nav：導(dǎo)航部分，footer：尾部，aside：用于主要內(nèi)容部分，article：表示獨(dú)立的一塊，section：表示頁面中的一塊區(qū)域)

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

4、畫布(Canvas)API

5、地理(Geolocation)API

6、本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉數(shù)據(jù)不丟失

7、sessionStorage的數(shù)據(jù)瀏覽器關(guān)閉后會自動刪除

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

9、新的技術(shù)webworker, websocket, Geolocation

表單種類：

time：時間

tel：手機(jī)號 數(shù)字鍵盤

表單屬性：

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

required： 必須輸入內(nèi)容

移除了的元素：

1、純表現(xiàn)的元素：basefont，big，center，font，s，strike，tt，u。

2、對可用性產(chǎn)生負(fù)面影響的的元素：frame，frameset，noframes。

新增標(biāo)簽的兼容問題：

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

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

什么是響應(yīng)式設(shè)計？

他是關(guān)于網(wǎng)頁制作的過程中讓不同的設(shè)備有不同的尺寸和不同的功能。響應(yīng)式設(shè)計是讓所有的人能在這些設(shè)備上讓網(wǎng)站正常運(yùn)行

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：關(guān)閉( 控制表單控件的禁用狀態(tài))。:checked，單選框或復(fù)選框被選中

css3的核心模塊：

transition：過渡動畫

transform：變形屬性

animation：幀動畫

Transition過渡：

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

transition-duration 過渡時間

transition-delay 延遲時間

linear：(勻速)

2D變換：

rotate() 旋轉(zhuǎn)函數(shù)

css3的結(jié)構(gòu)選擇器：

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

first-child 第一個子元素

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

在css3中增加了動畫屬性，可以實(shí)現(xiàn)動畫效果

響應(yīng)式開發(fā)：

1、設(shè)置viewport(視口)

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

3、引入媒體查詢

現(xiàn)存的三種布局方式:

固定布局

流式布局

彈性布局

響應(yīng)式布局：

響應(yīng)式布局說白就是頁面根據(jù)不同的屏幕像素寬高適應(yīng)頁面布局

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

主要css技術(shù)：

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

2、多使用 media查詢來響應(yīng)不同的分辨率

3、使用動態(tài)，rem方案保證移動端的顯示效果

響應(yīng)式和自適應(yīng)的區(qū)別：

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

2、自適應(yīng)頁面強(qiáng)調(diào)不寫死寬度；響應(yīng)式頁面強(qiáng)調(diào) 響應(yīng)

3、自適應(yīng)頁面可以響應(yīng)式，也可以不響應(yīng)式

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

移動端常用的事件類庫

1、百度云TOUCH手勢事件庫

2、Zepto(移動端的小型jQuery=>它的用法和實(shí)現(xiàn)完全是按照J(rèn)Q實(shí)現(xiàn)的)

css預(yù)處理器-less

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

1、增加了變量

2、增加了Mixin混合：其實(shí)指的就是將其他選擇器里的內(nèi)容拿過來用

增加了變量、Mixin、函數(shù)等特性

在當(dāng)前LESS文件中導(dǎo)入所依賴的LESS文件

reference：只是導(dǎo)入過來供調(diào)取使用,編譯的時候不編譯這里的代碼

@import "reset";

@import (reference) "public";

簡述一下Sass、Less，且說明區(qū)別？

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

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

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

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

Sass和less的相同之處

1、變量：可以單獨(dú)定義一些通用的樣式，在需要的時候進(jìn)行調(diào)用

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

3、嵌套：class中嵌套class，從而較少class的重復(fù)

4、運(yùn)算：提供了加減乘除

Sass和less的不同之處

1、實(shí)現(xiàn)方式：less是基于JavaScript，是在客戶端進(jìn)行處理的。而sass是基于Ruby的，是在服務(wù)器端進(jìn)行的處理的

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

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

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

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

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

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。