整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
eb前端技術(shù)由html、css和 javascript三大部分構(gòu)成，是一個龐大而復(fù)雜的技術(shù)體系，其復(fù)雜程度不低于任何一門后端語言。而我們在學(xué)習(xí)它的時候往往是先從某一個點切入，然后不斷地接觸和學(xué)習(xí)新的知識點，因此對于初學(xué)者很難理清楚整個體系的脈絡(luò)結(jié)構(gòu)。本文將對Web前端知識體系進(jìn)行簡單的梳理，對應(yīng)的每個知識點點到為止，不作詳細(xì)介紹。目的是幫助大家審查自己的知識結(jié)構(gòu)是否完善，如有遺漏或不正確的地方，希望共勉。
HTML 篇
1、BOM
BOM 是 Browser Object Model
的縮寫，即瀏覽器對象模型，當(dāng)一個瀏覽器頁面初始化時，會在內(nèi)存創(chuàng)建一個全局的對象，用以描述當(dāng)前窗口的屬性和狀態(tài)，這個全局對象被稱為瀏覽器對象模型，即BOM。BOM的核心對象就是window，window
對象也是BOM的頂級對象，其中包含了瀏覽器的 6個核心模塊：
document -
即文檔對象，渲染引擎在解析HTML代碼時，會為每一個元素生成對應(yīng)的DOM對象，由于元素之間有層級關(guān)系，因此整個HTML代碼解析完以后，會生成一個由不同節(jié)點組成的樹形結(jié)構(gòu)，俗稱DOM樹，document
用于描述DOM樹的狀態(tài)和屬性，并提供了很多操作DOM的API。
frames - HTML 子框架，即在瀏覽器里嵌入另一個窗口，父框架和子框架擁有獨立的作用域和上下文。
history - 以棧(FIFO)的形式保存著頁面被訪問的歷史記錄，頁面前進(jìn)即入棧，頁面返回即出棧。
location - 提供了當(dāng)前窗口中加載的文檔相關(guān)信息以及一些導(dǎo)航功能。
navigator - 用來描述瀏覽器本身，包括瀏覽器的名稱、版本、語言、系統(tǒng)平臺、用戶特性字符串等信息。
screen - 提供了瀏覽器顯示屏幕的相關(guān)屬性，比如顯示屏幕的寬度和高度，可用寬度和高度。
2、DOM 系統(tǒng)
DOM 是 Document Object Model 的縮寫，即 文檔對象模型，是所有瀏覽器公共遵守的標(biāo)準(zhǔn)，DOM
將HTML和XML文檔映射成一個由不同節(jié)點組成的樹型結(jié)構(gòu)，俗稱DOM樹。其核心對象是document，用于描述DOM樹的狀態(tài)和屬性，并提供對應(yīng)的DOM操作API。隨著歷史的發(fā)展，DOM
被劃分為1級、2級、3級，共3個級別：
1級DOM - 在1998年10月份成為W3C的提議，由DOM核心與DOM
HTML兩個模塊組成。DOM核心能映射以XML為基礎(chǔ)的文檔結(jié)構(gòu)，允許獲取和操作文檔的任意部分。DOM
HTML通過添加HTML專用的對象與函數(shù)對DOM核心進(jìn)行了擴展。
2級DOM - 鑒于1級DOM僅以映射文檔結(jié)構(gòu)為目標(biāo)，DOM
2級面向更為寬廣。通過對原有DOM的擴展，2級DOM通過對象接口增加了對鼠標(biāo)和用戶界面事件（DHTML長期支持鼠標(biāo)與用戶界面事件）、范圍、遍歷（重復(fù)執(zhí)行DOM文檔）和層疊樣式表（CSS）的支持。同時也對DOM
1的核心進(jìn)行了擴展，從而可支持XML命名空間。
3級DOM -
通過引入統(tǒng)一方式載入和保存文檔和文檔驗證方法對DOM進(jìn)行進(jìn)一步擴展，DOM3包含一個名為“DOM載入與保存”的新模塊，DOM核心擴展后可支持XML1.0的所有內(nèi)容，包括XML
Infoset、 XPath、和XML Base。
瀏覽器對不同級別DOM的支持情況如下所示：
從圖中可以看出，移動端常用的 webkit 內(nèi)核瀏覽器目前只支持DOM2，而不支持DOM3 。
新手福利獲取方式：
1.在你手機的右上角有【關(guān)注】選項，或點擊我的頭像，點擊關(guān)注！（關(guān)注我）
2.關(guān)注后，手機客戶端點擊我的主頁面，右上角有私信，請私信發(fā)我：html
其實作為一個開發(fā)者，有一個學(xué)習(xí)的氛圍跟一個交流圈子特別重要這里請私信我“html”不管你是小白還是大牛歡迎入住大家一起交流成長。小編會在里面不定期分享干貨源碼，包括我精心整理的一份零基礎(chǔ)教程。歡迎各位感興趣的的小伙伴。
學(xué)習(xí)思路：
3、事件系統(tǒng)
事件是用戶與頁面交互的基礎(chǔ)，到目前為止，DOM事件從PC端的 鼠標(biāo)事件(mouse) 發(fā)展到了 移動端的 觸摸事件(touch) 和
手勢事件(guesture)，touch事件描述了手指在屏幕操作的每一個細(xì)節(jié)，guesture 則是描述多手指操作時更為復(fù)雜的情況，總結(jié)如下：
第一根手指放下，觸發(fā) touchstart，除此之外什么都不會發(fā)生
手指滑動時，觸發(fā)touchmove
第二根手指放下，觸發(fā) gesturestart
觸發(fā)第二根手指的 touchstart
立即觸發(fā) gesturechange
任意手指移動，持續(xù)觸發(fā) gesturechange
第二根手指彈起時，觸發(fā) gestureend，以后將不會再觸發(fā) gesturechange
觸發(fā)第二根手指的 touchend
觸發(fā)touchstart (多根手指在屏幕上，提起一根，會刷新一次全局touch) _ ___
彈起第一根手指，觸發(fā) touchend
更多關(guān)于手勢事件的介紹請參考：
gesture事件處理復(fù)雜手勢
DOM2.0 模型將事件處理流程分為三個階段，即 事件捕獲階段 、 事件處理階段 、 事件冒泡階段， 如圖所示：
事件捕獲 ：當(dāng)用戶觸發(fā)點擊事件后，頂層對象document 就會發(fā)出一個事件流，從最外層的DOM節(jié)點向目標(biāo)元素節(jié)點傳遞，最終到達(dá)目標(biāo)元素。
事件處理 ：當(dāng)?shù)竭_(dá)目標(biāo)元素之后，執(zhí)行目標(biāo)元素綁定的處理函數(shù)。如果沒有綁定監(jiān)聽函數(shù)，則不做任何處理。
事件冒泡 ：事件流從目標(biāo)元素開始，向最外層DOM節(jié)點傳遞，途中如果有節(jié)點綁定了事件處理函數(shù)，這些函數(shù)就會被執(zhí)行。
利用事件冒泡原理可以實現(xiàn) 事件委托
，所謂事件委托，就是在父元素上添加事件監(jiān)聽器，用以監(jiān)聽和處理子元素的事件，避免重復(fù)為子元素綁定相同的事件。當(dāng)目標(biāo)元素的事件被觸發(fā)以后，這個事件就從目標(biāo)元素開始，向最外層元素傳遞，最終冒泡到父元素上，父元素再通過event.target
獲取到這個目標(biāo)元素，這樣做的好處是，父元素只需綁定一個事件監(jiān)聽，就可以對所有子元素的事件進(jìn)行處理了，從而減少了不必要的事件綁定，對頁面性能有一定的提升。
4、HTML解析過程
瀏覽器加載 html 文件以后，渲染引擎會從上往下，一步步來解析HTML標(biāo)簽，大致過程如下：
用戶輸入網(wǎng)址，瀏覽器向服務(wù)器發(fā)出請求，服務(wù)器返回html文件；
渲染引擎開始解析 html 標(biāo)簽，并將標(biāo)簽轉(zhuǎn)化為DOM節(jié)點，生成 DOM樹；
如果head 標(biāo)簽中引用了外部css文件，則發(fā)出css文件請求，服務(wù)器返回該文件，該過程會阻塞后面的解析；
如果引用了外部 js 文件，則發(fā)出 js 文件請求，服務(wù)器返回后立即執(zhí)行該腳本，這個過程也會阻塞html的解析；
引擎開始解析 body 里面的內(nèi)容，如果標(biāo)簽里引用了css 樣式，就需要解析剛才下載好的css文件，然后用css來設(shè)置標(biāo)簽的樣式屬性，并生成渲染樹；
如果 body 中的 img 標(biāo)簽引用了圖片資源，則立即向服務(wù)器發(fā)出請求，此時引擎不會等待圖片下載完畢，而是繼續(xù)解析后面的標(biāo)簽；
服務(wù)器返回圖片文件，由于圖片需要占用一定的空間，會影響到后面元素的排版，因此引擎需要重新渲染這部分內(nèi)容；
如果此時 js 腳本中運行了 style.display="none"，布局被改變，引擎也需要重新渲染這部分代碼；
直到 html 結(jié)束標(biāo)簽為止，頁面解析完畢。
5、重繪 和 回流
當(dāng)渲染樹中的一部分(或全部)因為元素的規(guī)模尺寸，布局，隱藏等改變而需要重新構(gòu)建。這就稱為回流。比如上面的img文件加載完成后就會引起回流，每個頁面至少需要一次回流，就是在頁面第一次加載的時候。
當(dāng)渲染樹中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風(fēng)格，而不會影響布局的，比如 background-color。則就叫稱為重繪。
從上面可以看出，回流必將引起重繪，而重繪不一定會引起回流。會引起重繪和回流的操作如下：
添加、刪除元素(回流+重繪)
隱藏元素，display:none(回流+重繪)，visibility:hidden(只重繪，不回流)
移動元素，比如改變top,left的值，或者移動元素到另外一個父元素中。(重繪+回流)
對style的操作(對不同的屬性操作，影響不一樣)
還有一種是用戶的操作，比如改變?yōu)g覽器大小，改變?yōu)g覽器的字體大小等(回流+重繪)
另外，transform
操作不會引起重繪和回流，是一種高效率的渲染。這是因為transform屬于合成屬性，對合成屬性進(jìn)行transition/animation
動畫時將會創(chuàng)建一個合成層，這使得動畫元素在一個獨立的層中進(jìn)行渲染，當(dāng)元素的內(nèi)容沒有發(fā)生改變，就沒必要進(jìn)行重繪，瀏覽器會通過重新復(fù)合來創(chuàng)建動畫幀。
6、本地存儲
本地存儲最原始的方式就是 cookie,cookie 是存放在本地瀏覽器的一段文本，數(shù)據(jù)以鍵值對的形式保存，可以設(shè)置過期時間。 但是 cookie
不適合大量數(shù)據(jù)的存儲，因為每請求一次頁面，cookie 都會發(fā)送給服務(wù)器，這使得 cookie
速度很慢而且效率也不高。因此cookie的大小被限制為4k左右(不同瀏覽器可能不同,分HOST)，如下所示：
Firefox和Safari允許cookie多達(dá)4097個字節(jié)，包括名(name)、值(value) 和 等號。
Opera允許cookie多達(dá)4096個字節(jié)，包括：名(name)、值(value) 和 等號。
Internet Explorer允許cookie多達(dá)4095個字節(jié)，包括：名(name)、值(value) 和 等號。
在所有瀏覽器中，任何cookie大小超過限制都被忽略，且永遠(yuǎn)不會被設(shè)置。
html5 提供了兩種在客戶端存儲數(shù)據(jù)的新方法：localStorage 和 sessionStorage, 它們都是以key/value
的形式來存儲數(shù)據(jù)，前者是永久存儲，后者的存儲期限僅限于瀏覽器會話(session)，即當(dāng)瀏覽器窗口關(guān)閉后，sessionStorage中的數(shù)據(jù)被清除。
localStorage的存儲空間大約5M左右(不同瀏覽器可能不同，分
HOST)，這個相當(dāng)于一個5M大小的前端數(shù)據(jù)庫，相比于cookie，可以節(jié)約帶寬，但localStorage在瀏覽器隱私模式下是不可讀取的，當(dāng)存儲數(shù)據(jù)超過了localStorage
的存儲空間后會拋出異常。
此外，H5還提供了逆天的websql和
indexedDB，允許前端以關(guān)系型數(shù)據(jù)庫的方式來存儲本地數(shù)據(jù)，相對來說，這個功能目前應(yīng)用的場景比較少，此處不作介紹。
7、瀏覽器緩存機制
瀏覽器緩存機制是指通過 HTTP 協(xié)議頭里的 Cache-Control (或 Expires) 和 Last-Modified (或 Etag)
等字段來控制文件緩存的機制。
Cache-Control 用于控制文件在本地緩存有效時長。最常見的，比如服務(wù)器回包：Cache-Control:max-age=600
表示文件在本地應(yīng)該緩存，且有效時長是600秒 (從發(fā)出請求算起)。在接下來600秒內(nèi)，如果有請求這個資源，瀏覽器不會發(fā)出 HTTP
請求，而是直接使用本地緩存的文件。
Last-Modified 是標(biāo)識文件在服務(wù)器上的最新更新時間。下次請求時，如果文件緩存過期，瀏覽器通過 If-Modified-Since
字段帶上這個時間，發(fā)送給服務(wù)器，由服務(wù)器比較時間戳來判斷文件是否有修改。如果沒有修改，服務(wù)器返回304告訴瀏覽器繼續(xù)使用緩存；如果有修改，則返回200，同時返回最新的文件。
Cache-Control 通常與 Last-Modified 一起使用。一個用于控制緩存有效時間，一個在緩存失效后，向服務(wù)查詢是否有更新。
Cache-Control 還有一個同功能的字段：Expires。Expires 的值一個絕對的時間點，如：Expires: Thu, 10 Nov
2015 08:45:11 GMT，表示在這個時間點之前，緩存都是有效的。
Expires 是 HTTP1.0 標(biāo)準(zhǔn)中的字段，Cache-Control 是 HTTP1.1
標(biāo)準(zhǔn)中新加的字段，功能一樣，都是控制緩存的有效時間。當(dāng)這兩個字段同時出現(xiàn)時，Cache-Control 是高優(yōu)化級的。
Etag 也是和 Last-Modified 一樣，對文件進(jìn)行標(biāo)識的字段。不同的是，Etag
的取值是一個對文件進(jìn)行標(biāo)識的特征字串。在向服務(wù)器查詢文件是否有更新時，瀏覽器通過 If-None-Match
字段把特征字串發(fā)送給服務(wù)器，由服務(wù)器和文件最新特征字串進(jìn)行匹配，來判斷文件是否有更新。沒有更新回包304，有更新回包200。Etag 和
Last-Modified 可根據(jù)需求使用一個或兩個同時使用。兩個同時使用時，只要滿足基中一個條件，就認(rèn)為文件沒有更新。
另外有兩種特殊的情況：
手動刷新頁面(F5)，瀏覽器會直接認(rèn)為緩存已經(jīng)過期(可能緩存還沒有過期)，在請求中加上字段：Cache-Control:max-age=0，發(fā)包向服務(wù)器查詢是否有文件是否有更新。
強制刷新頁面(Ctrl+F5)，瀏覽器會直接忽略本地的緩存(有緩存也會認(rèn)為本地沒有緩存)，在請求中加上字段：Cache-Control:no-cache
(或 Pragma:no-cache)，發(fā)包向服務(wù)重新拉取文件。
8、History
用戶訪問網(wǎng)頁的歷史記錄通常會被保存在一個類似于棧的對象中，即history對象，點擊返回就出棧，跳下一頁就入棧。 它提供了以下方法來操作頁面的前進(jìn)和后退：
window.history.back( ) 返回到上一個頁面
window.history.forward( ) 進(jìn)入到下一個頁面
window.history.go( [delta] ) 跳轉(zhuǎn)到指定頁面
HTML5 對History Api 進(jìn)行了增強，新增了兩個Api 和一個事件，分別是pushState、replaceState 和
onpopstate：
pushState是往history對象里添加一個新的歷史記錄，即壓棧。
replaceState 是替換history對象中的當(dāng)前歷史記錄。
當(dāng)點擊瀏覽器后退按鈕或 js調(diào)用history.back 都會觸發(fā) onpopstate 事件。
與其類似的還有一個事件：onhashchange，onhashchange是老API，瀏覽器支持度高，本來是用來監(jiān)聽hash變化的，但可以被利用來做客戶端前進(jìn)和后退事件的監(jiān)聽，而onpopstate是專門用來監(jiān)聽瀏覽器前進(jìn)后退的，不僅可以支持hash，非hash的同源
url 也支持。
9、HTML5離線緩存
HTML5離線緩存又叫Application
Cache，是從瀏覽器的緩存中分出來的一塊緩存區(qū)，如果要在這個緩存中保存數(shù)據(jù)，可以使用一個描述文件（manifest file），列出要下載和緩存的資源。
manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內(nèi)容（以及不緩存的內(nèi)容）。manifest 文件可分為三個部分：
- CACHE MANIFEST - 在此標(biāo)題下列出的文件將在首次下載后進(jìn)行緩存
- NETWORK - 在此標(biāo)題下列出的文件需要與服務(wù)器的連接，且不會被緩存
- FALLBACK - 在此標(biāo)題下列出的文件規(guī)定當(dāng)頁面無法訪問時的回退頁面（比如 404 頁面）
離線緩存為應(yīng)用帶來三個優(yōu)勢：
離線瀏覽 - 用戶可在應(yīng)用離線時使用它們
速度 - 已緩存資源加載得更快
減少服務(wù)器負(fù)載 - 瀏覽器將只從服務(wù)器下載更新過或更改過的資源。
10、Web語義化 和 SEO
Web語義化是指使用語義恰當(dāng)?shù)臉?biāo)簽，使頁面有良好的結(jié)構(gòu)，頁面元素有含義，能夠讓人和搜索引擎都容易理解。
SEO是指在了解搜索引擎自然排名機制的基礎(chǔ)之上，對網(wǎng)站進(jìn)行內(nèi)部及外部的調(diào)整優(yōu)化，改進(jìn)網(wǎng)站在搜索引擎中關(guān)鍵詞的自然排名，獲得更多的展現(xiàn)量，吸引更多目標(biāo)客戶點擊訪問網(wǎng)站，從而達(dá)到互聯(lián)網(wǎng)營銷及品牌建設(shè)的目標(biāo)。
搜索引擎通過爬蟲技術(shù)獲取的頁面就是由一堆 html 標(biāo)簽組成的代碼，人可以通過可視化的方式來判斷頁面上哪些內(nèi)容是重點，而機器做不到。
但搜索引擎會根據(jù)標(biāo)簽的含義來判斷內(nèi)容的權(quán)重，因此，在合適的位置使用恰當(dāng)?shù)臉?biāo)簽，使整個頁面的語義明確，結(jié)構(gòu)清晰，搜索引擎才能正確識別頁面中的重要內(nèi)容，并予以較高的權(quán)值。比如h1~h6這幾個標(biāo)簽在SEO中的權(quán)值非常高，用它們作頁面的標(biāo)題就是一個簡單的SEO優(yōu)化。
年以來，隨著疫情方面的數(shù)據(jù)逐漸增多，一些互聯(lián)網(wǎng)公司也紛紛發(fā)布一些可視化的數(shù)據(jù)產(chǎn)品服務(wù)，讓用戶可以實時并直觀了解最新情況，可謂一個便民利器。而本文，則通過丁香醫(yī)生、以及騰訊新聞推出的“疫情實時動態(tài)”可視化服務(wù)，總結(jié)分享其中運用到的一些常見的數(shù)據(jù)可視化經(jīng)驗。
閱讀指南：
（1）受眾人群：初級產(chǎn)品經(jīng)理
（2）閱讀收獲
首先，需要先簡單澄清下數(shù)據(jù)可視化的基本概念。數(shù)據(jù)可視化，實質(zhì)上是把一些概要信息（數(shù)據(jù)、關(guān)鍵內(nèi)容），并結(jié)合動靜態(tài)的圖像視頻等形式進(jìn)行展示，從而清晰傳遞核心信息。較為注重視覺層面的觸達(dá)。
所以我們需要在數(shù)據(jù)之中挖掘一些重要的價值信息，并以一個可觀的方式呈現(xiàn)。而“重要”的定義是十分明顯的，核心數(shù)據(jù)、用戶感興趣、有決策意義，都可稱之為重要。
根據(jù)馬斯洛五層次需求理論，那么數(shù)據(jù)可視化在其中屬于什么層次的需求？
受疫情影響，生命安全成了最重要的社會需求。那么滿足大眾對這方面的廣泛需求，推出這樣的數(shù)據(jù)可視化產(chǎn)品是十分有必要，滿足用戶對疫情情況、資訊信息、醫(yī)療信息等方面的獲取，從而保障自己基本的需求。
（1）脈絡(luò)
初始，丁香醫(yī)生率先推出一個H5的可視化頁面，匯總披露病例數(shù)據(jù)。隨后，一些大廠也開始陸續(xù)推出，包括頭條、騰訊等等。
而為什么大家都紛紛推出這樣的數(shù)據(jù)服務(wù)，從戰(zhàn)略層來說：一是做好企業(yè)責(zé)任，滿足用戶的知情需求；其二是滿足自己的平臺用戶，并吸引流量，這都是拉新、促活的寶貴方式。
而展示的信息，主要包括每日的新增、累計病例數(shù)，各地區(qū)的病例分布，以及疫情新聞、醫(yī)學(xué)知識等方面的內(nèi)容。
（2）價值
而接下來，也將依據(jù)用戶體驗五要素中的范圍層、框架層、表現(xiàn)層，分別對這個疫情數(shù)據(jù)可視化的產(chǎn)品服務(wù)進(jìn)行分析。
范圍層的定義是決定這樣的產(chǎn)品服務(wù)需要提供什么范圍內(nèi)的功能服務(wù)，什么是不做的。以及要做的數(shù)據(jù)指標(biāo)，哪些是關(guān)鍵的，哪些是次要的。所以我們可以羅列一下這樣數(shù)據(jù)可視化產(chǎn)品，基于用戶的需求是需要準(zhǔn)備什么樣的數(shù)據(jù)指標(biāo)。
上圖摘自國家衛(wèi)健委某日的全日數(shù)據(jù)，在制作可視化的時候，需要考慮數(shù)據(jù)源的出處以及能提供什么樣的指標(biāo)及口徑。
從中可以看出，大致可以劃分兩類關(guān)鍵數(shù)據(jù)：一個是病例的數(shù)據(jù)，一個是輔助性的數(shù)據(jù)。我們需要從中挑出其適合展示同時也是用戶需要關(guān)心的數(shù)據(jù)。
通常做這種可視化產(chǎn)品，總結(jié)性的數(shù)據(jù)是十分關(guān)鍵的。而基于用戶的關(guān)注點，每日新增、累計，就是其中的關(guān)鍵。
另外，基于“時間”和“地區(qū)”，代表了數(shù)據(jù)的“屬性”。而屬性則反應(yīng)了這個數(shù)據(jù)可以以什么樣的特點進(jìn)行展現(xiàn)。而“時間”和“地區(qū)”是，最適合以數(shù)據(jù)趨勢和數(shù)據(jù)分布的兩種主要數(shù)據(jù)可視化表達(dá)形式。
從下表可以看出，3家平臺的數(shù)據(jù)指標(biāo)在展示上是比較一致的，核心指標(biāo)都一一羅列展示。
其中在時間的“小時”級別，以及“解除醫(yī)學(xué)觀察”等細(xì)分指標(biāo)都不做展示，我認(rèn)為主要出于以下目的：
框架層的定義是指根據(jù)要做的功能范圍，應(yīng)該確定如何正確布局和設(shè)計，可以簡單理解為PPT的排版一樣，以什么樣的方式來排列展現(xiàn)這些元素。
首先，我們需要先看看上文提及到的幾類數(shù)據(jù)指標(biāo)，重新分類一下,并標(biāo)記相應(yīng)的優(yōu)先級。
顯然按照合理的布局應(yīng)該是：
大致的布局是已經(jīng)清晰了，那么接下來就需要基于數(shù)據(jù)類型采用合理的可視化展示形式。
前面也提過，由于是時間和地區(qū)下的各類數(shù)據(jù)，基于這樣的屬性，是可以做趨勢、地域、列表等分布的展示方式。支持趨勢的圖形則主要為折線、柱狀圖，支持地域分布類型則為地圖，而列表則為常規(guī)的類報表方式等。
其中，由于時間跨度較長和地區(qū)明細(xì)較多，如果使用柱狀圖，則會顯得橫軸較長，所以在有限的手機屏幕尺寸下，是不適宜展示的。
（Echarts部分地圖特性截圖）
所以在這里，更傾向于采用粗一些的2D省級行政地圖形式，開發(fā)周期短，且滿足最基本需求。
（1）匯總數(shù)據(jù)
相同點：
差異點：
評價：正常應(yīng)遵循“標(biāo)題+具體數(shù)值+較昨日變化”這樣的排列比較合適，上下順序先從標(biāo)題了解該指標(biāo)的含義，居中放大具體數(shù)值，突出關(guān)鍵信息，其次顯示較昨日變化對比，感知變化情況。
（2）各指標(biāo)趨勢
相同點：
差異點：
（3）國內(nèi)各省市分布
相同點：統(tǒng)一以常規(guī)列表分布展示國內(nèi)各省市的疫情數(shù)據(jù)情況，并集中以地區(qū)、確診、死亡、治愈等字段。
差異點：
評價：
（4）海外各國分布
展示方式如國內(nèi)疫情一致，這里不多說。而唯一不同的是，丁香醫(yī)生在全球各國的基礎(chǔ)做了“洲”單位的分類。這樣的好處是，分類顯得更有層次性，了解某個范圍內(nèi)的地區(qū)更有顯著性。
表現(xiàn)層所關(guān)注的，是頁面各個元素組件的形狀、色彩和大小比例搭配。同時數(shù)據(jù)可視化十分重視圖形色彩的表達(dá)，一個好的視覺設(shè)計，能夠為數(shù)據(jù)的信息傳遞起到十分重要的作用。
從上圖可以看出，3家平臺都展示了4個關(guān)鍵指標(biāo)“確診”、“疑似”、“死亡”和“治愈”，以及在色彩選擇上，盡管有具體色值的差別，但是理念是都較為接近的。
地圖分布通常是以顏色深淺代表數(shù)據(jù)的“密集程度”，那么就要確定2個關(guān)鍵的地方，1個是色系，另外1個是合理的刻度比例。前者根據(jù)數(shù)據(jù)內(nèi)涵確定合適的色系進(jìn)行表達(dá)，后者是做色系的層次區(qū)分。
以上就是此次疫情數(shù)據(jù)下，在可視化應(yīng)用上的一些體驗總結(jié)，3家都遵循了一些基本原則，同時也有各自的一些風(fēng)格。而數(shù)據(jù)可視化的應(yīng)用需要兼顧不同的因素，達(dá)到最佳效果。
一個理想的可視化設(shè)計流程，需要經(jīng)歷“數(shù)據(jù)指標(biāo)的范圍篩選、頁面的布局抉擇、可視化的視覺設(shè)計“等關(guān)鍵步驟。
3家平臺地址：
丁香醫(yī)生：https://ncov.dxy.cn/ncovh5/view/pneumonia
：https://i.snssdk.com/ugc/hotboard_fe/hot_list/template/hot_list/forum_tab.html?activeWidget=1&city_code=440300&city_name=%E6%B7%B1%E5%9C%B3&tt_from=weixin&utm_source=weixin&utm_medium=toutiao_ios&utm_campaign=client_share&wxshare_count=1
騰訊新聞：https://news.qq.com/zt2020/page/feiyan.htm?devid=EB886059-83CA-4F1F-AB3A-B64FCD87D7F7&qimei=eb886059-83ca-4f1f-ab3a-b64fcd87d7f7
作者：A.D，數(shù)據(jù)產(chǎn)品一枚；公眾號：吾某
本文由 @A.D. 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議。
TML是一種用來描述網(wǎng)頁的標(biāo)記性語言。學(xué)習(xí)HTML可能并不難，主要是要記一些HTML標(biāo)簽和標(biāo)簽代表的含義。下面PHP程序員雷雪松根據(jù)使用的情況，整理出平時常用的HTML標(biāo)簽。
HTML基礎(chǔ)之HTML常用標(biāo)簽-PHP程序員雷雪松的博客
<!--<!DOCTYPE> 是HTML5聲明，<!DOCTYPE> 必須是 HTML 文檔的第一行，位于 <html> 標(biāo)簽之前。<!DOCTYPE>是指示 web 瀏覽器關(guān)于頁面使用哪個 HTML 版本進(jìn)行編寫的指令。-->
<!DOCTYPE html>
<html>
<!-- head標(biāo)簽是所有頭部元素的容器。head標(biāo)簽內(nèi)的元素可包含腳本、樣式表和提供頁面的元信息等等。以下標(biāo)簽都可以添加到 head 部分：title、base、link、meta、script 以及style。頭部的內(nèi)容不會顯示在瀏覽器的。 -->
<head>
<!-- 設(shè)置字符集，如果字符集不對，可能導(dǎo)致亂碼。一般建議utf-8國際編碼 -->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312或utf-8或gbk" />
<!-- SEO相關(guān)標(biāo)簽，title定義文檔的標(biāo)題,百度建議一般不要超過32位,meta定義頁面關(guān)鍵詞和頁面的描述-->
<title>網(wǎng)頁標(biāo)題</title>
<meta name="keywords" content="PHP程序員,技術(shù)博客,個人博客,雷雪松" />
<meta name="description" content="PHP程序員，雷雪松（Raykaeso）的博客是一個優(yōu)秀的個人技術(shù)博客。PHP程序員雷雪松的博客記錄了Linux學(xué)習(xí)，PHP開發(fā)與編程，Web前端開發(fā)，MySQL學(xué)習(xí)和教程，NoSQL數(shù)據(jù)庫教程以及個人的人生經(jīng)歷和觀點。" />
<link rel="stylesheet" type="text/css" href="main.css" />
<script type="text/javascript" src="main.js"></script>
</head>
<!-- 正文部分，所有在瀏覽器上可見的內(nèi)容必須寫在body標(biāo)簽內(nèi)部 -->
<body>
</body>
</html>
a、布局標(biāo)簽
div標(biāo)簽定義文檔中的分區(qū)或節(jié)（division/section），可以把文檔分割為獨立的、不同的部分，主要用于布局。
aside標(biāo)簽的內(nèi)容可用作文章的側(cè)欄，<span style="color: #ff0000;">html5新增標(biāo)簽</span>。
header標(biāo)簽定義頁面的頭部（介紹信息），<span style="color: #ff0000;">html5新增標(biāo)簽</span>。
section標(biāo)簽定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁眉、頁腳或文檔中的其他部分，<span style="color: #ff0000;">html5新增標(biāo)簽</span>。
footer 標(biāo)簽定義文檔或節(jié)的頁腳，通常包含文檔的作者、版權(quán)信息、使用條款鏈接、聯(lián)系信息等等，<span style="color: #ff0000;">html5新增標(biāo)簽</span>。
article標(biāo)簽規(guī)定文章獨立的其他內(nèi)容，比如：標(biāo)題、內(nèi)容、評論，<span style="color: #ff0000;">html5新增標(biāo)簽</span>。
b、文本標(biāo)簽
h1-h6標(biāo)簽可定義標(biāo)題
p標(biāo)簽定義段落
b/strong標(biāo)簽加粗
em標(biāo)簽來表示強調(diào)的文本，斜體
strong標(biāo)簽表示重要文本
u標(biāo)簽下劃線
s標(biāo)簽刪除線
br標(biāo)簽表示回車換行
hr標(biāo)簽表示水平線
span標(biāo)簽被用來組合文檔中的行內(nèi)元素。
blockquote標(biāo)簽表示塊引用
pre標(biāo)簽可定義預(yù)格式化的文本，保持原有格式的一種標(biāo)簽。
sub標(biāo)簽下標(biāo)，
sup>標(biāo)簽上標(biāo)
表示一個空格
©表示版權(quán)符
<表示<
>表示>
c、a標(biāo)簽定義超鏈接，指定頁面間的跳轉(zhuǎn)。鏈接可以指向外部鏈接或者頁面內(nèi)部id錨點，可以在當(dāng)前頁面打開，新開窗口。
<a href="指向的鏈接地址或者網(wǎng)址#ID名" target="_blank|_self|_top|_parent">百度</a>
d、多媒體標(biāo)簽
img標(biāo)簽主要在網(wǎng)頁中插入圖像，可以定義圖片替換文本、顯示寬度和高度、是否帶邊框，建議等比例設(shè)置，否則圖像會變形。
<img src="圖片地址" alt="替換文本，圖片打不開的時候顯示" width="圖片寬度" height="高度" border="0" />
audio標(biāo)簽定義聲音，比如音樂或其他音頻流。<span style="color: #ff0000;">html5新增標(biāo)簽</span>。
<audio src="someaudio.wav">您的瀏覽器不支持 audio 標(biāo)簽。</audio>
video標(biāo)簽定義視頻，比如電影片段或其他視頻流。<span style="color: #ff0000;">html5新增標(biāo)簽</span>。
<video src="movie.ogg" controls="controls">您的瀏覽器不支持 video 標(biāo)簽。</video>
e、序列化標(biāo)簽
ul和li無序列表標(biāo)簽
<ul>
<li>HTML</li>
<li>JS</li>
<li>PHP</li>
</ul>
ol和li有序列表標(biāo)簽，可以使用type屬性規(guī)定有序列表符號的類型。1 按數(shù)字有序排列，為默認(rèn)值，（1、2、3、4）；a 按小寫字母有序排列，（a、b、c、d）；A 按字母大寫有序排列，（A、B、C、D）。i 按小寫羅馬字母有序，（i, ii, iii, iv）；I 按小寫羅馬字母有序，（I, II, III, IV）。
<ol>
<li>HTML</li>
<li>JS</li>
<li>PHP</li>
</ol>
dl標(biāo)簽定義了定義列表（definition list），dl標(biāo)簽用于結(jié)合 dt（定義列表中的項目）和 dd（描述列表中的項目）。
<dl>
<dt>計算機</dt>
<dd>用來計算的儀器 ... ...</dd>
</dl>
f、表格標(biāo)簽
table標(biāo)簽和tr標(biāo)簽，th標(biāo)簽和td標(biāo)簽，合并單元格。
<table width="100%" height="193" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000" bgcolor="#000000" background="">
<tr>
<th>標(biāo)題</th>
<th>標(biāo)題</th>
</tr>
<tr>
<!-- 合并橫向單元格 -->
<td colspan="2" nowrap="nowrap">&nbsp;</td>
</tr>
<tr>
<td></td>
<!-- 合并縱向單元格 -->
<td rowspan="2"> </td>
</tr>
<tr>
<td height="16"> </td>
</tr>
</table>
g、表單標(biāo)簽
form標(biāo)簽定義提交方式、提交地址、表單字符集以及如何對其進(jìn)行編碼，需要提交的表單一定要放在form標(biāo)簽內(nèi)。
<form id="form1" name="form1" method="post|get" enctype="multipart/form-data" action="提交到的地址"></form>
input標(biāo)簽用于搜集用戶信息
<input name="userName" type="text" maxlength="5" size="100" value="asdfasdfasfd" />
密碼，輸入的字符會被掩碼（顯示為星號或原點）
<input name="pwd" type="password" maxlength="5" size="100" value="" />
文件類型的表單，上傳文件時，form表單一定要設(shè)置為enctype="multipart/form-data"
<input type="file" name="file" />
隱藏表單
<input type="hidden" name="country" value="China" />
提交
<input type="submit" name="Submit" value="提交" disabled="disabled" />
重置
<input type="reset" name="Submit2" value="重置" />
radio單選
<input name="sex" type="radio" value="1" />男
<input name="sex" type="radio" value="2" checked="checked" />女
checkbox多選
<input name="skill" type="checkbox" value="1" checked="checked" />PHP
<input name="skill" type="checkbox" value="2" />前端
<input name="skill" type="checkbox" value="2" />數(shù)據(jù)庫
<span style="color: #ff0000;">注：checked="checked"可以簡寫成checked</span>
label標(biāo)簽為input元素定義標(biāo)注，如果您點擊label元素文本，就會觸發(fā)此input控件。
textarea標(biāo)簽，設(shè)置文本區(qū)內(nèi)的可見行數(shù)和寬度
<textarea name="content" cols="30" rows="10">大段文本輸入框</textarea>
button標(biāo)簽定義一個按鈕
提交按鈕
<button type="submit" value="提交">提交</button>
重置按鈕
<button type="reset" value="重置">重置</button>
select標(biāo)簽和option標(biāo)簽下拉列表
單選菜單列表框
<select name="user">
<option value="1">ray</option>
<option value="2" selected="selected">raykaeso</option>
</select>
多選列表下拉框，shift加鼠標(biāo)單擊，可以連續(xù)選擇多個選擇，CTRL+鼠標(biāo)點擊，可以點擊多個。
<select name="user" size="10" multiple="multiple">
<option value="1">雷雪松</option>
<option value="2" selected="selected">ray</option>
<option value="3">raykaeso</option>
</select>
注:selected="selected"可簡寫成selected，表示選中
a、HTML標(biāo)簽和屬性是不區(qū)分大小寫的，建議HTML標(biāo)簽和屬性都小寫，屬性值必須用雙引號包圍。
b、HTML標(biāo)簽都是以開始標(biāo)簽起始，以結(jié)束標(biāo)簽終止。大部分HTML標(biāo)簽都是成對出現(xiàn)的，稱為雙標(biāo)簽，比如：p標(biāo)簽、div標(biāo)簽，也有的HTML標(biāo)簽在開始標(biāo)簽中結(jié)束的標(biāo)簽，稱為單標(biāo)簽，比如：hr標(biāo)簽、br標(biāo)簽。大多數(shù) HTML 元素可擁有屬性，文本內(nèi)容都是寫在開始標(biāo)簽與結(jié)束標(biāo)簽之間。
c、HTML標(biāo)簽之間盡量縮進(jìn)與換行，每行代碼不要過長，方便閱讀和維護(hù)。
d、HTML標(biāo)簽使用必須符合標(biāo)簽嵌套規(guī)則。禁止a標(biāo)簽嵌套a標(biāo)簽，p標(biāo)簽嵌套div標(biāo)簽。
e、建議不使用HTML已經(jīng)廢棄的或者不贊成使用的標(biāo)簽，少使用table布局、iframe框架嵌套以及flash播放器。
來源：PHP程序員雷雪松的博客 -HTML基礎(chǔ)之HTML常用標(biāo)簽（http://www.leixuesong.cn/2045）
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
