【HTML5】H5新标签大实例

以下是测试Html5新标签性能的大实例:

首先是效果:

代码:

<html>
<head>
<title>Test</title>
</head>
<body>

<h2>header标签定义文档的页眉(介绍信息)</h2>
<header>
	<h3>Welcome to my homepage</h3>
	<p>My name is Donald Duck</p>
</header>

<h1>视频标签</h1>
<video src="video/why-we-coding.mp4" width="420" height="240" controls="controls">
您的浏览器不支持 video 标签。
</video>
<br/>

<h1>音频标签</h1>
<audio src="audio/Whistle.MP3" controls="controls">
您的浏览器不支持 audio 标签。
</audio>
<br/>

<h1>画图标签</h1>
画矩形<br/>
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
	//JavaScript 使用 id 来寻找 canvas 元素:
    var canvas=document.getElementById('myCanvas');
	//然后,创建 context 对象:
    var ctx=canvas.getContext('2d');
	//getContext("2d") 对象是内建的 HTML 5 对象,
	//拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

	//fillStyle 方法将其染成红色,
    ctx.fillStyle='#FF0000';
	//fillRect 方法规定了形状、位置和尺寸。
    ctx.fillRect(0,0,80,100);
</script><br/>

画线条<br/>
<canvas id="myCanvas1" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas1");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script><br/>

画圆形<br/>
<canvas id="myCanvas2" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas2");
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><br/>

渐变效果<br/>
<canvas id="myCanvas3" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas3");
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><br/>

把一幅图像放置到画布上:<br/>
<canvas id="myCanvas4" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas4");
var cxt=c.getContext("2d");
var img=new Image()
img.src="/img/eg_flower.png"
cxt.drawImage(img,0,0);
</script><br/>

<h1>坐标获取</h1>
<p>把鼠标悬停在下面的矩形上可以看到坐标:</p>
<div id="coordiv"
style="width:199px;height:99px;border:1px solid #c3c3c3"
onmousemove="cnvs_getCoordinates(event)"
onmouseout="cnvs_clearCoordinates()"></div>
<br/>
<div id="xycoordinates"></div>
<script type="text/javascript">
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>
<br/>

<h1>本地缓存测试</h1>
<script type="text/javascript">
localStorage.lastname="Smith";
document.write("Last name: " + localStorage.lastname);
</script>
<br/>

