H5新增了哪些新特性

H5新增了哪些新特性H5新增了哪些新特性?前言本期为大家总结面试时常被问到的一个问题,那就是H5新特新有哪些,目前H5的新特性在实际工作中也经常会用到。本章主要总结为主,因此没有深入记录,若想深入了解,还需单独研究哦~1.语义化标签2.Form表单增强3.视频和音频标签4.Canvas绘图5.SVG绘图6.地理位置定位(GeolocationAPI)7.拖放API8.WebWorker9.WebStorage10.WebSocket

大家好,欢迎来到IT知识分享网。

目录

前言

1.语义化标签

2.form表单增强

3.视频和音频

4.Canvas绘图

5.SVG绘图

6.地理位置定位(Geolocation API )

7.拖放API

8.Web Worker

9.Web Storage

10.Web Socket

总结


前言

本期为大家总结面试时常被问到的一个问题,那就是H5新特新有哪些,目前H5的新特性在实际工作中也经常会用到。本章主要总结为主,因此没有深入记录,若想深入了解,还需单独研究哦~


1.语义化标签

HTML5新增的语义化标签主要有:
<article>、<section>、<nav>、<aside>、<header>、<footer>、<time>等等…


2.Form表单增强

  • Input的type新属性:number、data、month、week、time、email、url等;
  • Input标签新增加的特有属性

代码:

<input type="number" name="demoNumber" min="1" max="100" step="2"/>
<input type="email" name="email" placeholder="请输入注册邮箱" />
<input type="url" placeholder="请输入网址" name="url" />
<input type="tel" placeholder="输入电话" name="phone"/>
<input type="range" min="0" max="50" step="5" name="rangedemo" value="0" />
<input type="date" name="datedemo" />
<input type="color"/>
<input type="text" autocomplete="on" name="demoAutoComplete" list="autoNames" />
Input标签新增加的特有属性
<input type="text" autofocus="autofocus"/>
1)autofocus属性 此属性可以设置当前页面中input标签加载完毕后获得焦点。
2)max,min,step这些上面都是跟数字相关。
3)placeholder:提示信息属性,上面有demo。
4)multiple:用于文件上传控件,设置此属性后,允许上传多个文件。


3.视频和音频标签

代码如下:

<!-- 视频标签 -->
<video src="url" controls="controls"></video> //src 视频URL  controls 展示控件,如播放按钮
<!-- 音频标签 -->
<audio src="url" loop="loop" muted="muted"></audio> //src 音频URL  loop 音频结束时重新播放  muted 静音播放

4.Canvas绘图

        HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

案例代码:

<html>
    <canvas id="myCanvas" width="200" height="100"></canvas>
</html>
<script>
    var c=document.getElementById("myCanvas"); //使用 id 来寻找 canvas 元素
    var cxt=c.getContext("2d"); //getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
    cxt.fillStyle="#FF0000";  //fillStyle 方法将其染成红色。
    cxt.fillRect(0,0,150,75);  //fillRect 方法规定了形状、位置和尺寸。
</script>

效果: 

 H5新增了哪些新特性


5.SVG绘图

        SVG(Scalable Vector Graphics)是用来绘制矢量图的HTML5标签。只要定义好XML属性就能够获得与其一致的图像元素。 

        使用SVG之前先将标签加入到HTML body中。就像其他的HTML标签一样,你可以为SVG标签为之添加ID属性。也可以为之添加css样式,例如“border-style:solid;border-width:2px;”。SVG标签跟其它的HTML标签有通用的属性。你可以用height=”100px” width=”200px” 为其添加高度和宽度。

案例代码:

<svg id="svgLineTutorial" style="border-style:solid;border-width:2px;" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg">
    <!-- 指定x1,y1,x2,y2值来代表起点终点坐标,在style属性中使用“stroke:Green;”为线条指定颜色。用stroke-width:2为线条设置宽度 -->
    <line x1="10" y1="20" x2="100" y2="200" style="stroke:Green;stroke-width:2"/>
    <!-- 圆的中心cx="55" cy="55",半径r="50",fill="#219E3E"填充颜色,stroke="#17301D" stroke-width="2"线条颜色与宽度 -->
    <circle id="myCircle" cx="55" cy="55" r="50" fill="#219E3E" stroke="#17301D" stroke-width="2" />
</svg>

效果: 

H5新增了哪些新特性


6.地理位置定位(Geolocation API )

        地理位置(Geolocation)是HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用,使得开发人员不用借助其他软件就能轻松实现位置查找,地图应用,导航等功能,具有划时代的意义。

