PM技術(shù)課 | Web知識知多少？

3 評論 6232 瀏覽 82 收藏 16 分鐘

本文筆者將與大家分享HTML/CSS/JavaScript這三種網(wǎng)頁技術(shù)，以及HTML5、H5等的相關(guān)知識。

無處不在的網(wǎng)頁

網(wǎng)頁存儲在某臺計(jì)算機(jī)（即服務(wù)器）上，并通過網(wǎng)絡(luò)與其他計(jì)算機(jī)相連。網(wǎng)頁通過網(wǎng)址（URL）來識別與訪問，當(dāng)我們在瀏覽器輸入網(wǎng)址后，經(jīng)過一段復(fù)雜而又快速的程序，網(wǎng)頁會被下載到用戶的計(jì)算機(jī)上，用戶的瀏覽器會解析網(wǎng)頁內(nèi)容，最終展示給用戶。

網(wǎng)頁展示的信息可以包括：圖片、文字、音頻、視頻等內(nèi)容，網(wǎng)頁上面還有鏈接指向更多的網(wǎng)頁，最終形成一個巨大的互聯(lián)網(wǎng)。

比如：百度的網(wǎng)頁就存儲在百度的服務(wù)器中，當(dāng)我們在瀏覽器中輸入網(wǎng)址www.baidu.com（即URL地址），百度的網(wǎng)頁會從服務(wù)器下載到本地計(jì)算機(jī)上，瀏覽器接收這些數(shù)據(jù)并解析，百度的首頁就顯示出來了。

在電腦端，我們使用瀏覽器瀏覽網(wǎng)頁，比如：使用Internet Explorer、Edge、Chrome、Safari、360安全瀏覽器、搜狗瀏覽器、QQ瀏覽器等瀏覽器，訪問的網(wǎng)頁可以是搜索引擎https://www.baidu.com，可以是電商平臺https://www.taobao.com，甚至是社交平臺https://wx.qq.com。

由于移動互聯(lián)網(wǎng)的大發(fā)展，很多人可能沒有意識到，網(wǎng)頁其實(shí)可以實(shí)現(xiàn)大部分常用的功能。

手機(jī)、iPad上也有各種瀏覽器，我們可以輸入網(wǎng)址并直接訪問，各大手機(jī)廠商在手機(jī)中預(yù)先安裝了自己的瀏覽器，阿里巴巴、百度、騰訊、搜狗等互聯(lián)網(wǎng)公司也推出了自家的瀏覽器APP。為了獲得競爭優(yōu)勢，互聯(lián)網(wǎng)公司還在瀏覽器上開發(fā)了各種功能，比如：智能搜索、去廣告插件等。

除了瀏覽器，不少APP也嵌入了瀏覽器功能。

比如：微信的公眾號，我們打開一篇微信公眾號文章，就是打開一個網(wǎng)頁；今日頭條等新聞客戶端也是個巨大的瀏覽器，我們打開一條新聞，就是進(jìn)入相應(yīng)的網(wǎng)頁；淘寶里面的商品簡介，也是個網(wǎng)頁。這些網(wǎng)頁“偽裝”得太像APP頁面了，以至于我們沒有意識到。

PM技術(shù)課 | Web

網(wǎng)頁三劍客：HTML/CSS/JavaScript

文字、圖片、表格、音頻、視頻是網(wǎng)頁最常見的元素。

在網(wǎng)頁上點(diǎn)擊鼠標(biāo)右鍵，選擇菜單中的 “查看源文件” ，就可以看到網(wǎng)頁的實(shí)際內(nèi)容：網(wǎng)頁實(shí)際上只是一個純文本文件！它通過各式各樣的標(biāo)記對頁面上的文字、圖片、表格、聲音等元素進(jìn)行描述，而瀏覽器則對這些標(biāo)記進(jìn)行解釋并生成頁面，于是就得到我們看到的豐富的頁面。

比如：在微信公眾平臺官網(wǎng)（>https://mp.weixin.qq.com）點(diǎn)擊右鍵，查看源文件，可以發(fā)現(xiàn)這個網(wǎng)頁的源文件全都都是文字。

PM技術(shù)課 | Web

PM技術(shù)課 | Web

