web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
生活随笔
收集整理的這篇文章主要介紹了
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
https://www.bilibili.com/video/BV1pE411q7FU?p=276
文章目錄
- html5新特性
- html5新增語義化標簽 header頭部 nav導航 article內容 section區域 aside側邊欄 footer尾部 標簽
- 視頻video標簽（支持格式、語法、常見屬性）
- 音頻audio標簽
- 多媒體標簽總結
- html新增input類型
- html新增表單屬性（輸入是否為空驗證required、輸入提示文本placeholder、自動聚焦輸入框autofocus、輸入框自動記錄歷史輸入autocomplete、多文件上傳mutiple）
- css3新特性
- 屬性選擇器 []
- 結構偽類選擇器 first-child last-child nth-child
- nth-child和nth-of-type的區別
- 結構偽類選擇器小結
- 偽元素選擇器（css替代子盒子直接在父盒子中插入標簽）
- 偽元素選擇器使用場景1：字體圖標
- 偽元素選擇器：仿土豆播放效果
- 雙偽元素清除浮動原理
- css3盒子模型（以設計盒子長寬顯示盒子，border邊框和padding不會撐大盒子：box-sizing:border-box;）（box-sizing:content-box會撐大盒子）（新style頭）
- 讓圖片變模糊
- calc函數（比如使子盒子寬度永遠比父盒子小30px）
- 過渡transition
- 進度條案例
html5新特性
html5新增語義化標簽 header頭部 nav導航 article內容 section區域 aside側邊欄 footer尾部 標簽
視頻video標簽（支持格式、語法、常見屬性）
音頻audio標簽
多媒體標簽總結
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style> </head><body><audio src="mzj.mp3" autoplay='autoplay' controls='controls'></audio> </body></html>html新增input類型
<!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>Document</title> </head><body><!-- 我們驗證的時候必須添加form表單域 --><form action=""><ul><li>郵箱: <input type="email" /></li><li>網址: <input type="url" /></li><li>日期: <input type="date" /></li><li>時間: <input type="time" /></li><li>數量: <input type="number" /></li><li>手機號碼: <input type="tel" /></li><li>搜索: <input type="search" /></li><li>顏色: <input type="color" /></li><!-- 當我們點擊提交按鈕就可以驗證表單了 --><li> <input type="submit" value="提交"></li></ul></form> </body></html>
html新增表單屬性（輸入是否為空驗證required、輸入提示文本placeholder、自動聚焦輸入框autofocus、輸入框自動記錄歷史輸入autocomplete、多文件上傳mutiple）
<!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>HTML5新增表單屬性</title><style>input::placeholder {color: pink;}</style> </head><body><form action=""><input type="search" name="sear" id="" required="required" placeholder="pink老師" autofocus="autofocus"autocomplete="off"><input type="file" name="" id="" multiple="multiple"><input type="submit" value="提交"></form></body></html>css3新特性
屬性選擇器 []
<!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 但是同時具有 value這個屬性 選擇這個元素 [] *//* 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;}/* 類選擇器和屬性選擇器 偽類選擇器 權重都是 10 */</style> </head><body><!-- 1. 利用屬性選擇器就可以不用借助于類或者id選擇器 --><!-- <input type="text" value="請輸入用戶名"><input type="text"> --><!-- 2. 屬性選擇器還可以選擇屬性=值的某些元素 重點務必掌握的 --><input type="text" name="" id=""><input type="password" name="" id=""><!-- 3. 屬性選擇器可以選擇屬性值開頭的某些元素 --><div class="icon1">小圖標1</div><div class="icon2">小圖標2</div><div class="icon3">小圖標3</div><div class="icon4">小圖標4</div><div>我是打醬油的</div><!-- 4. 屬性選擇器可以選擇屬性值結尾的某些元素 --><section class="icon1-data">我是安其拉</section><section class="icon2-data">我是哥斯拉</section><section class="icon3-ico">哪我是誰</section></body></html>結構偽類選擇器 first-child last-child nth-child
nth表示第幾個的意思
隔行變色效果，nth-child(even) even表示偶數
可以把5的倍數的盒子選出來設置margin-right:0;
nth-child和nth-of-type的區別
type是給指定類型的子元素排序號；child是給所有子元素排序號
結構偽類選擇器小結
偽元素選擇器（css替代子盒子直接在父盒子中插入標簽）
如盒子里的三角標簽
為什么叫“偽元素”？因為元素只在css文件中，在html文件中完全找不到
before和after都是父元素的孩子，但是一個放在盒子前面，一個放在后面，什么意思？（就是字面意思）
偽元素選擇器使用場景1：字體圖標
<!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>偽元素選擇器使用場景-字體圖標</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>
因為沒有下載字體，所以顯示不出來
偽元素選擇器：仿土豆播放效果
為什么要用偽元素，比如播放按鈕，寫在html里，如果有十個播放窗口，就要寫十個盒子，但是如果是寫在css里，只用寫一次就好了
中間千萬別加空格
雙偽元素清除浮動原理
css3盒子模型（以設計盒子長寬顯示盒子，border邊框和padding不會撐大盒子：box-sizing:border-box;）（box-sizing:content-box會撐大盒子）（新style頭）
<!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>
以后就使用新style頭：
讓圖片變模糊
<!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>* {margin: 0;padding: 0;box-sizing: border-box;}img {/* blur是一個函數 小括號里面數值越大，圖片越模糊 注意數值要加px單位 */filter: blur(15px);}img:hover {filter: blur(0);}</style> </head><body><img src="../蜥蜴女仆.gif" alt=""> </body></html>
calc函數（比如使子盒子寬度永遠比父盒子小30px）
<!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函數</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><!-- 需求我們的子盒子寬度永遠比父盒子小30像素 --><div class="father"><div class="son"></div></div> </body> </html>過渡transition
進度條案例
<!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>.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>總結
以上是生活随笔為你收集整理的web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： web前端入门学习 css（3）（背景相
- 下一篇： web前端入门学习 css（4）（盒子模