1、HTML5 新元素

HTML5提供了新的元素来创建更好的页面结构：

  • <article>:  定义页面独立的内容区域。
  • <aside>:  定义页面的侧边栏内容。
  • <bdi>:  允许您设置一段文本，使其脱离其父元素的文本方向设置。
  • <command>:  定义命令按钮，比如单选按钮、复选框或按钮
  • <details>:  用于描述文档或文档某个部分的细节
  • <dialog>:  定义对话框，比如提示框
  • <summary>:  标签包含 details 元素的标题
  • <figure>:  规定独立的流内容（图像、图表、照片、代码等等）
  • <ficaption>:  定义 <figure> 元素的标题
  • <footer>:  定义 section 或 document 的页脚。
  • <header>:  定义了文档的头部区域
  • <mark>:  定义带有记号的文本。
  • <meter>:  定义度量衡。仅用于已知最大和最小值的度量。
  • <nav>:  定义导航链接的部分
  • <progress>:  定义任何类型的任务的进度。
  • <ruby>:  定义 ruby 注释（中文注音或字符）。
  • <rt>:  定义字符（中文注音或字符）的解释或发音
  • <rp>:  在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
  • <section>: 定义文档中的节（section、区段）。
  • <time>:  定义日期或时间。
  • <wbr>:  规定在文本中的何处适合添加换行符。

2、HTML5 Canvas

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

<canvas id="myCanvas" width="200" height="100"></canvas>
使用 JavaScript 来绘制图像

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

3、HTML5 拖放 

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

设置元素为可拖放

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

<img draggable="true">

拖动什么 - ondragstart 和 setData()

放到何处 - ondragover

进行放置 - ondrop

 
扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