HTML5和CSS3新增的一些属性

1、HTML5新增特性

这些新特性都有兼容性问题，基本是IE9+以上版本浏览器才支持

1）新增语义化标签

2）新增多媒体标签

音频：<audio>

视频：<video>

（1）视频<video>

        ---尽量使用mp4格式

<video src="文件地址" controls="controls"></video>

常见属性：

        禁用autoplay解决方法：

<video src="./images/what.MP4" autoplay="autoplay" muted="muted"></video>
(2)音频：<audio>

        语法：

<audio src="文件地址" controls="controls"></audio>

        audio元素支持三种格式：

3）新增input类型

    <style>/* 伪元素 */input::placeholder {color: rgb(243, 40, 8);}</style>
<body><form action=""><input type="search" name="" id="" required="required" placeholder="剑来"><input type="submit" value="提交"></form>
</body>

2、CSS新增特性

1）新增选择器
（1）属性选择器

注意：类选择器、属性选择器、伪类选择器，权重为10。

    <style>input[value] {color: red;}</style>
<body><input type="search" name="" id="" required="required" placeholder="剑来"><input type="submit" value="提交"></body>
（2）结构伪类选择器

    <style>ul li:first-child {background-color: skyblue;}ul li:last-child {background-color: pink;}/*nth-child(k):选择ul里的第k个li*/ul li:nth-child(5) {background-color: red;}</style>
<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>

        nth-child也是可以选择多个的。

<style>ul li:nth-child(odd) {background-color: skyblue;}</style>

        n也可以是公式，同时，n从0开始计算，注意nth-child(0)这里面必须是n，不能是其他的字母。

    <style>/* 选择所有的li */ul li:nth-child(n) {background-color: skyblue;}ul li:nth-child(2n) {background-color: skyblue;}</style>
nth-child和nth-of-type的区别

        nth-child会把所有的孩子排序号，执行时先看nth-child（1）然后再往前看找标签，下面这种情况就是选不出来的。

    <style>div p:nth-child(1) {background-color: skyblue;}</style>
<body><div><div>0</div><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p></div></body>

        nth-of-type则是把指定的孩子排列序号，执行时先看标签，然后再回去看nth-of-type是第几个孩子，下面这样就可以选出来。

    <style>div p:nth-of-type(1) {background-color: skyblue;}</style>
（3）伪元素选择器（重点）

        伪元素选择器可以帮助我们利用CSS创建新的标签元素，而不需要html标签，从而简化html结构。

        注意：

<style>div {width: 160px;height: 80px;background-color: skyblue;}div::before {content: '伪';}div::after {content: '选择器';}</style>
<body><div>元素</div>
</body>
（4）应用
a.字体图标
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_5020741_sn609k3h7hh.css"><style>div {position: relative;width: 200px;height: 35px;border: 1px solid red;}div::after {position: absolute;top: 10px;right: 10px;content: '\e65e';font-family: 'iconfont';color: red;font-size: 18px;}</style>
<body><div></div>
</body>

b. 应用：土豆案例
    <style>.tudou {position: relative;width: 444px;height: 320px;background-color: skyblue;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 center;}/* 当鼠标经过图片，mask盒子显示 */.tudou:hover::before {display: block;}</style>
<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>
</body>
c.伪元素清除浮动

display:table;转换为块级元素并且一行显示。

2）盒子模型

如果盒子模型改为box-sizing：border-box;那么padding和border就不会撑大盒子了（前提：padding和border不会超过width宽度）

div {width: 200px;height: 200px;background-color: pink;padding: 20px;/* 此时padding已经撑大了盒子，但是如果我来个 */box-sizing: border-box;/* 就欧了 */}

因此，CSS开头可以写：

* {margin: 0;padding: 0;box-sizing: border-box;}
3）其他特性（了解）
（1）图片模糊

        CSS3滤镜filter：

（2）计算盒子宽度

        ---calc函数

width:calc(100%-80px);

括号里面可以使用+ - * / 来进行计算。

4）CSS3过渡（重点）

        ---类似ppt中的平滑效果

原则：谁动给谁加，也就是谁要过渡，就把transition放在谁里面

如果想同时变换多个属性，可以直接这么写：

transition: width 1s, height 1s, background-color 1s;

我们最常用的是这么写，直接变化所有：

transition: all 1s;

        进度条布局示例：

<style>.bar {width: 150px;height: 15px;border: 1px solid red;border-radius: 7px;}.bar_in {width: 50%;height: 100%;background-color: red;/* 谁做过渡给谁加 */transition: all .7s;}/* 鼠标放在bar盒子上，bar_in盒子变宽 */.bar:hover .bar_in {width: 100%;}</style>
<body><div class="bar"><div class="bar_in"></div></div>
</body>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/diannao/99178.shtml
繁体地址，请注明出处：http://hk.pswp.cn/diannao/99178.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Redis的RedLock

