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

HTML5和CSS3新特性

news 2026/2/8 19:14:45

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

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

概述在 Swift 开发语言中，各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。不过，在涉及到多个子类派生于基类进行多态模拟的场景下，…...

编程新知 2026/1/23 4:56:05

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...

编程新知 2026/1/4 2:33:39

linux 错误码总结

1，错误码的概念与作用在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备工具安装： 下载安装DevEco Studio 4.0（支持HarmonyOS 5）配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化： ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

编程新知 2026/2/1 4:17:33

c#开发AI模型对话

AI模型前面已经介绍了一般AI模型本地部署，直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。微软提供了ML.NET来开发和使用AI模型，但是目前国内可能使用不多，至少实践例子很少看见。开发训练模型就不介绍了&am…...

编程新知 2026/2/1 8:59:45

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。之前我们介绍了ArcGIS的横向图例制作：ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等（ArcGIS出图图例8大技巧），那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

编程新知 2026/2/4 17:18:03

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec？ IPsec VPN 5.1 IPsec传输模式（Transport Mode） 5.2 IPsec隧道模式（Tunne…...

编程新知 2025/11/3 0:44:41