HTML5基础小结（二）——标签小例
浏览数：31 /
时间：2015年06月09日
随篇博客的思维导图，继续：
二，看下标签的使用，这里看几个小例子（效果图不再给出）：
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一些扩展。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
