前端图片点击按钮加载更多内容_产品经理web前端技术必知必会

返回目录，查看更多产品经理技术知识​zhuanlan.zhihu.com

一、前端技术分类

前端技术是指用来开发客户端产品用的技术，分为APP，web，桌面软件三个大类。

对H5、Android、ios、小程序、桌面软件等不同前端载体的前端工程师能力有不同的要求。

二、Web技术的特点及应用

web技术是用来开发网页的一种前端技术，包括html、CSS等语言和前端框架。

1、HTML

HTML（类比为骨架）以标签形式表示网页组成元素，通过浏览器解析还原成可视化界面。在网页中看到的链接（a标签）、按钮（input type="submit"）、标题（<title>和</title>括起来）等都以不同的标签形式来表达实现的。层（div）可以理解为分组，以模块化方式展现，类似产品设计中的树状结构菜单。

2、CSS

CSS（类比为衣服）定义统一的样式风格，给html元素进行样式渲染。比如html定好一个按钮，CSS将此按钮定义颜色、大小等样式外观，同一个HTML页面根据不同的CSS可实现不同的展示效果（风格切换、换肤）

Web页面可实现对PC浏览器和手机浏览器的适配，一套网页可在不同的设备上呈现不同的展示效果

修改网页内容不需要重新发布客户端产品，只需要将网页代码重新部署，可进行热更新

三、HTTP协议和URL

1、HTTP协议

HTTP协议（HyperText Transfer Protocol，超文本传输协议）是因特网上应用最广泛的一种网络传输协议，所有的WWW（万维网）文件都必须遵守这个标准。网站、手机上的H5、甚至后台服务器端很多的接口，都是采用HTTP协议实现。

例如我们上百度，在浏览器中输入http://www.baidu.com，即可访问百度网站。一般情况若没有输入http://，浏览器也会自动补全。

2、URL

URL统一资源定位符，在互联网唯一定位一个资源，访问一个网站，打开一图片或者视频都是在访问一个唯一的URL。比如这个URL https://www.baidu.com/s?ie=UTF-8&wd=知乎 由协议头https://、域名（对应实际IP地址）www.baidu.com、参数名s?ie和wd、参数值UTF-8和知乎构成。

四、HTTP请求及get和post方法

1、HTTP请求

基于HTTP协议发起的网络请求叫HTTP请求，HTTP请求可以携带参数进行传递。

HTTPS （全称：Hyper Text Transfer Protocol over SecureSocket Layer），是以安全为目标的 HTTP 通道，需要申请加密证书，在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性。

2、GET方法（拉）

请求URL，比如https://www.baidu.com/s?ie=UTF-8&wd=知乎，主要用于页面查询，列表翻页，无需提交复杂数据且对安全性要求不高的的操作场景。

向指定资源获取数据，参数携带在URL中。

参数长度大小有限制。

请求过程参数会被记录在浏览器中。

安全性较低。

3、POST方法（推）

请求URLhttps://192.168.18.1/action=add，用于提交数据的操作场景，尤其是提交复杂数据化且对安全性要求高的场景。

向目的资源提交数据，参数携带在请求体中（json）。

参数大小无限制。

参数可加密安全性高。

五、微信小程序

基于微信生态的一种应用程序开放平台，只能独立运行在微信环境中，无法在手机操作系统中单独运行。

可以理解为微信APP中的APP store。有自己独立的开发语言、开发环境和发布机制。

用完即走，轻量级，不用在需要用到某个功能时就下载app，十分方便。多用于处理即时任务、轻量级任务比如打车、外卖、投票、问卷等，作为生活中常用的小工具的一种存在。早期处于验证试错阶段的产品可以使用小程序，轻量化、跨平台、可以利用微信传播，为产品研发提供了不错的选择。

1、微信小程序相关的技术语言

WXML类似html，是小程序框架设计的标签语言，用于构建小程序页面结构。

WXSS类似CSS，用于描述WXML的组件样式。

WXS是小程序的脚本语言，主要处理页面交互。

六、cookie和session

cookie是存储在客户端的文本文件，记录用户个人信息和浏览历史等，其具备有效期，可以手动删除。一般用于记住密码（登录时勾选记住密码后加密写入cookie文件，下次登录的时候加载出来）、浏览记录、广告推荐等场景。

个性化推荐场景案例介绍：

比如在知乎浏览过产品经理相关的文章，此时cookie记录下用户搜索关键词，以后每次发送新请求时携带这些搜索记录，返回相应搜索结果，即在知乎主页看到很多和产品经理相关的文章。满足了个性化推荐的需求。

session是存储在服务端的，是服务端生成的访问状态，用来校验用户身份有效性。可以由服务端设置有效期限，如果session过期要重新登录，只能由服务端控制，客户端不可设置。

cookie和session的主要区别在于对于状态的保存和维护，cookie在客户端，session在服务端。

七、web动态页和静态页

web页面分为动态页面和静态页面两种。

静态页面：只需要加载和渲染一次，将内容呈现出来，内容固定不变，无需再次加载，主要用于内容展示页面，比如功能说明页

动态页面：内容根据场景变化而不同，需要请求和加载数据，以功能类、业务逻辑类页面为主。常常表现为页面结构一致但是数据不同，需要进行数据加载。

返回目录，查看更多产品经理技术知识​zhuanlan.zhihu.com