IT博客汇 | [原]HTML5基础小结（二）—

[原]HTML5基础小结（二）——标签小例

liujiahan629629发表于 2014-10-27 19:23:11

随篇博客的思维导图，继续：

二，看下标签的使用，这里看几个小例子（效果图不再给出）：

1，结构标签的使用，这里来看一个页面的布局：

这是一个header标签

这是一个section标签

春晓

春眠不觉晓，
处处蚊子咬，
打上敌敌畏，
不至死多少。

上学歌

太阳当空照，
花儿对我笑，
小鸟说早早早，你为什么背上小书包?
我要炸学校老师不知道，一拉线，赶快跑，
轰的一声，学校炸没了。

UFO

不明飞行物 Unknown Flying Object

DDS

nihaome

点击

右键单击

右键单击我试试

这是一个问题？

to be or not to be

这是一个问题？

to be or not to be

翰(han)

女人最喜欢做的事情就是逛街。。。吃零食。。逛街。。吃零食，偶尔还会呜呜的哭，于是总结了下女人:逛吃逛吃逛吃逛吃。。。呜呜呜~·

这是一个aside标签

大家好才是真的好

这是一个footer标签

法律条文联系我们客户意见商户合作

2，Canvas画布，可以在这个上边进行画图，例如直线，折线，圆，矩形等，这个要是学好了发挥的控件特别大，这里主要是JS来调用它的一些方法和属性：

a，画直线：



	
		Learning the basic of canvas

b，画矩形；



	
		Learning the basic of canvas

c,画圆（弧等）：



	
		Learning the basic of canvas

d，对文字样式的设置：



	
		Learning the basic of canvas

3,Video/Audio使用



	
	
	
		多资源的视频播放
		
		
		 
		使用以下VIDEO标签的API

		
		
		

		
		
		
		
		
		
		
		
		
		
		
		
		音频标签的使用

4,智能表单的简单实例：



	
	
		
		
		
		
		

		

		
		默认值:

		邮箱：

		URL：

		DATE:

		TIME：

		Month：

		WEEK：


		数字：

		滑动条：

		搜索：

		颜色：

		
		自动填充表单

		
		
			
			
			
		
		
		输出表单output

以上为标签的一些简单例子，通过例子来学习这些表单，挺快的，这里推荐W3CSCHOOL网站:http://www.w3school.com.cn/html5/,结合理论来学习，很不错的。下篇简单小结一下HTML5一些扩展。