web前端开发实训心得、web前端开发实训个人总结 收藏 0

作为产品经理的你，这些前端知识你都知道吗？

加入人人都是产品经理【起点学院】产品经理实练营，BAT产品总监手把手带你学产品

如果评选近几年互联网行业最火的职位，产品经理一定可以排到前三。到如今，很多人毕业之后直接担任了产品经理/助理的岗位，这也得益于产品岗俨然已成为了很多企业校招时的重头戏。

与直接以产品经理岗位为职业起点的应届生不同，业内也存在很多优秀的产品经理是由如开发、视觉设计等其它岗位转化过来。对于转岗做产品的人来说，先前的工作经验无疑在一定程度上也增加了自身的优势。

对于产品经理来说，思维逻辑能力、沟通表达能力等等都是很重要的人才衡量标准。同时若在某些岗位有比较多的了解，也会增加其竞争力。比如程序猿出身的产品经理，往往对技术实现的可行性、开发工作量等方面有一定的先天优势；视觉设计出身的产品经理，往往在页面设计、用户体验等方面更胜一筹。

换个角度来理解，产品经理需要了解产品整个研发周期相关的各种知识，才能具备成为优秀产品经理的基本素质（注意：只是具备了基本素质而已）。所以我个人坚持的一个观点就是产品经理要有孜孜不倦的学习态度，对相关的领域充满好奇心，换句说好奇心改变产品经理的视野格局（怎么这么像某个手机品牌的slogan…）。

说回来我们的主题，产品人为什么要学习前端知识？我感觉最重要的原因是两个：技术门槛低、更接近用户和UI设计，另外还会带来一个便利性。

首先，前端开发技术门槛相对较低。相比APP、后台服务器等项目，前端开发要简单的很多，对于技术门外汉来说，完全可以放下对“编程”两个字的恐惧心理，并且由于技术门槛低，做的东西更容易所见即所得，在学习过程中更能带来成就感，而这种成绩感正向的激发出更多学习热情。所以说，如果你是一名不懂技术的产品经理，强烈推荐通过前端开发这门技术来走进程序猿们的世界。

其次，前端更接近用户和UI设计。跟后端不同，用户直接面对使用的就是前端页面，所以在开发过程中需要不断地站在用户的角度去考虑问题，这在用户体验方面会和产品经理的职责产生一定的化合作用。同时，前端也需要更多的关注页面布局、视觉展现等等，这在UI设计层面也能和产品经理的职责相辅相成。所以说，站在产品经理的角度来看，前端开发相比其他技术更适合进行深层次的探索。

另外，当测试web项目前端页面时还有个好处，因为有前端知识，所以自己可以随时查看页面中各元素的属性，并能进行细节的调整且能实时看到效果。这样在和前端开发、UI设计师等沟通时更加便捷准确，经过你的试验后，可以直接跟他们说按钮的高度改为24px会不会更好一点，而不是很模糊的说按钮的高度调小一点吧。这在一定程度上也会提升整个团队的协作效率。

学习前端知识前，首先要先从宏观层面对整个前端体系有个大致的了解。由于我也不是技术出身，更专业的分析解读可以通过查询相关的知乎问题等资料去了解，以下只是我站在产品经理角度的一些不成熟的理解，若有误欢迎请高手指正。

对于用户而言，最直观的东西无非就是可以肉眼看到的东西，而html/css就是用来干这个的。html 指的是超文本标签语言，说白了就是一堆标签，标签中定义了网页中展现的各种元素，比如网页的标题、正文中的文字、图片、视频等等；CSS 指层叠样式表（Cascading Style Sheets），说白了就是定义html中元素的表现形式，比如字号、颜色、对齐方式等等。

在学习阶段，要了解很多东西，包括但不局限于：

1. 常用html标签的含义，比如<a>**</a>定义一个链接等
2. CSS的框模型，即margin、border、padding等具体的含义代表什么；
3. CSS选择器的种类，如元素选择器、类选择器以及通常的用法
4. CSS定位模式都有哪些？
5. ……

