《終端數(shù)據(jù)可視化》課件-3 Web基礎(chǔ)

單元3Web基礎(chǔ)大數(shù)據(jù)可視化應(yīng)用開(kāi)發(fā)項(xiàng)目式教程單元描述1.技術(shù)要求：（1）利用DIV+CSS搭建網(wǎng)頁(yè)框架；（2）利用CSS美化網(wǎng)頁(yè)風(fēng)格；（3）利用JavaScript呈現(xiàn)表格、圖表等內(nèi)容。2.能力要求：（1）熟練掌握HTML+CSS進(jìn)行頁(yè)面的布局；（2）熟練掌握CSS對(duì)頁(yè)面的美化，使頁(yè)面具有良好的兼容性；（3）熟悉JavaScript的基本使用方法，如在網(wǎng)頁(yè)中調(diào)用JavaScript腳本等。3.素養(yǎng)要求：（1）具有良好的與人溝通的能力和良好的團(tuán)隊(duì)合作精神；（2）具備較強(qiáng)的網(wǎng)頁(yè)設(shè)計(jì)創(chuàng)意思維、藝術(shù)設(shè)計(jì)素質(zhì)和創(chuàng)新思想；（3）具有一定的科學(xué)思維方式和分析問(wèn)題、解決問(wèn)題的能力。新能源汽車(chē)大數(shù)據(jù)分析系統(tǒng)是企業(yè)用于對(duì)新能源汽車(chē)進(jìn)行監(jiān)控管理的系統(tǒng)，主要包括研發(fā)與維修、車(chē)輛銷(xiāo)售和車(chē)隊(duì)管理三大功能模塊。本項(xiàng)目要實(shí)現(xiàn)“研發(fā)與維修”模塊中單車(chē)監(jiān)控頁(yè)面的設(shè)計(jì)。該頁(yè)面用于監(jiān)測(cè)車(chē)輛的實(shí)時(shí)運(yùn)行數(shù)據(jù)，將車(chē)輛數(shù)據(jù)、車(chē)輛速度、總電流等數(shù)據(jù)用表格或圖表的方式在頁(yè)面上呈現(xiàn)，并能實(shí)現(xiàn)數(shù)據(jù)的實(shí)時(shí)更新，頁(yè)面的最終設(shè)計(jì)效果圖如圖3-2所示。1任務(wù)名稱(chēng)任務(wù)目標(biāo)安排課時(shí)任務(wù)3.1搭建開(kāi)發(fā)環(huán)境掌握VSCode的搭建和基本的使用方法1任務(wù)3.2創(chuàng)建車(chē)輛實(shí)時(shí)監(jiān)控頁(yè)面利用HTML+CSS搭建網(wǎng)頁(yè)3任務(wù)3.3呈現(xiàn)車(chē)輛運(yùn)行狀態(tài)用表格、圖表呈現(xiàn)數(shù)據(jù)2總計(jì)6任務(wù)分解2知識(shí)要點(diǎn)前端開(kāi)發(fā)常用工具HTML+CSS基礎(chǔ)網(wǎng)頁(yè)中的JavaScript1.前端開(kāi)發(fā)常用工具VSCode是基于Electron開(kāi)發(fā)、Typescript編寫(xiě)、底層Node.js打造的一個(gè)編輯器，不是IDE，被稱(chēng)為“披著IDE外衣的編輯器”，是微軟提供的一款輕量級(jí)但功能十分強(qiáng)大的編輯器，內(nèi)置了對(duì)JavaScript、TypeScript和Node.js語(yǔ)言的支持，并且為其他語(yǔ)言如C++、C#、Python、PHP等提供了豐富的擴(kuò)展庫(kù)。本項(xiàng)目的開(kāi)發(fā)采用的就是這個(gè)開(kāi)發(fā)工具。（1）VSCode圖3-9VSCode官網(wǎng)首頁(yè)1.前端開(kāi)發(fā)常用工具WebStorm是Jetbrains公司旗下一款JavaScript開(kāi)發(fā)工具。目前已經(jīng)被廣大中國(guó)JS開(kāi)發(fā)者譽(yù)為Web前端開(kāi)發(fā)神器、最強(qiáng)大的HTML5編輯器、最智能的JavaScriptIDE等。與IntelliJIDEA同源，繼承了IntelliJIDEA強(qiáng)大的JS部分的功能。（2）WebStorm圖3-3WebStorm官方下載頁(yè)面1.前端開(kāi)發(fā)常用工具SublimeText是一個(gè)代碼編輯器，也是文本編輯器。它具有漂亮的用戶界面和強(qiáng)大的功能，例如，代碼縮略圖、Python的插件、代碼段等。還可自定義鍵綁定、菜單和工具欄。其的主要功能包括拼寫(xiě)檢查、書(shū)簽、完整的PythonAPI、Goto功能、即時(shí)項(xiàng)目切換、多選擇、多窗口等等。SublimeText是一個(gè)跨平臺(tái)的編輯器，同時(shí)支持Windows、Linux、MacOSX等操作系統(tǒng)。（3）SublimeText圖3-4SublimeText官網(wǎng)2.HTML+CSS基礎(chǔ)HTML是指超文本標(biāo)記語(yǔ)言，英文為HyperTextMarkupLanguage。如同名字所表示的含義，HTML并不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言，它在頁(yè)面中的作用是搭建出頁(yè)面的樹(shù)狀結(jié)構(gòu)，在該結(jié)構(gòu)上的每一個(gè)節(jié)點(diǎn)就是一個(gè)標(biāo)記。HTML元素的基本組成包括：開(kāi)始標(biāo)簽（Openingtag）、結(jié)束標(biāo)簽（Closingtag）和內(nèi)容（Content），內(nèi)容可以是空的。這三者結(jié)合在一起組成了一個(gè)完整的標(biāo)簽，或被稱(chēng)為元素（Element）（1）HTML基礎(chǔ)圖3-5HTML元素基本組成由于<div>元素是網(wǎng)頁(yè)中最常用的一個(gè)元素，CSS能夠輕松的對(duì)其進(jìn)行定位，因此目前DIV+CSS技術(shù)是最常用的網(wǎng)頁(yè)布局技術(shù)，在實(shí)時(shí)監(jiān)測(cè)頁(yè)面中就采用DIV+CSS實(shí)現(xiàn)?？梢园?lt;div>元素看成一個(gè)矩形區(qū)域的容器，在這個(gè)容器內(nèi)可以存放其它HTML元素，也包括<div>元素，即<div>元素是可以嵌套的。借助于CSS樣式，能夠把<div>元素放置在網(wǎng)頁(yè)的任何位置，實(shí)現(xiàn)網(wǎng)頁(yè)的精致排版。（2）頁(yè)面布局2.HTML+CSS基礎(chǔ)圖3-6用<div>元素實(shí)現(xiàn)多列布局CSS指層疊樣式表，英文為CascadingStyleSheets，主要是為了解決內(nèi)容與表現(xiàn)分離的問(wèn)題，從而提高工作效率。CSS格式設(shè)置規(guī)則由兩部分組成：選擇器和聲明。聲明由屬性（如text-decoration）和值（如none）兩部分組成。根據(jù)運(yùn)用樣式表的范圍是局限在當(dāng)前網(wǎng)頁(yè)文件內(nèi)部還是其他網(wǎng)頁(yè)文件，可以分為內(nèi)聯(lián)樣式、內(nèi)部樣式表和外部樣式表。（3）CSS基礎(chǔ)2.HTML+CSS基礎(chǔ)圖3-7CSS格式CSS中的選擇器通常是需要改變樣式的HTML元素，選擇器可以分為id選擇器、類(lèi)選擇器、屬性選擇器等。靈活的運(yùn)用選擇器可以精簡(jiǎn)樣式表的代碼。元素選擇器CSS的元素選擇器是最常見(jiàn)的選擇器，又稱(chēng)之為類(lèi)型選擇器，它匹配文檔語(yǔ)言元素類(lèi)型的名稱(chēng)，如p、a、h1，甚至HTML本身都是。（4）CSS選擇器2.HTML+CSS基礎(chǔ)body{min-width:1200px;}a{text-decoration:none;}id選擇器id選擇器可以為有id屬性的HTML元素指定特定的樣式，CSS中id選擇器以“#”來(lái)定義。注意：①id屬性的值是唯一的，在一個(gè)HTML文檔中只能出現(xiàn)一次。②id屬性不要以數(shù)字開(kāi)頭，數(shù)字開(kāi)頭的ID在Mozilla/Firefox瀏覽器中不起作用。（4）CSS選擇器2.HTML+CSS基礎(chǔ)#red{color:red;}<divid=”red”>

