web前端学习路线？ Web前端开发一般学习些什么课程？
\u6c42WEB\u524d\u7aef\u5f00\u53d1\u5b66\u4e60\u8def\u7ebf\u8fd9\u91cc\u6574\u7406\u4e86\u4e00\u4efdweb\u524d\u7aef\u5b66\u4e60\u8def\u7ebf\u7684\u601d\u7ef4\u5bfc\u56fe\u4ee5\u53ca\u9700\u8981\u638c\u63e1\u548c\u5b66\u4e60\u7684\u5185\u5bb9\uff1a\u7b2c\u4e00\u9636\u6bb5\uff1a\u4e13\u4e1a\u6838\u5fc3\u57fa\u7840\u9636\u6bb5\u76ee\u6807\uff1a
1. \u719f\u7ec3\u638c\u63e1HTML5\u3001CSS3\u3001Less\u3001Sass\u3001\u54cd\u5e94\u4e66\u5e03\u5c40\u3001\u79fb\u52a8\u7aef\u5f00\u53d1\u3002
2. \u719f\u7ec3\u8fd0\u7528HTML+CSS\u7279\u6027\u5b8c\u6210\u9875\u9762\u5e03\u5c40\u3002
4. \u719f\u7ec3\u5e94\u7528CSS3\u6280\u672f\uff0c\u52a8\u753b\u3001\u5f39\u6027\u76d2\u6a21\u578b\u8bbe\u8ba1\u3002
5. \u719f\u7ec3\u5b8c\u6210\u79fb\u52a8\u7aef\u9875\u9762\u7684\u8bbe\u8ba1\u3002
6. \u719f\u7ec3\u8fd0\u7528\u6240\u5b66\u77e5\u8bc6\u4eff\u5236\u4efb\u610fWeb\u7f51\u7ad9\u3002
7. \u80fd\u7efc\u5408\u8fd0\u7528\u6240\u5b66\u77e5\u8bc6\u5b8c\u6210\u7f51\u9875\u8bbe\u8ba1\u5b9e\u6218\u3002
\u77e5\u8bc6\u70b9\uff1a
1\u3001Web\u524d\u7aef\u5f00\u53d1\u73af\u5883\uff0cHTML\u5e38\u7528\u6807\u7b7e\uff0c\u8868\u5355\u5143\u7d20\uff0cTable\u5e03\u5c40\uff0cCSS\u6837\u5f0f\u8868\uff0cDIV+CSS\u5e03\u5c40\u3002\u719f\u7ec3\u8fd0\u7528HTML\u548cCSS\u6837\u5f0f\u5c5e\u6027\u5b8c\u6210\u9875\u9762\u7684\u5e03\u5c40\u548c\u7f8e\u5316\uff0c\u80fd\u591f\u4eff\u5236\u4efb\u610f\u7f51\u7ad9\u7684\u524d\u7aef\u9875\u9762\u5b9e\u73b0\u3002
2\u3001CSS3\u9009\u62e9\u5668\u3001\u4f2a\u7c7b\u3001\u8fc7\u6e21\u3001\u53d8\u6362\u3001\u52a8\u753b\u3001\u5b57\u4f53\u56fe\u6807\u3001\u5f39\u6027\u76d2\u6a21\u578b\u3001\u54cd\u5e94\u5f0f\u5e03\u5c40\u3001\u79fb\u52a8\u7aef\u3002\u719f\u7ec3\u8fd0\u7528CSS3\u6765\u5f00\u53d1\u7f51\u9875\u3001\u719f\u7ec3\u5f00\u53d1\u79fb\u52a8\u7aef\uff0c\u6574\u7406\u7f51\u9875\u5f00\u53d1\u6280\u5de7\u3002
3\u3001\u9884\u7f16\u8bd1css\u6280\u672f\uff1aless\u3001sass\u57fa\u7840\u77e5\u8bc6\u3001\u4ee5\u53ca\u63d2\u4ef6\u7684\u8fd0\u7528\u3001BootStrap\u6e90\u7801\u5206\u6790\u3002\u80fd\u591f\u719f\u7ec3\u4f7f\u7528 less\u3001sass\u5b8c\u6210\u9879\u76ee\u5f00\u53d1\uff0c\u6df1\u5165\u4e86\u89e3BootStrap\u3002
4\u3001\u4f7f\u7528HTML\u3001CSS\u3001LESS\u3001SASS\u7b49\u6280\u672f\u5b8c\u6210\u7f51\u9875\u9879\u76ee\u5b9e\u6218\u3002\u901a\u8fc7\u9879\u76ee\u638c\u63e1\u7b2c\u4e00\u9636\u6bb5html\u3001css\u7684\u5185\u5bb9\u3001\u5b8c\u6210PC\u7aef\u9875\u9762\u8bbe\u8ba1\u548c\u79fb\u52a8\u7aef\u9875\u9762\u8bbe\u8ba1\u3002
\u7b2c\u4e8c\u9636\u6bb5\uff1aWeb\u540e\u53f0\u6280\u672f\u9636\u6bb5\u76ee\u6807:
1. \u4e86\u89e3JavaScript\u7684\u53d1\u5c55\u5386\u53f2\u3001\u638c\u63e1Node\u73af\u5883\u642d\u5efa\u53canpm\u4f7f\u7528\u3002
2. \u719f\u7ec3\u638c\u63e1JavaScript\u7684\u57fa\u672c\u6570\u636e\u7c7b\u578b\u548c\u53d8\u91cf\u7684\u6982\u5ff5\u3002
3. \u719f\u7ec3\u638c\u63e1JavaScript\u4e2d\u7684\u8fd0\u7b97\u7b26\u4f7f\u7528\u3002
4. \u6df1\u5165\u7406\u89e3\u5206\u652f\u7ed3\u6784\u8bed\u53e5\u548c\u5faa\u73af\u8bed\u53e5\u3002
5. \u719f\u7ec3\u4f7f\u7528\u6570\u7ec4\u6765\u5b8c\u6210\u5404\u79cd\u7ec3\u4e60\u3002
6.\u719f\u6089es6\u7684\u8bed\u6cd5\u3001\u719f\u7ec3\u638c\u63e1JavaScript\u9762\u5411\u5bf9\u8c61\u7f16\u7a0b\u3002
7.DOM\u548cBOM\u5b9e\u6218\u7ec3\u4e60\u548cH5\u65b0\u7279\u6027\u548c\u534f\u8bae\u7684\u5b66\u4e60\u3002
\u77e5\u8bc6\u70b9\uff1a
1\u3001\u8f6f\u4ef6\u5f00\u53d1\u6d41\u7a0b\u3001\u7b97\u6cd5\u3001\u53d8\u91cf\u3001\u6570\u636e\u7c7b\u578b\u3001\u5206\u4e4b\u8bed\u53e5\u3001\u5faa\u73af\u8bed\u53e5\u3001\u6570\u7ec4\u548c\u51fd\u6570\u3002\u719f\u7ec3\u8fd0\u7528JavaScript\u7684\u77e5\u8bc6\u5b8c\u6210\u5404\u79cd\u7ec3\u4e60\u3002
2\u3001JavaScript\u9762\u5411\u5bf9\u8c61\u57fa\u7840\u3001\u5f02\u5e38\u5904\u7406\u673a\u5236\u3001\u5e38\u89c1\u5bf9\u8c61api\uff0cjs\u7684\u517c\u5bb9\u6027\u3001ES6\u65b0\u7279\u6027\u3002\u719f\u7ec3\u638c\u63e1JavaScript\u9762\u5411\u5bf9\u8c61\u7684\u5f00\u53d1\u4ee5\u53ca\u638c\u63e1es6\u4e2d\u7684\u91cd\u8981\u5185\u5bb9\u3002
3\u3001BOM\u64cd\u4f5c\u548cDOM\u64cd\u4f5c\u3002\u719f\u7ec3\u4f7f\u7528BOM\u7684\u5404\u79cd\u5bf9\u8c61\u3001\u719f\u7ec3\u64cd\u4f5cDOM\u7684\u5bf9\u8c61\u3002
4\u3001h5\u76f8\u5173api\u3001canvas\u3001ajax\u3001\u6570\u636e\u6a21\u62df\u3001touch\u4e8b\u4ef6\u3001mockjs\u3002\u719f\u7ec3\u4f7f\u7528\u6240\u5b66\u77e5\u8bc6\u6765\u5b8c\u6210\u7f51\u7ad9\u9879\u76ee\u5f00\u53d1\u3002
\u7b2c\u4e09\u9636\u6bb5\uff1a\u6570\u636e\u5e93\u548c\u6846\u67b6\u5b9e\u6218\u9636\u6bb5\u76ee\u6807\uff1a
1. \u7efc\u5408\u8fd0\u7528Web\u524d\u7aef\u6280\u672f\u8fdb\u884c\u9875\u9762\u5e03\u5c40\u4e0e\u7f8e\u5316\u3002
2. \u7efc\u5408\u8fd0\u7528Web\u524d\u7aef\u5f00\u53d1\u6846\u67b6\u8fdb\u884cWeb\u7cfb\u7edf\u5f00\u53d1\u3002
3. \u719f\u7ec3\u638c\u63e1Mysql\u3001Mongodb\u6570\u636e\u5e93\u7684\u53d1\u5f00\u3002
4. \u719f\u7ec3\u638c\u63e1vue.js\u3001webpack\u3001elementui\u7b49\u524d\u7aef\u6846\u6280\u672f\u3002
5. \u719f\u7ec3\u8fd0\u7528Node.js\u5f00\u53d1\u540e\u53f0\u5e94\u7528\u7a0b\u5e8f\u3002
6. \u5bf9Restful\uff0cAjax\uff0cJSON\uff0c\u5f00\u53d1\u8fc7\u7a0b\u6709\u6df1\u5165\u7684\u7406\u89e3,\u638c\u63e1git\u7684\u57fa\u672c\u6280\u80fd\u3002
\u77e5\u8bc6\u70b9\uff1a
1\u3001\u6570\u636e\u5e93\u77e5\u8bc6\uff0c\u8303\u5f0f\uff0cMySQL\u914d\u7f6e\uff0c\u547d\u4ee4\uff0c\u5efa\u5e93\u5efa\u8868\uff0c\u6570\u636e\u7684\u589e\u5220\u6539\u67e5\uff0cmongodb\u6570\u636e\u5e93\u3002\u6df1\u5165\u7406\u89e3\u6570\u636e\u5e93\u7ba1\u7406\u7cfb\u7edf\u901a\u7528\u77e5\u8bc6\u53caMySQL\u6570\u636e\u5e93\u7684\u4f7f\u7528\u4e0e\u7ba1\u7406\uff0c\u4e3aNode.js\u540e\u53f0\u5f00\u53d1\u6253\u4e0b\u575a\u5b9e\u57fa\u7840\u3002
2\u3001\u6a21\u5757\u7cfb\u7edf\uff0c\u51fd\u6570\uff0c\u8def\u7531\uff0c\u5168\u5c40\u5bf9\u8c61\uff0c\u6587\u4ef6\u7cfb\u7edf\uff0c\u8bf7\u6c42\u5904\u7406\uff0cWeb\u6a21\u5757\uff0cExpress\u6846\u67b6\uff0cMySQL\u6570\u636e\u5e93\u5904\u7406\uff0cRestfulAPI\uff0c\u6587\u4ef6\u4e0a\u4f20\u7b49\u3002\u719f\u7ec3\u8fd0\u7528Node.js\u8fd0\u884c\u73af\u5883\u548c\u540e\u53f0\u5f00\u53d1\u6846\u67b6\u5b8c\u6210Web\u7cfb\u7edf\u7684\u540e\u53f0\u5f00\u53d1\u3002
3\u3001vue\u7684\u7ec4\u4ef6\u3001\u751f\u547d\u5468\u671f\u3001\u8def\u7531\u3001\u7ec4\u4ef6\u3001\u524d\u7aef\u5de5\u7a0b\u5316\u3001webpack\u3001elementui\u6846\u67b6\u3002Vue.js\u6846\u67b6\u7684\u57fa\u672c\u4f7f\u7528\u6709\u6e05\u6670\u7684\u7406\u89e3\uff0c\u80fd\u591f\u8fd0\u7528Vue.js\u5b8c\u6210\u57fa\u7840\u524d\u7aef\u5f00\u53d1\u3001\u719f\u7ec3\u8fd0\u7528Vue.js\u6846\u67b6\u7684\u9ad8\u7ea7\u529f\u80fd\u5b8c\u6210Web\u524d\u7aef\u5f00\u53d1\u548c\u7ec4\u4ef6\u5f00\u53d1\uff0c\u5bf9MVVM\u6a21\u5f0f\u6709\u6df1\u523b\u7406\u89e3\u3002
4\u3001\u9700\u6c42\u5206\u6790\uff0c\u6570\u636e\u5e93\u8bbe\u8ba1\uff0c\u540e\u53f0\u5f00\u53d1\uff0c\u4f7f\u7528vue\u3001node\u5b8c\u6210pc\u548c\u79fb\u52a8\u7aef\u6574\u7ad9\u5f00\u53d1\u3002\u4e8eNode.js+Vue.js+Webpack+Mysql+Mongodb+Git\uff0c\u5b9e\u73b0\u6574\u7ad9\u9879\u76ee\u5b8c\u6574\u529f\u80fd\u5e76\u4e0a\u7ebf\u53d1\u5e03\u3002
\u7b2c\u56db\u9636\u6bb5\uff1a\u79fb\u52a8\u7aef\u548c\u5fae\u4fe1\u5b9e\u6218\u9636\u6bb5\u76ee\u6807\uff1a
1.\u719f\u7ec3\u638c\u63e1React.js\u6846\u67b6\uff0c\u719f\u7ec3\u4f7f\u7528React.js\u5b8c\u6210\u5f00\u53d1\u3002
2.\u638c\u63e1\u79fb\u52a8\u7aef\u5f00\u53d1\u539f\u7406\uff0c\u7406\u89e3\u539f\u751f\u5f00\u53d1\u548c\u6df7\u5408\u5f00\u53d1\u3002
3.\u719f\u7ec3\u4f7f\u7528react-native\u548cFlutter\u6846\u67b6\u5b8c\u6210\u79fb\u52a8\u7aef\u5f00\u53d1\u3002
4.\u638c\u63e1\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4ee5\u53ca\u4e86\u89e3\u652f\u4ed8\u5b9d\u5c0f\u7a0b\u5e8f\u7684\u5f00\u53d1\u3002
5.\u5b8c\u6210\u5927\u578b\u7535\u5546\u9879\u76ee\u5f00\u53d1\u3002
\u77e5\u8bc6\u70b9\uff1a
1\u3001React\u9762\u5411\u7ec4\u4ef6\u7f16\u7a0b\u3001\u8868\u5355\u6570\u636e\u3001\u7ec4\u4ef6\u901a\u4fe1\u3001\u76d1\u542c\u3001\u751f\u547d\u5468\u671f\u3001\u8def\u7531\u3001Redux\u57fa\u672c\u6982\u5ff5\u3002\u7ec3\u4f7f\u7528react\u5b8c\u6210\u9879\u76ee\u5f00\u53d1\u3001\u638c\u63e1Redux\u4e2d\u7684\u5f02\u6b65\u89e3\u51b3\u65b9\u6848Saga\u3002
2\u3001react-native\u3001\u5f00\u53d1\u5de5\u5177\u3001\u89c6\u56fe\u4e0e\u6e32\u67d3\u3001api\u64cd\u4f5c\u3001Flutter\u73af\u5883\u642d\u5efa\u3001\u8def\u7531\u3001ListView\u7ec4\u4ef6\u3001\u7f51\u7edc\u8bf7\u6c42\u3001\u6253\u5305\u3002\u7ec3\u638c\u63e1react-native\u548cFlutter\u6846\u67b6\uff0c\u5e76\u5206\u522b\u4f7f\u7528react-native\u548cFlutter\u5206\u522b\u80fd\u5f00\u53d1\u79fb\u52a8\u7aef\u9879\u76ee\u3002
3\u3001\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u57fa\u672c\u4ecb\u7ecd\u3001\u5f00\u53d1\u5de5\u5177\u3001\u89c6\u56fe\u4e0e\u6e32\u67d3\u3001api\u64cd\u4f5c\u3001\u652f\u4ed8\u5b9d\u5c0f\u7a0b\u5e8f\u7684\u5165\u95e8\u548capi\u5b66\u4e60\u3002\u638c\u63e1\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u4e86\u89e3\u652f\u4ed8\u5b9d\u5c0f\u7a0b\u5e8f\u3002
4\u3001\u5927\u578b\u8d2d\u7269\u7f51\u7ad9\u5b9e\u6218\uff0c\u6574\u4e2a\u9879\u76ee\u524d\u540e\u7aef\u5206\u79bb\u5f00\u53d1\uff1b\u6574\u4e2a\u9879\u76ee\u5206\u4e3a\u56db\u90e8\u5206\uff1aPC\u7aef\u7f51\u9875\u3001\u79fb\u52a8\u7aefAPP\u3001\u5c0f\u7a0b\u5e8f\u3001\u540e\u53f0\u7ba1\u7406\u3002\u56e2\u961f\u534f\u4f5c\u5f00\u53d1\uff0c\u4f7f\u7528git\u8fdb\u884c\u7248\u672c\u63a7\u5236\u3002\u76ee\u671f\u95f4\u53ef\u4ee5\u6269\u5c55Three.js \u3001TypeScript\u3002
\u76f8\u5173\u914d\u5957\u89c6\u9891\u6559\u7a0b\u9080\u60a8\u79fb\u81f3B\u7ad9\u641c\u7d22\u5c1a\u5b66\u5802\uff0c\u514d\u8d39\u6559\u7a0b\u968f\u4f60\u6311\uff01
\u60a8\u597d\uff0cweb\u524d\u7aef\u7684\u5b66\u4e60\u8def\u7ebf\u5206\u4e3a\u4ee5\u4e0b8\u4e2a\u9636\u6bb5\uff1a
\u9636\u6bb51.\u524d\u7aef\u6838\u5fc3\u57fa\u7840
HTML +_CSS\u6838\u5fc3\u3001JavaScript\u57fa\u7840\u8bed\u6cd5\u3001JavaScript\u9762\u5411\u5bf9\u8c61\u3001JavaScript DOM\u548cBOM\u7f16\u7a0b\u3001jQuery\u6846\u67b6
\u9636\u6bb52.HTML5 + CSS3 + \u79fb\u52a8\u7aef\u6838\u5fc3
HTML5\u65b0\u7279\u6027\u3001Canvas\u4e13\u5217\u3001CSS3\u65b0\u7279\u6027\u3001CSS3\u8fdb\u9636\u3001CSS3\u5b9e\u4f8b\u6f14\u7ec3
\u9636\u6bb53.\u79fb\u52a8\u7aef
\u79fb\u52a8\u7aef\u6838\u5fc3\u3001\u79fb\u52a8\u7aef\u9002\u914d\u3001\u79fb\u52a8\u7aef\u7279\u6548
\u9636\u6bb54.\u670d\u52a1\u5668\u7aef
\u670d\u52a1\u5668\u7aef\u5f00\u53d1\u3001\u6570\u636e\u5e93\u64cd\u4f5c\u3001\u524d\u540e\u7aef\u4ea4\u4e92\u6838\u5fc3\u3001\u5fae\u4fe1\u516c\u4f17\u53f7\u5f00\u53d1
\u9636\u6bb55.JavaScript\u9ad8\u7ea7
JavaScript\u57fa\u7840\u6df1\u5165\u5256\u6790\u3001JavaScript\u9762\u5411\u5bf9\u8c61\u6df1\u5165\u8bb2\u89e3\u3001JavaScript\u5f02\u6b65\u7f16\u7a0b\u3001JavaScript\u51fd\u6570\u5f0f\u7f16\u7a0b\u3001JavaScript\u8bbe\u8ba1\u6a21\u5f0f
\u9636\u6bb56.\u524d\u7aef\u5fc5\u5907
\u6027\u80fd\u4f18\u5316\u3001\u7248\u672c\u63a7\u5236\u5de5\u5177\u3001\u6a21\u5757\u5316\u3001\u9879\u76ee\u6784\u5efa\u5de5\u5177
\u9636\u6bb57.\u9ad8\u7ea7\u6846\u67b6
React\u6846\u67b6\u57fa\u672c\u4f7f\u7528\u3001React\u6846\u67b6\u8fdb\u9636\u3001Vue\u6846\u67b6\u57fa\u672c\u4f7f\u7528\u3001Vue\u6846\u67b6\u8fdb\u9636\u3001Vue\u6e90\u7801\u5206\u6790
\u9636\u6bb58.\u5c0f\u7a0b\u5e8f
\u539f\u751f\u5c0f\u7a0b\u5e8f\u5165\u95e8\u3001\u539f\u751f\u5c0f\u7a0b\u5e8fAPI\u4f7f\u7528\u3001\u5c0f\u7a0b\u5e8f\u6846\u67b6Mpvue
点击下方“小爱心”，选择“关注”
管她前浪，还是后浪？
能浪的浪，才是好浪！
关注我，每天让你掉忆点点头发。。。
前端学习路线：
网页链接
2020年全新前端学习路线图分享给大家！
学习是一个循序渐进的过程，是一件非常难得坚持的事情。如果真的想学习前端开发，一定要下定决心！
我这里分享给你的前端学习路线图，希望对你有帮助，以下为2020年更新版本，
@尚学堂前端学院在2020年更新前端开发学习路线图，把2019年新技术，新课程囊括其中，
也写了技术叔，每个技术需要学习的技术，跟着学完你就是中高级程序员！
前端学习框架
一、web前端基础
HTML+CSS基础是前端中级程序员的起点，是帮助你从小白到懂得编程的必经之路。
在前端基础板块中有三块构成了web世界，这是大家众所周知的事情。分别是：HTML、CSS、JavaScript。而每一部分都是要很多的知识积累才能运用的游刃有余。
HTML具有更好的语义特性、本地存储特性、设备兼容特性、网页多媒体特性、css3特性等。它是web的新一代开发标准。只不过h5大大提升了对移动端的的支持能力。现在有些桌面浏览器对html5的支持还不健全，有些新特性不见得能生效（现代浏览器支持度较高），而移动设备上（android、ios）的浏览器（或webview）大都是webkit内核，对html5的支持度较高，所以一般在移动设备上使用不会出太大的兼容性问题。
javascript刚开始是有Netscape公司开发出来的，命名是为了跟上java这股热风（但和java毫无关系）。随后微软进入浏览器市场，由此催生了javascript的标准化，而这个标准名称就叫ECMAScript，从此JavaScript正式成为一门语言。实际上，javascript是ECMAScript的超集，可以认为是和typescript一样的存在。他们都实现了ECMAScript的标准。我们现在所说的标准规范都指ECMAScript规范，当前流行的最著名的就是ES5、ES6等标准。
配套学习视频：
网页链接
二、JavaSript
JavaScript是Web的编程语言。
所有的现代的HTML页面都使用JavaScript。
JavaScript非常容易学。
主要学习内容:JavaScript基础、JavaScript函数、JavaScript数组与对象、DOM、实践实例、
json解析、面向对象、原型与原型链和bootstrap。
配套视频下载链接：
网页链接
三、jQuery
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
主要学习的内用有：jQuery基础、jQuery常见方法、jQuery节点操作和jQuery实战联系
配套视频下载链接：
网页链接
四、Ajax
AJAX=Asynchron JavaScript and XML (异步的JavaScritp和XML)。
ALAX不是新的编程语言，而是一种使用现有标准的新方法。
AJAX最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页
容。
AJAX不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
AJAX应用
运用XHTML+CSS来表达资讯；
运用JavaScript操作DOM(Document Object Model）来执行动态效果；
运用XML和XSLT操作资料；
运用XMLHttpRequest或新的Fetch API与网页服务器进行异步资料交换；
注意:AJAX与Flash、Silverlight和java Apple等RIA技术是由区分的。
配套下载链接：
网页链接
五、H5新特性
HTMT就是你跟浏览器下达命令的语言。比如要把一篇文章显示在浏览器上，文章既有图片又有文字，你要告诉它那些事文字，哪些是图片，并且分别都放在哪个地方，需要用什么样式（颜色、大小、对齐。。。。），我们把浏览器显示的页面叫做网页。
主要内容：常用框架、移动端与REM、canvas元素和H5新特性
配套视频下载链接:
网页链接
六、angularJS
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过指令扩展了 HTML，且通过 表达式绑定数据到 HTML。
主要内容：angular指令、angular路由、angular服务、angular自定义服务器和angular自定义指令。
配套视频下载链接：
网页链接
七、模块化
当前，实现模块化本体主要有两种主要的语言途径：一种是基于非经典语义的逻辑语言扩展，如分布式描述逻辑，E-链接和基于包的描述逻辑；另外一种途径是基于经典描述逻辑语义，但限制对外部符号的使用以保证个模块可安全的合并。
主要内容：模块基础、require和require实战
配套视频下载链接：网页链接
八、前端构建工具
什么是前端构建工具？
比如我们执行一些例如CoffeeScript/ES6去代替Javascript、JS或CSS压缩、用Less去写CSS、用Jade去写HTML、用Browserify去模块化、为非覆盖式部署的资源加MD5戳等，这些操作如果我们一遍遍手动执行，非常耗费时间和精力，所以前端构建工具，或者较前端自动化构建工具，就是用来让我们不再做机械重复的事情，解放我们的双手的。
主要内容：webpack和gulp
配套视频下载链接：
网页链接
九、react
react是Facebook推出的一个用来构建用户界面的 JavaScript 库。 React主要用于构建UI，很多人认为 React是MVC中的V（视图）。React拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
主要内容：react基础、react环境搭建、react路由3.x、react路由4.x、react UI框架antd和react网络请求fetch
配套视频下载链接：
网页链接
十、Vue
vue指的是vue.js框架。Vue.js是一款流行的JavaScript前端框架，一个用于创建用户界面的开源JavaScript框架，旨在更好地组织与简化Web开发。
配套视频下载链接：
主要内容:模块基础、require和require实战
配套视频下载链接:
网页链接
十一、小程序
配套视频下载链接：
网页链接
学习web前端的注意事项
1.不要以看书学习为主，学习编程不是数学语文那么容易，你看看例题就会了，更需要的是别人的讲解，你自己看书上那些专业的文字，只是凭你自己意识理解的那样来，但是一般情况下我们都理解不了，毕竟我们不是出书的人，最好的方式就是找视频进行学习，找好的视频进行学习，然后在配上别人的解答，在加上自我的主动学习。
2.最好能系统专业的学习，因为如果你是一个小白或者零基础的入门者，自学也有可能会勉强入门，但是肯定会比别人走很多弯路，或者花费更长的时间，所以最好是能系统的学习，这样不仅能快速入门，升级的几率也很大，而且也能短期内出效果。
3.当你学习的时候，可能会出现学了就忘记不住的情况。打个比方：比方说我们在学习英语的时候，一天学习20个单词，但是过了一周之后，我肯定会忘记之前学过的单词。那么记住这些单词最好的办法就是应用于对话当中。我们学习web前端也是这样，同一个标签或者属性，或者是JavaScript的语法，只有你不断的见到它，并且应用它，让它都认识你了，这样你就扎实的掌握了，所以实际应用非常重要。
4.学习方法决定了你学web前端的效率以及你可以走多远，学习编程非常依赖一个好的学习方法，有太多人因为学习方法不对最终导致放弃，所以小编让各位一定注意自己的学习方法，每个人的学习方法不一样，但是大多数人错误的学习方法都是相同的，所以这方面一定要找专业人士请教。
Web前端主要的基本内容是：html，css，JavaScript；html是内容，css是表现，javascript是行为。每个人的基础及理解能力不同，所以自然选择的学习方式会有所区别，适合的就是最好的。以下学习路线可做参照规划自己学习步骤：
第一阶段学习：HTML5基础
在这一阶段主要学习，HTML5、CSS3、JavaScript基础，以及UI设计交互，完成京东页面的实现。
第二阶段学习：JavaScript核心
在这一阶段中将学习JavaScript核心，DOM编程，完成各种页面动态效果以及动态交互，实现2048游戏实战项目。
第三阶段学习：web前端核心
这一阶段是web前端真正核心所在，学习内容包括：jQuery、http协议及server端技术、HTML5高级，完成页面各种功能及效果，能够实现服务器端的通信分析，实现京东订单页的功能分析。
第四阶段学习：web前端高级技术
这一阶段是web前端技术提升阶段，学习内容包括：bootstrap、angularJS、web APP、常用JS框架，微信开发，实现web页面到移动端的迁移和部署，掌握微信产品设计和接口开发实现的相关技能。
Web前端不仅薪资比较高，而且发展前景也很可观，越来越多的年轻人纷纷选择web前端作为未来的职业发展方向，但是就怎么选择学习方法而言，但是很多都是零基础来学习web前端的，对于这个行业可能一概不知，该怎么去学习呢？什么样的学习方法更适合学。，那么这份最详细的web前端学习路线分享给大家。
第一阶段：前端页面重构
内容包含了：（PC端网站布局项目、HTML5+CSS3基础项目、WebApp页面布局项目）
第二阶段：JavaScript高级程序设计
内容包含：1）原生 JavaScript交互功能开发项目、面向对象进阶与 ES5/ES6应用项目、JavaScript工具库自主研发项目）
第三阶段：PC端全栈项目开发
内容包含：（jQuery经典交互特效开发、HTTP协议、Ajax进阶与PHP/JAVA开发项目、前端工程化与模块化应用项目、PC端网站开发项目、PC端管理信息系统前端开发项目）
第四阶段：移动端项目开发
内容包含：（Touch端项目、微信场景项目、应用 Angular+Ionic开发 WebApp项目、应用 Vue.js开发 WebApp项目、应用 React.js开发 WebApp项目）
第五阶段：混合（Hybrid,ReactNative）开发
内容包含：（微信小程序开发、React Native、各类混合应用开发）
第六阶段：NodeJS全栈开发
内容包括：（WebApp后端系统开发、一、NodeJS基础与NodeJS核心模块二、Express三、noSQL数据库）
第七阶段：大数据可视化
内容包含：（大数据可视化化基础与实战、一、数据可视化入门、二、D3.js详解、三、其他JS库）
对于想学习web前端的同学来说：首先是自学，其实自学也不是不可以，只要有毅力能坚持，自己学习是完全没有问题的，现在有很多同学也是自己找资料视频来学习。最后技术也学的挺牛的，得看个人兴趣和悟性，软件开发本来就是一项比较枯燥的工作，如果只是单纯的觉得这项行业工资高而进来的话，可能学习中遇到技术难题，就会知难而退了，难以坚持下去，而真正爱这行的会迎难而上，不解决不罢休，这也是为什么有些能自学下来有些却不行的原因。
如果选择培训机构的话，对于没有基础或者毅力坚持下去的同学是比较好的学习方式，首先培训机构课程比较完善，没有基础的同学往往不知道从哪个方向去学习，而培训机构能更好的满足这部分学员，一般培训机构的老师都是经验比较丰富的，讲课的时候重点和难点会详细讲解，及时解决，这样学习的能保障每个学员都能弄懂，而且不用自己苦思冥想找答案。这样也大大的提升了学习的热情。最重要的是培训机构有阶段性的项目练习，这个对于自学的同学来说是没有的，现在的企业都是看着每个求职者的动手能力，如果有项目的实践操作，在应聘中也更有竞争力。
其实不管自学还是培训机构也好，最重要的是看自己的热情，还有能不能吃苦和努力，web前端开发确实是高薪职业，市场需求也很大，只要你有本事，你就是企业需求的人才，那么想快速达到这个技术能力，自己该怎么做怎么学就看你自己的选择了。
您好，web前端的学习路线分为以下8个阶段：
阶段1.前端核心基础
HTML +_CSS核心、JavaScript基础语法、JavaScript面向对象、JavaScript DOM和BOM编程、jQuery框架
阶段2.HTML5 + CSS3 + 移动端核心
HTML5新特性、Canvas专列、CSS3新特性、CSS3进阶、CSS3实例演练
阶段3.移动端
移动端核心、移动端适配、移动端特效
阶段4.服务器端
服务器端开发、数据库操作、前后端交互核心、微信公众号开发
阶段5.JavaScript高级
JavaScript基础深入剖析、JavaScript面向对象深入讲解、JavaScript异步编程、JavaScript函数式编程、JavaScript设计模式
阶段6.前端必备
性能优化、版本控制工具、模块化、项目构建工具
阶段7.高级框架
React框架基本使用、React框架进阶、Vue框架基本使用、Vue框架进阶、Vue源码分析
阶段8.小程序
原生小程序入门、原生小程序API使用、小程序框架Mpvue
希望对您有帮助。
绛旓細鐜板湪瀛︿範Web鍓嶇鏄粷浣虫椂鏈燂紝鎶撲綇鏈轰細锛屾嬁楂樿柂杩涘悕浼佸氨涓嶅啀鏄棶棰樸傞偅涔堟兂瀛﹀ソ杩欓棬鎶鏈紝闇瑕佸涔犲摢浜涘唴瀹瑰憿?濡傛灉鎯崇郴缁熺殑瀛︿範鍓嶇锛屽彲浠ユ潵鎴戣繖鐪嬬湅 绗1闃舵锛氬墠绔〉闈㈤噸鏋 PC绔綉绔欏竷灞椤圭洰銆丠TML5+CSS3鍩虹椤圭洰銆乄ebApp椤甸潰甯冨眬椤圭洰 绗2闃舵锛欽avaScript楂樼骇绋嬪簭璁捐 鍘熺敓JavaScript浜や簰鍔熻兘寮鍙戙侀潰鍚戝璞...
绛旓細铚楃墰瀛﹂櫌鍦ㄨ繖閲岀粰澶у鏁寸悊浜嗕竴浠web鍓嶇寮鍙戝畬鏁寸殑瀛︿範璺嚎锛屾鏋跺湪绗笁闃舵涓紝甯屾湜鍙互甯埌浣爚绗竴闃舵锛氫笓涓氭牳蹇冨熀纭 闃舵鐩爣锛1. 鐔熺粌鎺屾彙HTML5銆丆SS3銆丩ess銆丼ass銆佸搷搴斾功甯冨眬銆佺Щ鍔ㄧ寮鍙戙2. 鐔熺粌杩愮敤HTML+CSS鐗规у畬鎴愰〉闈㈠竷灞銆4. 鐔熺粌搴旂敤CSS3鎶鏈紝鍔ㄧ敾銆佸脊鎬х洅妯″瀷璁捐銆5. 鐔熺粌瀹屾垚绉诲姩绔...
绛旓細鑰佸疄璇达紝鍓嶇缁忚繃杩欏嚑骞寸殑蹇熷彂灞曪紝缃戜笂鐨勬枃绔犲拰鏁欑▼杩樻槸铔鐨勶紝鏈夌粡楠岀殑浜鸿兘澶熸牴鎹祫鏂欏埗瀹氬嚭灞炰簬鑷繁鐨勫涔犳柟娉曞拰璺緞锛屼絾瀵逛簬灏忕櫧鏉ヨ锛岃繕鏄湁浜涢毦搴︺傜煡浜嗗鏉ョ粰澶у鍒嗕韩鍓嶇瀛︿範璺緞銆傞拡瀵0鍩虹锛岄潪绉戠彮锛屾病鏈夌紪绋嬬粡楠岋紝鎯瀛﹀墠绔锛屼絾鏄笉鐭ラ亾濡備綍鍏ラ棬鐨勪汉缇ゃ傚熀纭閮ㄥ垎锛1銆丠TML + CSS 杩欓儴鍒嗗涔...
绛旓細杩欏锛屽凡缁忚繃鏃朵簡锛屽缓璁病蹇呰鍘诲涔犱簡锛屾瘯绔熸垜浠殑鏃堕棿寰堝疂璐碉紝杩樻湁涓澶у爢鏇存湁浠峰肩殑涓滆タ绛夌潃鎴戜滑鍘诲銆傚洜姝わ紝鎴戜滑瑕佸叆闂 Web 鍓嶇寮鍙戠殑璇濓紝闄や簡瑕佸涔 HTML/CSS/JavaScript 涓夊ぇ鍩虹鎶鏈爤锛岃繕瑕佷簡瑙 Vue 浣撶郴銆傝 Vue 浣撶郴锛岄櫎浜 Vue 妗嗘灦鏈韩锛岃繕鍖呮嫭鍏朵粬鎶鏈爤銆備笅鏂规槸瀛︿範鍓嶇寮鍙戠殑瀛︿範璺嚎锛...
绛旓細瀵逛簬鍒濆web鍓嶇鐨勪汉鑰岃█锛屼笉娓呮璇︾粏鐨web鍓嶇瀛︿範璺嚎锛岀‘瀹炴槸涓涓浜哄ご鐤肩殑闂锛屼粖澶﹚eb鍓嶇鍩硅鐨勫皬缂栧氨涓烘偍瑙ｆ瀽web鍓嶇瀛︿範璺嚎鏄粈涔?骞跺憡璇変綘鎴戜滑璇ュ浣曞涔爓eb鍓嶇寮鍙?濡備粖鏄竴涓俊鎭ぇ鐖嗙偢鐨勬椂浠ｏ紝涔熸槸涓涓簰鑱旂綉+鐨勫钩鍙帮紝鐜板湪鍚勮鍚勪笟鍩烘湰涓婇兘浼氱壍鎵竴鐐箇eb鍓嶇鐨勭煡璇嗭紝涓嶇鏄粈涔堟牱鐨勪紒涓氶兘...
绛旓細闃舵6.鍓嶇蹇呭 鎬ц兘浼樺寲銆佺増鏈帶鍒跺伐鍏枫佹ā鍧楀寲銆侀」鐩瀯寤哄伐鍏 闃舵7.楂樼骇妗嗘灦 React妗嗘灦鍩烘湰浣跨敤銆丷eact妗嗘灦杩涢樁銆乂ue妗嗘灦鍩烘湰浣跨敤銆乂ue妗嗘灦杩涢樁銆乂ue婧愮爜鍒嗘瀽 闃舵8.灏忕▼搴 鍘熺敓灏忕▼搴忓叆闂ㄣ佸師鐢熷皬绋嬪簭API浣跨敤銆佸皬绋嬪簭妗嗘灦Mpvue web鍓嶇瀛︿範璺嚎 杩欎釜鏄痺eb鍓嶇鐨勫涔犳柟鍚戜綘浠庝笂鍒颁笅鎸夌収椤哄簭瀛︿範灏卞彲浠ヤ簡锛...
绛旓細闅忕潃绉诲姩浜掕仈缃戠殑鍙戝睍锛寃eb鍓嶇閫愭笎鍙楀埌浼佷笟鐨勯噸瑙嗭紝鍓嶇寮鍙戜汉鍛樼殑钖祫涔熸按娑ㄨ埞楂橈紝瓒婃潵瓒婂鐨勪汉鐪嬪ソ鍓嶇琛屼笟鐨勫彂灞曪紝鎯宠杞鍔犲叆銆備笅闈紝缁欏ぇ瀹跺垎浜竴浠web鍓嶇瀛︿範璺嚎鍥撅紝甯屾湜瀵瑰垵瀛﹁呮湁鎵甯姪銆俉eb鍓嶇琛屼笟鐨勫彂灞曪紝璁╁墠绔汉鍛樿兘瀹屾垚姣斾互鍓嶆洿澶氱殑鑱岃矗鑼冨洿锛屾墍浠ユ湭鏉ュ墠绔彲浠ュ鍙ｅ緞灏变笟锛屽墠鏅潪甯稿ソ銆傚浜...
绛旓細缁欎綘鍑犵偣寤鸿鍜瀛︿範璺嚎锛屽弬鑰冧竴涓嬶細1銆佷綔涓轰竴涓垵瀛﹁咃紝浣犲繀椤绘槑纭郴缁熺殑瀛︿範鏂规锛屾垜寤鸿涓瀹氭湁涓涓寚瀵肩殑浜猴紝鍏ㄩ潬鑷繁瀛︼紝鏀惧純鐨勫嚑鐜囬潪甯稿ぇ锛屽湪浣犲浜web鍓嶇杩樻病鏈変换浣曟蹇电殑鏃跺欙紝闇瑕佷竴涓汉棰嗚繘闂紝涔嬪悗灏遍兘闈犺嚜宸遍捇鐮旓紝绗竴姝ュ氨鏄‘瀹歸eb鍓嶇閮介渶瑕佸摢浜涘唴瀹癸紝骞朵笖鍦ㄥ灏戞椂闂村唴瀛﹀畬锛屽缓璁椂闂6涓...
绛旓細鑰岃繖浜涢〉闈㈢殑鎼缓閮芥槸鍓嶇浜哄憳鐨勫姛鍔筹紝鎵浠ヤ粠缃戦〉鎼缓寮濮嬪叆闂╦avaweb,鑳藉緱鍒板緢濂界殑瀹炶返锛岀綉椤垫惌寤鸿瀛︿範html璇█銆乯s銆乧ss銆佺瓑 4銆佸仛濂藉熀纭瀛︿範鍚庯紝鎴戜滑灏辫鍚戞柊鎵嬭繘闃讹紝鑰宩avawebde杩涢樁闃舵瑕佸涔犲苟鐔熸倝鍒濆鏁版嵁搴撴搷浣滃拰椤圭洰绠＄悊蹇呭鍙奙yBatis鍏ラ棬 5銆佺劧鍚庤繘琛 ssM妗嗘灦鏁村悎锛屾渶缁堝畬鎴瀛︿範璺嚎锛
绛旓細6銆併婁綘涓嶇煡閬撶殑JavaScript(涓婁腑涓嬪嵎) 銆嬶紝鏈功鏃㈤傚悎JavaScript璇█鍒濆鑰呬簡瑙ｅ叾绮鹃珦锛屽張閫傚悎缁忛獙涓板瘜鐨凧avaScript寮鍙戜汉鍛樻繁鍏ュ涔犮7銆併奦ue.js鏉冨▉鎸囧崡銆嬶紝璇ヤ功鍐呭鍏ㄩ潰锛岃瑙ｇ粏鑷达紝瀹炰緥涓板瘜锛岄傜敤浜庡悇灞傛鐨勫紑鍙戣呫瀛︿範璺嚎锛氱1闃舵锛鍓嶇椤甸潰閲嶆瀯(4鍛)鍐呭鍖呭惈浜嗭細(PC绔綉绔欏竷灞椤圭洰銆丠TML5+CSS3...
