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:径向渐变
相关推荐
然我16 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子21 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹25 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器31 分钟前
指定阿里镜像原理
前端
枷锁—sha36 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha37 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss