{"id":69,"date":"2022-07-23T15:05:29","date_gmt":"2022-07-23T07:05:29","guid":{"rendered":"http:\/\/ones.software\/blog\/?p=69"},"modified":"2023-07-26T17:47:39","modified_gmt":"2023-07-26T09:47:39","slug":"introduction-001","status":"publish","type":"post","link":"https:\/\/ones.software\/code\/zh\/introduction-001\/","title":{"rendered":"\u751a\u9ebc\u662f\u524d\u7aef\u958b\u767c\uff1f"},"content":{"rendered":"\n\t\t\t\t\n
\n\n\n\n
\"\"\/
\uff08Ref:https:\/\/flatironschool.com\/blog\/front-end-vs-back-end-development\/<\/a>\uff09<\/figcaption><\/figure>\n\n\n\n

\u5982\u679c\u6709\u63a5\u89f8\u904e\u7db2\u9801\u958b\u767c\u7684\u8b80\u8005\uff0c\u6216\u8005\u6703\u807d\u904e\u5f88\u591a\u4e0d\u540c\u7684\u5c08\u6709\u540d\u8a5e\uff0c\u5176\u4e2d\u4e0d\u5c11\u5f97Front-end (\u524d\u7aef) \u548c Back-end \uff08\u5f8c\u7aef\uff09\u9019\u5169\u500b\u5b57\u8a5e\u3002\u6709\u4e00\u4e9b\u7db2\u7ad9\u53ef\u80fd\u53ea\u9700\u8981\u8a2d\u8a08\u5e2b\u548c\u524d\u7aef\u958b\u767c\u8005\uff0c\u6709\u4e9b\u5247\u9700\u8981\u5f8c\u7aef\u958b\u767c\u8005\u548c\u6e2c\u8a66\u4eba\u54e1\u7b49\u7b49\uff0c\u90a3\u7a76\u7adf\u524d\u7aef\u548c\u5f8c\u7aef\u5982\u4f55\u5206\u8fa8\uff1f\u9996\u5148\uff0c\u8b93\u6211\u5011\u641e\u6e05\u695a\u524d\u7aef\u958b\u767c\u662f\u4ec0\u9ebc\u4e00\u56de\u4e8b\u3002<\/p>\n\n\n\n

\n\n\n\n

Front-end \u524d\u7aef\u958b\u767c<\/h4>\n\n\n\n
\"\"\/
\uff08Ref: http:\/\/devana.rs\/blog\/front-end-interaction-designer\/<\/a>\uff09<\/figcaption><\/figure>\n\n\n\n

\u524d\u7aef\u5305\u542b\u6240\u6709\u7528\u5bb6\u80fd\u5920\u898b\u5230\u3001\u7e7c\u800c\u4e92\u52d5\u7684\u756b\u9762\uff0c\u800c\u73fe\u4eca\u7684\u7db2\u9801\u4e3b\u8981\u4ecd\u662f\u5229\u7528HTML\u3001CSS \u548c Javascript \u4f86\u5efa\u69cb\u9019\u4e9b\u756b\u9762\u3002<\/p>\n\n\n\n

HTML\u76f8\u4fe1\u5373\u4f7f\u4e0d\u662f\u7a0b\u5f0f\u54e1\u90fd\u4e0d\u964c\u751f\uff0cHTML \u5168\u540d\u662f Hypertext Markup Language\uff08\u8d85\u6587\u4ef6\u6a19\u793a\u8a9e\u8a00\uff09\uff0c\u662f\u5efa\u7acb\u7db2\u9801\u7684\u6a19\u6e96\u6a19\u793a\u8a9e\u8a00\uff0c\u7c21\u55ae\u4f86\u8aaa\u5c31\u662f\u4e00\u500b\u7db2\u9801\u7684\u9aa8\u5e79<\/strong>\u3002\u65e9\u671f\u7684\u7db2\u9801\uff0c\u5982\u9019\u500b\u6709\u95dcWWW\u842c\u7dad\u7db2\u7684\u7db2\u7ad9(\u9023\u7d50<\/a>)\uff0c\u4e3b\u8981\u53ea\u6709\u6587\u5b57\uff0c\u5145\u5176\u91cf\u6703\u6709\u4e00\u4e9b\u5716\u50cf\uff0c\u6240\u4ee5\u756b\u9762\u6bd4\u8f03\u4e4f\u5473\uff0c\u5982\u4e0b\u9762\u7684\u4f8b\u5b501a\uff09\u3002\u65bc\u662f\uff0c\u5c31\u6709CSS\u7684\u8a95\u751f\u4e86\u3002<\/p>\n\n\n\n

1a) \u53ea\u4f7f\u7528HTML\u7684\u7db2\u9801 \uff1ahttps:\/\/codepen.io\/OnesSoftware\/pen\/wVKvxx<\/a> <\/p>\n\n\n\n

CSS \u65bc 1998\u5e74\u51fa\u73fe\uff0c \u5168\u540d\u662f Cascading Style Sheets\uff08\u5c64\u758a\u6a23\u5f0f\u8868\uff09\uff0c \u4e00\u7a2e\u7528\u4f86\u70ba\u4f8b\u5982HTML\u3001XML \u7b49\u9019\u4e9b\u7d50\u69cb\u5316\u6587\u4ef6\u6dfb\u52a0\u6a23\u5f0f\u7684\u96fb\u8166\u8a9e\u8a00\uff0c\u4ea6\u5373\u662f\u4e00\u500b\u7db2\u9801\u7684\u8868\u76ae\uff0f\u88dd\u98fe<\/strong>\u3002<\/p>\n\n\n\n

\u5728CSS \u8a95\u751f\u524d\uff0c\u8981\u63a7\u5236\u7db2\u9801\u5982\u4f55\u986f\u793a\uff0c\u5c31\u8981\u5728HTML\u6a94\u6848\u5167\u5305\u542b\u986f\u793a\u7684\u8cc7\u8a0a\uff0c\u4f8b\u5982\u5b57\u578b\u7684\u5927\u5c0f\u548c\u984f\u8272\u3001\u80cc\u666f\u61c9\u8a72\u662f\u600e\u6a23\u7684\u3001\u5982\u4f55\u6392\u5217\u7b49\u7b49\uff0c\u9019\u4e9b\u90fd\u5fc5\u9808\u9010\u4e00\u5728HTML\u6a94\u6848\u5167\u5217\u51fa\u3002\u6709\u6642\u6703\u56e0\u70ba\u8cc7\u8a0a\u91cd\u8907\u5217\u51fa\u800c\u4ee4\u5230\u7db2\u7ad9\u904e\u4efd\u5197\u9577\u3002CSS\u7684\u51fa\u73fe\u4f7f\u958b\u767c\u8005\u53ef\u4ee5\u5c07\u5927\u90e8\u5206\u9019\u4e9b\u986f\u793a\u7528\u7684\u8cc7\u8a0a\u4e2d\u9694\u96e2\u51fa\u4f86\uff0c\u5f9e\u800c\u7c21\u5316 HTML \u7684\u6a94\u6848\u3002\u9019\u4e9b\u8cc7\u8a0a\u6703\u88ab\u653e\u5728\u4e00\u500b\u8f14\u52a9\u7684\uff0c\u7528CSS\u8a9e\u8a00\u5beb\u7684\u6a94\u6848\u4e2d\u3002\u7406\u60f3\u4f86\u8aaa\uff0c \u73fe\u5728\u7684HTML\u6a94\u6848\u4e2d\u61c9\u8a72\u53ea\u5305\u542b\u7d50\u69cb\u548c\u5167\u5bb9\u7684\u8cc7\u8a0a\uff0c\u800cCSS\u6a94\u6848\u4e2d\u5c31\u5305\u542b\u6a23\u5f0f\u7684\u8cc7\u8a0a\uff0c\u4ee5\u9054\u81f4\u5206\u5de5\u7684\u76ee\u7684\u3002<\/p>\n\n\n\n

1b) \u4f7f\u7528\u4e86 HTML \u548c CSS \u7684\u7db2\u9801\uff1a https:\/\/codepen.io\/OnesSoftware\/pen\/rXOajM<\/a> <\/p>\n\n\n\n

