一、 HTML5的新特性
HTML5 的新增特性主要是針對(duì)于以前的不足侦鹏，增加了一些新的標(biāo)簽册赛、新的表單和新的表單屬性等。
1.1 HTML5 新增的語義化標(biāo)簽
以前布局坐梯，我們基本用div 來做徽诲。div 對(duì)于搜索引擎來說，是沒有語義的吵血。
<header> 頭部標(biāo)簽
<nav> 導(dǎo)航標(biāo)簽
<article> 內(nèi)容標(biāo)簽
<section> 定義文檔某個(gè)區(qū)域(可以理解 大的div)
<aside> 側(cè)邊欄標(biāo)簽
<footer> 尾部標(biāo)簽
- 這種語義化標(biāo)準(zhǔn)主要是針
對(duì)搜索引擎的 - 這些新標(biāo)簽頁面中可以使用
多次 - 在
IE9中谎替，需要把這些元素轉(zhuǎn)換為塊級(jí)元素 - 其實(shí)，我們
移動(dòng)端更喜歡使用這些標(biāo)簽
1.2 HTML5 新增的多媒體標(biāo)簽
使用它們可以很方便的在頁面中嵌入音頻和視頻蹋辅，而不再去使用 flash 和其他瀏覽器插件院喜。
新增的多媒體標(biāo)簽主要包含兩個(gè)：
音頻：<audio>
視頻：<video>
【1】視頻
a. 當(dāng)前<video> 元素支持三種視頻格式： 盡量使用 mp4格式
<!--不斷去尋找適合瀏覽器可播放的視頻-->
<video controls="controls" width="300">
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
您的瀏覽器暫不支持 <video> 標(biāo)簽播放視頻
</ video >
b. video常見屬性
【2】音頻
HTML5 在不使用插件的情況下，也可以原生的支持音頻格式文件的播放晕翠，當(dāng)然喷舀，支持的格式是有限的。
<!--不斷去尋找適合瀏覽器可播放的音頻->
< audio controls="controls" >
<source src="happy.mp3" type="audio/mpeg" >
<source src="happy.ogg" type="audio/ogg" >
您的瀏覽器暫不支持 <audio> 標(biāo)簽淋肾。
</ audio>
a. 常見的屬性值
谷歌瀏覽器把音頻和視頻自動(dòng)播放禁止了
1.3 HTML5 新增的input標(biāo)簽
1.4 HTML5 新增的的表單屬性
可以通過以下設(shè)置方式修改placeholder里面的字體顏色：
input::placeholder {
color: pink;
}
二硫麻、 CSS3提高
CSS3 給我們新增了選擇器，可以更加便捷樊卓，更加自由的選擇目標(biāo)元素拿愧。
-
屬性選擇器(權(quán)重為10) -
結(jié)構(gòu)偽類選擇器(權(quán)重為10) -
偽元素選擇器(權(quán)重為1)
2.1 屬性選擇器
屬性選擇器可以根據(jù)元素特定屬性的來選擇元素。 這樣就可以不用借助于類或者id選擇器碌尔。
注意：類選擇器浇辜、屬性選擇器券敌、偽類選擇器，權(quán)重為 10(和類選擇器一樣)實(shí)例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3新增屬性選擇器</title>
<style>
/* 必須是input 但是同時(shí)具有 value這個(gè)屬性 選擇這個(gè)元素 [] */
input[value] {
color:pink;
}
/* 只選擇 type =text 文本框的input 選取出來 */
input[type=text] {
color: pink;
}
/* 選擇首先是div 然后 具有class屬性 并且屬性值 必須是 icon開頭的這些元素 */
div[class^=icon] {
color: red;
}
section[class$=data] {
color: blue;
}
div.icon1 {
color: skyblue;
}
/* 類選擇器和屬性選擇器 偽類選擇器 權(quán)重都是 10 */
</style>
</head>
<body>
<!-- 1. 利用屬性選擇器就可以不用借助于類或者id選擇器 -->
<!-- <input type="text" value="請(qǐng)輸入用戶名">
<input type="text"> -->
<!-- 2. 屬性選擇器還可以選擇屬性=值的某些元素 重點(diǎn)務(wù)必掌握的 -->
<input type="text" name="" id="">
<input type="password" name="" id="">
<!-- 3. 屬性選擇器可以選擇屬性值開頭的某些元素 -->
<div class="icon1">小圖標(biāo)1</div>
<div class="icon2">小圖標(biāo)2</div>
<div class="icon3">小圖標(biāo)3</div>
<div class="icon4">小圖標(biāo)4</div>
<div>我是打醬油的</div>
<!-- 4. 屬性選擇器可以選擇屬性值結(jié)尾的某些元素 -->
<section class="icon1-data">我是安其拉</section>
<section class="icon2-data">我是哥斯拉</section>
<section class="icon3-ico">哪我是誰</section>
</body>
</html>
2.2 結(jié)構(gòu)偽類選擇器
結(jié)構(gòu)偽類選擇器主要根據(jù)文檔結(jié)構(gòu)來選擇器元素柳洋， 常用于根據(jù)父級(jí)選擇器里面的子元素
【1】
nth-child（n） 選擇某個(gè)父元素的一個(gè)或多個(gè)特定的子元素（重點(diǎn)）
- n 可以是數(shù)字待诅，關(guān)鍵字和公式
- n 如果是數(shù)字，就是選擇第 n 個(gè)子元素熊镣， 里面數(shù)字從1開始…
- n 可以是關(guān)鍵字：
even偶數(shù)卑雁，odd奇數(shù) -
n 可以是公式：常見的公式如下 ( 如果n是公式，則從0開始計(jì)算绪囱，但是第 0 個(gè)元素或者超出了元素的個(gè)數(shù)會(huì)被忽略 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3新增結(jié)構(gòu)偽類選擇器</title>
<style>
/* 1. 選擇ul里面的第一個(gè)孩子 小li */
ul li:first-child {
background-color: pink;
}
/* 2. 選擇ul里面的最后一個(gè)孩子 小li */
ul li:last-child {
background-color: pink;
}
/* 3. 選擇ul里面的第2個(gè)孩子 小li */
ul li:nth-child(2) {
background-color: skyblue;
}
ul li:nth-child(6) {
background-color: skyblue;
}
</style>
</head>
<body>
<ul>
<li>我是第1個(gè)孩子</li>
<li>我是第2個(gè)孩子</li>
<li>我是第3個(gè)孩子</li>
<li>我是第4個(gè)孩子</li>
<li>我是第5個(gè)孩子</li>
<li>我是第6個(gè)孩子</li>
<li>我是第7個(gè)孩子</li>
<li>我是第8個(gè)孩子</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3新增結(jié)構(gòu)偽類選擇器-nth-child</title>
<style>
/* 1.把所有的偶數(shù) even的孩子選出來 */
ul li:nth-child(even) {
background-color: #ccc;
}
/* 2.把所有的奇數(shù) odd的孩子選出來 */
ul li:nth-child(odd) {
background-color: gray;
}
/* 3.nth-child(n) 從0開始 每次加1 往后面計(jì)算 這里面必須是n 不能是其他的字母 選擇了所有的孩子*/
ol li:nth-child(n) {
background-color: pink;
}
/* 4.nth-child(2n)母選擇了所有的偶數(shù)孩子 等價(jià)于 even*/
ol li:nth-child(2n) {
background-color: pink;
}
ol li:nth-child(2n+1) {
background-color: skyblue;
}
ol li:nth-child(n+3) {
background-color: pink;
}
ol li:nth-child(-n+3) {
background-color: pink;
}
</style>
</head>
<body>
<ul>
<li>我是第1個(gè)孩子</li>
<li>我是第2個(gè)孩子</li>
<li>我是第3個(gè)孩子</li>
<li>我是第4個(gè)孩子</li>
<li>我是第5個(gè)孩子</li>
<li>我是第6個(gè)孩子</li>
<li>我是第7個(gè)孩子</li>
<li>我是第8個(gè)孩子</li>
</ul>
<ol>
<li>我是第1個(gè)孩子</li>
<li>我是第2個(gè)孩子</li>
<li>我是第3個(gè)孩子</li>
<li>我是第4個(gè)孩子</li>
<li>我是第5個(gè)孩子</li>
<li>我是第6個(gè)孩子</li>
<li>我是第7個(gè)孩子</li>
<li>我是第8個(gè)孩子</li>
</ol>
</body>
</html>
區(qū)別：
1. nth-child 對(duì)父元素里面所有孩子排序選擇（序號(hào)是固定的） 先找到第n個(gè)孩子测蹲，然后看看是否和E匹配
2. nth-of-type 對(duì)父元素里面指定子元素進(jìn)行排序選擇。 先去匹配E 鬼吵，然后再根據(jù)E 找第n個(gè)孩子
實(shí)例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3新增選擇器nth-type-of</title>
<style>
ul li:first-of-type {
background-color: pink;
}
ul li:last-of-type {
background-color: pink;
}
ul li:nth-of-type(even) {
background-color: skyblue;
}
/* nth-child 會(huì)把所有的盒子都排列序號(hào) */
/* 執(zhí)行的時(shí)候首先看 :nth-child(1) 之后回去看 前面 div */
section div:nth-child(1) {
background-color: red;
}
/* nth-of-type 會(huì)把指定元素的盒子排列序號(hào) */
/* 執(zhí)行的時(shí)候首先看 div指定的元素 之后回去看 :nth-of-type(1) 第幾個(gè)孩子 */
section div:nth-of-type(1) {
background-color: blue;
}
</style>
</head>
<body>
<ul>
<li>我是第1個(gè)孩子</li>
<li>我是第2個(gè)孩子</li>
<li>我是第3個(gè)孩子</li>
<li>我是第4個(gè)孩子</li>
<li>我是第5個(gè)孩子</li>
<li>我是第6個(gè)孩子</li>
<li>我是第7個(gè)孩子</li>
<li>我是第8個(gè)孩子</li>
</ul>
<!-- 區(qū)別 -->
<section>
<p>光頭強(qiáng)</p>
<div>熊大</div>
<div>熊二</div>
</section>
</body>
</html>
2.3 偽元素選擇器
偽元素選擇器可以幫助我們利用CSS創(chuàng)建新標(biāo)簽元素扣甲，而不需要HTML標(biāo)簽，從而簡化HTML結(jié)構(gòu)齿椅。
-
before和after創(chuàng)建一個(gè)元素琉挖，但是屬于行內(nèi)元素 - 新創(chuàng)建的這個(gè)元素在文檔樹中是找不到的，所以我們稱為
偽元素 語法： element::before {}- before 和 after 必須有
content 屬性 - before 在父元素內(nèi)容的前面創(chuàng)建元素媒咳，after 在父元素內(nèi)容的后面插入元素
-
偽元素選擇器和標(biāo)簽選擇器一樣粹排，權(quán)重為 1
實(shí)例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>偽元素選擇器before和after</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
/* div::before 權(quán)重是2 */
div::before {
/* 這個(gè)content是必須要寫的 */
/* display: inline-block; */
content: '我';
/* width: 30px;
height: 40px;
background-color: purple; */
}
div::after {
content: '小豬佩奇';
}
</style>
</head>
<body>
<div>
是
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>偽元素選擇器使用場(chǎng)景-字體圖標(biāo)</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?1lv3na');
src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?1lv3na') format('truetype'),
url('fonts/icomoon.woff?1lv3na') format('woff'),
url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
div {
position: relative;
width: 200px;
height: 35px;
border: 1px solid red;
}
div::after {
position: absolute;
top: 10px;
right: 10px;
font-family: 'icomoon';
/* content: '?'; */
content: '\e91e';
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2.4 偽元素選擇器使用場(chǎng)景
【1】偽元素字體圖標(biāo)
p::before {
position: absolute;
right: 20px;
top: 10px;
content: '\e91e';
font-size: 20px;
}
【2】仿土豆效果
/* 當(dāng)我們鼠標(biāo)經(jīng)過了 土豆這個(gè)盒子种远，就讓里面before遮罩層顯示出來 */
.tudou:hover::before {
/* 而是顯示元素 */
display: block;
}
代碼實(shí)例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>偽元素選擇器使用場(chǎng)景2-仿土豆網(wǎng)顯示隱藏遮罩案例</title>
<style>
.tudou {
position: relative;
width: 444px;
height: 320px;
background-color: pink;
margin: 30px auto;
}
.tudou img {
width: 100%;
height: 100%;
}
.tudou::before {
content: '';
/* 隱藏遮罩層 */
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
}
/* 當(dāng)我們鼠標(biāo)經(jīng)過了 土豆這個(gè)盒子涩澡，就讓里面before遮罩層顯示出來 */
.tudou:hover::before {
/* 而是顯示元素 */
display: block;
}
</style>
</head>
<body>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
<div class="tudou">
<img src="images/tudou.jpg" alt="">
</div>
</body>
</html>
【3】偽元素清除浮動(dòng)
- 額外標(biāo)簽法也稱為隔墻法，是 W3C 推薦的做法坠敷。
- 父級(jí)添加 overflow 屬性
3. 父級(jí)添加after偽元素
4. 父級(jí)添加雙偽元素
【4】CSS3盒子模型
CSS3 中可以通過 box-sizing 來指定盒模型妙同，有2個(gè)值：即可指定為 content-box、border-box膝迎，這樣我們計(jì)算盒子大小的方式就發(fā)生了改變粥帚。
可以分成兩種情況：
- box-sizing: content-box 盒子大小為 width + padding + border （以前默認(rèn)的)
- box-sizing: border-box 盒子大小為 width
如果盒子模型我們改為了box-sizing: border-box ， 那padding和border就不會(huì)撐大盒子了（前提padding和border不會(huì)超過width寬度）
代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3盒子模型</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
box-sizing: content-box;
}
p {
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
/* css3 盒子模型 盒子最終的大小就是 width 200 的大小 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
小豬喬治
</div>
<p>
小豬佩奇
</p>
</body>
</html>
【5】CSS3圖片變模糊
CSS3濾鏡filter限次，filter CSS屬性將模糊或顏色偏移等圖形效果應(yīng)用于元素芒涡。
filter: 函數(shù)(); 例如： filter: blur(5px); blur模糊處理 數(shù)值越大越模糊
實(shí)例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圖片模糊處理filter</title>
<style>
img {
/* blur是一個(gè)函數(shù) 小括號(hào)里面數(shù)值越大，圖片越模糊 注意數(shù)值要加px單位 */
filter: blur(15px);
}
img:hover {
filter: blur(0);
}
</style>
</head>
<body>
<img src="images/pink.jpg" alt="">
</body>
</html>
【6】CSS3 calc 函數(shù)
calc() 此CSS函數(shù)讓你在聲明CSS屬性值時(shí)執(zhí)行一些計(jì)算
width: calc(100% - 80px);
括號(hào)里面可以使用 + - * / 來進(jìn)行計(jì)算卖漫。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3屬性calc函數(shù)</title>
<style>
.father {
width: 300px;
height: 200px;
background-color: pink;
}
.son {
/* width: 150px; */
/* width: calc(150px + 30px); */
width: calc(100% - 30px);
height: 30px;
background-color: skyblue;
}
</style>
</head>
<body>
<!-- 需求我們的子盒子寬度永遠(yuǎn)比父盒子小30像素 -->
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
【7】CSS新增屬性
過渡（transition)是CSS3中具有顛覆性的特征之一费尽，我們可以在不使用 Flash 動(dòng)畫或JavaScript 的情況下，當(dāng)元素從一種樣式變換為另一種樣式時(shí)為元素添加效果羊始。
過渡動(dòng)畫： 是從一個(gè)狀態(tài) 漸漸的過渡到另外一個(gè)狀態(tài)
可以讓我們頁面更好看旱幼，更動(dòng)感十足，雖然 低版本瀏覽器不支持（ie9以下版本） 但是不會(huì)影響頁面布局突委。
我們現(xiàn)在經(jīng)常和 :hover 一起 搭配使用柏卤。
transition: 要過渡的屬性 花費(fèi)時(shí)間 運(yùn)動(dòng)曲線 何時(shí)開始;
1.屬性 ： 想要變化的 css 屬性冬三， 寬度高度 背景顏色 內(nèi)外邊距都可以 。如果想要所有的屬性都變化過渡缘缚， 寫一個(gè)all 就可以勾笆。
- 花費(fèi)時(shí)間： 單位是 秒（必須寫單位） 比如 0.5s
- 運(yùn)動(dòng)曲線： 默認(rèn)是 ease （可以省略）
-
何時(shí)開始：單位是 秒（必須寫單位）可以設(shè)置延遲觸發(fā)時(shí)間 默認(rèn)是 0s （可以省略）
實(shí)例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3 過渡效果</title>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition: 變化的屬性 花費(fèi)時(shí)間 運(yùn)動(dòng)曲線 何時(shí)開始; */
/* transition: width .5s ease 0s, height .5s ease 1s; */
/* 如果想要寫多個(gè)屬性，利用逗號(hào)進(jìn)行分割 */
/* transition: width .5s, height .5s; */
/* 如果想要多個(gè)屬性都變化忙灼，屬性寫all就可以了 */
/* transition: height .5s ease 1s; */
/* 誰做過渡匠襟，給誰加 */
transition: all 0.5s;
}
div:hover {
width: 400px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
進(jìn)度條實(shí)例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3過渡練習(xí)-進(jìn)度條</title>
<style>
.bar {
width: 150px;
height: 15px;
border: 1px solid red;
border-radius: 7px;
padding: 1px;
}
.bar_in {
width: 50%;
height: 100%;
background-color: red;
/* 誰做過渡給誰加 */
transition: all .7s;
}
.bar:hover .bar_in {
width: 100%;
}
</style>
</head>
<body>
<div class="bar">
<div class="bar_in"></div>
</div>
</body>
</html>
三、 狹義的HTML5 CSS3