<p>刷新页面会看到计数器在增长。</p>
<p>请关闭浏览器窗口,然后再试一次,计数器会继续计数。</p>
<script type="text/javascript">
if (localStorage.pagecount)
{
	localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
	localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>

<h1>session缓存</h1>
<script type="text/javascript">
if (sessionStorage.pagecount)
{
	sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
	sessionStorage.pagecount=1;
}
document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");
</script>
<p>刷新页面会看到计数器在增长。</p>
<p>请关闭浏览器窗口,然后再试一次,计数器已经重置了。</p>

<h1>新Input类型</h1>
<script type="text/javascript">
	function show(){
		var range=document.getElementById("range");
		var pshow=document.getElementById("pshow");
		pshow.innerHTML=range.value;
	}
</script>
<form action="/example/HTML 5/demo_form.asp" method="get">
email:<input type="email" name="user_email" /><br/>
url:<input type="url" name="user_url" /><br/>
number:<input type="number" name="points" min="1" max="10" /><br/>
range:<input type="range" id="range" name="points" min="1" max="10" onmousemove="show()"/><div id="pshow">6</div><br/>
<b>Date pickers (date, month, week, time, datetime, datetime-local)</b><br/>
date:<input type="date" name="user_date" /><br/>
month:<input type="month" name="user_date" /><br/>
week:<input type="week" name="user_date" /><br/>
time:<input type="time" name="user_date" /><br/>
datetime:<input type="datetime" name="user_date" /><br/>
datetime-local:<input type="datetime-local" name="user_date" /><br/>
search:<input type="search" name="user_date" /><br/>
</form>

<h1>datalist元素</h1>
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

<h1>keygen元素</h1>
<form action="/example/HTML 5/demo_form.asp" method="get">
Username: <input type="text" name="usr_name" /><br/>
加密方式: <keygen name="security" /><br/>
<input type="submit" /><br/>
</form>

<h1>使用 output 元素的简易计算器:</h1>
<script type="text/javascript">
function resCalc()
{
	numA=document.getElementById("num_a").value;
	numB=document.getElementById("num_b").value;
	document.getElementById("result").value=Number(numA)+Number(numB);
}
</script>
<form onsubmit="return false">
<input id="num_a" /> +
<input id="num_b" /> =
<output id="result" onforminput="resCalc()"></output>
</form>

<h1>autocomplete 属性</h1>
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。<br/>
<form action="/example/HTML 5/demo_form.asp" method="get" autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
<p>请填写并提交此表单,然后重载页面,来查看自动完成功能是如何工作的。</p>
<p>请注意,表单的自动完成功能是打开的,而 e-mail 域是关闭的。</p>
<br/>

<h1>autofocus 属性</h1>
autofocus 属性规定在页面加载时,域自动地获得焦点。<br/>
<form action="/example/HTML 5/demo_form.asp" method="get">
User name: <input type="text" name="user_name" autofocus="autofocus" />
<input type="submit" />
</form>

<h1>form 属性</h1>
form 属性规定输入域所属的一个或多个表单。<br/>
<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
下面的输入域在 form 元素之外,但仍然是表单的一部分。<br/>
Last name: <input type="text" name="lname" form="user_form" />
<br/>

<h1>multiple 属性</h1>
multiple 属性规定输入域中可选择多个值<br/>
<form action="/example/HTML 5/demo_form.asp" method="get">
Select images: <input type="file" name="img" multiple="multiple" />
<input type="submit" />
</form>
<p>注:当您浏览文件时,请试着选择多个文件。</p>

<h1>pattern 属性</h1>
pattern 属性规定用于验证 input 域的模式(pattern)(正则表达式)<br/>
下面的例子显示了一个只能包含三个字母的文本域(不含数字及特殊字符)<br/>
<form action="/example/HTML 5/demo_form.asp" method="get">
Country code: <input type="text" name="country_code" pattern="[A-z]{3}"
title="Three letter country code" />
<input type="submit" />
</form>

<h1>placeholder 属性</h1>
placeholder 属性提供一种提示(hint),描述输入域所期待的值。<br/>
<form action="/example/HTML 5/demo_form.asp" method="get">
<input type="search" name="user_search" placeholder="Search W3School" />
<input type="submit" />
</form>

<h1>required 属性</h1>
required 属性规定必须在提交之前填写输入域(不能为空)。<br/>
<form action="/example/HTML 5/demo_form.asp" method="get">
Name: <input type="text" name="usr_name" required="required" />
<input type="submit" />
</form>

<h1>area标签</h1>
定义和用法:area标签定义图像映射中的区域。<br/>
<p>请点击图像上的星球,把它们放大。</p>
<img src="img/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14" href ="venus.html" target ="_blank" alt="Venus" />
<area shape="circle" coords="129,161,10" href ="mercur.html" target ="_blank" alt="Mercury" />
<area shape="rect" coords="0,0,110,260" href ="sun.html" target ="_blank" alt="Sun" />
</map>
<p><b>注释:</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性(根据浏
览器),所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>

<h1>bdo标签</h1>
定义和用法:bdo标签覆盖默认的文本方向。<br/>
<bdo dir="ltr">Here is some text</bdo><br/>
<bdo dir="rtl">Here is some text</bdo>

<h1>blockquote标签</h1>
定义和用法:blockquote标签定义摘自另一个源的块引用。<br/>
毛泽东说过:
<blockquote>帝国主义都是纸老虎 ... </blockquote>

<h2>dd标签定义一个定义列表中对项目的描述:</h2>
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
<h2>定义文档中已删除的文本</h2>
<p>a dozen is <del>21</del> 12 pieces</p>

<h2>details标签用于描述文档或文档某个部分的细节:</h2>
<details>This document was written in 2010.</details>

<h2>summary标签包含 details 元素的标题</h2>
<details>
    <summary>HTML 5</summary>
    This document teaches you everything you have to learn about HTML 5.
</details>

<h2>embed标签定义嵌入的内容,比如插件</h2>
<embed src="img/helloworld.swf" />

<h2>fieldset 元素可将表单内的相关元素分组</h2>
<fieldset style="width:100px">
<legend>健康信息:</legend>
<form>
<label>身高:<input type="text" /></label>
<label>体重:<input type="text" /></label>
</form>
</fieldset>
<p>如果表单周围没有边框,说明您的浏览器太老了。</p>

<h2>figure标签用于对元素进行组合</h2>
<h2>figcaption标签定义 figure 元素的标题</h2>
<figure>
<figcaption>PRC</figcaption>
<p>The People's Republic of China was born in 1949...</p>
</figure>

<h2>删除字效果和插入字效果</h2>
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

<h2>code标签用于表示计算机源代码</h2>
<code>
	public static void main(String [] args){
		System.out.println("HelloWorld!");
	}
</code>

<h2>pre标签来显示非常规的格式化内容,或者某类计算机代码。</h2>
<pre>
	public static void main(String [] args){
		System.out.println("HelloWorld!");
	}
</pre>

<h2>mark突出部分文本</h2>
<p>Do not forget to buy <mark>milk</mark> today.</p>

<h2>menu定义菜单列表</h2>
<menu>
<li><input type="checkbox" />Red</li>
<li><input type="checkbox" />blue</li>
</menu>

<h2>下面代码可以让网页在5秒后刷新,并跳转至http://www.w3school.com.cn</h2>
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn">
<br/>

<h2>meter标签定义度量衡</h2>
<p>显示度量值:</p>
<meter value="3" min="0" max="10"></meter><br/><br/>
<meter value="0.6"></meter>
<p><b>注释:</b>Internet Explorer 不支持 meter 标签。</p>

<h2>nav标签定义导航链接的部分</h2>
<nav>
<a href="index.asp">Home</a>
<a href="html5_meter.asp">Previous</a>
<a href="html5_noscript.asp">Next</a>
</nav>

<h2>optgroup标签定义选项组。</h2>
此元素允许您组合选项。当您使用一个长的选项列表时,对相关的选项进行组合会使处理更加容易。<br/>
<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>

<h2>progress标签定义运行中的进度(进程)</h2>
下载进度:
<progress value="22" max="100">
</progress>
<p><b>注释:</b>Internet Explorer 9 以及更早的版本不支持 <progress> 标签。</p>

<h2>q标签定义一个短的引用。</h2>
<p>WWF's goal is to:
<q cite="http://www.wwf.org">
build a future where people live in harmony with nature
</q> we hope they succeed.</p>
<p>请注意,浏览器在引用的周围插入了引号。</p>

<h2>sub标签可定义下标文本。sup可定义上标文本</h2>
<p>
	This text contains <sub>subscript</sub>
</p>
<p>
	This text contains <sup>superscript</sup>
</p>

<h2>time标签定义日期或时间,或者两者</h2>
<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<p>我在 <time datetime="2010-02-14">情人节</time> 有个约会。</p>

<h2>footer标签定义 section 或 document 的页脚</h2>
<footer>This document was written in 2010.</footer>
</body>
</html>

上面基本测验了Html5的大部分新属性,大家可以在自己电脑上测试。有些属性要考虑到浏览器的兼容性,关于兼容问题大家可以去查看W3Shool相关文档。

转载请注明出处:http://blog.csdn.net/acmman/article/details/50968443

时间: 2016-03-24

【HTML5】H5新标签大实例的相关文章

Html5 CSS3新标签解释及用法

HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如Adobe Flash, Microsoft Silverlight, 与 Sun JavaFX 的需求. HTML 5 提供了一些新的元素和属性,反映典型的现代用法网站.其中有些是技术上类似 <div> 和

《HTML5移动应用开发入门经典》—— 2.1 HTML5中的新标签

2.1 HTML5中的新标签 HTML5移动应用开发入门经典 HTML5为HTML规范加入了一些新的特性,其中最容易理解的就是新的标签.它们过去从未成为HTML的一部分,但现在却是HTML元素了. 2.1.1 新布局标签 大部分新标签被称为"分节"元素,它们为HTML文档的布局及分段提供语义.第9章将更详细地介绍这些标签. 新布局标签如下所示. --文档或站点的一个独立部分. --页面或站点主题之外的内容. --figure元素的标题. --独立于文本流之外的一段流内容(如图形.图表等

创建HTML5新标签(IE6~8)

  document.createelement能创建html5的新标签,但动态创建尤其是元素时,还是用innerhtml比较适合.不过ie的innerhtml存在大量的问题,style,link ,script就需要特殊方法去生成.这种方法又将用于我们html5的新元素的创建!见下面例子: <!doctype html> <html>   <head>     <title>动态创建html5元素 by 司徒正美</title>        

Html5新标签的使用

Html5对html的标签做了更加语义化的修改,比如增加了<article>,<header>等标签,可以准确的表达文档语义.目前大多数主流浏览器都支持使用这些新标签作为节点,当然,IE系列除外.针对IE,我们可以用一段简单JS创建该节点:     <!--[if IE]><script type="text/javascript">     var ce=document.createElement;     ce('header');

HTML5新标签不兼容(IE6/IE7/IE8)怎么办

今天在这里教给大家一个完美解决HTML5新标签不兼容(IE6/IE7/IE8)的方法:        .html5-wrappers{display:none!important;}     您的浏览器禁用了脚本,请查看这里来启用脚本!或者继续访问.      HTML5新标签不兼容(IE6/IE7/IE8)的完美解决方法这是头部这是网站底部!!! 以上就是小编教给大家的:完美解决HTML5新标签不兼容(IE6/IE7/IE8)的方法!(附js文件:html5.rar) 以上是小编为您精心准备的

JS基于HTML5的canvas标签实现炫目的色相球动画效果实例_javascript技巧

本文实例讲述了JS基于HTML5的canvas标签实现色相球效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>JS canvas标签制作色相球</title> </head> <body> <canvas></canvas&g

HTML5的aside与article标签详细实例教程

元素HTML 元素表示一个页面的一部分, 它的内容跟这个页面的其它内容的关联性不强,或者是没有关联,单独存在.元素通常显示成侧边栏(sidebar)或一些插入补充内容.通常用来在侧边栏显示一些定义,比如目录.索引.术语表等:也可以用来显示相关的广告宣传,作者的介绍,Web应用,相关链接,当前页内容简介等. 元素使用注意事项: 不要使用元素标记括号中的文字,因为这种类型的文本被认为是主内容的一部分. 使用例子:             The Disney movie The Little Mer

html5中article标签的讲解

<article> 标签是用来定义一些来自外部的内容.比如一些网友的投稿或是新闻记者的文章或是摘取某博客.论坛的信息,以及其他媒介资料. 用户看到的内容并不是对应本网站的一个具体的页面,<article>是可以嵌套使用的,内外层内容相关联 示例代码: <html><body><article><h5>HTML5 项目</h5><p>HTML5是用于修正现在html的下一个网页规范</p><p&

《HTML5移动应用开发入门经典》—— 2.2 HTML5的新属性

2.2 HTML5的新属性 HTML5移动应用开发入门经典 HTML5中的许多新属性是它们相关标签的扩展.可以通过一些新的event(事件)属性将脚本与Web页面事件关联起来.另外,还可以使用适用于所有HTML5元素的全局新属性. 在HTML中,属性出现在标签名称后,由空格分开,并介于"<"和">"号之间.若该属性包含一个值,值通过等号被附加在属性上.若值中包括空格,需要用引号将整个值括起来.例如: 或: 布尔值属性同样适用于HTML5,它们不需要值.若