做为制品经理的你，这些前端知识你都晓得吗？
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">加入人人都是<span style="color: black;">制品</span>经理【起点学院】<span style="color: black;">制品</span>经理实战训练营，BAT<span style="color: black;">制品</span>总监手把手带你学<span style="color: black;">制品</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">倘若</span>评选近几年互联网行业最火的职位，<span style="color: black;">制品</span>经理<span style="color: black;">必定</span><span style="color: black;">能够</span>排到前三。到如今，<span style="color: black;">非常多</span>人毕业之后直接担任了<span style="color: black;">制品</span>经理/助理的岗位，这<span style="color: black;">亦</span>得益于<span style="color: black;">制品</span>岗俨然已<span style="color: black;">作为</span>了<span style="color: black;">非常多</span>企业校招时的重头戏。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">与直接以<span style="color: black;">制品</span>经理岗位为职业起点的应届生<span style="color: black;">区别</span>，业内<span style="color: black;">亦</span>存在<span style="color: black;">非常多</span>优秀的<span style="color: black;">制品</span>经理<span style="color: black;">是由于</span>如<span style="color: black;">研发</span>、视觉设计等其它岗位转化过来。<span style="color: black;">针对</span>转岗做<span style="color: black;">制品</span>的人<span style="color: black;">来讲</span>，先前的工作经验无疑在<span style="color: black;">必定</span>程度上<span style="color: black;">亦</span><span style="color: black;">增多</span>了<span style="color: black;">自己</span>的<span style="color: black;">优良</span>。</p><img src="https://p3-sign.toutiaoimg.com/9346/5483040308~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1729832923&x-signature=9LdGuRgKsDPUeFzRjLN0%2BoPboas%3D" style="width: 50%; margin-bottom: 20px;">
<h2 style="color: black; text-align: left; margin-bottom: 10px;">行业背景</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">针对</span><span style="color: black;">制品</span>经理<span style="color: black;">来讲</span>，思维<span style="color: black;">规律</span>能力、沟通表达能力等等都是很重要的人才衡量标准。<span style="color: black;">同期</span>若在某些岗位有比较多的<span style="color: black;">认识</span>，<span style="color: black;">亦</span>会<span style="color: black;">增多</span>其竞争力。<span style="color: black;">例如</span>程序猿出身的<span style="color: black;">制品</span>经理，<span style="color: black;">常常</span>对技术实现的可行性、<span style="color: black;">研发</span>工作量等方面有<span style="color: black;">必定</span>的先天<span style="color: black;">优良</span>；视觉设计出身的<span style="color: black;">制品</span>经理，<span style="color: black;">常常</span>在页面设计、用户体验等方面更胜一筹。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">换个<span style="color: black;">方向</span>来理解，<span style="color: black;">制品</span>经理需要<span style="color: black;">认识</span><span style="color: black;">制品</span><span style="color: black;">全部</span><span style="color: black;">开发</span>周期<span style="color: black;">关联</span>的<span style="color: black;">各样</span>知识，<span style="color: black;">才可</span>具备<span style="color: black;">作为</span>优秀<span style="color: black;">制品</span>经理的基本素质（<span style="color: black;">重视</span>：只是具备了基本素质<span style="color: black;">罢了</span>）。<span style="color: black;">因此</span>我个人<span style="color: black;">保持</span>的一个观点<span style="color: black;">便是</span><span style="color: black;">制品</span>经理要有孜孜不倦的学习态度，对<span style="color: black;">关联</span>的<span style="color: black;">行业</span>充满好奇心，换句说好奇心改变<span style="color: black;">制品</span>经理的视野格局（怎么这么像某个手机品牌的slogan...）。</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">为何</span>要学习前端知识？</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">说回来<span style="color: black;">咱们</span>的主题，<span style="color: black;">制品</span>人<span style="color: black;">为何</span>要学习前端知识？我感觉最重要的<span style="color: black;">原由</span>是两个：技术门槛低、更接近用户和UI设计，<span style="color: black;">另一</span>还会带来一个便利性。</p><img src="https://p3-sign.toutiaoimg.com/9346/5483877487~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1729832923&x-signature=G2zjb%2FJyst2hPSdSUEQ3dCioRiA%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">首要</span>，前端<span style="color: black;">研发</span>技术门槛相对较低。相比APP、后台服务器等项目，前端<span style="color: black;">研发</span>要简单的<span style="color: black;">非常多</span>，<span style="color: black;">针对</span>技术门外汉<span style="color: black;">来讲</span>，完全<span style="color: black;">能够</span>放下对“编程”两个字的恐惧心理，并且<span style="color: black;">因为</span>技术门槛低，做的东西<span style="color: black;">更易</span>所见即所得，在学习过程中更能带来成就感，而这种成绩感正向的激发出<span style="color: black;">更加多</span>学习热情。<span style="color: black;">因此</span>说，<span style="color: black;">倘若</span>你是一名不懂技术的<span style="color: black;">制品</span>经理，<span style="color: black;">剧烈</span><span style="color: black;">举荐</span><span style="color: black;">经过</span>前端<span style="color: black;">研发</span>这门技术来走进程序猿们的世界。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">其次，前端更接近用户和UI设计。跟后端<span style="color: black;">区别</span>，用户直接面对<span style="color: black;">运用</span>的<span style="color: black;">便是</span>前端页面，<span style="color: black;">因此</span>在<span style="color: black;">研发</span>过程中需要<span style="color: black;">持续</span>地站在用户的<span style="color: black;">方向</span>去<span style="color: black;">思虑</span>问题，这在用户体验方面会和<span style="color: black;">制品</span>经理的职责产生<span style="color: black;">必定</span>的化合<span style="color: black;">功效</span>。<span style="color: black;">同期</span>，前端<span style="color: black;">亦</span>需要<span style="color: black;">更加多</span>的关注页面布局、视觉展现等等，这在UI设计层面<span style="color: black;">亦</span>能和<span style="color: black;">制品</span>经理的职责相辅相成。<span style="color: black;">因此</span>说，站在<span style="color: black;">制品</span>经理的<span style="color: black;">方向</span>来看，前端<span style="color: black;">研发</span>相比其他技术更适合进行深层次的探索。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">另一</span>，当测试web项<span style="color: black;">日前</span>端页面时还有个好处，<span style="color: black;">由于</span>有前端知识，<span style="color: black;">因此</span>自己<span style="color: black;">能够</span>随时查看页面中各元素的属性，并能进行细节的<span style="color: black;">调节</span>且能实时看到效果。<span style="color: black;">这般</span>在和前端<span style="color: black;">研发</span>、UI设计师等沟通时更加<span style="color: black;">方便</span>准确，经过你的<span style="color: black;">实验</span>后，<span style="color: black;">能够</span>直接跟<span style="color: black;">她们</span>说按钮的高度改为24px会不会更好一点，而不是很模糊的说按钮的高度调小一点吧。这在<span style="color: black;">必定</span>程度上<span style="color: black;">亦</span>会<span style="color: black;">提高</span><span style="color: black;">全部</span>团队的协作效率。</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">前端的技术体系有<span style="color: black;">那些</span>？</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">学习前端知识前，<span style="color: black;">首要</span>要先从宏观层面对<span style="color: black;">全部</span>前端体系有个大致的<span style="color: black;">认识</span>。<span style="color: black;">因为</span>我<span style="color: black;">亦</span>不是技术出身，更专业的分析<span style="color: black;">诠释</span><span style="color: black;">能够</span><span style="color: black;">经过</span><span style="color: black;">查找</span><span style="color: black;">关联</span>的知乎问题等资料去<span style="color: black;">认识</span>，以下只是我站在<span style="color: black;">制品</span>经理<span style="color: black;">方向</span>的<span style="color: black;">有些</span>不成熟的理解，若有误欢迎请<span style="color: black;">能手</span>指正。</p><img src="https://p6-sign.toutiaoimg.com/9349/2103784948~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1729832923&x-signature=hOaSlHQHsxzV%2FG39qOILiAXoVZk%3D" style="width: 50%; margin-bottom: 20px;">
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">1、</span>入门篇：html、css</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">针对</span>用户而言，最直观的东西无非<span style="color: black;">便是</span><span style="color: black;">能够</span>肉眼看到的东西，而html/css<span style="color: black;">便是</span>用来干这个的。html 指的是超文本标签语言，说白了<span style="color: black;">便是</span>一堆标签，标签中定义了网页中展现的<span style="color: black;">各样</span>元素，<span style="color: black;">例如</span>网页的标题、正文中的文字、<span style="color: black;">照片</span>、视频等等；CSS 指层叠样式表（Cascading Style Sheets），说白了<span style="color: black;">便是</span>定义html中元素的表现形式，<span style="color: black;">例如</span>字号、颜色、对齐方式等等。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在学习<span style="color: black;">周期</span>，要<span style="color: black;">认识</span><span style="color: black;">非常多</span>东西，<span style="color: black;">包含</span>但不局限于：</p>常用html标签的含义，<span style="color: black;">例如</span><a>**</a>定义一个链接等CSS的框模型，即margin、border、padding等<span style="color: black;">详细</span>的含义<span style="color: black;">表率</span>什么；CSS<span style="color: black;">选取</span>器的种类，如元素<span style="color: black;">选取</span>器、类<span style="color: black;">选取</span>器以及<span style="color: black;">一般</span>的用法CSS定位模式都有<span style="color: black;">那些</span>？......<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">我之<span style="color: black;">因此</span>举几个例子说明，是想<span style="color: black;">显示</span>在<span style="color: black;">咱们</span>学习的过程中，不要钻知识点的牛角尖，更要学会分模块的总结思考，<span style="color: black;">这般</span><span style="color: black;">才可</span>融会贯通，学起来更加<span style="color: black;">有效</span>。在这个<span style="color: black;">周期</span><span style="color: black;">举荐</span>w3school 在线教程，这个网站虽然看起来非常接地气，但非常适合入门学习。</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">2、</span>进阶篇：JavaScript、jQuery</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">经过</span>入门篇的学习，基本上<span style="color: black;">能够</span>写<span style="color: black;">有些</span>静态的界面了。而JavaScript则是用来实现交互效果，让html、css展示的静态页面动起来。<span style="color: black;">例如</span>当鼠标悬浮到分享按钮上方，则会弹出分享<span style="color: black;">途径</span>的一个小窗口，这个<span style="color: black;">便是</span>用JavaScript实现出来的。</p><img src="https://p3-sign.toutiaoimg.com/9346/5483893970~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1729832923&x-signature=eG0IYdupJ%2FukDdtSy1BYxtGrVDo%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在<span style="color: black;">认识</span><span style="color: black;">有些</span><span style="color: black;">基本</span>的JavaScript概念之后，则<span style="color: black;">能够</span>继续学习jQuery，其实<span style="color: black;">便是</span>一个JavaScript代码库，<span style="color: black;">经过</span>jQuery能够<span style="color: black;">明显</span>降低<span style="color: black;">咱们</span>编写交互效果的难度。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这个<span style="color: black;">周期</span><span style="color: black;">一样</span><span style="color: black;">举荐</span>w3school 在线教程这个网站进行学习，<span style="color: black;">同期</span><span style="color: black;">亦</span><span style="color: black;">能够</span><span style="color: black;">经过</span>专业的<span style="color: black;">途径</span>去<span style="color: black;">认识</span><span style="color: black;">有些</span>前端UI框架的社区网站，<span style="color: black;">供给</span><span style="color: black;">海量</span> CSS 样式与 jQuery 插件，从而能够<span style="color: black;">帮忙</span><span style="color: black;">咱们</span>快速的制作<span style="color: black;">有些</span>酷炫的交互网站。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">以上两个篇章基本<span style="color: black;">便是</span>前端的内容，在知乎上曾看到<span style="color: black;">这般</span>一句描述，<span style="color: black;">按照</span>非常贴切：html是名词，css是形容词，javascript是动词，三个互相<span style="color: black;">协同</span>才是一个句子。<span style="color: black;">针对</span><span style="color: black;">制品</span>经理而言，学习<span style="color: black;">认识</span>这些知识<span style="color: black;">已然</span>足够了，完成达到了学习前端的初衷，<span style="color: black;">倘若</span>对此<span style="color: black;">非常</span>感兴趣，想学的更深入，则<span style="color: black;">能够</span>更进一步。</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">3、</span><span style="color: black;">能手</span>篇：web server、 php等后端知识</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">前端完<span style="color: black;">成为了</span>浏览器页面展示的运算，页面的展现离不开服务器和数据库的支持，这<span style="color: black;">便是</span>后端的<span style="color: black;">研发</span>。后端的架构不像前端<span style="color: black;">已然</span>有很<span style="color: black;">知道</span>的标准形式，<span style="color: black;">日前</span>存在<span style="color: black;">各样</span><span style="color: black;">方法</span>，<span style="color: black;">况且</span>技术门槛相比前端<span style="color: black;">亦</span>比较高。我对这块的<span style="color: black;">认识</span><span style="color: black;">亦</span>非常少，有兴趣的<span style="color: black;">朋友</span><span style="color: black;">能够</span>移步更专业的<span style="color: black;">地区</span>去学习<span style="color: black;">认识</span>。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">学习前端小心得</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">虽然我大一学过C++语言，但并<span style="color: black;">无</span>走<span style="color: black;">研发</span>的路线，所学到的知识<span style="color: black;">亦</span>仅限于书本，<span style="color: black;">因此</span>严格<span style="color: black;">道理</span>上我<span style="color: black;">亦</span>是一个技术门外汉。<span style="color: black;">由于</span><span style="color: black;">近期</span>的一个web项目和<span style="color: black;">自己</span>的好奇心驱动，<span style="color: black;">因此</span>才在<span style="color: black;">近期</span>不到<span style="color: black;">一月</span>内的零散时间学习<span style="color: black;">认识</span><span style="color: black;">有些</span><span style="color: black;">关联</span>的知识（<span style="color: black;">日前</span>水平有限，仍需继续<span style="color: black;">科研</span>），学习过程中的<span style="color: black;">有些</span>小心得<span style="color: black;">亦</span><span style="color: black;">期盼</span>能跟<span style="color: black;">大众</span>分享。</p>先<span style="color: black;">经过</span>文中分享的网站教程，认真过一遍html+css的知识点，<span style="color: black;">尽可能</span>全面细致，有些知识点看不懂<span style="color: black;">没关系</span>，但<span style="color: black;">最少</span>要在脑海中留下印象（下一点会说明<span style="color: black;">为何</span>）教程中会有<span style="color: black;">有些</span>小练习，尝试理解并能够自己写<span style="color: black;">有些</span>拓展的页面展示，过程中<span style="color: black;">发掘</span><span style="color: black;">不睬</span>解的点要回过头再去细看对应的知识点（<span style="color: black;">仅有</span>先留下印象<span style="color: black;">才可</span>定位到问题在哪里，<span style="color: black;">而后</span>知识点和实践结合起来更能方便理解<span style="color: black;">把握</span>）仿照<span style="color: black;">有些</span>简单的静态网页，<span style="color: black;">例如</span>电商登录页面，利用学到的html、css知识临摹出来，<span style="color: black;">时期</span><span style="color: black;">能够</span><span style="color: black;">经过</span>查看网页源码<span style="color: black;">帮忙</span>自己思考（不会看源码的<span style="color: black;">朋友</span>请<span style="color: black;">自动</span>百度），<span style="color: black;">重点</span><span style="color: black;">熬炼</span>自己html标签的<span style="color: black;">运用</span>、css属性<span style="color: black;">运用</span>、以及div定位布局等方面的知识<span style="color: black;">能够</span>先学习html+css入门的知识，写<span style="color: black;">有些</span>静态页面有了<span style="color: black;">必定</span><span style="color: black;">基本</span>之后，再<span style="color: black;">起始</span>学习JavaScript知识，<span style="color: black;">而后</span>给制作的静态页面添加交互效果，循序渐进的学习，<span style="color: black;">尽可能</span>不<span style="color: black;">想要</span>着一步到位，<span style="color: black;">否则</span>容易打消积极性<span style="color: black;">能够</span>尝试写一下小的项目，<span style="color: black;">例如</span>个人的网站。<span style="color: black;">一样</span>在过程中会遇到<span style="color: black;">非常多</span>问题，要学会<span style="color: black;">持续</span>回到第1、2点进行复盘学习<span style="color: black;">帮忙</span>对知识点的加深，<span style="color: black;">亦</span>要学会<span style="color: black;">经过</span>参考其它网页源码获取思路，最重要的要<span style="color: black;">持续</span>总结思考<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">个人练习作品分享</strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在学习过程中，我<span style="color: black;">亦</span>尝试写了一个个人网站，<span style="color: black;">日前</span>还非常简陋（大神勿喷），分享出来供<span style="color: black;">大众</span><span style="color: black;">一块</span>学习交流。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">对了，<span style="color: black;">倘若</span>想把自己的网站挂到网上，还需要学习建站技术，购买域名、主机服务器等。<span style="color: black;">日前</span>对<span style="color: black;">详细</span>的<span style="color: black;">过程</span>我<span style="color: black;">亦</span>不太清楚，今后有时间<span style="color: black;">能够</span><span style="color: black;">科研</span>一下把网站放上去，想想还算是比较有成就感的一件事情。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">倘若</span><span style="color: black;">大众</span>感兴趣，<span style="color: black;">日前</span>只能把网页文件下载到本地，<span style="color: black;">而后</span>本地打开查看（<span style="color: black;">这般</span><span style="color: black;">亦</span>有个好处，用到的图标和背景<span style="color: black;">照片</span><span style="color: black;">能够</span>更方便的拿到），欢迎<span style="color: black;">大众</span>交流指正。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">本文由 @刘鹏 原创发布于人人都是<span style="color: black;">制品</span>经理 ，未经许可，禁止转载。</p>
期待楼主的下一次分享！”
页:
[1]