产品经理的技术脑：懂一点开发基础好唠嗑

web开发基础知识

1、HTML：超文本标签语言，一种纯文本类型的语言

用来设计网页的标记语言

用来显示数据

用该语言编写的文件，以.html或者.htm为后缀

由浏览器解释执行

在HTNML界面上，可以嵌套脚本语言编写的程序段，如JS

语法是固定的（w3c）

 

基本网页结构：

   

   

       

       

       

   

   

   

        4654321.

   

2、CSS：指层叠样式表 (Cascading Style Sheets),是为了解决内容与表现分离的问题

在Web早期样式和内容是不区分的，比如可以通过标签来显示加粗字体。随着页面内容的丰富，浏览器性能的提高，内容和样式的耦合使得HTML文件难以理解和维护。

CSS的出现正是为了将样式分离到独立的文件中。层叠样式表（Cascading Style Sheets，CSS），又称串样式列表、层次结构式样式表文件，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。

在Html中引入 CSS的方法：

• 在标签中引入外部的样式文件，文件中的样式将被应用到当前HTML。如：

• 设置标签的style属性

Strawberry

• 在的任何地方，添加

  
  

  3、JavaScript：网景公司的一个脚本语言

  
  

  Html和CSS，Html是基础架构，CSS用来美化页面，而JavaScript则是实现网页动态效果的基石。

  JavaScript是一种被嵌入HTML网页之中的基于对象和事件驱动、并具有相对安全性的客户端脚本语言，因为它不需要在一个语言环境下运行，而只需要支持他的浏览器即可。

  在Html中引入JS的方法：

  
  

  • 内部引入方式：直接将javascript 代码写入任何地方

   

  
  

  •  外部引入方式：创建一个.js文件，在里面书写javascript代码，然后在 html文件标签中通过 script标签的 src 属性引入该外部的 js 文件。

     

   

  那么，问题来了。

  学习了web端的技术知识，对于产品经理来说，在工作上有哪些帮助呢？今天在这里就不说和技术沟通的梗了，来点落地的工作场景让大家体会：

  周一小S一上班，就被领导叫去了办公室，要求小S今天要尽快完成产品支付功能的详细需求。

  小S回到坐位，开始马不停蹄的写写写，临近下午下班，支付功能的详细需求终于完成的七七八八了。

  然而这时，小s发现支付功能中，有一个用户绑定银行卡的小功能，需要系统根据用户银行信息直接读取对应的开户银行，对银行业务不太熟的小s犯愁了。

  需求：用户输入银行卡卡号，需要验证卡号格式，自动填充所属银行。

  解决的问题的办法有很多种。

  但今天，咱们是要聊聊懂点技术对产品经理做需求的帮助，那么，我们就来看看如何从技术角度去解决需求问题吧：

  首先看一看下面这段支付宝的银行卡号校验接口api,

  
  

  申请校验代码：

  https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?cardNo=yourcardNo&cardBinCheck=true

  返回的参数：

  {"bank":"GDB","validated":true,"cardType":"DC","key":"","messages":[],"stat":"ok"}

   

  参数解析：

  https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?cardNo=yourcardNo&cardBinCheck=true

  ↘ cardNo：银行卡卡号

  {"bank":"GDB","validated":true,"cardType":"DC","key":"","messages":[],"stat":"ok"}

  ↘   "bank":"GDB"=>"GDB":"广东发展银行"

  ↘   "cardType":"DC"=>"DC":储蓄卡

   

  看懂了这个校验api，需求就迎刃而解了。

  api的校检规则己经告诉我们：只要用户录入银行卡卡号进行校验，那么检验接口就能够返回我们需要的“所属银行”“银行卡类型”信息了。