HTML5和CSS3提高

不懶人 發表於 2021-04-08

一.HTML5的新特性

HTML5 的新增特性主要是針對於以前的不足,增加了一些新的標籤、新的表單和新的表單屬性等。
這些新特性都有相容性問題,基本是 IE9+ 以上版本的瀏覽器才支援,如果不考慮相容性問題,可以大量使用這
些新特性。
 
1.HTML5 新增的語義化標籤
以前佈局,我們基本用 div 來做。div 對於搜尋引擎來說,是沒有語義的。
<div class=“header”> </div>
<div class=“nav”> </div>
<div class=“content”> </div>
<div class=“footer”> </div>
<header>:頭部標籤
<nav>:導航標籤
<article>:內容標籤
<section>:定義文件某個區域
<aside>:側邊欄標籤
<footer>:尾部標籤
HTML5和CSS3提高
注意:
這種語義化標準主要是針對搜尋引擎的
這些新標籤頁面中可以使用多次
在 IE9 中,需要把這些元素轉換為塊級元素
其實,我們移動端更喜歡使用這些標籤
 
2.HTML5 新增的多媒體標籤
新增的多媒體標籤主要包含兩個:
音訊:<audio>
視訊:<video>
使用它們可以很方便的在頁面中嵌入音訊和視訊,而不再去使用 flash 和其他瀏覽器外掛。
 
HTML5 在不使用外掛的情況下,也可以原生的支援視訊格式檔案的播放,當然,支援的格式是有限的。
 
視訊<video>:
當前 <video> 元素支援三種視訊格式: 儘量使用 mp4格式
HTML5和CSS3提高
 <video src="檔案地址" controls="controls"></video>
 <video controls="controls" width="300">
 <source src="move.ogg" type="video/ogg" >
 <source src="move.mp4" type="video/mp4" >
 您的瀏覽器暫不支援 <video> 標籤播放視訊
 </ video >
視訊<video>——常見屬性:
HTML5和CSS3提高

 

音訊<audio>:
當前 <audio> 元素支援三種音訊格式:
HTML5和CSS3提高
<audio src="檔案地址" controls="controls"></audio>
< audio controls="controls" >
 <source src="happy.mp3" type="audio/mpeg" >
 <source src="happy.ogg" type="audio/ogg" >
 您的瀏覽器暫不支援 <audio> 標籤。
 </ audio>
常見屬性:
HTML5和CSS3提高

 

 

3.HTML5新增的input型別

HTML5和CSS3提高

 

 

4.HTML5新增的表單屬性

HTML5和CSS3提高

 

 

二.CSS3的新特性

新增選擇器:

1.屬性選擇器

屬性選擇器可以根據元素特定屬性的來選擇元素。 這樣就可以不用藉助於類或者id選擇器。
HTML5和CSS3提高

 

2.結構偽類選擇器

結構偽類選擇器主要根據文件結構來選擇器元素, 常用於根據父級選擇器裡面的子元素
HTML5和CSS3提高

 

3.結構偽類選擇器
nth-child(n) 選擇某個父元素的一個或多個特定的子元素(重點)
n 可以是數字,關鍵字和公式
n 如果是數字,就是選擇第 n 個子元素, 裡面數字從1開始…
n 可以是關鍵字:even 偶數,odd 奇數
n 可以是公式:常見的公式如下 ( 如果n是公式,則從0開始計算,但是第 0 個元素或者超出了元素的個數會被忽略 )
HTML5和CSS3提高
結構偽類選擇器主要根據文件結構來選擇器元素, 常用於根據父級選擇器裡面的子元素
區別:
nth-child 對父元素裡面所有孩子排序選擇(序號是固定的) 先找到第n個孩子,然後看看是否和E匹配
nth-of-type 對父元素裡面指定子元素進行排序選擇。 先去匹配E ,然後再根據E 找第n個孩子
 
4.偽元素選擇器(重點)
偽元素選擇器可以幫助我們利用CSS建立新標籤元素,而不需要HTML標籤,從而簡化HTML結構。
HTML5和CSS3提高
注意:
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: 函式(); 例如: filter: blur(5px); blur模糊處理 數值越大越模糊
 
計算盒子寬度 width: calc 函式:
calc() 此CSS函式讓你在宣告CSS屬性值時執行一些計算。
width: calc(100% - 80px);

 

7.CSS3 過渡(重點)

過渡(transition)是CSS3中具有顛覆性的特徵之一,我們可以在不使用 Flash 動畫或
JavaScript 的情況下,當元素從一種樣式變換為另一種樣式時為元素新增效果。
過渡動畫: 是從一個狀態 漸漸的過渡到另外一個狀態
可以讓我們頁面更好看,更動感十足,雖然 低版本瀏覽器不支援(ie9以下版本) 但是不會影響
頁面佈局。
我們現在經常和 :hover 一起 搭配使用。
transition: 要過渡的屬性 花費時間 運動曲線 何時開始;
屬性 : 想要變化的 css 屬性, 寬度高度 背景顏色 內外邊距都可以 。如果想要所有的屬性都
變化過渡, 寫一個all 就可以。
花費時間: 單位是 秒(必須寫單位) 比如 0.5s
運動曲線: 預設是 ease (可以省略)
何時開始 :單位是 秒(必須寫單位)可以設定延遲觸發時間 預設是 0s (可以省略)