web前端需要哪些技术？ web前端开发都包括哪些技术
web\u524d\u7aef\u9700\u8981\u54ea\u4e9b\u6280\u672f\u6240\u6709\u77e5\u8bc6\u6846\u67b6\uff0c\u90a3\u80af\u5b9a\u662f\u4e00\u4e2a\u7ed3\u6784\u578b\u7684\u5c55\u73b0\uff0c\u5c31\u662f\u4e00\u68f5\u6811\u3002web\u524d\u7aef\u7684\u77e5\u8bc6\u70b9\u975e\u5e38\u591a\uff0c\u4e5f\u975e\u5e38\u6563\uff0c\u9700\u8981\u597d\u51e0\u5c42\u7ed3\u6784\u6765\u7ec4\u7ec7\u8fd9\u4e2a\u4f53\u7cfb\uff0c\u5426\u5219\u5c31\u4f1a\u663e\u5f97\u5f88\u4e71\u3002\u90a3\u4e48\u5982\u4f55\u7ec4\u7ec7\u3001\u628a\u8c01\u548c\u8c01\u653e\u5728\u4e00\u5757\u513f\uff1f\u8fd9\u662f\u771f\u6b63\u503c\u5f97\u6211\u4eec\u53bb\u601d\u8003\u7684\uff0c\u4f60\u4e5f\u53ef\u4ee5\u81ea\u5df1\u6765\u601d\u8003\u4e00\u4e0b\u8fd9\u4e2a\u95ee\u9898\u3002
\u5728\u6211\u603b\u7ed3\u7684\u8fd9\u4e2a\u77e5\u8bc6\u6846\u67b6\u4e2d\uff0c\u9996\u5148\u7b2c\u4e00\u5c42\u6211\u5212\u5206\u4e3a\uff1a\u7406\u8bba\u77e5\u8bc6\uff0c\u7c7b\u5e93\u6846\u67b6\uff0c\u7f16\u7801\u5f00\u53d1\uff0c\u8fd0\u884c\u73af\u5883\u3002\u5982\u4e0b\u56fe\uff1a
\u63a5\u4e0b\u6765\u7ed9\u5927\u5bb6\u89e3\u91ca\u4e00\u4e0b\uff1a
\u8fd9\u4e2a\u56fe\u8981\u4ece\u4e0b\u5f80\u4e0a\u770b\uff0c\u4e3a\u4f55\uff1f\u2014\u2014\u56e0\u4e3a\u4e0b\u9762\u662f\u4e0a\u9762\u7684\u57fa\u7840\uff1b
\u9996\u5148\uff0c\u6211\u4eec\u9700\u8981\u4e00\u5b9a\u7684\u7406\u8bba\u77e5\u8bc6\uff0c\u4e0d\u7ba1\u662f\u4f60\u542c\u522b\u4eba\u8bb2\u6388\u3001\u81ea\u5df1\u770b\u4e66\u8fd8\u662f\u7f51\u4e0a\u6dd8\u8d44\u6599\uff0c\u4f60\u90fd\u9700\u8981\u4e00\u5b9a\u7684\u7406\u8bba\u77e5\u8bc6\uff0c\u6bcf\u4e00\u79cd\u7a0b\u5e8f\u5f00\u53d1\uff0c\u90fd\u907f\u514d\u4e0d\u4e86\u3002
\u7b2c\u4e8c\uff0c\u6709\u4e86\u8fd9\u4e9b\u7406\u8bba\u77e5\u8bc6\u6211\u4eec\u5c31\u53ef\u4ee5\u7f16\u7801\u4e86\u2014\u2014\u4e0d\u9519\u2014\u2014but\uff0c\u6ca1\u6709\u4eba\u80fd\u62b5\u6321\u4f4f\u7b2c\u4e09\u65b9\u6846\u67b6\u548c\u7c7b\u5e93\u7684\u8bf1\u60d1\uff0c\u4f8b\u5982jquery\uff1b
\u7b2c\u4e09\uff0c\u6709\u4e86\u8fd9\u4e9b\u7406\u8bba\u77e5\u8bc6\u548c\u534f\u52a9\u6211\u4eec\u7684\u7c7b\u5e93\u6846\u67b6\uff0c\u6211\u4eec\u5c31\u53ef\u771f\u6b63\u7684\u7f16\u7801\u4e86\u3002\u5927\u5bb6\u53ef\u80fd\u4ee5\u4e3a\u7f16\u7801\u5f00\u53d1\u4e0d\u5c31\u662f\u5199\u4ee3\u7801\u5417\uff0c\u8fd8\u6709\u5565\uff1f\u2014\u2014\u8fd9\u91cc\u9762\u9053\u9053\u591a\u7740\u5462\uff1b
\u6700\u540e\uff0c\u5f00\u53d1\u7a0b\u5e8f\u7684\u76ee\u7684\uff0c\u6700\u7ec8\u662f\u4e3a\u4e86\u80fd\u9ad8\u6548\u3001\u7a33\u5b9a\u7684\u8fd0\u884c\u5728\u76f8\u5e94\u7684\u73af\u5883\u4e2d\uff0c\u8fd9\u5176\u4e2d\u53c8\u6709\u54ea\u4e9b\u4e8b\u60c5\u9700\u8981\u6211\u4eec\u53bb\u505a\uff1f\u8bf7\u671f\u5f85\uff1b
\u7406\u8bba\u77e5\u8bc6 \u5305\u62ec\u201c\u8f6f\u77e5\u8bc6\u201d\u548c\u201c\u786c\u77e5\u8bc6\u201d
\u201c\u8f6f\u77e5\u8bc6\u201d\u548c\u201c\u786c\u77e5\u8bc6\u201d\u5927\u5bb6\u53ef\u80fd\u89c9\u5f97\u8bcd\u964c\u751f\uff0c\u5176\u5b9e\u6211\u4e00\u8bf4\u5927\u5bb6\u5c31\u80fd\u660e\u767d\u3002
\u6240\u8c13\u201c\u8f6f\u201d\u7684\u5c31\u662f\u80fd\u5728\u5404\u4e2a\u7a0b\u5e8f\u5f00\u53d1\u4e2d\u90fd\u7528\u5230\u7684\uff0c\u7b97\u662f\u57fa\u672c\u529f\u3001\u5185\u529f\uff0c\u4f8b\u5982\u6570\u636e\u7ed3\u6784\u3001\u7b97\u6cd5\u3001\u8bbe\u8ba1\u6a21\u5f0f\u3001\u9762\u5411\u5bf9\u8c61\u7b49\u7b49\uff1b
\u6240\u8c13\u201c\u786c\u201d\u7684\u5c31\u662f\u80fd\u76f4\u63a5\u7528\u4e8e\u672c\u7a0b\u5e8f\u5f00\u53d1\u7684\u3002\u7528C\u8bed\u8a00\u4f60\u5c31\u5f97\u5b66C\u8bed\u8a00\u8bed\u6cd5\uff0c\u6b64\u65f6\u5b66java\u6ca1\u7528\u3002\u6211\u4eecweb\u524d\u7aef\u5f00\u53d1\u6240\u9700\u8981\u7684\u786c\u77e5\u8bc6\u5176\u5b9e\u90fd\u5305\u542b\u5728\u4e09\u4e2a\u6807\u51c6\u91cc\u9762\uff1ahttp\u6807\u51c6\u3001W3C\u6807\u51c6\u548cECMAScript\u6807\u51c6\uff1b
\u804a\u4e00\u804aweb\u524d\u7aef\u5f00\u53d1\u4e2d\u7684\u201c\u786c\u77e5\u8bc6\u201d
\u201c\u8f6f\u77e5\u8bc6\u201d\u7684\u5185\u5bb9\u975e\u5e38\u591a\uff0c\u4e5f\u662f\u6211\u4eec\u5927\u5b66\u65f6\u4ee3\u5b66\u4e60\u7684\u91cd\u70b9\uff08\u6ca1\u5b66\u597d\u662f\u53e6\u56de\u4e8b\u513f\uff0c\u6bd5\u4e1a\u518d\u6076\u8865\uff09\u3002\u6211\u4eec\u672c\u6b21\u4e3b\u8981\u8ba8\u8bba\u7684\u662fweb\u524d\u7aef\u8fd9\u4e00\u4e2a\u65b9\u5411\uff0c\u56e0\u6b64\u5c31\u70b9\u5230\u4e3a\u6b62\uff0c\u8ba9\u5927\u5bb6\u77e5\u9053\u8fd9\u4e9b\u77e5\u8bc6\u4e5f\u5728\u77e5\u8bc6\u4f53\u7cfb\u4e2d\u626e\u6f14\u91cd\u8981\u89d2\u8272\u3002
\u521a\u624d\u8bf4\u9053\uff0c\u786c\u77e5\u8bc6\u6709\u4e09\u4e2a\u6807\u51c6\uff1ahttp\u6807\u51c6\u3001W3C\u6807\u51c6\u548cECMAScript\u6807\u51c6\uff0c\u90a3\u54b1\u4eec\u5c31\u6328\u4e2a\u804a\u804a\u8fd9\u4e09\u4e2a\u6807\u51c6\u3002
1. http\u6807\u51c6
\u4e3a\u4ec0\u4e48\u505aweb\u524d\u7aef\u8981\u4e86\u89e3http\u6807\u51c6\uff1f\u2014\u2014\u56e0\u4e3a\u6d4f\u89c8\u5668\u8981\u4ece\u670d\u52a1\u7aef\u83b7\u53d6\u7f51\u9875\uff0c\u7f51\u9875\u4e5f\u53ef\u80fd\u5c06\u4fe1\u606f\u518d\u63d0\u4ea4\u7ed9\u670d\u52a1\u5668\uff0c\u8fd9\u5176\u4e2d\u90fd\u6709http\u7684\u8fde\u63a5\u3002web\u7cfb\u7edf\u65e2\u7136\u548chttp\u94fe\u63a5\u6709\u74dc\u845b\uff0c\u4f60\u5c31\u5fc5\u987b\u53bb\u4e86\u89e3\u5b83\u3002
\u6211\u7684\u610f\u89c1\u662f\uff1a\u4f60\u4e0d\u5fc5\u53bb\u975e\u5e38\u4e86\u89e3http\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u4f46\u662f\u4f60\u8981\u4e86\u89e3web\u524d\u7aef\u5f00\u53d1\u5e38\u7528\u7684\u4e00\u4e9bhttp\u7684\u77e5\u8bc6\u2014\u2014\u5c31\u662f\u4e0a\u56fe\u4e2d\u6211\u5217\u51fa\u6765\u7684\u90a3\u4e9b\u3002\u5f53\u7136\uff0c\u6211\u77e5\u8bc6\u5217\u4e86\u4e00\u4e2a\u7eb2\uff0c\u8be6\u7ec6\u5185\u5bb9\u8fd8\u5f97\u9760\u4f60\u81ea\u5df1\u53bb\u67e5\u9605\uff08\u672c\u6587\u7ae0\u8bb2\u7684\u662f\u77e5\u8bc6\u6846\u67b6\uff0c\u4e0d\u4f1a\u6d89\u53ca\u4efb\u4f55\u77e5\u8bc6\u70b9\u7684\u8be6\u7ec6\u5185\u5bb9\uff09
\u5173\u4e8e\u8fd9\u65b9\u9762\u7684\u77e5\u8bc6\uff0c\u5efa\u8bae\u53bb\u67e5\u9605\u300a\u56fe\u89e3http\u300b\u8fd9\u672c\u4e66\uff0c\u6d45\u663e\u6613\u61c2\u7684\u8bb2\u8ff0\u4e86\u8fd9\u4e9b\u5185\u5bb9\uff0c\u6211\u66fe\u7ecf\u4e5f\u770b\u8fc7\u3002
2.W3C\u6807\u51c6
\u5982\u679c\u8bf4\u4f60\u53ea\u77e5\u9053web\u524d\u7aef\u7684\u4e00\u4e2a\u6807\u51c6\uff0c\u4f30\u8ba1\u80af\u5b9a\u662fW3C\u6807\u51c6\u4e86\uff08\u636e\u6211\u4e86\u89e3\uff0c\u8c8c\u4f3c\u5927\u90e8\u5206\u4eba\u771f\u7684\u90fd\u53ea\u77e5\u9053\u8fd9\u4e00\u4e2a\u6807\u51c6\uff09\u3002\u5b83\u7684\u5185\u5bb9\u975e\u5e38\u591a\uff0c\u770b\u770bwww.w3.org/TR/\u8fd9\u4e2a\u9875\u9762\u3002
\u5199\u5230\u8fd9\u91cc\u8ba9\u6211\u60f3\u8d77\u4e86\u4e00\u53e5\u8bdd\uff1a2/8\u539f\u5219\u2014\u201420%\u7684\u529f\u80fd\u6ee1\u8db380%\u7684\u9700\u6c42\u3002\u6211\u89c9\u5f97\u8fd9\u53e5\u8bdd\u7528\u5230\u8fd9\u91cc\u975e\u5e38\u5408\u9002\uff0c\u6211\u4eec\u5728\u5e73\u65f6\u5f00\u53d1\u8fc7\u7a0b\u4e2d\u6839\u672c\u7528\u4e0d\u5230\u8fd9\u4e48\u591a\u4e1c\u897f\u3002\u53cd\u800c\uff0c\u4f60\u8981\u628a\u5e73\u65f6\u7528\u7684\u591a\u7684\u4e1c\u897f\u641e\u61c2\u4e86\u3002
\u4e0b\u56fe\u7684\u8fd9\u4e9b\u77e5\u8bc6\uff0c\u6211\u60f3\u4e0d\u7528\u518d\u8fc7\u591a\u89e3\u91ca\u4e86\uff0c\u8fd9\u5c31\u662f\u6211\u6587\u7ae0\u5f00\u53d1\u8bf4\u7684\u201c\u4e09\u5927\u5757\u201d\uff08html\u3001css\u3001js\uff09\u3002\u73b0\u5728\u4f60\u8981\u77e5\u9053\uff0c\u5b83\u4eec\u53ea\u4e0d\u591a\u662fW3C\u6807\u51c6\u7684\u4e00\u90e8\u5206\uff0c\u800cW3C\u6807\u51c6\u4e5f\u53ea\u662fweb\u524d\u7aef\u5f00\u53d1\u77e5\u8bc6\u4f53\u7cfb\u4e2d\u7684\u4e00\u90e8\u5206\u800c\u5df2\u3002
\uff08\u4e0b\u56fe\u6ca1\u6709\u5b8c\u5168\u5c55\u5f00\uff0c\u60f3\u770b\u6743\u5c55\u5f00\u7684\u56fe\uff0c\u53ef\u4e0b\u8f7d\u672c\u6587\u4e00\u5f00\u59cb\u63d0\u4f9b\u7684\u9644\u4ef6\uff09
\u5173\u4e8eCSS\u7684\u57fa\u7840\u77e5\u8bc6\uff0c\u6bdb\u9042\u81ea\u8350\u4e00\u4e0b\u81ea\u5df1\u4e4b\u524d\u7684\u4e00\u7bc7\u7cfb\u5217\u535a\u5ba2\uff1a\u300aCSS\u77e5\u591a\u5c11\u300b
3. ECMAScript\u3000\u3000
\u7b80\u79f0ES\uff0c\u5199\u5168\u79f0\u592a\u9ebb\u70e6\u4e86\u3002
\u6709\u4e9b\u4eba\u53ef\u80fd\u53ea\u77e5\u9053javascript\uff0c\u800c\u4e0d\u77e5\u9053ES\u2014\u2014\u5176\u5b9e\uff0cjs\u662f\u5728ES\u7684\u57fa\u7840\u4e0a\uff0c\u4e3aweb\u6d4f\u89c8\u5668\u505a\u4e86\u4e00\u90e8\u5206\u5c01\u88c5\uff08\u589e\u52a0\u4e86DOM\u64cd\u4f5c\u3001BOM\u64cd\u4f5c\u7b49\uff09\u3002
\u5982\u4e0a\u56fe\u4e2d\u7684\u8fd9\u4e9b\u6982\u5ff5\uff0c\u5927\u5bb6\u53ef\u80fd\u5e73\u65f6\u90fd\u5728javascript\u4e2d\u770b\u5230\uff0c\u5176\u5b9e\u4ed6\u4eec\u662fES\u7684\u5185\u5bb9\u3002\u53ea\u4e0d\u8fc7javascript\u7ee7\u627f\u4e86ES\u7684\u8fd9\u4e9b\u7279\u6027\uff0c\u5e76\u4e14javascript\u7528\u7684\u6bd4\u8f83\u5e7f\u6cdb\uff0c\u56e0\u6b64\u624d\u4f1a\u5728js\u4e2d\u8ba8\u8bba\u7684\u591a\u4e00\u4e9b\u3002
\u8fd8\u662f\u90a3\u4e2a\u201c2/8\u539f\u5219\u201d\u3002\u5176\u5b9eES\u4e2d\u7684\u5185\u5bb9\u4e5f\u975e\u5e38\u591a\uff0c\u800c\u4e14\u66f4\u65b0\u5f88\u5feb\uff0c\u73b0\u5728\u90fd\u5230ES6\u4e86\u3002\u4f46\u662f\u6211\u4e0a\u56fe\u4e2d\u5217\u51fa\u6765\u7684\u8fd9\u4e9b\u90fd\u662f\u6700\u91cd\u8981\u7684\u6982\u5ff5\u3002\u5982\u679c\u4f60\u4e0d\u61c2\u539f\u578b\u3001\u95ed\u5305\u548c\u4f5c\u7528\u57df\uff0c\u90a3\u5c31\u8bf4\u660e\u4f60\u8fd8\u4e0d\u5b8c\u5168\u4e86\u89e3ES\uff0c\u4e5f\u5c31\u662f\u4e0d\u5b8c\u5168\u4f1a\u7528javascript\u3002
\u5728\u6b64\u6bdb\u9042\u81ea\u8350\u81ea\u5df1\u4e4b\u524d\u7684\u4e00\u7bc7\u7cfb\u5217\u535a\u5ba2\uff0c\u5927\u5bb6\u53ef\u4ee5\u53bb\u53c2\u8003\uff1a\u300a\u6df1\u5165\u7406\u89e3javascript\u539f\u578b\u548c\u95ed\u5305\u7cfb\u5217\u300b
5. \u6846\u67b6\u548c\u7c7b\u5e93
\u524d\u9762\u5df2\u7ecf\u63cf\u8ff0\u5b8c\u4e86web\u524d\u7aef\u5f00\u53d1\u6240\u9700\u8981\u7684\u7406\u8bba\u77e5\u8bc6\u3002\u5982\u4f55\u5b9e\u8df5\u5462\uff1f\u2014\u2014\u4e0d\u80fd\u86ee\u5e72\u2014\u2014\u8fd8\u5f97\u7ed5\u4e16\u754c\u53bb\u770b\u770b\uff0c\u6709\u54ea\u4e9b\u5927\u725b\u5df2\u7ecf\u4e3a\u6211\u4eec\u505a\u51fa\u4e86\u5982\u6b64\u591a\u7684\u8d21\u732e\u3002
\u7528\u4e0b\u9762\u7684\u8fd9\u4e9b\u7c7b\u5e93\u6216\u8005\u6846\u67b6\uff0c\u80fd\u5927\u5927\u63d0\u9ad8\u4f60\u7684\u5f00\u53d1\u6548\u7387\u3002
\u9996\u5148\uff0cjquery\u4e00\u5b9a\u662f\u5927\u90e8\u5206web\u524d\u7aef\u5f00\u53d1\u8005\u4e0d\u53ef\u6216\u7f3a\u7684\u5de5\u5177\u3002\u800c\u6211\u5229\u7528jquery\u4e0d\u4ec5\u4ec5\u505c\u7559\u5728\u53ea\u4f7f\u7528\u5b83\u7684API\u548c\u63d2\u4ef6\u4e0a\uff0c\u6211\u8fd8\u4f1a\u81ea\u5df1\u53bb\u5199jquery\u63d2\u4ef6\uff0c\u6211\u8fd8\u4f1a\u53bb\u8bfbjquery\u7684\u6e90\u7801\u3001\u4e86\u89e3jquery\u7684\u8bbe\u8ba1\u601d\u8def\u3002\u5982\u679c\u4f60\u4e5f\u80fd\u90a3\u6837\u505a\uff0c\u8bf7\u76f8\u4fe1\u6211\uff0c\u4f60\u4f1a\u6536\u83b7\u5230\u610f\u60f3\u4e0d\u5230\u7684\u6548\u679c\u3002\u5982\u679c\u6709\u4e00\u4e2a\u95ee\u9898\uff1a\u600e\u6837\u624d\u80fd\u6700\u6700\u900f\u5f7b\u7684\u7406\u89e3javascript\u7684\u4e8b\u4ef6\u7cfb\u7edf\uff1f\u6700\u4f73\u7b54\u6848\u4e4b\u4e00\uff1a\u8bfb\u51e0\u904d\uff08\u4e00\u904d\u53ef\u80fd\u8bfb\u4e0d\u61c2\uff09jquery\u5173\u4e8e\u4e8b\u4ef6\u5904\u7406\u90e8\u5206\u7684\u6e90\u7801\uff01
bootstrap\u4e0d\u7528\u518d\u8fc7\u591a\u89e3\u91ca\u4e86\u5427\uff0c\u4ecegithub\u4e0a\u7684\u6392\u540d\u4e5f\u80fd\u770b\u51fa\u9053\u9053\u6765\u3002\u751a\u81f3\u8fde\u6211\u4eec\u516c\u53f8\u7684UI\u8bbe\u8ba1\u5e08\uff0c\u90fd\u4ecebootstrap\u4e0a\u622a\u56fe\u4f5c\u4e3a\u7d20\u6750\u3002
fontAwesome\u662f\u5168\u4e16\u754c\u6700\u5f3a\u5927\u7684\u56fe\u6807\u7cfb\u7edf\u3002\u76f8\u6bd4\u4e8ecss\u5236\u4f5c\u56fe\u6807\u6765\u8bf4\uff0c\u8fd9\u4e2a\u8981\u597d\u5f88\u591a\u500d\uff0c\u4e0d\u7ba1\u662f\u5f00\u53d1\u3001\u6548\u7387\u8fd8\u662f\u7ef4\u62a4\u4e0a\u3002icomoon.io\u80fd\u8ba9\u6211\u81ea\u5b9a\u4e49\u9009\u62e9\u81ea\u5df1\u7684\u56fe\u6807\u6587\u4ef6\u3002
requirejs\u548cseajs\u8fd9\u79cd\u6a21\u5757\u5b9a\u4e49\u7cfb\u7edf\uff0c\u4e5f\u4e00\u5b9a\u662f\u4f60\u7cfb\u7edf\u4e2d\u4e0d\u53ef\u6216\u7f3a\u7684\u3002\u6211\u66fe\u7ecf\u770b\u8fc7\u4e00\u4e2a\u6559\u7a0b\uff0c\u8bb2\u5e08\u5c31\u8bf4\uff1arequirejs\u5e26\u6765\u4e86\u65e2jquery\u4e4b\u540e\u7684\u7b2c\u4e8c\u6b21\u524d\u7aef\u6280\u672f\u53d8\u9769\u3002
\u5176\u4ed6\u7684\uff0cbackbone\u3001angular\u3001react\u8fd9\u4e9b\u4e5f\u6162\u6162\u7684\u5f00\u59cb\u53d1\u6325\u4e86\u4ed6\u4eec\u7684\u4ef7\u503c\uff0c\u6b64\u5904\u7cbe\u529b\u6709\u9650\u5c31\u4e0d\u518d\u8d58\u8ff0\u4e86\u2014\u2014\u4f46\u662f\uff0c\u4ed6\u4eec\u5f88\u91cd\u8981\u2014\u2014\u4f60\u81f3\u5c11\u8981\u8bd5\u7740\u53bb\u4e86\u89e3\u5b83\u4eec\u3002
6. \u7f16\u7801\u5f00\u53d1
\u8981\u95ee\u7f16\u7801IDE\u54ea\u5bb6\u5f3a\uff0c\u5f53\u7136\u8981\u5c5e\u5fae\u8f6f\u7684visual studio\uff01\u4f46\u662f\u5373\u4fbf\u662f\u5fae\u8f6f\u7684VS\u6700\u65b0\u7248\u672c\uff0c\u5b83\u4e5f\u4ee3\u66ff\u4e0d\u4e86\u4e0b\u9762\u8981\u8bf4\u7684\u8fd9\u5957\u5f00\u53d1\u73af\u5883\u3002
\u5982\u679c\u4f60\u4e13\u95e8\u505aweb\u524d\u7aef\uff0c\u5c31\u4e0d\u8981\u5728\u7528vs\u4e86\uff0c\u5f53\u7136\u8981\u9009\u62e9sublime\u3002\u5199html\u8bed\u53e5\u8fd8\u7528\u624b\u52a8\u4e00\u6761\u4e00\u6761\u5199\u5417\uff1f\u4f60\u5f97\u9700\u8981zencoding\u7684\u534f\u52a9\uff0c\u5426\u5219\u6548\u7387\u592a\u5dee\u4e86\u3002
\u53e6\u5916\uff0c\u9488\u5bf9html\u3001css\u3001js\u7684\u538b\u7f29\u3001\u5408\u5e76\u3001\u8bed\u6cd5\u68c0\u67e5\uff0c\u6587\u4ef6\u7684\u6e05\u9664\u3001\u590d\u5236\u8fd9\u4e9b\u64cd\u4f5c\uff0c\u4f60\u8fd8\u8981\u624b\u52a8\u53bb\u505a\u5417\uff1f\u2014\u2014\u4f60\u9700\u8981grunt\u6216\u8005gulp\u7684\u5e2e\u52a9\u3002
\u5728\u6b64\u6bdb\u9042\u81ea\u8350\u81ea\u5df1\u7684\u6559\u7a0b\u300a\u7528grunt\u642d\u5efa\u81ea\u52a8\u5316web\u5f00\u53d1\u73af\u5883\u300b\uff0c\u8bb2\u7684\u6bd4\u8f83\u8be6\u7ec6\uff0c\u9002\u5408\u521d\u5b66\u8005\u5b66\u4e60\u3002
\u5982\u679c\u4f60\u7684\u7cfb\u7edf\u4e2d\u6709\u6bd4\u8f83\u591a\u7684js\u4ee3\u7801\u6216\u8005\u6587\u4ef6\uff0c\u8bf7\u9009\u62e9\u4e00\u4e2a\u5408\u9002\u7684\u6a21\u5757\u5b9a\u4e49\u89c4\u8303\u2014\u2014CMD / AMD
\u8bf7\u7528git\u6765\u5e2e\u52a9\u4f60\u505a\u6587\u4ef6\u7248\u672c\u7ba1\u7406\uff0c\u6700\u7b80\u5355\u7684\u5c31\u662f\u4f7f\u7528github\u3002
\u8c03\u8bd5\u3001\u6d4b\u8bd5\uff0c\u4e5f\u90fd\u6709\u4e13\u95e8\u7684\u5de5\u5177\uff0c\u90fd\u662f\u9700\u8981\u5b66\u7684\u2026\u2026
\u2014\u2014\u6211\u7684\u5929\u54ea\u2026\u2026\u8fd9\u4e9b\u5b57\u5199\u5230\u73b0\u5728\u5199\u7684\u6211\u7684\u624b\u90fd\u9178\u4e86\uff0c\u522b\u8bf4\u8981\u5b66\u4e60\u8fd9\u4e9b\u77e5\u8bc6\u4e86\u2014\u2014\u518d\u4e5f\u522b\u8bf4\u6211\u4eecweb\u524d\u7aef\u662f\u201c\u4e09\u5927\u5757\u201d\u4e86\uff01
7. \u8fd0\u884c\u73af\u5883
\u5f53\u7cfb\u7edf\u771f\u6b63\u5230\u4e86\u8fd0\u884c\u73af\u5883\u4e2d\uff0c\u5f53\u4f60\u89c9\u5f97\u7ec8\u4e8e\u5b8c\u4e8b\u513f\u7684\u65f6\u5019\uff0c\u5176\u5b9e\u8fd8\u6709\u597d\u51e0\u4e2a\u77e5\u8bc6\u70b9\u9700\u8981\u4f60\u638c\u63e1\u3002\u770b\u4e0b\u56fe\uff1a
\u9996\u5148\uff0c\u4f60\u8981\u77e5\u9053web\u7cfb\u7edf\u867d\u7136\u5927\u90e8\u5206\u662f\u5728\u6d4f\u89c8\u5668\u4e0b\u8fd0\u884c\uff0c\u4f46\u662fjs\u53ef\u80fd\u4f1a\u88ab\u8fd0\u884c\u5728node\u73af\u5883\u3002
\u5728\u6d4f\u89c8\u5668\u73af\u5883\u4e0b\uff0c\u6700\u91cd\u8981\u7684\u4e24\u70b9\u662f\uff1aweb\u5b89\u5168\u548c\u6027\u80fd\u4f18\u5316\u3002\u9700\u8981\u6ce8\u610f\u7684\u7eb2\u8981\u6211\u90fd\u5217\u51fa\u6765\u4e86\uff0c\u5982\u679c\u60f3\u4e86\u89e3\u63a8\u8350\u4e24\u672c\u4e66\u300a\u767d\u5e3d\u5b50\u5c06web\u5b89\u5168\u300b\u300a\u9ad8\u6027\u80fd\u7f51\u7ad9\u5efa\u8bbe\u6307\u5357\u300b
8. \u5176\u4ed6
\u4ee5\u4e0a\u8fd9\u4e9b\u662f\u5168\u90e8\u7684\u77e5\u8bc6\u4f53\u7cfb\u3002\u5982\u679c\u4f60\u60f3\u6210\u4e3a\u4e00\u540d\u5408\u683c\u7684\u3001\u8ba9leader\u559c\u6b22\u7684\u7a0b\u5e8f\u733f\uff0c\u4f60\u9664\u4e86\u77e5\u9053\u8fd9\u4e9b\u77e5\u8bc6\u4e4b\u5916\uff0c\u6211\u89c9\u5f97\u8fd8\u9700\u8981\u4ee5\u4e0b\u51e0\u70b9\uff1a
\u8981\u4e86\u89e3\u654f\u6377\u8f6f\u4ef6\u5f00\u53d1\u6d41\u7a0b\uff08\u5982SCRUM\uff09\u548c\u9879\u76ee\u7ba1\u7406\u77e5\u8bc6\uff08\u5982\u8003\u53d6PMP\uff09\uff0c\u8fd9\u4e5f\u5c5e\u4e8e\u4e00\u79cd\u201c\u8f6f\u201d\u77e5\u8bc6\u5427\uff1b
\u8981\u5b66\u4f1a\u5728\u7f51\u4e0a\u548c\u522b\u4eba\u4ea4\u6d41\uff08\u535a\u5ba2\u3001qq\u7fa4\u3001\u5f00\u6e90\u9879\u76ee\uff09\uff0c\u4ea4\u6d41\u80fd\u8ba9\u81ea\u5df1\u770b\u5230\u81ea\u5df1\u7684\u4e0d\u8db3\uff1b
\u8981\u5b66\u4f1a\u81ea\u6211\u53cd\u7701\u548c\u81ea\u6211\u5b66\u4e60\u3002\u5c31\u50cf\u6211\u73b0\u5728\u4e00\u6837\uff0c\u8bd5\u7740\u81ea\u5df1\u603b\u7ed3\u4e00\u4e0b\u5c5e\u4e8e\u81ea\u5df1\u7684\u4e1c\u897f\uff0c\u968f\u65f6\u53cd\u7701\u968f\u65f6\u8fdb\u6b65
1\u3001\u5b66\u4f1aHTML
HTML\u662f\u7f51\u9875\u5185\u5bb9\u7684\u8f7d\u4f53\u5185\u5bb9\u5c31\u662f\u7f51\u9875\u5236\u4f5c\u8005\u653e\u5728\u9875\u9762\u4e0a\u60f3\u8981\u8ba9\u7528\u6237\u6d4f\u89c8\u7684\u4fe1\u606f\uff0c\u53ef\u4ee5\u5305\u542b\u6587\u5b57\u3001\u56fe\u7247\u3001\u89c6\u9891\u7b49\u3002\u8981\u719f\u7ec3\u638c\u63e1div\u3001table\u3001ul li \u3001p\u3001span\u7b49\u8fd9\u4e9b\u6807\u7b7e,\u8fd9\u4e9b\u90fd\u662f\u6700\u5e38\u7528\u7684\u3002
2\u3001\u5b66\u4e60CSS\uff08Cascading Style Sheets\uff09\u2014\u6837\u5f0f\u3002
\u4e00\u822c\u770b\u5230web\u524d\u7aef\u5f00\u53d1\u5de5\u7a0b\u5e08\u7684\u8981\u6c42\u91cc\u9762,\u6709\u4e00\u4e2a\u4f1a\u4f7f\u7528css+html \u6216\u8005 css+div \u6765\u8fdb\u884c\u754c\u9762\u5e03\u5c40,\u6240\u4ee5css\u662f\u7528\u4e8e\u8f85\u52a9html\u6765\u5e03\u5c40\u548c\u5c55\u793a\u7684,
\u79f0\u4e4b\u4e3a\u201ccss\u6837\u5f0f\u201d,CSS\u8981\u719f\u7ec3\u638c\u63e1float\u3001position\u3001width\u3001height\uff0c\u4ee5\u53ca\u5bf9\u4e8e\u7684\u6700\u5927\u6700\u5c0f\u3001\u4f1a\u4f7f\u7528\u767e\u5206\u767e\u3001overflow\u3001margin\u3001padding,\u6807\u9898\u5b57\u4f53\u3001\u989c\u8272\u53d8\u5316\uff0c\u6216\u4e3a\u6807\u9898\u52a0\u5165\u80cc\u666f\u56fe\u7247\u3001\u8fb9\u6846\u7b49\u7b49,\u8fd9\u4e9b\u90fd\u662f\u8ddf\u5e03\u5c40\u6709\u5173\u7cfb\u7684\u6837\u5f0f,\u5fc5\u987b\u8981\u638c\u63e1\u7684\u3002
3\u3001JS\uff08java\uff09\u2014\u2014 \u884c\u4e3a
java\u662f\u7528\u6765\u5b9e\u73b0\u7f51\u9875\u4e0a\u7684\u7279\u6548\u6548\u679c\u3002\u5982\uff1a\u9f20\u6807\u6ed1\u8fc7\u5f39\u51fa\u4e0b\u62c9\u83dc\u5355\u3002\u6216\u9f20\u6807\u6ed1\u8fc7\u8868\u683c\u7684\u80cc\u666f\u989c\u8272\u6539\u53d8\u3002\u8fd8\u6709\u7126\u70b9\u65b0\u95fb\uff08\u65b0\u95fb\u56fe\u7247\uff09\u7684\u8f6e\u6362\u3002\u53ef\u4ee5\u8fd9\u4e48\u7406\u89e3\uff0c\u6709\u52a8\u753b\u7684\uff0c\u6709\u4ea4\u4e92\u7684\u4e00\u822c\u90fd\u662f\u7528Java\u6765\u5b9e\u73b0\u7684\u3002
4\u3001\u5b66\u4e60jquery
jquery\u662f\u76f8\u5f53\u4e8e\u628ajs\u5c01\u88c5\u4e86\u4e00\u5957\u7684\u4e00\u4e2ajs\u63d2\u4ef6,\u76ee\u7684\u5c31\u662f\u64cd\u4f5c\u8d77\u6765\u66f4\u65b9\u4fbf,\u4ee3\u7801\u5199\u7684\u66f4\u5c11,jquery\u5165\u95e8\u4e5f\u5f88\u7b80\u5355,\u90a3\u4e9b\u662f\u5165\u95e8\u9700\u8981\u5b66\u7684\u548cjs\u4e00\u6837,\u53ea\u662f\u6362\u6210\u4e86jq\u7684\u4ee3\u7801.\u5176\u4ed6\u7684\u4e00\u6837\u767e\u5ea6\u5c31\u591f\u4e86\u3002
5\u3001\u6700\u597d\u4f1a\u70b9\u540e\u53f0\u8bed\u8a00,\u6bd4\u5982java\u3001php,\u56e0\u4e3a\u524d\u53f0\u754c\u9762\u7684\u6570\u636e\u90fd\u662f\u4ece\u540e\u53f0\u6765\u7684,\u5982\u679c\u4f1a\u70b9\u540e\u53f0\u4ee3\u7801,\u5c31\u77e5\u9053\u600e\u4e48\u8ddf\u540e\u53f0\u4ea4\u4e92\u6570\u636e\u662f\u6700\u597d\u7684, \u8fd9\u6837\u8282\u7ea6\u65f6\u95f4,\u4e5f\u53ef\u4ee5\u8ba9\u524d\u7aef\u4ee3\u7801\u66f4\u89c4\u8303.\u4e0d\u7136\u53ef\u80fd\u56e0\u4e3a\u4f60\u7684\u5199\u6cd5\u548c\u540e\u7aef\u7ed9\u6765\u7684\u6570\u636e\u4e0d\u80fd\u7ed3\u5408\u4e0a,\u90a3\u4e48\u524d\u7aef\u4ee3\u7801\u53c8\u5f97\u91cd\u65b0\u5199,\u90a3\u5c31\u66f4\u9ebb\u70e6\u4e86\u3002
\u53c2\u8003\u8d44\u6599\u6765\u6e90\uff1a\u767e\u5ea6\u767e\u79d1-\u524d\u7aef\u5f00\u53d1
所有知识框架，那肯定是一个结构型的展现，就是一棵树。web前端的知识点非常多，也非常散，需要好几层结构来组织这个体系，否则就会显得很乱。那么如何组织、把谁和谁放在一块儿？这是真正值得我们去思考的，你也可以自己来思考一下这个问题。
在我总结的这个知识框架中，首先第一层我划分为：理论知识，类库框架，编码开发，运行环境。如下图：
接下来给大家解释一下：
这个图要从下往上看，为何？——因为下面是上面的基础；
首先，我们需要一定的理论知识，不管是你听别人讲授、自己看书还是网上淘资料，你都需要一定的理论知识，每一种程序开发，都避免不了。
第二，有了这些理论知识我们就可以编码了——不错——but，没有人能抵挡住第三方框架和类库的诱惑，例如jquery；
第三，有了这些理论知识和协助我们的类库框架，我们就可真正的编码了。大家可能以为编码开发不就是写代码吗，还有啥？——这里面道道多着呢；
最后，开发程序的目的，最终是为了能高效、稳定的运行在相应的环境中，这其中又有哪些事情需要我们去做？请期待；
理论知识 包括“软知识”和“硬知识”
所谓“软”的就是能在各个程序开发中都用到的，算是基本功、内功，例如数据结构、算法、设计模式、面向对象等等；
所谓“硬”的就是能直接用于本程序开发的。用C语言你就得学C语言语法，此时学java没用。我们web前端开发所需要的硬知识其实都包含在三个标准里面：http标准、W3C标准和ECMAScript标准；
聊一聊web前端开发中的“硬知识”
首先，jquery一定是大部分web前端开发者不可或缺的工具。而我利用jquery不仅仅停留在只使用它的API和插件上，我还会自己去写jquery插件，我还会去读jquery的源码、了解jquery的设计思路。如果你也能那样做，请相信我，你会收获到意想不到的效果。如果有一个问题：怎样才能最最透彻的理解javascript的事件系统？最佳答案之一：读几遍（一遍可能读不懂）jquery关于事件处理部分的源码！
bootstrap不用再过多解释了吧，从github上的排名也能看出道道来。甚至连我们公司的UI设计师，都从bootstrap上截图作为素材。
fontAwesome是全世界最强大的图标系统。相比于css制作图标来说，这个要好很多倍，不管是开发、效率还是维护上。icomoon.io能让我自定义选择自己的图标文件。
requirejs和seajs这种模块定义系统，也一定是你系统中不可或缺的。我曾经看过一个教程，讲师就说：requirejs带来了既jquery之后的第二次前端技术变革。
其他的，backbone、angular、react这些也慢慢的开始发挥了他们的价值，此处精力有限就不再赘述了——但是，他们很重要——你至少要试着去了解它们。
要了解敏捷软件开发流程（如SCRUM）和项目管理知识（如考取PMP），这也属于一种“软”知识吧；
要学会在网上和别人交流（博客、qq群、开源项目），交流能让自己看到自己的不足；
要学会自我反省和自我学习。就像我现在一样，试着自己总结一下属于自己的东西，随时反省随时进步
“软知识”和“硬知识”大家可能觉得词陌生，其实我一说大家就能明白。
“软知识”的内容非常多，也是我们大学时代学习的重点（没学好是另回事儿，毕业再恶补）。我们本次主要讨论的是web前端这一个方向，因此就点到为止，让大家知道这些知识也在知识体系中扮演重要角色。
刚才说道，硬知识有三个标准：http标准、W3C标准和ECMAScript标准，那咱们就挨个聊聊这三个标准。
1. http标准
为什么做web前端要了解http标准？——因为浏览器要从服务端获取网页，网页也可能将信息再提交给服务器，这其中都有http的连接。web系统既然和http链接有瓜葛，你就必须去了解它。
我的意见是：你不必去非常了解http的详细内容，但是你要了解web前端开发常用的一些http的知识——就是上图中我列出来的那些。当然，我知识列了一个纲，详细内容还得靠你自己去查阅（本文章讲的是知识框架，不会涉及任何知识点的详细内容）
关于这方面的知识，建议去查阅《图解http》这本书，浅显易懂的讲述了这些内容，我曾经也看过。
2.W3C标准
如果说你只知道web前端的一个标准，估计肯定是W3C标准了（据我了解，貌似大部分人真的都只知道这一个标准）。它的内容非常多，看看www.w3.org/TR/这个页面。
写到这里让我想起了一句话：2/8原则——20%的功能满足80%的需求。我觉得这句话用到这里非常合适，我们在平时开发过程中根本用不到这么多东西。反而，你要把平时用的多的东西搞懂了。
下图的这些知识，我想不用再过多解释了，这就是我文章开发说的“三大块”（html、css、js）。现在你要知道，它们只不多是W3C标准的一部分，而W3C标准也只是web前端开发知识体系中的一部分而已。
（下图没有完全展开，想看权展开的图，可下载本文一开始提供的附件）
关于CSS的基础知识，毛遂自荐一下自己之前的一篇系列博客：《CSS知多少》
3. ECMAScript
简称ES，写全称太麻烦了。
有些人可能只知道javascript，而不知道ES——其实，js是在ES的基础上，为web浏览器做了一部分封装（增加了DOM操作、BOM操作等）。
如上图中的这些概念，大家可能平时都在javascript中看到，其实他们是ES的内容。只不过javascript继承了ES的这些特性，并且javascript用的比较广泛，因此才会在js中讨论的多一些。
还是那个“2/8原则”。其实ES中的内容也非常多，而且更新很快，现在都到ES6了。但是我上图中列出来的这些都是最重要的概念。如果你不懂原型、闭包和作用域，那就说明你还不完全了解ES，也就是不完全会用javascript。
在此毛遂自荐自己之前的一篇系列博客，大家可以去参考：《深入理解javascript原型和闭包系列》
5. 框架和类库
前面已经描述完了web前端开发所需要的理论知识。如何实践呢？——不能蛮干——还得绕世界去看看，有哪些大牛已经为我们做出了如此多的贡献。
用下面的这些类库或者框架，能大大提高你的开发效率。
6. 编码开发
要问编码IDE哪家强，当然要属微软的visual studio！但是即便是微软的VS最新版本，它也代替不了下面要说的这套开发环境。
如果你专门做web前端，就不要在用vs了，当然要选择sublime。写html语句还用手动一条一条写吗？你得需要zencoding的协助，否则效率太差了。
另外，针对html、css、js的压缩、合并、语法检查，文件的清除、复制这些操作，你还要手动去做吗？——你需要grunt或者gulp的帮助。
在此毛遂自荐自己的教程《用grunt搭建自动化web开发环境》，讲的比较详细，适合初学者学习。
如果你的系统中有比较多的js代码或者文件，请选择一个合适的模块定义规范——CMD / AMD
请用git来帮助你做文件版本管理，最简单的就是使用github。
调试、测试，也都有专门的工具，都是需要学的……
——我的天哪……这些字写到现在写的我的手都酸了，别说要学习这些知识了——再也别说我们web前端是“三大块”了！
7. 运行环境
当系统真正到了运行环境中，当你觉得终于完事儿的时候，其实还有好几个知识点需要你掌握。看下图：
首先，你要知道web系统虽然大部分是在浏览器下运行，但是js可能会被运行在node环境。
在浏览器环境下，最重要的两点是：web安全和性能优化。需要注意的纲要我都列出来了，如果想了解推荐两本书《白帽子将web安全》《高性能网站建设指南》
8. 其他
以上这些是全部的知识体系。如果你想成为一名合格的、让leader喜欢的程序猿，你除了知道这些知识之外，我觉得还需要以下几点：
web前端主要学习Html5和css制作精美的静态页面，之后核心课程学习Java script这门语言，并使用各种JS框架和库实现交互性。以前大家常用的是JQuery、Bootstrap框架，现在形成React、Vue、Angular三大主流框架。
web前端开发一直是推陈出新速度最快，开发者最爱抱怨『学不动』的技术领域。每一个前端人都经历了不断学习的一年，因为前端开发依旧在不断变化：
WebAssembly 正式成为第四种 Web 语言、
TypeScript 在业界大规模覆盖、
React 16.8 发布的 React Hooks 对 class 的冲击、
Node.js LTS 版本也来到了 12.14.0、
Vue 3.0 提上日程、
GraphQL 使用量进一步增长、
Serverless 也逐渐被普及…
2020年前端最火的技术毫无疑问将会是webassembly。甚至有一些“预言家”开始预测JS已死，振臂高呼：
『别了，JavaScript；你好，WebAssembly！』
web前端需要学习的技术有哪些？Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。
2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
学习web前端，我们都知道HTML、CSS和JavaScript。html是内容，css是表现，javascript是行为。前端开发的门槛其实非常低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。
所以，对于从事IT工作的人来说，前端开发是个不错的初入点。html是最基础的，现在流行的是html5设计，先学会网页布局。css是用来美化html页面的为页面提供布局和格式。最后再学javascript。
1、html + css
边学边练，之后可以模仿一些网站做些页面。理解css每个元素的属性，样式的实现不一定只有一种写法，多想一想还有没有什么需要改进的地方。
2、JavaScript
不是所有的网页都必须有js，但是要想实现一些超酷的功能和界面的时候，就需要涉及到js。如果没有其他编程语言的基础的话，学起来可能要费些力，还是建议先学习。之后看一些JavaScript方面的入门书籍。
3、Photoshop、flash
熟悉会一点儿就行了，没必要全部都学得精通，当然如果你在学习的过程中，发现你ps或者flash比较感兴趣的话，也可以尝试做美工这一行。
4、html5和css3
可以先了解一下，然后再入手。毕竟IE的浏览器大多还不支持。
5、浏览器兼容
懂web标准，熟练手写xhtml css3并符合符合w3c标准。代码能兼容主流浏览器Firfox，Chrome、Safari、IE、Opera。虽然IE6很多都不兼容，但现在还使用的人还是有的。W3C验证地址：http://jigsaw.w3.org/css-validator/通过验证指定URI的CSS内容，可以帮我们检查一下有没有错误。
6、熟悉一门后台编程语言asp、php、jsp等。
以上就是今天为大家分享的关于做web前端开发要掌握的技术，希望本篇文章能够能够对正在学习web前端知识的小伙伴们有所帮助，最后祝愿小伙伴们工作顺利，成为一名优秀的web前端工程师。
IT行业的热度有增无减，相对于编程来讲，Web前端开发更加易学，看到成果也会更有成就感，没有基础也可以学习。那么Web前端开发需要学什么呢?Web前端分为网站重构、前端交互、全栈开发、移动项目开发四个阶段。
一、网站重构
1、PC端网站布局
要学习前端行业介绍HTML基础、CSS基础，常用CSS样式，常用HTML标签与特性，css基本选择器，浮动和PS基础，定位，表格和表单，整站布局，
2、HTML5+CSS3基础
学习HTML5基础，H5中的多媒体和CSS3初识，css3文本模块基础，颜模式和渐变，边框和背景、盒子模型，多列、媒体查询、弹性盒、移动端布局知识点，浮动和PS基础，定位，表格和表单，整站布局
二、前端交互
1、原生JavaScript交互效果开发
要学习js基础语法、事件、判断语句、循环语句、数据类型
函数，js对象，BOM与DOM，事件高级、拖拽效果，cookie存储、正则表达式、JSON和JSON解析、Ajax，运动与游戏开发，面向对象基础，面向对象进阶
2、ES6
学习ES6基础，ES6进阶，实战项目
3、jQuery经典案例
4、前端框架和插件工具
学习touch.js、zepto.js、swiper.js、iScroll，常见页面布局、交互与动画、WeUI，Swiper animate，Bootstrap简介、框架的用法
三、全栈开发
1、PHP+MySQL
要学习PHP基础知识，PHP表单，PHP高级教程，MySQL，Ajax，知识扩展
2、NodeJs
Node基础，Express框架，MongoDB
四、移动项目开发
1、HTML5高级
2、移动端框架
要学习Angular，Vue，React
3、混合开发
学习React Native、微信小程序
第一阶段：专业核心基础
阶段目标：
1. 熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。
2. 熟练运用HTML+CSS特性完成页面布局。
4. 熟练应用CSS3技术，动画、弹性盒模型设计。
5. 熟练完成移动端页面的设计。
6. 熟练运用所学知识仿制任意Web网站。
7. 能综合运用所学知识完成网页设计实战。
知识点：
1、Web前端开发环境，HTML常用标签，表单元素，Table布局，CSS样式表，DIV+CSS布局。熟练运用HTML和CSS样式属性完成页面的布局和美化，能够仿制任意网站的前端页面实现。
2、CSS3选择器、伪类、过渡、变换、动画、字体图标、弹性盒模型、响应式布局、移动端。熟练运用CSS3来开发网页、熟练开发移动端，整理网页开发技巧。
3、预编译css技术：less、sass基础知识、以及插件的运用、BootStrap源码分析。能够熟练使用 less、sass完成项目开发，深入了解BootStrap。
4、使用HTML、CSS、LESS、SASS等技术完成网页项目实战。通过项目掌握第一阶段html、css的内容、完成PC端页面设计和移动端页面设计。
第二阶段：Web后台技术
阶段目标:
1. 了解JavaScript的发展历史、掌握Node环境搭建及npm使用。
2. 熟练掌握JavaScript的基本数据类型和变量的概念。
3. 熟练掌握JavaScript中的运算符使用。
4. 深入理解分之结构语句和循环语句。
5. 熟练使用数组来完成各种练习。
6.熟悉es6的语法、熟练掌握JavaScript面向对象编程。
7.DOM和BOM实战练习和H5新特性和协议的学习。
知识点：
1、软件开发流程、算法、变量、数据类型、分之语句、循环语句、数组和函数。熟练运用JavaScript的知识完成各种练习。
2、JavaScript面向对象基础、异常处理机制、常见对象api，js的兼容性、ES6新特性。熟练掌握JavaScript面向对象的开发以及掌握es6中的重要内容。
3、BOM操作和DOM操作。熟练使用BOM的各种对象、熟练操作DOM的对象。
4、h5相关api、canvas、ajax、数据模拟、touch事件、mockjs。熟练使用所学知识来完成网站项目开发。
第三阶段：数据库和框架实战
阶段目标：
1. 综合运用Web前端技术进行页面布局与美化。
2. 综合运用Web前端开发框架进行Web系统开发。
3. 熟练掌握Mysql、Mongodb数据库的发开。
4. 熟练掌握vue.js、webpack、elementui等前端框技术。
5. 熟练运用Node.js开发后台应用程序。
6. 对Restful，Ajax，JSON，开发过程有深入的理解,掌握git的基本技能。
知识点：
1、数据库知识，范式，MySQL配置，命令，建库建表，数据的增删改查，mongodb数据库。深入理解数据库管理系统通用知识及MySQL数据库的使用与管理，为Node.js后台开发打下坚实基础。
2、模块系统，函数，路由，全局对象，文件系统，请求处理，Web模块，Express框架，MySQL数据库处理，RestfulAPI，文件上传等。熟练运用Node.js运行环境和后台开发框架完成Web系统的后台开发。
3、vue的组件、生命周期、路由、组件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能够运用Vue.js完成基础前端开发、熟练运用Vue.js框架的高级功能完成Web前端开发和组件开发，对MVVM模式有深刻理解。
4、需求分析，数据库设计，后台开发，使用vue、node完成pc和移动端整站开发。于Node.js+Vue.js+Webpack+Mysql+Mongodb+Git，实现整站项目完整功能并上线发布。
第四阶段：移动端和微信实战
阶段目标：
1.熟练掌握React.js框架，熟练使用React.js完成开发。
2.掌握移动端开发原理，理解原生开发和混合开发。
3.熟练使用react-native和Flutter框架完成移动端开发。
4.掌握微信小程序以及了解支付宝小程序的开发。
5.完成大型电商项目开发。
知识点：
1、React面向组件编程、表单数据、组件通信、监听、声明周期、路由、Redux基本概念。练使用react完成项目开发、掌握Redux中的异步解决方案Saga。
2、react-native、开发工具、视图与渲染、api操作、Flutter环境搭建、路由、ListView组件、网络请求、打包。练掌握react-native和Flutter框架，并分别使用react-native和Flutter分别能开发移动端项目。
3、微信小程序基本介绍、开发工具、视图与渲染、api操作、支付宝小程序的入门和api学习。掌握微信小程序开发了解支付宝小程序。
4、大型购物网站实战，整个项目前后端分离开发；整个项目分为四部分：PC端网页、移动端APP、小程序、后台管理。团队协作开发，使用git进行版本控制。目期间可以扩展Three.js 、TypeScript。
绛旓細4. 闅忕潃鎶鏈殑鍙戝睍锛屽墠绔妧鏈爤涓嶆柇鎵╁睍锛鍖呮嫭鍝嶅簲寮忚璁°佸墠绔鏋讹紙濡俁eact銆乂ue.js銆丄ngular绛夛級銆佸墠绔姸鎬佺鐞嗐佸墠绔畨鍏ㄧ瓑锛岃繖浜涢兘鏄幇浠eb鍓嶇鎶鏈殑閲嶈缁勬垚閮ㄥ垎銆5. 鍦ㄧ幇浠ｅ墠绔紑鍙戜腑锛屽紑鍙戣呰繕闇瑕佹帉鎻′竴绯诲垪杈呭姪宸ュ叿鍜屾妧鏈紝濡傜増鏈帶鍒跺伐鍏稧it銆佸墠绔嚜鍔ㄥ寲鏋勫缓宸ュ叿锛堝Webpack锛夈佸墠绔鏋跺紑鍙戝伐...
绛旓細web鍓嶇寮鍙戝寘鎷殑鎶鏈強鐗圭偣鍖呭惈浠ヤ笅鍑犵偣锛1銆丠tmlHtml閮ㄥ垎闇瑕佷簡瑙ｅ父鐢ㄦ祻瑙堝櫒鍜屾祻瑙堝櫒鍐呮牳;浜嗚В璇箟鍖栫殑姒傚康;鎺屾彙Html5璇硶鍙婁娇鐢ㄦ妧宸;鎺屾彙Html5甯哥敤鏍囩銆鎺屾彙Html5鏂板竷灞鏍囩銆佸濯掍綋鏍囩绛銆2銆丆SSCSS閮ㄥ垎鐨勪富瑕佺煡璇嗘湁鎺屾彙CSS璇硶鍙婁娇鐢ㄦ妧宸;鎺屾彙DIV+CSS甯冨眬鏂瑰紡;鎺屾彙甯歌缃戦〉甯冨眬妯″紡;鎺屾彙Photoshop鍒囧浘...
绛旓細1. 鎺屾彙鍩虹鐨刉eb鍓嶇寮鍙戞妧鏈紝鍖呮嫭HTML銆丆SS銆丣avaScript銆丏OM銆丅OM浠ュ強AJAX绛銆傚悓鏃讹紝浜嗚В杩欎簺鎶鏈湪涓嶅悓娴忚鍣ㄤ笂鐨勫吋瀹规с佹覆鏌撴満鍒朵互鍙婂彲鑳藉嚭鐜扮殑bug銆2. 鐔熸倝缃戠珯鎬ц兘浼樺寲銆丼EO浠ュ強鏈嶅姟鍣ㄧ寮鍙戞妧鏈殑鍩虹姒傚康銆3. 瀛︿細杩愮敤鍚勭Web鍓嶇寮鍙戜笌娴嬭瘯宸ュ叿浠ユ彁楂樺紑鍙戞晥鐜囥4. 闄や簡鎶鏈眰闈㈢殑鐭ヨ瘑锛岃繕闇鎺屾彙...
绛旓細1. 鎺屾彙HTML锛欻TML鏄瀯鎴愮綉椤靛唴瀹圭殑鍩虹锛岃礋璐ｆ壙杞介〉闈笂鐨勪俊鎭紝鍖呮嫭鏂囨湰銆佸浘鍍忓拰瑙嗛绛夈傜啛缁冭繍鐢ㄥdiv銆乼able銆乽l li銆乸銆乻pan绛夊熀鏈爣绛惧浜庡墠绔紑鍙戣呰嚦鍏抽噸瑕併2. 瀛︿範CSS锛堝眰鍙犳牱寮忚〃锛夛細CSS鐢ㄤ簬澧炲己HTML椤甸潰鐨勮瑙夋晥鏋滃拰甯冨眬銆傚墠绔伐绋嬪笀閫氬父闇瑕佽繍鐢–SS+HTML鎴朇SS+div绛夋妧鏈繘琛岀晫闈㈣璁°傛帉鎻lo...
绛旓細Web鍓嶇鎶鏈兘鏈夊摢浜涘憿锛熶竴璧锋潵鐪嬬湅鍚с俉eb鍓嶇鎶鏈富瑕佸寘鎷細1銆乭tml銆乧ss銆乯s绛塛EB鍓嶇寮鍙戠殑鍩虹鎶鏈銆2銆JQuery銆乭tml5+css3銆乭ttp+ajax+json+nodejs+mysql+mongoDB绛夊墠鍚庣浜や簰銆乿ue銆乺eact銆佸皬绋嬪簭銆乤pp娣峰悎寮鍙戠瓑杩涢樁鎶鏈3銆佹洿楂樼骇鐨勬妧鏈澘鍧楋紝web瀹夊叏锛屾暟鎹彲瑙嗗寲锛岀畻娉曚互鍙婄畻娉曞鐞嗙瓑銆傛嫇灞曪細...
绛旓細web鍓嶇闇瑕佸摢浜涙妧鏈浠嬬粛濡備笅锛1銆佸浼欻TML HTML鏄綉椤靛唴瀹圭殑杞戒綋鍐呭灏辨槸缃戦〉鍒朵綔鑰呮斁鍦ㄩ〉闈笂鎯宠璁╃敤鎴锋祻瑙堢殑淇℃伅锛屽彲浠ュ寘鍚枃瀛椼佸浘鐗囥佽棰戠瓑銆傝鐔熺粌鎺屾彙div銆乼able銆乽l li 銆乸銆乻pan绛夎繖浜涙爣绛,杩欎簺閮芥槸鏈甯哥敤鐨勩2銆佸涔燙SS锛圕ascading Style Sheets锛夆旀牱寮忋備竴鑸湅鍒皐eb鍓嶇寮鍙戝伐绋嬪笀鐨勮姹傞噷闈,...
绛旓細1銆Web鍓嶇缂栫▼璇█鍜屽紑鍙鎶鏈锛岃繖浜涙槸蹇呴』瑕瀛︿細鐨勶紝鍏朵腑鍖呮嫭锛欳SS銆丠TML銆丄jax銆丣avaScript绛夈2銆佷紭鍖栫綉绔欐ц兘銆丼EO鍜屾湇鍔″櫒绔殑鍩虹鐭ヨ瘑銆3銆佷綔涓虹編鏈紑鍙戜笌鍚庣寮鍙戞矡閫氱殑妗ユ锛岃繕闇瑕瀛︿範鐢ㄦ埛浣撻獙璁捐銆佸搷搴斿紡寮鍙戙佸悗绔湇鍔″櫒寮鍙戝熀纭銆佷氦浜掕璁＄瓑銆俉eb鍓嶇寮鍙戝彲浠ヨ鍓嶇鐨勪唬鐮佹洿鍔犳竻鏅帮紝鏄庢樉鏀硅繘浜嗙綉绔...
绛旓細Web鍓嶇鎶鏈鍖呮嫭锛欻TML銆丆SS銆丣avaScript銆侶TML锛圚yperText Markup Language锛夋槸涓绉嶇敤浜庡垱寤虹綉椤电殑鏍囪璇█銆傚畠鐢ㄤ簬瀹氫箟缃戦〉鐨勭粨鏋勫拰鍐呭锛屽鏂囨湰銆佸浘鍍忋侀摼鎺ャ佽〃鍗曠瓑銆侶TML鏄瀯寤虹綉椤电殑鍩虹锛屽畠鎻愪緵浜嗙綉椤靛唴瀹圭殑妗嗘灦銆侰SS锛圕ascading Style Sheets锛夋槸鐢ㄤ簬鎻忚堪缃戦〉鏍峰紡鐨勪竴绉嶈瑷銆傚畠鍙互鎺у埗缃戦〉鐨勫竷灞銆侀鑹...
绛旓細web鍓嶇寮鍙戝寘鎷殑鎶鏈細1銆佸濂紺SS鏄綉椤靛瑙傜殑閲嶈涓鐐癸紝CSS鍙互甯姪鎶婄綉椤靛瑙傚仛寰楁洿鍔犵編瑙傘2銆乨iv甯冨眬锛欴IV鍏冪礌鏄敤鏉ヤ负HTML鏂囨。鍐呭ぇ鍧楃殑鍐呭鎻愪緵缁撴瀯鍜岃儗鏅殑鍏冪礌銆2銆佸涔燡avaScript鐨勫熀鏈娉锛屼互鍙婂浣曚娇鐢ㄣ侸avaScript缂栫▼灏嗕細鎻愰珮寮鍙戜汉鍛樼殑涓汉鎶鑳姐3銆佷簡瑙nix鍜孡inux鐨勫熀鏈煡璇嗚櫧鐒惰繖涓ょ偣寰堝熀纭锛...
绛旓細Web鍓嶇寮鍙鎶鏈妧鏈濡備笅锛1.HTML/CSS锛欻TML(HyperText Markup Language)鏄竴绉嶆爣璁拌瑷锛屼笌CSS(Cascading Style Sheets)缁撳悎浣跨敤锛岀敤浜庣綉椤电殑缁撴瀯鍖栧唴瀹瑰拰鏍峰紡鐨勮璁°2.JavaScript锛氫竴绉嶈剼鏈瑷锛屽彲鐢ㄤ簬鍦ㄧ綉椤典腑鍒涘缓鍔ㄦ佹晥鏋溿佷氦浜掑紡缁勪欢鍜岀壒瀹氬姛鑳姐3.鍓嶇妗嗘灦锛氬 Bootstrap銆乯Query绛夛紝杩欎簺妗嗘灦鑳藉鍔犻...