\u5728\u4e0a\u9762\u7684\u4f8b\u5b501b)\uff0c\u662f\u5c07\u7d14\u7cb9\u4f7f\u7528HTML\u4f5c\u70ba\u6846\u67b6\u7684 1a)\uff0c\u52a0\u4e0a CSS \u7684\u88dd\u98fe\uff0c\u4f8b\u5982\u6587\u5b57\u984f\u8272\u3001 \u908a\u6846\u548c\u80cc\u666f\u984f\u8272\u3002<\/p>\n\n\n\n

\u7db2\u9801\u7684\u9aa8\u5e79\u548c\u8868\u76ae\u90fd\u6709\u4e86\uff0c\u5df2\u7d93\u53ef\u4ee5\u88fd\u4f5c\u4e00\u4e9b\u6f02\u4eae\u7684\u975c\u614b\u9801\u9762\uff0c\u4f46\u5982\u679c\u8981\u6709\u4e00\u4e9b\u80fd\u5920\u4e92\u52d5\u7684\u90e8\u5206\uff0c\u4f8b\u5982\u6301\u7e8c\u53d6\u5f97\u4e00\u4e9b\u5373\u6642\u7684\u8cc7\u8a0a\u3001\u5132\u5b58\u6578\u64da\uff0c\u751a\u81f3\u53ea\u662f\u6309\u4e0b\u6309\u9215\u6642\u5f48\u51fa\u5c0d\u8a71\u6846\uff0c\u53ea\u7528HTML\u548cCSS\u7684\u8a71\u90fd\u96e3\u4ee5\u5be6\u884c\u3002 JavaScript \u5c31\u6b63\u6b63\u80fd\u5920\u88dc\u5145\u7d66\u4e88\u7db2\u9801\u300c\u808c\u8089\u300d\u4e26\u5f97\u4ee5\u300c\u6d3b\u52d5\u300d\u9019\u500b\u89d2\u8272\u4e86\u3002<\/p>\n\n\n\n