<p>段落1</p>

<p>段落2</p>

</div>類(lèi)選擇器與多類(lèi)選擇器類(lèi)選擇器也可以叫做class選擇器，用于描述一組元素的樣式，class選擇器有別于id選擇器，可以在多個(gè)元素中使用。在CSS中，類(lèi)選擇器以一個(gè)點(diǎn)“.”號(hào)開(kāi)始，點(diǎn)號(hào)后是類(lèi)選擇器的名稱(chēng)；在HTML中則是通過(guò)class屬性調(diào)用類(lèi)選擇器名來(lái)表示該元素應(yīng)用了此樣式。在HTML中，一個(gè)class值中可能包含一個(gè)詞列表（即多個(gè)樣式），各個(gè)詞之間用空格分隔。通過(guò)詞列表可以將不同的CSS樣式效果同時(shí)運(yùn)用到一個(gè)元素中，而且可以重復(fù)運(yùn)用，減少了重復(fù)代碼的編寫(xiě)，提高了編寫(xiě)代碼的效率。（4）CSS選擇器2.HTML+CSS基礎(chǔ).fl{float:left;}<divclass="flsearch-btn">

查詢</div>后代選擇器如下的.datav-item.datav-title這種選擇器的寫(xiě)法稱(chēng)為后代選擇器或包含選擇器，用于選取某元素的后代元素。通過(guò)定義后代選擇器來(lái)創(chuàng)建一些規(guī)則，使這些規(guī)則在某些文檔結(jié)構(gòu)中起作用，而在另外一些結(jié)構(gòu)中不起作用。（4）CSS選擇器2.HTML+CSS基礎(chǔ).datav-item.datav-title{border-bottom:1pxsolid#687997;padding:5px20px;}錨偽類(lèi)在支持CSS的瀏覽器中，鏈接包括活動(dòng)狀態(tài)、已被訪問(wèn)狀態(tài)、未被訪問(wèn)狀態(tài)和鼠標(biāo)懸停狀態(tài)四種狀態(tài)，這四種狀態(tài)都可以用不同的方式顯示即錨偽類(lèi)。注意：①在CSS定義中，a:hover必須被置于a:link和a:visited之后，才是有效的。②在CSS定義中，a:active必須被置于a:hover之后，才是有效的。③偽類(lèi)名稱(chēng)對(duì)大小寫(xiě)不敏感。④當(dāng)用戶只寫(xiě)一個(gè)a元素的樣式時(shí)，超鏈接的4種狀態(tài)樣式就統(tǒng)一了。（4）CSS選擇器2.HTML+CSS基礎(chǔ)a:link{color:#FF0000} /*未訪問(wèn)的鏈接*/a:visited{color:#00FF00} /*已訪問(wèn)的鏈接*/a:hover{color:#FF00FF} /*鼠標(biāo)移動(dòng)到鏈接上*/a:active{color:#0000FF} /*選定的鏈接*/選擇器分組在CSS中有時(shí)會(huì)遇到如下情況，有多個(gè)元素需要設(shè)同一個(gè)樣式效果，如在本頁(yè)面的CSS代碼中要求將body、div、span、a、img、input、p這些元素的外邊距和內(nèi)邊距均為0，可以如左的寫(xiě)法。這樣寫(xiě)后會(huì)發(fā)現(xiàn)，這些樣式除了選擇器不同，其花括號(hào)中的內(nèi)容都是相同的，如果采用選擇器分組的方法寫(xiě)就如右。顯然這種將多個(gè)選擇器放在規(guī)則左邊，然后用逗號(hào)分隔，并在右邊則定義樣式方法更為簡(jiǎn)便。（4）CSS選擇器2.HTML+CSS基礎(chǔ)body{margin:0;padding:0;}div{margin:0;padding:0;}…body,div,span,a,img,input,p{margin:0;padding:0;}JavaScript通常內(nèi)嵌在HTML頁(yè)面中運(yùn)行，與頁(yè)面同時(shí)被瀏覽器加載和運(yùn)行，在HTML頁(yè)面中使用<script>……</script>標(biāo)簽引入JavaScript腳本。但當(dāng)JavaScript的代碼太多時(shí)，不但增加了網(wǎng)頁(yè)文件的容量也增加了閱讀網(wǎng)頁(yè)代碼的難度。這里可以將代碼寫(xiě)在以.js命名的腳本文件中，然后再將其引入網(wǎng)頁(yè)文件中。（1）HTML頁(yè)面引入JavaScript3.網(wǎng)頁(yè)中的JavaScript<scripttype="text/javascript"src="JS腳本文件路徑"></script>函數(shù)是JavaScript中最常用功能之一，它可以避免相同功能代碼的重復(fù)編寫(xiě)，將程序中的代碼模塊化，提高程序的可讀性，減少開(kāi)發(fā)者的工作量，便于后期的維護(hù)。函數(shù)用于封裝一段完成特定功能的代碼?？芍貜?fù)使用的且擁有名稱(chēng)。JavaScript有3種聲明函數(shù)的方法，其中function命令和函數(shù)表達(dá)式這兩種方法最為常用。（2）JavaScript函數(shù)3.網(wǎng)頁(yè)中的JavaScriptfunctionprint(s){console.log(s);}window.onload=function(){showData(jsonArr);};文檔樹(shù)（DocumentObjectModel）是HTML頁(yè)面的層級(jí)結(jié)構(gòu)，它由元素、屬性和文本組成，它們都是一個(gè)節(jié)點(diǎn)（Node），就像公司的組織結(jié)構(gòu)圖一樣。（3）DOM樹(shù)3.網(wǎng)頁(yè)中的JavaScript圖3-8DOM樹(shù)任務(wù)3.1搭建開(kāi)發(fā)環(huán)境工欲善其事，必先利其器。本小節(jié)要完成的任務(wù)是為新能源汽車(chē)大數(shù)據(jù)分析系統(tǒng)中Web頁(yè)面的制作搭建開(kāi)發(fā)環(huán)境。1.任務(wù)描述在本項(xiàng)目的開(kāi)發(fā)中，采用VSCode工具進(jìn)行網(wǎng)頁(yè)的搭建。任務(wù)實(shí)施將先從VSCode的下載與安裝，認(rèn)識(shí)VSCode界面以及運(yùn)用VSCode創(chuàng)建網(wǎng)頁(yè)文件來(lái)熟悉該開(kāi)發(fā)工具。2.任務(wù)分析任務(wù)3.1搭建開(kāi)發(fā)環(huán)境（1）VSCode下載與安裝code.visualstudio（官網(wǎng)網(wǎng)址），選擇合適的版本進(jìn)行下載。由于本項(xiàng)目是在Windows環(huán)境下開(kāi)發(fā)且操作系統(tǒng)為64位，此處選用Windows下的64位System版。3.任務(wù)實(shí)施任務(wù)3.1搭建開(kāi)發(fā)環(huán)境圖3-9VSCode官網(wǎng)首頁(yè)（2）VSCode界面介紹VSCode安裝好后，運(yùn)行出現(xiàn)如圖3-11所示的工具界面，其左側(cè)是用于展示要編輯的所有文件和文件夾的文件管理器，包括資源管理器、搜索、GIT、調(diào)試和擴(kuò)展五大欄目，右側(cè)是打開(kāi)文件的編輯區(qū)域，最多可同時(shí)打開(kāi)三個(gè)編輯區(qū)域到側(cè)邊。底欄是GitBranch、error&warning、編碼格式等。3.任務(wù)實(shí)施圖3-11VSCode界面任務(wù)3.1搭建開(kāi)發(fā)環(huán)境任務(wù)3.2創(chuàng)建單車(chē)監(jiān)控頁(yè)面制作車(chē)輛實(shí)時(shí)監(jiān)控頁(yè)面，要求界面簡(jiǎn)潔、重在突出數(shù)據(jù)的呈現(xiàn)，在色彩上以深藍(lán)色為主色調(diào)，配合淺藍(lán)、白色以及不同明暗度的粉色、綠色、黃色等亮麗的色彩給人一種未來(lái)科技感。頁(yè)面上除了最基本的導(dǎo)航和Logo外，還應(yīng)包括查詢區(qū)和數(shù)據(jù)呈現(xiàn)區(qū)。1.任務(wù)描述圖3-2新能源汽車(chē)單車(chē)監(jiān)控頁(yè)面采用目前主流的HTML+CSS技術(shù)實(shí)現(xiàn)新能源汽車(chē)實(shí)時(shí)監(jiān)測(cè)頁(yè)面的制作，利用HTML實(shí)現(xiàn)頁(yè)面的整體布局和頁(yè)面的內(nèi)容，利用CSS美化頁(yè)面使其呈現(xiàn)最終設(shè)計(jì)稿效果。實(shí)現(xiàn)過(guò)程將分為3步：第1步，利用HTML搭建頁(yè)面框架；第2步，在搭建的框架中填充頁(yè)面的內(nèi)容；第3步，利用CSS樣式化頁(yè)面，使其呈現(xiàn)設(shè)計(jì)稿效果。2.任務(wù)分析任務(wù)3.2創(chuàng)建單車(chē)監(jiān)控頁(yè)面（1）實(shí)現(xiàn)頁(yè)面布局在前端開(kāi)發(fā)中頁(yè)面布局總是最開(kāi)始的工作，就像蓋樓時(shí)，先搭框架，然后再填磚，前端也是一樣的，先要做好頁(yè)面的布局工作。在本系統(tǒng)的實(shí)時(shí)監(jiān)測(cè)頁(yè)面中采用的就是單列布局，這是最簡(jiǎn)潔的一種，整個(gè)頁(yè)面給人一種清爽干凈的感覺(jué)。3.任務(wù)實(shí)施任務(wù)3.2創(chuàng)建單車(chē)監(jiān)控頁(yè)面圖3-17實(shí)時(shí)監(jiān)測(cè)頁(yè)面的布局結(jié)構(gòu)圖（2）顯示內(nèi)容當(dāng)完成第一步后發(fā)現(xiàn)頁(yè)面呈現(xiàn)效果與預(yù)期相差很大，那是因?yàn)楫?dāng)前只是對(duì)整個(gè)實(shí)時(shí)監(jiān)測(cè)頁(yè)面的結(jié)構(gòu)做了總體的規(guī)劃，缺少具體的內(nèi)容，下一步就要開(kāi)始充實(shí)頁(yè)面的內(nèi)容了。3.任務(wù)實(shí)施任務(wù)3.2創(chuàng)建單車(chē)監(jiān)控頁(yè)面圖3-19車(chē)輛實(shí)時(shí)監(jiān)測(cè)頁(yè)面效果（3）樣式化頁(yè)面實(shí)時(shí)監(jiān)測(cè)頁(yè)面的內(nèi)容已經(jīng)完成了，但在瀏覽器中查看頁(yè)面時(shí)會(huì)發(fā)現(xiàn)頁(yè)面目前只是信息的羅列，要使頁(yè)面呈現(xiàn)預(yù)先設(shè)計(jì)的效果就需要CSS的美化。3.任務(wù)實(shí)施任務(wù)3.2創(chuàng)建單車(chē)監(jiān)控頁(yè)面任務(wù)3.3呈現(xiàn)車(chē)輛運(yùn)行狀態(tài)將單車(chē)監(jiān)控的數(shù)據(jù)用表格或圖表的方式呈現(xiàn)到實(shí)時(shí)監(jiān)測(cè)頁(yè)面中，如圖3-21所示是用表格的形式呈現(xiàn)數(shù)據(jù)，如圖3-22所示是用圖表的方式呈現(xiàn)數(shù)據(jù)。1.任務(wù)描述圖3-21用表格呈現(xiàn)車(chē)輛數(shù)據(jù)圖3-22JS原生代碼實(shí)現(xiàn)的車(chē)輛速度柱狀圖用表格呈現(xiàn)數(shù)據(jù)，將車(chē)輛數(shù)據(jù)按照HTML中表格的格式進(jìn)行編輯排版，奇數(shù)行為字段，偶數(shù)行為字段對(duì)應(yīng)的數(shù)據(jù)。用圖表呈現(xiàn)數(shù)據(jù)，這里用JS的原生代碼實(shí)現(xiàn)一個(gè)條狀圖表，由于JS不是本項(xiàng)目的重點(diǎn)，只要掌握如何通過(guò)調(diào)用JS呈現(xiàn)圖表即可。2.任務(wù)分析任務(wù)3.3呈現(xiàn)車(chē)輛運(yùn)行狀態(tài)（1）車(chē)輛數(shù)據(jù)在表格中的呈現(xiàn)①利用表格呈現(xiàn)②利用div元素呈現(xiàn)（2）用條形圖呈現(xiàn)車(chē)速3.任務(wù)實(shí)施任務(wù)3.3呈現(xiàn)車(chē)輛運(yùn)行狀態(tài)一、選擇題1.如果要在不同的網(wǎng)頁(yè)中應(yīng)用相同的樣式表定義，應(yīng)該（）A.直接在HTML的元素中定義樣式表B.在HTML的<head>標(biāo)記中定義樣式表C.通過(guò)一個(gè)外部樣式表文件定義樣式表D.以上都可以2.a:hover表示超鏈接在（）時(shí)的狀態(tài)。A. 鼠標(biāo)按下 B.鼠標(biāo)未移入 C.鼠標(biāo)放上去 D.訪問(wèn)過(guò)后課后練習(xí)33.若要在頁(yè)面中創(chuàng)建一個(gè)圖形超鏈接，要顯示的圖形為myhome.jpg,所鏈接的地址為,以下用法中，正確的是（）。A.<ahref=””>myhome.jpg</a>B.<ahref=””><imgsrc=”myhome.jpg”></a>C.<imgsrc=”myhome.jpg”><ahref=””></a>D.<ahref=><imgsrc=”myhome.jpg”>4.在HTML頁(yè)面中，有如下樣式規(guī)則，它的選擇器為（）。P{color:red;font-size:30px;f