作为一个产品经理，学习并掌握基础的技术知识是非常重要的。而本篇文章就重点讨论前端部分，讲一讲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.2HTML元素
在浏览器中打开任意web页面，并检查其HTML元素，都可以看到其大体的结构：
head元素存放网页的基本信息，body元素里的内容就是用户将在浏览器看到的东西，此外还有许许多多的元素（如：h、p、a、img、div、li、div）嵌套起来，共同构建了网页的结构。
这些元素一般由开始标记、结束标记、内容、属性等部分构成，其中“属性”可以帮助对这些元素进行更加具体的描述。
举例说明：标题元素的写法如下，h1/h1为开始和结束标记，中间包围的即为标题元素的内容。
h1这里是标题/h1表单元素的常见写法如下，其中form为开始标记，有action和method两个属性，/form为结束标记，省略号的位置放置表单元素包围的所有内容和输入控件。
formaction=