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

HTML5和CSS3新增特性

news 2025/7/4 14:50:27

HTML5的新特性

HTML5新增的语义化标签

HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。

这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这 些新特性。

好图当赏

一千布局我们是用div来做的，但是div对搜索引擎来说是没有语义的

<div class=“header”> </div> 
<div class=“nav”> </div> 
<div class=“content”> </div> 
<div class=“footer”> </div>

HTML5新增了语义化标签：

 

tips：

这种语义化标准主要是针对搜索引擎的

这些新标签页面中可以使用多次

在IE9中，需要把这些元素转换为块级元素

HTML5新增的多媒体标签

 新增的多媒体标签主要包含：

音频：<audio>

视频：<video>

使用他们可以更方便的在页面中嵌入音频和视频，而不再使用flash和其他浏览器插件 

HTML5 在不使用插件的情况下，也可以原生的支持视频格式文件的播放，支持的格式是有限的

当前<video>元素支持三种视频格式，尽量使用MP4格式

<video src="文件地址" controls="controls"></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>

音频的常见属性：

 

谷歌浏览器吧音频和视频的自动播放给禁止了 

多媒体标签总结：

HTML5新增的input类型

 语义化会更明显

我们需要重点记住number tel search这三个

有了这个提交表单如果格式不一样会报错

HTML5新增的表单属性

 我们可以通过以下的方式修改placeholder里面的字体颜色：

input::placeholder { color: pink; }

CSS3的新特性

CSS3现状

新增的CSS3特性有兼容性问题，ie9+才支持

移动端支持优于PC端

不断的改进中

应用相对广泛

CSS新增选择器

CSS新增的选择器可以更加便捷更加自由的选择目标元素

属性选择器

属性选择器可以根据元素特定的属性来选择元素，这样就可以不用借助类或者id选择器

 看到了吗孩子这就是属性选择器

<!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>input[value]{color: pink;}</style>
</head>
<body><input type="text" value="请输入"><input type="text">
</body>
</html>

 

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

结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素，经常用于根据父级选择器里面的子元素

这个nth-child可以选择某个父元素的一个或者多个特定的子元素

n可以是数字，关键字和公式

n如果是数字，就是选择第n个子元素，里面的数字从1开始

n 可以是关键字：even 偶数，odd 奇数

n 可以是公式：常见的公式如下 ( 如果n是公式，则从0开始计算，但是第 0 个元素或者超出了元素的个数会被忽略 )

 

这俩的区别：

1. nth-child 对父元素里面所有孩子排序选择（序号是固定的）

先找到第n个孩子，然后看看是否和E匹配

2. nth-of-type 对父元素里面指定子元素进行排序选择

先去匹配E ，然后再根据E找第n个孩子

小结

 

伪元素选择器

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

tips：

1.before 和 after 创建一个元素，但是属于行内元素

2.新创建的这个元素在文档树中是找不到的，所以我们称为伪元素

3.语法： element::before {}

4.before 和 after 必须有 content 属性

5.before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素

6.伪元素选择器和标签选择器一样，权重为 1

伪元素选择器有使用的场景：伪元素字体图标

p::before { position: absolute; right: 20px; top: 10px; content: '\e91e'; font-size: 20px; }

 这就是，，，伪元素选择器

<!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>p{position: relative;width: 300px;height: 100px;background-color: pink;}p::before {position: absolute;right: 20px;top: 10px;background-color: aqua;content: '>';font-size: 20px;}</style>
</head>
<body><p>你好</p>
</body>
</html>

content是必须要写的，否则显示不出来

伪元素选择器使用场景2：仿土豆效果：

<!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>.tudou{position: relative;width: 500px;height: 400px;}.tudou img{width: 100%;height: 100%;}.tudou::before{display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;content: '';background-color: rgb(0,0,0,0.4);}.tudou:hover::before{display: block;}</style>
</head>
<body><div class="tudou"><img src="./1714915128_new_IMG-20240503-WA0094.jpg" alt=""></div>
</body>
</html>

 

就是这个

然后伪元素还有一个使用场景是：伪元素清除浮动

伪元素清除浮动

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

2.父级添加overflow属性

3.父级添加after伪元素

4.父级添加双伪元素

这个要求新的空标签必须是块级元素

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

CSS3盒子模型

CSS3中可以通过box-sizing来指定盒模型，有两个值：content-box和border-box

这样计算盒子大小的方式就发生了改变

可以分成两种情况：

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

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

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

CSS3还有其他特性，了解即可，可以让图片变模糊，计算盒子宽度width：calc函数

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

