HTML5 & CSS3常见新特性

HTML新特性

新增特性:

  • 语义化标签 :,如<header>、<footer>、<nav>、<article>、<section>等,能够更准确地描述网页结构
  • 视频和音频 :添加了<video><audio>标签,在网页上嵌入和播放视频、音频内容更加容易
  • Canvas:引入了<canvas>元素,提供了一个绘制图形和动画的API,使得在网页上创建复杂的图形和交互性更为方便
  • Web存储:增加了本地存储 能力,包括localStoragesessionStorage,可以在客户端存储数据,减少对服务器的依赖
    • localStorage 长期存储数据,浏览器关闭后数据不丢失
    • sessionStorage 的数据在浏览器关闭后自动删除
  • Web Workers:引入了Web Workers,允许在后台运行脚本 ,提高网页的性能和响应能力
    • 基本原理:在当前主线程中,使用Worker类加载一个javascript文件来开辟一个新的线程,起到互不阻塞执行的效果,并且提供主线程和新线程之间数据交换的接口
  • 表单增强 :通过添加新的表单元素和输入类型,以及表单验证API
    • calendar、date、time、email、url、search
  • 地理定位:引入了Geolocation API,使得网页可以获取用户的地理位置信息
  • 路由历史管理:提供了History API,允许网页动态修改浏览器的URL和历史记录,实现无刷新页面加载和前进/后退导航的功能
  • 拖放API:当元素拖动时,可以查看拖动的数据
  • WebSockets:引入了WebSockets协议,提供了一种在客户端和服务器之间进行实时双向通信 的方式
    • 建立在TCP协议基础之上,和HTTP协议同属于应用层
    • 可以发送文本,也可以发送二进制数据
    • 没有同源限制,客户端可以与任意服务器通信

移除元素:

  • 移除如<big><strike>等一些样式标签,应使用CSS来设置样式
  • 不再推荐使用<applet><object>标签来嵌入Java小程序或其他外部插件,而是鼓励使用<embed><video><audio>等元素
  • 不再支持<frame><frameset>标签,推荐使用<iframe>或其他技术来实现框架效果
  • 不再推荐使用<menu>标签,推荐使用无序列表<ul>代替

CSS3新特性

1. 选择器

  • 属性选择器:允许根据元素的属性值来选择元素

  • 伪类选择器:允许根据元素的状态或位置 来选择元素,例如 :hover:focus:nth-child():not()

2. 边框

  • border-radius:创建圆角边框
  • box-shadow:为元素添加阴影
    • 水平阴影和垂直阴影是必须设置的
  • border-image:使用图片来绘制边框

3. 背景

background-clip用于背景的绘制区域,有以下几种内容:

  • background-clip: border-box:背景从border开始显示
  • background-clip: padding-box:背景从padding开始显示
  • background-clip: content-box:背景显content区域开始显示
  • background-clip: no-clip:默认属性,等同于border-box

4. transition 过渡

  • transition:可以被指定为一个或多个CSS属性的过渡效果,多个属性之间用逗号进行分隔
  • 持续时间及过渡效果必须要设置

5. transform 转换

  • transform:允许旋转、缩放、倾斜或平移给定元素,包括 2D 和 3D 变换
  • transform-origin:转换元素的位置(围绕那个点进行转换),默认值为(x,y,z):(50%,50%,0)

6. animation 动画

  • animation :用于创建动画效果,可以实现更加复杂的动画

  • 这个平常使用相对较多

    animation-name:动画名称
    animation-duration:动画持续时间
    animation-timing-function:动画时间函数
    animation-delay:动画延迟时间
    animation-iteration-count:动画执行次数,可以设置为一个整数,也可以设置为infinite,意思是无限循环
    animation-direction:动画执行方向
    animation-paly-state:动画播放状态
    animation-fill-mode:动画填充模式

7. linear-gradient 渐变色

颜色渐变是指在两个颜色之间平稳的过渡,css3渐变包括

  • linear-gradient:线性渐变
  • radial-gradient:径向渐变
相关推荐
花生侠几秒前
记录:前端项目使用pnpm+husky(v9)+commitlint,提交代码格式化校验
前端
一涯8 分钟前
Cursor操作面板改为垂直
前端
我要让全世界知道我很低调15 分钟前
记一次 Vite 下的白屏优化
前端·css
1undefined216 分钟前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
蓝倾1 小时前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong1 小时前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹1 小时前
硬件产品研发管理工具实战指南
前端·python
用户3802258598241 小时前
vue3源码解析:依赖收集
前端·vue.js
WaiterL1 小时前
一文读懂 MCP 与 Agent
前端·人工智能·cursor
gzzeason1 小时前
使用Vite创建React初始化项目
前端·javascript·react.js