html5新特性有哪些？

最新推荐文章于 2024-06-24 14:21:19 发布

前端每日三省

最新推荐文章于 2024-06-24 14:21:19 发布

阅读量349

点赞数

分类专栏： dairy 文章标签： html5 前端 javascript

本文链接：https://blog.csdn.net/weixin_42560424/article/details/128802006

版权

100 篇文章 13 订阅

订阅专栏

新增语义化标签：header、nav、aside、article、section、footer
拖放属性：drag/drop.拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
音/视频标签：audio/video
画布(Canvas): HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器，您必须使用脚本来绘制图形。你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。
例如：
可缩放矢量图形(SVG):

Canvas	SVG
依赖分辨率	不依赖分辨率
不支持事件处理器	支持事件处理器
弱的文本渲染能力	最适合带有大型渲染区域的应用程序（比如谷歌地图）
能够以 .png 或 .jpg 格式保存结果图像	复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
最适合图像密集型的游戏，其中的许多对象会被频繁重绘	不适合游戏应用

地理定位(Geolocation):
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
web存储(localStorage/sessionStorage)：HTML5 web 存储，一个比 cookie 更好的本地存储方式。客户端存储数据的两个对象为：

颜色: 新增了新的颜色表示方式rgba与hsla
边框: 圆角(border-radius)、盒阴影(box-shadow)、边框图片(border-image)
背景: 背景图(background-image)、背景图大小(background-size)、背景图位置区域(background-origin)、背景裁剪属性(background-clip)
渐变: 线性渐变(linear-gradient)、径向渐变(radial-gradient)
文本效果: 文字阴影(text-shadow)、文本溢出(text-overflow)、长文本换行(text-wrap)
2D转换: translate(平移)、rotate(顺时针旋转)、scale(缩放)
3D转换: rotateX()方法，围绕其在一个给定度数X轴旋转的元素;rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。
过渡: transition 可实现属性的渐变
动画: @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
多列: column-count 属性指定了需要分割的列数、column-gap 属性指定了列与列间的间隙、column-rule-style 属性指定了列与列间的边框样式、column-rule-width 属性指定了两列的边框厚度、column-rule-color 属性指定了两列的边框颜色、column-width 属性指定了列的宽度。
弹性盒子：flex布局
媒体查询：@media