HTML5、CSS3、ES6新特性简单总结

最新推荐文章于 2024-07-31 23:13:20 发布

weixin_46015266

最新推荐文章于 2024-07-31 23:13:20 发布

阅读量375

点赞数 1

文章标签： html5 css3 es6

本文链接：https://blog.csdn.net/weixin_46015266/article/details/109202903

版权

本文总结了HTML5的新标签、本地存储、拖放API以及全双工通信协议WebSocket；CSS3的新特性包括颜色、阴影、圆角、过渡动画、媒体查询等；最后，介绍了ES6中的let、const、模板字符串、Symbol、Promise、async/await等重要特性。

摘要由CSDN通过智能技术生成

一、HTML5
1.标签类

新增结构标签（更加语义化）：<nav> <header><hgroup><article>
多媒体标签：video audio canvas source embed
web应用标签：meter progress datalist details
注释标签：ruby rt rp
其他标签：mark output

2.本地化存储：localStorage ， sessionStorage

3.拖拽及释放的API：drag drop

4.新增Input元素类型：
email number url range
Date-picker 类型包括：date month week等

5.表单新增属性：

- autocomplete
- autofocus
- multiple 
- placehoder 
- required

6.全双工通信协议：websocket

二、CSS3

1.颜色：rgba 增加透明度

2.文字阴影：text-shadow

3.圆角（border-radius）边框阴影： box-shadow

4.盒子模型：box-sizing

6.过渡：transition，

7.自定义动画 animation

8.在C

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_46015266

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

HTML5、CSS3、ES6新特性

GoodLuck_wu5的博客

07-09

1268

目录HTML5新特性canvas 绘制SVG 可伸缩矢量图形属性draggable="true" 拖放audio(音频) video(视频)Web存储 localStorage、sessionStorageInput 类型CSS3新特性属性选择器元素选择器border（边框）文本效果transform 转换变形transition 过渡display="flex" 弹性盒伸缩布局 HTML5新特性 标签意义 article 页面独立的内容区域 aside 页面的侧边栏内容 bdi

html5,css3,es6新特性总结

蓝枫秋千的踩坑记录

10-28

940

html5新特性 语义化标签如:header,footer,nav,dialog 增强型表单如:date,week,url,time,email,month 视频和音频 audio和video Canvas绘图标签只是图形容器,真正绘图的是javascript svg绘图它是一种可伸缩的矢量图形和canvas的区别: svg使用xml描述2d图形, canvas使用javascri...

参与评论您还未登录，请先登录后发表或查看评论

CSS学习文档（6）：HTML5的新特性、CSS3的新特性

最新发布

m0_58433849的博客

07-31

963

注意：HTML5在不使用插件的情况下，也可以原生的支持音频格式文件的播放，当然，支持的格式是有限的。（1）视频----------常见属性（音频类似视频）（2）视频代码示例如下： 3、新增的input类型重点记住：number、tel、seatsh代码示例如下所示： 4、新增的表单属性代码示例如下所示：属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。代码示例如下所示：结构伪类选择器主要根据文档结构来选择器元素，常用于

面试题：HTML5、CSS3和ES6有哪些常用的新特性？

公众号：前端充电宝

08-17

1253

1. HTML5新特性有哪些？ 2. CSS3新特性有哪些？ 3. ES6新特性有哪些？

面试题（二）——HTML5、CSS3、ES6新特性

weixin_47966382的博客

05-16

288

1、html5新特性 1.1 语义化标签如:header,footer,nav,dialog 1.2 增强型表单如:date,week,url,time,email,month 1.3 视频和音频 audio和video 1.4 Canvas绘图标签只是图形容器,真正绘图的是javascript 1.5 svg绘图它是一种可伸缩的矢量图形和canvas的区别: svg使用xml描述2d图形, canvas使用javascript来绘制 1.6 地理定位 Geolocation

HTML5、CSS3、ES6新特性总结

Vivien_CC的博客

09-13

600

HTML5 提供了一些新的表单输入类型和属性（例如日期选择、邮箱验证、自动完成等），以及表单验证 API，使得表单操作更加方便和强大，表单输入更加简洁和语义化。CSS3 引入了过渡（transition）和动画（animation）效果，使得在没有使用 JavaScript 的情况下，可以实现页面元素的平滑过渡和动态效果。

常见前端面试题--常用H5/ES6/CSS3新特性

weixin_45663702的博客

03-14

854

常用H5/ES6/CSS3新特性

基于html5 css3 jq es6 ，汇新优科官网.zip

02-13

【标题】"基于html5 css3 jq es6 ，汇新优科官网.zip"是一个压缩包，其中包含了使用HTML5、CSS3、jQuery（jq）和ES6（JavaScript的第六版）技术开发的汇新优科官方网站的相关代码和资源。这个项目可能是一个网页设计...

三ES6新特性.pdf

07-13

ES6新特性中比较突出的包括： 1. const关键字：使用const声明的常量具有块级作用域，一旦赋值后不可更改。在声明常量时必须立即初始化，否则后续尝试赋值会引发错误。 2. let关键字：let关键字允许声明块级作用域...