1995 \u9762\u4e16\u7684 JavaScript \u4e3b\u8981\u7528\u4f5c\u7ba1\u7406\u7db2\u9801\u7684\u5167\u5bb9\u4ee5\u53ca\u7528\u6236\u7684\u64cd\u4f5c\u884c\u70ba\uff0c\u800c\u7531\u65bc\u4e0d\u540cPHP\u3001ASP\u7684\u4f3a\u670d\u5668\u7aef\u624b\u7a3f\u8a9e\u8a00\uff0c\u4e0d\u9700\u8981\u4f3a\u670d\u5668\u7684\u652f\u63f4\u4e5f\u80fd\u5920\u5728\u7528\u6236\u7684\u700f\u89bd\u5668\u4e0a\u904b\u884c\uff0c\u6240\u4ee5\u7684\u78ba\u80fd\u5920\u6e1b\u5c11\u5c0d\u4f3a\u670d\u5668\u7684\u8ca0\u64d4\u3002<\/p>\n\n\n\n

1c) \u4f7f\u7528 HTML \u3001CSS \u548c JavaScript \u7684\u7db2\u9801\uff1ahttps:\/\/codepen.io\/OnesSoftware\/pen\/WVrwbv<\/a><\/p>\n\n\n\n

\u5728\u4e0a\u9762\u7684\u4f8b\u5b50 1c) \u4e2d\uff0c\u52a0\u4e86JavaScript \u7684\u8f14\u52a9\u5f8c\uff0c\u6309\u4e0b\u6309\u9215\u5c31\u6703\u5f48\u51fa\u300cclicked\u300d\u7684\u5c0d\u8a71\u6846\u3002<\/p>\n\n\n\n

\"\"\/
UI \u8207 UX \u7684\u6bd4\u8f03<\/figcaption><\/figure>\n\n\n\n

