今日学习总结-CSDN博客

本文链接：https://blog.csdn.net/hfq11/article/details/125307417

1.HTML5新增视频标签,音频几乎一致
autoplay 值：autoplay 视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)
control 值：controls 向用户显示播放控件
width 值：pixels(像素) 设置播放器宽度
height pixels（像素) 设置播放器高度
loop loop 播放完是否继续播放该视频，循环播放
preload none (不应加载视频) /auto (预先加载视频) 规定是否预加载视频(如果有了autoplay就忽略该属
src url视频 url地址
poster lmgurl 加载等待的画面图片
muted muted 静音播放
2.表单验证

<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>
3.新增表单属性:
(属性)（值）（作用）
required required 内容必填
placeholder 提示文本表单的提示信息，存在默认值将不显示
autofocus autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete off/on 是/否打开显示历史提交
multiple multiple 可多选文件提交
4. 利用属性选择器就可以不用借助于类或者id选择器

/* 必须是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 */
5.新增结构伪类选择器-nth-child
/* 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:first-of-type {
background-color: pink;
}
ul li:last-of-type {
background-color: pink;
}
ul li:nth-of-type(odd/even奇、偶) {
background-color: skyblue; //括号利填数值或公式5n、-n-5、n-5
}
/* nth-child 会把所有的盒子都排列序号 */
/* 执行的时候首先看 :nth-child(1) 之后回去看前面 div */
/*这里如果不是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;
}
6.伪元素选择器
用于用css创建新标签元素，而不需要html标签，简化html结构
属于行内元素
/* div::before 权重是2 */
div::before {
/* 这个content是必须要写的 */
/* display: inline-block; */
content: '我';
/* width: 30px;
height: 40px;
background-color: purple; */
}
div::after {
content: '小猪佩奇';
}
<body>
<div>
是
</div>
</body>
伪元素选择器使用场景：
（1）字体图标：
div::after {
position: absolute;content: '\e91e'; }
（2）仿土豆网显示隐藏遮罩（当多个盒子附带遮罩时用伪类，使结构不会那么复杂）：
.tudou::after {
content: '';
position: absolute;
display: inline-block;
display: none;
/* 隐藏遮罩层 */
top: 0;
/* absolute默认不占位置，故要写top才会遮上图片 */
/* right: 0; */
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;

}
.tudou:hover::after {
/* 当我们鼠标经过了土豆这个盒子，就让里面before遮罩层显示出来 */
display: block;
cursor: pointer;
}
7.盒子模型，用box-sizing: border-box;防止border、padding撑大
box-sizing: content-box;默认
8.图片模糊处理filter。
img {
/* blur是一个函数小括号里面数值越大，图片越模糊注意数值要加px单位 */
filter: blur(15px);
}
img:hover {
filter: blur(0);
}
9.CSS3宽度calc函数
/*需求我们的子盒子宽度永远比父盒子小30像素 */
width: calc(100% - 30px);
10.CSS3过渡效果
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;
}
11.京东进度条
.bar {
/* position: relative; */