HTML5基础小结（二）——标签小例
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1amlhaGFuNjI5NjI5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />
随篇博客的思维导图。继续：
二。看下标签的使用，这里看几个小样例（效果图不再给出）：
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一些扩展。
HTML5基础小结（二）——标签小例的更多相关文章
- Oracle 数据库基础学习 (二) 学习小例子：创建一个表，记录商品买卖的情况
运行环境:Oracle database 11g + PL/SQL Developer ex: --创建一个表 create table plspl_test_product( --加入not n ...
- web 基础（二） HTML5
web 基础(二) HTML5 一.HTML5 HTML5 是最新的 HTML 标准.是专门为承载丰富的 web 内容而设计的,并且无需额外插件.它拥有新的语义.图形以及多媒体元素.并提供的新元素和新 ...
- HTML5基础知识（一）---标签
在HTML5中,Web页面中重新调整了页面规划,这其中新引入了几个新标记. 我们将创建一个简单的Web页面,该页面包含一个Header区.一个Navigation区.一个Article区(包含三个部分 ...
- HTML5 学习总结（一）——HTML5概要与新增标签
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...
- HTML5 学习笔记（一）——HTML5概要与新增标签
目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...
- HTML5 学习笔记--------》HTML5概要与新增标签！
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...
- HTML5 基础
1.HTML5 简介 HTML5 是最新的 HTML 标准,他是万维网的核心语言.标准通用标记语言下的一个应用“超文本标记语言”. HTML 的上一个标准 HTML4.01 诞生于 1999年,他的第 ...
- Java 基础--小结
Java 基础--小结 java基础 Java源程序(.java文件)——>java字节码文件(.class文件)——>由解释执行器(java.exe)将字节码文件加载到java虚拟机( ...
- 实时视频直播客户端技术盘点：Native、HTML5、WebRTC、微信小程序
1.前言 2017 年 12 月,微信小程序向开发者开放了实时音视频能力,给业内带来广阔的想象空间.连麦互动视频直播技术在 2016 年直播风口中成为视频直播的标配,然而只有在原生的 APP 上才能保 ...
随机推荐
- soapui not supported the auto complete
http://forum.soapui.org/viewtopic.php?t=19850 syntax highlighting or content assist inside soapUI? t ...
- 使用jquery的ajax提交文件上传
以前的项目大多的使用jquery的插件来进行文件上传,对于就只引用jquery而不使用插件来上传文件之前未有写过,最近项目里有写到和用到,就记录一下,以后方便查找. 提示:存在浏览器皆容问题,谨慎使用 ...
- Linux管道思想
1.Linux管道 {{book | upper |lower | capfirst}} 含义:就是把前一个命令的结果当成后一个命令的输入.然后在下一个管道中输出满足条件的数据,如此继续数据的流向运动 ...
- NSDictionary的分类
@implementation NSDictionary (extra) //根据key值的到字典中的object - (id)getObjectByKey:(NSString*)key { NSAr ...
- 树莓派进阶之路 (008) - 树莓派安装ftp服务器(转)
vsftpd是开源的轻量级的常用ftp服务器． 1,安装vsftpd服务器 (约400KB) sudo apt-get install vsftpd 2,启动ftp服务 sudo serv ...
- HDU 3999 The order of a Tree （先序遍历）
The order of a Tree Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
- opestack keystone 深入
一.概述 keystone 有两个endpoint端口,一个35357,用于管理,只有admin_role可以使用.一个是5000, 用于业务: 二.keystone中的路由 解析url,然后获取后端 ...
- FluentValidation：C#后端输入验证框架的官方文档解读
参照 FluentValidation 的官方文档写的例子,方便日后查看和使用. 原文:https://github.com/JeremySkinner/FluentValidation/wiki H ...
- 开源项目mark
1. Apache的开源软件列表 http://www.oschina.net/project/apache 2. Java开源Apache项目 http://www.open-open.com/56 ...
- Git管理工具对比（GitBash、EGit、SourceTree）(转载)
Git管理工具对比(GitBash.EGit.SourceTree) GitBash是采用命令行的方式对版本进行管理,功能最为灵活强大,但是由于需要手动输入希望修改的文件名,所以相对繁琐. EGit是 ...