本文主要是介绍Html5 中的新特性，及每种标签的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!DOCTYPE html> <!-- 该标签告知浏览器文档所使用的 HTML 规范。 -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="Js/jquery-1.8.0.js"></script><script type="text/javascript">$(function () {// canvas 绘图var c = document.getElementById("myCanvas");var cxt = c.getContext("2d"); //getContext("2d") 对象是内建的 HTML 5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。//矩形cxt.fillStyle = "burlywood"; //颜色//cxt.fillRect(10, 10, 200, 100); //形状、位置和尺寸//圆形cxt.beginPath();cxt.arc(150, 50, 30, 20.45, Math.PI * 2, true); // 横向坐标，纵向坐标，圆的大小, 数字1-12时圆是缺失的（13以上为整圆）, 单数是半圆?, 是否填充颜色cxt.arc(150, 160, 45, 9.4, Math.PI * 2, true);cxt.arc(195, 130, 19, 8.3, Math.PI * 1, true);cxt.closePath();cxt.fill();//在canvas上画线条cxt.moveTo(10, 80);cxt.lineTo(100, 110);cxt.lineTo(20, 140);cxt.stroke();var c1 = document.getElementById("myCanvas1");var cxt1 = c1.getContext("2d");cxt1.beginPath();cxt1.fillStyle = "green"; //颜色//cxt1.fillRect(10, 0, 200, 100); //形状、位置和尺寸cxt1.arc(40, 50, 30, 10, Math.PI * 1, true);cxt1.arc(110, 50, 25, 10, Math.PI * 1, true);cxt1.arc(170, 50, 20, 10, Math.PI * 1, true);cxt1.arc(220, 50, 15, 10, Math.PI * 1, true);cxt1.arc(255, 50, 10, 10, Math.PI * 1, true);cxt1.arc(280, 50, 5, 10, Math.PI * 1, true);cxt1.closePath();cxt1.fill();//渐变色var c2 = document.getElementById("myCanvas2");var cxt2 = c2.getContext("2d");var grd = cxt2.createLinearGradient(0, 0, 175, 50);grd.addColorStop(0, "#FF00ff");grd.addColorStop(1, "#00ff00");cxt2.fillStyle = grd;cxt2.fillRect(10, 0, 185, 50);//图像var c3 = document.getElementById("myCanvas3");var cxt3 = c3.getContext("2d");var img = new Image();img.src = "images/合作伙伴1200_13.gif"//cxt3.drawImage(img, 0, 0);img.onload = function () { cxt3.drawImage(img, 0, 0, 300, 150); }});//鼠标悬停看坐标function cnvs_getCoordinates(e) {x = e.clientX;y = e.clientY;document.getElementById("xycoordinates").innerHTML = "Coordinates: (" + x + "," + y + ")";}function cnvs_clearCoordinates() {document.getElementById("xycoordinates").innerHTML = "";}</script>
</head>
<body><!-- HTML 5 中的新特性，以及每种标签的使用。 --><div style="width:49%;float:left;"><p><a href="" rel="icon">A标签定义超链接</a></p><p><!-- abbr 缩写 -->I am a Chinese, <abbr title="China">CHN</abbr> is my motherland</p><p><!-- acronym 首字母缩写 --><acronym title="World Wide Web">WWW</acronym></p><p><address>Written by W3School.com.cn<br /><a href="mailto:us@example.org">Email us</a><br />Address: Box 564, Disneyland<br />Phone: +12 34 56 78</address><br /><applet>HTML5 不支持 定义applet(小应用程序)</applet></p><p><!-- 用于地图热点可点区域 -->点击图片上的星球<img src="images/eg_planets.jpg" alt="Planets" usemap="#planetmap" /><map id="planetmap"><area shape="rect" coords="0,0,82,126" href="#" alt="Sun" οnclick="alert('Sun')" /><area shape="circle" coords="90,58,3" href="#" alt="Mercury" οnclick="alert('Mercury')" /><area shape="circle" coords="124,58,8" href="#" alt="Venus" οnclick="alert('Venus')" /></map></p><p><!-- bdo 控制文本方向 --><bdo dir="rtl">I am a Chinese</bdo> <bdo dir="auto">I am a 中国人</bdo></p><p><!-- <blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体 -->毛泽东说过：<blockquote>帝国主义都是纸老虎 ... 帝国主义都是纸老虎 ... </blockquote><blockquote>帝国主义都是纸老虎 ... </blockquote></p><p><button>OK按钮</button> <input type="button" value="确定按钮" /></p><p><cite>《好吗好的》</cite></p><p><!-- <code> 标签用于表示计算机源代码或者其他机器可以阅读的文本内容 --><code>var numA = $("#num_a").val();var numB = $("#num_b").val();$("#result").val(parseInt(numA) + parseInt(numB));</code></p><p><time>2016-12-27</time></p><article>文章</article></p><p><!-- 颜色选择器 --><input type="color" value="我是color"></p><p><!--HTML 5 视频 --><div><!-- source 元素可以链接不同的视频文件 --><video src="/i/movie.ogg" width="320" height="240" controls="controls"><source src="movie.ogg" type="video/ogg"><source src="/i/movie.mp4" type="video/mp4">Your browser does not support the video tag. //供不支持 video 元素的浏览器显示的</video></div></p><p><!--HTML 5 音频 --><div><!-- audio可播放音频文件或者音频流 src：输入文件名称（.MP3/.Wav） controls属性：添加播放、暂停和音量控件 --><audio src="song.ogg" controls="controls">Your browser does not support the audio tag. //此内容是供不支持audio元素的浏览器显示的</audio><br /><audio controls="controls"><!--<source src="/i/song.ogg" type="audio/ogg"><source src="/i/song.mp3" type="audio/mpeg">-->Your browser does not support the audio element.</audio></div></p><p><div style=" width:300px; height:auto; border:1px solid blue;"><!-- canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法 --><canvas id="myCanvas" width="300" height="220" style="border:1px solid #c3c3c3;"></canvas><br /><canvas id="myCanvas1" width="300" height="100" style="border:1px solid #c3c3c3;"></canvas><br /><canvas id="myCanvas2" width="300" height="80" style="border:1px solid #c3c3c3;"></canvas><br /><canvas id="myCanvas3" width="300" height="150" style="border:1px solid #c3c3c3;"></canvas></div></p><div style=""><p>把鼠标悬停在下面的矩形上可以看到坐标：</p><!-- onmousemove:当鼠标指针移动时运行脚本 --><div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid red;" οnmοusemοve="cnvs_getCoordinates(event)" οnmοuseοut=" cnvs_clearCoordinates()"></div><div id="xycoordinates"></div></div></div><div style="width:48%; float:right;"><p><table width="100%" border="1"><colgroup span="2" align="center"></colgroup><colgroup align="center" style="color:red;"><!-- col 元素为表格中的三个列规定了不同的对齐方式 --><col align="center" /><col align="center" /><col align="center" /></colgroup> <col style="color:blue" /><col span="2" style="color:yellow" /> <!-- <caption> 标签定义表格标题 --><caption>This is a caption 表格标题</caption><thead align="center"><tr><td>编号</td><td>姓名</td><td>性别</td><td>年龄</td></tr></thead> <!-- 表头1 --><tr><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th></tr> <!-- 表头2 --><tr><td>1</td><td>杜欢欢</td><td>女</td><td>20</td></tr><tr><td>2</td><td>吴默筹</td><td>女</td><td>24</td></tr><tr><td>3</td><td>孙俪</td><td>女</td><td>30</td></tr><tfoot>表格的脚注</tfoot></table></p><p><!-- type="command|checkbox|radio" --><command οnclick='alert("Hello,你好！")' type="radio">ClickMe!</p><p><label>现价：188元</label> <del>原价：199元</del> <s>促销价：168元</s> <!-- 加删除线的文本 -->> <strike style="color:red;">出厂价：88元</strike> <u>文本下划线</u></p><p><fieldset><!-- 把相关表单分组 --><legend>健康信息</legend>身高：<input type="text" />体重：<input type="text" /></fieldset></p><p><!-- figure 文档中插图的图像 --><figure><!-- "figcaption" 插图标题。 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。 --><figcaption>会员单位</figcaption><img src="images/合作伙伴1200_09_13.gif" width="350" height="234" /></figure><figure><!-- "figcaption" 插图标题。 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。 --><figcaption>授权证书</figcaption><img src="images/合作伙伴1200_09_10.gif" width="350" height="234" /></figure><figure><figcaption>PRC</figcaption><span>The People's Republic of China was born in 1949...</span></figure></p><p><kbd>键盘文本</kbd></p><p>Don't try so <mark>hard</mark>, the slowly</p><p><!-- 定义菜单列表 --><menu><li><input type="checkbox" />Red</li><li><input type="checkbox" />blue</li></menu></p><p><!-- <meter> 标签定义度量衡。仅用于已知最大和最小值的度量。 --><meter min="0" max="20" value="5">5</meter><br><meter value="4" max="100">2 out of 10</meter><br><meter value="30" max="100">30%</meter><br><meter value="3" min="0" max="10">3/10</meter><br><meter value="0.6">60%</meter></p><p><!-- optgroup 把下拉框中相关的选项组合在一起 --><select><optgroup label="Swedish Cars"><option value="volvo">Volvo</option><option value="saab">Saab</option></optgroup><optgroup label="German Cars"><option value="mercedes">Mercedes</option><option value="audi">Audi</option></optgroup></select></p><p><!-- <output>显示输出结果 --><form οninput="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></p><p><!-- progress 定义运行进度 --><progress value="35" max="100"></progress> 35%<br /><progress></progress></p><p><!-- <q> 添加引号 -->好吗好的<q>大冰</q></p><p><!-- ruby 注释是中文注音或字符。 <rt> 标签定义字符（中文注音或字符）的解释或发音。 --><ruby>我<rt>wo</rt>们<rt>men</rt>你<rt>ni</rt>们<rt>men</rt></ruby> <ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby></p><p><!-- small 小号文本 b加粗文本 q 引号 --><small><q>world</q></small> <b><q>world</q></b> <strong>你好！世界。</strong><br /><dfn> 标签可标记那些对特殊术语或短语的定义</dfn><br /><i>标签呈现斜体的文本</i><br /><em>emememememememeemeemmememememem</em></p><p><!-- <sub>文本下标 -->H<sub>2</sub>O<!-- <sup>文本上标 -->3<sup>3</sup>=27</p><p>我们在每天早上 <time>9:00</time> 开始营业。 <br /> 我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p><p><!-- <hgroup> 标签用于对网页或区段（section）的标题进行组合。 --><hgroup><h1>Welcome to my WWF</h1><h2>For a living planet</h2></hgroup><span>The rest of the content...</span></p><p><nav><a href="#">Home</a><a href="#">Previous</a><a href="#">Next</a></nav></p><p><!-- <section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分 --><section><h1>PRC</h1><span>The People's Republic of China was born in 1949...</span></section></p></div>
</body>
</html>
这篇关于Html5 中的新特性，及每种标签的使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