filter: 函数(); 例如： filter: blur(5px); blur模糊处理 数值越大越模糊

calc（）此CSS函数让我们声明CSS属性值时执行一些计算

 width: calc(100% - 80px);

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

CSS过渡

这是一个重点的特性，过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。 过渡动画： 是从一个状态 渐渐的过渡到另外一个状态 可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本） 但是不会影响 页面布局。

现在经常和:hover一起搭配使用

transition: 要过渡的属性 花费时间 运动曲线 何时开始;

1.属性 ： 想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都 变化过渡， 写一个all 就可以。

2. 花费时间： 单位是 秒（必须写单位） 比如 0.5s

3. 运动曲线： 默认是 ease （可以省略）

4.何时开始 ：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）

过渡就是谁需要就给谁加

<!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>div{width: 200px;height: 100px;background-color: pink;transition: width .5s;}div:hover{width: 400px;}</style>
</head>
<body><div></div>
</body>
</html>

如果想要写多个属性，就要利用,进行分割

<!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>div{width: 200px;height: 100px;background-color: pink;transition: width .5s,height .5s;}div:hover{width: 400px;height: 400px;}</style>
</head>
<body><div></div>
</body>
</html>

在Linux阶段我们自己手工搓了一个进度条，很原始（我们后端原始人是这样的）

前端可以实现更优雅的进度条（至少看起来是这样，代码难度肯定是后端高）

<!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: 250px;height: 10px;border: 1px solid red;border-radius: 7px;padding: 1px;}.bar_in{width: 50%;height: 100%;background-color: red;transition: width .8s;}.bar:hover .bar_in{width: 100%;}</style>
</head>
<body><div class="bar"><div class="bar_in"></div></div>
</body>
</html>

 针对H5和C3有他们自己的相对论

HTML5结构标签本身：

CSS3相关样式：

 

而广义的HTML5是HTML5+CSS3+JS

这是HTML5 MDN的介绍：

https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML

课后作业

制作这样的模块

有点不完全一样但是也还行

