前兩期我們分別說了計(jì)算機(jī)的基礎(chǔ)知識(shí)、計(jì)算機(jī)硬件軟件的知識(shí)，今天就接著聊聊前端的事情。作為初入行的PM，前端的語言接觸起來相對(duì)于后端的語言要容易不少，但前端的語言也有很多，HTML、CSS、Javascript、XML、ASP.NET 等等。那應(yīng)該了解哪些呢？

首先，要搞清楚一點(diǎn)，學(xué)習(xí)前端語言的目的是什么？

學(xué)習(xí)前端的這些知識(shí)，了解每一種語言的規(guī)則，從而了解產(chǎn)品前端的頁面是如何實(shí)現(xiàn)的、交互的方式有哪些，掌握前端功能、交互實(shí)現(xiàn)的方式方法。PS：雖然不需要你完全會(huì)寫這些代碼，但至少要知道頁面效果、交互是通過什么方式來實(shí)現(xiàn)的。

so,學(xué)習(xí)前端技術(shù)，HTML、CSS、Javascript、json這幾類必不可少。幾者的關(guān)系如下：HTML負(fù)責(zé)網(wǎng)頁的內(nèi)容；CSS負(fù)責(zé)內(nèi)容的呈現(xiàn)樣式，即修飾內(nèi)容；Javascript主要負(fù)責(zé)頁面的動(dòng)態(tài)效果，如數(shù)據(jù)的驗(yàn)證、異常提醒、改變頁面內(nèi)容等幾個(gè)部分，也就是讓頁面動(dòng)起來；JSON則主要負(fù)責(zé)其中數(shù)據(jù)的交換。

1、HTML

HTML(Hyper Text Markup Language)，一種描述網(wǎng)頁的語言，我們平時(shí)看到的網(wǎng)頁大多都是通過HTML實(shí)現(xiàn)的。HTML使用一系列的標(biāo)簽來定義頁面如何處理文字、圖片、鏈接、視頻等等內(nèi)容，而瀏覽器通過讀取這些標(biāo)簽，然后呈現(xiàn)出來。HTML標(biāo)簽固定的格式為<標(biāo)簽> 內(nèi)容</標(biāo)簽>。eg：

簡單了解下各標(biāo)簽的含義，也就能了解HTML到底能做哪些事情，實(shí)現(xiàn)哪些效果。常見的標(biāo)簽有：

• 標(biāo)題，用 <h1> – <h6> 等標(biāo)簽來定義；
• 段落，用 <p> 標(biāo)簽來定義；
• 表格，用<table> 定義；
• 鏈接，用 <a> 標(biāo)簽來定義的；
• 圖像，用 <img> 標(biāo)簽來定義的；
• 樣式，用<style>標(biāo)簽來定義；
• ……

2、CSS

有了內(nèi)容，如何呈現(xiàn)就需要CSS了。CSS定義HTML的樣式，樣式包括：背景（背景顏色、背景圖片等）、文本（顏色、字符間距，對(duì)齊文本，裝飾文本，對(duì)文本進(jìn)行縮進(jìn)）、文字（大小、加粗、風(fēng)格（如斜體）和變形）、鏈接、列表、表格(表格顏色、高度寬度、內(nèi)部邊框等等)、輪廓。簡單說，word中的開始菜單欄的所有功能基本都屬于樣式。

CSS 語言的規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明。選擇器通常是您需要改變樣式的 HTML 元素，即所有代碼。聲明則規(guī)定屬性和值，每條聲明由一個(gè)屬性和一個(gè)值組成。

3、Javascript，屬于網(wǎng)絡(luò)的腳本語言

頁面中的動(dòng)態(tài)效果就要依靠JavaScript了， 它常常被網(wǎng)頁用來改變頁面內(nèi)容、驗(yàn)證表單、檢測瀏覽器、創(chuàng)建cookies、異常提醒等等。 在HTML 頁面中插入 JavaScript，一般都在 <script> 與</script> 標(biāo)簽之間。

JavaScript 中的所有事物都是對(duì)象，包括字符串、數(shù)字、數(shù)組、日期等等。對(duì)象是擁有屬性和方法的數(shù)據(jù)。屬性是值，方法是可執(zhí)行的動(dòng)作。（這塊比較枯燥，沒想更容易理解的方法）

4、Json

Json主要處理數(shù)據(jù)，是一種輕量級(jí)的文本數(shù)據(jù)交換格式。它使用 JavaScript 語法來描述數(shù)據(jù)對(duì)象，所以咯，它和JS語法相同，熟悉了JS,JSON自然很容易就明白了。Json語法規(guī)則如下：數(shù)據(jù)在名稱/值對(duì)中，并由逗號(hào)分隔?；ɡㄌ?hào)保存對(duì)象，方括號(hào)保存數(shù)組。

舉個(gè)栗子：

以上這四種語言的內(nèi)容不止這些，這里只是拋磚引玉，簡單和大家聊聊每種語言最基本的規(guī)則而已。熟悉每種語言的規(guī)則，隨便打開一個(gè)頁面，大致可以知道哪部分代碼是干什么用的，實(shí)現(xiàn)什么效果，做到這一點(diǎn)就OK了。當(dāng)然，想要更深入了解每種語言，推薦大家W3school，很適合初學(xué)者哦~~~

相關(guān)閱讀

初入行PM必備：大白話告訴你計(jì)算機(jī)基礎(chǔ)知識(shí)（一）

初入行PM必備：大白話告訴你計(jì)算機(jī)基礎(chǔ)知識(shí)（第二彈）

本文由 @馨香菩提?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。