前端基礎知識第七章---HTML5和CSS3的新特性

一、HTML5 的新特性

HTML5

的新增特性主要是針對于以前的不足，

增加了一些新的標簽、新的表單和新的表單屬性

等。

這些新特性都有兼容性問題，基本是 IE9+ 以上版本的瀏覽器才支持，如果不考慮兼容性問題，可以大量使用這些新特性。

（1）HTML5 新增的語義化標簽

溫馨提醒：

這種語義化標準主要是

針對搜索引擎

的；

這些新標簽頁面中可以使用

多次

；

在 IE9 中，需要把這些元素轉換為

塊級元素

；

其實，我們移動端更喜歡使用這些標簽，HTML5 還增加了很多其他標簽，我們后面再慢慢學；

（2）HTML5 新增的多媒體標簽

新增的多媒體標簽主要包含兩個：

音頻：

視頻：

使用它們可以很方便的在頁面中嵌入音頻和視頻，而不再去使用flash 和其他瀏覽器插件。

當前

語法演示如下：

視頻

當前

語法演示如下：

音頻

音頻標簽和視頻標簽使用方式基本一致；

瀏覽器支持情況不同；

谷歌瀏覽器把音頻和視頻自動播放禁止了；

我們可以給視頻標簽添加 muted 屬性來靜音播放視頻，音頻不可以（可以通過JavaScript解決）；

視頻標簽是重點，我們經常設置自動播放，不使用 controls 控件，循環和設置大小屬性；

（3）HTML5 新增的 input 類型

標簽規定了用戶可以在其中輸入數據的輸入字段。

元素在

顯示效果如下：

（4）HTML5 新增的表單屬性

二、CSS3 的新特性

（1）CSS3 的現狀

新增的CSS3特性有兼容性問題，ie9+才支持；

移動端支持優于 PC 端；

不斷改進中；

應用相對廣泛；

現階段主要學習：新增選擇器和盒子模型以及其他特性；

CSS3 給我們新增了選擇器，可以更加便捷，更加自由的選擇目標元素。

屬性選擇器

結構偽類選擇器

偽元素選擇器

溫馨提醒：

類選擇器、屬性選擇器、偽類選擇器，權重為10；

（2）屬性選擇器

屬性選擇器可以根據元素特定屬性的來選擇元素。 這樣就可以不用借助于類或者id選擇器。

（3）結構偽類選擇器

結構偽類選擇器主要根據

文檔結構

來選擇器元素， 常用于根據父級選擇器里面的子元素；

nth-child(n) 選擇某個父元素的一個或多個特定的子元素

（重點）

n 可以是數字，關鍵字和公式；

n 如果是數字，就是選擇第 n 個子元素， 里面數字從1開始…；

n 可以是關鍵字：even 偶數，odd 奇數；

n 可以是公式：常見的公式如下 ( 如果n是公式，則從0開始計算，但是第 0 個元素或者超出了元素的個數會被忽略 )；

溫馨提醒：

nth-child 對父元素里面所有孩子排序選擇（序號是固定的） 先找到第n個孩子，然后看看是否和E匹配；

nth-of-type 對父元素里面指定子元素進行排序選擇。 先去匹配E，然后再根據E 找第n個孩子；

關于 nth-child（n） 我們要知道 n 是從 0 開始計算的，要記住常用的公式；

如果是無序列表，我們肯定用 nth-child 更多；

（4）偽元素選擇器（重點）

偽元素選擇器可以幫助我們利用CSS創建新標簽元素，而不需要HTML標簽，從而簡化HTML結構。

溫馨提醒：

before 和 after 創建一個元素，但是屬于行內元素；

新創建的這個元素在文檔樹中是找不到的，所以我們稱為偽元素；

語法： element::before {}

before 和 after 必須有 content 屬性；

before 在父元素內容的前面創建元素，after 在父元素內容的后面插入元素；

偽元素選擇器和標簽選擇器一樣，權重為 1；

完整代碼演示如下：

顯示效果如下：

顯示效果如下：

完整代碼演示如下：

（5）CSS3 盒子模型

CSS3 中可以通過 box-sizing 來指定盒模型，有2個值：即可指定為 content-box、border-box，這樣我們計算盒子大小的方式就發生了改變。

可以分成兩種情況：

box-sizing: content-box 盒子大小為 width + padding + border （以前默認的）；

box-sizing: border-box 盒子大小為 width；

如果盒子模型我們改為了box-sizing: border-box ， 那padding和border就不會撐大盒子了（前提padding和border不會超過width寬度）

（6）CSS3 其他特性（了解）

filter CSS屬性將模糊或顏色偏移等圖形效果應用于元素。

語法演示如下：

filter: 函數();

calc() 此CSS函數讓你在聲明CSS屬性值時執行一些計算。

代碼演示如下：

width: calc(100% - 80px);

溫馨提醒：括號里面可以使用 + - * / 來進行計算。

（7）CSS3 過渡（重點）

過渡（transition)是CSS3中具有顛覆性的特征之一，我們可以在不使用 Flash 動畫或 JavaScript 的情況下，當元素從一種樣式變換為另一種樣式時為元素添加效果；

過渡動畫： 是從一個狀態 漸漸的過渡到另外一個狀態；

可以讓我們頁面更好看，更動感十足，雖然 低版本瀏覽器不支持（ie9以下版本） 但是不會影響頁面布局；

我們現在經常和 :hover 一起 搭配使用；

語法演示如下：

transition: 要過渡的屬性 花費時間 運動曲線 何時開始;

屬性： 想要變化的 css 屬性， 寬度高度 背景顏色 內外邊距都可以 。如果想要所有的屬性都變化過渡， 寫一個all 就可以；

花費時間： 單位是 秒（必須寫單位） 比如 0.5s；

運動曲線： 默認是 ease （可以省略）；

何時開始： 單位是 秒（必須寫單位）可以設置延遲觸發時間，默認是 0s （可以省略）；

溫馨提醒：

過渡的使用口訣 - - 誰做過渡給誰加；

三、總結

由于內容較多，所以我決定分開寫啦，我會堅持一直更新呢！喜歡的朋友們記得點哦！

CSS HTML HTML5

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。