你可能會奇怪，為什么在源文件看不到任何圖片，而在瀏覽器顯示的時(shí)候可以看到呢？

這些文件中存放的只是圖片的鏈接位置，圖片與網(wǎng)頁文件是各自獨(dú)立存放的，甚至可以不在同一臺計(jì)算機(jī)上，瀏覽器可以自動訪問這些鏈接并顯示出來。音頻、視頻等非文字內(nèi)容也是類似的。

絕大多數(shù)網(wǎng)頁是由HTML、CSS和JavaScript三種技術(shù)開發(fā)的，HTML/CSS/JavaScript也被稱為網(wǎng)頁三劍客。

HTML提供網(wǎng)頁內(nèi)容和結(jié)構(gòu)，CSS控制網(wǎng)頁的外觀，JavaScript提供用戶交互，一個很經(jīng)典的例子是說HTML就像一個人的骨骼、器官，而CSS就是人的皮膚，有了這兩樣也就構(gòu)成了一個植物人了，加上javascript這個植物人就可以對外界刺激做出反應(yīng)，可以思考、運(yùn)動、可以給自己整容化妝等等，成為一個活生生的人。

HTML

HTML（Hypertext Markup Language，超文本標(biāo)記語言）是一門標(biāo)記語言，用于創(chuàng)建網(wǎng)頁和 Web 應(yīng)用程序，HTML的基本元素是<p><img><table>等元素，分別表示文本、圖像、表格等。瀏覽器發(fā)出 URL 請求時(shí)，首先需要返回 HTML 文檔，之后瀏覽器對該文件進(jìn)行解析。

比如：下面是一個基本的網(wǎng)頁，左邊是網(wǎng)頁源代碼，右邊是展示效果。<html></html>之間是網(wǎng)頁的全部內(nèi)容，<head></head>之間是標(biāo)題相關(guān)的內(nèi)容，這里為空，<body></body>之間是網(wǎng)頁的主體內(nèi)容，<h1></h1>之間是標(biāo)題，<p></p>之間的內(nèi)容是正文。

PM技術(shù)課 | Web

CSS

CSS（Cascading Stylesheet，級聯(lián)樣式表）用于控制 HTML 元素的外觀和布局，對文檔進(jìn)行修飾，使文檔更加美觀，用戶看起來更舒服。 CSS 樣式可直接應(yīng)用于 HTML 元素，單獨(dú)對單個界面裝飾，也可以對多個界面裝飾。

