整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
TML 或超文本标记语言 允许 Web 用户使用元素、标签和属性创建和构造部分、段落和链接。然而，值得注意的是，HTML 不能被视为一种编程语言，因为它不能创建动态功能。
HTML有很多用例，即：
本文将介绍 HTML 的基础知识，包括它的工作原理、优缺点以及它与 CSS 和 JavaScript 的关系。
HTML（代表超文本标记语言）是构成大多数网页和在线应用程序的计算机语言。超文本是用于引用其他文本片段的文本，而标记语言是告诉 Web 服务器文档的样式和结构的一系列标记。
在国内的网站上找了一圈，这应该是介绍历史最细致的，长按保存手机里翻译
平均每个网站包含几个不同的信息 HTML 页面。例如，主页、关于页面和联系页面都将具有单独的 HTML 文件。
HTML 文档是以 .html 或 .htm 扩展名结尾的文件。Web 浏览器读取 HTML 文件并呈现其内容，以便互联网用户可以查看它。
所有 HTML 页面都有一系列 HTML 元素，由一组标签和属性组成。HTML 元素是网页的构建块。标签告诉 Web 浏览器元素在哪里开始和结束，而属性描述元素的特征。
元素的三个主要部分是：
这三个部分的组合将创建一个 HTML 元素：
<p>这是在HTML中添加段落的方法。</p>HTML 元素的另一个关键部分是它的属性，它有两个部分——名称和属性值。名称标识用户想要添加的附加信息，并且属性值给出进一步的说明。
例如，添加紫色和 font-family verdana 的样式元素将如下所示：
< p style= "color:purple;font-family:verdana" >这是在HTML中添加段落的方法。< /p >另一个属性，HTML 类，对于开发和编程来说是最重要的。class 属性添加了可以作用于具有相同类值的不同元素的样式信息。 例如，我们将对标题 <h1> 和段落 <p> 使用相同的样式。样式包括背景颜色、文本颜色、边框、边距和填充，在 .important 类下。要在 <h1> 和 <p> 之间实现相同的样式，请在每个开始标记后添加 class=”important”：
<html>
<head>
<style>
.important {
background-color: blue;
color: white;
border: 2px solid black;
margin: 2px;
padding: 2px;
}
</style>
</head>
<body>
<h1 class="important">This is a heading</h1>
<p class="important">This is a paragraph.</p>
</body>
</html>大多数元素都有一个开始标签和一个结束标签，但有些元素不需要结束标签即可工作，例如空元素。这些元素不使用结束标签，因为它们没有内容：
< img src= "/" alt= "图像" >这个图像标签有两个属性——一个src属性，图像路径，和一个alt属性，描述性文本。但是，它没有内容，也没有结束标签。
最后，每个 HTML 文档都必须以 <!DOCTYPE> 声明开头，以告知 Web 浏览器文档类型。使用 HTML5，doctype HTML public 声明将是：
< !DOCTYPE html >目前，有 142 个 HTML 标签可以用于创建各种元素。尽管现代浏览器不再支持其中一些标签，但学习所有可用的不同元素仍然是有益的。
第二节将讨论最常用的 HTML 标签和两个主要元素——块级元素和内联元素。
块级元素占据页面的整个宽度。它总是在文档中开始一个新行。例如，标题元素将位于与段落元素不同的行中。
每个 HTML 页面都使用这三个标签：
<html>
<head>
<!-- META INFORMATION -->
</head>
<body>
<!-- PAGE CONTENT -->
</body>
</html>其他流行的块级标签包括：
内联元素格式化块级元素的内部内容，例如添加链接和强调的字符串。内联元素最常用于在不破坏内容流的情况下格式化文本。
例如，一个 <strong> 标签会以粗体呈现一个元素，而 <em> 标签会以斜体显示它。超链接也是使用 <a> 标记和 href 属性来指示链接目标的内联元素：
<a href="https://www.icodingdeu.com/" >点我！</a> HTML 的第一个版本由 18 个标签组成。从那时起，每个新版本都带有添加到标记中的新标签和属性。迄今为止，该语言最重大的升级是 2014 年引入的 HTML5。
HTML 和 HTML5的主要区别在于HTML5 支持新类型的表单控件。HTML5 还引入了几个语义标签，可以清楚地描述内容，例如 <article>、<header> 和 <footer>。
就像任何其他计算机语言一样，HTML 有其优点和局限性。以下是 HTML 的优缺点：
优点：
就像任何其他计算机语言一样，HTML 有其优点和局限性。以下是 HTML 的优缺点：
缺点：
HTML 用于添加文本元素并创建内容结构。然而，仅仅建立一个专业的和完全响应的网站是不够的。因此，HTML 需要借助层级样式表 (CSS)和JavaScript来创建绝大多数网站内容。
HTML 是 Internet 上的主要标记语言。每个 HTML 页面都有一系列创建网页或应用程序内容结构的元素。
HTML 是一种对初学者友好的语言，有很多支持，主要用于静态网站页面。HTML 与用于样式的 CSS 和用于功能的 JavaScript 一起使用效果最好。
我们还向您展示了一些在线教学课程，它们将有助于提高您的 HTML 知识或提供对 HTML 的基本理解。
如果您有任何其他喜欢的资源来学习 HTML，请在评论部分告诉我们。
eb标准：
由于不同浏览器解析出来的网页效果可能不同，所以需要通过web标准对其进行约束使其一致，主要包括三个方面：
结构标准：
结构用于对网页元素进行整理和分类，主要指的是HTML。
表现标准：
表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
行为标准：
行为是指网页模型的定义及交互的编写，主要指的是 JavaScript。
初识HTML：
html 全称 Hyper Text Markup Language ，中文译为：“超文本标记语言” ，描述网页的一种语言。
HTML发展：
XHTML 是一个 W3C 标准，可扩展超文本标签语言（EXtensible HyperText Markup Language），更严格更纯净的 HTML 版本，作为一种 XML 应用被重新定义的 HTML。
HTML中的注释：
<!-- 注释标签：注释的内容 -->条件注释：
条件注释的作用是：定义只有Internet Explorer才执行条件注释中的html标签。
<!--[if IE 8]>
.... some HTML here ....
<![endif]-->HTML骨架：
<!DOCTYPE html> <!-- 声明文档类型版本为html5 -->
<html lang="en"> <!-- 网页的跟标签,lang=""用来设置网页语言，其值还有zh-CN中文简体、fr法语等，设置后当系统设置语言和网页语言发生冲突时会提示是否翻译网页 -->
<head> <!-- 网页的头部 -->
<meta charset='UTF-8'> <!-- 声明字符编码，其值还有gbk和gb2312 -->
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0"> <!-- 开启移动端视口 -->
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- 开启ios快捷启动方式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 设置iOS顶部通栏样式 -->
<meta name="format-detection" content="telephone=no"> <!-- 遇到数字不转成电话号码 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- X-UA-Compatible是针对IE浏览器做兼容的，ie=edge表示兼容edge，若后面ie=7，则表示兼容IE7 -->
<meta name='keywords' content='This is a key words'> <!-- 网站搜索关键字 -->
<meta name='description' content='this is description'> <!-- 描述网站的信息 -->
<link rel="shortcut icon" type="image/x-icon" href="图片路径 "/> <!-- 网站的图标，如果图标是gif图，则需要改：type="image/gif"，引入网站图标另一种方法：命名为favicon.ico文件放到网站根目录下 -->
<link rel="stylesheet" type="text/css" href="css文件路径"/> <!-- 引用css文件 -->
<base target="_blank"/> <!-- base标签，定义这个网页中a链接打开窗口的方式，其值还有_self -->
<title>标题</title> <!-- 网站的标题 -->
<style type="text/CSS"> /* 用来写CSS代码，type="text/CSS"可以省略 */
div{width:100px; height:100px; color:white;}
</style>
</head>
<body> <!-- 网页的主体 -->
<h1>标题</h1> <!-- 标题标签，共六个级，分别为：h1~h6,大小逐级递减，h1在一个网页中只允许出现一次。 -->
<p>段落</p> <!-- 段落标签 -->
<hr/> <!-- 单线标签,所有单标签后面的关闭符均可以省略 -->
<br/> <!-- 换行标签 -->
</div></div> <!-- 无语义化标签布局用,上面的标签是语义化标签 -->
<span>span</span> <!-- 无语义化标签分割用 -->
<strong>加粗</strong> <!-- 加粗标签 -->
<b>加粗</b> <!-- 加粗标签 -->
<i>倾斜</i> <!-- 倾斜标签 -->
<em>倾斜</em> <!-- 倾斜标签 -->
<s>删除线</s> <!-- 删除标签 -->
<del>删除线</del> <!-- 删除标签 -->
<u>下划线</u> <!-- 下划线标签 -->
<ins>下划线</ins> <!-- 下划线标签 -->
<img src="图片路径" alt="图片无法加载，提示文字" title="鼠标悬停，提示文体" border="2"/> <!-- 图像标签，border是边框属性，width和height属性设置图像的宽度和高度 -->
<a href="跳转目标" target="_self">链接的命名</a> <!-- 链接标签，target属性为链接页面打开的方式，默认值_self为自身打开；_blank为新窗口打开；_new为新窗口打开，相同页面只会打开一个;_top跳出框架-->
<ul> <!-- 无序列表 -->
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<ol type="A"> <!-- 有序列表,属性type可以控制li序号的样式，其属性值有：1、A、a、I、i-->
<li>中国</li>
<li>美国</li>
<li>英国</li>
</ol>
<dl> <!-- 自定义列表 -->
<dt>分类1</dt> <!-- 分类名称 -->
<dd>分类1第1项</dd> <!-- 类的项 -->
<dd>分类1第2项</dd>
<dt>分类2</dt>
<dd>分类2第1项</dd>
<dd>分类2第2项</dd>
</dl>
<table> <!-- 定义表格，table标签实际就是一个四方块框框，里面有单元格才会显示出表格的样子 -->
<caption>信息表</caption> <!-- 表格标题 -->
<tr> <!-- 定义行 -->
<th>姓名</th> <!-- 定义表头，表头文本有加粗居中效果 -->
<th>年龄</th>
<th>性别</th>
</tr>
<tr> <!-- 定义行 -->
<td>小明</td> <!-- 定义单元格，表格里面没有列-->
<td>18</td>
<td>男</td>
</tr>
</table>
</body>
</html>提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海123
其它问题可通过以下方式联系本人咨询：
QQ：810665436
微信：ConstancyMan
为一个产品经理，学习并掌握基础的技术知识是非常重要的。而本篇文章就重点讨论前端部分，讲一讲HTML和CSS、JavaScript的知识要点。
为什么学习技术？我想上面这段话给予了非常好的解释。
在当今时代，职能划分越来越精细，但你仍然可以看到不同行业、领域、职业都密不可分，他们互相融合和渗透。设计和技术亦是如此，产品经理和程序员亦是如此。
不难发现，成功的产品经理有一个共性，那就是在精通设计与用户体验的基础上，精通技术或者如何运用技术。前者如张小龙，后者如乔布斯。
这并非偶然，而是因为技术和设计原本就是一体的：设计使用当下的技术来解决问题，因此设计中就包含了对技术的考量与使用。
你可能会说，作为一个执行层的产品，并不需要了解这些宏观的问题。你可能还会说，在技术如此成熟的当下，产品可以尽情发挥想象或者直接套用现有设计模式。
可是事实表明，在微观层面设计和技术达成共识可以显著提升合作质量和效率，这也正是各个平台（不管是安卓、iOS，还是小程序、网站）推出设计/开发规范的原因；另一方面，只有深谙设计模式及其背后的技术基础，才能打破模式、迸发创意。
在学习技术的同时，我刚好在看交互设计精髓这本书。书中提到了设计可以分为对内容、形态、行为的设计。我惊喜地发现这些设计领域刚好可以对应一些技术语言或实现方案，例如HTML、CSS、JS，又例如MVC（一种开发模式，下篇文章会提及）。
所以对产品经理而言，学习技术可以帮助你更好地理解产品设计，更好地执行产品工作，更加顺畅地与开发人员合作。
最初我学习技术的动机来自于想写一份好的PRD（我的一篇专栏文章讲述了这个主题，详见文章底部的参考资料），为此，我需要知道前端、后端分别想从需求文档中获取哪些信息以及他们会如何利用这些信息进行开发。
由此出发，我看了三本书，分别介绍了HTML和CSS、JavaScript、Python这些编程语言在前端开发、后端开发中的应用。
在这里，简单总结一下这些书中提及的技术原理，并结合自己的思考和实践指出这些技术原理在产品工作中的应用，希望可以对自己以及他人有所帮助。
由于内容较多，这篇文章将重点讨论前端部分，涉及HTML和CSS、JavaScript的内容；关于后端的内容，将在下一篇文章中分享。
下面将分别介绍一下HTML、CSS、JavaScript在web前端开发中的应用。
HTML翻译作“超文本标记语言”，和现在广为使用的markdown一样，作为一种标记语言，HTML通过一套既定的语法来标记文本或者富文本内容，从而为这些内容划定结构。
这些HTML格式的文件通常存储在服务器上，浏览器通过互联网向服务器请求这些页面资源，然后解析并呈现出用户直接看到的页面。
在浏览器中打开任意web页面，并检查其HTML元素，都可以看到其大体的结构：
<head>元素存放网页的基本信息，<body>元素里的内容就是用户将在浏览器看到的东西，此外还有许许多多的元素（如：<h>、<p>、<a>、<img>、<div>、<li>、<div>）嵌套起来，共同构建了网页的结构。
这些元素一般由开始标记、结束标记、内容、属性等部分构成，其中“属性”可以帮助对这些元素进行更加具体的描述。
举例说明：标题元素的写法如下，<h1></h1>为开始和结束标记，中间包围的即为标题元素的内容。
<h1>这里是标题</h1>
表单元素的常见写法如下，其中<form>为开始标记，有action 和method两个属性，</form>为结束标记，省略号的位置放置表单元素包围的所有内容和输入控件。
<form action="http://123.com/test.py" method="POST"> ... </form>
在同一网站内部，可以通过在<a>元素中使用相对资源路径链接到一个新的页面。
在网站之外，则可以使用URL（统一资源定位符，用文件地址来标识web上的任何资源），通过绝对路径直接向服务器请求页面资源。
URL的结构通常如下：通信协议（http、https、file等）、服务器名（常见的www）、域名（服务器IP地址的简便记法）、资源的绝对路径、随URL传递的参数。
我们设计出一个页面，页面上每一个元素（包括控件、信息、图片）都由HTML元素（例如<input>、<p>、<img>）来定义或者说实现。
这些页面控件、信息、图片的属性同样可以由HTML元素属性来实现，例如通过设置placeholder属性值，可以为输入框加入提示文案，通过设置draggable属性，让元素可以拖动。
在页面结构层面了解设计与技术的关联，可以帮助从技术的角度撰写产品方案。
（1）一方面，知道了技术会把页面结构拆解为元素及其属性，我们在写文档时，也应当以这种思路拆解并描述页面，写清楚页面有哪些信息，哪些输入控件，哪些显示控件，这些控件的属性是否需要自定义，还是直接使用浏览器或操作系统的默认样式。
（2）另一方面，从技术角度了解元素及其基本属性，就可以减少产品方案中对细节描述的遗漏。
CSS翻译作“层叠样式表”，和HTML一样，CSS也是我们用来创建网页的语言，HTML定义页面的内容和结构，而CSS定义了web页面的样式和表现。
具体来说，通过在HTML的<link>或<style>中链接到CSS样式表，CSS就可以通过其众多的样式属性，控制HTML中元素的外观表现。
CSS的样式属性，例如color、border、font-style等，可以控制HTML元素的字体颜色、边框、字体样式等等。此外，CSS将每个HTML元素看作一个盒子（这也就是“盒模型”），以控制其内外边距、边框等。
还可以使用CSS灵活的对页面进行布局：
（1）流体布局，扩展浏览器窗口时，页面中的内容会根据一定规则自动扩展以适应页面
（2）冻结布局，通过设定页面宽度，所有页面元素都将固定在页面上，不随浏览器窗口大小而改变布局
（3）凝胶布局，锁定页面内容区域的宽度，但外边距会根据窗口大小进行扩展收缩，从而使得页面在浏览器中居中
（4）绝对定位，使得元素相对于页面固定
（5）固定定位，使元素相对于浏览器窗口固定不动
（6）相对定位
（7）表格显示
（8）浮动布局
CSS可以灵活适配，可以为一个HTML页面设置多个样式表（或者在CSS中设置@media规则），用于不同的场景展示、匹配不同的设备或者适应不同的窗口宽度。
（1）在详细的产品设计实现方案中，不仅要定义页面具有哪些元素，也要定义这些元素的样式、外观、动效等。
在技术实现上，这是两个不同的层面，由不同的语言来实现；因而在文档写作中，也应该将元素与其样式区分开来进行描述，而不是将所有说明混杂在一起（虽然这个工作往往需要和设计进行配合）。
例如在描述按钮时，不仅要指明按钮元素的基本属性（例如按钮文本、按钮类别），也应该指出按钮在不同状态的不同样式。
（2）在宏观层面，随着设备形态的多样化，样式适配也变成了一个很大的主题，也应是产品设计中应该考虑的重要方面。
以网站设计而言，同样的内容元素，在手机和PC上往往需要定义不同的样式，对此有很多技术实现方案，产品经理应对样式适配有基本认知，才能与技术共同商定适配方案。
前面提到，使用HTML标记和CSS可以帮助搭建web页面，而JavaScript的使用，可以为这些页面增加行为和功能（比如对用户行为作出响应、处理事件、更新页面、与服务端通信），从而成为真正意义上的web应用。
HTML5是HTML的最新版本，但实际上当我们谈论HTML5时，不仅仅指代标记，而是HTML标记、CSS样式、JavaScript脚本这些技术的结合，这些技术共同帮助构件web应用。
通过在代码中引用JavaScript文件或者直接将脚本放在<script>元素中，就可以在web页面中增加JavaScript。
浏览器在加载页面时，对于HTML中每一个元素，会创建一个表示该元素的对象，把它与所有其他元素一起放在一个类似树的结构中，这个树即为DOM（文档对象模型 Document Object Model），DOM是浏览器对于页面结构的内部表示。
JavaScript可以通过DOM对页面元素进行访问、修改、增删。例如，可以使用document.getElementById在DOM中查找元素，使用元素的innderHTML属性修改其内容，然后浏览器会近乎实时的对DOM以及页面进行更新。
浏览器在显示页面时，会有许多事件发生，例如按钮点击事件、数据到达事件、时间到期事件等，使用JavaScript编写事件处理程序，可以对这些事件进行处理。
以表单的按钮点击事件为例进行说明：用户在输入框输入信息，点击按钮提交信息后，可以在当前页查看已经提交的信息。
实现思路如下：首先通过DOM获取按钮元素，并为按钮的onclick属性设置一个处理程序。
该处理程序需要通过DOM访问输入元素，并通过输入元素的value属性获取用户输入值，最后再通过DOM增加到页面中。这样在用户点击按钮时，就会执行该处理程序，获取用户输入并增加到页面中，以此实现用户与系统的交互。
通过使用JavaScript API（API即应用编程接口，提供一组对象、方法和属性，可以用来访问这些技术的所有功能；对象可以理解为是属性的集合）可以为页面增加更多新的功能，如视频播放、本地存储、地理定位等。
以地理定位为例，通过调用地理定位API，使用其getCurrentPosition方法可以获取当前位置信息（浏览器可以通过IP定位、GPS定位等方式获取位置信息）并进行处理和显示；使用watchPosition方法可以对位置更新进行实时监控和报告；使用clearWatch以停止监视位置。
（1）Ajax（XMLHttpRequest）
前端（比如浏览器）向服务器请求页面或者数据资源，服务端接受请求并执行服务端程序，捕获程序的输出作为响应发回前端，前端监测到数据到达后，再执行处理程序对这些数据进行处理，最终更新DOM和页面。
这种获取数据的模式称为Ajax，在应用中可以使用这种方式更新内容，而无需重新加载页面。
那么如何使用JavaScript发送请求？
首先创建一个请求对象，指明请求方法和资源地址，同时提供一个处理程序，然后发出请求，等待数据到达。数据到达时，就会调用这个处理程序，在请求对象的responseText属性中获取传回的数据并进行处理。
浏览器主要使用两种方法发送请求：GET和POST
使用POST和GET方法都可以向服务端发送请求，不过采用了不同的方式。POST会打包要传递到服务端的数据，并在后台把他们发送到服务器；GET也会打包数据，但会把这些数据追加到URL的最后，然后向服务器发送请求。
如果要传递的数据应当是私有的，或者数据很多，就应当使用POST；如果返回的页面要支持添加书签，就需要使用GET方法。
（2）JSONP
除了提供HTML和JavaScript的服务器外，浏览器不允许从其他不同的服务器获取数据，这是浏览器的安全策略。如果页面和要请求的数据同在一个服务器上，可以使用Ajax请求数据，如果页面和要请求的数据不在同一服务器上，则可以使用JSONP请求数据。
JSONP是一种使用<script>标记获取数据的方法，通过在请求URL后指定回调函数，将返回的数据包装在一个函数调用中进行处理。
例如，我们的网站从微博获取用户最近动态，就是一个跨域（服务器）请求数据的应用。
（3）Web Socket
Ajax和JSONP都使用了一个基于HTTP的请求/响应模型。也就是说，每次需要从服务端获取资源时，都要使用浏览器作出请求得到相关页面和数据。
对于一些数据更新比较频繁的应用，浏览器需要不断的发送请求询问服务端是否有新数据，在这种应用场景下，Web Socket或许是一个更佳的通信方案。
Web Socket是一个新增的API，允许与一个服务器的连接保持打开，这样在有新数据时，服务器就会主动把数据发给前端，就像浏览器与服务器之间的一个接通的电话线。
Web Socket提供了实时交互通信的能力，允许服务器主动发送信息给客户端，是一种区别于HTTP的全新双向数据流协议。
上面提及页面从服务器获取数据，除此之外，还可以使用本地存储获取数据，从而减少与服务端的通信，打造更好的用户体验与更广泛的应用场景。
（1）浏览器cookie
服务器随响应发送一个cookie给浏览器，cookie中以键值对形式存储一些信息。浏览器在本地存储cookie，下次发出请求时会将cookie发回服务器。cookie是按域存储的，而且只能发送给这个域，因而不同域之间的cookie无法互相访问。使用cookie可以实现个性化的体验、维护游戏状态、存储用户数据等等。
（2）web存储/local storage（本地存储）、session storage（会话存储）
使用JS的 web storage API，可以在浏览器中更好的存储数据。
每个浏览器都有一些本地存储空间（每个域都有超过5M的空间，存储在一个域的数据对另一个域是不可见的），使用setItem方法可以在localstorage中存储一个键值对，使用getItem方法可以从本地存储中获取某个键对应的值，使用remove方法可以删除本地存储中某一键对应的数据项。
session storage与local storage非常相似，唯一的区别在于：在用户与浏览器会话期间，session storage可以在本地存储信息，一旦会话结束（即关闭浏览器窗口），这些信息将删除；而local storage将永久存储信息，除非用户手动删除缓存。
JavaScript是单线程的，如果要执行复杂的运算，可以会花费太多时间以至于无法及时作出页面响应。这时可以使用web工作线程，他在一个单独的线程处理耗时的任务，所以主代码可以继续运行以提高页面的响应性。每个工作线程在他自己的线程中运行，如果你的计算机有一个多核处理器，工作线程会并行运行，这回提高运算速度。
下面简单介绍一下web工作线程的工作方式。
在主代码中使用构造函数创建一个或者多个工作线程对象，并指定工作线程要执行的JavaScript文件。
主代码和工作线程代码通过消息通信，使用postmessage发送信息，使用onmessage接收信息。
主代码通过发送一个消息让工作线程开始工作，即执行其JavaScript文件；工作线程完成工作后，会发回消息，并传入其运算结果。主代码得到这些结果，执行相应的处理程序，将结果展现在页面中。
软件产品的设计可以分为内容、形态、行为三个领域。前两者是HTML和CSS的主要工作，而软件行为的设计就是JS（JavaScript）的主要工作。
在内容层面，通过JS进行前后端通信，可以从服务端获取最新的数据并动态的为页面增加内容。
因而在产品设计中，我们应该考虑页面信息的来源，是写死在前端，还是请求服务端数据接口，是否需要搭建相应的管理后台。通过JS进行前后端通信，还可以将用户输入等信息上报服务端并进行存储，这亦是产品方案中应该考虑的地方。
在功能或行为层面，使用JS进行前后端通信，一些功能入口也可以通过服务端进行灵活的配置，例如为不同的用户角色提供不同的功能入口或功能限制。
页面对用户的响应也都是通过JS来实现，例如对表单输入进行校验并反馈，这些逻辑判断和运算都是通过JS完成。对此，产品经理往往需要通过流程图、状态图等，进行逻辑与运算规则的说明。
上面分别提及在内容、形态、行为三个设计领域，技术在产品工作中的具体应用。在更加抽象的层面，技术的学习让我更加了解互联网产品的本质–信息。在团队配合、项目流程上，技术与设计的结合同样具有价值：
（1）帮助从技术的角度初步评估产品方案，用于评估方案的成本和性价比，排列优先级和进行版本规划
（2）与技术团队更高效的配合，随着技术发展和不断成熟，有越来越多的工具可以帮助快速开发，懂得技术的开发原理和开发手段，才可以采用更加灵活的方式与技术配合。
本文主要探讨了：
下一次的分享中将会对后端，以及前后端交互的技术知识和应用进行总结，感兴趣的小伙伴可以关注我或者我的专栏。
写作本文着实花了不少时间，一方面在于其中涉及很多技术语言；但更主要的原因在于写作过程中涉及到技术思维、设计思维的来回切换和融合，自认为本文在这一方面仍然有待提高。
学习技术给我带来很多层面的收获，让我得以层层深入，庖丁解牛似的看清产品的内部构造；也让我可以从不同角度看待技术、设计、产品在软件产业不同阶段中扮演的角色，对团队组织构成有了新的理解。
最后以一句我的名言结尾：对于设计的追问会带你走向技术，对于技术的追问会带你走向设计。
《Head First HTML与CSS》
《Head First HTML5 Programming》
写了30+产品需求文档后，我对PRD有了新的认知
WebSocket简介及应用实例
本文由 @lemon 原创发布于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议
*请认真填写需求信息，我们会在24小时内与您取得联系。
