HTML5新元素（测试了大部分浏览器可用的元素，部分标签有详细讲解）

一、<canvas>新元素

<!-- 
	<canvas>标签通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。
	<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
-->
<canvas id="canvas"></canvas>
<script type="text/javascript">
	let canvas = document.getElementById("canvas");
	let ctx = canvas.getContext('2d');
	ctx.fillStyle = "#FF0000";
	ctx.fillRect(0,0,100,100);
</script>

<canvas>标签需要用到js开发，所以依赖于js。

二、新多媒体元素

1.<audio>标签

<!-- 
	audio标签定义声音，支持三种格式mp3、wav、ogg 
	IE 8 或更早版本的 IE 浏览器不支持 <audio> 标签。
-->
<audio controls autoplay loop>
	<source src="music/RINGA LINGA  JP Ver..mp3">
	您的浏览器不支持 audio 元素。
</audio>

这个标签用于定义一个音频播放器。

2.<video>标签

<!-- 
	video标签定义视频，支持三种格式：mp4、webm、ogg
-->
<video width="320" height="180" controls>
	<source src="video/bandicam 2020-04-03 08-51-24-158.mp4"  type="video/mp4">
	您的浏览器不支持 HTML5 video 标签。
</video>

该标签用于定义一个视频播放器。

三、新表单元素

1.<datalist>标签

<!-- 
	<datalist> 标签规定了 <input> 元素可能的选项列表。
	<datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。
	请使用 <input> 元素的 list 属性来绑定 <datalist> 元素
-->
<form action="https://www.runoob.com/try/demo_source/demo-form.php" method="get">
	<input list="browsers" name="browser">
	<datalist id="browsers">
	  <option value="Internet Explorer">
	  <option value="Firefox">
	  <option value="Chrome">
	  <option value="Opera">
	  <option value="Safari">
	</datalist>
	<input type="submit">
</form>

该标签用于定义一个带有下拉列表的输入框，与<select>标签不同的是，该标签具有“自动完成”的效果。

2.<output>标签

<!-- <output> 标签作为计算结果输出显示(比如执行脚本的输出)。 -->
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
	<input type="range" id="a" value="50">100
	+<input type="number" id="b" value="50">
	=<output name="x" for="a b"></output>
</form>

该标签用于显示输出结果。

四、新的语义和结构元素

1.<wbr>标签（注意我wbr标签添加的位置）

<!-- 
	 wbr标签，主要用于英文单词的词中换行，ie不支持，注意没有</wbr>，一个单独的<wbr>就表示这个英文单词在此处换行
-->
<p>尝试缩小浏览器窗口，以下段落的英文单词会被分行：</p>
<p>x xx xxx xxxx xxxxx xxxxxx xxxxxxx xxxxxxxx xxxxxxxxx
 xxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxx
  xxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxx<wbr>aaaa<wbr>xxxx</p>
<p><b>注意：</b> IE 浏览器不支持 wbr 标签。</p>

效果展示：

这么展示估计有的同学还是不懂，这样吧，我现在把代码中<wbr>去掉一个看看：

<p>尝试缩小浏览器窗口，以下段落的英文单词会被分行：</p>
<p>x xx xxx xxxx xxxxx xxxxxx xxxxxxx xxxxxxxx xxxxxxxxx
 xxxxxxxxxx xxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxx
  xxxxxxxxxxxxxx xxxxxxxxxxxxxxx xxxxxxxx<wbr>aaaaxxxx</p>
<p><b>注意：</b> IE 浏览器不支持 wbr 标签。</p>

我随便把后面那个去掉了，然后我们看效果：