比如，下面是一個添加CSS樣式的網(wǎng)頁，左邊是網(wǎng)頁源代碼，右邊是展示效果。body{background-color:#d0e4fe}，設(shè)置了<body></body>之間的內(nèi)容的背景顏色是#d0e4fe，h1{color:orange;text-align:center;}設(shè)置了<h1></h1>之間的文字顏色為橙色（orange），文字的位置是居中（center）。

PM技術(shù)課 | Web

為了提高編程效率，通常將CSS單獨(dú)寫在一個文件中，而是不是將CSS與HTML混合編程。

JavaScript

JavaScript 是動態(tài)的解釋性編程語言，可以實(shí)現(xiàn)用戶的交互和數(shù)據(jù)傳輸。

比如：我們常見的賬號、密碼驗(yàn)證，就是通過JavaScript傳遞到服務(wù)器并返回服務(wù)器處理結(jié)果的。

比如：下面是一個添加JavaScript的網(wǎng)頁，左邊是網(wǎng)頁源代碼，右邊是展示效果。<script>function displayDate(){document.getElementById(“demo”).innerHTML=Date();}</script> 是JavaScript代碼，點(diǎn)擊按鈕，id=demo的內(nèi)容變成時(shí)間。

PM技術(shù)課 | Web

與CSS類似，通常將 JavaScript 組織到單獨(dú)的文件中，而不是與HTML混合編程。為了提高JavaScript開發(fā)速度，也有一些開源庫可以使用，常見的是jQuery 、Vue.js， 極大地簡化了 JavaScript 編程。

為了提高網(wǎng)站的設(shè)計(jì)、編程速度，也有很多開源的庫可以使用，最常用的Bootstrap庫。Bootstrap庫來自 Twitter，是目前最受歡迎的前端框架，Bootstrap 是基于 HTML、CSS、JavaScript的，它簡潔靈活，使得 Web 開發(fā)更加快捷。

H5 就是 HTML5 嗎？

HTML5

2014年10月，萬維網(wǎng)聯(lián)盟宣布，經(jīng)過接近8年的艱苦努力，HTML5標(biāo)準(zhǔn)規(guī)范終于制定完成。

從技術(shù)上看，HTML5本身是HTML，HTML是超文本標(biāo)記語言，“5” 代表HTML第五次重大修改，可以理解為迭代之后的第五個版本，包含了很多功能特性。

PM技術(shù)課 | Web

HTML5的設(shè)計(jì)目的是：在移動設(shè)備上支持多媒體。

為了實(shí)現(xiàn)這種目的，HTML5引入了新的特性，比如用于繪畫的 canvas 元素，可以使用HTML5繪制簡單的圖像；用于視頻和音頻的的 video 和 audio 元素，可以使用HTML5播放視頻和音頻； HTML5可以調(diào)用數(shù)據(jù)庫；新的控件，比如 calendar、date、time、email、url、search，可以使用HTML5實(shí)現(xiàn)更好的用戶交互。

H5 是什么？

“刷爆朋友圈的H5”，“0基礎(chǔ)學(xué)習(xí)H5…”，“H5速成班”，H5這個詞經(jīng)常出現(xiàn)在媒體中，甚至還出現(xiàn)了在線H5制作平臺，我們可以通過點(diǎn)擊、拖動實(shí)現(xiàn)美觀的網(wǎng)頁。

比如：我們可以使用百度的H5在線制作平臺，免費(fèi)制作H5網(wǎng)頁。

PM技術(shù)課 | Web

顯然，這里所說的H5不是HTML5編程規(guī)范，更像是一種利用HTML5技術(shù)，制作包含文字、圖片、音頻等內(nèi)容的炫酷網(wǎng)頁，以此實(shí)現(xiàn)“病毒式營銷”。

因此，H5并非技術(shù)概念，與其說是H5，不如說是“移動營銷頁面”，是營銷領(lǐng)域“濫用”技術(shù)名詞的產(chǎn)物。

因此，出現(xiàn)《H5+移動營銷設(shè)計(jì)指南》這類的書籍就不奇怪了。根據(jù)這本書的介紹，H5的原型要具備視覺、動效、節(jié)奏、音效、交互、可實(shí)施性等因素，H5頁面不太適合深度的閱讀，大部分使用場景是在地鐵上、電梯里、等上菜的時(shí)間等等。

八卦：“國產(chǎn)”瀏覽器

從“紅芯”講起

PM技術(shù)課 | Web

2018年，宣稱擁有自主可控和安全瀏覽器內(nèi)核技術(shù)的瀏覽器廠商“紅芯”高調(diào)宣布融資2.5億元C輪系列融資，其中不乏晨興資本、達(dá)晨創(chuàng)投、IDG資本等知名風(fēng)險(xiǎn)投資機(jī)構(gòu)參與。

隨后，網(wǎng)友發(fā)現(xiàn)：紅芯瀏覽器的文件結(jié)構(gòu)與谷歌瀏覽器文件結(jié)構(gòu)基本一模一樣，甚至連“屬性”里的Chrome都沒有改掉，安裝文件里竟然還有Chrome的LOGO。

瀏覽器內(nèi)核是瀏覽器的核心，紅芯瀏覽器并沒有自己開發(fā)瀏覽器內(nèi)核，而是使用Chrome內(nèi)核，這意味著“紅芯”并不是自主可控的瀏覽器，而是在Chrome內(nèi)核的基礎(chǔ)上，換了個“皮”，做出了一個瀏覽器。

不少手機(jī)游戲廠商也在玩兒類似的游戲，將國外的游戲換個背景，再把英文翻譯成中文，就直接在國內(nèi)上線。

瀏覽器內(nèi)核

網(wǎng)頁是由HTML、CSS、JavaScript等語言開發(fā)的，瀏覽器獲得HTML網(wǎng)頁之后，需要根據(jù)CSS、JS重新組織網(wǎng)頁并顯示在屏幕上。

比如：我們訪問微信公眾平臺的首頁https://mp.weixin.qq.com，瀏覽器獲得的是一堆文字，瀏覽器需要將這些文字變成我們看到的界面。

PM技術(shù)課 | Web

PM技術(shù)課 | Web

實(shí)現(xiàn)這些工作的就是瀏覽器內(nèi)核。瀏覽器內(nèi)核又可以分成兩部分：渲染引擎(Rendering Engine)和 JS （JavaScript）引擎。

渲染引擎負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等等）、整理信息（例如加入 CSS 等），計(jì)算網(wǎng)頁的顯示方式，然后會輸出至顯示屏。瀏覽器內(nèi)核對網(wǎng)頁的語法解釋會有所不同，所以渲染的效果也不相同。

JS 引擎則是解析 Javascript 語言，執(zhí)行 javascript 語言來實(shí)現(xiàn)網(wǎng)頁的動態(tài)效果和用戶交互。

瀏覽器的種類有很多，但瀏覽器內(nèi)核就那么幾個。常見的是微軟 IE 瀏覽器內(nèi)核 Trident、谷歌 Chrome 瀏覽器內(nèi)核 Blink、蘋果 Safari 內(nèi)核 Webkit 和火狐瀏覽器內(nèi)核 Gecko。

國內(nèi)的瀏覽器，比如：360瀏覽器、QQ瀏覽器、搜狗瀏覽器、2345瀏覽器等，實(shí)際上使用的還是這幾種開源的瀏覽器內(nèi)核，并在內(nèi)核的技術(shù)上，做了一些界面和效果。

比如：一些瀏覽器打出雙引擎的旗號，所謂雙引擎就是使用了IE和Chrome兩個引擎，因?yàn)閲鴥?nèi)的很多網(wǎng)站還只能使用IE訪問，最典型的就是很多銀行的網(wǎng)站，這時(shí)候如果使用兩個引擎可以給用戶無縫切換，帶來良好的體驗(yàn)。

