当前位置：首页 > news >正文

HTML5和CSS3新特性

news 2025/11/13 15:31:00

Html新增属性

1.新增语义化标签

<header>：头部标签

<nav>：导航标签

<article>：内容标签

<section>：定义文档某个区域

<aside>：侧边栏标签

<footer>：尾部标签

2.新增多媒体标签

视频：<video>

语法

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

语法

<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. 多媒体标签总结

 音频标签和视频标签使用方式基本一致

 浏览器支持情况不同

 谷歌浏览器把音频和视频自动播放禁止了

 我们可以给视频标签添加 muted 属性来静音播放视频，音频不可以（可以通过JavaScript解决）

 视频标签是重点，我们经常设置自动播放，不使用 controls 控件，循环和设置大小属性

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.结构伪类选择器

小结



结构伪类选择器一般用于选择父级里面的第几个孩子



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



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



关于 nth-child（n）我们要知道 n 是从 0 开始计算的，要记住常用的公式



如果是无序列表，我们肯定用 nth-child 更多



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

3.伪元素选择器（重点）

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

应用场景：伪元素清除浮动

1. 额外标签法也称为隔墙法，是 W3C 推荐的做法

后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化。

4.CSS盒子模型box-sizing

可以分成两种情况：

1. box-sizing: content-box 盒子大小为 width + padding + border （以前默认的）

2. box-sizing: border-box 盒子大小为 width

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

5.其他特性（仅作了解）

1.CSS3滤镜filter:

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。

2.CSS3 calc 函数:

calc() 此CSS函数让你在声明CSS属性值时执行一些计算。

width: calc(100% - 80px);

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

6.CSS3 过渡（重点）

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或

JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过渡动画：是从一个状态渐渐的过渡到另外一个状态

我们现在经常和 :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>.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.…...

编程日记 2024/3/25 8:39:31

Java基础-正则表达式

文章目录 1.基本介绍2.正则底层实现1.matcher.find()完成的任务2.matcher.group(0)分析1.源代码2.解释（不分组）3.解释（分组） 3.总结 3.正则表达式语法1.基本介绍2.元字符的转义符号1.基本介绍2.代码实例 3.字符匹配符1.基本介绍2.…...

编程日记 2024/3/25 8:36:25

构建Pytorch虚拟环境教程

构建PyTorch虚拟环境通常涉及使用诸如Anaconda或venv等工具来管理Python环境，以便在一个独立的空间中安装PyTorch和其他依赖项。以下是使用Anaconda创建PyTorch虚拟环境的步骤（适用于不同操作系统，包括Windows、Linux和MacOS）&…...

编程日记 2024/3/25 8:34:22

uniapp页面嵌套其他页面的实现

功能: 类似于一个drawer，当主页面加载的时候会一并加载url对应的组件，当点击后以drawer形式显示组件里面的内容，可动画。 <navigator url"/pages/my/components/personalMessage" slot"right"><view><di…...

编程日记 2024/3/25 8:31:19

XUbuntu22.04之安装Plantuml(二百二十三)

简介： CSDN博客专家，专注Android/Linux系统，分享多mic语音方案、音视频、编解码等技术，与大家一起成长！ 优质专栏：Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏：多媒…...

编程日记 2024/3/25 8:29:17

第四周刷题小结

第一天 P1068 [NOIP2009 普及组] 分数线划定 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 思路： 这个题感觉不难，主要是用到了结构体cmp的自定义排序，但是还是错了一次，就是没注意到题目给的条件。 #include<iostream&g…...

编程日记 2024/3/25 8:27:15

基于Java中的SSM框架实现考研指导平台系统项目【项目源码+论文说明】

基于Java中的SSM框架实现考研指导平台系统演示摘要应对考研的学生，为了更好的使校园考研有一个更好的环境好好的学习，建议一个好的校园网站，是非常有必要的。提供学生的学习提供一个交流的空间。帮助同学们在学习高数、学习设计、学习统计…...

编程日记 2024/3/25 8:25:13

项目2-用户登录

1.创建项目 2.引入前端代码并检查是否有误 3.定义接口需求分析对于后端开发⼈员⽽⾔, 不涉及前端⻚⾯的展⽰, 只需要提供两个功能 1. 登录⻚⾯: 通过账号和密码, 校验输⼊的账号密码是否正确, 并告知前端 2. ⾸⻚: 告知前端当前登录⽤⼾. 如果当前已有⽤⼾登录, 返回登录的账…...

编程日记 2024/3/25 8:22:10

网易web安全工程师进阶版课程

课程介绍《Web安全工程师（进阶）》是由“ i春秋学院联合网易安全部”出品，资深讲师团队通过精炼的教学内容、丰富的实际场景及综合项目实战，帮助学员纵向提升技能，横向拓宽视野，牢靠掌握Web安全工程师核心…...

编程日记 2024/3/25 8:19:08

【Postman】工具使用介绍

