H5新特性有哪些？怎么理解语义化

H5新增了很多新的特性，这也成了我们面试的时候面试官喜欢问的一个问题，那我们可能在开发的过程中如果没有去关注过那也不是很清楚用到的是不是H5的新特性，下面我们就来讲一下

H5十大新特性

1、语义化标签，为我们提供了更好的页面结构，比如<header><section><nav><aside>,这些标签可以让我们更直观的知道你要表达的是什么，再更进一步讲是让浏览器更好，更直观的去解析你的页面

2、增强型表单（表单新增属性）

placeholder(我们常用的表单占位符)，step(为输入域规定合法的数字间隔)，

max(设置表单最大输入值),min（设置表单最小输入值）,autofocus（表单加载完后自动获取焦点）,multiple（文件上传控件，设置之后可允许多文件上传），required(设置之后文本框必须有数据输入才能提交)，pattern(正则表达式的校验)，例如

还有很多，这里就不一一细写了

3、视频和音频：<video><audio>

4、canvas绘图，canvas对我们的动画效果实现的作用是非常大的，它用于生成图像，他本身就是一个画布，我们真正操控的是他的API，在上面生成图像。它的底层是一个个像素，基本上是一个用以用javascript操作的位图，他与svg的区别在于，canvas是脚本调用各种方法生成图像，SVG则是一个xml文件，通过各种子元素生成图像，canvas的具体操作实现这里就不累赘了

5、SVG，是一种可伸缩的矢量图，这也就对应出了它另外一个特性，就是无论你怎么改变它的尺寸或者放大缩小都不会影响到他的图形质量

6、Geolocation API用于获取用户的地理位置，下面贴上W3C的一个例子

7、拖放API（Drag）在元素标签内设置draggable属性为true，元素即可拖动，规定元素被拖动时发生了什么？和放到何处需要我们做函数处理，同时这里也会涉及到浏览器默认事件处理的问题

8、webworker，是一种运行在后台的javascript脚本，不会影响页面性能，比如我们的一个计数，统计用户登录次数，一些统计场景，但是这样会很消耗CPU,还有就是IE浏览器不支持，由于他是外部文件，无法访问到javascript的window对象，document对象，parent对象

9、webstorage,包含两种机制

1、sessionStorage会话存储，窗口关闭数据不存在，窗口之间不共享，大小限制5K

2、localStorage持久性存储，除非手动删除，浏览器窗口共享，大小限制5K

方法：

setItem()添加

getItem()获取

clear()清除所有

removeItem()删除指定项

10、websocket

websocket是H5提供的一种在单个TCP连接上进行的双工通讯的协议。在websocket中浏览器跟服务器中需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输

H5新特性有哪些？怎么理解语义化相关推荐

h5新特性DOMAST的简单理解
h5新特性 1.一些语义化标签 header.footer.nav.aside.article.section.hgroup(h1~h6的集合) document.createElement('hea ...
前端面试题二：ES6/7/8新特性、性能优化、数据交互、H5新特性
目录一.ES6/7/8新特性二.性能优化三.数据交互四.H5新特性一.ES6/7/8新特性 1.ES6中新增了哪些数据类型? Symbol类型(基本) Set类型(复杂) Map类型(复杂) ...
html5新特性表单控件,老生常谈h5新特性1:(表单)
老生常谈h5新特性1:(表单) HTML5新特性 -- 十大新特性 (1)新的语义标签和属性 (2)表单新特性 (3)视频和音频 (4)Canvas绘图 (5)SVG绘图 (6)地理定位 (7)拖放A ...
前端16天--IFC、BFC、H5新特性、选择器、伪类元素、扩展盒模型、圆角、盒子阴影等--2021/4/21
前端16天–IFC.BFC.H5新特性–2021/4/21 HTML5是HTML标准的最新演进版本: 1.是一个新的HTML语言版本包含了新的元素.属性和行为. 2.同时包含了一系列可以被用来让web ...
【面试】面试官：说一说H5新特性
H5 新特性 1.拖拽释放(Drap and drop) API ondrop拖放是一种常见的特性,即抓取对象以后拖到另一个位置在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放 2.自定义 ...
H5新特性（一）——音视频标签
H5新特性--音视频标签大家都有在网页中浏览音频和视频的经历,在HTML5之前,对视频和音频没有一个标准,因此在网页中看到的视频,都是通过第三插件的方式嵌入的,可能是QuickTime,也可能是 R ...
H5新特性（四）——语义化标签
语义化标签什么是语义元素? 语义是指对一个词或者句子含义的正确解释.很多html标签也具有语义的意义,也就是说元素本身传达了关于标签所包含内容类型的一些信息.例如,当浏览器解析到标签时,它将该标签 ...
html5新特性 gps,老生常谈H5新特性:地理定位
HTML5新特性 1.新的语义标签 2.表单2.0 3.视频和音频 4.Canvas绘图 5.SVG绘图 6.地理定位 7.拖放API 8.WebWorker 9.WebStorage 10.WebS ...
H5新特性 - 拖拽属性
拖拽属性拖拽属性 H5的新特性 : 是指鼠标点击源对象之后,不松手将其拖拽到目标对象,或半途松手(释放)的过程拖拽 Drag 源对象: 指定的鼠标点击的一个事物,例如: 一个元素,一个图片等目标 ...

H5新特性有哪些？怎么理解语义化

H5新特性有哪些？怎么理解语义化相关推荐

最新文章

热门文章