作为一个产品经理，学习并掌握基础的技术知识是非常重要的。而本篇文章就重点讨论前端部分，讲一讲HTML和CSS、JavaScript的知识要点。
为什么学习技术？我想上面这段话给予了非常好的解释。
在当今时代，职能划分越来越精细，但你仍然可以看到不同行业、领域、职业都密不可分，他们互相融合和渗透。设计和技术亦是如此，产品经理和程序员亦是如此。
不难发现，成功的产品经理有一个共性，那就是在精通设计与用户体验的基础上，精通技术或者如何运用技术。前者如张小龙，后者如乔布斯。
这并非偶然，而是因为技术和设计原本就是一体的：设计使用当下的技术来解决问题，因此设计中就包含了对技术的考量与使用。
你可能会说，作为一个执行层的产品，并不需要了解这些宏观的问题。你可能还会说，在技术如此成熟的当下，产品可以尽情发挥想象或者直接套用现有设计模式。
可是事实表明，在微观层面设计和技术达成共识可以显著提升合作质量和效率，这也正是各个平台（不管是安卓、iOS，还是小程序、网站）推出设计/开发规范的原因；另一方面，只有深谙设计模式及其背后的技术基础，才能打破模式、迸发创意。
在学习技术的同时，我刚好在看交互设计精髓这本书。书中提到了设计可以分为对内容、形态、行为的设计。我惊喜地发现这些设计领域刚好可以对应一些技术语言或实现方案，例如HTML、CSS、JS，又例如MVC（一种开发模式，下篇文章会提及）。
所以对产品经理而言，学习技术可以帮助你更好地理解产品设计，更好地执行产品工作，更加顺畅地与开发人员合作。
最初我学习技术的动机来自于想写一份好的PRD（我的一篇专栏文章讲述了这个主题，详见文章底部的参考资料），为此，我需要知道前端、后端分别想从需求文档中获取哪些信息以及他们会如何利用这些信息进行开发。
由此出发，我看了三本书，分别介绍了HTML和CSS、JavaScript、Python这些编程语言在前端开发、后端开发中的应用。
在这里，简单总结一下这些书中提及的技术原理，并结合自己的思考和实践指出这些技术原理在产品工作中的应用，希望可以对自己以及他人有所帮助。
由于内容较多，这篇文章将重点讨论前端部分，涉及HTML和CSS、JavaScript的内容；关于后端的内容，将在下一篇文章中分享。
下面将分别介绍一下HTML、CSS、JavaScript在web前端开发中的应用。
一、HTML
1.1 简介
HTML翻译作“超文本标记语言”，和现在广为使用的markdown一样，作为一种标记语言，HTML通过一套既定的语法来标记文本或者富文本内容，从而为这些内容划定结构。
这些HTML格式的文件通常存储在服务器上，浏览器通过互联网向服务器请求这些页面资源，然后解析并呈现出用户直接看到的页面。
1.2 HTML元素
在浏览器中打开任意web页面，并检查其HTML元素，都可以看到其大体的结构：
元素存放网页的基本信息，元素里的内容就是用户将在浏览器看到的东西，此外还有许许多多的元素（如：、、、
这些元素一般由开始标记、结束标记、内容、属性等部分构成，其中“属性”可以帮助对这些元素进行更加具体的描述。
举例说明：标题元素的写法如下，
为开始和结束标记，中间包围的即为标题元素的内容。这里是标题
表单元素的常见写法如下，其中
为结束标记，省略号的位置放置表单元素包围的所有内容和输入控件。1.3 如何定位HTML页面
在同一网站内部，可以通过在元素中使用相对资源路径链接到一个新的页面。
在网站之外，则可以使用URL（统一资源定位符，用文件地址来标识web上的任何资源），通过绝对路径直接向服务器请求页面资源。
URL的结构通常如下：通信协议（http、https、file等）、服务器名（常见的www）、域名（服务器IP地址的简便记法）、资源的绝对路径、随URL传递的参数。
1.4 产品工作中的应用
我们设计出一个页面，页面上每一个元素（包括控件、信息、图片）都由HTML元素（例如、
、）来定义或者说实现。
这些页面控件、信息、图片的属性同样可以由HTML元素属性来实现，例如通过设置placeholder属性值，可以为输入框加入提示文案，通过设置draggable属性，让元素可以拖动。
在页面结构层面了解设计与技术的关联，可以帮助从技术的角度撰写产品方案。
（1）一方面，知道了技术会把页面结构拆解为元素及其属性，我们在写文档时，也应当以这种思路拆解并描述页面，写清楚页面有哪些信息，哪些输入控件，哪些显示控件，这些控件的属性是否需要自定义，还是直接使用浏览器或操作系统的默认样式。
（2）另一方面，从技术角度了解元素及其基本属性，就可以减少产品方案中对细节描述的遗漏。
二、CSS
2.1 简介
CSS翻译作“层叠样式表”，和HTML一样，CSS也是我们用来创建网页的语言，HTML定义页面的内容和结构，而CSS定义了web页面的样式和表现。
具体来说，通过在HTML的或