产品经理为什么要懂一些前端技术？

• 当前端H5工程师说CSS时，你是否知道他在表达什么？
• 当andriod工程师说这个文本要用TextView时，你是否明白TextView是什么？
• 当ios工程师说这个UITableView要自定义时，你作何理解？
• 当产品经理在设计原型时，该如何在设计阶段降低前端开发成本呢？
• 当遇到一个产品bug时，产品经理如何定位到底是前端问题还是后端问题？

产品经理必懂的前端技术- 上 ：01 常用前端技术分类、02 Web技术的特点及应用、03 http协议和URL

产品经理必懂的前端技术- 下：04 微信小程序、05 Http请求中的GET和POST是什么、06 神奇的cookie和Session、 07 静态页面和动态页面分别是什么

01 常用前端技术分类

【前端常见载体】

1. App：Android、ios、windows phone
2. 网页：HTML5(H5)、WAP
3. 桌面软件：windows、mac os、Linux

【前端只能分类及技术能力】

技术一般会分为5大类，所需的技术能力如下。

• H5：HTML、JS、CSS
• Android：Java
• Ios：Objective-C/Swift
• 小程序（微信自己开发）：WXML、WXSS、WXS
• 桌面软件：C/C++、OC

虽然都叫前端工程师，但是技术职能不一样。

02 Web技术的特点及应用

web技术：用来开发网页（百度网页）的一种前端技术（源代码），包括HTML语言（基础框架）、JavaScript脚本语言、CSS样式（披上衣服进行装扮）及一些前端框架。

• HTML页面是骨架，CSS是给HTML页面装饰的衣服，同一个HTML页面根据不同的CSS可实现不同的展示效果（风格切换和换肤）。1个html调用不同的css。
• web页面可实现对PC浏览器和手机浏览器的适配（开发一套web可以在PC端和手机端进行适配），一套网页可在不同的设备上呈现不同的展示效果。

Eg.经常会看到同一个网站PC端和手机端打开的样子是不一样的。访问是一个地址，同一个代码，只是做了兼容性的适配。

• 修改网页内容不需要重新发布客户端产品，只需要将页面代码重新部署，可进行热更新（更新效率会跟更快，通常刷新一下就更新了），通常手机上下载的软件就时常需要下载安装包然后更新。

技术讲解：“Html是软装，CSS是软装。”

1. Html（HyperText Markup Language）：超文本标记语言

以标签的形式表示网页组成元素，定义网页内容的含义和结构，通过浏览器解析还原可视化页面

【常用标签】

超链接：后面会跟<a …>

按钮：<input …>

标题：<title>一般在最顶部

层：<div>用来区分网页结构（上下结构和左右结构）和区分网页元素样式最常见的标签之一。“层是不同房间的隔断和风格区分。”

2. CSS（Cascading Style Sheets）：层叠样式表

定义统一的样式风格，给Html页面元素进行样式渲染。

03 http协议和URL

1. http协议（HyperText Transfer Protocol，超文本传输协议）：是互联网应用最为广泛的一种网络协议，所有的www文件都必须遵守这个标准。Eg. 我们在输入一个网址的时候，前面往往会带上http。

• 设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法（数据传输）
• http协议格式：http://www.xxx.com
• 客户端与服务器之间的通讯都是基于http协议进行数据传输：

例如，手机A和手机B之间发送一条数据，是要经历两次通讯的，A发给服务器，服务器再发给B，均基于http协议，是一种数据协议，是一种双方的约定。

2. 如何在互联网唯一定位一个资源？

访问一个网站，打开一张图片，观看一个视频，其实都是在访问一个唯一的url。）

URL（Uniform Resource Locator，统一资源定位符）：

https是http的加密形式，防止第三方对数据进行截取，通常需要申请单独的加密整数，保证数据安全。

ssh：加密的网络传输协议。

拆解url：https://www.baidu.com/s?ie=utf-8&wd=唐人

• 协议头：https://
• 域名：www.baidu.com

(域名是被解析的，域名对应实际IP地址：192.168.1.1，所以这个URL还可以表示为https://192.168.1.1/s?ie=utf-8&wd=唐人)

• 参数名：/s?ie wd（参数用&分隔）
• 参数值：utf-8 唐人

以上就是《第一章 产品经理必懂的前端技术- 上》课程摘要，让大家省去看视频的时间快速掌握干货！如果喜欢笔者读书笔记的话点个赞鼓励一下哟~

【其他相关内容传送门】

第二章 产品经理必懂的前端技术- 下：04 微信小程序、05 Http请求中的GET和POST是什么、06 神奇的cookie和Session、 07 静态页面和动态页面分别是什么。

第三章 产品经理必懂的后端技术 - 上：01 互联网是如何提供服务的、02 服务端基础服务架构、03 什么是接口和API。

第四章 产品经理必懂的后端技术 - 下：04 API和SDK的区别是什么、05 服务端和客户端数据交互模型、06 生产环境和测试环境的区别原理。