HTML5和CSS3新特性
Html新增属性
1.新增语义化标签

2.新增多媒体标签
<video src="文件地址" controls="controls"></video><video controls="controls" width="300"><source src="move.ogg" type="video/ogg" ><source src="move.mp4" type="video/mp4" >您的浏览器暂不支持 <video> 标签播放视频</ video 
<audio src="文件地址" controls="controls"></audio>< audio controls="controls" ><source src="happy.mp3" type="audio/mpeg" ><source src="happy.ogg" type="audio/ogg" >您的浏览器暂不支持 <audio> 标签。</ audio> 
3.新增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>
</head>
<body><form><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>


4. HTML5 新增的表单属性

CSS新增属性
1.属性选择器

2.结构伪类选择器



3.伪元素选择器(重点)
应用场景:伪元素清除浮动
1. 额外标签法也称为隔墙法,是 W3C 推荐的做法



4.CSS盒子模型box-sizing
5.其他特性(仅作了解)
2.CSS3 calc 函数:
6.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>.bar {width:150px;height: 15px;border: 1px solid red;border-radius: 7px;}.bar_in {width:50% ;height: 100%;background-color: red;transition: width 1s;}.bar:hover .bar_in{width: 100%;}</style>
</head>
<body><div class="bar"><div class="bar_in"></div></div>
</body>
</html>