一、postman工具介绍 1.什么是postman postman是谷歌开发的一款网页调试和接口测试工具，能够发送任何请求类型的http请求，支持GET/POST/PUT/DELETE等方法。postman简单易用，可以直接填写URL，header，body就可以发送一…...

编程日记 2024/3/25 8:15:03

【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既能插入值又能插入标签…...

编程日记 2024/3/25 8:14:02

vscode使用Runner插件将.exe文件统一放到一个目录下

找到右下角管理，点击扩展。找到Code Runner插件，打开扩展设置。向下翻，找到Executor Map，点击在settings.json中编辑。在c和c的配置命令栏中增加\\\output\\即可。（增加的目录不能自动创建，需要手动创建…...

编程日记 2024/3/25 8:09:56

[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…...

编程日记 2024/3/25 8:08:55

ETH Gas 之 Base Fee Priority Fee

前情回顾 ETH网络之 Gas EIP-1559 EIP-1559 EIP-1559是以太坊改进提案（Ethereum Improvement Proposal），旨在改进以太坊的交易费用机制。该提案引入了一种新的交易费用模型，以提高交易费用的可预测性和网络的效率。我们本文各…...

编程日记 2024/3/25 8:06:53

【小白入门篇1】GPT到底是怎样练成？

由于具有代表性的OpenAI公司GPT模型并没有开源，所以本章节是参考一些开源和现有课程（李宏毅）讲解ChatGPT原理。本章没有涉及到很多数学运算，比较适合小白了解GPT到底是怎么练成。GPT的三个英文字母分别代表Generative(生成式)&…...

编程日记 2024/3/25 8:04:52

Django——forms组件

Django——forms组件 forms组件：通过后端在Django中定义forms类，可以在 html 中动态的生成一个表单；检验用户提交的数据。在应用中创建一个名为 ：forms 的py文件 # 导入 forms 组件 from django import forms# 自定义 forms …...

编程日记 2024/3/25 8:02:50

利用K8S Statefulset搭建Etcd集群 - PVC存储

概述在测试过程中发现，直接使用本地存储，当节点机器损坏了，对应机器的etcd数据也丢失了，故而做了利用K8S PV，PVC以及NFS来存储数据的尝试，经过一番折腾，测试成功，博文记录&#xf…...

编程日记 2024/3/25 8:00:48

手撕算法-接雨水

描述分析 i位置能积累的雨水量，等于其左右两边最大高度的最小值。为了能获取i位置左右两边的最大高度。使用动态规划。两个dp数组： leftMaxrightMax 其中 leftMax[i] 代表i位置左边的最大高度rightMax[i] 代表i位置右边的最大高度初始状态&#x…...

编程日记 2024/3/25 7:55:43

探索AI大模型学习：理论基础、技术突破与未来挑战

在当今技术飞速发展的时代，人工智能（AI）大模型学习无疑是推动科技进步和创新的关键力量。AI大模型学习的核心在于通过训练大规模的数据集来提升模型的性能，使之能够更准确、更高效地完成各种任务，从而在多个领域中实现…...

编程日记 2024/3/25 7:54:42

Linux：点命令source

相关阅读 Linuxhttps://blog.csdn.net/weixin_45791458/category_12234591.html?spm1001.2014.3001.5482 source命令用于读取一个文件的内容并在当前Shell环境（包括交互式Shell或是非交互式Shell）执行里面的命令。它被称为点命令是因为命令名source也可…...

编程日记 2024/3/25 7:50:32

【位运算】消失的两个数字（hard）

消失的两个数字（hard） 题⽬描述：解法（位运算）：Java 算法代码：更简便代码题⽬链接：⾯试题 17.19. 消失的两个数字题⽬描述： 给定⼀个数组，包含从 1 到 N 所有…...

编程新知 2025/10/17 12:01:41

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验，以及大语言模型的分析能力，我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际，我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测，聊作存档。等到明…...

编程新知 2025/11/8 4:39:49

基础测试工具使用经验

背景 vtune，perf, nsight system等基础测试工具，都是用过的，但是没有记录，都逐渐忘了。所以写这篇博客总结记录一下，只要以后发现新的用法，就记得来编辑补充一下 perf 比较基础的用法： 先改这…...

编程新知 2025/9/18 15:40:29

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解（7大核心步骤实战技巧） 一、爬虫完整工作流程以下是爬虫开发的完整流程，我将结合具体技术点和实战经验展开说明： 1. 目标分析与前期准备网站技术分析： 使用浏览器开发者工具（F12&…...

编程新知 2025/10/19 5:48:51

【单片机期末】单片机系统设计

主要内容：系统状态机，系统时基，系统需求分析，系统构建，系统状态流图一、题目要求二、绘制系统状态流图题目：根据上述描述绘制系统状态流图，注明状态转移条件及方向。三、利用定时器产生时…...

编程新知 2025/11/8 7:31:00

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列？2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

编程新知 2025/11/12 11:25:56

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ；并安装。基础操作不再赘述。打开 macOS 终端，开始 docker 安装mysql之旅第一步 docker search mysql 》〉docker search mysql NAME DE…...

编程新知 2025/11/12 11:31:15