Redis的RedLock

RedLock算法深度解析RedLock是Redis作者针对分布式环境设计的多节点锁算法&#xff0c;核心目标是解决单点Redis在分布式锁场景中的可靠性缺陷。传统方案的局限性单节点Redis锁的问题单点故障&#xff1a;单个Redis实例宕机导致所有锁服务不可用可靠性不足&#xff1a;无法保证…
阅读更多...
SpringMVC @RequestMapping的使用演示和细节 详解

SpringMVC @RequestMapping的使用演示和细节 详解

目录 一、RequestMapping是什么&#xff1f; 二、RequestMapping 的使用演示 1.RequestMapping在方法上的使用&#xff1a; 2.RequestMapping同时在类和方法上使用&#xff1a; 3.RequestMapping指定请求参数&#xff1a; 4.RequestMapping使用Ant风格URL&#xff1a; 5.Requ…
阅读更多...
flutter项目 -- 换logo、名称 、签名、打包

flutter项目 -- 换logo、名称 、签名、打包

1、换logo, 透明底&#xff0c;下面5个尺寸&#xff0c;需要UI设计2、换名没配置型的改名方式如下 打开app/src/main/AndroidManifest.xml3、签名 运行 flutter doctor -vD:\project\Apk\keystore 自己建立的keystore文件夹&#xff0c; 注意命令后是 megoai-release-key(自…
阅读更多...
【贪心算法】day9

【贪心算法】day9

&#x1f4dd;前言说明&#xff1a; 本专栏主要记录本人的贪心算法学习以及LeetCode刷题记录&#xff0c;按专题划分每题主要记录&#xff1a;&#xff08;1&#xff09;本人解法 本人屎山代码&#xff1b;&#xff08;2&#xff09;优质解法 优质代码&#xff1b;&#xff…
阅读更多...
linux C 语言开发 (八) 进程基础

linux C 语言开发 (八) 进程基础

文章的目的为了记录使用C语言进行linux 开发学习的经历。开发流程和要点有些记忆模糊&#xff0c;赶紧记录&#xff0c;防止忘记。 相关链接&#xff1a; linux C 语言开发 (一) Window下用gcc编译和gdb调试 linux C 语言开发 (二) VsCode远程开发 linux linux C 语言开发 (…
阅读更多...
从零学算法1094

从零学算法1094

1094.拼车 车上最初有 capacity 个空座位。车 只能 向一个方向行驶&#xff08;也就是说&#xff0c;不允许掉头或改变方向&#xff09; 给定整数 capacity 和一个数组 trips , trips[i] [numPassengersi, fromi, toi] 表示第 i 次旅行有 numPassengersi 乘客&#xff0c;接他…
阅读更多...
B2B企业营销型AI Agent服务商推荐：谁更专业？如何选型？

B2B企业营销型AI Agent服务商推荐：谁更专业？如何选型？

一、引言&#xff1a;为什么B2B企业需要营销型AI Agent&#xff1f;在当前竞争激烈的B2B市场中&#xff0c;企业普遍面临几大挑战&#xff1a;线索获取难&#xff1a;获客成本持续上升&#xff0c;高质量线索难以筛选。销售周期长&#xff1a;从初步接触到签单&#xff0c;往往…
阅读更多...
算法-双指针5.6

算法-双指针5.6

目录 &#x1f33f;力扣611-有效三角形得个数 &#x1f9ca;题目链接&#xff1a;https://leetcode.cn/problems/valid-triangle-number/description/ &#x1f9ca;题目描述&#xff1a;​编辑 &#x1f9ca;解题思路&#xff1a; &#x1f9ca;解题代码&#xff1a; &a…
阅读更多...
超参数自动化调优指南：Optuna vs. Ray Tune 对比评测

超参数自动化调优指南：Optuna vs. Ray Tune 对比评测

点击 “AladdinEdu&#xff0c;同学们用得起的【H卡】算力平台”&#xff0c;注册即送-H卡级别算力&#xff0c;80G大显存&#xff0c;按量计费&#xff0c;灵活弹性&#xff0c;顶级配置&#xff0c;学生更享专属优惠。 引言&#xff1a;从"手动炼丹"到"自动化…
阅读更多...
软考-局域网基础考点总结

软考-局域网基础考点总结

这篇文章用于整理软考网络相关的知识点&#xff0c;囊括了详细的局域网基础的考点&#xff0c;能够让你认真备考&#xff0c;基础知识一网打尽&#xff0c;让后续的学习更加通畅~ 第一部分&#xff1a;OSI七层参考模型 OSI(Open System Interconnection)模型是一个理论框架&am…
阅读更多...
Node.js核心模块介绍

Node.js核心模块介绍

