Html5分享代码与实战(一)

声明不是教程帖,只是分享和对自己的总结。
本篇讲的是三个方面 一、HTML5新增加的一些代码与运用;二、移动web滑屏框架;三、jQuery返回顶部代码分析;

很久之前就想写一些关于自己知识的总结,发现站酷上有很多想学习html的同学,也有很多爱好分享的人在分享自己的心得与自己的技巧,所以也来加入进来。

刚开始学一些基础的html还是要在w3school上学,<<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>

/*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.zcool.cn.zcool.cn.zcool.cn.zcool.cn.zcool.cn/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框架给大家下载使用。

未经允许不得转载:水平线设计 » Html5分享代码与实战(一)

赞 (1)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)