CSS 7 HTML5&CSS3提高

最新推荐文章于 2025-01-06 14:08:36 发布

「已注销」

最新推荐文章于 2025-01-06 14:08:36 发布

阅读量104

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_62302666/article/details/123076008

版权

本文详细介绍了HTML5的新特性，包括语义化标签、多媒体标签（视频和音频）、input类型和表单属性。同时，深入探讨了CSS3的现状，如属性选择器、结构伪类选择器（尤其是nth-child和nth-of-type）、伪元素选择器和过渡效果transition。通过实例展示了如何使用这些新特性来提升前端开发效率和用户体验。

摘要由CSDN通过智能技术生成

2.7CSS3过渡transition（重点）

1.HTML5新特性

1.1HTML5新增的语义化标签

1.2HTML5新增的多媒体标签

HTML5在不使用插件的情况下，也可以原生的支持音频格式文件的播放，当然，支持的格式是有限的。

1.2.1视频<video>

两种语法中，一般直接写上面那种给个mp4的格式文件就可以了，若不是mp4且浏览器不支持此格式文件，再按照第二种语法写（第二种语法指先找ogg格式，如果还是不支持找mp4格式，再不支持显示“您的浏览器暂不支持<video>标签播放视频”）

常见属性：

1.2.2音频<audio>

1.2.3多媒体标签总结

1.3HTML5新增的input类型

<!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>HTML5新增的input表单</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>

1.4HTML5新增的表单属性

    <style>
        input::placeholder {
            color: skyblue;
        }
    </style>
</head>

<body>
    <form action="">
        <input type="search" name="search" id="" placeholder="请输入关键词" required="required" autocomplete="off">
        <input type="file" name="" id="" multiple="multiple">
        <input type="submit" value="提交">
    </form>
</body>

2.CSS3的新特性

2.1CSS3的现状

CSS3新增选择器

2.2属性选择器

参考案例：

    <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属性 必须是 date结尾的元素 */
        
        section[class$=date] {
            color: blue;
        }
    </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-date">我是安其拉</section>
    <section class="icon2-date">我是哥斯拉</section>
    <section class="icon3-ico">那我是谁</section>

</body>

注意：类选择器、属性选择器(指中括号里面)、伪类选择器，权重都是10

例如：div[class^=icon]权重为10+1=11 是要比类选择器 .icon1大，因此会执行div[class^=icon]的样式。

2.3结构伪类选择器

2.3.1主要内容

参考案例：

<!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>
    <style>
        /* 1.选择ul里面的第一个孩子 小li */
        
        ul li:first-child {
            background-color: pink;
        }
        /* 2.选择ul里面的最后一个孩子 小li */
        
        ul li:last-child {
            background-color: pink;
        }
        /* 3.选择ul里面的第二个孩子 小li */
        
        ul li:nth-child(2) {
            background-color: skyblue;
        }
        /* 4.选择ul里面的第六个孩子 小li */
        
        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>

2.3.2 重点 nth-child

参考案例：

<!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>
        /* 1.把所有ul li中所有的偶数 even的孩子选出来 */
        
        ul li:nth-child(even) {
            background-color: #ccc;
        }
        /* 2.把所有的奇数 odd的孩子选出来 */
        
        ul li:nth-child(odd) {
            background-color: grey;
        }
        /* 3.nth-child(n) 从0开始 每次加1（会忽略第0个元素） 往后面计算 这里面必须是n 不能是其他字母 选择了所有的的孩子 */
        /* ol li:nth-child(n) {
            background-color: skyblue;
        } */
        /* 4.nth-child(2n)选择了所有的偶数孩子 等价于even */
        /* ol li:nth-child(2n) {
            background-color: skyblue;
        }
        
        ol li:nth-child(2n+1) {
            background-color: skyblue;
        } */
        
        ol li:nth-child(-n+3) {
            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>
    <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>

2.3.3nth-of-type(n)

nth-of-type(n)的使用和nth-child(n)非常相似，区别在于，

区别：

1.nth-child对父元素里面的所有孩子排序选择（序号是固定的）先找到第n个孩子然后看是否匹配

2.nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E 找第n个孩子

参考案例：

<!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>
        /* nth-child会把所有的盒子都排列序号 */
        /* 执行的时候首先看  :nth-child(1) 之后回去看前面div */
        /* 因此下两行代码中找到了序号为1的元素为p标签不符合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>
    <!-- 区别 -->
    <section>
        <p>光头强</p>
        <div>熊大</div>
        <div>熊二</div>
    </section>
</body>

</html>

效果：

2.3.4小结：

关于最后一点，例如 section div:nth-of-type(1) 权重为12（冒号后面才算结构伪类选择器）

2.4伪元素选择器（重要）

2.4.1什么是伪元素选择器

简单举例（父元素内容前面/后面创建元素）：

<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        div::before {
            /*必须包含content: ' ';*/
            content: '我';
        }
        
        div::after {
            content: '小猪佩奇';
        }
    </style>