<!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>.box{height: 300px;width: 200px;background-color: white;}.box1 img{width: 100%;height: 180px;}span{font-size: 14px;color: #707070;}.old{font-size: 22px;color: rgb(226, 49, 49);font-weight: 700;}.new{font-weight: 700;text-decoration: line-through;}.box2{width: 150px;height: 30px;}.box2-in{width: 100px;height: 8px;border: 1px solid red;border-radius: 7px;padding: 1px;}.box2-in-in{width: 50%;height: 100%;background-color: red;transition: width .8s;}.box2-in:hover .box2-in-in{width: 100%;}.box3{width: 200px;height: 50px;color: white;font-weight: 700;background-color: rgb(179, 25, 27);text-align: center;line-height: 50px;}</style>
</head>
<body><div class="box"><div class="box1"><img src="./1714915128_new_IMG-20240503-WA0094.jpg" alt=""></div><span>安分守己，苹果石榴，(128G) 银色移动联通电信5G手机</span><span class="old">$6088</span><span class="new">$6988</span><div class="box2"><div class="box2-in"><div class="box2-in-in"></div></div></div><div class="box3">立即抢购</div></div>
</body>
</html>

这就是前端

相关文章：

HTML5和CSS3新增特性

HTML5的新特性 HTML5新增的语义化标签 HTML5 的新增特性主要是针对于以前的不足&#xff0c;增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题&#xff0c;基本是 IE9 以上版本的浏览器才支持&#xff0c;如果不考虑兼容性问题&#xff0c;可以大量…...

编程日记 2024/11/27 21:19:53

linux运行vue编译后的项目

如果你的 Vue 项目使用了 history 模式&#xff08;而非默认的 hash 模式&#xff09;&#xff0c;在纯静态服务器中会出现类似的问题。因为 Vue Router 的 history 模式要求所有未匹配的路径都重定向到 index.html&#xff0c;以便 Vue 前端处理路径。 首先在本地执行npm run…...

编程日记 2024/11/27 21:16:49

论文阅读：A Software Platform for Manipulating theCamera Imaging Pipeline

论文代码开源链接&#xff1a; A Software Platform for Manipulating the Camera Imaging Pipelinehttps://karaimer.github.io/camera-pipeline/摘要&#xff1a;论文提出了一个Pipline软件平台&#xff0c;可以方便地访问相机成像Pipline的每个阶段。该软件允许修改单个模块…...

编程日记 2024/11/27 21:14:47

【MySQL篇】持久化和非持久化统计信息的深度剖析（第一篇，总共六篇）

&#x1f4ab;《博主介绍》&#xff1a;✨又是一天没白过&#xff0c;我是奈斯&#xff0c;DBA一名✨ &#x1f4ab;《擅长领域》&#xff1a;✌️擅长Oracle、MySQL、SQLserver、阿里云AnalyticDB for MySQL(分布式数据仓库)、Linux&#xff0c;也在扩展大数据方向的知识面✌️…...

编程日记 2024/11/27 21:13:46

Ubuntu下安装Qt

1.如图1所示&#xff0c;在Index of /archive上下载安装包&#xff1b; 图1 2.将图1安装包下载好之后&#xff0c;通过共享文件夹的方式拷贝到ubutntu&#xff0c;如图2所示&#xff1b; 图2 3.如图3所示&#xff0c;执行chmod x qt-creator-opensource-linux-x86_64-10.0.2.…...

编程日记 2024/11/27 21:11:43

丹摩征文活动 | AI创新之路，DAMODEL助你一臂之力GPU

目录 前言—— DAMODEL&#xff08;丹摩智算&#xff09; 算力服务 直观的感受算力提供商的强大​ 平台功能介绍​ 镜像选择 云磁盘创建 总结 前言—— 只需轻点鼠标,开发者便可拥有属于自己的AI计算王国 - 从丰富的GPU实例选择,到高性能的云磁盘,再到预配置的深度学习…...

编程日记 2024/11/27 21:10:42

数据库（总结自小林coding）|索引失效的场景、慢查询、原因及如何优化？undo log、redo log、binlog 作用、MySQL和Redis的区别

数据库&#xff08;总结自小林coding&#xff09;|索引失效的场景、慢查询、原因及如何优化&#xff1f;undo log、redo log、binlog 作用、MySQL和Redis的区别 说一下索引失效的场景&#xff1f;什么是慢查询&#xff1f;原因是什么&#xff1f;可以怎么优化&#xff1f;undo …...

编程日记 2024/11/27 21:06:37

Docker容器运行CentOS镜像，执行yum命令提示“Failed to set locale, defaulting to C.UTF-8”

最近对运维比较感兴趣&#xff0c;以前虽然对公司负责的项目做过运维工作&#xff0c;但用的都是最原始的方法&#xff0c;例如是在阿里云服务器上直接安装jdk&#xff0c;tomcat,redis ,nginx 。这种方式对不大的项目还能够支持&#xff0c;随着项目变大&#xff0c;服务增加&…...

编程日记 2024/11/27 21:04:34

OpenCV基本图像处理操作（六）——直方图与模版匹配

直方图 cv2.calcHist(images,channels,mask,histSize,ranges) images: 原图像图像格式为 uint8 或 float32。当传入函数时应 用中括号 [] 括来例如[img]channels: 同样用中括号括来它会告函数我们统幅图 像的直方图。如果入图像是灰度图它的值就是 [0]如果是彩色图像 的传入的…...

编程日记 2024/11/27 21:01:32

【LLM学习笔记】第四篇：模型压缩方法——量化、剪枝、蒸馏、分解

文章目录 1. 为什么要进行模型压缩2. 模型量化2.1 常见数据类型2.2 浮点数表示2.3 线性量化2.4 非线性量化2.5 挑战2.6 实际应用 3. 模型剪枝4. 模型蒸馏4.1 模型蒸馏的基本流程4.2 模型蒸馏的优势4.3 实际应用 5. 低秩分解&#xff08;低秩近似&#xff09;5.1 基本概念5.2 实…...

编程日记 2024/11/27 21:00:29

python3 自动更新的缓存类

这个类会在后台自动更新缓存数据&#xff0c;你只需要调用方法来获取数据即可。 自动更新缓存类 以下是 AutoUpdatingCache 类的实现&#xff1a; import threading import timeclass AutoUpdatingCache:def __init__(self, update_function, expiry_time60):""&qu…...

编程日记 2024/11/27 20:57:27

英语知识网站开发：Spring Boot框架应用

3系统分析 3.1可行性分析 通过对本英语知识应用网站实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本英语知识应用网站采用SSM框架&#xff0c;JAVA作为开发语…...

编程日记 2024/11/27 20:55:25

文件上传upload-labs-docker通关

&#xff08;图片加载不出&#xff0c;说明被和谐了&#xff09; 项目一&#xff1a; sqlsec/ggctf-upload - Docker Image | Docker Hub 学习过程中,可以对照源码进行白盒分析. 补充&#xff1a;环境搭建在Linux虚拟机上的同时&#xff0c;以另一台Windows虚拟机进行测试最…...

编程日记 2024/11/27 20:53:23

git（Linux）

1.git 三板斧 基本准备工作&#xff1a; 把远端仓库拉拉取到本地了 .git --> 本地仓库 git在提交的时候&#xff0c;只会提交变化的部分 就可以在当前目录下新增代码了 test.c 并没有被仓库管理起来 怎么添加&#xff1f; 1.1 git add test.c 也不算完全添加到仓库里面&…...

编程日记 2024/11/27 20:49:17

Doris实战—构建日志存储与分析平台

构建日志存储与分析平台 日志是系统运行的详细记录，包含各种事件发生的主体、时间、位置、内容等关键信息。出于运维可观测、网络安全监控及业务分析等多重需求，企业通常需要将分散的日志采集起来，进行集中存储、查询和分析，以进一步从日志数据里挖掘出有价值的内容。 针…...

编程日记 2024/11/27 20:46:14

【vue3+Typescript】unapp+stompsj模式下替代plus-websocket的封装模块

由于plus-websocket实测存在消息丢失的问题&#xff0c;只能寻找替代的方案&#xff0c;看文章说使用原生的即可很好的工作。而目前在stompjs里需要使用websocket类型的封装模块&#xff0c;看了下原来提供的接口&#xff0c;采用uniapp原生的websocket模式&#xff0c;对原模块…...

编程日记 2024/11/27 20:45:13

Tcon技术和Tconless技术介绍

文章目录 TCON技术&#xff08;传统时序控制器&#xff09;定义&#xff1a;主要功能&#xff1a;优点&#xff1a;缺点&#xff1a; TCONless技术&#xff08;无独立时序控制器&#xff09;定义&#xff1a;工作原理&#xff1a;优点&#xff1a;缺点&#xff1a; TCON与TCONl…...

编程日记 2024/11/27 20:44:12

C#-利用反射自动绑定请求标志类和具体执行命令类

文章速览 概述例程请求类命名空间父类示例子类示例 命令类命名空间子类示例 记录的数据结构实现绑定方法 坚持记录实属不易&#xff0c;希望友善多金的码友能够随手点一个赞。 共同创建氛围更加良好的开发者社区&#xff01; 谢谢~ 概述 需求&#xff1a; 将指定的两种类型的…...

编程日记 2024/11/27 20:41:09

高中数学练习：初探均值换元法

文章目录 1. 均值换元法定义2. 均值换元法优点3. 均值换元法应用4. 均值换元法示例4.1 求解分式方程4.2 求解指数方程4.3 计算最大值 5. 实战小结 1. 均值换元法定义 均值换元法是一种数学技巧&#xff0c;通过引入新变量 t t t将两个变量 x x x和 y y y表示为它们的平均值加上…...

编程日记 2024/11/27 20:40:08

数据结构单链表，顺序表，广义表，多重链表，堆栈的学习

单链表 比如一个多项式&#xff0c;主要包括x的系数&#xff0c;x的指数&#xff0c;那么可以创建一个一维数组来存储它的系数和指数&#xff0c;用数组下标来表示。它的系数可以用数组下标对应的数组元素来储存。 可是这样储存会浪费空间所以采用单链表形式来存储。 即创建一…...

编程日记 2024/11/27 20:38:06

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

编程新知 2025/7/4 6:15:03

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2025/6/21 14:12:32

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2025/6/19 14:18:18

Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

编程新知 2025/7/4 13:14:09

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

编程新知 2025/6/11 3:07:32

安宝特案例丨Vuzix AR智能眼镜集成专业软件，助力卢森堡医院药房转型，赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

编程新知 2025/7/4 13:35:27

MFC 抛体运动模拟：常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时，我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点，详细解析原因并提供解决方案，同时兼顾界面美化，让模拟效果更专业、更高效。 问题一：历史轨迹与小球残影残留 现象 小球运动后，历史位置的 “残影”…...

编程新知 2025/7/2 15:32:43

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

编程新知 2025/7/2 22:36:00

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

编程新知 2025/7/2 16:17:57

什么是VR全景技术

VR全景技术&#xff0c;全称为虚拟现实全景技术&#xff0c;是通过计算机图像模拟生成三维空间中的虚拟世界&#xff0c;使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验&#xff0c;结合图文、3D、音视频等多媒体元素…...

编程新知 2025/6/21 16:33:13