pos-unipar-HTML5-CSS3-ES6-Atividades:HTML5-CSS3-ES6活动

03-28

标题中的"pos-unipar-HTML5-CSS3-ES6-Atividades"暗示了这是一个关于编程学习的项目，重点在于HTML5、CSS3和ES6（ECMAScript 6）的应用。这个项目可能包含了若干个实践活动，帮助学习者通过实际操作来提升对这三个...

html5+css3

03-19

html5基础开发文件.

前端笔记，vue，js，html，css，css3，es6；前端笔记.rar

07-30

这些技术包括Vue.js、JavaScript（JS）、HTML、CSS以及它们的更新版本CSS3和ES6。让我们深入探讨这些关键知识点。 1. **HTML（HyperText Markup Language）**：HTML是网页内容的基础，用于定义页面结构。它由一系列...

HTML5,CSS3,ES6新特性

qq_45952585的博客

04-09

521

HTML5,CSS3,ES6新特性HTML5CSS3ES6 HTML5 语义化的区块和段落元素：section,article,nav,header,footer,aside和hgroup 音频和视频：audio和video元素嵌入和允许操作新的多媒体内容表单input的属性：color，date ，datetime-local ，email 新的语义元素除了节段，媒体和表单元素之外，还有众多的新元素：mark，figure，figcaption，data，time，output，progress，或

HTML5、CSS3、ES6

qq_44432090的博客

01-14

1248

HTML5、CSS3、ES6 HTML5： 新特性： ① 拖拽释放（Drag and drop）API ②语义化更好的内容标签（header，nav，footer，aside） ③音频，视频API（audio，video） ④画布（Canvas）API ⑤地理（Geolocation）API ⑥本地离线储存 localStorage长期储存数据，浏览器关闭后不丢失 ⑦sessionStorage...

HTML5 CSS3

坤坤的博客

03-21

149

HTML新增了哪些? 语义化标签导航栏div 头部标签div 受够了吗? 看看下面这些新标签是不是一目了然 video audio input 表单 CSS3新特性 属性选择器结构伪类选择器 nth-child实现隔行变色 add nth-child(n)利用算法实现偶数奇数隔行变色由于n是从0,1,2,3,4,5…递增的方式计算此时(2n) 就可以求得 20, 21 ,22 ,23 ,2*4…也就是说0,2,4,6,8偶数奇数也一样(2n-1)即可结构伪类选择器

CSS3用过哪些新特性

初漾的博客

06-18

3763

参考：http://zhoukekestar.github.io/notes/2017/06/07/interview-answers.html 关于CSS3，可以先查看一下文档 新特性有： border-radius 圆角, @font-face 字体, box-shadow text-shadow 框和文本的阴影word-wrap, background-size, back

HTML5 + CSS3

坏蛋阿土的博客

10-29

8563

HTML指的是超文本标记语言(HyperText Markup Language)，它是用来描述网页的一种语言。 HTML不是一种编程语言，而是一种标记语言(markup language)。标记语言是一套标记标签(markup tag)。所谓超文本，有2层含义∶ 1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。 2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本)。网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户的。浏

H5、CSS3新属性,ES6新特性

07-25

H5、CSS3新属性和ES6新特性是现代Web开发中非常重要的内容。 H5（HTML5）是HTML的第五个版本，引入了许多新的语义化标签和功能。其中一些新属性包括： 1. `<canvas>`：用于绘制图形、动画和其他视觉效果。 2. `<video>`和`<audio>`：用于嵌入视频和音频内容。 3. `<input>`的新类型：如`type="date"`、`type="email"`等，用于更方便地处理不同类型的用户输入。 4. `<progress>`和`<meter>`：用于显示进度条和度量。 5. `<section>`、`<article>`、`<header>`和`<footer>`：用于更好地组织页面结构。 CSS3引入了许多新的样式属性和效果，使得页面设计更加灵活和丰富。一些新属性包括： 1. 边框属性：如`border-radius`用于创建圆角边框，`border-image`用于使用图片作为边框。 2. 渐变：如`linear-gradient`和`radial-gradient`用于创建平滑过渡的背景效果。 3. 动画和过渡：如`@keyframes`和`transition`属性，用于创建动态的元素效果。 4. 弹性布局：使用`display: flex`和相关属性，实现灵活的布局方式。 ES6（ECMAScript 6）是JavaScript的第六个版本，也被称为ES2015。它引入了许多新的语言特性和语法糖，使得JavaScript编程更加高效和易读。一些新特性包括： 1. 块级作用域：引入`let`和`const`关键字，使得变量的作用域更加清晰和可控。 2. 箭头函数：使用`=>`语法定义匿名函数，简化了函数的书写和上下文绑定。 3. 模板字符串：使用反引号（`）包裹字符串，可以在其中插入变量和换行符。 4. 解构赋值：通过模式匹配的方式，将对象或数组的属性值解构到变量中。 5. Promise：用于处理异步操作，避免了回调地狱的问题。 6. 模块化：使用`import`和`export`关键字进行模块的导入和导出。以上只是H5、CSS3和ES6的一些主要特性，它们都为Web开发带来了更多可能性和便利性。