菜单 搜索
首页 前端知识 css:h5和css3的提高

css:h5和css3的提高

2025-03-01 12:03:09 前端知识 前端哥 850 694 我要收藏

HTML新增标签

我们之前学的html里的div标签在布局的时候什么都能做，但是缺乏语义化的规范，保证不了封装性

而h5新增了一些语义标签，来便于我们管理

这些标签都算块元素（但是兼容性比较差，ie6、7、8里需要把这些元素转化为块级元素），主要是针对搜索引擎的，移动端也可以用，可以像普通的标签一样使用多次

如果是自己做网站的话，很容易被爬虫爬崩，因为指向太明确了，这么说吧!就是小偷进了你家的家门你还给他安了个导航（这是弹幕说的，我感觉很有道理）

除了这些还有新增标签：

音频视频

使用这两个标签可以很方便的在页面里嵌入音频和视频，不再使用flash或其他浏览器的插件video标签只支持三种视频格式：MP4,WebM,Ogg格式，尽量用MP4

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

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

<body>
    <video src="xtdowner.com_260656_mp4_360P.mp4" autoplay="autoplay" muted="muted" controls="controls"></video>
/*自动播放，默认静音播放 播放相关的控件*/
</body>

</html>

可以像控制盒子一样控制视频的长宽：

   <style>
        video {
            width: 100%;
        }
    </style>

当视频没加载出来/没设置自动播放的时候，放目标图片：

 <video src="xtdowner.com_260656_mp4_360P.mp4" muted="muted" controls="controls" loop="loop"
        poster="xtdowner.com_260656.jpg"></video>

需要注意这些标签都是html标签，不能写进css样式里

如果考虑兼容性问题的话需要这么写

<video width="640" height="360" controls>
  <source src="shanghai.mp4" type="video/mp4">
  <source src="shanghai.ogg" type="video/ogg">
  您的浏览器不支持视频标签。
</video>

音频也是一样的，有mp3、Wav、Ogg，mp3是大多数浏览器都支持的文件格式

谷歌把自动播放mp3的功能禁用了，因为一打开就放歌很吓人

<audio src="26449805478-1-30280.mp3" autoplay="autoplay" controls="controls"></audio>

放的是郑州场老大唱的歌捏，因为那次我真的在现场【官攝】陶喆David Tao | 《Angeline》 | Soul Power II鄭州_哔哩哔哩_bilibili

这也是解决兼容性的

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 标签。
</audio>

html5新增的input类型

新增的属性值可以限制用户输入的数据类型

可以设置我们需要的input类型

在规定的input内写的数据类型如果不符合要求会报错（报错的前提是有from表单域）

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

输入正常文字还用之前学的text

css3新增特性

新增选择器

属性选择器

选择带有该属性的标签

标签[属性]{

}

还可以根据属性不同的值来选择：