相关文章:
HTML5和CSS3新特性
Html新增属性 1.新增语义化标签 <header>:头部标签 <nav>:导航标签 <article>:内容标签 <section>:定义文档某个区域 <aside>:侧边栏标签 <footer>:尾部标签 2.…...
Java基础-正则表达式
文章目录 1.基本介绍2.正则底层实现1.matcher.find()完成的任务2.matcher.group(0)分析1.源代码2.解释(不分组)3.解释(分组) 3.总结 3.正则表达式语法1.基本介绍2.元字符的转义符号1.基本介绍2.代码实例 3.字符匹配符1.基本介绍2.…...
构建Pytorch虚拟环境教程
构建PyTorch虚拟环境通常涉及使用诸如Anaconda或venv等工具来管理Python环境,以便在一个独立的空间中安装PyTorch和其他依赖项。以下是使用Anaconda创建PyTorch虚拟环境的步骤(适用于不同操作系统,包括Windows、Linux和MacOS)&…...
uniapp页面嵌套其他页面的实现
功能: 类似于一个drawer,当主页面加载的时候会一并加载url对应的组件,当点击后以drawer形式显示组件里面的内容,可动画。 <navigator url"/pages/my/components/personalMessage" slot"right"><view><di…...
XUbuntu22.04之安装Plantuml(二百二十三)
简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒…...
第四周刷题小结
第一天 P1068 [NOIP2009 普及组] 分数线划定 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 思路: 这个题感觉不难,主要是用到了结构体cmp的自定义排序,但是还是错了一次,就是没注意到题目给的条件。 #include<iostream&g…...
基于Java中的SSM框架实现考研指导平台系统项目【项目源码+论文说明】
基于Java中的SSM框架实现考研指导平台系统演示 摘要 应对考研的学生,为了更好的使校园考研有一个更好的环境好好的学习,建议一个好的校园网站,是非常有必要的。提供学生的学习提供一个交流的空间。帮助同学们在学习高数、学习设计、学习统计…...
项目2-用户登录
1.创建项目 2.引入前端代码并检查是否有误 3.定义接口 需求分析 对于后端开发⼈员⽽⾔, 不涉及前端⻚⾯的展⽰, 只需要提供两个功能 1. 登录⻚⾯: 通过账号和密码, 校验输⼊的账号密码是否正确, 并告知前端 2. ⾸⻚: 告知前端当前登录⽤⼾. 如果当前已有⽤⼾登录, 返回登录的账…...
网易web安全工程师进阶版课程
课程介绍 《Web安全工程师(进阶)》是由“ i春秋学院联合网易安全部”出品,资深讲师团队通过精炼的教学内容、丰富的实际场景及综合项目实战,帮助学员纵向提升技能,横向拓宽视野,牢靠掌握Web安全工程师核心…...
【Postman】工具使用介绍
一、postman工具介绍 1.什么是postman postman是谷歌开发的一款网页调试和接口测试工具,能够发送任何请求类型的http请求,支持GET/POST/PUT/DELETE等方法。postman简单易用,可以直接填写URL,header,body就可以发送一…...
【vue核心技术实战精讲】1.3 - 1.6 VUE 指令 (上)
前言 上节,我们学习了 Vue的起步 和 插值表达式 本节内容 Vue指令之v-text 和 v-htmlVue指令之v-if 和 v-showVue指令之v-bind绑定Vue指令之v-on事件处理 1、v-text 和 v-html {{}} 和v-text的作用是一样的 都是插入值,直接渲染 ≈ innerTextv-html既能插入值 又能插入标签…...
vscode使用Runner插件将.exe文件统一放到一个目录下
找到右下角管理,点击扩展。 找到Code Runner插件,打开扩展设置。 向下翻,找到Executor Map,点击在settings.json中编辑。 在c和c的配置命令栏中增加\\\output\\即可。(增加的目录不能自动创建,需要手动创建…...
[commonjs--resolver] Missing “./jsx-runtime.js“ specifier in “react“ package
修复vite构建时错误 vite打包,第三方包引用的react版本不一致问题修复(不是最优解) // vite.config.js import { defineConfig } from vite; import react from vitejs/plugin-react; import path from path;export default defineConfig({plugins: [react(), // 如果使用Rea…...
ETH Gas 之 Base Fee Priority Fee
前情回顾 ETH网络 之 Gas EIP-1559 EIP-1559 EIP-1559是以太坊改进提案(Ethereum Improvement Proposal),旨在改进以太坊的交易费用机制。该提案引入了一种新的交易费用模型,以提高交易费用的可预测性和网络的效率。我们本文各…...
【小白入门篇1】GPT到底是怎样练成?
由于具有代表性的OpenAI公司GPT模型并没有开源,所以本章节是参考一些开源和现有课程(李宏毅)讲解ChatGPT原理。本章没有涉及到很多数学运算,比较适合小白了解GPT到底是怎么练成。GPT的三个英文字母分别代表Generative(生成式)&…...
Django——forms组件
Django——forms组件 forms组件:通过后端在Django中定义forms类,可以在 html 中动态的生成一个表单;检验用户提交的数据。 在应用中创建一个名为 :forms 的py文件 # 导入 forms 组件 from django import forms# 自定义 forms …...
利用K8S Statefulset搭建Etcd集群 - PVC存储
概述 在测试过程中发现,直接使用本地存储,当节点机器损坏了,对应机器的etcd数据也丢失了,故而做了利用K8S PV,PVC以及NFS来存储数据的尝试,经过一番折腾,测试成功,博文记录…...
手撕算法-接雨水
描述 分析 i位置能积累的雨水量,等于其左右两边最大高度的最小值。为了能获取i位置左右两边的最大高度。使用动态规划。两个dp数组: leftMaxrightMax 其中 leftMax[i] 代表i位置左边的最大高度rightMax[i] 代表i位置右边的最大高度 初始状态&#x…...
探索AI大模型学习:理论基础、技术突破与未来挑战
在当今技术飞速发展的时代,人工智能(AI)大模型学习无疑是推动科技进步和创新的关键力量。AI大模型学习的核心在于通过训练大规模的数据集来提升模型的性能,使之能够更准确、更高效地完成各种任务,从而在多个领域中实现…...
Linux:点命令source
相关阅读 Linuxhttps://blog.csdn.net/weixin_45791458/category_12234591.html?spm1001.2014.3001.5482 source命令用于读取一个文件的内容并在当前Shell环境(包括交互式Shell或是非交互式Shell)执行里面的命令。它被称为点命令是因为命令名source也可…...
挑战杯推荐项目
“人工智能”创意赛 - 智能艺术创作助手:借助大模型技术,开发能根据用户输入的主题、风格等要求,生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用,帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎(Physics Engine) 物理引擎 是一种通过计算机模拟物理规律(如力学、碰撞、重力、流体动力学等)的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互,广泛应用于 游戏开发、动画制作、虚…...
【力扣数据库知识手册笔记】索引
索引 索引的优缺点 优点1. 通过创建唯一性索引,可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度(创建索引的主要原因)。3. 可以加速表和表之间的连接,实现数据的参考完整性。4. 可以在查询过程中,…...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
全球首个30米分辨率湿地数据集(2000—2022)
数据简介 今天我们分享的数据是全球30米分辨率湿地数据集,包含8种湿地亚类,该数据以0.5X0.5的瓦片存储,我们整理了所有属于中国的瓦片名称与其对应省份,方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...
涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战
“🤖手搓TuyaAI语音指令 😍秒变表情包大师,让萌系Otto机器人🔥玩出智能新花样!开整!” 🤖 Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制(TuyaAI…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O(n) 时间复杂度…...
SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理)
上一章用到了V2 的概念,其实 Fiori当中还有 V4,咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务),代理中间件(ui5-middleware-simpleproxy)-CSDN博客…...
云原生玩法三问:构建自定义开发环境
云原生玩法三问:构建自定义开发环境 引言 临时运维一个古董项目,无文档,无环境,无交接人,俗称三无。 运行设备的环境老,本地环境版本高,ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...
安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲
文章目录 前言第一部分:体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分:体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...
