HTML5新增

最新推荐文章于 2023-07-18 21:59:07 发布

门门men

最新推荐文章于 2023-07-18 21:59:07 发布

阅读量144

点赞数 1

分类专栏： HTML5

本文链接：https://blog.csdn.net/Menqq/article/details/115366006

版权

HTML5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

语义化标签

语义化标签 占HTML5 10分之一都不到它里面大量提供了比语义化标签更强大的功能—音视频的处理技巧；

header标签包含引导和导航等，通常包含h1~h6、搜索框、logo等。
footer标签一般配合address标签(显示地址)，包含作者信息、相关链接等。
nav标签一般包含多个a标签，构建导航组件。
aside标签主要装载广告、侧边栏。
article标签包含文章，一般内嵌header、footer、h1、p标签。
section标签可以用在以上任一一个标签中划分组件。
hgroup顾名思义是h1~h6的集合。

新的表单元素

              <input><textarea><select><option>....

               <datalist>：数据列表，为input提供输入建议列表

               <progress>：进度条，展示连接/下载进度

               <meter>：刻度尺/度量衡，描述数据所处的阶段，红色(危险)=>黄色(警告)=>绿色(优秀)

               <output>：输出内容，语义上表示此处的数据是经过计算而输出得到的

整体来说，这些标签就是div标签的语义化转化，过去我们曾用div来包裹某个块或者说组件，现在h5使用这些标签实现语义化，有利于代码可读性和SEO。语义元素在IE6-8的兼容可以使用

    document.createElement('header');
    document.createElement('nav');

音视频的处理技巧

音视频的处理技巧（audio音频/video视频）有很长一段时间国内和国外的话很多大神都认为HTML5本次升级最大亮点就是它的audio音频/video视频，新媒体解决方案代替了它的flash解决方案，这就是HTML5里面最闪闪发光的；

视频播放：<video src=""><video>

       查看视频的所有属性、方法、事件：console.log(videoBirds);

       音频播放：<audio src=""></audio>

       查看视频的所有属性、方法、事件：console.log(bgMusic);

WEB中可用的绘图技术：

Canvas绘图：H5原生技术，基于网页画布绘制2D位图绘图技术，善于表现细腻颜色
SVG绘图：H5借鉴技术，基于SVG绘图空间绘制2D矢量图绘图技术，缩放不会失真
WebGL绘图：尚不是H5标准技术，基于HTML5 Canvas提供硬件3D加速渲染；有一个非常强大3D扩展库：three.js

SVG绘图

Scalable Vector Graphic，可缩放向量图

在H5标准之前的使用方法：SVG标签不能直接书写在网页中，只能编写在独立的XML文档中；

网页中使用<img src="x.svg">进行嵌入

纳入H5标准后的使用方法：SVG标签可以直接书写在网页中。

Canvas与SVG的不同：

Canvas是位图；SVG是矢量图
Canvas是JS绘图技术(不是DOM元素)；SVG是标签绘图技术(是DOM元素)
Canvas内容不能使用CSS；SVG内容可以使用CSS；
Canvas内容不方便绑定事件处理；SVG内容方便进行事件绑定

常用的SVG图形：

矩形

          <rect width="100" height="50" x="400" y="350" fill="#f0f" fill-opacity="0.3" stroke="#00f" stroke-width="6" stroke-opacity=".3"></rect>

圆形

<circle r="100" cx="400" cy="300" fill="#f0f" fill-opacity="0.4" stroke="#00f" stroke-width="6" stroke-opacity=".4"></circle>

椭圆

<ellipse rx="100" ry="50" cx="400" cy="350" fill="#f0f" fill-opacity=".4" stroke="#00f" stroke-width="6" stroke-opacity=".4"></ellipse>

直线（没有fill只有stroke）

 <line x1="45" y1="350" x2="450" y2="350" stroke="#f00" stroke-width="4px" stroke-opacity=".4"></line>

折线（fill必须设置透明/stroke必须手工指定）

<polyline points="150,200  250,100  350,300  450,50" stroke="#00f" stroke-width="6" stroke-opacity=".4" fill="transparent"></polyline>

多边形

 <polygon points="100,150 100,300  400,300  400,150  250,220" fill="#f0f" fill-opacity=".4" stroke="#00f" stroke-width="6" stroke-opacity=".4"></polygon>

文本

 <text alignment-baseline="before-edge" font-size="40" fill="#f0f" stroke="#00f">达内科技2018ajgy</text>

图像

<image xlink:href="img/p3.png" x="400" y="200" width="100" height="200"></image>

处理图片图形

对于处理图片图形它也提供了一些操作，通过canvas（一种JS绘制图形的方式）/webGL（一种3D绘制图形的方式）来完成图形的一个渲染，canvas和webGL现在在可视化领域里运用的较多，这也是它的一个大亮点；

使用Canvas的步骤：

     <canvas id="c2" width="400" height="300"></canvas>

     Canvas自身是一个300*150的inline-block元素；
     
     Canvas画布尺寸不能使用CSS设置

绘制矩形

         ctx.fillStyle = '#000'                  填充颜色/渐变色对象

         ctx.strokeStyle = '#000'           描边颜色/渐变色对象

         ctx.lineWidth = 1                      描边线宽度

         ctx.fillRect(x, y, w, h)：              填充矩形

         ctx.strokeRect(x, y, w, h)：       描边矩形

         ctx.clearRect(x, y, w, h)：          描边矩形

绘制文本

         ctx.font = '10px sans-serif'    

         ctx.textBaseline = 'alphabetic/top/bottom'

         ctx.fillStyle = '#000'                 

         ctx.strokeStyle = '#000'

         ctx.fillText(txt, x, y)                    填充文本

         ctx.strokeText(txt, x, y)             描边文本

         ctx.measureText(txt).width     测量文本基于当前字体设置的宽度