我之所以举几个例子说明，是想表明在我们学习的过程中，不要钻知识点的牛角尖，更要学会分模块的总结思考，这样才能融会贯通，学起来更加高效。在这个阶段推荐w3school 在线教程，这个网站虽然看起来非常接地气，但非常适合入门学习。

通过入门篇的学习，基本上可以写一些静态的界面了。而JavaScript则是用来实现交互效果，让html、css展示的静态页面动起来。比如当鼠标悬浮到分享按钮上方，则会弹出分享渠道的一个小窗口，这个就是用JavaScript实现出来的。

在了解一些基础的JavaScript概念之后，则可以继续学习jQuery，其实就是一个JavaScript代码库，通过jQuery能够显著降低我们编写交互效果的难度。

这个阶段同样推荐w3school 在线教程这个网站进行学习，同时也可以通过专业的渠道去了解一些前端UI框架的社区网站，提供大量 CSS 样式与 jQuery 插件，从而能够帮助我们快速的制作一些酷炫的交互网站。

以上两个篇章基本就是前端的内容，在知乎上曾看到这样一句描述，根据非常贴切：html是名词，css是形容词，javascript是动词，三个互相配合才是一个句子。对于产品经理而言，学习了解这些知识已经足够了，完成达到了学习前端的初衷，如果对此十分感兴趣，想学的更深入，则可以更进一步。

前端完成了浏览器页面展示的运算，页面的展现离不开服务器和数据库的支持，这就是后端的开发。后端的架构不像前端已经有很明确的标准形式，目前存在各种方案，而且技术门槛相比前端也比较高。我对这块的了解也非常少，有兴趣的同学可以移步更专业的地方去学习了解。

学习前端小心得

虽然我大一学过C++语言，但并没有走开发的路线，所学到的知识也仅限于书本，所以严格意义上我也是一个技术门外汉。因为最近的一个web项目和自身的好奇心驱动，所以才在最近不到一个月内的零散时间学习了解一些相关的知识（目前水平有限，仍需继续研究），学习过程中的一些小心得也希望能跟大家分享。

1. 先通过文中分享的网站教程，认真过一遍html+css的知识点，尽量全面细致，有些知识点看不懂不要紧，但至少要在脑海中留下印象（下一点会说明为什么）
2. 教程中会有一些小练习，尝试理解并能够自己写一些拓展的页面展示，过程中发现不理解的点要回过头再去细看对应的知识点（只有先留下印象才能定位到问题在哪里，然后知识点和实践结合起来更能方便理解掌握）
3. 仿照一些简单的静态网页，比如电商登录页面，利用学到的html、css知识临摹出来，期间可以通过查看网页源码帮助自己思考（不会看源码的同学请自行百度），主要锻炼自己html标签的使用、css属性使用、以及div定位布局等方面的知识
4. 可以先学习html+css入门的知识，写一些静态页面有了一定基础之后，再开始学习JavaScript知识，然后给制作的静态页面添加交互效果，循序渐进的学习，尽量不要想着一步到位，不然容易打消积极性
5. 可以尝试写一下小的项目，比如个人的网站。同样在过程中会遇到很多问题，要学会不断回到第1、2点进行复盘学习帮助对知识点的加深，也要学会通过参考其它网页源码获取思路，最重要的要不断总结思考

个人练习作品分享

在学习过程中，我也尝试写了一个个人网站，目前还非常简陋（大神勿喷），分享出来供大家一起学习交流。

对了，如果想把自己的网站挂到网上，还需要学习建站技术，购买域名、主机服务器等。目前对具体的步骤我也不太清楚，今后有时间可以研究一下把网站放上去，想想还算是比较有成就感的一件事情。

如果大家感兴趣，目前只能把网页文件下载到本地，然后本地打开查看（这样也有个好处，用到的图标和背景图片可以更方便的拿到），欢迎大家交流指正。

本文由 @刘鹏 原创发布于人人都是产品经理 ，未经许可，禁止转载。

web前端开发最佳实践笔记

一、文章开篇

由于最近也比较忙，一方面是忙着公司的事情，另外一方面也是忙着看书和学习，所以没有时间来和大家一起分享知识，现在好了，终于回归博客园的大家庭了，今天我打算来分享一下关于《web前端开发最佳实践》这本书的读后感，以及梳理这本书中比较有用的核心知识点

