html5新增、CSS3新增(黑马程序员pink老师前端)-CSDN博客

本文链接：https://blog.csdn.net/qq_43701213/article/details/132737738

语义化标签、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、CSS3盒子模型、滤镜filter、calc函数、过渡

语义化标签

标签	说明
header	头部标签
nav	导航标签
article	内容标签
section	定义文档某个位置
aside	侧边栏标签
audio	音频标签
video	视频标签，只支持MP4,WebM,Ogg

新增input类型

类型	说明
email	限制输入为email
url	限制输入为url
date	限制输入为日期
month	限制输入为月
week	限制输入为周
number	限制输入为数字
tel	手机号
search	搜索框
color	生成颜色选择表单

新增表单属性

属性	说明
required	内容不能为空
placeholder	提示文本
autofocus	自动获得焦点
autocomplete	基于之前键入的值，显示填写选项，默认为on
multiple	选择多文件提交

CSS3新增选择器

属性选择器
用元素的特定属性来选择元素，其权重([att])与类选择器的权重相同(0,0,1,0)。

选择符	说明
E[att]	选择具有att属性的E元素
E[att=“val”]	选择具有att属性，且属性值为val的E元素
E[att^=“val”]	选择具有att属性，且属性值开头为val的E元素
E[att$=“val”]	选择具有att属性，且属性值结尾为val的E元素
E[att*=“val”]	选择具有att属性，且属性值含有val的E元素

结构伪类选择器
其权重(:first-child)与类选择器的权重相同(0,0,1,0)。

选择符	说明
E:first-child	匹配父元素中的第一个子元素，对所有子元素排序
E:last-child	匹配父元素中的最后一个子元素
E:nth-child(6)	匹配父元素中的第6个子元素，x可以是数字、关键词（even,odd）和公式(2n+1)
E:first-of-type	匹配父元素中的第一个子元素，只对E元素排序
E:last-of-type	匹配父元素中的最后一个子元素
E:nth-of-type(6)	匹配父元素中的第6个子元素，x可以是数字、关键词（even,odd）和公式(2n+1)

伪元素选择器（重点）
利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
css3用双冒号，之前的用单冒号，写单冒号浏览器自动解析为双冒号。

选择符	说明
E::before	在元素E内部的前面插入内容
E::after	在元素E内部的后面插入内容

before和after创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
before和after必须有content属性
伪元素选择器和标签选择器一样,权重为(0,0,0,1)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .vedio {
            position: relative;
            width: 300px;
            height: 180px;
            margin: 20px auto;
        }

        .vedio img {
            width: 100%;
            height: 100%;
        }

        .vedio::before {
            content: "";
            position: absolute;
            display: none;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4) url(playicon.png) no-repeat center center;
            background-size: 30px;

        }

        .vedio:hover::before {
            display: block;
        }
    </style>
</head>

<body>
    <div class="vedio"><img src="t.webp" alt=""></div>
</body>

</html>

在这里插入图片描述

CSS3盒子模型

box-sizing:content-box 盒子大小等于width+padding+border
box-sizing:border-box 盒子大小等于width

CSS3滤镜filter
filter:函数();
例：filter:blur(5px); 模糊处理，数值越大，越模糊。

计算宽度：calc函数
例：width:calc(100%+30px);

CSS3过渡（重点）
从—个状态渐渐的过渡到另外一个状态。要想写多个属性，用逗号进行分隔

transition:要过渡的属性花费时间运动曲线(默认ease,可省略) 何时开始(默认0s,可省略);

示例：进度条
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .div1 {
            overflow: hidden;
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 15px;
        }

        .in {
            width: 50%;
            height: 100%;
            background-color: red;
            /* 谁做过渡，给谁加transtion */
            transition: all 1s;
        }

        .in:hover {
            width: 100%;
        }
    </style>
</head>

<body>

</body>
<div class="div1">
    <div class="in"></div>
</div>

</html>