匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。如何通俗易懂地向初学者通解释 jQuery、CSS3 和 HTML5 的关系？_HTML5|CSS3_UDN技术社区 -
Powered by Discuz! Archiver
benbenxiong
如何通俗易懂地向初学者通解释 jQuery、CSS3 和 HTML5 的关系？
[*]HTML是由多种骨头(标签)组成的骨架。
[*]HTML5是更多的新骨头(标签),同时去掉了以前觉得不好用的骨头.
[*]CSS是皮肤。CSS3是更美的皮肤
[*]JS控制单个动作。(抬手,张嘴,放下手,抬腿,转头,握拳等)
[*]jQuery是把一组常用动作编排成了一个招式。
(例如吃饭这个动作里面编排了:拿起勺子,挖一勺饭,把勺子贴近嘴,张嘴,勺子送进嘴,勺子拿出嘴,咀嚼.)
-------------------------------------------------------------------------------------------------------------------------------
以下的东西等你学完JS后，
如果问 jQuery 和 JS 有什么区别？，jQuery能不能取代JS？
用招式(jQuery)跟电脑沟通更方便，不过招式(jQuery)是用单个动作(JS)组合而成的，
所以永远不可能取代单个动作(JS)
招式(jQuery)编排了很多常用的动作(比如跑步，吃饭，跳跃，下蹲)。
但是如果需要某些高难度动作(比如 空中转体720°用脸着地)，而招式(jQuery) 里还没有编排。
那就需要自己用单个动作(JS)来组合一个。
benbenxiong
把整个过程比喻成组装一个机器人的过程
HTML是这个机器人的支架 骨骼 关节 什么的
CSS是这个机器人外部的涂装 用什么颜色 什么主题（荧光白 钻石红）什么的
JS是控制这个机器人行为的 让他抬胳膊 开火 行走 跑步 等等
HTML5是一种新型材料 组成的支架 更耐用 更简洁 更清晰 同时提供一些可以调用的新的牛逼的行为（JS API） 比如 获得该机器人坐标 自动缓存数据 绘图功能 等等
CSS3是一种改进版涂装 更轻 渲染更快 颜色更加绚丽
Jquery是基于JS封装好的控制行为的库 用这种指令 就可以更快的写出控制机器人行为的内容 用这种东西 写出的指令 开发人员可以节省时间 提高效率 但是没有原生的动作（JS） 他什么都做不了
说的好形象啊
benbenxiong
星魂 发表于
说的好形象啊
我也是刚刚开始学，还在摸索中...
学好东西去了，这是要转型的节奏么？有好东西望分享！！！！
benbenxiong
java菜鸟 发表于
学好东西去了，这是要转型的节奏么？有好东西望分享！！！！
我也是初学者啊，正在学习中哦
说的很形象，确实更容易理解了，其实jq就是js的一个框架之一， 楼主棒棒哒，
这个解释确实很形象，就是有点血腥啊
benbenxiong
bobby 发表于
说的很形象，确实更容易理解了，其实jq就是js的一个框架之一， 楼主棒棒哒， ...
哈哈，这也是我学习来了，觉得挺形象的就发上来啦
benbenxiong
朔风飞扬 发表于
这个解释确实很形象，就是有点血腥啊
切，哪里血腥啦？
查看完整版本:& 2005－, all rights reserved 北京豆网科技有限公司9个适合初学者的HTML5入门教程
我的图书馆
9个适合初学者的HTML5入门教程
HTML5作为下一代网站开发技术，无论你是一个 Web
开发人员或者想探索新的平台的游戏开发者，都值得去研究。借助尖端功能，技术和 API，HTML5
允许你创建响应性、创新性、互动性以及令人惊叹的漂亮网站。更进一步，你也可以使用 HTML5 创建原来只能用于桌面平台上的复杂应用程序。
这篇文章挑选了10个适合初学者的 HTML5 入门教程，带你踏上 HTML5 之旅。
1. HTML5 教程 4 U
对于初学者，HTML5 Doctor 网站是开始学习的很好的地方，你可以编辑代码，查看输出结果。
2. 使用 HTML5 和 CSS3 创建一个下拉导航菜单
了解如何使用新的 HTML5 标签和 CSS3 创建一个简单又时尚的下拉菜单。
3. 使用 HTML5 和 CSS3 光滑的登录表单
使用 CSS3 和 HTML5 创建漂亮的登录表单，不需要任何 Javascript 代码。
4. 使用 HTML5，CSS3 和 jQuery 创建下拉式登录框
这是一个简单的教程，可以帮助你使用 CSS3，HTML5 和几行 jQuery 代码创建一个漂亮的下拉登录表单。
5. 使用 HTML5, CSS3 and jQuery 创建可爱的弹出栏
成都嘀嗒-案例--2015网站制作收费明细,按照这个简单的教程中的步骤来建立一个弹出页面顶部的信息栏，你可以用它来显示从新闻、最新的博客文章等。
6. 如何创建一个很酷和实用的 CSS3 搜索框
了解如何使用 HTML5 的占位符属性来创建一个很酷和实用的 CSS3搜索框。
7. 使用 HTML5 创建一个有吸引力的在线演示文稿
本教程将教你如何使用 HTML5 的标签，nav, menu, section, aside 和 header 制作漂亮的演示文稿。
8. HTML5 灰度图像和悬停效果
你可能已经在其他网站上看到过这样的效果。按照本教程中的步骤学习如何使用 HTML5 和 jQuery 来动态地把彩色图像转化为灰度模式。
9. HTML5 幻灯片 – 使用 Canvas and jQuery
了解如何创建一个优雅的幻灯片过渡效果。
了解如何使用一些 CSS3 技术制作一个好看的 HTML5 表单。
TA的最新馆藏[转]&HTML5初学者福利！绝对干货!(附：优秀的前端开发必读书籍下载) - 简书
HTML5初学者福利！绝对干货!(附：优秀的前端开发必读书籍下载)
HTML5由于可以基本适用于所有移动端的语言，移动端的画面感、尺寸大小、显示效果等都不会受到限制和局限。这让它强势崛起，成为了互联网行业的新宠，让更多的人想要系统的学习它。而大多数人获取HTML5知识的重要途径都是网络，不过面对五花八门的搜索结果，是不是觉得摸不着头脑，无法抉择？本文作者以自己的实践经验，结合很多网友的推荐并自己亲自测验，筛选出来11个在线学习HTML5开发的网站，让HTML5的学习可以跟随自己的节奏进行，不再那么困难。同样，可以编译HTML的编译器也同样很多，
这里我也将推荐两款很好用的可以编译HTML的编译器。
几本成为优秀前端开发者必读的书籍，附PDF下载方式。
HTML5基本支持所有移动端.png
自学网站推荐
W3School是学习HTML5最好的资源之一，它拥有的教程都带有例子，几乎可以解决你所需要的所有知识点。如果你想从基础开始学习HTML5的话，那么这个网站会是一个很好的选择。你可以学习到HTML5的所有元素，比如标签、图像、图形，以及无需多做其他操作，只需跟随教程的教书步骤走即可，用简单的语言解释和交互让学习变得简单。并且该网站也有CSS以及JS的知识讲解，你需要的是按照从上至下，一点点学下去，并将例子等都在编译器上敲写一遍，很简单的一些网页界面你都可以轻松独自做出来。
W3School网站.png
如果想要观看HTML5的速成课程，以及获取学习HTML5的所有性能，那么htmlgoodies会是一个不错的开始。在网站的左边部分，你可以看到分类细致的基础、教程。问答等，你可以任意快速跳转到自己想要开始学习的部分。不过这个网站可能需要你有一定的英语基础，真是想学这都不是障碍，你可以下载欧路词典，可以选中翻译就可以读懂啦！
HTMLGOODIES界面.png
HTML5 Doctor网站提供了许多内容不错的文章，这些文章将会帮你更好的学习和实现HTML5开发。而且，除了这一特色，网站还有一个“Ask the Doctor”部分，在这里，可以向专家提问，通过他们的专业讲解解决你遇到的所有问题。
Heml5doctor界面.png
HTML5-tutorial可以让你在短时间内有一个良好的开局，在这里，你可以了解HTML5的基本知识和要点，如何构建一个网站、编辑和调试代码进行开发学习，很适合初学者入门学习。
Heml5-tutorial.png
这是一个在线编程网站，你就不需要自己安装编译器了。课程介绍：前端开发(HTML、CSS、JavaScript)、PHP开发，每个方向的课程又分为初、中、高三个级别。支持包括Java、Python、Nodejs、C等多种编程语言。特点：慕课网课程自制，并且全部免费。交互式社交化在线编程学习，用户可以在线讨论，进行代码快照交流;提供实操性强的案例视频，动画元素丰富，趣味性强。同时，也提供iOS、Android应用，用户能随时随地利用碎片时间进行学习。
慕课网首页截图.png
这是一个视频教学网站，有收费的，也有很多不收费的课程，在这里不仅仅可以学习Html5，还可以学习很多其它的前段开发的知识。
百度传课.png
适合初学者的学习的在线编程学习网站1、在线开发环境在萌码学习，用户无需配置编程环境，所有学习和操作在网页中均能实现。2、互动式学习“互动式”的教学过程如同老师手把手教学，消除了用户学习过程中的干扰因素；同时，网站还将理论与实践融为一体，用户能够一边学习一边进行实际操作，掌握知识点的同时便能实践，从而加深了学习记忆。通过这种人机交互，就算是最零基础的“小白”用户也能搞定。3、时光机“时光机”功能类似程序员们 debug 的过程，它能让用户回放每一个编程步骤，看每一步的程序运行过程和结果，并以图形化方式显示，这样用户可以清晰地理解每一步的含义，并找出代码出错的地方进行修正，从而避免在未来的编程过程中再犯类似的错误。
萌码网站.png
这是一个下载优秀源码的地方，这里有各种大神分享的自己做的各种酷炫的特效网页，还有分享自己的开发经验等，非常值得你存下来，没事看看。
源码之家可下载例子.png
好用的编译器
通过在线编程的网站学习是不需要编译器的，但是要是想方便自己练习，那么你就需要有个好用的编译器，下面我将推荐两个我用着很好的编译器。1.Sumlime Text
这个编译器简单便捷，界面直观简单，支持多种开发语言，并且体积小，只有20M左右，并且支持Mac版和Window版，但是需要下载一些插件，才能让你的编译更加快捷，只需要百度就可以。
Sumblme Text.png
2.Dreamweaver(简称Dw)
这是我十分推荐的一款软件，关于详情可以看我前面写的一篇专门介绍这个软件的博文我也提供了下载链接和破解方法，这个软件的优点就是，不需要下载插件，并能实时查看你的写的代码的效果。具体，看之前的博文即可，强烈推荐该软件！
左代码区右代码效果.png
优秀前端开发者必读书籍推荐
第一阶段：《JavaScript DOM编程艺术》看这本书之前，请先确认您对Javascript有个基本的了解，应该知道if else之类的语法，如果不懂，先去看看我第二阶段推荐的《Javascript高级程序设计》的前三章，记住看三章就别往下看了，回到《JavaScript DOM编程艺术》这本书上来。学习Javascript用《JavaScript DOM编程艺术》来入门最好不过了，老老实实看两遍，看完了你就会对JS有一个大概的了解，整本书都围绕着一个网页效果例子展开，你跟着老老实实敲一篇，敲完之后，你会发现这个效果不是常在网页中看到么，发现自己也能做出来网上的效果了，嘿嘿，小有成就感吧。
第二阶段：《JavaScript高级程序设计》有的书是用来成为经典的，比如犀牛书；还有些书是用来超越经典的，显然这本书就是这种。书中章章经典，由浅入深，其中第6章，关于JS面向对象的解说，没有教程出其右。如果有一场满分100分的JS考试，看了《JavaScript DOM编程艺术》能让你拿到20分，那么看完这本书，你就能拿到60分以上了。学完后，你会成就感倍增的，相信我（至少看两遍，推荐三篇，跟着书上的代码一行行的敲）。这本书强烈推荐购买，写的太TMD牛逼了，给你带来的价值超过百倍千倍。这本书最新的是第三版，貌似就是前些日子出来的，我看的是第二版，第三版相对第二版变动不大，添加了几章内容，价格目前相差10元左右。接下来，恭喜你可以下山了，这个时候可以自己做一些事情了需要多敲代码多发现，但必须要去看书。千万不能学习网上那种浮躁的方法，直接实践，不懂然后直接找解决方案，这可以帮助你解决一时之需，但遇到类似的问题的时候，你并不能马上触类旁通，长远来说这无论对于程序员还是其它职业来说无疑是降低了学习的效率。只有书籍里面的内容才是经得起考验，真正放心地放到我们的知识存储里面。你可以去Ferris这个教程看看他写的这些效果，看看源代码，怎么样，是不是觉得有一部分很简单了，尝试着跟着他写一写这些效果吧。学技术闭门造车是行不通的，适当的加一两个QQ群交流（注重质量），常去论坛逛逛，你会经常有些小收获的。再有就是看看前辈这些牛人前辈们分享的文章，它会让你的学习事半功倍的。
第三阶段：《JavaScript语言精粹》和《高性能JavaScript》接下来两本书《JavaScript语言精粹》和《高性能JavaScript》算是JS高级教程的补充，里面有一些内容和JS高级教程重复了，两本书可以同时看，都不厚，可以对前面所学的有一个很好的加强和巩固。
第四阶段：《JavaScript DOM高级程序设计》和《JavaScript设计模式》在吃透了前面所说的书之后，接下来两本书的顺序已经无关紧要了，《JavaScript DOM高级程序设计》（注意和《JavaScript 高级程序设计》相区别）和《JavaScript设计模式》，这两本都是重量级的书，能让你的JS技术上一个新的台阶；这两本书前者主修炼外功，后者主修炼内功，有点想乾坤大挪移和九阳神功的关系。《JavaScript DOM高级程序设计》 首先教你搭建一个类似JQuery的额工具函数库，然后通过讲解几个实际中经常遇到的几个应用例子，会让初学者受益匪浅。《JavaScript设计模式》主要讲Javascript的设计模式，说实话，翻译的质量很一般，有些生硬，但已经基本不影响你的学习，看代码完全可以理解出自己的意思。看书的目的主要是掌握理论知识，梳理JS的知识结构。对JS的高级特性，个人感觉视频不能达到那个深度。而且JS的一些基础的问题，或一个知识的扩充，限于各种条件的限制，可能无法完全表达出来。所以要结合书来补充。
一般学习的心态是：不急不躁，不快不慢。持之以恒，相信自己。
（提取码：3d6f）
如果你也有很多自己觉得很不错的学习网站，欢迎留言，我将会加到文章中，互联网是一个多分享才能多学习的地方，欢迎在评论区分享哦！
如果对你有帮助就点个赞吧！有错误欢迎指正。
Brave dream you may have to fulfill your dreams！