導讀來人人都是產品經理【起點學院】，BAT實戰派產品總監手把手系統帶你學產品、學運營。2016年了，嗨，大家新年好。作為一個網頁的產品經理，網頁的前端知識可謂是....

來人人都是產品經理【起點學院】，BAT實戰派產品總監手把手系統帶你學產品、學運營。

2016年了，嗨，大家新年好。

作為一個網頁的產品經理，網頁的前端知識可謂是不能不知，本文主講網站產品的前端姿勢。

通常，HTML、CSS、JavaScript共同構建了你看到的任何一個網頁展示和交互。

下面是這三種字母的解釋：

• HTML(HyperTextMarkup Language) 超文本標記語言
• CSS（Cascading Style Sheets）級聯樣式表
• JavaScript 一種腳本語言，主要用于前端頁面的DOM處理

不太懂可自行百度了解。

文本的意思，應該大家都明白，就是你隨手在桌面上建立一個txt，這就是一個文本文件。

那什么是HTML超文本標記語言呢？就是對一個普通的txt里面的文字進行標記，標記其中的一段為title，標記任意一段為某個意思，最終形成了一套規則就是html。

一個html文檔通常的結構是這樣的：

doctype、html、head(/head)、body(/body)、/html。

下面我們來看一段html：

看下面這段代碼截圖：

“電動汽車_新能源汽車_電動汽車網”原先是普通的文本，但是這里套了<title>，用于標記此處是標題，同時也告訴了搜索引擎這里是標題。

再看下面這段代碼截圖：

紅色標注部分就是CSS樣式代碼。CSS中文名叫級聯樣式表，白話就是說長什么樣子。CSS就是起裝修作用的，必須要和HTML一起配合使用。

再看下面這段代碼截圖（和第一張圖一樣）：

上圖第二個紅色標注的地方就是JavaScript，JavaScript是一種腳本語言，它在網頁中使用的主要場景是控制HTML中的每一個元素。比如，點了一個按鈕會彈出一個層，其實就是利用JavaScript實現的。

目前的互聯網，任何一個網頁都是由他們三個構建起來的，作為網頁產品經理必須知道，若是能夠看懂、簡單修改甚至是自己寫，那就更棒了，再深的介紹就不在此說明了。

當然作為創業公司的產品經理還有注意前端頁面規范和兼容性的問題，作為合格的前端工程師上面說的都應該必須過關，作為產品經理也必須明了。

比如html文檔格式，必須有的dtd格式，文件編碼utf－8等這些常識性姿勢。

除了html，大家應該還看到htm、shtml、xhtml等這些文檔，大家可以自行百度做了解，究竟有什么用和什么區別。

說到這里大家應該想問了，html應該用什么軟件開發呢？Dreamweaver，百度自行了解。

本文僅適用于產品新人，產品大佬可以忽略。

#專欄作家#

董海榮，pingyaonr，人人都是產品經理專欄作家。關注智能汽車、移動互聯網和虛擬現實。擅長內容編輯運營、原型設計、需求挖掘梳理、產品規劃管理。歡迎交流學習。