绘制图像

         ctx.drawImage(img, x, y)         绘制图像(原始尺寸)

         ctx.drawImage(img, x, y, w, h) 绘制图像(指定尺寸)

绘图上下文变形和状态保持

         ctx.rotate()                                 图像旋转

         ctx.translate()                            图像平移

         ctx.scale()                                   图像缩放

而说HTML5是一个庞大的规范其实也对，也对；

Histoy API

Histoy API，vue和react做单页面应用的话一定会用到路由的概念，路由概念有分为histoy路由和hash路由，Histoy API 也是HTML5里常用到的东西，可能平时接触的比较少但是我们平时用到的东西它的核心原理还是基于Histoy API来的；

本地存储

h5提供了sessionStorage、localStorage和indexedDB加强本地存储。使用之前应该先判断支持情况：

   if(window.sessionStorage){
       //浏览器支持sessionStorage
   }
   if(window.localStorage){
       //浏览器支持localStorage
   }

localStorage和sessionStorage的区别在于sessionStorage基于会话，关闭浏览器之后存储消失。localStorage在各浏览器中上限不同，最低的是2.6MB, 所以开发上限为2.6MB, 当然这比cookie强太多，如果还是不够的话只能借助indexedDB, indexedDB上限是250MB。
localStorage和cookie另一个区别是没有过期时间，不过这个可以在localStorage中加一个时间字段轻松解决这个问题。
存取localStorage可能遇到的坑是跨域问题，因为localStorage是域内安全，也就是同一个域才能对localStorage进行存储，可以通过postMessage来解决。以下是它的常用应用场景

    var userData = {
        name : 'sysuzhyupeng',
        age: 24
    }
    localStorage.setItem('userDate', JSON.stringify(userData));
    var newUserData = JSON.parse(localStorage.getItem('userData'));

浏览器提供了storage事件来监听存储：

  window.addEventListener('storage', showStorageEvent, true)

requestAnimationFrame

requestAnimationFrame：实现动画动画的方式有很多css3动画是首选项，除了css3动画我们还可以用JS里面的，之前用到的JS实现动画都是定时器动画，定时器动画它存在一个丢帧失帧的问题，帧速率跟页面当中最终渲染的速率可能不一样，导致动画的卡顿，动画的不良好的一个连贯性等问题；
flash动画已经完全告别了，HTML5给提供了requestAnimationFrame这是一个可以跟屏幕的赫兹比例随时保持一致的一种动画方案，这种方案实现的动画比定时器动画还要流畅一点，requestAnimationFrame还是比较常用的，很多动画引擎，还有JS里面实现动画的类库和插件他们里面大量应用的就是requestAnimationFrame来完成的；

地理位置

地理位置：HTML5里面做移动端开发的时候我们经常有一种需求，打开H5页面在页面中调用一个第三方的腾讯地图百度地图或高德地图，掉完地图后我们想定位到当前地图的某个位置，或者说我们想查看当前周边又什么东西，此时我们需要传给地图.API一个经度和纬度，H5提供了相关的API可以获取相关的经度纬度以及经轮度和相关信息，来进行相关操作，除此之外在移动端里面H5还提供了相关API来检测出横竖屏，H5还提供了一些其它操作检测手机内部硬件和软件的一些接口，调取传感器实现摇一摇，调取重力感应器实现一些相关的操作；

h5提供了Geolocation API访问地理位置，即通过window.navigator.geolocation来实现访问。这个对象有三个方法：

    getCurrentPosition()
    watchPosition()
    clearWatch

页面第一次使用这个api需要获得用户许可, watchPosition可以对位置变化事件进行监听。

window.navigator.geolocation : {
                             watchPosition(){},

                             clearWatch(){},

                             getCurrentPosition(function(pos){
                                     '定位成功'

                                     定位时间：pos.timestamp

                                     维度：pos.coords.latitude

                                     经度：pos.coords.longitude

                                     海拔：pos.coords.altitude

                                     速度：pos.coods.speed

                             }, function(err){
                                     '定位失败'

                             }){},

                    }

拖放API

H5之前没有拖放API，可以使用“鼠标按下 + 鼠标移动”两个事件来模拟用户拖动事件。

H5之后专门提供了七个鼠标拖动相关事件：

拖动的源对象(`source`)可能触发的事件：

dragstart：拖动开始

drag：拖动中

dragend：拖动结束

拖动的目标对象(`target`)可能触发的事件：

dragenter：拖动进入

dragover：拖动悬停

drop：松手释放

dragleave：拖动离开

源对象：event.dataTransfer.setData(key, value)

目标对象：var value = event.dataTransfer.getData(key)

网络层的新的通讯解决方案

H5还提供了一些关于网络层的新的通讯解决方案：web scoket也就是所谓的 scoket IO, scoket IO是现在为止实现直播类型或者是实时沟通类型的非常有利的也是非常好的解决方案。虽然也有些毛病但是相比较来说还是最好的一个方案；

HTML5不仅仅是一个标签，主要的是在于上面说到的方面。

门门men

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5新增

语义化标签语义化标签占HTML5 10分之一都不到它里面大量提供了比语义化标签更强大的功能—音视频的处理技巧；音视频的处理技巧音视频的处理技巧（audio音频/video视频）有很长一段时间国内和国外的话很多大神都认为HTML5本次升级最大亮点就是它的audio音频/video视频，新媒体解决方案代替了它的flash解决方案，这就是HTML5里面最闪闪发光的；处理图片图形对于处理图片图形它也提供了一些操作，通过canvas（一种JS绘制图形的方式）/webGL（一种3D绘制图形的方式）来完
复制链接

扫一扫