我理解的網(wǎng)站產(chǎn)品經(jīng)理之四:網(wǎng)站產(chǎn)品前端姿勢(shì)

0 評(píng)論 14974 瀏覽 264 收藏 5 分鐘

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

作為一個(gè)網(wǎng)頁的產(chǎn)品經(jīng)理,網(wǎng)頁的前端知識(shí)可謂是不能不知,本文主講網(wǎng)站產(chǎn)品的前端姿勢(shì)。

通常,HTML、CSS、JavaScript共同構(gòu)建了你看到的任何一個(gè)網(wǎng)頁展示和交互。

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

  • HTML(HyperTextMarkup Language) 超文本標(biāo)記語言
  • CSS(Cascading Style Sheets)級(jí)聯(lián)樣式表
  • JavaScript 一種腳本語言,主要用于前端頁面的DOM處理

不太懂可自行百度了解。

文本的意思,應(yīng)該大家都明白,就是你隨手在桌面上建立一個(gè)txt,這就是一個(gè)文本文件。

那什么是HTML超文本標(biāo)記語言呢?就是對(duì)一個(gè)普通的txt里面的文字進(jìn)行標(biāo)記,標(biāo)記其中的一段為title,標(biāo)記任意一段為某個(gè)意思,最終形成了一套規(guī)則就是html。

一個(gè)html文檔通常的結(jié)構(gòu)是這樣的:

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

下面我們來看一段html:

看下面這段代碼截圖:

72EF2E28-BF7E-41EA-BDA5-AE926FC7C3F1

“電動(dòng)汽車_新能源汽車_電動(dòng)汽車網(wǎng)”原先是普通的文本,但是這里套了<title>,用于標(biāo)記此處是標(biāo)題,同時(shí)也告訴了搜索引擎這里是標(biāo)題。

再看下面這段代碼截圖:

12

紅色標(biāo)注部分就是CSS樣式代碼。CSS中文名叫級(jí)聯(lián)樣式表,白話就是說長(zhǎng)什么樣子。CSS就是起裝修作用的,必須要和HTML一起配合使用。

再看下面這段代碼截圖(和第一張圖一樣):

23

上圖第二個(gè)紅色標(biāo)注的地方就是JavaScript,JavaScript是一種腳本語言,它在網(wǎng)頁中使用的主要場(chǎng)景是控制HTML中的每一個(gè)元素。比如,點(diǎn)了一個(gè)按鈕會(huì)彈出一個(gè)層,其實(shí)就是利用JavaScript實(shí)現(xiàn)的。

目前的互聯(lián)網(wǎng),任何一個(gè)網(wǎng)頁都是由他們?nèi)齻€(gè)構(gòu)建起來的,作為網(wǎng)頁產(chǎn)品經(jīng)理必須知道,若是能夠看懂、簡(jiǎn)單修改甚至是自己寫,那就更棒了,再深的介紹就不在此說明了。

當(dāng)然作為創(chuàng)業(yè)公司的產(chǎn)品經(jīng)理還有注意前端頁面規(guī)范和兼容性的問題,作為合格的前端工程師上面說的都應(yīng)該必須過關(guān),作為產(chǎn)品經(jīng)理也必須明了。

比如html文檔格式,必須有的dtd格式,文件編碼utf-8等這些常識(shí)性姿勢(shì)。

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

說到這里大家應(yīng)該想問了,html應(yīng)該用什么軟件開發(fā)呢?Dreamweaver,百度自行了解。

本文僅適用于產(chǎn)品新人,產(chǎn)品大佬可以忽略。

#專欄作家#

董海榮,微信公眾號(hào):pingyaonr,人人都是產(chǎn)品經(jīng)理專欄作家。關(guān)注智能汽車、移動(dòng)互聯(lián)網(wǎng)和虛擬現(xiàn)實(shí)。擅長(zhǎng)內(nèi)容編輯運(yùn)營(yíng)、原型設(shè)計(jì)、需求挖掘梳理、產(chǎn)品規(guī)劃管理。歡迎交流學(xué)習(xí)。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,不得轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!