h5

语义化标签的意义：

 

利于网站的SEO；各大网站在抓取网页时，语义化标签更清楚的表达网站的逻辑与内容，搜索引擎更加友好，更利于解析上下文环境，抓取各个关键字的权重
方便其他设备的解析，比如屏幕阅读器、盲人阅读器、移动设备，能有意义的渲染网页，清晰的表达网页的上下文内容以及强调部分等
布局的语义化标签，会使得项目在没有css的情况下，页面也能呈现出更好的结构
代码的可读性与可维护性更强；比较以往的div布局来说，越来越多的语义化标签使得代码更加就见名之意的，带给开发者更好的体验。
HTML 5 中的语义化标签：

1. <header> 网页或section的头部
    <aside> 网页的侧边栏内容
    <nav> 定义页面的主要导航部分
    <article> 独立完整的内容模块，通常用在博客、论坛、新闻、评论等，区别于section这种分段的标签
    <section> 网页文档中的段、节，通常子元素包括标题：h1-h6
    <footer> 网页或section底部的内容，可能包括：作者或者版权信息等；

输入框提示字符

 input 标签的属性 placeholder    autofocus：自动获得输入焦点  required：输入框内容不能为空   pattern：输入框内容必须符合的正则表达式

与input配合使用可制作输入值的下拉列表，与select不同的是datalist即可下拉选择，也可以输入值，还有模糊匹配的功能

datalist

<input list="users"/>
<datalist id='users'>
    <option>Jamse</option>
    <option>Jack</option>
    <option>Mary</option>
</datalist>

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

  <meter>：刻度尺/度量衡，描述数据所处的阶段

video 视频 audio 音频

canvas绘图

（四）Canvas绘图         

          H5原生技术，基于网页画布2D位图绘图技术，善于表现细腻颜色，可用于统计图表、页面游戏、地图应用、网页特效等。

          使用Canvas的步骤：

     https://www.runoob.com/html/html5-canvas.html

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

         Canvas自身是一个300*150的inline-block元素；注意：Canvas画布尺寸不能使用CSS设置——会对整个图像进行扭曲！

         使用H5 Canvas API进行绘图：

             var ctx = c2.getContext('2d'); 

             //绘制矩形

             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     测量文本基于当前字体设置的宽度

             //绘制路径——概念上类似于PS中的钢笔工具

             ctx.beginPath()

             ctx.moveTo()

             ctx.lineTo()

             ctx.arc()

             ctx.rect()

             ctx.ellipse()

             ctx.closePath()

              -----------------------------

             ctx.stroke()                                基于现有路径进行描边

             ctx.fill()                                       基于现有路径进行填充

             ctx.clip()                                     基于现有路径进行裁切

             //绘制图像

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

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

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

             ctx.rotate()                                 图像旋转

             ctx.translate()                            图像平移

             ctx.scale()                                   图像缩放

              ------------------

             ctx.save()                                    绘图上下文的保存

             ctx.restore()                               绘图上下文的恢复

       2.Chart.js —— 了解

          简单且灵活的JS图表绘制工具库，基于Canvas实现。类似于的工具还有ECharts、FreeChart、FusionCharts.....

          官网：http://www.chartjs.org/

          基本使用方法：

             <canvas id="c3"></canvas>

             <script src="js/Chart.js"></script>

             <script>

                  new Chart(c13, {

                      type: 'bar/line/pie',

                       data: {

                            labels: ['','','',''],

                            datasets: [{

                                            label: '',

                                            data: [...]

                                   } ]

                       }

                   });

             </script>

地理定位 —— 了解

           通过浏览器获取当前用户的所在地理坐标，以实现“LBS服务”（Location Based Service），如实时导航、周边推荐。

           情形1：用户使用手机浏览器——可以根据内置GPS芯片读取数据

           情形2：用户使用PC浏览器——可以根据电脑的IP地址进行反向查询(需要很大的IP分配库)

                    window.navigator.geolocation : {

                             watchPosition(){},

                             clearWatch(){},

                             getCurrentPosition(function(pos){

                                     '定位成功'

                                     定位时间：pos.timestamp

                                     维度：pos.coords.latitude

                                     经度：pos.coords.longitude

                                     海拔：pos.coords.altitude

                                     速度：pos.coods.speed

                             }, function(err){

                                     '定位失败'

                             }){},

                    }

https://www.cnblogs.com/lijuntao/p/6439596.html 定位详细实现

（七）拖放API       

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

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

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

                    dragstart：拖动开始

                    drag：拖动中

                    dragend：拖动结束

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

                    dragenter：拖动进入

                    dragover：拖动悬停

                    drop：松手释放

                    dragleave：拖动离开

           注意：拖放API事件句柄中所有的事件对象都有一个dataTransfer属性（数据运输对象），用于在源对象和目标对象间传递数据。

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

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