HTML5新特性总结

最新推荐文章于 2024-08-07 17:06:12 发布

Pulseum

最新推荐文章于 2024-08-07 17:06:12 发布

阅读量699

点赞数 1

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/qq_53472371/article/details/121881111

版权

这篇博客详细介绍了HTML5的新特性，包括新元素如canvas、video、audio、drag and drop、mathml等，以及新表单控件和输入类型。HTML5旨在提升在移动设备上的多媒体支持，各浏览器对HTML5特性的支持情况也进行了说明。

摘要由CSDN通过智能技术生成

HTML5 新特性（新增的语义化标签、对于表单增强的一些标签、新增的API，比如本地存储）

HTML5

HTML5的设计目的是为了在移动设备上支持多媒体。

HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

HTML5 浏览器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
001
IE9 以下版本浏览器兼容HTML5的方法，使用本站的静态资源的html5shiv包：

<!--[if lt IE 9]>
    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

载入后，初始化新标签的CSS：（HTML5 定了 8 个新的 HTML 语义（semantic）元素。所有这些元素都是块级元素。为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block）

/*html5*/
article,aside,dialog,footer,header,section,nav,figure,menu{
   display:block}

HTML5新元素

< canvas> 新元素：

标签	描述
< canvas>	标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

新多媒体元素：

标签	描述
< audio>	定义音频内容
< video>	定义视频（video 或者 movie）
< source>	定义多媒体资源 < video> 和 < audio>
< embed>	定义嵌入的内容，比如插件。
< track>	为诸如 < video> 和 < audio> 元素之类的媒介规定外部文本轨道。

新表单元素：

标签	描述
< datalist>	定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
< keygen>	规定用于表单的密钥对生成器字段。
< output>	定义不同类型的输出，比如脚本的输出。

新的语义和结构元素：

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

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

已移除的元素：

以下的 HTML 4.01 元素在HTML5中已经被删除：

< acronym>
< applet>
< basefont>
< big>
< center>
< dir>
< font>
< frame>
< frameset>
< noframes>
< strike>
< tt>

HTML5 Canvas

< canvas> 标签定义图形，比如图表和其他图像，必须使用脚本来绘制图形。

HTML5 < canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript) 来完成.
< canvas> 标签只是图形容器，必须使用脚本来绘制图形。
你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

浏览器支持

表格中的数字表示支持 < canvas> 元素的第一个浏览器版本号。
001

创建一个画布（Canvas）

一个画布在网页中是一个矩形框，通过 < canvas> 元素来绘制。

注意: 默认情况下 < canvas> 元素没有边框和内容。
< canvas>简单实例如下:

<canvas id="myCanvas" width="200" height="100"></canvas>

注意： 标签通常需要指定一个id属性 (脚本中经常引用)，width 和 height 属性定义的画布的大小。
提示： 我们可以在HTML页面中使用多个元素。

使用 style 属性来添加边框：

  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
    您的浏览器不支持 HTML5 canvas 标签。
  </canvas>

效果：
002

使用 JavaScript 来绘制图像

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

实例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
    您的浏览器不支持 HTML5 canvas 标签。
  </canvas>

  <script>

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

  </script>

</body>

</html>

实例解析：
003

画线、画圆、写字、渐变效果

代码笔记：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
    您的浏览器不支持 HTML5 canvas 标签。
  </canvas>

  <script>

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");

    // 画线：
    // 在Canvas上画线，我们将使用以下两种方法：
    // 1、moveTo(x,y) 定义线条开始坐标
    // 2、lineTo(x,y) 定义线条结束坐标
    // 绘制线条我们必须使用到 "ink" 的方法，就像stroke()。
    ctx.moveTo(0, 0);
    ctx.lineTo(200, 100);
    ctx.stroke();

    // 画圆：
    // 在canvas中绘制圆形, 我们将使用以下方法:
    // arc(x,y,r,start,stop)
    // 实际上我们在绘制圆形时使用了 "ink" 的方法, 比如 stroke() 或者 fill()。
    ctx.beginPath();
    ctx.arc(95, 50, 40, 0, 2 * Math.PI);
    ctx.stroke();

    // 写字：
    // 使用 canvas 绘制文本，重要的属性和方法如下：
    // font - 定义字体
    // fillText(text,x,y) - 在 canvas 上绘制实心的文本
    // strokeText(text,x,y) - 在 canvas 上绘制空心的文本
    // 1) 实心  使用 fillText():
    ctx.font = "30px Arial";
    ctx.fillText("Hello World", 10, 50);
    // 2) 空心  使用 strokeText():
    ctx.font = "30px Arial";
    ctx.strokeText