\u6642\u81f3\u4eca\u65e5\uff0c\u524d\u7aef\u7684\u6280\u8853\u4e0d\u65b7\u8f49\u8b8a\uff0c \u4e2d\u9593\u6709\u904eFlash\u3001 Silverlight \u9019\u985e Web\u524d\u7aef\u61c9\u7528\u7a0b\u5f0f\u7684\u958b\u767c\u89e3\u6c7a\u65b9\u6848\u66fe\u7d93\u7a31\u9738\u591a\u5e74\uff0c\u537b\u56e0\u70ba\u624b\u6a5f\u5e73\u53f0\u4e0d\u652f\u63f4\u7b49\u56e0\u7d20\u800c\u88ab\u6dd8\u6c70\u3002\u53cd\u800c\u6700\u57fa\u790e\u7684 HTML\u3001JavaScript\u3001CSS\u4e0d\u65b7\u6539\u9032\uff0c\u4ee5\u81f4\u5982\u64ad\u653e\u5be6\u6642\u5f71\u7247\u3001\u7e6a\u5716\u3001\u52d5\u756b\u7b49\u7684\u529f\u80fd\u90fd\u7121\u9808\u984d\u5916\u65b9\u6848\u8655\u7406\u3002\u800c\u73fe\u5728\u6709\u4e0d\u5c11 framework \u548c library\uff0c\u5982 ReactJS\uff0fBootstrap \u7b49\u7b49\uff0c\u80fd\u5920\u63d0\u4f9b\u898f\u683c\u5316\u7684\u958b\u767c\u8cc7\u6e90\uff0c\u4f7f\u5f97\u958b\u767c\u7684\u6548\u7387\u548c\u6c34\u6e96\u5f97\u4ee5\u5927\u5927\u63d0\u5347\u3002<\/p>\n\n\n\n

\u524d\u7aef\u958b\u767c\u8005\u7684\u4e3b\u8981\u8077\u8cac\uff0c\u9664\u4e86\u8ca0\u8cac\u7db2\u9801\u7684\u5167\u5bb9\u5982\u4f55\u64fa\u653e<\/strong>\uff0c\u4ea6\u5373\u6240\u8b02\u7684 U<\/strong>ser I<\/strong>nterface\uff08\u4f7f\u7528\u8005\u4ecb\u9762\uff09\uff0c\u4e5f\u8981\u7167\u9867\u5230\u7528\u6236\u7684\u700f\u89bd\u9ad4\u9a57<\/strong>\uff0c\u90a3\u5c31\u662f Us<\/strong>er EX<\/strong>perience\uff08\u4f7f\u7528\u8005\u9ad4\u9a57\uff09\uff0c\u9019\u5c31\u8981\u548c\u5c08\u9580\u7684 UI\u3001UX \u8a2d\u8a08\u5e2b<\/strong>\u5408\u4f5c\u624d\u5f97\u4ee5\u8655\u7406\u5f97\u5b9c\u3002\u524d\u7aef\u958b\u767c\u8005\u4e5f\u8981\u548c\u5f8c\u7aef\u958b\u767c\u8005<\/strong>\u8655\u7406\u524d\u5f8c\u7aef\u4e4b\u9593\u7684\u7de8\u7a0b\u4ecb\u9762\uff08API<\/strong>\uff09\uff0c\u4f7f\u5f97\u6709\u9700\u8981\u6578\u64da\u5f97\u4ee5\u5132\u5b58\u3001\u7372\u53d6\u548c\u8655\u7406<\/strong>\u7b49\u7b49\u3002<\/p>\n\n\n\n

\u6709\u8208\u8da3\u7406\u89e3\u524d\u7aef\u958b\u767c\u8005\u7684\u6280\u8853\u8def\u7dda\u5716\uff0c\u53ef\u4ee5\u770b\uff1a<\/p>\n\n\n\n

https:\/\/github.com\/goodjack\/developer-roadmap-chinese\/blob\/master\/chinese-version\/images\/frontend.png<\/a><\/p>\n\n\n\n

Ref\uff1a<\/p>\n\n\n\n

https:\/\/zh.wikipedia.org\/wiki\/HTML<\/a><\/p>\n\n\n\n

