初入行PM必備:大白話告訴你計算機基礎(chǔ)知識(第三彈)
前兩期我們分別說了計算機的基礎(chǔ)知識、計算機硬件軟件的知識,今天就接著聊聊前端的事情。作為初入行的PM,前端的語言接觸起來相對于后端的語言要容易不少,但前端的語言也有很多,HTML、CSS、Javascript、XML、ASP.NET 等等。那應(yīng)該了解哪些呢?
首先,要搞清楚一點,學(xué)習(xí)前端語言的目的是什么?
學(xué)習(xí)前端的這些知識,了解每一種語言的規(guī)則,從而了解產(chǎn)品前端的頁面是如何實現(xiàn)的、交互的方式有哪些,掌握前端功能、交互實現(xiàn)的方式方法。PS:雖然不需要你完全會寫這些代碼,但至少要知道頁面效果、交互是通過什么方式來實現(xiàn)的。
so,學(xué)習(xí)前端技術(shù),HTML、CSS、Javascript、json這幾類必不可少。幾者的關(guān)系如下:HTML負責(zé)網(wǎng)頁的內(nèi)容;CSS負責(zé)內(nèi)容的呈現(xiàn)樣式,即修飾內(nèi)容;Javascript主要負責(zé)頁面的動態(tài)效果,如數(shù)據(jù)的驗證、異常提醒、改變頁面內(nèi)容等幾個部分,也就是讓頁面動起來;JSON則主要負責(zé)其中數(shù)據(jù)的交換。
1、HTML
HTML(Hyper Text Markup Language),一種描述網(wǎng)頁的語言,我們平時看到的網(wǎng)頁大多都是通過HTML實現(xiàn)的。HTML使用一系列的標簽來定義頁面如何處理文字、圖片、鏈接、視頻等等內(nèi)容,而瀏覽器通過讀取這些標簽,然后呈現(xiàn)出來。HTML標簽固定的格式為<標簽> 內(nèi)容</標簽>。eg:
簡單了解下各標簽的含義,也就能了解HTML到底能做哪些事情,實現(xiàn)哪些效果。常見的標簽有:
- 標題,用 <h1> – <h6> 等標簽來定義;
- 段落,用 <p> 標簽來定義;
- 表格,用<table> 定義;
- 鏈接,用 <a> 標簽來定義的;
- 圖像,用 <img> 標簽來定義的;
- 樣式,用<style>標簽來定義;
- ……
2、CSS
有了內(nèi)容,如何呈現(xiàn)就需要CSS了。CSS定義HTML的樣式,樣式包括:背景(背景顏色、背景圖片等)、文本(顏色、字符間距,對齊文本,裝飾文本,對文本進行縮進)、文字(大小、加粗、風(fēng)格(如斜體)和變形)、鏈接、列表、表格(表格顏色、高度寬度、內(nèi)部邊框等等)、輪廓。簡單說,word中的開始菜單欄的所有功能基本都屬于樣式。
CSS 語言的規(guī)則由兩個主要的部分構(gòu)成:選擇器,以及一條或多條聲明。選擇器通常是您需要改變樣式的 HTML 元素,即所有代碼。聲明則規(guī)定屬性和值,每條聲明由一個屬性和一個值組成。
3、Javascript,屬于網(wǎng)絡(luò)的腳本語言
頁面中的動態(tài)效果就要依靠JavaScript了, 它常常被網(wǎng)頁用來改變頁面內(nèi)容、驗證表單、檢測瀏覽器、創(chuàng)建cookies、異常提醒等等。 在HTML 頁面中插入 JavaScript,一般都在 <script> 與</script> 標簽之間。
JavaScript 中的所有事物都是對象,包括字符串、數(shù)字、數(shù)組、日期等等。對象是擁有屬性和方法的數(shù)據(jù)。屬性是值,方法是可執(zhí)行的動作。(這塊比較枯燥,沒想更容易理解的方法)
4、Json
Json主要處理數(shù)據(jù),是一種輕量級的文本數(shù)據(jù)交換格式。它使用 JavaScript 語法來描述數(shù)據(jù)對象,所以咯,它和JS語法相同,熟悉了JS,JSON自然很容易就明白了。Json語法規(guī)則如下:數(shù)據(jù)在名稱/值對中,并由逗號分隔?;ɡㄌ柋4鎸ο?,方括號保存數(shù)組。
舉個栗子:
以上這四種語言的內(nèi)容不止這些,這里只是拋磚引玉,簡單和大家聊聊每種語言最基本的規(guī)則而已。熟悉每種語言的規(guī)則,隨便打開一個頁面,大致可以知道哪部分代碼是干什么用的,實現(xiàn)什么效果,做到這一點就OK了。當然,想要更深入了解每種語言,推薦大家W3school,很適合初學(xué)者哦~~~
相關(guān)閱讀
初入行PM必備:大白話告訴你計算機基礎(chǔ)知識(第二彈)
本文由 @馨香菩提?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
插圖上文章名稱有誤
哈哈,今早我也發(fā)現(xiàn)啦~~謝謝你的提醒哦~~這個圖一般是平臺自動配,在想怎么聯(lián)系平臺反映下