随篇博客的思维导图，继续：
二，看下标签的使用，这里看几个小例子（效果图不再给出）：
1，结构标签的使用，这里来看一个页面的布局：
<!doctype html>
<html>
<head>
<style>
/*
*{border:1px solid red;height:20px}
所有的HTML5结构标签本质上来说就是一个div标签，只不过有意义
*/
/*页面头部 header*/
header{height:150px;background:#ABCDEF}
nav{height:30px;background:#ff9900;margin-top:100px}
nav ul li{width:100px;height:30px;float:left;line-height:30px}
/*页面中间 div */
div{margin-top:10px;height:1000px;}
section{height:1000px;background:#ABCDEF;width:70%;float:left}
article{background:#F90;width:500px;margin:0 auto;text-align:center}
aside{height:1000px;background:#ABCDEF;width:28%;float:right}
/*页面底部 footer*/
footer{height:100px;background:#ABCDEF;clear:both;margin-top:10px}
</style>
</head>
<body>
<header>
<p>这是一个header标签</p>
<nav>
<ul>
<li>首页</li>
<li>起夜</li>
<li>论坛</li>
<li>商城</li>
<li>社区</li>
</ul>
</nav>
</header>
<div>
<section>
<p>这是一个section标签</p>
<article>
<h2>春晓</h2>
<p>
春眠不觉晓，<br />
处处蚊子咬，<br />
打上敌敌畏，<br />
不至死多少。<br />
</p>
</article>
<hr />
<article>
<h2>上学歌</h2>
<p>
太阳当空照，<br />
花儿对我笑，<br />
小鸟说早早早，你为什么背上小书包?<br />
我要炸学校老师不知道，一拉线，赶快跑，<br />
轰的一声，学校炸没了。<br />
</p>
</article>
<hr />
<figure>
<figcaption>UFO</figcaption>
<p>不明飞行物 Unknown Flying Object</p>
</figure>
<figure>
<dt>DDS</dt>
<dd>nihaome </dd>
</figure>
<hr />
<dialog>
<dt>唐僧:悟空，你又调皮了，观音姐姐的月光宝盒怎么能乱扔呢？</dt>
<dd>悟空:...(看着)</dd>
<dt>唐僧:乱扔是不对的，砸到小朋友怎么办？就算砸不到小朋友，砸到花花草草也是不好的嘛</dt>
<dd>悟空:...(纠结)</dd>
<dt>唐僧:悟空你想要么？想要你就告诉我呀，你不告诉我怎么知道你想要呢？。。。。</dt>
<dd>悟空:我靠!(一棍子抡上去！)</dd>
</dialog>
<hr />
<menu>
<li>点击</li>
<li>右键单击</li>
</menu>
<hr />
<span contextmenu="candan">右键单击我试试</span>
<menu type="context" id="candan">
<menuitem label="菜单一" onclick="alert('我是一个寂寞')" icon="http://www.baidu.com/img/bdlogo.gif"></menuitem>
</menu>
<hr />
<meter min="0" max="10" value="5" low="3" high="7" ></meter>
<progress max="100" value="0" id="pro"></progress>
<script>
var pro =document.getElementById('pro');
setInterval(function(){
pro.value+=1;
},100);
</script>
<hr />
<details>
<dt>这是一个问题？</dt>
<dd>to be or not to be</dd>
<dt>这是一个问题？</dt>
<dd>to be or not to be</dd>
</details>
<hr />
<ruby>翰<rp>(</rp><rt>han</rt><rp>)</rp></ruby>
<hr />
女人<mark>最喜欢做的事情</mark>就是逛街。。。吃零食。。逛街。。吃零食，偶尔还会呜呜的哭，
于是总结了下女人:逛吃逛吃逛吃逛吃。。。呜呜呜~·
</section>
<aside>
<p>这是一个aside标签</p>
<hgroup>
<h3>大家好才是真的好</h3>
<h3>大家好才是真的好</h3>
<h3>大家好才是真的好</h3>
<h3>大家好才是真的好</h3>
</hgroup>
</aside>
</div>
<footer>
<p>这是一个footer标签</p>
<hr />
<small>法律条文</small>
<small>联系我们</small>
<small>客户意见</small>
<small>商户合作</small>
</footer>
</body>
</html>
2，Canvas画布，可以在这个上边进行画图，例如直线，折线，圆，矩形等，这个要是学好了发挥的控件特别大，这里主要是JS来调用它的一些方法和属性：
a，画直线：
<!DOCTYPE html>
<html>
<head>
<title>Learning the basic of canvas</title>
<meta charset="utf-8" />
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var canvas =$("#myCanvas");
var context =canvas.get(0).getContext("2d");
context.beginPath();
context.moveTo(40,40);
context.lineTo(340,340);
context.closePath();
context.stroke();
});
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
该浏览器不支持HTML5
</canvas>
</body>
</html>
b，画矩形；
<!DOCTYPE html>
<html>
<head>
<title>Learning the basic of canvas</title>
<meta charset="utf-8" />
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var canvas =$("#myCanvas");
var context =canvas.get(0).getContext("2d");
context.fillRect(40,40,100,100);
context.strokeRect(100,100,120,120);
});
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
该浏览器不支持HTML5
</canvas>
</body>
</html>
c,画圆（弧等）：
<!DOCTYPE html>
<html>
<head>
<title>Learning the basic of canvas</title>
<meta charset="utf-8" />
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var canvas =$("#myCanvas");
var context =canvas.get(0).getContext("2d");
context.beginPath();
var degrees=10;
var radians=degrees*(Math.PI/180);
//context.arc(230,90,50,0,Math.PI*2,false);
context.arc(230,90,50,0,Math.PI*0.5,false);
context.closePath();
//context.fillStyle="rgb(255,255,0)";
//context.fill();
context.strokeStyle="rgb(255,0,255)";
context.stroke();
});
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
该浏览器不支持HTML5
</canvas>
</body>
</html>
d，对文字样式的设置：
<!DOCTYPE html>
<html>
<head>
<title>Learning the basic of canvas</title>
<meta charset="utf-8" />
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var canvas =$("#myCanvas");
var context =canvas.get(0).getContext("2d");
var text="Hello,World";
context.font="italic 30px serif";
context.fillText(text,40,40);
});
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="500">
该浏览器不支持HTML5
</canvas>
</body>
</html>
3,Video/Audio使用
<!doctype html>
<html>
<head></head>
<body>
<!--
<video src="movie.webm" controls="controls">
您的破浏览器都是古董早该换了，不然休想看我们的激情小电影。
</video>
-->
<hr />多资源的视频播放
<video width="1000" height="1000" poster="PLMM.jpg"></video>
<video controls="controls" width="1000" height="1000" autoplay="autoplay" loop="loop" poster="PLMM.jpg">
<source src="movie.webm" type="video/webm" />
<source src="movie.ogg" type="video/ogg" />
您的浏览器不支持视频标签，还不赶快升级。
</video>
<hr />
使用以下VIDEO标签的API<br />
<video src="movie.ogg" controls="controls" id="video">
您的破浏览器都是古董早该换了，不然休想看我们的激情小电影。
</video>
<br />
<button onclick="bofang()">播放</button>
<button onclick="zanting()">暂停</button>
<button onclick="kuaijin()">快进10秒</button>
<button onclick="kuaitui()">快退10秒</button>
<button onclick="shutup(this)">闭嘴</button>
<button onclick="soso()">加速播放</button>
<button onclick="yu()">减速播放</button>
<button onclick="normal()">正常播放</button>
<button onclick="upper()">提高嗓门</button>
<button onclick="lower()">降低嗓门</button>
<script>
//获取对应的video标签
var video=document.getElementById('video');
//播放方法
function bofang(){
video.play();
}
//暂停方法
function zanting(){
video.pause();
}
//快进10秒
function kuaijin(){
video.currentTime+=10;//相当于video.currentTime=video.currentTime+10
}
//快退10秒
function kuaitui(){
video.currentTime-=10;
}
//静音按钮
function shutup(obj){
if(video.muted){
obj.innerHTML="闭嘴";
video.muted=false;
}else{
obj.innerHTML="张嘴";
video.muted=true;
}
}
//加速播放(3倍速度)
function soso(){
video.playbackRate=3;
}
//慢速播放(慢三倍)
function yu(){
video.playbackRate=1/3;
}
//正常倍速
function normal(){
video.playbackRate=1;//默认的播放倍速是1
}
//调高声音
function upper(){
video.volume+=0.2;//声音值的范围是0-1
}
//调低声音
function lower(){
video.volume-=0.2;
}
</script>
<hr />
音频标签的使用<br />
<audio src="a.mp3" controls="controls">
您的老牛已经拉不动破车了，赶紧换了吧，想听中国好声音么？
</audio>
<canvas id="myCanvas" 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("myCanvas");
var cxt=c.getContext("2d");
var img=new Image();
img.src="PLMM.jpg";
cxt.drawImage(img,0,0);
</script>
</body>
</html>
4,智能表单的简单实例：
<!doctype html>
<html>
<head></head>
<body>
<form action="http://localhost/test.php" method="post" id="register"></form>
<input type="text" name="user" value="" form="register" />
<input type="password" name="pwd" value="" form="register" />
<select name="year" form="register">
<option value="1970">1970</option>
<option value="1980">1980</option>
<option value="1990">1990</option>
</select>
<input type="submit" value="注册" form="register" />
<hr />
默认值:<input type="text" name="test" value="" pattern="\d{3}" placeholder="我是新的HTML5的默认值" form="register" /><br />
邮箱：<input type="email" name="youxiang" value="" form="register" required="required" /><br />
URL：<input type="url" name="url" value="" form="register" /><br />
DATE:<input type="date" name="riqi" value="" form="register" /><br />
TIME：<input type="time" name="shijian" value="" form="register" /><br />
Month：<input type="month" name="yue" value="" form="register" /><br />
WEEK：<input type="week" name="zhou" value="" form="register" /><br />
数字：<input type="number" name="shuzi" value="" form="register" autofocus="autofocus" /><br />
滑动条：<input type="range" name="huadong" value="" form="register" max="10" step="2" /><br />
搜索：<input type="search" name="sousuo" value="" form="register" results="n" /><br />
颜色：<input type="color" name="yanse" value="" form="register" /><br />
<hr />
自动填充表单<br />
<input type="text" name="auto" value="" list="movie" />
<datalist id="movie">
<option>人在囧途</option>
<option>车在囧途</option>
<option>泰囧</option>
</datalist>
<hr />
输出表单output<br />
<form action="" method="post" oninput="result.value=parseInt(no1.value)+parseInt(no2.value)">
<input type="number" name="no1" value="" />
<input type="number" name="no2" value="" />
<output name="result"></output>
</form>
</body>
</html>
以上为标签的一些简单例子，通过例子来学习这些表单，挺快的，这里推荐W3CSCHOOL网站:http://www.w3school.com.cn/html5/,结合理论来学习，很不错的。下篇简单小结一下HTML5一些扩展。
分享到：
相关推荐
1.5 小结 15 1.6 习题 16 第2章 HTML文件基本标记 17 教学录像：44分钟 2.1 HTML头部标记 18 2.2 标题标记<title> 18 2.3 元信息标记<meta> 19 2.3.1 设置页面关键字 19 2.3.2 设置...
1.5 小结 13 第2章 使用Jakarta Commons来简化开发 14 2.1 Jakarta Commons的功能和用法 14 2.2 小结 18 第3章 Java EE容器 19 3.1 什么是容器 19 3.2 Tomcat的安装和使用 20 3.3 小结 25 第4章 在...
1.4 小结 工具篇 第2章 LoadRunner综述 2.1 LoadRunner简介 2.2 LoadRunner工具组成 2.3 性能测试原理 2.4 自动化测试工具和性能测试工具的区别 2.5 协议分析 2.5.1 HTTP详细介绍 2.5.2 HTTP报文结构 2.5.3 HTTP...
1.4 小结 工具篇 第2章 LoadRunner综述 2.1 LoadRunner简介 2.2 LoadRunner工具组成 2.3 性能测试原理 2.4 自动化测试工具和性能测试工具的区别 2.5 协议分析 2.5.1 HTTP详细介绍 2.5.2 HTTP报文结构 ...
1.4 小结 工具篇 第2章 LoadRunner综述 2.1 LoadRunner简介 2.2 LoadRunner工具组成 2.3 性能测试原理 2.4 自动化测试工具和性能测试工具的区别 2.5 协议分析 2.5.1 HTTP详细介绍 2.5.2 HTTP报文结构 2.5.3 HTTP...
1.5 小结 第2章 myedipse开发工具对各种框架的支持 2.1 使用jsp的两种模式 2.2 struts框架的实现 2.3 hibernate框架的实现 2.4 jpa框架的实现 2.5 spring框架的实现 2.6 jsf框架的实现 2.7...
1.4 小结 工具篇 第2章 LoadRunner综述 2.1 LoadRunner简介 2.2 LoadRunner工具组成 2.3 性能测试原理 2.4 自动化测试工具和性能测试工具的区别 2.5 协议分析 2.5.1 HTTP详细介绍 2.5.2 HTTP报文结构 ...
1.4 小结 工具篇 第2章 LoadRunner综述 2.1 LoadRunner简介 2.2 LoadRunner工具组成 2.3 性能测试原理 2.4 自动化测试工具和性能测试工具的区别 2.5 协议分析 2.5.1 HTTP详细介绍 2.5.2 HTTP报文结构 ...
1.4 小结 工具篇 第2章 LoadRunner综述 2.1 LoadRunner简介 2.2 LoadRunner工具组成 2.3 性能测试原理 2.4 自动化测试工具和性能测试工具的区别 2.5 协议分析 2.5.1 HTTP详细介绍 2.5.2 HTTP报文结构 ...
1.4 小结 工具篇 第2章 LoadRunner综述 2.1 LoadRunner简介 2.2 LoadRunner工具组成 2.3 性能测试原理 2.4 自动化测试工具和性能测试工具的区别 2.5 协议分析 2.5.1 HTTP详细介绍 2.5.2 HTTP报文结构 ...
1.4 小结 工具篇 第2章 LoadRunner综述 2.1 LoadRunner简介 2.2 LoadRunner工具组成 2.3 性能测试原理 2.4 自动化测试工具和性能测试工具的区别 2.5 协议分析 2.5.1 HTTP详细介绍 2.5.2 HTTP报文结构 ...
1.4 小结 工具篇 第2章 LoadRunner综述 2.1 LoadRunner简介 2.2 LoadRunner工具组成 2.3 性能测试原理 2.4 自动化测试工具和性能测试工具的区别 2.5 协议分析 2.5.1 HTTP详细介绍 2.5.2 HTTP报文结构 2.5.3 HTTP...
1.7 小结 23 第2章 PHP的基础语法 24 2.1 语言构成与工作原理 24 2.2 常量与变量 25 2.2.1 常量的定义 25 2.2.2 变量的定义 26 2.2.3 变量的作用域 27 2.2.4 动态变量 29 2.3 运算符和关键字 29 2.4 流程控制语法 30...
1.4 小结 13 第2章 初识Struts 14 2.1 Struts的优点 14 2.2 Struts的动作处理流程 15 2.3 拦截器 17 2.4 Struts配置文件 18 2.4.1 struts.xml文件 19 2.4.2 struts.properties文件 26 2.5 Struts应用程序示例 26 ...
2.4 本章小结 15 第三章 跨域交互缓存处理设计 17 3.1 跨域交互缓存处理需求 17 3.1.1 缓存技术WebStorage 17 3.1.2 跨域交互缓存处理需求 17 3.1.3 页面回退管理需求 17 3.2 缓存处理机制 18 3.2.1 跨域缓存处理 18...