</head>

<body>
    <div>
        是
    </div>
</body>

</html>

该伪类选择器盒子在文档树中是找不到的，但是却能在网页中扫到一部份区域，再次证明了::before和::after是两个盒子，但是注意：创建的两个元素是行内元素，要添加宽高要转换为块级元素。

伪类选择器权重为1，例div::before权重为2

2.4.2伪元素选择器使用场景

像以前一样再给个盒子很麻烦，而利用伪元素选择器可以直接在CSS中创建字体图标

使HTML结构更简单

参考代码：

<!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>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?vuf98p');
            src: url('fonts/icomoon.eot?vuf98p#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?vuf98p') format('truetype'), url('fonts/icomoon.woff?vuf98p') format('woff'), url('fonts/icomoon.svg?vuf98p#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        
        div {
            position: relative;
            width: 200px;
            height: 35px;
            border: 1px solid red;
        }
        
        div::before {
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: 'icomoon';
            color: red;
            font-size: 20px;
            content: '\e901';
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

像以前一样做div遮罩层的话，数量多了就不方便了，现在就可以用伪类选择器

使HTML结构更简单

参考代码：

<!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>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 0 auto;
        }
        
        .tudou img {
            width: 100%;
            height: 100%;
        }
        
        .tudou::before {
            /* 隐藏遮罩层 */
            display: none;
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(../jpgs/bofang.png) no-repeat center;
        }
        /* 当我们鼠标经过土豆这个盒子时，就让里面遮罩层显示出来 */
        
        .tudou:hover::before {
            /*一定要连着写没有空格*/
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <img src="../jpgs/土豆.png" alt="">
    </div>
</body>

</html>

复习+理解清除浮动的方法

在父元素最后一个浮动后面插入一个空盒子clear:both

不提倡，会增加HTML结构复杂

（上面中样式里的:after是为了适应低版本浏览器，直接写::也可以）

2.5CSS3盒子模型

参考案例：

代码：

<!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: 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>

因此，我们以后可以直接给全部标签添加box-sizing：borer-box,就不用担心border和padding撑开盒子了

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

2.6CSS3其他属性特性（了解）

2.6.1滤镜filter

参考案例：

<!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>
        img {
            filter: blur(5px);
        }
        
        img:hover {
            filter: blur(0);
        }
    </style>
</head>

<body>
    <img src="../jpgs/小米2.png" alt="">
</body>

</html>

2.6.2CSS3 calc函数

例如，calc函数可以让某个子盒子宽度永远比父盒子宽度少80像素（实例中会再加上水平居中）

注意在写代码的时候 + - * / 符号两边要空格。

2.7CSS3过渡transition（重点）

2.7.1什么是过渡

2.7.2过渡lian

案例：

<!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>
        div {
            width: 300px;
            height: 100px;
            background-color: pink;
            /* 变化的属性 花费时间 运动曲线 何时开始 */
            transition: width .5s;
        }
        
        div:hover {
            width: 600px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

升级：

<!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>
        div {
            width: 300px;
            height: 100px;
            background-color: pink;
            /* 变化的属性 花费时间 运动曲线 何时开始 */
            /* transition: width .5s ease 0s, height .5s ease 0s; */
            /* 如果想要写多个属性，利用逗号进行分割 */
            /* transition: width .5s, height .5s; */
            /* 如果想要多个属性都变化，属性写all就可以了 */
            /* 谁做过渡给谁加 */
            transition: all .5s;
        }
        
        div:hover {
            width: 600px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

3.广义的HTML5

4.课后作业

4.1

<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 大盒子 */
        .box {
            overflow: hidden;
            margin: 10px auto;
            width: 370px;
            height: 565px;
        }
        /* 图片 */
        .box img {
            display: block;
            margin: 10px auto;
            height: 310px;
        }
        /* 标题 */
        .box p {
            display: block;
            margin-top: 40px;
            padding: 0 10px;
            font-size: 17px;
            color: gray;
        }
        /* 价格板块 */
        .price {
            margin-top: 10px;
            margin-left: 5px;
        }
        
        .price .miaosha {
            font-weight: 700;
            font-size: 26px;
            color: #e43736;
        }
        
        .price .origin {
            color: gray;
            font-weight: 700;
            text-decoration: line-through;
        }
        /* 售出情况板块 */
        .situation {
            margin-top: 15px;
            width: 100%;
            height: 27px;
        }
        
        .sold,
        .have {
            float: left;
            padding-left: 10px;
            font-size: 15px;
            line-height: 27px;
        }
        
        .sold span,
        .have span {
            color: #e96256;
        }
        /* 进度条 */
        .progress {
            float: left;
            width: 165px;
            height: 20px;
            margin-top: 2.5px;
            margin-left: 10px;
            border: 1px solid red;
            border-radius: 10px;
        }
        
        .progress span {
            float: left;
            width: 130px;
            height: 100%;
            background-color: red;
            border: 1px solid red;
            border-radius: 10px 0 0 10px;
        }
        /* 抢购板块 */
        a {
            display: block;
            margin-top: 10px;
            width: 100%;
            height: 60px;
            background-color: #bd2716;
            color: white;
            text-decoration: none;
            line-height: 60px;
            text-align: center;
            font-size: 25px;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 图片板块 -->
        <img src="../jpgs/华为mate40.jpg" alt="">
        <!-- 标题板块 -->
        <p>mate40Pro无充电器版【TWS无线耳机套装】5G手机</p>
        <!-- 价格板块 -->
        <div class="price">
            <span class="miaosha">￥7478</span>
            <span class="origin">￥7499</span>
        </div>
        <!-- 输出情况板块 -->
        <div class="situation">
            <div class="sold">已售<span>87%</span></div>
            <div class="progress">
                <span></span>
            </div>
            <div class="have">剩余<span>29</span>件</div>
        </div>
        <!-- 抢购板块 -->
        <a href="#">立即抢购</a>
    </div>
</body>

</html>

4.2过渡小动画

<!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>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?dn2un1');
            src: url('fonts/icomoon.eot?dn2un1#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?dn2un1') format('truetype'), url('fonts/icomoon.woff?dn2un1') format('woff'), url('fonts/icomoon.svg?dn2un1#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        /* 整个盒子 */
        
        .box {
            position: relative;
            margin: 50px auto;
            width: 100px;
            height: 100px;
            background-color: #ff6f00;
        }
        /* 包括两个图标的小盒子 */
        
        .smallbox {
            position: absolute;
            top: 0;
            /* span行内元素会有默认边距，需要手动调整 */
            left: 10px;
            /* 设置宽度为整个盒子的2倍，使得两个span文字图标在一行显示,但此时右边的图标被遮住 后面通过定位展现 */
            width: 200px;
            font-family: 'icomoon';
            color: white;
            line-height: 100px;
            text-align: center;
            font-size: 80px;
            /* 利用定位的过渡实现简单动画 */
            transition: all .5s;
        }
        
        .smallbox:hover {
            /* span行内元素会有默认边距，需要手动调整 */
            left: -110px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="smallbox">
            <span></span>
            <span></span>
        </div>

    </div>
</body>

</html>