H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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);

  新的多媒体标签

video  audio
source  embed
 track  

代码示例:

<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删除/废弃不能用的元素

删除的元素     

被以下替代

 

<acronym> 首字母缩写

 

<abbr>

 

<applet>

 

<object>

 

<basefont> 页面上默认字体颜色和字号

 

CSS样式

 

<big> 

 

CSS样式

 

<center> 文本水平居中

 

CSS样式

 

<dir> 目录列表

 

CSS样式

 

<font> 字体外观,尺寸,颜色

 
 

<frame> 定义子窗口

 
 

<frameset> 定义框架集

 
 

<noframes> 向浏览器显示无法处理框架的提示文本,位于frameset元素中

 
 

<strike> 文本添加删除线

 

CSS样式,<s>或<del>

 

<tt> 定义打字机文本

 

CSS样式

文章内容为个人综合总结,仅供参考,内容不全,请谅解~

本文地址:H5W3 » HTML5的新特性有哪些!

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址