写给产品经理们的技术分享——前端篇_设计

作为一个产品经理，学习并掌握基础的技术知识是非常重要的。而本篇文章就重点讨论前端部分，讲一讲HTML和CSS、Java的知识要点。

为什么学习技术？我想上面这段话给予了非常好的解释。

在当今时代，职能划分越来越精细，但你仍然可以看到不同行业、领域、职业都密不可分，他们互相融合和渗透。设计和技术亦是如此，产品经理和程序员亦是如此。

不难发现，成功的产品经理有一个共性，那就是在精通设计与使用者体验的基础上，精通技术或者如何运用技术。前者如张小龙，后者如乔布斯。

这并非偶然，而是因为技术和设计原本就是一体的：设计使用当下的技术来解决问题，因此设计中就包含了对技术的考量与使用。

你可能会说，作为一个执行层的产品，并不需要了解这些宏观的问题。你可能还会说，在技术如此成熟的当下，产品可以尽情发挥想象或者直接套用现有设计模式。

可是事实表明，在微观层面设计和技术达成共识可以显著提升合作质量和效率，这也正是各个平台（不管是安卓、iOS，还是小程式、网站）推出设计/开发规范的原因；另一方面，只有深谙设计模式及其背后的技术基础，才能打破模式、迸发创意。

在学习技术的同时，我刚好在看互动设计精髓这本书。书中提到了设计可以分为对内容、形态、行为的设计。我惊喜地发现这些设计领域刚好可以对应一些技术语言或实现方案，例如HTML、CSS、JS，又例如MVC（一种开发模式，下篇文章会提及）。

所以对产品经理而言，学习技术可以帮助你更好地理解产品设计，更好地执行产品工作，更加顺畅地与开发人员合作。

最初我学习技术的动机来自于想写一份好的PRD（我的一篇专栏文章讲述了这个主题，详见文章底部的参考资料），为此，我需要知道前端、后端分别想从需求档案中获取哪些资讯以及他们会如何利用这些资讯进行开发。

由此出发，我看了三本书，分别介绍了HTML和CSS、Java、Python这些程式语言在前端开发、后端开发中的应用。

在这里，简单总结一下这些书中提及的技术原理，并结合自己的思考和实践指出这些技术原理在产品工作中的应用，希望可以对自己以及他人有所帮助。

由于内容较多，这篇文章将重点讨论前端部分，涉及HTML和CSS、Java的内容；关于后端的内容，将在下一篇文章中分享。

下面将分别介绍一下HTML、CSS、Java在web前端开发中的应用。

一、HTML 1.1 简介

HTML翻译作“超文字标记语言”，和现在广为使用的markdown一样，作为一种标记语言，HTML通过一套既定的语法来标记文字或者富文字内容，从而为这些内容划定结构。

这些HTML格式的档案通常储存在服务器上，浏览器通过互联网向服务器请求这些页面资源，然后解析并呈现出使用者直接看到的页面。

1.2 HTML元素

在浏览器中开启任意web页面，并检查其HTML元素，都可以看到其大体的结构：

元素存放网页的基本资讯，元素里的内容就是使用者将在浏览器看到的东西，此外还有许许多多的元素（如：、

、