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:径向渐变

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/738250.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OSI七层模型TCP四层模型横向对比

OSI 理论模型&#xff08;Open Systems Interconnection Model&#xff09;和TCP/IP模型 七层每一层对应英文 应用层&#xff08;Application Layer&#xff09; 表示层&#xff08;Presentation Layer&#xff09; 会话层&#xff08;Session Layer&#xff09; 传输层&#x…

Java实现递归删除菜单和删除目录及目录下所有文件

目录 一、什么是递归&#xff1f; 二、示例分析 一、什么是递归&#xff1f; 递归调用是一种特殊的嵌套调用&#xff0c;是某个函数调用自己或者是调用其他函数后再次调用自己的&#xff0c;只要函数之间互相调用能产生循环的则一定是递归调用&#xff0c;递归调用一种解决方…

蓝牙通讯——连接你我的无线魔法

引言&#xff1a; 在当今科技高速发展的时代&#xff0c;无线通讯技术已成为我们生活中不可或缺的一部分。其中&#xff0c;蓝牙通讯作为一种广泛应用的无线通讯技术&#xff0c;以其便捷、高效的特点&#xff0c;深入到了我们的日常生活与工作之中。那么&#xff0c;蓝牙通讯究…

Spring Data访问Elasticsearch(一)----Elasticsearch客户端

Spring Data访问Elasticsearch&#xff08;一&#xff09;----Elasticsearch客户端 一、命令式Rest客户端二、反应式&#xff08;Reactive&#xff09;Rest客户端三、客户端配置3.1 客户端配置回调3.1.1 底层Elasticsearch RestClient的配置:3.1.2 底层Elasticsearch RestClien…

掌握Go语言:精通Go语言运算符,解锁编程新境界(11)

算术运算符用于执行基本的数学运算&#xff0c;如加法、减法、乘法和除法等。在Go语言中&#xff0c;我们可以轻松使用这些运算符来进行数值计算&#xff0c;从而实现各种复杂的逻辑操作。让我们一起来深入了解各种算术运算符的使用方法及其在实际开发中的应用。 算术运算符 …

FFmpeg将视频包AVPacket通过视频流方式写入本地文件