我们使用getCurrentPosition(success(position),error(err),options)方法来获取当前用户的地理位置

    success(position)回调函数是在获取到地理信息时调用的,其中的position参数是一个对象包括:
          latitude(纬度)
         longitude(经度)
         altitude(海拔高度)
         accuracy(纬度和经度的精度,以米为单位)
         latitudeAccuracy(海拔高度的精度,以米为单位)
         heading(设备的前进方向),speed(设备的前进速度以单位m/s)
         timestamp(获取位置的时间)。
   error(err)回电函数是在获取地理位置失败时调用的,其中err参数有俩个属性:
          code和message,code{1:表示用户拒绝了定位服务,2:获取不到位置信息,3:获取信息超时错误},message是字符串,表示错误信息。
   opations是一些可选属性的列表包括: 
          enableHighAccuracy(是否要求高精度的地理位置信息),值为true或false。
         timeout(对地理信息获取操作做一个超时限制,如果超时,则返回错误),值为数字,单位为毫秒。
         maximumAge(对地理位置信息进行缓存的有效时间做一个限制),值为数字,单位为毫秒。

直接上代码……

<script>
  //判断浏览器是否支持Geolocation API
  if ('geolocation' in navigator) {
    //调用navigator.geolocation.getCurrentPosition
    navigator.geolocation.getCurrentPosition(successCB, errorCB,{
      // 指示浏览器获取高精度的位置,默认为false
      enableHighAccuracy: true,
      // 指定获取地理位置的超时时间,默认不限时,单位为毫秒
      timeout: 5000,
      // 最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置。
      maximumAge: 3000
    })
  } else {
    alert('不支持geolocation')
  }
  //成功时的回调函数
  function successCB(res) {
    console.log('维度' + res.coords.latitude);   //维度39.8218870257394
    console.log('经度' + res.coords.longitude);  //经度116.28083042845932
  } 
  //失败时的回调函数
  function errorCB(res) {
    console.log(res)
  }
</script>

7.拖放API

 HTML5 为拖放行为提供了Drag & Drop API,Drag代表拖动,Drop代表放下。主要事件如下,在使用时绑定相应的事件即可。

//事件类型
/*
//被拖动对象可以出发的事件
     dragstart:拖动开始事件。(拖拽开始)
     drag:从dragstart开始到dragend结束前,在拖动时不断出现。(拖拽事件)
     dragend:拖动结束事件。(拖拽结束)

//拖动到的目标对象可以触发的事件
     dragenter:拖到当前元素区域内的事件。(拖拽进入)
     dragover:拖到当前元素的区域事件,该事件在拖动到过程中不断的触发。(悬浮事件)
     dragleave:拖出当前元素区域事件。(拖拽离开)
     drop:当前元素区域停止拖拽的事件。ps:drop往往发生在dropend事件前(丢弃事件)
*/

注意:当使用丢弃事件(drop)时,需要在dragover中调用e.preventDefault();才能触发drop 。


8.Web Worker

web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。

主线程可以用new Worker(“worker.js”)的方式创建子线程;同时通过worker.onmessage = e => {console.log(e.data)}的方式监听子线程传回的值;子线程有一个全局变量self,相当于window,通过self.postMessage(result)的方式将信息传送到主线程

案例代码:

worker.js文件

//worker.js
var i=0;
function timedCount()
{
    i=i+1;
    postMessage(i);
    setTimeout("timedCount()",500);
}
timedCount();

worker.html文件,在这个文件文件中使用Web Worker 模拟创建一个新的线程 

<html>
  <p>计数: <output id="result"></output></p>
  <button onclick="startWorker()">开始工作</button> 
  <button onclick="stopWorker()">停止工作</button>
</html>
<script>
  var w;
 function startWorker() {
     if(typeof(Worker) !== "undefined") {
         if(typeof(w) == "undefined") {
             w = new Worker("./demo_workers.js");
         }
         w.onmessage = function(event) {
             document.getElementById("result").innerHTML = event.data;
         };
     } else {
         document.getElementById("result").innerHTML = "抱歉,你的浏览器不支持 Web Workers...";
     }
 }
  
 function stopWorker() 
 { 
     w.terminate();
     w = undefined;
 }
</script>

 【注意】在测试时如果报错可以查看此文章,或许可以帮到你哦~Uncaught DOMException: Failed to construct ‘Worker‘报错怎么解决!_前端小学弟~的博客-CSDN博客Uncaught DOMException: Failed to construct ‘Worker’报错怎么解决!https://blog.csdn.net/weixin_45453514/article/details/120215169


9.Web Storage

Web Storage提供了两种API:sessionStorage(会话存储)和locaStorage(永久存储)

  • 存储大小一般都是5MB
  • 存储位置:都保存在客户端,不与服务器进行交互通信
  • 存储内容类型:locaStorage和sessionStorage都只能存储字符串类型,对于复杂的对象可以使用JSON对象的stringify和parse来处理。
  • sessionStorage当浏览器页面关闭时,数据消失。
  • 和locaStorage数据永久保存在客户端本地,即使页面关闭数据也不会消失,下次打开可以继续使用。

10.Web Socket

WebSocket协议本质上是一个基于TCP的协议,WebSocket使得客户端和服务器之间的数据交换变得更加简单,当获取WebSocket连接之后,可以通过send()方法来向服务器发送数据,通过onmessage事件来接受服务器返回的数据。


总结

本章记录了H5新的一些比较常用的特性,有些内容没有深入记录,累了,累了,后续有时间会单独进行记录,尽情期待呦…

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/10750.html

(0)

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

关注微信