H5新特性和C3新特性

最新推荐文章于 2024-02-22 16:37:47 发布
原创 最新推荐文章于 2024-02-22 16:37:47 发布 · 4.2k 阅读 · 47 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
前端知识点总结

当前文章被收录于：

前端知识点总结
12 篇文章 1 人学习
订阅专栏 查看详情
前端面试

当前文章被收录于：

前端面试
4 篇文章 0 人学习
订阅专栏 查看详情
本文详细介绍了HTML5和CSS3的新特性，包括拖放API、自定义属性、语义化标签、多媒体支持、画布绘图、地理定位、本地存储、表单控件、WebWorker、WebSocket等HTML5特性，以及颜色模式、文字阴影、圆角、边框阴影、盒子模型、背景控制、渐变、过渡、自定义动画、媒体查询、2D和3D转换等CSS3特性。

1.H5新特性

  1. 拖拽释放(Drap and drop) API ondrop
  • 拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
    在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
  1. 自定义属性data-id
  2. 语义化更好的内容标签(header,nav,footer ,aside, article, section)
  3. 音频 ,视频(audio, video) 如果浏览器不支持自动播放怎么办?在属性中添加autoplay
  4. 画布Canvas
    • getContext() 方法返回一个用于在画布上绘图的环境。Canvas.getContext(contextID) 参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。
    • cxt.stroke() 如果没有这一步 线条是不会显示在画布上的
    • canvas和image在处理图片的时候有什么区别?
      image是通过对象的形式描述图片的,canvas通过专门的API将图片绘制在画布上.
  5. 地理(Geolocation) API
  6. 本地离线存储localStorage 长期存储数据 浏览器关闭后数据不丢失
  7. sessionStorage 的数据在浏览器关闭后自动删除
  8. 表单控件 calendar , date , time , email , url , search , tel , file , number
  9. 新的技术 webworker, websocket , Geolocation

2.CSS3新特性

  1. 颜色: 新增RGBA , HSLA模式
  2. 文字阴影(text-shadow)
  3. 边框: 圆角(border-radius) 边框阴影 : box-shadow
  4. 盒子模型: box-sizing
  5. 背景:background-size background-origin background-clip
  6. 渐变: linear-gradient , radial-gradient
  7. 过渡 : transition 可实现动画
  8. 自定义动画 animate @keyfrom
  9. 媒体查询 多栏布局 @media screen and (width:800px) {…}
  10. border-image
  11. 2D转换;transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)
  12. 3D转换
  13. 字体图标 font-face
  14. 弹性布局flex
