web前端主要包含了哪些技术？ web前端开发都包括哪些技术
Web\u524d\u7aef\u4e3b\u8981\u5305\u62ec\u54ea\u4e9b\u6280\u672f\uff1f\u5c0f\u767d\u6c42\u89e3\u7b54Web\u524d\u7aef\u6280\u672f\u4e3b\u8981\u5305\u62ecHTML5\u3001CSS3\u3001Less\u3001Sass\u3001\u54cd\u5e94\u5f0f\u5e03\u5c40\u3001\u79fb\u52a8\u7aef\u5f00\u53d1\u3001\u4ee5\u53caPs\u8bbe\u8ba1\u7b49\uff0c\u66f4\u9ad8\u7ea7\u7684\u524d\u7aef\u5f00\u53d1\u4eba\u5458\u8fd8\u9700\u8981\u638c\u63e1JavaScript \u8bed\u8a00\u3001Mysql\u3001Mongodb\u6570\u636e\u5e93\u5f00\u53d1\u3001vue.js\u3001webpack\u3001elementui\u7b49\u524d\u7aef\u6846\u67b6\u6280\u672f\u3002\u8717\u725b\u5b66\u9662\u8fd9\u91cc\u4e5f\u7ed9\u5927\u5bb6\u6574\u7406\u4e86\u4e00\u4efdweb\u524d\u7aef\u5b66\u4e60\u8def\u7ebf\uff0c\u5e0c\u671b\u5bf9\u60f3\u8981\u5b66\u4e60web\u524d\u7aef\u7684\u5c0f\u767d\u6709\u6240\u5e2e\u52a9\u3002
\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\u4e4b\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\u58f0\u660e\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
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前端是为了协调前端设计与后端开发之间工作的岗位，是最接近产品和设计的工程师，起到衔接产品和技术的作用，前端为用户可以看到的部分负责，所以也是最接近用户的工程师。
Web前端开发基础技能：HTML、CSS、JavaScript
前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚、弄明白，这样在开发的过程中才会得心应手。
Web前端开发必知标准：http标准、W3C标准、ECMAScript标准
浏览器要从服务端获取网页，网页也可能将信息再提交给服务器，这其中都有http的连接。W3C标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构(Structure)、表现(Presentation)和行为(Behavior)。JS是在ES的基础上，为Web浏览器做了一部分封装(增加了DOM操作、BOM操作等)。
Web前端开发加薪技能：jQuery、Ajax、React
jQuery一定是大部分Web前端开发者不可或缺的工具，对jQuery的学习不能停留在只使用它的API和插件上，还要会自己去写jQuery插件、会读jQuery源码、了解jQuery的设计思路。
Ajax是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，Ajax可以在无需重新加载整个网页的情况下，更新部分网页的技术。
React主要用于构建UI，你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。
除了要掌握技术层面的知识，Web前端工程师还要掌握理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等等。
这里整理了一份web前端的系统学习路线，包含的技术如下：
第一阶段：专业核心基础
阶段目标：
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。
对于一些初出校门或者是零基础转行人员来说，Web开发岗位在未来职位晋升、薪资待遇上都是前景可观的，想要成为一名合格的Web开发工程师就需要掌握岗位所需要的开发技能，下面和小编一起看一下都有哪些内容吧。
一、HTML5+CSS3
HTML5和CSS3是通往Web工程师路上必须学会的基本内容，主要包括了解常用浏览器和浏览器内核;了解语义化的概念;掌握HTML5语法及使用技巧;掌握HTML5常用标签。掌握CSS语法及使用技巧;掌握DIV+CSS布局方式;掌握常见网页布局模式。掌握HTML5新布局标签、多媒体标签;掌握CSS32D、3D变换、动画效果;能够使用CSS3新属性美化修饰网页;了解移动端屏幕、移动端浏览器、操作系统的不同等内容。
二、JS交互设计
JS交互技术可以赋予页面一个动态的效果展示，提升用户的浏览体验，这部分主要是通过JS的学习掌握JavaScript基本语法;掌握常见JavaScript算法;掌握DOM的各种操作;熟练使用面向对象思想进行DOM编程;掌握JavaScript的高级语法;掌握JavaScript常见兼容性方案。熟练使用jQuery操作DOM;熟练使用和编写jQuery案例。
三、Node开发
Node.js不仅仅是一个框架，它是一个完整的JavaScript环境，配备了开发人员可能需要的开发工具。所以学好Node是在打通前后端开发中需要掌握的技术。这部分需要掌握ES6的基础用法和兼容性;掌握ES6的核心语法;使用ES6实现前端模块化开发。使用Webpack模块打包器;使用Node.js进行Web服务端开发;掌握JavaScript异步编程模型;掌握JavaScript模块化编程方式;使用Node.js操作MongoDB数据库;独立开发基于后台接口的动态网站、Ajax数据交互的项目;独立完成企业网站从前台到后台的基本开发工作。
四、前端框架
前端框架是Web开发人员需要熟练掌握的技能，并且在实际开发中是会被广泛应用的，那么对于前端框架方面需要掌握现在主流的Vue、React、Angular等，掌握D3.js进行大数据可视化交互开发;掌握Vue技术栈进行项目开发;掌握React技术栈进行项目开发;掌握使用主流框架开发门户网站、管理系统、移动Web等客户端;掌握Webpack项目构建配置流程;掌握Web项目的部署与发布模式;掌握常见网站业务模块开发等。
五、小程序与APP开发
现在移动应用越来越受欢迎，掌握了小程序和APP开发技术可以增强自身竞争力，这就需要掌握小程序的开发基础;能够独立开发小程序项目;能够掌握Canvas的使用;能够掌握小程序的部署与发布;能够掌握小程序开发框架mpvue的使用;掌握第三方AI平台的使用。能够掌握小游戏开发基础;能够独立开发小游戏项目;能够掌握小游戏的部署与发布;能够独立使用ReactNative开发原生App。
前端前景是很不错的，像前端这样的专业还是一线城市比较好，师资力量跟得上、就业的薪资也是可观的，学习前端可以按照路线图的顺序，
0基础学习前端是没有问题的，关键是找到靠谱的前端培训机构，你可以深度了解机构的口碑情况，问问周围知道这家机构的人，除了口碑再了解机构的以下几方面：
1. 师资力量雄厚
要想有1+1>2的实际效果，很关键的一点是师资队伍，你接下来无论是找个工作还是工作中出任哪些的人物角色，都越来越爱你本身的技术专业前端技术性，也许的技术专业前端技术性则绝大多数来自你的技术专业前端教师，一个好的前端培训机构必须具备雄厚的师资力量。
2. 就业保障完善
实现1+1>2效果的关键在于能够为你提供良好的发展平台，即能够为你提供良好的就业保障，让学员能够学到实在实在的知识，并向前端学员提供一对一的就业指导，确保学员找到自己的心理工作。
3. 学费性价比高
一个好的前端培训机构肯定能给你带来1+1>2的效果，如果你在一个由专业的前端教师领导并由前端培训机构自己提供的平台上工作，你将获得比以往更多的投资。
希望你早日学有所成。
前端需要学的知识主要有html, css, javascript, nodejs，前端框架React, Vue, anagular 等。
1.html是用来描述网页的一种语言可以理解为是网页的结构, css是给html设置样式的就是排版html的。入门时候html, css不需要理解的很深入，只需要了解一个大概的用法就可以，学习起来也相对于比较容易。
2.javascript简称js, 是用来操作网页行为的比如用户点击事件等。js比html, css 学习起来难度大，也是整个前端的重中之重。
3.等这些基础学好以后，可以开始学习前端框架React, Vue, angular等，这些框架的学习资源网上都能找到，可以跟着教程做实战项目。
绛旓細4. 闅忕潃鎶鏈殑鍙戝睍锛屽墠绔妧鏈爤涓嶆柇鎵╁睍锛鍖呮嫭鍝嶅簲寮忚璁°佸墠绔鏋讹紙濡俁eact銆乂ue.js銆丄ngular绛夛級銆佸墠绔姸鎬佺鐞嗐佸墠绔畨鍏ㄧ瓑锛岃繖浜涢兘鏄幇浠eb鍓嶇鎶鏈殑閲嶈缁勬垚閮ㄥ垎銆5. 鍦ㄧ幇浠ｅ墠绔紑鍙戜腑锛屽紑鍙戣呰繕闇瑕佹帉鎻′竴绯诲垪杈呭姪宸ュ叿鍜屾妧鏈紝濡傜増鏈帶鍒跺伐鍏稧it銆佸墠绔嚜鍔ㄥ寲鏋勫缓宸ュ叿锛堝Webpack锛夈佸墠绔鏋跺紑鍙戝伐...
绛旓細Web鍓嶇鎶鏈富瑕佸寘鎷細1銆乭tml銆乧ss銆乯s绛塛EB鍓嶇寮鍙戠殑鍩虹鎶鏈銆2銆JQuery銆乭tml5+css3銆乭ttp+ajax+json+nodejs+mysql+mongoDB绛夊墠鍚庣浜や簰銆乿ue銆乺eact銆佸皬绋嬪簭銆乤pp娣峰悎寮鍙戠瓑杩涢樁鎶鏈3銆佹洿楂樼骇鐨勬妧鏈澘鍧楋紝web瀹夊叏锛屾暟鎹彲瑙嗗寲锛岀畻娉曚互鍙婄畻娉曞鐞嗙瓑銆傛嫇灞曪細Web鍓嶇寮鍙戞槸浠涔 Web鍓嶇涓昏娑夊強鐢ㄦ埛閫...
绛旓細1. 鎺屾彙HTML锛欻TML鏄瀯鎴愮綉椤靛唴瀹圭殑鍩虹锛岃礋璐ｆ壙杞介〉闈笂鐨勪俊鎭紝鍖呮嫭鏂囨湰銆佸浘鍍忓拰瑙嗛绛夈傜啛缁冭繍鐢ㄥdiv銆乼able銆乽l li銆乸銆乻pan绛夊熀鏈爣绛惧浜庡墠绔紑鍙戣呰嚦鍏抽噸瑕併2. 瀛︿範CSS锛堝眰鍙犳牱寮忚〃锛夛細CSS鐢ㄤ簬澧炲己HTML椤甸潰鐨勮瑙夋晥鏋滃拰甯冨眬銆傚墠绔伐绋嬪笀閫氬父闇瑕佽繍鐢–SS+HTML鎴朇SS+div绛夋妧鏈繘琛岀晫闈㈣璁°傛帉鎻lo...
绛旓細web鍓嶇寮鍙戝寘鎷殑鎶鏈強鐗圭偣鍖呭惈浠ヤ笅鍑犵偣锛1銆丠tmlHtml閮ㄥ垎闇瑕佷簡瑙ｅ父鐢ㄦ祻瑙堝櫒鍜屾祻瑙堝櫒鍐呮牳;浜嗚В璇箟鍖栫殑姒傚康;鎺屾彙Html5璇硶鍙婁娇鐢ㄦ妧宸;鎺屾彙Html5甯哥敤鏍囩銆傛帉鎻tml5鏂板竷灞鏍囩銆佸濯掍綋鏍囩绛夈2銆丆SSCSS閮ㄥ垎鐨勪富瑕佺煡璇嗘湁鎺屾彙CSS璇硶鍙婁娇鐢ㄦ妧宸;鎺屾彙DIV+CSS甯冨眬鏂瑰紡;鎺屾彙甯歌缃戦〉甯冨眬妯″紡;鎺屾彙Photoshop鍒囧浘...
绛旓細Web鍓嶇鎶鏈寘鎷細HTML銆丆SS銆丣avaScript銆侶TML锛圚yperText Markup Language锛夋槸涓绉嶇敤浜庡垱寤虹綉椤电殑鏍囪璇█銆傚畠鐢ㄤ簬瀹氫箟缃戦〉鐨勭粨鏋勫拰鍐呭锛屽鏂囨湰銆佸浘鍍忋侀摼鎺ャ佽〃鍗曠瓑銆侶TML鏄瀯寤虹綉椤电殑鍩虹锛屽畠鎻愪緵浜嗙綉椤靛唴瀹圭殑妗嗘灦銆侰SS锛圕ascading Style Sheets锛夋槸鐢ㄤ簬鎻忚堪缃戦〉鏍峰紡鐨勪竴绉嶈瑷銆傚畠鍙互鎺у埗缃戦〉鐨勫竷灞銆侀鑹...
绛旓細1. 鎺屾彙鍩虹鐨刉eb鍓嶇寮鍙戞妧鏈紝鍖呮嫭HTML銆丆SS銆丣avaScript銆丏OM銆丅OM浠ュ強AJAX绛銆傚悓鏃讹紝浜嗚В杩欎簺鎶鏈湪涓嶅悓娴忚鍣ㄤ笂鐨勫吋瀹规с佹覆鏌撴満鍒朵互鍙婂彲鑳藉嚭鐜扮殑bug銆2. 鐔熸倝缃戠珯鎬ц兘浼樺寲銆丼EO浠ュ強鏈嶅姟鍣ㄧ寮鍙戞妧鏈殑鍩虹姒傚康銆3. 瀛︿細杩愮敤鍚勭Web鍓嶇寮鍙戜笌娴嬭瘯宸ュ叿浠ユ彁楂樺紑鍙戞晥鐜囥4. 闄や簡鎶鏈眰闈㈢殑鐭ヨ瘑锛岃繕闇鎺屾彙...
绛旓細web鍓嶇寮鍙戞牳蹇冩妧鏈涓嬶細涓銆丠TML璇█锛鎺屾彙HTML鏄綉椤电殑鏍稿績锛屾槸涓绉嶅埗浣滀竾缁寸綉椤甸潰鐨勬爣鍑嗚瑷锛屾槸涓囩淮缃戞祻瑙堝櫒浣跨敤鐨勪竴绉嶈瑷锛屽畠娑堥櫎浜嗕笉鍚岃绠楁満涔嬮棿淇℃伅浜ゆ祦鐨勯殰纰嶃傚洜姝わ紝瀹冩槸鐩墠缃戠粶涓婂簲鐢ㄦ渶涓哄箍娉涚殑璇█锛屼篃鏄瀯鎴愮綉椤垫枃妗ｇ殑涓昏璇█锛屽濂紿TML鏄垚涓篧eb寮鍙戜汉鍛樼殑鍩烘湰鏉′欢銆備簩銆丆SS锛氬濂紺SS鏄...
绛旓細web鍓嶇寮鍙戝寘鎷殑鎶鏈細1銆佸濂紺SS鏄綉椤靛瑙傜殑閲嶈涓鐐癸紝CSS鍙互甯姪鎶婄綉椤靛瑙傚仛寰楁洿鍔犵編瑙傘2銆乨iv甯冨眬锛欴IV鍏冪礌鏄敤鏉ヤ负HTML鏂囨。鍐呭ぇ鍧楃殑鍐呭鎻愪緵缁撴瀯鍜岃儗鏅殑鍏冪礌銆2銆佸涔燡avaScript鐨勫熀鏈娉锛屼互鍙婂浣曚娇鐢ㄣ侸avaScript缂栫▼灏嗕細鎻愰珮寮鍙戜汉鍛樼殑涓汉鎶鑳姐3銆佷簡瑙nix鍜孡inux鐨勫熀鏈煡璇嗚櫧鐒惰繖涓ょ偣寰堝熀纭锛...
绛旓細1銆佸浼欻TML HTML鏄綉椤靛唴瀹圭殑杞戒綋鍐呭灏辨槸缃戦〉鍒朵綔鑰呮斁鍦ㄩ〉闈笂鎯宠璁╃敤鎴锋祻瑙堢殑淇℃伅锛屽彲浠鍖呭惈鏂囧瓧銆佸浘鐗囥佽棰戠瓑銆傝鐔熺粌鎺屾彙div銆乼able銆乽lli銆乸銆乻pan绛夎繖浜涙爣绛,杩欎簺閮芥槸鏈甯哥敤鐨勩2銆佸涔燙SS锛圕ascadingStyleSheets锛夆旀牱寮忋備竴鑸湅鍒web鍓嶇寮鍙戝伐绋嬪笀鐨勮姹傞噷闈,鏈変竴涓細浣跨敤csshtml鎴栬卌ssdiv鏉ヨ繘琛...
绛旓細Web鍓嶇鎶鏈富瑕佸寘鎷HTML5銆丆SS3銆丩ess銆丼ass銆佸搷搴斿紡甯冨眬銆佺Щ鍔ㄧ寮鍙戙佷互鍙奝s璁捐绛夛紝鏇撮珮绾х殑鍓嶇寮鍙戜汉鍛樿繕闇瑕佹帉鎻avaScript 璇█銆丮ysql銆丮ongodb鏁版嵁搴撳紑鍙戙乿ue.js銆亀ebpack銆乪lementui绛夊墠绔鏋舵妧鏈傝湕鐗涘闄㈣繖閲屼篃缁欏ぇ瀹舵暣鐞嗕簡涓浠web鍓嶇瀛︿範璺嚎锛屽笇鏈涘鎯宠瀛︿範web鍓嶇鐨勫皬鐧芥湁鎵甯姪銆傜涓...
