Html5分享代码与实战（一）
声明不是教程帖，只是分享和对自己的总结。
本篇讲的是三个方面 一、HTML5新增加的一些代码与运用；二、移动web滑屏框架；三、jQuery返回顶部代码分析；
很久之前就想写一些关于自己知识的总结，发现站酷上有很多想学习html的同学，也有很多爱好分享的人在分享自己的心得与自己的技巧，所以也来加入进来。
刚开始学一些基础的html还是要在w3school上学，html5<css3<js=jq 这样简单的前端也就毕业。
这不是一篇教程帖，只是想分享一些自己的心得，欢迎更多的朋友加入到前端的大家庭来。也希望大神指点。
HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者，等。
| <canvas> | 标签定义图形，比如图表和其他图像。该标签基于 Javas cript 的绘图 API |
| <audio> | 定义音频内容 |
| <video> | 定义视频（video 或者 movie） |
| <source> | 定义多媒体资源 <video> 和 <audio> |
| <article> | 定义页面独立的内容区域。 |
| <aside> | 定义页面的侧边栏内容。 |
| <bdi> | 允许您设置一段文本，使其脱离其父元素的文本方向设置。 |
| <command> | 定义命令按钮，比如单选按钮、复选框或按钮 |
| <details> | 用于描述文档或文档某个部分的细节 |
| <dialog> | 定义对话框，比如提示框 |
| <summary> | 标签包含 details 元素的标题 |
| <figure> | 规定独立的流内容（图像、图表、照片、代码等等）。 |
| <figcaption> | 定义 <figure> 元素的标题 |
| <footer> | 定义 section 或 document 的页脚。 |
| <header> | 定义了文档的头部区域 |
| <mark> | 定义带有记号的文本。 |
| <meter> | 定义度量衡。仅用于已知最大和最小值的度量。 |
| <nav> | 定义运行中的进度（进程）。 |
| <progress> | 定义任何类型的任务的进度。 |
| <ruby> | 定义 ruby 注释（中文注音或字符）。 |
| <rt> | 定义字符（中文注音或字符）的解释或发音。 |
| <rp> | 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。 |
| <section> | 定义文档中的节（section、区段）。 |
| <time> | 定义日期或时间。 |
| <wbr> | 规定在文本中的何处适合添加换行符。 |
之前我们普通的布局
图中我们非常清晰的看到了，一个普通的页面，会有头部，导航，文章内容，还有附着的右边栏，还有底部等模块，而我们是通过class进行区分，并通过不同的css样式来处理的。但相对来说class不是通用的标准的规范，搜索引擎只能去猜测某部分的功能，另外就是此页面程序交给视力障碍人士来阅读的话，文档结构和内容也不会很清晰。而HTML5新标签带来的新的布局则是下面这种情况：
代码部分
<body>
<header>...</header>
<nav>...</nav>
<article>
<section> ... </section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
这里采用fullPage框架，库大小7.69K~
fullPage框架的页面样式无需自定义，已有写好的
兼容ios5+、android2.3+、winphone 8系统，其滑屏功能，效果比较丰富，支持缩放、旋转、透明度、自动滑屏等动画效果~如果你需要设计精彩的滑屏效果，可考虑它~
demo演示 下载地址我也会放在下面方便各位下载学习
虽然它不是最小的但可以兼容动画；
演示地址（点开有惊喜，内分享整合移动端知识）
代码部分：
html：
<a href="#" id="back-to-top" class="cd-fade-out" ><i class="fa cd-top"></i></a>
css：
/*back to top*/
#back-to-top { position: fixed; right: 10px; bottom: 10px; background: rgba(70, 179, 0, 0.6); color: #ffffff; text-align: center; border-radius: 2px; z-index: 1; display: none; line-height:10px;}
#back-to-top:hover { background: #23b300;}
#back-to-top i { width: 40px; height: 40px;}
jQ
<s cript src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></s cript>
<s cript type="text/javas cript">
//initiating jQuery
jQuery(function($) {
$(document).ready( function() {
//enabling stickUp on the '.navbar-wrapper' class<!--
$('.sidebar1').stickUp();--> });
//hide or show the "back to top" link 隐藏或显示“返回顶部”链接
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
//smooth scroll to top 平滑滚动到顶部
$back_to_top.on('click', function(event){
event.preventDefault();
$('body,html').animate({
scrollTop: 0 ,
}, scroll_top_duration
);
});
});
</s cript>
本次就到这里欢迎大家点赞，如果大家有什么想知道的也可以在下面留言，在下次我也会给大家解答的，每次都会给大家分享一个JQ的实际案例让大家直接就能拿来用。下面有fullPage框架给大家下载使用。
