投稿 资料上传 搜索
您现在的位置是: 首页 > 文章 > 正文

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样式


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

转载于:

文章标签:
阿里云服务器采购季
给作者打赏,鼓励TA抓紧创作!
评论