起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識PM技術課 | Web知識知多少？
本文筆者將與大家分享HTML/CSS/JavaScript這三種網頁技術，以及HTML5、H5等的相關知識。
無處不在的網頁
網頁存儲在某臺計算機（即服務器）上，并通過網絡與其他計算機相連。網頁通過網址（URL）來識別與訪問，當我們在瀏覽器輸入網址后，經過一段復雜而又快速的程序，網頁會被下載到用戶的計算機上，用戶的瀏覽器會解析網頁內容，最終展示給用戶。
網頁展示的信息可以包括：圖片、文字、音頻、視頻等內容，網頁上面還有鏈接指向更多的網頁，最終形成一個巨大的互聯網。
比如：百度的網頁就存儲在百度的服務器中，當我們在瀏覽器中輸入網址www.baidu.com（即URL地址），百度的網頁會從服務器下載到本地計算機上，瀏覽器接收這些數據并解析，百度的首頁就顯示出來了。
在電腦端，我們使用瀏覽器瀏覽網頁，比如：使用Internet Explorer、Edge、Chrome、Safari、360安全瀏覽器、搜狗瀏覽器、QQ瀏覽器等瀏覽器，訪問的網頁可以是搜索引擎https://www.baidu.com，可以是電商平臺https://www.taobao.com，甚至是社交平臺https://wx.qq.com。
由于移動互聯網的大發展，很多人可能沒有意識到，網頁其實可以實現大部分常用的功能。
手機、iPad上也有各種瀏覽器，我們可以輸入網址并直接訪問，各大手機廠商在手機中預先安裝了自己的瀏覽器，阿里巴巴、百度、騰訊、搜狗等互聯網公司也推出了自家的瀏覽器APP。為了獲得競爭優勢，互聯網公司還在瀏覽器上開發了各種功能，比如：智能搜索、去廣告插件等。
除了瀏覽器，不少APP也嵌入了瀏覽器功能。
比如：微信的公眾號，我們打開一篇微信公眾號文章，就是打開一個網頁；今日頭條等新聞客戶端也是個巨大的瀏覽器，我們打開一條新聞，就是進入相應的網頁；淘寶里面的商品簡介，也是個網頁。這些網頁“偽裝”得太像APP頁面了，以至于我們沒有意識到。
網頁三劍客：HTML/CSS/JavaScript
文字、圖片、表格、音頻、視頻是網頁最常見的元素。
在網頁上點擊鼠標右鍵，選擇菜單中的 “查看源文件” ，就可以看到網頁的實際內容：網頁實際上只是一個純文本文件！它通過各式各樣的標記對頁面上的文字、圖片、表格、聲音等元素進行描述，而瀏覽器則對這些標記進行解釋并生成頁面，于是就得到我們看到的豐富的頁面。
比如：在微信公眾平臺官網（>https://mp.weixin.qq.com）點擊右鍵，查看源文件，可以發現這個網頁的源文件全都都是文字。
你可能會奇怪，為什么在源文件看不到任何圖片，而在瀏覽器顯示的時候可以看到呢？
這些文件中存放的只是圖片的鏈接位置，圖片與網頁文件是各自獨立存放的，甚至可以不在同一臺計算機上，瀏覽器可以自動訪問這些鏈接并顯示出來。音頻、視頻等非文字內容也是類似的。
絕大多數網頁是由HTML、CSS和JavaScript三種技術開發的，HTML/CSS/JavaScript也被稱為網頁三劍客。
HTML提供網頁內容和結構，CSS控制網頁的外觀，JavaScript提供用戶交互，一個很經典的例子是說HTML就像一個人的骨骼、器官，而CSS就是人的皮膚，有了這兩樣也就構成了一個植物人了，加上javascript這個植物人就可以對外界刺激做出反應，可以思考、運動、可以給自己整容化妝等等，成為一個活生生的人。
HTML
HTML（Hypertext Markup Language，超文本標記語言）是一門標記語言，用于創建網頁和 Web 應用程序，HTML的基本元素是<p><img><table>等元素，分別表示文本、圖像、表格等。瀏覽器發出 URL 請求時，首先需要返回 HTML 文檔，之后瀏覽器對該文件進行解析。
比如：下面是一個基本的網頁，左邊是網頁源代碼，右邊是展示效果。<html></html>之間是網頁的全部內容，<head></head>之間是標題相關的內容，這里為空，<body></body>之間是網頁的主體內容，<h1></h1>之間是標題，<p></p>之間的內容是正文。
CSS
CSS（Cascading Stylesheet，級聯樣式表）用于控制 HTML 元素的外觀和布局，對文檔進行修飾，使文檔更加美觀，用戶看起來更舒服。 CSS 樣式可直接應用于 HTML 元素，單獨對單個界面裝飾，也可以對多個界面裝飾。
比如，下面是一個添加CSS樣式的網頁，左邊是網頁源代碼，右邊是展示效果。body{background-color:#d0e4fe}，設置了<body></body>之間的內容的背景顏色是#d0e4fe，h1{color:orange;text-align:center;}設置了<h1></h1>之間的文字顏色為橙色（orange），文字的位置是居中（center）。
為了提高編程效率，通常將CSS單獨寫在一個文件中，而是不是將CSS與HTML混合編程。
JavaScript
JavaScript 是動態的解釋性編程語言，可以實現用戶的交互和數據傳輸。
比如：我們常見的賬號、密碼驗證，就是通過JavaScript傳遞到服務器并返回服務器處理結果的。
比如：下面是一個添加JavaScript的網頁，左邊是網頁源代碼，右邊是展示效果。<script>function displayDate(){document.getElementById(“demo”).innerHTML=Date();}</script> 是JavaScript代碼，點擊按鈕，id=demo的內容變成時間。
與CSS類似，通常將 JavaScript 組織到單獨的文件中，而不是與HTML混合編程。為了提高JavaScript開發速度，也有一些開源庫可以使用，常見的是jQuery 、Vue.js， 極大地簡化了 JavaScript 編程。
為了提高網站的設計、編程速度，也有很多開源的庫可以使用，最常用的Bootstrap庫。Bootstrap庫來自 Twitter，是目前最受歡迎的前端框架，Bootstrap 是基于 HTML、CSS、JavaScript的，它簡潔靈活，使得 Web 開發更加快捷。
H5 就是 HTML5 嗎？
HTML5
2014年10月，萬維網聯盟宣布，經過接近8年的艱苦努力，HTML5標準規范終于制定完成。
從技術上看，HTML5本身是HTML，HTML是超文本標記語言，“5” 代表HTML第五次重大修改，可以理解為迭代之后的第五個版本，包含了很多功能特性。
HTML5的設計目的是：在移動設備上支持多媒體。
為了實現這種目的，HTML5引入了新的特性，比如用于繪畫的 canvas 元素，可以使用HTML5繪制簡單的圖像；用于視頻和音頻的的 video 和 audio 元素，可以使用HTML5播放視頻和音頻； HTML5可以調用數據庫；新的控件，比如 calendar、date、time、email、url、search，可以使用HTML5實現更好的用戶交互。
H5 是什么？
“刷爆朋友圈的H5”，“0基礎學習H5…”，“H5速成班”，H5這個詞經常出現在媒體中，甚至還出現了在線H5制作平臺，我們可以通過點擊、拖動實現美觀的網頁。
比如：我們可以使用百度的H5在線制作平臺，免費制作H5網頁。
顯然，這里所說的H5不是HTML5編程規范，更像是一種利用HTML5技術，制作包含文字、圖片、音頻等內容的炫酷網頁，以此實現“病毒式營銷”。
因此，H5并非技術概念，與其說是H5，不如說是“移動營銷頁面”，是營銷領域“濫用”技術名詞的產物。
因此，出現《H5+移動營銷設計指南》這類的書籍就不奇怪了。根據這本書的介紹，H5的原型要具備視覺、動效、節奏、音效、交互、可實施性等因素，H5頁面不太適合深度的閱讀，大部分使用場景是在地鐵上、電梯里、等上菜的時間等等。
八卦：“國產”瀏覽器
從“紅芯”講起
2018年，宣稱擁有自主可控和安全瀏覽器內核技術的瀏覽器廠商“紅芯”高調宣布融資2.5億元C輪系列融資，其中不乏晨興資本、達晨創投、IDG資本等知名風險投資機構參與。
隨后，網友發現：紅芯瀏覽器的文件結構與谷歌瀏覽器文件結構基本一模一樣，甚至連“屬性”里的Chrome都沒有改掉，安裝文件里竟然還有Chrome的LOGO。
瀏覽器內核是瀏覽器的核心，紅芯瀏覽器并沒有自己開發瀏覽器內核，而是使用Chrome內核，這意味著“紅芯”并不是自主可控的瀏覽器，而是在Chrome內核的基礎上，換了個“皮”，做出了一個瀏覽器。
不少手機游戲廠商也在玩兒類似的游戲，將國外的游戲換個背景，再把英文翻譯成中文，就直接在國內上線。
瀏覽器內核
網頁是由HTML、CSS、JavaScript等語言開發的，瀏覽器獲得HTML網頁之后，需要根據CSS、JS重新組織網頁并顯示在屏幕上。
比如：我們訪問微信公眾平臺的首頁https://mp.weixin.qq.com，瀏覽器獲得的是一堆文字，瀏覽器需要將這些文字變成我們看到的界面。
實現這些工作的就是瀏覽器內核。瀏覽器內核又可以分成兩部分：渲染引擎(Rendering Engine)和 JS （JavaScript）引擎。
渲染引擎負責取得網頁的內容（HTML、XML、圖像等等）、整理信息（例如加入 CSS 等），計算網頁的顯示方式，然后會輸出至顯示屏。瀏覽器內核對網頁的語法解釋會有所不同，所以渲染的效果也不相同。
JS 引擎則是解析 Javascript 語言，執行 javascript 語言來實現網頁的動態效果和用戶交互。
瀏覽器的種類有很多，但瀏覽器內核就那么幾個。常見的是微軟 IE 瀏覽器內核 Trident、谷歌 Chrome 瀏覽器內核 Blink、蘋果 Safari 內核 Webkit 和火狐瀏覽器內核 Gecko。
國內的瀏覽器，比如：360瀏覽器、QQ瀏覽器、搜狗瀏覽器、2345瀏覽器等，實際上使用的還是這幾種開源的瀏覽器內核，并在內核的技術上，做了一些界面和效果。
比如：一些瀏覽器打出雙引擎的旗號，所謂雙引擎就是使用了IE和Chrome兩個引擎，因為國內的很多網站還只能使用IE訪問，最典型的就是很多銀行的網站，這時候如果使用兩個引擎可以給用戶無縫切換，帶來良好的體驗。
正如發動機是汽車的核心一樣，瀏覽器內核是瀏覽器的核心，那我們為什么不自己開發一個國產瀏覽器內核呢？
主要原因是兩個：
- 一個瀏覽器引擎可能有上千萬行的代碼，開發一個瀏覽器內核需要投入大量的人力、物力。比如，Google為了研發、推廣自家的Chrome內核，投入了數十億美金，高昂的成本是大多數互聯網公司都無法承擔的。
- Chromium、Firefox等瀏覽器和瀏覽器內核本身就是開源項目，這些開源產品經過時間和用戶的檢驗，更加穩定可靠。與其花費大量人力、物力開發一個不是那么可靠的內核，還不如直接用人家提供的穩定可靠的軟件呢！
本文由@linghu 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash, 基于CC0協議
很詳細~謝謝啦
想知道些關于系統層面的技術知識
系統層面是Android、iOS、通信過程、系統架構，還是指推薦引擎、計算廣告等功能實現呢？