/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-childnth-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尾部 标签
<!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>header, nav {height: 120px;background-color: pink;border-radius: 15px;width: 800px;margin: 15px auto;}section {width: 500px;height: 300px;background-color: skyblue;}</style></head><body><header>头部标签</header><nav>导航栏标签</nav><section>某个区域</section></body></html>
视频video标签（支持格式、语法、常见属性）
<!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>video {width: 100%;}</style></head><body><video src="index_video_bg.mp4" poster='i.jpg' autoplay='autoplay' muted='muted' controls='controls'loop='loop'></video></body></html>
音频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表示第几个的意思
<!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>/* 1. 选择ul里面的第一个孩子 小li */ul li:first-child {background-color: pink;}/* 2. 选择ul里面的最后一个孩子 小li */ul li:last-child {background-color: pink;}/* 3. 选择ul里面的第2个孩子 小li */ul li:nth-child(2) {background-color: skyblue;}ul li:nth-child(6) {background-color: skyblue;}</style></head><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></html>
隔行变色效果，nth-child(even) even表示偶数
可以把5的倍数的盒子选出来设置margin-right:0;
<!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-child</title><style>/* 1.把所有的偶数 even的孩子选出来 */ul li:nth-child(even) {background-color: #ccc;}/* 2.把所有的奇数 odd的孩子选出来 */ul li:nth-child(odd) {background-color: gray;}/* 3.nth-child(n) 从0开始 每次加1 往后面计算 这里面必须是n 不能是其他的字母 选择了所有的孩子*//* ol li:nth-child(n) {background-color: pink;} *//* 4.nth-child(2n)母选择了所有的偶数孩子 等价于 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个孩子</li><li>我是第2个孩子</li><li>我是第3个孩子</li><li>我是第4个孩子</li><li>我是第5个孩子</li><li>我是第6个孩子</li><li>我是第7个孩子</li><li>我是第8个孩子</li></ul><ol><li>我是第1个孩子</li><li>我是第2个孩子</li><li>我是第3个孩子</li><li>我是第4个孩子</li><li>我是第5个孩子</li><li>我是第6个孩子</li><li>我是第7个孩子</li><li>我是第8个孩子</li></ol></body></html>
nth-child和nth-of-type的区别
type是给指定类型的子元素排序号；child是给所有子元素排序号
<!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 会把所有的盒子都排列序号 *//* 执行的时候首先看 :nth-child(1) 之后回去看 前面 div */section div:nth-child(1) {background-color: red;}/* nth-of-type 会把指定元素的盒子排列序号 *//* 执行的时候首先看 div指定的元素 之后回去看 :nth-of-type(1) 第几个孩子 */section div:nth-of-type(1) {background-color: blue;}</style></head><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><!-- 区别 --><section><p>光头强</p><div>熊大</div><div>熊二</div></section></body></html>
结构伪类选择器小结
伪元素选择器（css替代子盒子直接在父盒子中插入标签）
如盒子里的三角标签
为什么叫“伪元素”？因为元素只在css文件中，在html文件中完全找不到
before和after都是父元素的孩子，但是一个放在盒子前面，一个放在后面，什么意思？（就是字面意思）
<!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 权重是2 */div::before {/* 这个content是必须要写的 *//* display: inline-block; */content: '我';/* width: 30px;height: 40px;background-color: purple; */}div::after {content: '小猪佩奇';}</style></head><body><div>是</div></body></html>
伪元素选择器使用场景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里，只用写一次就好了
中间千万别加空格
<!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>伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例</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;}/* 当我们鼠标经过了 土豆这个盒子，就让里面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>
双伪元素清除浮动原理
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头：
<style>* {margin: 0;padding: 0;box-sizing: border-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>图片模糊处理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>div {width: 200px;height: 100px;background-color: pink;/* transition: 变化的属性 花费时间 运动曲线 何时开始; *//* transition: width .5s ease 0s, height .5s ease 1s; *//* 如果想要写多个属性，利用逗号进行分割 *//* transition: width .5s, height .5s; *//* 如果想要多个属性都变化，属性写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>
进度条案例
<!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函数 过渡