二、书之印象

《web前端开发最佳实践》其实说到底就是一本提高你的涉猎面的书籍，但是缺点就是这本书的标题是web前端开发最佳实践，但是其实也就是一些很基础的东西没有什么很高深的，所以前端最佳实践这个书名就是标题党，而且里面的东西就是只可意会不可言传，说到底就是根本都没有详细的说明要怎样来实现的，从我个人的角度上来看，就是本书的内容太过于肤浅，不适合细度，大致了解就行了，但是其实这个也是挺难说的，毕竟技术也是因人而异的，如果这本书是初入职场的小白或者是还是在校的大学生的话，那么这本书拓展知识面也是挺不错的。

三、书之知识面

书中提出了几个知识点我认为是平时使用中比较有用的知识，所以在这里就跟大家分享一下

1、HTML5的async属性和defer属性

这两个属性只有在script标签设置了src属性的时候才有用，其中的defer大部分的浏览器都是支持的，但是opera mini不支持这个属性，

defer属性：这个属性是让脚本后置加载，相当于把脚本放置于页面最后加载和执行

async属性：让脚本异步加载和执行，设置了async属性之后不能保证脚本按照属性加载和执行，所以如果是脚本之间存在依赖关系，那么不能使用async属性来加载，

从功能上面来说，可以使用async属性的场合就可以使用defer属性，因此设置了async属性的时候最好是把defer属性加上，async这个属性是HTML5才出现的属性，但是defer这个属性就由来已久，所以这样写的另外一个好处是如果浏览器不支持html5属性，那么也就可以执行defer属性

2、自定义标签属性data-*

相信大多数人都知道HTML5中是可以自定义标签的，但是一方面自定义标签会导致不同的人编写的格式不同，从而降低了代码的可维护性，data-*的使用如下：

要注意的是这种用法在IE7以下的版本中是不支持的

3、浏览器兼容问题

说到浏览器的兼容问题，这里我们区分为两种兼容性问题，一种是兼容低版本的浏览器，比如就是兼容IE6、IE7之类的低版本浏览器，另外一类就是兼容不同高版本浏览器对HTML5支持特性的不完整

1、兼容低版本浏览器

低版本的浏览器我们一般是要引入html5.js来支持高版本浏览器中支持的HTML5标签，但是在高版本的浏览器中我们是不需要这个html5.js文件的这个时候我们的思路是当浏览器是IE低版本的时候就引入，这个时候我们可以尝试使用IE浏览器特有的条件注释

例如：为IE9以下的版本添加HTML5.js文件

2、兼容高版本浏览器的差异

高版本的差异性主要体现在对HTML5特性支持的差异性上面，如果是忽略了这一点的话，那么就有可能会出现意想不到的错误，所以为了防范于未来，在构建的时候，我们就应该要把这种问题扼杀在襁褓中，这里我推荐使用自动检测框架来解决这个问题，现在市面上的检测框架有很多，但是从检测准确率和使用率较高的是Modernizr框架

用法是首先引入框架的JS文件

然后是在html标签中添加no-js类,这样做是指定了检测的范围是包含在html标签内的，也就是全部的内容

例如：

这样当你运行脚本的时候，就可以在浏览器中查看到框架为HTML中的标签动态的添加添加class类，要注意的是添加的类中y

4、编写高性能的CSS代码

对于高性能的CSS代码，我个人认为CSS从性能上面来说，在CSS上面做优化可能是不太明智的选择，但是还是要提一点，就是在chrome浏览器的开发工具dev tool中提供了一个查找无效样式规则的东东，这个的具体如下：

从这里我们就可以看到了CSS使用的情况

5、Timeline工具的使用

这个的具体使用我也是一知半解，在此就不误人子弟了，以后了解到了再来讲解

四、小结

总的来说我个人认为这本书对于我这个层次的核心东西也就是这些，本书我的感觉是太过理论化，有点忽略了知识在实际中的应用实战这一点，本次的书评就到此为止，期待下期我带来的新书知识，如果你觉得本文还可以的话，请点赞

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com