15款免费的HTML5编码工具推荐（附下载）
Moqups
Moqups是一款免费的HTML5在线应用，可创建线框图、实体模型和UI概念。该程序使用起来非常简单，并且有内置的模板可以直接使用（模板包括单选按钮、链接、图像占位符、文本框以及滑块等）。
Stitches
Stitches是一个HTML5 sprite sheet生成器。用户只需要经过简单的拖拽图片文件到空白处，然后点击“Generate”就可以生成一个图像图标和样式表了。
HTML5 Maker
HTML5 Maker是一个在线的动画制作工具/服务，可通过HTML, HTML5, CSS和JavaScript创建动画和交互式内容。
Initializr
Initializr是一款HTML5模板生成器，帮助你快速启动基于HTML5模板的新项目。总之，Initializr 是制作 HTML5 网站最好的入门辅助开发工具，你可以使用提供的特色模板快速生成网站，也可以自定义，Initializr 会为你生成代码简洁的可定制的网页模板。
Sprite Box
Sprite Box是一款WYSIWYG工具，可帮组Web开发人员轻松、快速地创建CSS类和ID。它是基于使用背景位置属性原则来调整插入到网页块元素中的精灵小图像。这款工具是使用 JQuery，HTMl5 和 CSS3 组合来运转的，而且是一款完全免费的工具。
Liveweave
Liveweave在HTML4/HTML5、CSS2/CSS3中含有内置的自动完成上下文特性，让你工作起来更加轻松。你只需输入HTML5和CSS3 标签/元素即可，就是这么简单。
Literally Canvas
Literally Canvas是一款开源的HTML5部件，可以被集成到任何页面。它配备了一套简单的工具，包括绘图、擦除、颜色选择器、撤销、恢复、平移以及缩放。该工具利用jQuery+和Underscore.js创建而来，利用API定义背景色、工具以及尺寸。
HTML5 Demos
HTML5 Demos能够让你立即知道Firefox是否支持HTML5 Canvas，Safari能否运行HTML5 聊天客户端。
HTML5 Visual Cheat Sheet
HTML5 Visual Cheat Sheet是专为Web设计师和开发者设计的一款速查表。这份速查表包含了HTML tag列表以及支持HTML4.01/5版本的相关属性。
Switch to HTML5
Switch to HTML5是一款高效的模板生成器。如果你开始一个新的项目，记住一定要访问该网站。各种各样的HTML5网站模板将会呈现在你的眼前。
Online SVG to HTML5 Canvas Tool
这款工具可以将SVG转换成HTML5 Canvas JavaScript函数。它几乎可以运行在任何主机上，帮助用户去尝试使用Canvas，可以导出大量的矢量艺术包（Illustrator，Inkscape）。
HTML5 Test
利用HTML5 test可以测试你的浏览器支持即将推出HTML5 标准和相关规范的得分情况。尽管该规范还没有最终敲定，但是所有主流浏览器厂商都在为未来做好准备。
你可以查看浏览器支持HTML5 哪些部分并与其他浏览器进行对比。
Patternizer
Patternizer是用来创建条纹图案的生成器。
Lime JS
LimeJS 是一个 JavaScript 游戏开发框架,允许开发者创建基于 HTML5 的游戏,支持主流浏览器包括iOS。
HTML5 Reset
HTML5 Reset是（HTML，CSS等）一套设计组件，旨在帮助用户节省大量的时间，创建更加高效的项目。
HTML5 Tracker
HTML5 Tracker能够用于跟踪HTML5相关的最新修订信息。
Cross browser HTML5 forms
表单是一个网站非常重要的一部分。 HTML5的特性日历，色彩板，滑动部件，客户端验证等这些都是非常强大的工具，但现实的情况就是，大多数的浏览器不支持所有的功能。这是一个很大的问题，刚好Cross browser HTML5能够帮您如何轻松创建一个跨浏览器的表单。
25个可遇不可求的jQuery插件
随着jQuery插件在网站建设过程中的使用率不断的增加，所以有必要跟进时代步伐开发出一些新的插件/代码片段，以此来巩固并提高前端用户体验，将用户体验提升到一个新的高度。
接下来所推荐的这些插件中有滑块、地图、图片旋转块等等，可以说是最好的、完全免费的jQuery插件。
1. Flat jQuery Price Slider
实例|下载
这个jQuery价格滑块可以在一定范围内选择需要的价钱，不管你是做开发项目的还是设计项目，它都会起很大的作用。记住，这个插件完全免费。
2. Gmaps jQuery Map Plugin
实例|下载
GMaps.js是一个JavaScript插件，通过它可以很容易地在你的应用程序中使用谷歌地图，并包含了多个选项，如地图、方向、信息框等等。它的脚本是由很少的代码和简洁文档构成的。因为安装操作很简单，所以要想让代码实现功能就得自己动手。
3. FormChimp—MailChimp Ajax plugin for jQuery实例|下载
FormChimp是jQuery里的一个可定义的MailChimp Ajax插件，为用户提供一个简便的注册方式，这样的话用户在你的MailChimp列表里注册就不是一件麻烦的事了。
4. OWL Carousel
实例|下载
此jQuery插件具有的触摸功能可以让用户创建出好看的响应式旋转滑块。
5. jQuery Spellchecker
实例|下载
这个轻量级的jQuery插件能检查文本文档里的单词拼写的正确性，主要是用在一个表单字段里或者是在DOM目录里。
6. Chart js
下载
Chart.js 是一个令人印象深刻的 JavaScript 图表库，建立在 HTML5 Canvas 基础上。目前，它支持6种图表类型：折线图、条形图、雷达图、饼图、柱状图和极地区域区。而且，这是一个独立的包，不依赖第三方JavaScript 库，小于 5KB。颜色，字体，边框和它们的尺寸都可以定制，图表可以动画的形式加载，非常炫。
7. Email-autocomplete
实例|下载
这个插件会建议你或者是直接在邮件地址栏里自动填写完域名。
8. Draggabilly
实例|下载
你可以用这个插件做一些可拖动的jQuery代码片段。
9. Interact.js
实例|下载
这是一个为电脑和移动设备上的浏览器而制作的可拖放、重置大小、调整手势的插件。
10. Sortable
实例|下载
它是一个极简单的JavaScript类库，主要是为现代浏览器和触摸设备而制定的。
11. rowGrid.js
实例|下载
大小只有800bytes gzipped的轻量级jQuery插件用处是把图片或其它项目排版在连续的行内。
12. Scattered Polaroid gallery
实例|下载
这个插件可以在容器里随机排版这些相片，当你选中了一个项目的时候它就会移动到屏幕中间，其它项目自动闪到旁边。
13. Viewport Image Resize
实例|下载
操作上比较简单，没有任何麻烦，重新设置图像大小和对图片进行修剪，这些都是基于pseudo视图而做的。
14. jQueryUI Limitslider
实例|下载
这一滑块插件允许在一条选择线上做出多个滑块，这些滑块可以用来代表位置、尺寸、举例等等，同时还可以在滑块上做标签或者是悬浮标题。
15. Freewall
实例|下载
Freewall是一个跨浏览器、响应式的jQuery插件，可以创建出多种多样适用在电脑、移动设备和平板电脑上的网格布局。
16. jQuery fontIconPicker
实例|下载
这个只有1.58kb gzipped大小的插件，可以让用户创建一个带有搜索功能的简单的图标选择器放在管理列表里。
17. Bootstrap-dialog
实例|下载
这个插件会让用户使用Bootstrap的模型更加熟练。
18. jquery.tabelizer
实例|下载
Tabelizer 1.0.3—用在表格上的多层次分组指标器。
19. Facebook Badge Jquery Plugin
实例|下载
FaceBadge可以在用户网站上添加了一个Facebook页面标记，用起来更省事。
20. Croppic
项目网页
这是一个用来裁剪图片的jQuery插件，效果超出你想象。
21. JQuery Plugin for Google Drive API
实例|下载
这个插件主要是为了让在不同设备上的Google Drive能够同步协作，传输文件等等，包括是Android设备。
22. Pick-a-Color
实例|下载
这项插件的设计之初就是希望所有人都能使用它，它的界面主要是基于Twitter Bootstrap的风格而设计，所以看起来比较亲切。
23. Simple Vertical Menu
下载代码
看上去很简单，但是很时髦的一个插件，使用了一些CSS3和jQuery技术，拥有自定义字体和令人影响深刻的标记图案。
24. jQuery Message Form
下载代码
这只是一个很小的字符计数器的实验版本。
25. Magnifying Glass Plugin with jQuery and CSS3项目主页
这是一个简单的小插件，基于TCP的排版设计。
原文来自：DesignScrazed
Jquery插件（常用的插件库）
作者：一生的风景
转发链接：https://www.cnblogs.com/2979100039-qq-con/p/12775777.html
随着Jquery知识点的结束，我也开始接触到框架来了。
开始的时候，总是听到插件和框架等词，我疑惑框架和插件是啥有啥区别？？
插件可以说有无数种，在网页中任何一种功能都可以被叫做插件，单独提取出来，可以供别人使用，而框架是一个超大好的的插件，它将各种方法融合成一体，使用者可以使用它来构造不同的功能。插件则专注于一种，往往只有一种功能 。
打个比方比如前面学习的jquery，jquery就是一个框架，在jquery插件库里http://www.jq22.com/有数不胜数的插件，这些插件绝大部分基于jq框架来编写。
理解完插件和框架的区别，下面来写一写这几天初步学习的插件库
1.jquery 对于我而言肯定是一个熟悉的框架了
官网网址：https://jquery.com/
插件库：http://www.jq22.com/
这里简单的介绍一下jquery ：jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。
2.Select2 官网网址：https://select2.org/
3.Fullpage 官网网址：https://alvarotrigo.com/fullPage/#page1
4.lazyload 官网网址：https://appelsiini.net/projects/lazyload/
5.Swiper 官网网址：https://www.swiper.com.cn/
6.nice-validator 官网网址 ：https://validator.niceue.com/docs/getting-started.html
以上提及的都是插件库，每一个有着不同的功能，jquery在这里我就不在赘述了。我就从Select2开始写
select2是一款基于jquery的功能丰富的下拉列表插件。这就说明了使用select2必须要有jquery依赖，就是要先导入jquery库，然后在导入select2插件库，然后这是一款关于下拉列表的插件。
使用方法：首先去下载压缩包文件 下载地址：https://codeload.github.com/select2/select2/zip/develop下载完成解压后在文件中我们需要找到相关的js文件和css文件，我们所需要的的就是这两个文件：在dist文件夹下有css和js，js有.js文件和min.js文件，css也是一样的。如下图所示
min.js是压缩版，没有逗号空格等等，体积小传输效率快，但可读性较差可以自行想象一下js代码就一行的场景 .js是没压缩的俗称开发版，可读性较好，易于debug调试和更改；但是体积相比较而言大一些，效率低。我采用压缩版的我不改bugQAQ 这段话或许就解决了心中的疑问
我们将css和js文件复制到我们的项目中就可以开始使用这个插件了。
这个是一个案例效果图接下来就根据这个案例来编写。
首先一点也是重中之重，导入css和js文件，jquery插件库优先导入，js cs就是我们上面复制到项目的文件，如下
在body里面写上一个普通的下拉列表：
我把js注释一下看看效果如何：
这个与和我们的效果图有着很大的区别，如何使用这个插件呢，我们不妨看看文档（虽然全是英文）
在基本语法上有着这样的语句（我们把他定义到我们的案例中去）：.js-example-basic-multiple是一个选择器
在案例中我们如下编写 （效果如右）：
这就是select2的威力，我们就使用了一行js代码就将一个普通的下拉列表变成了这样的的一个视觉效果不错的下拉列表（宽度可以修改，select2内置了很多的属性可以查看文档）。
例如给下拉列表设置宽度只需要如下写（使用大括号编写属性，用逗号分隔每个属性）
在select2文档的第三项中的Options里面有一张配置表里面涵盖了select2所有的属性（英文差的我看的有点吃力）
案例中简单的写了两个属性
插件的出现就是为了简单化代码，让我们少些了很多代码。使用起来方便简洁，就是这样select2的简单案列完成了，select2专注于选框，很多属性，可以去文档一一查阅我这里的介绍就结束了。
翻译过来就是 全屏的意思，我想已经猜出来了，这是一款全屏的插件，整个页面简洁大方，整个屏幕就是一张页面，它的官网就是一个很好的实 例 https://alvarotrigo.com/fullPage/#page1。这样的页面展示很受人喜欢，我相信大部分人都曾见过。
使用方法 同样下载压缩提取js 、css文件 下载地址 https://codeload.github.com/alvarotrigo/fullPage.js/zip/master
这个官网有一点优势emmmmmm他有中文模式 左上角可以选择
将css js复制进自己的项目里面引入js css 同样注意的依赖jquery优先导入jquery库如下：
我们可以查看文档编写（文档中有这样的一句话也就是在html文件中必须有着个声明，所以复制代码是要仔细不要复制掉了）
将这段代码复制到body里开始编写页面 在div的class值，section 以及后面的slide是不能更改的，我们必须按照fillpage的规则来 但最外层div的id可以直接设置，用于js代码中的选择
在js中如下编写（首先我们就用上了sectionsColor属性 定义背景颜色，一一对应）
当想定义横向切换时，这时候slide就登场了 ，将下面代码嵌套到<div class = \”section\”></div>中
它将会产生一个横向轮播图 注意 slide section 不可以更改 如下图所写:
效果如下：
当然插件也并不是万能的，fullpage无法设置字体大小所以需要自己定义大小 下面是自定义样式
在fullpage文档上有着很多属性（往下翻的话有对这些属性一 一的解释）
在我的案列中写了几个案例js代码如下：
文档的属性还算写的清晰，所以可以一点点编写 这一节的效果图不好截我把代码结构写上
这样子fullpage的案列就完结了，跟官网页面相似可以试着运行一下子。
lazyload 译为延迟加载， 又叫懒加载 在这个流量的时代，懒加载的出现是非常nice的，它为用户节省流量的消耗，提高性能，当一个高清图片网站一张页面几十张甚至上百张图片时，没有懒加载，它将会将所有的图片都加载出来，这就导致流量的浪费，降低性能，影响了用户的体验，而懒加载的作用是当用户看到这张图片时，它才开始加载出来，这样子就节省了大量的流量，而且优化了性能，提高了用户体验。
使用方法和上面一样下载lazyload插件包：https://codeload.github.com/tuupola/lazyload/zip/2.x
使用方法很简单，因为它只有一个功能就是延迟加载，所以我就直接上代码了 (注意在下载文件中找到对应的css，js文件复制到自己的项目中) lazyload没有css文件
我使用了12张图片然后js就一句，就可以实现懒加载功能
要为每一张图片添加class = “lazyload” ，且不能使用src 必须使用data-src 下面就来写一写怎么看两者的区别
普通加载：
懒加载：
懒加载的用法简单，但它存在的意义不凡，有些框架也会内置懒加载功能 列如上面介绍的fullpage插件
所以，懒加载的使用结束，或许现在感觉不它的作用，但是以后的编程日子里我想我百分百会和它再次的碰面。
Swiper 译为猛击者，确实在视觉上它的确很吸引我，首先它是一款触摸滑动插件 它与fullpage相似又有着各自的特点。
用swiper来做轮播 ，导航我想是很好的选择 swiper不依赖jq所以当项目中不需要jq时可以不用到jquery库
同样先下载swiper的包：https://www.swiper.com.cn/download/swiper-5.3.7.zip 在文件中找到对应的js css文件，复制到自己的项目然后导入如下：
先上一张效果图：
如图所示一款很炫酷的轮播图可以说swiper的中文文档非常的nice，思路清晰。就是emmmm属性有点多一时半会看完我现在想着，根据以上的插件库案列
这个插件的使用就应该不用我来再做赘述了，我就直接粘贴代码代码如下：
不管是什么插件或者框架，它的使用方法都万变不离其宗。相似是 他们的共同点，更何况swiper的文档看着这么的舒服
nice-validator 插件是一款比关于验证表单的插件，当用户注册时，来判断注册手机号码是否合法，是否为空，密码与确认密码是否相等，邮箱是否合法等等等等。
同样先下载:https://codeload.github.com/niceue/nice-validator/zip/master 复制对应的css js文件 到项目并导入，如下：
以案列为准，由于没有css我直接手写了有个简单的css样式。
当然html的表单也是手写对于样式，id class的名称这些，这款插件与其他的不同，可以自己定义：
js写法：无论那样的写法他实现的功能是一样的
这些属性可以看看文档里面的介绍（我简单的截取两张，更多属性一步官网 https://validator.niceue.com/docs/getting-started.html）
自定义规则
内置规则
这款插件的属性还是蛮多的 在常用规则整理中有着常用的规则。
对了这里有一个绕的地方（我单独截出来反正我看着的时候看半天）
就这样，这款插件有没有过多的介绍了。有很多坑和细节还得自己去真正用的时候去看
以上的五款插件全部介绍完成，案列源码下载：https://files.cnblogs.com/files/2979100039-qq-con/jqy_example_10.zip
我想各位小伙伴们看完这篇文章，也或多或少的对插件或者框架的使用有些了解了，但要明白一件事纸上得来终觉浅的道理，
有心人想要去学习一样东西，他就不止是想还要做。所以勤加练习是学好编程的不灭准则。
学习中，有地方错误还请指正。
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
作者：一生的风景
转发链接：https://www.cnblogs.com/2979100039-qq-con/p/12775777.html
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
