作为一个产品司理,学习并把握根底的技能常识是十分重要的。而本篇文章就关键评论前端部分,讲一讲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元素,都能够看到其大体的结构:

元素寄存网页的根本信息,元素里的内容便是用户将在浏览器看到的东西,此外还有许许多多的元素(如:

  • )嵌套起来,一同构建了网页的结构。
  • 这些元素一般由开端符号、完毕符号、内容、特点等部分构成,其间“特点”能够协助对这些元素进行愈加详细的描绘。

    举例阐明:标题元素的写法如下,

    为开端和完毕符号,中心围住的即为标题元素的内容。

    这里是标题

    表单元素的常见写法如下,其间

    为开端符号,有action 和method两个特点,

    为完毕符号,省略号的方位放置表单元素围住的一切内容和输入控件。

    ...

    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的或

    2.2 CSS款式特点

    CSS的款式特点,例如color、border、font-style等,能够操控HTML元素的字体色彩、边框、字体款式等等。此外,CSS将每个HTML元素看作一个盒子(这也便是“盒模型”),以操控其内外边距、边框等。

    还能够运用CSS灵敏的对页面进行布局:

    (1)流体布局,扩展浏览器窗口时,页面中的内容会依据必定规矩自动扩展以习惯页面

    (2)冻住布局,经过设定页面宽度,一切页面元素都将固定在页面上,不随浏览器窗口巨细而改动布局

    (3)凝胶布局,确定页面内容区域的宽度,但外边距会依据窗口巨细进行扩展缩短,然后使得页面在浏览器中居中

    (4)肯定定位,使得元素相关于页面固定

    (5)固定定位,使元素相关于浏览器窗口固定不动

    (6)相对定位

    (7)表格显现

    (8)起浮布局

    2.3 CSS适配

    CSS能够灵敏适配,能够为一个HTML页面设置多个款式表(或许在CSS中设置@media规矩),用于不同的场景展现、匹配不同的设备或许习惯不同的窗口宽度。

    2.4 产品作业中的运用

    (1)在详细的产品规划完结计划中,不只要界说页面具有哪些元素,也要界说这些元素的款式、外观、动效等。

    在技能完结上,这是两个不同的层面,由不同的言语来完结;因此在文档写作中,也应该将元素与其款式差异开来进行描绘,而不是将一切阐明稠浊在一同(尽管这个作业往往需求和规划进行合作)。

    例如在描绘按钮时,不只要指明按钮元素的根本特点(例如按钮文本、按钮类别),也应该指出按钮在不同状况的不相同式。

    (2)在微观层面,跟着设备形状的多样化,款式适配也变成了一个很大的主题,也应是产品规划中应该考虑的重要方面。

    以网站规划而言,相同的内容元素,在手机和PC上往往需求界说不同的款式,对此有许多技能完结计划,产品司理应对款式适配有根本认知,才干与技能一同商定适配计划。

    三、JavaScript

    3.1 简介

    前面说到,运用HTML符号和CSS能够协助建立web页面,而JavaScript的运用,能够为这些页面添加行为和功用(比方对用户行为作出呼应、处理事情、更新页面、与服务端通讯),然后成为真实意义上的web运用。

    HTML5是HTML的最新版别,但实践受骗咱们议论HTML5时,不只仅指代符号,而是HTML符号、CSS款式、JavaScript脚本这些技能的结合,这些技能一同协助构件web运用。

    经过在代码中引证JavaScript文件或许直接将脚本放在

    推荐阅读