h5新元素列表
一、<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>
我随便把后面那个去掉了,然后我们看效果: