html5新标签使用-白红宇

html5新标签使用

阅读量：6503 次

发布时间：2019-06-24

本文共 7482 字，大约阅读时间需要 24 分钟。

HTML 5 视频标签<video>

Your browser does not support the video tag.

</video>

上面的例子使用一个Ogg文件，适用于Firefox Opera以及Chrome浏览器。

要确保适用于Safari浏览器，视频文件必须是MPEG4类型。

video元素允许多个source元素。source元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式

Internet Explorer 8不支持video元素。在IE 9中，将提供对使用MPEG4的video元素的支持。、

<video>标签的属性

autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。

controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。

height pixels 设置视频播放器的高度。

loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。

preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay" ，则忽略该属性。

src url 要播放的视频的URL。

width pixels 设置视频播放器的宽度。

HTML 5<audio> 标签

Your browser does not support the audio tag.

</audio>

Your browser does not support the audio tag.

</audio>

上面的例子使用一个Ogg文件，适用于Firefox、Opera以及Chrome浏览器。

要确保适用于Safari浏览器，音频文件必须是MP3或Wav类型。

audio元素允许多个source元素。source元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式：

Internet Explorer 8不支持audio元素。在IE 9中，将提供对audio元素的支持。

<audio>标签的属性

autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。

controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。

loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。

preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay" ，则忽略该属性。

src url 要播放的视频的URL。

HTML 5 <source> 标签

定义和用法

<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。

实例

拥有两份源文件的音频播放器。浏览器应该选择它所支持的文件（如果有的话）：

浏览器支持

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <source> 标签。

注释：Internet Explorer 8 以及更早的版本不支持 <source> 标签。

属性

new : HTML5 中的新属性。

属性	值	描述
	media query	规定媒体资源的类型。
	url	规定媒体文件的 URL。
	numeric value	规定媒体资源的 MIME 类型。

HTML 5 Canvas 标签

HTML 5的canvas元素使用JavaScript在网页上绘制图像

JavaScript使用id来寻找canvas元素：

var c=document.getElementById("myCanvas");

然后，创建context对象：

var cxt=c.getContext("2d");

getContext("2d")对象是内建的HTML 5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方

法。

下面的两行代码绘制一个红色的矩形：

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

fillStyle方法将其染成红色，fillRect方法规定了形状、位置和尺寸。

绘制矩形

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.fillRect(0,0,150,75);

</script>

绘制矩形

Your browser does not support the canvas element.

</canvas>

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.moveTo(10,10);

cxt.lineTo(150,50);

cxt.lineTo(10,50);

cxt.stroke();

</script>

绘制圆形

Your browser does not support the canvas element.

</canvas>

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.beginPath();

cxt.arc(70,18,15,0,

Math.PI*2,true);

cxt.closePath();

cxt.fill();

</script>

颜色渐变

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

var grd=cxt.createLinearGradient(0,0,175,50);

grd.addColorStop(0,"#FF0000");

grd.addColorStop(1,"#00FF00");

cxt.fillStyle=grd;

cxt.fillRect(0,0,175,50);

</script>

把一幅图像放置到画布上

Your browser does not support the canvas element.

</canvas>

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

var img=new Image()

img.src="flower.png"

cxt.drawImage(img,0,0);

</script>

HTML 5  标签

注释：<embed> 标签必须有 src 属性。

提示：您无法在开始标签和结束标签之间写文本，来说明旧式的浏览器不支持该标签，就像 <audio> 和 <video>。

属性

属性	值	描述
height	pixels	设置嵌入内容的高度。
src	url	嵌入内容的 URL。
type	type	定义嵌入内容的类型。
width	pixels	设置嵌入内容的宽度。

HTML 5 <keygen> 标签

定义和用法

<keygen> 标签规定用于表单的密钥对生成器字段。

当提交表单时，私钥存储在本地，公钥发送到服务器。

带有 keygen 字段的表单：


     
      Username: 
      Encryption:

浏览器支持

所有主流浏览器都支持 <keygen> 标签，除了 Internet Explorer 和 Safari。

HTML 4.01 与 HTML 5 之间的差异

keygen 是 HTML 中的新元素。

new : HTML5 中的新属性。

