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:径向渐变
相关推荐
无双_Joney17 分钟前
[更新迭代 - 1] Nestjs 在24年底更新了啥?(功能篇)
前端·后端·nestjs
在云端易逍遥19 分钟前
前端必学的 CSS Grid 布局体系
前端·css
ccnocare20 分钟前
选择文件夹路径
前端
艾小码20 分钟前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
闰五月21 分钟前
JavaScript作用域与作用域链详解
前端·面试
泉城老铁25 分钟前
idea 优化卡顿
前端·后端·敏捷开发
前端康师傅25 分钟前
JavaScript 作用域常见问题及解决方案
前端·javascript
司宸26 分钟前
Prompt结构化输出:从入门到精通的系统指南
前端
我是日安27 分钟前
从零到一打造 Vue3 响应式系统 Day 9 - Effect:调度器实现与应用
前端·vue.js