1、HTML5新增特性
這些新特性都有兼容性問題，基本是IE9+以上版本瀏覽器才支持
1）新增語義化標簽
2）新增多媒體標簽
音頻：<audio>
視頻：<video>
（1）視頻<video>
? ? ? ? ---盡量使用mp4格式
<video src="文件地址" controls="controls"></video>
常見屬性：
????????禁用autoplay解決方法：
<video src="./images/what.MP4" autoplay="autoplay" muted="muted"></video>
(2)音頻：<audio>
????????語法：
<audio src="文件地址" controls="controls"></audio>
????????audio元素支持三種格式：
3）新增input類型
<style>/* 偽元素 */input::placeholder {color: rgb(243, 40, 8);}</style>
<body><form action=""><input type="search" name="" id="" required="required" placeholder="劍來"><input type="submit" value="提交"></form>
</body>
2、CSS新增特性
1）新增選擇器
（1）屬性選擇器
注意：類選擇器、屬性選擇器、偽類選擇器，權重為10。
<style>input[value] {color: red;}</style>
<body><input type="search" name="" id="" required="required" placeholder="劍來"><input type="submit" value="提交"></body>（2）結構偽類選擇器
<style>ul li:first-child {background-color: skyblue;}ul li:last-child {background-color: pink;}/*nth-child(k):選擇ul里的第k個li*/ul li:nth-child(5) {background-color: red;}</style>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul></body>????????nth-child也是可以選擇多個的。
<style>ul li:nth-child(odd) {background-color: skyblue;}</style>????????n也可以是公式，同時，n從0開始計算，注意nth-child(0)這里面必須是n，不能是其他的字母。
<style>/* 選擇所有的li */ul li:nth-child(n) {background-color: skyblue;}ul li:nth-child(2n) {background-color: skyblue;}</style>nth-child和nth-of-type的區別
????????nth-child會把所有的孩子排序號，執行時先看nth-child（1）然后再往前看找標簽，下面這種情況就是選不出來的。
<style>div p:nth-child(1) {background-color: skyblue;}</style>
<body><div><div>0</div><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p></div></body>????????nth-of-type則是把指定的孩子排列序號，執行時先看標簽，然后再回去看nth-of-type是第幾個孩子，下面這樣就可以選出來。
<style>div p:nth-of-type(1) {background-color: skyblue;}</style>（3）偽元素選擇器（重點）
????????偽元素選擇器可以幫助我們利用CSS創建新的標簽元素，而不需要html標簽，從而簡化html結構。
? ? ? ? 注意：
<style>div {width: 160px;height: 80px;background-color: skyblue;}div::before {content: '偽';}div::after {content: '選擇器';}</style>
<body><div>元素</div>
</body>（4）應用
a.字體圖標
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_5020741_sn609k3h7hh.css"><style>div {position: relative;width: 200px;height: 35px;border: 1px solid red;}div::after {position: absolute;top: 10px;right: 10px;content: '\e65e';font-family: 'iconfont';color: red;font-size: 18px;}</style>
<body><div></div>
</body>
b. 應用：土豆案例
<style>.tudou {position: relative;width: 444px;height: 320px;background-color: skyblue;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 center;}/* 當鼠標經過圖片，mask盒子顯示 */.tudou:hover::before {display: block;}</style>
<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>
</body>c.偽元素清除浮動
display:table;轉換為塊級元素并且一行顯示。
2）盒子模型
如果盒子模型改為box-sizing：border-box;那么padding和border就不會撐大盒子了（前提：padding和border不會超過width寬度）
div {width: 200px;height: 200px;background-color: pink;padding: 20px;/* 此時padding已經撐大了盒子，但是如果我來個 */box-sizing: border-box;/* 就歐了 */}
因此，CSS開頭可以寫：
* {margin: 0;padding: 0;box-sizing: border-box;}
3）其他特性（了解）
（1）圖片模糊
? ? ? ? CSS3濾鏡filter：
（2）計算盒子寬度
? ? ? ? ---calc函數
width:calc(100%-80px);括號里面可以使用+ - * / 來進行計算。
4）CSS3過渡（重點）
? ? ? ? ---類似ppt中的平滑效果
原則：誰動給誰加，也就是誰要過渡，就把transition放在誰里面
如果想同時變換多個屬性，可以直接這么寫：
transition: width 1s, height 1s, background-color 1s;
我們最常用的是這么寫，直接變化所有：
transition: all 1s;
? ? ? ? 進度條布局示例：
<style>.bar {width: 150px;height: 15px;border: 1px solid red;border-radius: 7px;}.bar_in {width: 50%;height: 100%;background-color: red;/* 誰做過渡給誰加 */transition: all .7s;}/* 鼠標放在bar盒子上，bar_in盒子變寬 */.bar:hover .bar_in {width: 100%;}</style>
<body><div class="bar"><div class="bar_in"></div></div>
</body>
 進程基礎)
和animation(動畫)——CSS)
![vue2遷移到vite[保姆級教程]](http://pic.xiahunao.cn/vue2遷移到vite[保姆級教程])