<!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>
    
        input[type=text] {
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <input type="text" value="请输入用户名">
    <input type="password" value="请输入密码">
</body>

</html>

可以看见type=text的input变成蓝色了：

选择以某些以相同类名开头的元素：

<!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>
        
        div[class^=icon] {
            color: cornflowerblue;
        }
    </style>
</head>

<body>
    <!-- 选择同一类名开头的 -->
    <div class="icon1">111</div>
    <div class="icon2">222</div>
    <div class="icon3">333</div>
    <div class="icon4">444</div>
</body>

</html>

以此类推还有

div[class$=name]{}//类名以name为结尾的div元素
div[class*=name]{}//类名含有name字段的div元素

使用属性选择器要注意样式权重的问题：

选择器选择器权重
*、继承0,0,0,0
元素选择器（标签选择器）0,0,0,1
类选择器、伪类选择器、属性选择器0,0,1,0
id选择器0,1,0,0
行内样式style=""1,0,0,0
!important重要的∞无穷大

结构伪类选择器

选中某个父元素的一个或多个特定的子元素

nth-child(n)
<!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>

        ul li:nth-child(2n) {
            background-color: violet;
        }
    </style>
</head>

<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <div>我不是小li</div>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
</body>

</html>

n是从上往下选择所有li元素，2n就是选择序号偶数的li元素，n+3就是从第三个开始的每三个

n从0开始计算

在摆盒子的时候很有用（比如要第几个盒子没有边框的时候）

猜猜这种情况会显示什么？

<!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>
        ul li:nth-child(3) {
            background-color: violet;
        }
    </style>
</head>

<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <div>我不是小li</div>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
</body>

</html>

是谁会变色？

谁也没有变色！

因为要查找的是【第三个元素并且是li】，从上往下排列（先排序再找对应元素）第三个元素不是li，那么在css眼里，就是没有符合要求的元素所以谁也没有变色

而另一种结构伪类选择器则截然相反，是先找对应元素，再给对应元素排序：

 ul li:nth-of-type(3) {

            background-color: violet;
        }

指定选中类型的第一个、最后一个、第n个

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

        ul li:first-of-type {
            background-color: blue;
        }

        ul li:last-of-type {
            background-color: blueviolet;
        }

        ul li:nth-of-type(3) {
            background-color: darkslateblue;
        }
    </style>
</head>

<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <div>我不是小li</div>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
</body>

</html>

伪元素选择器

伪元素，顾名思义就是伪造，用css创建html标签结构；用css创建的伪元素在文档树里是看不见的；好处就是简化html结构

伪元素前面有两个冒号，像c++的作用域运算符

::before
::after

创建的元素属于行内元素，before和after元素必须有content属性，before在父元素的前面创建元素，after在父元素的后面创建元素

<!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>
        div::before {
            content: "你们好吗";
            background-color: darkgreen;
        }

        div::after {
            content: "骗你的我不好";
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <div>你好</div>
</body>

</html>

伪元素选择器和标签选择器的权重都为1

选择器选择器权重
*、继承0,0,0,0
元素选择器（标签选择器）伪元素选择器0,0,0,1
类选择器、伪类选择器、属性选择器0,0,1,0
id选择器0,1,0,0
行内样式style=""1,0,0,0
!important重要的∞无穷大
<!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>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?ea0gga');
            src: url('fonts/icomoon.eot?ea0gga#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?ea0gga') format('truetype'),
                url('fonts/icomoon.woff?ea0gga') format('woff'),
                url('fonts/icomoon.svg?ea0gga#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        div {
            width: 200px;
            height: 35px;
            border: 1px solid pink;
            position: relative;
        }

        div::after {

            font-family: 'icomoon';
            content: "";
            position: absolute;
            right: 0;
            bottom: 0;
        }
    </style>
</head>

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

</html>

引用字体图标除了小方块还可以转义：

div::after {

            font-family: 'icomoon';
            content: "\ea96";
            /* 转义字符 */
            position: absolute;
            right: 0;
            bottom: 0;
        }

使用伪元素选择器修改之前做的遮罩效果

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: #ff5000;
            margin: 0 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, .3) url(../微信图片_20241106131128.png) no-repeat center;
        }

        .tudou:hover::before {
            /* 当鼠标经过了tudou的时候，::before显现出来 */
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <!-- <div class="mask"></div> -->
        <img src="../lofter_1666024992076.jpg" alt="">
    </div>
</body>

</html>

实现效果：

之前学的清除浮动的伪元素法，也是通过伪元素创建一个盒子放在后面

解决盒子边框和padding改变盒子大小的问题

通过box-sizing来指定盒子模型：content-box和border-box，会改变计算盒子大小的方式

以前默认的方式就是content-box，盒子大小为width+padding+border

而box-sizing:border-box，盒子最终的大小就是width

<!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>
        .www {
            width: 200px;
            height: 200px;
            box-sizing: content-box;
            background-color: aqua;
            border: 20px solid red;
        }

        .hhh {
            width: 200px;
            height: 200px;
            box-sizing: border-box;
            padding: 20px;
            background-color: aqua;
            border: 20px solid pink;
        }
    </style>
</head>

<body>
    <div class="www">111</div>
    <div class="hhh">222</div>
</body>

</html>

模糊图像

使用blur函数

 img {
            filter: blur(5px);
        }

数字越大越模糊，数字要跟单位

将盒子的宽度写成动态形式

之前学的盒子宽度都是固定的，使用calc可以写成动态的，使用+-*/进行运算

运算符左右要空格

<!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>
        .dad {
            width: 300px;
            height: 400px;
            background-color: brown;
        }

        .son {
            width: calc(100% - 30px);
            /* 运算符之间要有空格 */
            height: calc(100% - 30px);
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="dad">
        <div class="son"></div>
    </div>
</body>

</html>

过渡

过渡是css3中具有颠覆性的特性，可以在不使用flash和JavaScript的情况下，为当元素从一种样式变换位另一种样式时添加效果

transition:要过渡的属性 花费时间 运动曲线 何时开始；

属性：选中的要变化的css属性，宽度高度、颜色背景、内外边距等，如果想要所有属性都变化过渡，写一个all就可以

花费时间：单位为秒（必须写单位），如0.5s

运动曲线：默认是ease（可以忽略）

何时开始：单位为秒（必须写单位）可以设置延迟出发时间，默认是0s(可省略)

过渡怎么加？给谁过渡就给谁加！（而不是hover）

修改一下之前做的菠萝吹雪：

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #222222
        }

        .box {
            margin: 100px auto;
            width: 300px;
            height: 450px;
            /* text-align: center; */
            background-color: #f5f5f5;
            border-radius: 10px;
            transition: all .5s;
/*出现动画效果*/

        }

        .box .review {
            font-size: 14px;
            color: rgb(39, 34, 34);
            padding: 0 20px;
            margin-top: 10px;

        }

        .box img {
            width: 100%;
            border-radius: 10px;
        }

        .box .appraise {
            font-size: 10px;
            color: darkgray;
            margin: 20px 20px;
        }

        .box div h3 {
            display: inline-block;
            font-size: 20px;
            width: 200px;
            margin: 10px 0px 0px 20px;
            margin-top: 10px;
            font-weight: 400;

        }

        .box div h3 a {
            text-decoration: none;
            color: black;

        }

        .box div span {
            margin-top: 10px;
            color: #ff6700;
            margin-right: 20px;
        }

        .box div .dre {
            margin-top: 10px;
            color: darkgray;
            font-style: normal;
            /* margin: 0px 0px 0px 3px; */
        }

        .box:hover {
            box-shadow: 0px 0px 10px 1px rgba(255, 204, 34, 0.5);

            border: 1px solid #ffcc22;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="微信图片_20241113155824.jpg" alt="菠萝吹雪">
        <p class="review">这是一只死到临头还在犯贱的菠萝吹雪,也可能是一个补不完deadline的励志轩,也是一个知道周末要考概率论的荷叶饭</p>
        <p class="appraise">来自XUPT的评价</p>
        <div>
            <h3><a href="#">荷叶饭尸块秒杀价...</a></h3>
            <em class="dre">|</em>
            <span>9.9元</span>
        </div>
    </div>
</body>

</html>

实现了指路学长的co导航效果；如果要变多个效果在之间用逗号隔开

实现一个进度条推满的小动画：

<!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>
        .dad {
            width: 150px;
            height: 15px;
            border: 2px solid red;
            border-radius: 7px;

        }

        .son {
            width: 70px;
            height: 15px;
            padding: 1px;
            background-color: red;
            border-radius: 7px;
            transition: width .5s;
        }

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

<body>
    <div class="dad">
        <div class="son"></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">
    <title>Document</title>
    <style> 
      * {
            padding: 0;
            margin: 0;
        }

        .dad {
            position: relative;
            height: 200px;
            width: 200px;
            overflow: hidden;
        }

        .first,
        .second {
            position: absolute;
            width: 200px;
            height: 200px;
            transition: all 1s;
        }

        img {
            display: block;
            width: 100%;
            height: 100%;
        }

        .second {
            top: 0;
            left: 200px;
        }

        .dad:hover .first {
            margin-left: -200px;
        }

        .dad:hover .second {
            left: 0;
        }
    </style>
</head>

<body>
    <div class="dad">
        <span class="first"><img src="xtdowner.com_260656.jpg" alt=""></span>
        <span class="second"><img src="微信图片_20241113202301.jpg" alt=""></span>
    </div>
</body>

</html>

放上去大概就是这个效果啦

关于html5

狭义的html5是标签结构

广义的html5是html5本身+css3+JavaScript，这个集合通常缩写为HTML5

转载请注明出处或者链接地址：https://www.qianduange.cn//article/22030.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

FastAPI 学习与使用

2025-03-01 12:03:03

OpenHarmony分布式软总线子系统

2025-03-01 12:03:01

（转）Java单例模式（1）

2025-03-01 12:03:58

Go语言学习笔记（五）

2025-03-01 12:03:58

Python基于机器学习的微博舆情情感分析系统，微博评论情感分析可视化系统（全新升级）

2025-03-01 12:03:57

微信小程序-二维码绘制

2025-03-01 12:03:57

一文详解基于NarrotoAI的短剧短视频自动解说、混剪AI平台搭建

2025-03-01 12:03:37

【deepseek】本地部署 RAG知识库挂载 对话测试

2025-03-01 12:03:36

C语言递归——青蛙跳台阶问题和汉诺塔问题

2025-03-01 12:03:36

学习Java：全面解析Java方法（Methods）

2025-03-01 12:03:36

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS 动画效果（5种） - 附完整示例

2025-02-28 12:02:481000
3

在Vue中实现与OpenAI对话的功能

2025-02-27 11:02:161000
4

jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000
5

CSS常用属性（文本属性）

2024-11-04 09:11:111000
6

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
7

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
8

vue使用datav echarts

2024-09-06 00:09:381000
9

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
10

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！