1. fs 模块fs&#xff08;File System&#xff09;模块允许对文件系统进行操作&#xff0c;提供了文件读写、文件夹操作等功能。fs 支持同步和异步两种 API。1.1. 常用方法读取文件&#xff1a;异步: fs.readFile()同步: fs.readFileSync()写入文件&#xff1a;异步: fs.writeF…
阅读更多...
缓存三大劫攻防战：穿透、击穿、雪崩的Java实战防御体系（二）

缓存三大劫攻防战：穿透、击穿、雪崩的Java实战防御体系（二）

第二部分&#xff1a;缓存击穿——热点key过期引发的“DB瞬间高压” 缓存击穿的本质是“某个热点key&#xff08;高并发访问&#xff09;突然过期”&#xff0c;导致大量请求在同一时间穿透缓存&#xff0c;集中冲击DB&#xff0c;形成“瞬间高压”。 案例3&#xff1a;电商秒杀…
阅读更多...
Linux相关概念和易错知识点（45）（网络层、网段划分）

Linux相关概念和易错知识点（45）（网络层、网段划分）

目录1.网络层&#xff08;1&#xff09;IP协议头格式&#xff08;2&#xff09;工作流程2.网段划分&#xff08;1&#xff09;五类地址&#xff08;2&#xff09;回环地址&#xff08;3&#xff09;网段的特殊地址&#xff08;4&#xff09;网络建设我们前面暂时跳过了网络层&a…
阅读更多...
transition(过渡)和animation(动画)——CSS

transition(过渡)和animation(动画)——CSS

1.transition过渡可以为一个元素在不同状态之间进行切换时添加过渡效果&#xff0c;实现不同状态间的变化效果。通过触发事件(鼠标悬停、点击等)&#xff0c;在两个状态间切换。1.1 使用语法&#xff1a;transition: [property] [duration] [timing-function] [delay];property…
阅读更多...
Spring Cloud项目国产化改造MySQL迁移达梦数据库，SQL变更

Spring Cloud项目国产化改造MySQL迁移达梦数据库，SQL变更

达梦数据库下载地址&#xff1a;https://eco.dameng.com/download 达梦数据库安装文档&#xff1a;https://eco.dameng.com/document/dm/zh-cn/start/dm-install-linux.html 数据迁移SQLark工具使用 首先&#xff0c;本次MySQL迁移使用了SQLark工具 1.下载安装SQLark https…
阅读更多...
Cesium---1.133版本不修改源码支持arcgis MapServer 4490切片

Cesium---1.133版本不修改源码支持arcgis MapServer 4490切片

参照了这篇博文&#xff1a;https://blog.csdn.net/qq_19689967/article/details/121449888https://blog.csdn.net/qq_19689967/article/details/121449888 利用新版本的源码进行了修改&#xff0c;可以实现服务加载&#xff1a; Event.js import { Check,defined} from &qu…
阅读更多...
迭代器和生成器的区别与联系

迭代器和生成器的区别与联系

目录 1.可迭代对象 (Iterable) 2.迭代器 (Iterator) 3.生成器 (Generator) 3.1生成器函数 vs 生成器表达式 4.三者之间的联系与区别 5.关系图&#xff08;帮助你一眼看懂&#xff09; 6.核心结论&#xff08;记住这三句话&#xff09; 1.可迭代对象 (Iterable) 定义&…
阅读更多...
Dropout：深度学习中的随机丢弃正则化技术

Dropout：深度学习中的随机丢弃正则化技术

本文由「大千AI助手」原创发布&#xff0c;专注用真话讲AI&#xff0c;回归技术本质。拒绝神话或妖魔化。搜索「大千AI助手」关注我&#xff0c;一起撕掉过度包装&#xff0c;学习真实的AI技术&#xff01; 1 什么是Dropout&#xff1f; Dropout是深度学习中最广泛使用的正则化…
阅读更多...
vue2迁移到vite[保姆级教程]

vue2迁移到vite[保姆级教程]

vue2迁移到vite[保姆级教程]使用vue CLI创建项目进行vite迁移详细步骤1. 安装 Vite 和 Vue 2 支持插件2. 创建 vite.config.js3. 修改 package.json 脚本4. 创建 index.html5. 确保 main.js 正确引入6. 处理静态资源7. 构建优化&#xff08;可选&#xff09;8. 启动项目常见问题…
阅读更多...
浏览器输入URL回车

浏览器输入URL回车

一&#xff0c;URL解析浏览器会对输入的 URL&#xff08;统一资源定位符&#xff09; 进行拆解&#xff0c;搞清楚 “目标是谁、要获取什么资源https://www.baidu.com/s?wdCDN 拆解后&#xff1a;协议&#xff08;Scheme&#xff09;&#xff1a;https&#xff08;加密通信协议…
阅读更多...
最新文章

Copyright @ 2022~2023