HTML5中新特性有哪些

这篇文章主要介绍HTML5中新特性有哪些，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

一、语义标签

HTML4 到HTML5语义化标签迁移

二、增强型表单

（1）新的input type

（ 2）新的表单元素<input><textarea><select><option>....
  <datalist>：数据列表，为input提供输入建议列表
  <progress>：进度条，展示连接/下载进度
  <meter>：刻度尺/度量衡，描述数据所处的阶段，红色(危险)=>黄色(警告)=>绿色(优秀)
  <output>：输出内容，语义上表示此处的数据是经过计算而输出得到的
 （3）表单元素的新属性
   通用属性：
   placeholder：占位提示文字
   mutiple：是否允许多个输入
   autofocus：自动获得输入焦点
   form：指定输入元素所从属的表单，可以实现输入框放在表单外部并能被提交的效果
   验证属性(了解一下)：
   required：输入框内容不能为空
   min：允许输入的数字最小值
   max：允许输入的数字最大值
   minlength：允许输入的字符串最小长度
   maxlength：允许输入的字符串最大长度
   pattern：输入框内容必须符合的正则表达式

三、视频和音频

   视频播放：<video src=""><video>
   查看视频的所有属性、方法、事件：console.log(videoBirds);
   音频播放：<audio src=""></audio>
   查看视频的所有属性、方法、事件：console.log(bgMusic);

  新的多媒体标签

代码示例：

<audio controls>
<!--source多配合audio video内部标签使用 -->
   <source src="horse.ogg" type="audio/ogg">
 你的浏览器不支持音频文件 
</audio> 

<track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
<!--主浏览器都不支持，track目前不用深究-->

<!--标签定义嵌入的内容，比如插件-->
<embed src="" />

四、Canvas绘图

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

   使用Canvas的步骤：

   <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()                               绘图上下文的恢复

  Chart.js 简介，推荐官网查询https://www.chartjs.org/  

五、SVG绘图

  Scalable Vector Graphic，可缩放向量图

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

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

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

  常用的SVG图形：

  (1)矩形

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

  (2)圆形

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

  (3)椭圆

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

  (4)直线（没有fill只有stroke）

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

  (5)折线（fill必须设置透明/stroke必须手动指定）

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

 (6)多边形

  <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>
 (7)文本

  <text alignment-baseline="before-edge" font-size="40" fill="#f0f" stroke="#00f">文本信息</text>

  (8)图像

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

SVG与Canvas区别：

（1）SVG适用于描述XML中的2D图形的语言

（2）Canvas随时随地绘制2D图形(使用JavaScript)

（3）SVG是基于XML的，这意味着每个元素在SVG DOM中都可用。你可以为每个元素添加JavaScript事件处理程序

（4）在SVG中，每个绘制的形状都会被记忆为一个对象。如果SVG对象的书香发生变化，浏览器可以自动重新渲染形状。

（5）Canvas是一像素一像素地渲染。在画布中，一旦图形绘制好了，就会被浏览器遗忘。如果你想改变某一个的位置，整个场景都需要重新绘制，包括可能已经被图形覆盖的任何对象。

六、新的HTML5的API

  (Application Programming Interface)--应用程序编程接口

  (1)HTML Geolocation 地理位置

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

  (2)HTML Drag & Drop拖放

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

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

  (3)HTML Local Storage 本地存储

  (4)HTML Application Cache 应用程序缓存

  (5)HTML Web Workers web工作者

  (6)HTNL SSE

七、浏览器的支持度

  现有浏览器都支持HTML5  。

八、HTML5删除/废弃不能用的元素

以上是“HTML5中新特性有哪些”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！