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

HTML5和CSS3新特性

news 2026/4/6 6:41:11

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>&#xff1a;头部标签 <nav>&#xff1a;导航标签 <article>&#xff1a;内容标签 <section>&#xff1a;定义文档某个区域 <aside>&#xff1a;侧边栏标签 <footer>&#xff1a;尾部标签 2.…...

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

Java基础-正则表达式

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

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

构建Pytorch虚拟环境教程

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

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

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

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

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

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

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

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

第四周刷题小结

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

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

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

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

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

项目2-用户登录

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

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

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

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

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

【Postman】工具使用介绍

一、postman工具介绍 1.什么是postman postman是谷歌开发的一款网页调试和接口测试工具&#xff0c;能够发送任何请求类型的http请求&#xff0c;支持GET/POST/PUT/DELETE等方法。postman简单易用&#xff0c;可以直接填写URL&#xff0c;header&#xff0c;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文件统一放到一个目录下

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

编程日记 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是以太坊改进提案&#xff08;Ethereum Improvement Proposal&#xff09;&#xff0c;旨在改进以太坊的交易费用机制。该提案引入了一种新的交易费用模型&#xff0c;以提高交易费用的可预测性和网络的效率。我们本文各…...

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

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

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

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

Django——forms组件

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

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

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

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

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

手撕算法-接雨水

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

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

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

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

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

Linux：点命令source

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

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

SEO宣传推广公司如何做好移动端优化

SEO宣传推广公司如何做好移动端优化 在当前数字化营销的浪潮中&#xff0c;移动端优化已经成为了每一个SEO宣传推广公司必须要掌握的技能之一。随着越来越多的用户通过手机浏览网站和进行在线购物&#xff0c;如何在移动端上获得更高的流量和转化率成为了企业竞争的关键。SEO宣…...

编程新知 2026/4/6 6:08:41

从经典控制器到前沿控制的发展

目录 前言 一、PID控制 1.数字PID 2.PID参数的优化 1.微分项的问题 2.积分项的问题 3.PID参数整定法 3.PID参数对系统性能指标的影响 二、模糊控制 1.模糊控制的五大核心步骤 1.模糊化 2.建立模糊规控制规则 3.模糊推理与解模糊 2.模糊PID 1.直接型模糊PID 2.增…...

编程新知 2026/4/6 5:50:23

DIY迷你平衡摩托车：从PID控制到机械设计全解析

1. 迷你平衡摩托车项目概述作为一名嵌入式开发爱好者&#xff0c;我最近完成了一个迷你平衡摩托车的DIY项目。这个项目的灵感来源于大学生智能车竞赛中的平衡单车组别&#xff0c;但相比那些专业竞赛车模&#xff0c;这个迷你版本更适合个人爱好者动手实现。整个项目从原理分析…...

编程新知 2026/4/6 5:04:05

【机器人】ROS2配置solidworks模型转换的URDF文件

&#x1f647;‍♀ 安装solidworks_urdf插件 地址 在添加过点和坐标系后&#xff0c;点击工具->tools(在最下面) 如何转为URDF请看这个视频点击 ☕ 为ROS2配置 安装相关依赖 sudo apt install ros-humble-joint-state-publisher-gui sudo apt install ros-humble-xacro…...

编程新知 2026/4/6 4:28:43

HarmonyOS ArkTS开发实战：用Axios封装一个带拦截器的网络请求工具类

HarmonyOS ArkTS实战&#xff1a;构建企业级Axios网络请求工具库 在HarmonyOS应用开发中&#xff0c;网络请求作为数据交互的核心通道&#xff0c;其稳定性和可维护性直接影响应用质量。本文将带你从零构建一个支持Token自动刷新、错误统一处理的Axios企业级封装库&#xff0c;…...

编程新知 2026/4/6 4:18:40

深入解析 OpenSTLinux 6.6 Yocto SDK 环境配置与 BSP 源码部署 - STM32MP2 实战（基于STM32CubeMX）

1. OpenSTLinux 6.6 Yocto SDK环境配置全攻略 刚拿到STM32MP2开发板时&#xff0c;最让人头疼的就是搭建开发环境。我花了整整三天时间才把Yocto SDK环境配置明白&#xff0c;今天就把这些实战经验分享给大家&#xff0c;让你少走弯路。 首先需要下载两个关键文件&#xff1a;S…...

编程新知 2026/4/6 4:01:51

SEO 对于SaaS产品销售有什么影响

SEO对于SaaS产品销售的重要性 在当前的数字化经济时代&#xff0c;软件即服务&#xff08;SaaS&#xff09;产品正日益成为各行各业的首选工具。仅拥有优质的产品还远远不够&#xff0c;如何让潜在客户能够找到并选择你的产品至关重要。这时&#xff0c;搜索引擎优化&#xff…...

编程新知 2026/4/6 4:01:51

resume-cli实际案例分享：成功求职者的简历配置终极指南

resume-cli实际案例分享&#xff1a;成功求职者的简历配置终极指南 【免费下载链接】resume-cli CLI tool to easily setup a new resume &#x1f4d1; 项目地址: https://gitcode.com/gh_mirrors/re/resume-cli resume-cli是一款基于JSON Resume标准的命令行工具&…...

编程新知 2026/4/6 3:30:30

AI绘画联动：OpenClaw调用Qwen3-32B生成Stable Diffusion提示词

AI绘画联动&#xff1a;OpenClaw调用Qwen3-32B生成Stable Diffusion提示词 1. 当AI助手遇上AI绘画&#xff1a;我的自动化创作实验 去年第一次接触Stable Diffusion时&#xff0c;我就被它的创作潜力震撼了。但很快发现一个问题&#xff1a;要得到理想的画面&#xff0c;往往…...

编程新知 2026/4/6 2:50:31

OpenClaw效率对比：Qwen2.5-VL-7B与传统OCR工具在文档处理中的表现

OpenClaw效率对比&#xff1a;Qwen2.5-VL-7B与传统OCR工具在文档处理中的表现 1. 测试背景与动机 最近在整理公司历史项目文档时&#xff0c;遇到了一个棘手的问题&#xff1a;大量扫描版PDF和图片格式的技术文档需要数字化处理。这些文档包含代码片段、手写注释和复杂表格&a…...

编程新知 2026/4/6 2:14:18