整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML 或超文本標(biāo)記語(yǔ)言 允許 Web 用戶使用元素、標(biāo)簽和屬性創(chuàng)建和構(gòu)造部分、段落和鏈接。然而，值得注意的是，HTML 不能被視為一種編程語(yǔ)言，因?yàn)樗荒軇?chuàng)建動(dòng)態(tài)功能。
HTML有很多用例，即：
本文將介紹 HTML 的基礎(chǔ)知識(shí)，包括它的工作原理、優(yōu)缺點(diǎn)以及它與 CSS 和 JavaScript 的關(guān)系。
HTML（代表超文本標(biāo)記語(yǔ)言）是構(gòu)成大多數(shù)網(wǎng)頁(yè)和在線應(yīng)用程序的計(jì)算機(jī)語(yǔ)言。超文本是用于引用其他文本片段的文本，而標(biāo)記語(yǔ)言是告訴 Web 服務(wù)器文檔的樣式和結(jié)構(gòu)的一系列標(biāo)記。
在國(guó)內(nèi)的網(wǎng)站上找了一圈，這應(yīng)該是介紹歷史最細(xì)致的，長(zhǎng)按保存手機(jī)里翻譯
平均每個(gè)網(wǎng)站包含幾個(gè)不同的信息 HTML 頁(yè)面。例如，主頁(yè)、關(guān)于頁(yè)面和聯(lián)系頁(yè)面都將具有單獨(dú)的 HTML 文件。
HTML 文檔是以 .html 或 .htm 擴(kuò)展名結(jié)尾的文件。Web 瀏覽器讀取 HTML 文件并呈現(xiàn)其內(nèi)容，以便互聯(lián)網(wǎng)用戶可以查看它。
所有 HTML 頁(yè)面都有一系列 HTML 元素，由一組標(biāo)簽和屬性組成。HTML 元素是網(wǎng)頁(yè)的構(gòu)建塊。標(biāo)簽告訴 Web 瀏覽器元素在哪里開始和結(jié)束，而屬性描述元素的特征。
元素的三個(gè)主要部分是：
這三個(gè)部分的組合將創(chuàng)建一個(gè) HTML 元素：
<p>這是在HTML中添加段落的方法。</p>HTML 元素的另一個(gè)關(guān)鍵部分是它的屬性，它有兩個(gè)部分——名稱和屬性值。名稱標(biāo)識(shí)用戶想要添加的附加信息，并且屬性值給出進(jìn)一步的說(shuō)明。
例如，添加紫色和 font-family verdana 的樣式元素將如下所示：
< p style= "color:purple;font-family:verdana" >這是在HTML中添加段落的方法。< /p >另一個(gè)屬性，HTML 類，對(duì)于開發(fā)和編程來(lái)說(shuō)是最重要的。class 屬性添加了可以作用于具有相同類值的不同元素的樣式信息。 例如，我們將對(duì)標(biāo)題 <h1> 和段落 <p> 使用相同的樣式。樣式包括背景顏色、文本顏色、邊框、邊距和填充，在 .important 類下。要在 <h1> 和 <p> 之間實(shí)現(xiàn)相同的樣式，請(qǐng)?jiān)诿總€(gè)開始標(biāo)記后添加 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>大多數(shù)元素都有一個(gè)開始標(biāo)簽和一個(gè)結(jié)束標(biāo)簽，但有些元素不需要結(jié)束標(biāo)簽即可工作，例如空元素。這些元素不使用結(jié)束標(biāo)簽，因?yàn)樗鼈儧](méi)有內(nèi)容：
< img src= "/" alt= "圖像" >這個(gè)圖像標(biāo)簽有兩個(gè)屬性——一個(gè)src屬性，圖像路徑，和一個(gè)alt屬性，描述性文本。但是，它沒(méi)有內(nèi)容，也沒(méi)有結(jié)束標(biāo)簽。
最后，每個(gè) HTML 文檔都必須以 <!DOCTYPE> 聲明開頭，以告知 Web 瀏覽器文檔類型。使用 HTML5，doctype HTML public 聲明將是：
< !DOCTYPE html >目前，有 142 個(gè) HTML 標(biāo)簽可以用于創(chuàng)建各種元素。盡管現(xiàn)代瀏覽器不再支持其中一些標(biāo)簽，但學(xué)習(xí)所有可用的不同元素仍然是有益的。
第二節(jié)將討論最常用的 HTML 標(biāo)簽和兩個(gè)主要元素——塊級(jí)元素和內(nèi)聯(lián)元素。
塊級(jí)元素占據(jù)頁(yè)面的整個(gè)寬度。它總是在文檔中開始一個(gè)新行。例如，標(biāo)題元素將位于與段落元素不同的行中。
每個(gè) HTML 頁(yè)面都使用這三個(gè)標(biāo)簽：
<html>
<head>
<!-- META INFORMATION -->
</head>
<body>
<!-- PAGE CONTENT -->
</body>
</html>其他流行的塊級(jí)標(biāo)簽包括：
內(nèi)聯(lián)元素格式化塊級(jí)元素的內(nèi)部?jī)?nèi)容，例如添加鏈接和強(qiáng)調(diào)的字符串。內(nèi)聯(lián)元素最常用于在不破壞內(nèi)容流的情況下格式化文本。
例如，一個(gè) <strong> 標(biāo)簽會(huì)以粗體呈現(xiàn)一個(gè)元素，而 <em> 標(biāo)簽會(huì)以斜體顯示它。超鏈接也是使用 <a> 標(biāo)記和 href 屬性來(lái)指示鏈接目標(biāo)的內(nèi)聯(lián)元素：
<a href="https://www.icodingdeu.com/" >點(diǎn)我！</a> HTML 的第一個(gè)版本由 18 個(gè)標(biāo)簽組成。從那時(shí)起，每個(gè)新版本都帶有添加到標(biāo)記中的新標(biāo)簽和屬性。迄今為止，該語(yǔ)言最重大的升級(jí)是 2014 年引入的 HTML5。
HTML 和 HTML5的主要區(qū)別在于HTML5 支持新類型的表單控件。HTML5 還引入了幾個(gè)語(yǔ)義標(biāo)簽，可以清楚地描述內(nèi)容，例如 <article>、<header> 和 <footer>。
就像任何其他計(jì)算機(jī)語(yǔ)言一樣，HTML 有其優(yōu)點(diǎn)和局限性。以下是 HTML 的優(yōu)缺點(diǎn)：
優(yōu)點(diǎn)：
就像任何其他計(jì)算機(jī)語(yǔ)言一樣，HTML 有其優(yōu)點(diǎn)和局限性。以下是 HTML 的優(yōu)缺點(diǎn)：
缺點(diǎn)：
HTML 用于添加文本元素并創(chuàng)建內(nèi)容結(jié)構(gòu)。然而，僅僅建立一個(gè)專業(yè)的和完全響應(yīng)的網(wǎng)站是不夠的。因此，HTML 需要借助層級(jí)樣式表 (CSS)和JavaScript來(lái)創(chuàng)建絕大多數(shù)網(wǎng)站內(nèi)容。
HTML 是 Internet 上的主要標(biāo)記語(yǔ)言。每個(gè) HTML 頁(yè)面都有一系列創(chuàng)建網(wǎng)頁(yè)或應(yīng)用程序內(nèi)容結(jié)構(gòu)的元素。
HTML 是一種對(duì)初學(xué)者友好的語(yǔ)言，有很多支持，主要用于靜態(tài)網(wǎng)站頁(yè)面。HTML 與用于樣式的 CSS 和用于功能的 JavaScript 一起使用效果最好。
我們還向您展示了一些在線教學(xué)課程，它們將有助于提高您的 HTML 知識(shí)或提供對(duì) HTML 的基本理解。
如果您有任何其他喜歡的資源來(lái)學(xué)習(xí) HTML，請(qǐng)?jiān)谠u(píng)論部分告訴我們。
eb標(biāo)準(zhǔn)：
由于不同瀏覽器解析出來(lái)的網(wǎng)頁(yè)效果可能不同，所以需要通過(guò)web標(biāo)準(zhǔn)對(duì)其進(jìn)行約束使其一致，主要包括三個(gè)方面：
結(jié)構(gòu)標(biāo)準(zhǔn)：
結(jié)構(gòu)用于對(duì)網(wǎng)頁(yè)元素進(jìn)行整理和分類，主要指的是HTML。
表現(xiàn)標(biāo)準(zhǔn)：
表現(xiàn)用于設(shè)置網(wǎng)頁(yè)元素的版式、顏色、大小等外觀樣式，主要指的是CSS。
行為標(biāo)準(zhǔn)：
行為是指網(wǎng)頁(yè)模型的定義及交互的編寫，主要指的是 JavaScript。
初識(shí)HTML：
html 全稱 Hyper Text Markup Language ，中文譯為：“超文本標(biāo)記語(yǔ)言” ，描述網(wǎng)頁(yè)的一種語(yǔ)言。
HTML發(fā)展：
XHTML 是一個(gè) W3C 標(biāo)準(zhǔn)，可擴(kuò)展超文本標(biāo)簽語(yǔ)言（EXtensible HyperText Markup Language），更嚴(yán)格更純凈的 HTML 版本，作為一種 XML 應(yīng)用被重新定義的 HTML。
HTML中的注釋：
<!-- 注釋標(biāo)簽：注釋的內(nèi)容 -->條件注釋：
條件注釋的作用是：定義只有Internet Explorer才執(zhí)行條件注釋中的html標(biāo)簽。
<!--[if IE 8]>
.... some HTML here ....
<![endif]-->HTML骨架：
<!DOCTYPE html> <!-- 聲明文檔類型版本為html5 -->
<html lang="en"> <!-- 網(wǎng)頁(yè)的跟標(biāo)簽,lang=""用來(lái)設(shè)置網(wǎng)頁(yè)語(yǔ)言，其值還有zh-CN中文簡(jiǎn)體、fr法語(yǔ)等，設(shè)置后當(dāng)系統(tǒng)設(shè)置語(yǔ)言和網(wǎng)頁(yè)語(yǔ)言發(fā)生沖突時(shí)會(huì)提示是否翻譯網(wǎng)頁(yè) -->
<head> <!-- 網(wǎng)頁(yè)的頭部 -->
<meta charset='UTF-8'> <!-- 聲明字符編碼，其值還有g(shù)bk和gb2312 -->
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0"> <!-- 開啟移動(dòng)端視口 -->
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- 開啟ios快捷啟動(dòng)方式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 設(shè)置iOS頂部通欄樣式 -->
<meta name="format-detection" content="telephone=no"> <!-- 遇到數(shù)字不轉(zhuǎn)成電話號(hào)碼 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- X-UA-Compatible是針對(duì)IE瀏覽器做兼容的，ie=edge表示兼容edge，若后面ie=7，則表示兼容IE7 -->
<meta name='keywords' content='This is a key words'> <!-- 網(wǎng)站搜索關(guān)鍵字 -->
<meta name='description' content='this is description'> <!-- 描述網(wǎng)站的信息 -->
<link rel="shortcut icon" type="image/x-icon" href="圖片路徑 "/> <!-- 網(wǎng)站的圖標(biāo)，如果圖標(biāo)是gif圖，則需要改：type="image/gif"，引入網(wǎng)站圖標(biāo)另一種方法：命名為favicon.ico文件放到網(wǎng)站根目錄下 -->
<link rel="stylesheet" type="text/css" href="css文件路徑"/> <!-- 引用css文件 -->
<base target="_blank"/> <!-- base標(biāo)簽，定義這個(gè)網(wǎng)頁(yè)中a鏈接打開窗口的方式，其值還有_self -->
<title>標(biāo)題</title> <!-- 網(wǎng)站的標(biāo)題 -->
<style type="text/CSS"> /* 用來(lái)寫CSS代碼，type="text/CSS"可以省略 */
div{width:100px; height:100px; color:white;}
</style>
</head>
<body> <!-- 網(wǎng)頁(yè)的主體 -->
<h1>標(biāo)題</h1> <!-- 標(biāo)題標(biāo)簽，共六個(gè)級(jí)，分別為：h1~h6,大小逐級(jí)遞減，h1在一個(gè)網(wǎng)頁(yè)中只允許出現(xiàn)一次。 -->
<p>段落</p> <!-- 段落標(biāo)簽 -->
<hr/> <!-- 單線標(biāo)簽,所有單標(biāo)簽后面的關(guān)閉符均可以省略 -->
<br/> <!-- 換行標(biāo)簽 -->
</div></div> <!-- 無(wú)語(yǔ)義化標(biāo)簽布局用,上面的標(biāo)簽是語(yǔ)義化標(biāo)簽 -->
<span>span</span> <!-- 無(wú)語(yǔ)義化標(biāo)簽分割用 -->
<strong>加粗</strong> <!-- 加粗標(biāo)簽 -->
<b>加粗</b> <!-- 加粗標(biāo)簽 -->
<i>傾斜</i> <!-- 傾斜標(biāo)簽 -->
<em>傾斜</em> <!-- 傾斜標(biāo)簽 -->
<s>刪除線</s> <!-- 刪除標(biāo)簽 -->
<del>刪除線</del> <!-- 刪除標(biāo)簽 -->
<u>下劃線</u> <!-- 下劃線標(biāo)簽 -->
<ins>下劃線</ins> <!-- 下劃線標(biāo)簽 -->
<img src="圖片路徑" alt="圖片無(wú)法加載，提示文字" title="鼠標(biāo)懸停，提示文體" border="2"/> <!-- 圖像標(biāo)簽，border是邊框?qū)傩裕瑆idth和height屬性設(shè)置圖像的寬度和高度 -->
<a href="跳轉(zhuǎn)目標(biāo)" target="_self">鏈接的命名</a> <!-- 鏈接標(biāo)簽，target屬性為鏈接頁(yè)面打開的方式，默認(rèn)值_self為自身打開；_blank為新窗口打開；_new為新窗口打開，相同頁(yè)面只會(huì)打開一個(gè);_top跳出框架-->
<ul> <!-- 無(wú)序列表 -->
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
<li>列表項(xiàng)3</li>
</ul>
<ol type="A"> <!-- 有序列表,屬性type可以控制li序號(hào)的樣式，其屬性值有：1、A、a、I、i-->
<li>中國(guó)</li>
<li>美國(guó)</li>
<li>英國(guó)</li>
</ol>
<dl> <!-- 自定義列表 -->
<dt>分類1</dt> <!-- 分類名稱 -->
<dd>分類1第1項(xiàng)</dd> <!-- 類的項(xiàng) -->
<dd>分類1第2項(xiàng)</dd>
<dt>分類2</dt>
<dd>分類2第1項(xiàng)</dd>
<dd>分類2第2項(xiàng)</dd>
</dl>
<table> <!-- 定義表格，table標(biāo)簽實(shí)際就是一個(gè)四方塊框框，里面有單元格才會(huì)顯示出表格的樣子 -->
<caption>信息表</caption> <!-- 表格標(biāo)題 -->
<tr> <!-- 定義行 -->
<th>姓名</th> <!-- 定義表頭，表頭文本有加粗居中效果 -->
<th>年齡</th>
<th>性別</th>
</tr>
<tr> <!-- 定義行 -->
<td>小明</td> <!-- 定義單元格，表格里面沒(méi)有列-->
<td>18</td>
<td>男</td>
</tr>
</table>
</body>
</html>提示：本文圖片等素材來(lái)源于網(wǎng)絡(luò)，若有侵權(quán)，請(qǐng)發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者刪除。
筆者：苦海123
其它問(wèn)題可通過(guò)以下方式聯(lián)系本人咨詢：
QQ：810665436
微信：ConstancyMan
為一個(gè)產(chǎn)品經(jīng)理，學(xué)習(xí)并掌握基礎(chǔ)的技術(shù)知識(shí)是非常重要的。而本篇文章就重點(diǎn)討論前端部分，講一講HTML和CSS、JavaScript的知識(shí)要點(diǎn)。
為什么學(xué)習(xí)技術(shù)？我想上面這段話給予了非常好的解釋。
在當(dāng)今時(shí)代，職能劃分越來(lái)越精細(xì)，但你仍然可以看到不同行業(yè)、領(lǐng)域、職業(yè)都密不可分，他們互相融合和滲透。設(shè)計(jì)和技術(shù)亦是如此，產(chǎn)品經(jīng)理和程序員亦是如此。
不難發(fā)現(xiàn)，成功的產(chǎn)品經(jīng)理有一個(gè)共性，那就是在精通設(shè)計(jì)與用戶體驗(yàn)的基礎(chǔ)上，精通技術(shù)或者如何運(yùn)用技術(shù)。前者如張小龍，后者如喬布斯。
這并非偶然，而是因?yàn)榧夹g(shù)和設(shè)計(jì)原本就是一體的：設(shè)計(jì)使用當(dāng)下的技術(shù)來(lái)解決問(wèn)題，因此設(shè)計(jì)中就包含了對(duì)技術(shù)的考量與使用。
你可能會(huì)說(shuō)，作為一個(gè)執(zhí)行層的產(chǎn)品，并不需要了解這些宏觀的問(wèn)題。你可能還會(huì)說(shuō)，在技術(shù)如此成熟的當(dāng)下，產(chǎn)品可以盡情發(fā)揮想象或者直接套用現(xiàn)有設(shè)計(jì)模式。
可是事實(shí)表明，在微觀層面設(shè)計(jì)和技術(shù)達(dá)成共識(shí)可以顯著提升合作質(zhì)量和效率，這也正是各個(gè)平臺(tái)（不管是安卓、iOS，還是小程序、網(wǎng)站）推出設(shè)計(jì)/開發(fā)規(guī)范的原因；另一方面，只有深諳設(shè)計(jì)模式及其背后的技術(shù)基礎(chǔ)，才能打破模式、迸發(fā)創(chuàng)意。
在學(xué)習(xí)技術(shù)的同時(shí)，我剛好在看交互設(shè)計(jì)精髓這本書。書中提到了設(shè)計(jì)可以分為對(duì)內(nèi)容、形態(tài)、行為的設(shè)計(jì)。我驚喜地發(fā)現(xiàn)這些設(shè)計(jì)領(lǐng)域剛好可以對(duì)應(yīng)一些技術(shù)語(yǔ)言或?qū)崿F(xiàn)方案，例如HTML、CSS、JS，又例如MVC（一種開發(fā)模式，下篇文章會(huì)提及）。
所以對(duì)產(chǎn)品經(jīng)理而言，學(xué)習(xí)技術(shù)可以幫助你更好地理解產(chǎn)品設(shè)計(jì)，更好地執(zhí)行產(chǎn)品工作，更加順暢地與開發(fā)人員合作。
最初我學(xué)習(xí)技術(shù)的動(dòng)機(jī)來(lái)自于想寫一份好的PRD（我的一篇專欄文章講述了這個(gè)主題，詳見(jiàn)文章底部的參考資料），為此，我需要知道前端、后端分別想從需求文檔中獲取哪些信息以及他們會(huì)如何利用這些信息進(jìn)行開發(fā)。
由此出發(fā)，我看了三本書，分別介紹了HTML和CSS、JavaScript、Python這些編程語(yǔ)言在前端開發(fā)、后端開發(fā)中的應(yīng)用。
在這里，簡(jiǎn)單總結(jié)一下這些書中提及的技術(shù)原理，并結(jié)合自己的思考和實(shí)踐指出這些技術(shù)原理在產(chǎn)品工作中的應(yīng)用，希望可以對(duì)自己以及他人有所幫助。
由于內(nèi)容較多，這篇文章將重點(diǎn)討論前端部分，涉及HTML和CSS、JavaScript的內(nèi)容；關(guān)于后端的內(nèi)容，將在下一篇文章中分享。
下面將分別介紹一下HTML、CSS、JavaScript在web前端開發(fā)中的應(yīng)用。
HTML翻譯作“超文本標(biāo)記語(yǔ)言”，和現(xiàn)在廣為使用的markdown一樣，作為一種標(biāo)記語(yǔ)言，HTML通過(guò)一套既定的語(yǔ)法來(lái)標(biāo)記文本或者富文本內(nèi)容，從而為這些內(nèi)容劃定結(jié)構(gòu)。
這些HTML格式的文件通常存儲(chǔ)在服務(wù)器上，瀏覽器通過(guò)互聯(lián)網(wǎng)向服務(wù)器請(qǐng)求這些頁(yè)面資源，然后解析并呈現(xiàn)出用戶直接看到的頁(yè)面。
在瀏覽器中打開任意web頁(yè)面，并檢查其HTML元素，都可以看到其大體的結(jié)構(gòu)：
<head>元素存放網(wǎng)頁(yè)的基本信息，<body>元素里的內(nèi)容就是用戶將在瀏覽器看到的東西，此外還有許許多多的元素（如：<h>、<p>、<a>、<img>、<div>、<li>、<div>）嵌套起來(lái)，共同構(gòu)建了網(wǎng)頁(yè)的結(jié)構(gòu)。
這些元素一般由開始標(biāo)記、結(jié)束標(biāo)記、內(nèi)容、屬性等部分構(gòu)成，其中“屬性”可以幫助對(duì)這些元素進(jìn)行更加具體的描述。
舉例說(shuō)明：標(biāo)題元素的寫法如下，<h1></h1>為開始和結(jié)束標(biāo)記，中間包圍的即為標(biāo)題元素的內(nèi)容。
<h1>這里是標(biāo)題</h1>
表單元素的常見(jiàn)寫法如下，其中<form>為開始標(biāo)記，有action 和method兩個(gè)屬性，</form>為結(jié)束標(biāo)記，省略號(hào)的位置放置表單元素包圍的所有內(nèi)容和輸入控件。
<form action="http://123.com/test.py" method="POST"> ... </form>
在同一網(wǎng)站內(nèi)部，可以通過(guò)在<a>元素中使用相對(duì)資源路徑鏈接到一個(gè)新的頁(yè)面。
在網(wǎng)站之外，則可以使用URL（統(tǒng)一資源定位符，用文件地址來(lái)標(biāo)識(shí)web上的任何資源），通過(guò)絕對(duì)路徑直接向服務(wù)器請(qǐng)求頁(yè)面資源。
URL的結(jié)構(gòu)通常如下：通信協(xié)議（http、https、file等）、服務(wù)器名（常見(jiàn)的www）、域名（服務(wù)器IP地址的簡(jiǎn)便記法）、資源的絕對(duì)路徑、隨URL傳遞的參數(shù)。
我們?cè)O(shè)計(jì)出一個(gè)頁(yè)面，頁(yè)面上每一個(gè)元素（包括控件、信息、圖片）都由HTML元素（例如<input>、<p>、<img>）來(lái)定義或者說(shuō)實(shí)現(xiàn)。
這些頁(yè)面控件、信息、圖片的屬性同樣可以由HTML元素屬性來(lái)實(shí)現(xiàn)，例如通過(guò)設(shè)置placeholder屬性值，可以為輸入框加入提示文案，通過(guò)設(shè)置draggable屬性，讓元素可以拖動(dòng)。
在頁(yè)面結(jié)構(gòu)層面了解設(shè)計(jì)與技術(shù)的關(guān)聯(lián)，可以幫助從技術(shù)的角度撰寫產(chǎn)品方案。
（1）一方面，知道了技術(shù)會(huì)把頁(yè)面結(jié)構(gòu)拆解為元素及其屬性，我們?cè)趯懳臋n時(shí)，也應(yīng)當(dāng)以這種思路拆解并描述頁(yè)面，寫清楚頁(yè)面有哪些信息，哪些輸入控件，哪些顯示控件，這些控件的屬性是否需要自定義，還是直接使用瀏覽器或操作系統(tǒng)的默認(rèn)樣式。
（2）另一方面，從技術(shù)角度了解元素及其基本屬性，就可以減少產(chǎn)品方案中對(duì)細(xì)節(jié)描述的遺漏。
CSS翻譯作“層疊樣式表”，和HTML一樣，CSS也是我們用來(lái)創(chuàng)建網(wǎng)頁(yè)的語(yǔ)言，HTML定義頁(yè)面的內(nèi)容和結(jié)構(gòu)，而CSS定義了web頁(yè)面的樣式和表現(xiàn)。
具體來(lái)說(shuō)，通過(guò)在HTML的<link>或<style>中鏈接到CSS樣式表，CSS就可以通過(guò)其眾多的樣式屬性，控制HTML中元素的外觀表現(xiàn)。
CSS的樣式屬性，例如color、border、font-style等，可以控制HTML元素的字體顏色、邊框、字體樣式等等。此外，CSS將每個(gè)HTML元素看作一個(gè)盒子（這也就是“盒模型”），以控制其內(nèi)外邊距、邊框等。
還可以使用CSS靈活的對(duì)頁(yè)面進(jìn)行布局：
（1）流體布局，擴(kuò)展瀏覽器窗口時(shí)，頁(yè)面中的內(nèi)容會(huì)根據(jù)一定規(guī)則自動(dòng)擴(kuò)展以適應(yīng)頁(yè)面
（2）凍結(jié)布局，通過(guò)設(shè)定頁(yè)面寬度，所有頁(yè)面元素都將固定在頁(yè)面上，不隨瀏覽器窗口大小而改變布局
（3）凝膠布局，鎖定頁(yè)面內(nèi)容區(qū)域的寬度，但外邊距會(huì)根據(jù)窗口大小進(jìn)行擴(kuò)展收縮，從而使得頁(yè)面在瀏覽器中居中
（4）絕對(duì)定位，使得元素相對(duì)于頁(yè)面固定
（5）固定定位，使元素相對(duì)于瀏覽器窗口固定不動(dòng)
（6）相對(duì)定位
（7）表格顯示
（8）浮動(dòng)布局
CSS可以靈活適配，可以為一個(gè)HTML頁(yè)面設(shè)置多個(gè)樣式表（或者在CSS中設(shè)置@media規(guī)則），用于不同的場(chǎng)景展示、匹配不同的設(shè)備或者適應(yīng)不同的窗口寬度。
（1）在詳細(xì)的產(chǎn)品設(shè)計(jì)實(shí)現(xiàn)方案中，不僅要定義頁(yè)面具有哪些元素，也要定義這些元素的樣式、外觀、動(dòng)效等。
在技術(shù)實(shí)現(xiàn)上，這是兩個(gè)不同的層面，由不同的語(yǔ)言來(lái)實(shí)現(xiàn)；因而在文檔寫作中，也應(yīng)該將元素與其樣式區(qū)分開來(lái)進(jìn)行描述，而不是將所有說(shuō)明混雜在一起（雖然這個(gè)工作往往需要和設(shè)計(jì)進(jìn)行配合）。
例如在描述按鈕時(shí)，不僅要指明按鈕元素的基本屬性（例如按鈕文本、按鈕類別），也應(yīng)該指出按鈕在不同狀態(tài)的不同樣式。
（2）在宏觀層面，隨著設(shè)備形態(tài)的多樣化，樣式適配也變成了一個(gè)很大的主題，也應(yīng)是產(chǎn)品設(shè)計(jì)中應(yīng)該考慮的重要方面。
以網(wǎng)站設(shè)計(jì)而言，同樣的內(nèi)容元素，在手機(jī)和PC上往往需要定義不同的樣式，對(duì)此有很多技術(shù)實(shí)現(xiàn)方案，產(chǎn)品經(jīng)理應(yīng)對(duì)樣式適配有基本認(rèn)知，才能與技術(shù)共同商定適配方案。
前面提到，使用HTML標(biāo)記和CSS可以幫助搭建web頁(yè)面，而JavaScript的使用，可以為這些頁(yè)面增加行為和功能（比如對(duì)用戶行為作出響應(yīng)、處理事件、更新頁(yè)面、與服務(wù)端通信），從而成為真正意義上的web應(yīng)用。
HTML5是HTML的最新版本，但實(shí)際上當(dāng)我們談?wù)揌TML5時(shí)，不僅僅指代標(biāo)記，而是HTML標(biāo)記、CSS樣式、JavaScript腳本這些技術(shù)的結(jié)合，這些技術(shù)共同幫助構(gòu)件web應(yīng)用。
通過(guò)在代碼中引用JavaScript文件或者直接將腳本放在<script>元素中，就可以在web頁(yè)面中增加JavaScript。
瀏覽器在加載頁(yè)面時(shí)，對(duì)于HTML中每一個(gè)元素，會(huì)創(chuàng)建一個(gè)表示該元素的對(duì)象，把它與所有其他元素一起放在一個(gè)類似樹的結(jié)構(gòu)中，這個(gè)樹即為DOM（文檔對(duì)象模型 Document Object Model），DOM是瀏覽器對(duì)于頁(yè)面結(jié)構(gòu)的內(nèi)部表示。
JavaScript可以通過(guò)DOM對(duì)頁(yè)面元素進(jìn)行訪問(wèn)、修改、增刪。例如，可以使用document.getElementById在DOM中查找元素，使用元素的innderHTML屬性修改其內(nèi)容，然后瀏覽器會(huì)近乎實(shí)時(shí)的對(duì)DOM以及頁(yè)面進(jìn)行更新。
瀏覽器在顯示頁(yè)面時(shí)，會(huì)有許多事件發(fā)生，例如按鈕點(diǎn)擊事件、數(shù)據(jù)到達(dá)事件、時(shí)間到期事件等，使用JavaScript編寫事件處理程序，可以對(duì)這些事件進(jìn)行處理。
以表單的按鈕點(diǎn)擊事件為例進(jìn)行說(shuō)明：用戶在輸入框輸入信息，點(diǎn)擊按鈕提交信息后，可以在當(dāng)前頁(yè)查看已經(jīng)提交的信息。
實(shí)現(xiàn)思路如下：首先通過(guò)DOM獲取按鈕元素，并為按鈕的onclick屬性設(shè)置一個(gè)處理程序。
該處理程序需要通過(guò)DOM訪問(wèn)輸入元素，并通過(guò)輸入元素的value屬性獲取用戶輸入值，最后再通過(guò)DOM增加到頁(yè)面中。這樣在用戶點(diǎn)擊按鈕時(shí)，就會(huì)執(zhí)行該處理程序，獲取用戶輸入并增加到頁(yè)面中，以此實(shí)現(xiàn)用戶與系統(tǒng)的交互。
通過(guò)使用JavaScript API（API即應(yīng)用編程接口，提供一組對(duì)象、方法和屬性，可以用來(lái)訪問(wèn)這些技術(shù)的所有功能；對(duì)象可以理解為是屬性的集合）可以為頁(yè)面增加更多新的功能，如視頻播放、本地存儲(chǔ)、地理定位等。
以地理定位為例，通過(guò)調(diào)用地理定位API，使用其getCurrentPosition方法可以獲取當(dāng)前位置信息（瀏覽器可以通過(guò)IP定位、GPS定位等方式獲取位置信息）并進(jìn)行處理和顯示；使用watchPosition方法可以對(duì)位置更新進(jìn)行實(shí)時(shí)監(jiān)控和報(bào)告；使用clearWatch以停止監(jiān)視位置。
（1）Ajax（XMLHttpRequest）
前端（比如瀏覽器）向服務(wù)器請(qǐng)求頁(yè)面或者數(shù)據(jù)資源，服務(wù)端接受請(qǐng)求并執(zhí)行服務(wù)端程序，捕獲程序的輸出作為響應(yīng)發(fā)回前端，前端監(jiān)測(cè)到數(shù)據(jù)到達(dá)后，再執(zhí)行處理程序?qū)@些數(shù)據(jù)進(jìn)行處理，最終更新DOM和頁(yè)面。
這種獲取數(shù)據(jù)的模式稱為Ajax，在應(yīng)用中可以使用這種方式更新內(nèi)容，而無(wú)需重新加載頁(yè)面。
那么如何使用JavaScript發(fā)送請(qǐng)求？
首先創(chuàng)建一個(gè)請(qǐng)求對(duì)象，指明請(qǐng)求方法和資源地址，同時(shí)提供一個(gè)處理程序，然后發(fā)出請(qǐng)求，等待數(shù)據(jù)到達(dá)。數(shù)據(jù)到達(dá)時(shí)，就會(huì)調(diào)用這個(gè)處理程序，在請(qǐng)求對(duì)象的responseText屬性中獲取傳回的數(shù)據(jù)并進(jìn)行處理。
瀏覽器主要使用兩種方法發(fā)送請(qǐng)求：GET和POST
使用POST和GET方法都可以向服務(wù)端發(fā)送請(qǐng)求，不過(guò)采用了不同的方式。POST會(huì)打包要傳遞到服務(wù)端的數(shù)據(jù)，并在后臺(tái)把他們發(fā)送到服務(wù)器；GET也會(huì)打包數(shù)據(jù)，但會(huì)把這些數(shù)據(jù)追加到URL的最后，然后向服務(wù)器發(fā)送請(qǐng)求。
如果要傳遞的數(shù)據(jù)應(yīng)當(dāng)是私有的，或者數(shù)據(jù)很多，就應(yīng)當(dāng)使用POST；如果返回的頁(yè)面要支持添加書簽，就需要使用GET方法。
（2）JSONP
除了提供HTML和JavaScript的服務(wù)器外，瀏覽器不允許從其他不同的服務(wù)器獲取數(shù)據(jù)，這是瀏覽器的安全策略。如果頁(yè)面和要請(qǐng)求的數(shù)據(jù)同在一個(gè)服務(wù)器上，可以使用Ajax請(qǐng)求數(shù)據(jù)，如果頁(yè)面和要請(qǐng)求的數(shù)據(jù)不在同一服務(wù)器上，則可以使用JSONP請(qǐng)求數(shù)據(jù)。
JSONP是一種使用<script>標(biāo)記獲取數(shù)據(jù)的方法，通過(guò)在請(qǐng)求URL后指定回調(diào)函數(shù)，將返回的數(shù)據(jù)包裝在一個(gè)函數(shù)調(diào)用中進(jìn)行處理。
例如，我們的網(wǎng)站從微博獲取用戶最近動(dòng)態(tài)，就是一個(gè)跨域（服務(wù)器）請(qǐng)求數(shù)據(jù)的應(yīng)用。
（3）Web Socket
Ajax和JSONP都使用了一個(gè)基于HTTP的請(qǐng)求/響應(yīng)模型。也就是說(shuō)，每次需要從服務(wù)端獲取資源時(shí)，都要使用瀏覽器作出請(qǐng)求得到相關(guān)頁(yè)面和數(shù)據(jù)。
對(duì)于一些數(shù)據(jù)更新比較頻繁的應(yīng)用，瀏覽器需要不斷的發(fā)送請(qǐng)求詢問(wèn)服務(wù)端是否有新數(shù)據(jù)，在這種應(yīng)用場(chǎng)景下，Web Socket或許是一個(gè)更佳的通信方案。
Web Socket是一個(gè)新增的API，允許與一個(gè)服務(wù)器的連接保持打開，這樣在有新數(shù)據(jù)時(shí)，服務(wù)器就會(huì)主動(dòng)把數(shù)據(jù)發(fā)給前端，就像瀏覽器與服務(wù)器之間的一個(gè)接通的電話線。
Web Socket提供了實(shí)時(shí)交互通信的能力，允許服務(wù)器主動(dòng)發(fā)送信息給客戶端，是一種區(qū)別于HTTP的全新雙向數(shù)據(jù)流協(xié)議。
上面提及頁(yè)面從服務(wù)器獲取數(shù)據(jù)，除此之外，還可以使用本地存儲(chǔ)獲取數(shù)據(jù)，從而減少與服務(wù)端的通信，打造更好的用戶體驗(yàn)與更廣泛的應(yīng)用場(chǎng)景。
（1）瀏覽器cookie
服務(wù)器隨響應(yīng)發(fā)送一個(gè)cookie給瀏覽器，cookie中以鍵值對(duì)形式存儲(chǔ)一些信息。瀏覽器在本地存儲(chǔ)cookie，下次發(fā)出請(qǐng)求時(shí)會(huì)將cookie發(fā)回服務(wù)器。cookie是按域存儲(chǔ)的，而且只能發(fā)送給這個(gè)域，因而不同域之間的cookie無(wú)法互相訪問(wèn)。使用cookie可以實(shí)現(xiàn)個(gè)性化的體驗(yàn)、維護(hù)游戲狀態(tài)、存儲(chǔ)用戶數(shù)據(jù)等等。
（2）web存儲(chǔ)/local storage（本地存儲(chǔ)）、session storage（會(huì)話存儲(chǔ)）
使用JS的 web storage API，可以在瀏覽器中更好的存儲(chǔ)數(shù)據(jù)。
每個(gè)瀏覽器都有一些本地存儲(chǔ)空間（每個(gè)域都有超過(guò)5M的空間，存儲(chǔ)在一個(gè)域的數(shù)據(jù)對(duì)另一個(gè)域是不可見(jiàn)的），使用setItem方法可以在localstorage中存儲(chǔ)一個(gè)鍵值對(duì)，使用getItem方法可以從本地存儲(chǔ)中獲取某個(gè)鍵對(duì)應(yīng)的值，使用remove方法可以刪除本地存儲(chǔ)中某一鍵對(duì)應(yīng)的數(shù)據(jù)項(xiàng)。
session storage與local storage非常相似，唯一的區(qū)別在于：在用戶與瀏覽器會(huì)話期間，session storage可以在本地存儲(chǔ)信息，一旦會(huì)話結(jié)束（即關(guān)閉瀏覽器窗口），這些信息將刪除；而local storage將永久存儲(chǔ)信息，除非用戶手動(dòng)刪除緩存。
JavaScript是單線程的，如果要執(zhí)行復(fù)雜的運(yùn)算，可以會(huì)花費(fèi)太多時(shí)間以至于無(wú)法及時(shí)作出頁(yè)面響應(yīng)。這時(shí)可以使用web工作線程，他在一個(gè)單獨(dú)的線程處理耗時(shí)的任務(wù)，所以主代碼可以繼續(xù)運(yùn)行以提高頁(yè)面的響應(yīng)性。每個(gè)工作線程在他自己的線程中運(yùn)行，如果你的計(jì)算機(jī)有一個(gè)多核處理器，工作線程會(huì)并行運(yùn)行，這回提高運(yùn)算速度。
下面簡(jiǎn)單介紹一下web工作線程的工作方式。
在主代碼中使用構(gòu)造函數(shù)創(chuàng)建一個(gè)或者多個(gè)工作線程對(duì)象，并指定工作線程要執(zhí)行的JavaScript文件。
主代碼和工作線程代碼通過(guò)消息通信，使用postmessage發(fā)送信息，使用onmessage接收信息。
主代碼通過(guò)發(fā)送一個(gè)消息讓工作線程開始工作，即執(zhí)行其JavaScript文件；工作線程完成工作后，會(huì)發(fā)回消息，并傳入其運(yùn)算結(jié)果。主代碼得到這些結(jié)果，執(zhí)行相應(yīng)的處理程序，將結(jié)果展現(xiàn)在頁(yè)面中。
軟件產(chǎn)品的設(shè)計(jì)可以分為內(nèi)容、形態(tài)、行為三個(gè)領(lǐng)域。前兩者是HTML和CSS的主要工作，而軟件行為的設(shè)計(jì)就是JS（JavaScript）的主要工作。
在內(nèi)容層面，通過(guò)JS進(jìn)行前后端通信，可以從服務(wù)端獲取最新的數(shù)據(jù)并動(dòng)態(tài)的為頁(yè)面增加內(nèi)容。
因而在產(chǎn)品設(shè)計(jì)中，我們應(yīng)該考慮頁(yè)面信息的來(lái)源，是寫死在前端，還是請(qǐng)求服務(wù)端數(shù)據(jù)接口，是否需要搭建相應(yīng)的管理后臺(tái)。通過(guò)JS進(jìn)行前后端通信，還可以將用戶輸入等信息上報(bào)服務(wù)端并進(jìn)行存儲(chǔ)，這亦是產(chǎn)品方案中應(yīng)該考慮的地方。
在功能或行為層面，使用JS進(jìn)行前后端通信，一些功能入口也可以通過(guò)服務(wù)端進(jìn)行靈活的配置，例如為不同的用戶角色提供不同的功能入口或功能限制。
頁(yè)面對(duì)用戶的響應(yīng)也都是通過(guò)JS來(lái)實(shí)現(xiàn)，例如對(duì)表單輸入進(jìn)行校驗(yàn)并反饋，這些邏輯判斷和運(yùn)算都是通過(guò)JS完成。對(duì)此，產(chǎn)品經(jīng)理往往需要通過(guò)流程圖、狀態(tài)圖等，進(jìn)行邏輯與運(yùn)算規(guī)則的說(shuō)明。
上面分別提及在內(nèi)容、形態(tài)、行為三個(gè)設(shè)計(jì)領(lǐng)域，技術(shù)在產(chǎn)品工作中的具體應(yīng)用。在更加抽象的層面，技術(shù)的學(xué)習(xí)讓我更加了解互聯(lián)網(wǎng)產(chǎn)品的本質(zhì)–信息。在團(tuán)隊(duì)配合、項(xiàng)目流程上，技術(shù)與設(shè)計(jì)的結(jié)合同樣具有價(jià)值：
（1）幫助從技術(shù)的角度初步評(píng)估產(chǎn)品方案，用于評(píng)估方案的成本和性價(jià)比，排列優(yōu)先級(jí)和進(jìn)行版本規(guī)劃
（2）與技術(shù)團(tuán)隊(duì)更高效的配合，隨著技術(shù)發(fā)展和不斷成熟，有越來(lái)越多的工具可以幫助快速開發(fā)，懂得技術(shù)的開發(fā)原理和開發(fā)手段，才可以采用更加靈活的方式與技術(shù)配合。
本文主要探討了：
下一次的分享中將會(huì)對(duì)后端，以及前后端交互的技術(shù)知識(shí)和應(yīng)用進(jìn)行總結(jié)，感興趣的小伙伴可以關(guān)注我或者我的專欄。
寫作本文著實(shí)花了不少時(shí)間，一方面在于其中涉及很多技術(shù)語(yǔ)言；但更主要的原因在于寫作過(guò)程中涉及到技術(shù)思維、設(shè)計(jì)思維的來(lái)回切換和融合，自認(rèn)為本文在這一方面仍然有待提高。
學(xué)習(xí)技術(shù)給我?guī)?lái)很多層面的收獲，讓我得以層層深入，庖丁解牛似的看清產(chǎn)品的內(nèi)部構(gòu)造；也讓我可以從不同角度看待技術(shù)、設(shè)計(jì)、產(chǎn)品在軟件產(chǎn)業(yè)不同階段中扮演的角色，對(duì)團(tuán)隊(duì)組織構(gòu)成有了新的理解。
最后以一句我的名言結(jié)尾：對(duì)于設(shè)計(jì)的追問(wèn)會(huì)帶你走向技術(shù)，對(duì)于技術(shù)的追問(wèn)會(huì)帶你走向設(shè)計(jì)。
《Head First HTML與CSS》
《Head First HTML5 Programming》
寫了30+產(chǎn)品需求文檔后，我對(duì)PRD有了新的認(rèn)知
WebSocket簡(jiǎn)介及應(yīng)用實(shí)例
本文由 @lemon 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于CC0協(xié)議
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
