整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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小時內與您取得聯系。