属性	值	描述
autofocus	disabled	使 keygen 字段在页面加载时获得焦点。
challenge	challenge	如果使用，则将 keygen 的值设置为在提交时询问。
disabled	disabled	禁用 keytag 字段。
form	formname	定义该 keygen 字段所属的一个或多个表单。
keytype	rsa	定义 keytype。rsa 生成 RSA 密钥。
name	fieldname	定义 keygen 元素的唯一名称。 name 属性用于在提交表单时搜集字段的值。

HTML 5 <meter> 标签

<!DOCTYPE html>

<html>

<body>

60%

</body>

</html>

提示和注释

注释：必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义。

属性

属性	值	描述
high	number	定义度量的值位于哪个点，被界定为高的值。
low	number	定义度量的值位于哪个点，被界定为低的值。
max	number	定义最大值。默认值是 1。
min	number	定义最小值。默认值是 0。
optimum	number	定义什么样的度量值是最佳的值。如果该值高于 "high" 属性，则意味着值越高越好。如果该值低于 "low" 属性的值，则意味着值越低越好。
value	number	定义度量的值。

HTML 5 <progress> 标签

<progress> 标签定义运行中的进度（进程）。

可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进度。

<!DOCTYPE html>

<html>

<body>

下载进度：

</progress>

<p><b>注释：</b>Internet Explorer 9 以及更早的版本不支持 <progress> 标签。</p>

</body>

</html>

浏览器兼容

Internet Explorer 10, Firefox, Opera, Chrome 以及 Safari 6 支持 <progress> 标签。

注释：Internet Explorer 9 以及更早的版本不支持 <progress> 标签。

提示和注释

提示：请使用 <progress> 标签来显示下载的进度。

属性

属性	值	描述
max	number	定义完成的值。
value	number	定义进程的当前值。

HTML 5  标签

<ruby> 标签定义 ruby 注释（中文注音或字符）。

在东亚使用，显示的是东亚字符的发音。

与 <ruby> 以及 <rt> 标签一同使用：

ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。

实例

一个 ruby 注释：

漢 (ㄏㄢˋ)

提示和注释

提示：支持 "ruby" 元素的浏览器不会显示 "rp" 元素的内容。

HTML 5 <small> 标签

定义和用法

<small> 标签将旁注 (side comments) 呈现为小型文本。

对于由 em 元素强调过的或由 strong 元素标记为重要的文本，small 元素不会取消对文本的强调，也不会降低这些文本的重要性。

定义列表项中的注释（小型文本）：

浏览器支持

所有主流浏览器均支持 <small> 标签。

HTML 4.01 与 HTML5 之间的差异

实际运用时没有区别。在 HTML 4.01 中，small 元素显示为更小的文本。在 HTML5 中，small 元素定义旁注信息，并显示为更小的文本。

HTML5 <mark> 标签

定义和用法

<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。

<!DOCTYPE HTML>

<html>

<STYLE>

mark{}

</STYLE>

<body>

<p>Do not forget to buy <mark>milk</mark> today.</p>

</body>

</html>

浏览器兼容

Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <mark> 标签。

注释：Internet Explorer 8 以及更早的版本不支持 <mark> 标签。

HTML 5<details> 标签

定义和用法

<details> 标签用于描述文档或文档某个部分的细节。


             
              Copyright 2011.
              All pages and graphics on this web site are the property of W3School.
             
 与  配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。  标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。

浏览器兼容

目前只有 Chrome 和 Safari 6 支持 
             
               标签。

HTML5 <summary> 标签

定义和用法

<summary> 标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。

浏览器支持

只有 Chrome 以及 Safari 6 支持 <summary> 标签。

提示和注释

提示：请与一起使用。标题是可见的，当用户点击标题时会显示出详细信息。

注释："summary" 元素应该是 "details" 元素的第一个子元素。

火狐不支持显示

谷歌支持显示

点击显示

HTML5 <time> 标签

实例

如何定义时间和日期：

我们在每天早上 9:00 开始营业。

我在情人节有个约会。

浏览器支持

目前所有主流浏览器都不支持 <time> 标签。

 标签不会在任何浏览器中呈现任何特殊效果

定义和用法

<time> 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。

该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。

属性

new : HTML5 中的新属性。

属性	值	描述
	datetime	规定日期 / 时间。否则，由元素的内容给定日期 / 时间。
	pubdate	指示 <time> 元素中的日期 / 时间是文档（或 <article> 元素）的发布日期。