前端转产品经理简历
作为产品经理，掌握基础的技术知识非常重要。
本文侧重于前端部分，讨论了HTML和CSS、JavaScript的知识点。
为什么要学习技术？ 我觉得上面的话解释得很好。
可见，当今时代，虽然职能划分越来越细，但不同的行业、领域、职业仍然密不可分，他们相互融合、渗透。
设计和技术如此，产品经理和程序员也是如此。
您会发现，成功的产品经理在熟悉设计和用户体验的基础上，存在着熟悉技术和如何运用技术的共性。
前者像张小龙，后者像乔布斯。
这不是偶然的，因为技术和设计本来就是一体化的。 由于设计使用现有的技术来解决问题，所以设计中包含了对技术的考虑和使用。
作为执行层的产品，你可能会说没有必要理解这些宏观问题。
此外，在技术成熟的今天，产品可以充分发挥想象力，也可以直接应用现有的设计模式。
但微观层面的设计和技术共识可以明显提升合作质量和效率，这就是各平台发布设计/开发规范的原因； 另一方面，只有熟悉设计模式及其背后的技术基础，才能打破模式，发挥创造性。
在学习技术的同时，我正好在读交互设计的精髓这本书。
书中说设计可以分为对内容、形态、行为的设计。
令人惊讶的是，发现这些设计领域正好可以支持HTML、CSS、JS、MVC等技术语言和实现方案。
所以，对产品经理来说，学习技术可以帮助他们更好地理解产品设计，更好地执行产品工作，更顺利地与开发人员合作。
最初学习技术的动机是想写一个好的PRD。 为此，我们需要知道前端和后端各自想从需求文档中获取什么信息，以及他们如何利用这些信息进行开发。
然后，我读了三本书，分别介绍了HTML和CSS、JavaScript、Python这些编程语言在前端开发、后端开发中的应用。
在此简要总结了这些书中提到的技术原理，并结合自己的思考和实践指出了这些技术原理在产品工作中的应用，希望对自己和他人有所帮助。
因为内容很多，所以本文将重点放在前端部分，处理HTML和CSS、JavaScript的内容； 有关后端的内容将在下一篇文章中分享。
这里分别介绍了HTML、CSS和JavaScript在web前端开发中的应用。
另一方面，HTML1.1概要HTML被翻译成“超文本标记语言”，与现在广泛使用的markdown类似，作为标记语言，HTML用确定的语法集标记文本或富文本的内容，其中
这些HTML格式的文件通常存储在服务器中，浏览器通过互联网向服务器请求这些页面资源，分析并显示用户直接查看的页面。
1.2在HTML元素浏览器中打开任意网页，检查该HTML元素，即可了解其大致结构。
head要素中容纳了网页的基本信息，body要素的内容是用户通过浏览器看到的，此外还有很多要素相互嵌套，共同构筑了网页的结构。
这些元素通常由开始标记、结束标记、内容和属性等部分组成，“属性”有助于更具体地描述这些元素。
例：标题要素的写法如下。 h1/h1是开始和结束的标志，中间包围的是标题要素的内容。
h1这里，标题/h1表单要素的一般写法如下所示。 其中，form是开始标记，具有action和method两个属性，/form是结束标记，在省略号位置放置由表单元素包围的所有内容和输入控件。
form action=’http://123.com/test.py’ method=’POST’ . /form
1.3要将html页面放置在同一个站点中，a元素可以使用相对资源路径链接到新页面。
在网站以外，可以使用URL从绝对路径直接向服务器请求页面资源。
URL的结构典型地是与通信协议、服务器名称、域名、资源的绝对路径、URL一起传递的参数。
1.4产品在工作中的应用我们设计了一个页面，页面上的所有元素都是由HTML元素定义或实现的。
这些页面控件、信息和图像属性也可以通过HTML元素的属性来实现。 例如，可以通过设置placeholder属性值向输入框中添加提示副本，或者通过设置draggable属性使其可以拖动元素。
在页面结构层面理解设计与技术的关联有助于从技术的角度制定产品方案。
另外一方面，因为知道技术将页面结构分解为要素及其属性，所以在编写文档时，也用这种思路分解并记述页面，定制页面中有什么样的信息、哪个输入控件、哪个显示控件、这些控件的属性
接受浏览器或操作系统的默认样式。
另一方面，通过技术上理解要素及其基本属性，可以减少产品方案的详细说明遗漏。
二、CSS2.1概要CSS译为“分层样式表”，与HTML一样，CSS也是我们用来制作网页的语言，HTML定义了页面的内容和结构，CSS定义了网页的样式和表现。
具体来说，通过HTML link或style链接到CSS样式表，CSS可以通过其许多样式属性来控制html中元素的外观。
2.2 CSS样式属性CSS的样式属性。 例如，color、border、font-style等可以控制HTML元素的字体颜色、边框和字体样式等。
此外，CSS将每个HTML元素视为一个箱子，控制内外边界、边框等。
您还可以使用CSS灵活地布局页面。
当您扩展流体布局和浏览器窗口时，页面内容会根据一定的规则自动扩展以适应页面
通过固定布局和设置页面宽度，所有页面元素都将固定在页面上，而浏览器窗口的大小不会改变布局
凝胶布局，锁定页面内容区域的宽度，但外边距会根据窗口大小进行扩展收缩，从而使得页面在浏览器中居中
绝对定位，使得元素相对于页面固定
固定定位，使元素相对于浏览器窗口固定不动
相对定位
表格显示
浮动布局
2.3 CSS适配CSS可以灵活适配，可以为一个HTML页面设置多个样式表，用于不同的场景展示、匹配不同的设备或者适应不同的窗口宽度。
2.4 产品工作中的应用在详细的产品设计实现方案中，不仅要定义页面具有哪些元素，也要定义这些元素的样式、外观、动效等。
在技术实现上，这是两个不同的层面，由不同的语言来实现；因而在文档写作中，也应该将元素与其样式区分开来进行描述，而不是将所有说明混杂在一起。
例如在描述按钮时，不仅要指明按钮元素的基本属性，也应该指出按钮在不同状态的不同样式。
在宏观层面，随着设备形态的多样化，样式适配也变成了一个很大的主题，也应是产品设计中应该考虑的重要方面。
以网站设计而言，同样的内容元素，在手机和PC上往往需要定义不同的样式，对此有很多技术实现方案，产品经理应对样式适配有基本认知，才能与技术共同商定适配方案。
三、JavaScript3.1 简介前面提到，使用HTML标记和CSS可以帮助搭建web页面，而JavaScript的使用，可以为这些页面增加行为和功能，从而成为真正意义上的web应用。
HTML5是HTML的最新版本，但实际上当我们谈论HTML5时，不仅仅指代标记，而是HTML标记、CSS样式、JavaScript脚本这些技术的结合，这些技术共同帮助构件web应用。
通过在代码中引用JavaScript文件或者直接将脚本放在script元素中，就可以在web页面中增加JavaScript。
3.2 JavaScript的工作方式：通过DOM对页面进行更新浏览器在加载页面时，对于HTML中每一个元素，会创建一个表示该元素的对象，把它与所有其他元素一起放在一个类似树的结构中，
这个树即为DOM，DOM是浏览器对于页面结构的内部表示。
JavaScript可以通过DOM对页面元素进行访问、修改、增删。
例如，可以使用document.getElementById在DOM中查找元素，使用元素的innderHTML属性修改其内容，然后浏览器会近乎实时的对DOM以及页面进行更新。
3.3 处理事件浏览器在显示页面时，会有许多事件发生，例如按钮点击事件、数据到达事件、时间到期事件等，使用JavaScript编写事件处理程序，可以对这些事件进行处理。
以表单的按钮点击事件为例进行说明：用户在输入框输入信息，点击按钮提交信息后，可以在当前页查看已经提交的信息。
实现思路如下：首先通过DOM获取按钮元素，并为按钮的onclick属性设置一个处理程序。
该处理程序需要通过DOM访问输入元素，并通过输入元素的value属性获取用户输入值，最后再通过DOM增加到页面中。
这样在用户点击按钮时，就会执行该处理程序，获取用户输入并增加到页面中，以此实现用户与系统的交互。
3.4 JavaScript API通过使用JavaScript API可以为页面增加更多新的功能，如视频播放、本地存储、地理定位等。
以地理定位为例，通过调用地理定位API，
使用其getCurrentPosition方法可以获取当前位置信息并进行处理和显示；使用watchPosition方法可以对位置更新进行实时监控和报告；使用clearWatch以停止监视位置。
3.5 前后端通信Ajax
前端向服务器请求页面或者数据资源，服务端接受请求并执行服务端程序，捕获程序的输出作为响应发回前端，前端监测到数据到达后，再执行处理程序对这些数据进行处理，最终更新DOM和页面。
这种获取数据的模式称为Ajax，在应用中可以使用这种方式更新内容，而无需重新加载页面。
那么如何使用JavaScript发送请求？
首先创建一个请求对象，指明请求方法和资源地址，同时提供一个处理程序，然后发出请求，等待数据到达。
数据到达时，就会调用这个处理程序，在请求对象的responseText属性中获取传回的数据并进行处理。
浏览器主要使用两种方法发送请求：GET和POST
使用POST和GET方法都可以向服务端发送请求，不过采用了不同的方式。
POST会打包要传递到服务端的数据，并在后台把他们发送到服务器；GET也会打包数据，但会把这些数据追加到URL的最后，然后向服务器发送请求。
如果要传递的数据应当是私有的，或者数据很多，就应当使用POST；如果返回的页面要支持添加书签，就需要使用GET方法。
JSONP
除了提供HTML和JavaScript的服务器外，浏览器不允许从其他不同的服务器获取数据，这是浏览器的安全策略。
如果页面和要请求的数据同在一个服务器上，可以使用Ajax请求数据，如果页面和要请求的数据不在同一服务器上，则可以使用JSONP请求数据。
JSONP是一种使用script标记获取数据的方法，通过在请求URL后指定回调函数，将返回的数据包装在一个函数调用中进行处理。
例如，我们的网站从微博获取用户最近动态，就是一个跨域请求数据的应用。
Web Socket
Ajax和JSONP都使用了一个基于HTTP的请求/响应模型。
也就是说，每次需要从服务端获取资源时，都要使用浏览器作出请求得到相关页面和数据。
对于一些数据更新比较频繁的应用，浏览器需要不断的发送请求询问服务端是否有新数据，在这种应用场景下，Web Socket或许是一个更佳的通信方案。
Web Socket是一个新增的API，允许与一个服务器的连接保持打开，这样在有新数据时，服务器就会主动把数据发给前端，就像浏览器与服务器之间的一个接通的