正如發(fā)動機(jī)是汽車的核心一樣，瀏覽器內(nèi)核是瀏覽器的核心，那我們?yōu)槭裁床蛔约洪_發(fā)一個國產(chǎn)瀏覽器內(nèi)核呢？

主要原因是兩個：

  1. 一個瀏覽器引擎可能有上千萬行的代碼，開發(fā)一個瀏覽器內(nèi)核需要投入大量的人力、物力。比如，Google為了研發(fā)、推廣自家的Chrome內(nèi)核，投入了數(shù)十億美金，高昂的成本是大多數(shù)互聯(lián)網(wǎng)公司都無法承擔(dān)的。
  2. Chromium、Firefox等瀏覽器和瀏覽器內(nèi)核本身就是開源項(xiàng)目，這些開源產(chǎn)品經(jīng)過時(shí)間和用戶的檢驗(yàn)，更加穩(wěn)定可靠。與其花費(fèi)大量人力、物力開發(fā)一個不是那么可靠的內(nèi)核，還不如直接用人家提供的穩(wěn)定可靠的軟件呢！

 

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

題圖來自Unsplash, 基于CC0協(xié)議

更多精彩內(nèi)容，請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
共 13 篇文章16028 人已學(xué)習(xí)

李艷賓
6篇作品 168896總閱讀量
09-033918 瀏覽
從虛擬偶像到虛擬主播，一場TO C到 TO B生意的大遷徙
09-225589 瀏覽
從陌生人社交的產(chǎn)品演進(jìn)看創(chuàng)新
03-153802 瀏覽
無處不在的二維碼，在數(shù)字化轉(zhuǎn)型中扮演了什么角色？
11-021630 瀏覽
做圖文自媒體還有前景嗎？怎么才能做好內(nèi)容？
09-182026 瀏覽
小微發(fā)票貸產(chǎn)品中，對于發(fā)票數(shù)據(jù)應(yīng)用詳解
評論
評論請登錄

  1. 很詳細(xì)~謝謝啦

    來自北京 回復(fù)

  2. 想知道些關(guān)于系統(tǒng)層面的技術(shù)知識

    回復(fù)

    1. 系統(tǒng)層面是Android、iOS、通信過程、系統(tǒng)架構(gòu)，還是指推薦引擎、計(jì)算廣告等功能實(shí)現(xiàn)呢？

      來自浙江 回復(fù)