1.写视频头 void writeVideoHeader(const char* videoFileName){int r avformat_alloc_output_context2(&pFormatCtx, nullptr, nullptr,videoFileName);if(r < 0){qDebug()<<"Error: avformat_alloc_output_context2: "<<av_err2str(r);return;…

Python 字符串引号 题解

Python 字符串引号 题解 预备知识 在 Python 中&#xff0c;可以使用引号 &#xff0c;" &#xff0c; 和 """来创建字符串。以下都是合法的字符串&#xff1a; aa aa bb "bb" cc cc dd """dd"""配对的引号不…

CloudSecOps实践之路:云安全运营全面解析

云计算已经获得了大量企业用户的青睐&#xff0c;并成为其数字化转型发展的基础&#xff0c;但是也面临着各种各样的风险&#xff0c;从勒索软件到供应链攻击&#xff0c;再到云内部威胁和配置错误&#xff0c;各种云安全事件层出不穷。随着更多的企业将其业务应用迁移至云端&a…

02_electron快速建立项目

一、安装 yarn 在此之前可以先安装 git&#xff1a;Git - Downloads (git-scm.com) 下面就是 yarn 安装的代码&#xff0c;在终端输入即可。 npm install --global yarn 检查是否安装成功&#xff1a; yarn --version 二、快速建立一个electron项目 其实在Getting Started - …

MYSQL Unknown column ‘appreciation.latitude‘ in ‘where clause‘

问题 笔者编写mysql语句&#xff0c;执行报错 详细问题 笔者sql代码 SELECT ap.*, su.username, wh.wheat_name FROM appreciation ap LEFT JOIN sys_user su ON su.id ap.user_id LEFT JOIN wheat wh ON wh.id ap.crop_id WHERE appreciation.latitude 1报错信息 >…

LeetCode707:设计链表

题目描述 实现 MyLinkedList 类&#xff1a; MyLinkedList() 初始化 MyLinkedList 对象。 int get(int index) 获取链表中下标为 index 的节点的值。如果下标无效&#xff0c;则返回 -1 。 void addAtHead(int val) 将一个值为 val 的节点插入到链表中第一个元素之前。在插入完…

GO语言-切片底层探索(下)

目录 切片的底层数据结构 扩容机制 总结&#xff1a; 练习验证代码 这是切片的底层探索下篇&#xff0c;上篇地址请见&#xff1a;GO语言-切片底层探索&#xff08;上&#xff09; 在上篇我们讲解了切片的两个重要实现或者说是两个特征 切片是引用类型&#xff0c;会进行…

java关键字是什么?关键字有哪些?什么是常量?

1、关键字 &#xff08;1&#xff09;关键字概述&#xff1a;被java语言赋予了特定含义的单词。 &#xff08;2&#xff09;关键字特点&#xff1a; 关键字的字母全部小写&#xff1b;常用的代码编辑器&#xff0c;针对关键字有特殊的颜色标记&#xff0c;非常直观。 以IDE…

【QT+QGIS跨平台编译】之七十一:【QGIS_Analysis跨平台编译】—【qgsrastercalclexer.cpp生成】

文章目录 一、Flex二、生成来源三、构建过程一、Flex Flex (fast lexical analyser generator) 是 Lex 的另一个替代品。它经常和自由软件 Bison 语法分析器生成器 一起使用。Flex 最初由 Vern Paxson 于 1987 年用 C 语言写成。 “flex 是一个生成扫描器的工具,能够识别文本中…

机器学习之分类回归模型(决策数、随机森林)

回归分析 回归分析属于监督学习方法的一种&#xff0c;主要用于预测连续型目标变量&#xff0c;可以预测、计算趋势以及确定变量之间的关系等。 Regession Evaluation Metrics 以下是一些最流行的回归评估指标: 平均绝对误差(MAE):目标变量的预测值与实际值之间的平均绝对差…

在 windows 下安装并调试 CMake

一、前言 CMake是一个跨平台的开源工具&#xff0c;用于管理软件项目的构建过程。它不直接构建软件&#xff0c;而是生成用于特定平台或编译器的构建文件&#xff08;如Makefile或Visual Studio项目文件&#xff09;&#xff0c;然后利用这些文件来实际构建软件。 二、初次尝…

微服务架构 | 架构演进

INDEX 1 架构演进 1 架构演进 standalone 就部署一份 可用性问题&#xff1a;只有一个点&#xff0c;单点故障 全挂流量瓶颈&#xff1a; 只有一个点&#xff0c;可以支持的流量有限性能越高的服务器价格会非线性增加 功能耦合&#xff1a;协同开发困难&#xff0c;各自改一…

大数据开发-Hive介绍以及安装配置

文章目录 数据库和数据仓库的区别Hive安装配置Hive使用方式Hive日志配置 数据库和数据仓库的区别 数据库&#xff1a;传统的关系型数据库主要应用在基本的事务处理&#xff0c;比如交易&#xff0c;支持增删改查数据仓库&#xff1a;主要做一些复杂的分析操作&#xff0c;侧重…

Day34:安全开发-JavaEE应用反射机制攻击链类对象成员变量方法构造方法

目录 Java-反射-Class对象类获取 Java-反射-Field成员变量类获取 Java-反射-Method成员方法类获取 Java-反射-Constructor构造方法类获取 Java-反射-不安全命令执行&反序列化链构造 思维导图 Java知识点 功能&#xff1a;数据库操作&#xff0c;文件操作&#xff0c;…

系统安全与网络攻击

系统安全与网络攻击 Web攻击 XSS 即&#xff08;Cross Site Scripting&#xff09;中文名称为&#xff1a;跨站脚本攻击。XSS的重点不在于跨站点&#xff0c;而在于脚本的执行。 XSS的攻击原理&#xff1a;恶意攻击者在web页面中会插入一些恶意的script代码。当用户浏览该页面的…