H5C3新特性简单总结
南风的博客
02-06 5084
H5C3新特性简单总结
h5c3的新特性
m0_59070120的博客
02-26 720
session在当前页面会话结束前有效，只在同页面可以访问到，不同页面即使同源也不行，local除非主动删除否则都有效。增加了代码可读性，有利于团队协作，提高开发效率；cookies，4kb，每次会随着同源的http请求自动发送给服务器，在设置过期时间之前都有效。5，Web Storage（本地存储，session，local）bored-box，content-box切换。session，local：同源，大小5mb。5，盒子模型 box-sizing。4，增加了画布，canvas。
HTML5和css3新特性
田兴的博客
10-21 7930
css3新特性 选择器 背景和边框 文本效果 2D/3D 转换 — 变形（transform）、过渡(transtion)、动画(animation) 动画、过渡 多列布局 1. 选择器 常规选择器： :last-child /* 选择元素最后一个孩子 */ :first-child /* 选择元素第一个孩子 */ :nth-child(1) /* 按照第几个孩子给它设置样式 */ :nth-child(even) /* 按照偶数 */ :nth-child(odd) /
前端基础——H5C3提高
2302_79866622的博客
02-22 964
CSS3中可以通过box-sizing 属性来指定盒子模型，有两个值：即可指定为content-box，boder-box 这样我们计算盒子大小的方式就发生了变化。注意：这些新特性都会有兼容性问题，基本使IE9以上的版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。1.属性：想要变化的CSS属性，宽度高度 背景颜色 内外边距都可以 如果想要所有属性都变化过渡，写一个all就可以。属性选择器可以根据特定属性的来选择元素。针对之前的不足，新增加了一些新的标签，新的表单和新的表单属性等。
H5C3的新特性有哪些？
吃饱打厨子
07-20 358
H5C3的新特性：画布canvas，推拽释放API，.2D和3D
h5和c3新特性
haimianjun123的博客
12-09 2471
文章目录前言一、h5新特性二、css3新特性 前言 一、h5新特性 1.语义化标签：header、footer、section、nav、aside、article 2.增强型表单：input 的多个 type 3.新增表单元素：datalist、keygen、output 4.新增表单属性：placehoder、required、min 和 max 5.音频视频：audio、video 6.canvas 7.地理定位 8.拖拽 9.本地存储：localStorage - 没有时间限制的数据存储；ses
H5 和 C3 的新特性
qq_54281798的博客
03-21 2334
H5 新增新特性 1、拖拽释放 拖放是一种常见的特性，即抓取对象以后拖到另一个位置，在 HTML5 种，拖放是标准的一部分，任何元素都能够拖放 2、自定义属性 如：data-id 3、语义化标签 如：header、nav、footer、aside、article、section等 4、音频（audio）、视频（video） 如果浏览器不支持自动播放怎么办？在属性中添加 autoplay 5、画布（Canvas） getContext() 方法返回一个用于画布上的绘图的环境 Canvas.get
h5和c3的新特性
Smature的博客
01-30 474
h5和c3新特性
H5，C3和ES6新特性总结
wdhxs的博客
12-24 858
H5，C3和ES6新特性总结 一、H5 新增语义化标签header、sction、main、sider、footer和nav等。 表单新特性：email、url、number、range、Date Pickers、search、color等。 拖拽属性：draggable 多媒体视频（vedio）和音频（audio） 新的通信协议：webSocket 二、C3新特性 选择器：属性选择器 E[attr]，伪类选择器 E:nth-child(n) 颜色：RGBA, HSLA 盒模型：box-sizing:
H5和C3的新特性
m0_61632793的博客
03-24 649
h5c3简单介绍
h5和c3新特性总结
qq_44718039的博客
09-27 244
h5和c3
H5和C3新特性(完整版)
好好学习，天天向上！
01-11 2281
css3新特性 选择器 背景和边框 文本效果 2D/3D 转换 — 变形（transform）、过渡(transtion)、动画(animation) 1.选择器 :last-child /* 选择元素最后一个孩子 */ :first-child /* 选择元素第一个孩子 */（fer斯特） :nth-child(1) /* 按照第几个孩子给它设置样式 */ :nth-child(even) /* 按照偶数 */ :nth-child(odd) /* 按照奇数 */ :disabled /* 选择
H5 和C3 的这些新特性.你都知道吗
weixin_46474841的博客
05-02 641
H5 新特性 1、拖拽释放(Drap and drop) API ondrop 拖放是一种常见的特性，即抓取对象以后拖到另一个位置在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放 2、自定义属性 data-id 3、语义化更好的内容标签(header,nav,footer ,aside, article, section) 4、音频 ,视频(audio, video) 如果浏览器不支持自动播放怎么办? 在属性中添加 autoplay(谷歌浏览器不支持音频自动播放，但是视频支持静音自动播放) 5、画
H5，C3，ES6新特性
weixin_30725467的博客
05-04 154
H5的新特性 1.语义化标签 有利于SEO，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重。 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构 方便其他设备的解析 便于团队开发和维护 2.表单新特性 3.多媒体视频(video)和音频(audio) 4.web存储 sessionstorage:关闭浏览器清空数据，储存大小约5M。 localsto...
H5+CSS3基础（常用）
404路西法的博客
05-25 504
（一）说一下h5的新特性 1-切记回答这个问题不要只说语义化标签，如果只说这个就废了,可以从自己的体验方面，去分析的说，不要死记硬背 2-可以先说一下h5新增的语义化标签和js API 01-语义化标签有:header,footer,aside,nav等 02-还有在音频和视频方面的改进 -> 1.视频（video） 2.音频 (audio) 03-js API 有如本地存储-&...
h5c3个人笔记
weixin_43599269的博客
05-12 473
ZXY的H5C3笔记 H5第一天 H5参考手册地址:http://www.w3school.com.cn/html5/html5_reference.asp: 常用标签: nav 导航标签 header 页眉标签 footer 页脚标签 main 内容标签 article 左边 aside 右边 audio 音频 video 视频 source 提供多个视频 ...
H5+C3新特性
a1578460233的博客
05-30 345
h5(html5)+css3+web前端 学习视频 帮助文档（学习手册）菜鸟教程H5 帮助文档（学习手册）菜鸟教程C3 笔记源码—>H5+C3 可在线查看网页源代码预览 也可以ctrl+s保存打开 对比学习，一学就会！ <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="
H5C3的讲解
weixin_30664539的博客
06-05 618
H5C3 HTML5 简介 HTML5 是 HTML 标记语言的一个最新版本，制定了 web 应用开发的一系列标准，成为第一个将 web 作为应用开发平台的 HTML 语言。 H5 其实是一个泛称，它指的是由 HTML5 + CSS3 + Javascript 等技术组合而成的一个应用开发平台。 HTML5 的设计目的是为了在移动设备上支持多媒体。HTML5 是最...
H5C3常见面试题
m0_63349753的博客
11-20 359
H5C3常见面试题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值