Html5 中的新特性，及每种标签的使用
2016-12-30 15:14
981 查看
<!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" onclick="alert('Sun')" />
<area shape="circle" coords="90,58,3" href="#" alt="Mercury" onclick="alert('Mercury')" />
<area shape="circle" coords="124,58,8" href="#" alt="Venus" onclick="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
4000
="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;" onmousemove="cnvs_getCoordinates(event)" onmouseout=" 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 onclick='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 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>
</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新标签的使用
- Html5新标签的使用
- HTML5新增标签<audio>简单的使用
- HTML5学习笔记 - 基本标签的使用
- 使用HTML5的语义标签
- HTML5中的Canvas标签使用收录
- HTML5学习(2) canvas标签的使用四
- ASP.NET MVC 学习 --- 第八课(使用机器名访问网站出现html5标签不识别问题)
- HTML5中canvas使用技巧和布局标签介绍
- HTML5学习(2) canvas标签的使用二
- 低版本ie浏览器里使用html5新标签
- 投票结果：HTML5新特性在站点中的使用情况
- HTML5视频标签使用时注意事项
- ASP.NET MVC 学习 --- HTML5 新特性及标签
- Html5新标签的使用
- Html5新标签的使用
- HTML5尝鲜（1）：使用aduio标签打造音乐播放器
- HTML5标签使用的常见误区
- 使用HTML5的Audio标签打造WEB音频播放器
- HTML5学习(2) canvas标签的使用三