https:\/\/zh.wikipedia.org\/wiki\/%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8<\/a><\/p>\n\n\n\n

https:\/\/www.pluralsight.com\/blog\/film-games\/whats-difference-front-end-back-end<\/a><\/p>\n\n\n\n

https:\/\/flatironschool.com\/blog\/front-end-vs-back-end-development\/<\/a><\/p>\n\n\n

<\/p>\n

<\/p>\n\n\n

\u66f4\u591a\u8cc7\u8a0a\u53ef\u4ee5\u7559\u610f ONES Publication \u5b9a\u671f\u767c\u4f48\u7684\u6587\u7ae0\uff0c\u4ea6\u53ef\u4ee5\u806f\u7d61\u6211\u5011\uff0c\u6211\u5011\u7684\u7db2\u5740\u662f\uff1a https:\/\/ones.software<\/a><\/p>\n\n\n\n

ONES Publication<\/a><\/pre>\n\n\n\n
We share what we have learned about app and web development. Find us in ones.software<\/a>. Email: hello@ones.software<\/pre>\n\n\n\n
\u806f\u7d61\u6211\u5011:
 \u4e3b\u9801: https:\/\/ones.software\/hk\/<\/a>
 \u96fb\u90f5\u5730\u5740: hello@ones.software
 \u96fb\u8a71\u865f\u78bc: (+852) 5538 3410
 Contact us:
 Homepage: https:\/\/ones.software\/<\/a>
 Email address: hello@ones.software
 Phone number: (+852) 5538 3410<\/p>\n\t\t","protected":false},"excerpt":{"rendered":"
\t\t\t\t\u5982\u679c\u6709\u63a5\u89f8\u904e\u7db2\u9801\u958b\u767c\u7684\u8b80\u8005\uff0c\u6216\u8005\u6703\u807d\u904e\u5f88\u591a\u4e0d\u540c\u7684\u5c08\u6709\u540d\u8a5e\uff0c\u5176\u4e2d\u4e0d\u5c11\u5f97Front-end (\u524d\u7aef) \u548c Back-end \uff08\u5f8c\u7aef\uff09\u9019\u5169\u500b\u5b57\u8a5e\u3002\u6709\u4e00\u4e9b\u7db2\u7ad9\u53ef\u80fd\u53ea\u9700\u8981\u8a2d\u8a08\u5e2b\u548c\u524d\u7aef\u958b\u767c\u8005\uff0c\u6709\u4e9b\u5247\u9700\u8981\u5f8c\u7aef\u958b\u767c\u8005\u548c\u6e2c\u8a66\u4eba\u54e1\u7b49\u7b49\uff0c\u90a3\u7a76\u7adf\u524d\u7aef\u548c\u5f8c\u7aef\u5982\u4f55\u5206\u8fa8\uff1f\u9996\u5148\uff0c\u8b93\u6211\u5011\u641e\u6e05\u695a\u524d\u7aef\u958b\u767c\u662f\u4ec0\u9ebc\u4e00\u56de\u4e8b\u3002\t\t<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false},"categories":[7,11,15],"tags":[33,42,56,64,99,104,124,126,131,132],"_links":{"self":[{"href":"https:\/\/ones.software\/code\/zh\/wp-json\/wp\/v2\/posts\/69"}],"collection":[{"href":"https:\/\/ones.software\/code\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ones.software\/code\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ones.software\/code\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ones.software\/code\/zh\/wp-json\/wp\/v2\/comments?post=69"}],"version-history":[{"count":1,"href":"https:\/\/ones.software\/code\/zh\/wp-json\/wp\/v2\/posts\/69\/revisions"}],"predecessor-version":[{"id":611,"href":"https:\/\/ones.software\/code\/zh\/wp-json\/wp\/v2\/posts\/69\/revisions\/611"}],"wp:attachment":[{"href":"https:\/\/ones.software\/code\/zh\/wp-json\/wp\/v2\/media?parent=69"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ones.software\/code\/zh\/wp-json\/wp\/v2\/categories?post=69"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ones.software\/code\/zh\/wp-json\/wp\/v2\/tags?post=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}