古柏高枝銀杏實(shí)，幾千年物到而今。

玉纖雪腕白相照，爛銀殼破玻璃明。

銀杏(學(xué)名：Ginkgo biloba)，落葉喬木，樹(shù)冠圓錐形，枝輪生，葉互生，在長(zhǎng)枝上散生，二歧狀分叉葉脈，果具長(zhǎng)梗，下垂，倒卵圓形，外被白粉，味甘略苦，是最古老的孑遺植物······《植物資源學(xué)》課上學(xué)到的東西忘得差不多了，記不清為什么要給植物起個(gè)拉丁名，有個(gè)聲音卻一直回響：希望你變得更好更強(qiáng)大······

哦，前段時(shí)間校慶，六十周年

紅專(zhuān)并進(jìn)一甲子，科教報(bào)國(guó)六十年。

“優(yōu)雅降級(jí)，漸進(jìn)增強(qiáng)，彌散圓，原子化設(shè)計(jì)，HTML5, CSS3 ,JavaScript, jQuery······”這些前端術(shù)語(yǔ)，陌生中帶著些新奇，經(jīng)過(guò)一番了解后，會(huì)發(fā)現(xiàn)它們的表達(dá)恰如其分，由此觸類(lèi)旁通，呈現(xiàn)在腦海中的是萬(wàn)事萬(wàn)物互聯(lián)互通。

漸進(jìn)增強(qiáng)(先滿足低版本瀏覽器基本功能，然后對(duì)高級(jí)瀏覽器進(jìn)行效果、交互、追加功能從而達(dá)到更好的體驗(yàn)，也稱向上兼容)與優(yōu)雅降級(jí)(首先構(gòu)建完整的功能，然后為低版本瀏覽器提供基本功能，也稱向下兼容)，不僅可以表達(dá)軟件開(kāi)發(fā)中的概念，而且還是看待同種事物的兩種觀點(diǎn)——它們都關(guān)注同一個(gè)網(wǎng)頁(yè)在不同設(shè)備里不同瀏覽器下的表現(xiàn)程度。網(wǎng)頁(yè)在瀏覽器中以怎樣的形式呈現(xiàn)這就是網(wǎng)頁(yè)前端所涉及到的內(nèi)容，接下來(lái)一起走進(jìn)前端世界吧！

前端知多少

什么是前端？簡(jiǎn)單理解就是研究瀏覽器如何顯示出網(wǎng)頁(yè)的布局，樣式和交互等的技術(shù)，相對(duì)地，后臺(tái)指的就是服務(wù)器了。HTML＋CSS＋JS是“前端三劍客“，它們各司其職，協(xié)同工作，將最基本的文字、圖片、超鏈接、音樂(lè)、視頻、動(dòng)畫(huà)等網(wǎng)頁(yè)內(nèi)容合理布局，細(xì)致交互，帶給用戶舒適的體驗(yàn)。

常見(jiàn)前端編程軟件

我們?cè)撛谀睦飳?xiě)程序呢？記事本！完全沒(méi)問(wèn)題，但是，白底黑字不美觀，體驗(yàn)太差了。不如試試這些吧：Dreamweaver、Sublime、WebStorm、Notepad++、Visual Studio Code等，這些軟件分為輕量級(jí)和重量級(jí)，正如其字面意思一樣，輕度使用的話選擇輕量級(jí)足夠。這里以Visual Studio Code(VS code)為例——一款微軟開(kāi)發(fā)的輕量級(jí)前端編程軟件，只有60M大小。這些軟件與記事本的區(qū)別是什么？增加了文本高亮顯示、標(biāo)簽自動(dòng)填充，程序錯(cuò)誤提醒等輔助功能，使得編寫(xiě)程序相對(duì)舒適和方便些。

HTML

HTML(Hyper Text Markup Language, 超文本標(biāo)記語(yǔ)言)，它通過(guò)一些標(biāo)簽來(lái)顯示和描述網(wǎng)頁(yè)內(nèi)容，舉幾個(gè)非常常見(jiàn)的標(biāo)簽吧：插入圖片標(biāo)簽、插入段落標(biāo)簽

······我們來(lái)實(shí)際操作一下吧(以下程序都在VS code中編寫(xiě))。

新建一個(gè)記事本，另存為.html文件，然后用VS code打開(kāi)。以下代碼就是html文件的基本結(jié)構(gòu)：

第一行申明該文檔遵循HTML5標(biāo)準(zhǔn)。剩下的主要分為兩部分，第一部分為頭部標(biāo)簽，這里面放的是網(wǎng)頁(yè)的標(biāo)題(title標(biāo)簽中)和字符編碼格式、關(guān)鍵字(便于瀏覽器搜索)和頁(yè)面說(shuō)明等(meta標(biāo)簽中)，標(biāo)簽中也用來(lái)引入外部的css和js文件。第二部分為網(wǎng)頁(yè)的主體部分，放在標(biāo)簽中，這部分也是我們需要編寫(xiě)的內(nèi)容。例如：我要想在瀏覽器中顯示“你好，木頭人兒”，只需要在html文件的標(biāo)簽之間輸入相應(yīng)的文字即可，如下：

是不是很好玩呢？這就是html的主要功能了——顯示和描述網(wǎng)頁(yè)內(nèi)容。接下來(lái)，試一試多添加一些內(nèi)容吧，插入些圖片和文字，效果如下：

呃，好像有點(diǎn)亂，還有點(diǎn)丑，我想加個(gè)背景，給文字換個(gè)顏色，排版美一點(diǎn)，字體和大小也想改下，這時(shí)就需要css了。

CSS

CSS(Cascading Style Sheets，層疊樣式表)，它主要功能改變網(wǎng)頁(yè)中各元素的樣式。和html文件一樣，首先新建記事本，然后另存為.css文件，使用VS code打開(kāi)即可編寫(xiě)代碼。在html文件中引入css文件就可實(shí)現(xiàn)樣式的改變。舉個(gè)例子，改變網(wǎng)頁(yè)和文字顏色：

從這個(gè)例子可以看到css文件的特點(diǎn)，首先是找到html 中的元素，然后在大括號(hào)中書(shū)寫(xiě)樣式，如文字顏色設(shè)為白色，背景顏色設(shè)置為紅色。CSS樣式還涉及到元素寬高、浮動(dòng)、內(nèi)外邊距、字體大小、行間距、對(duì)齊方式、位置等的控制。我們完善一下吧。

CSS 中好多屬性可以通過(guò)單詞意思進(jìn)行判斷，這里比較有挑戰(zhàn)的一點(diǎn)是：網(wǎng)頁(yè)中各元素可能會(huì)相互影響，因此樣式的添加要考慮元素相互之間的關(guān)系。

至此，網(wǎng)頁(yè)中有了文字、圖片等內(nèi)容(html來(lái)實(shí)現(xiàn))和各元素的樣式(css 來(lái)實(shí)現(xiàn))，那么，現(xiàn)在想在網(wǎng)頁(yè)中加一些動(dòng)態(tài)，比如說(shuō)圖片的自動(dòng)切換等，怎么辦呢？JavaScript(Js)就需要出場(chǎng)了。

JavaScript

JS(JavsScript)是Web頁(yè)面中的一種腳本語(yǔ)言，它可以把靜態(tài)頁(yè)面轉(zhuǎn)化為支持用戶交互并響應(yīng)的動(dòng)態(tài)頁(yè)面。比如說(shuō)實(shí)現(xiàn)下面的圖片切換效果：

和html與css一樣，首先新建記事本，然后另存為.js文件，使用VS code打開(kāi)即可編寫(xiě)代碼。實(shí)現(xiàn)上面那個(gè)例子，需要怎樣的js代碼呢？

JS代碼特點(diǎn)是有var 來(lái)定義變量，有“function 函數(shù)名()“來(lái)定義函數(shù)，還有一些窗口事件等。上面這個(gè)例子，具體執(zhí)行了哪些功能呢？

結(jié)合實(shí)際的顯示效果來(lái)看，當(dāng)網(wǎng)頁(yè)打開(kāi)時(shí)執(zhí)行init()函數(shù)，它的內(nèi)容是每?jī)擅腌妶?zhí)行一次tupian()，tupian()這個(gè)函數(shù)的作用是依次顯示照片，因此整個(gè)init()函數(shù)的作用是每隔兩秒顯示一張照片，圖片切換的效果就實(shí)現(xiàn)了。

至此，我們已經(jīng)了解html、css和js所實(shí)現(xiàn)的基本功能，接下來(lái)一起看看它們是怎樣聯(lián)系在一起的吧！

這是在本地盤(pán)中文檔結(jié)構(gòu)，包含了html文件、css文件、js文件和用到的圖片。

在html的標(biāo)簽中分別引入了css和js文件，當(dāng)然，也可以不引入外部的css和js，而是采用內(nèi)聯(lián)的方式，在html中，把css代碼放在標(biāo)簽之間，把js代碼放在標(biāo)簽之間。

嘗試看懂一個(gè)網(wǎng)頁(yè)

當(dāng)我們一步步打開(kāi)折疊的小三角，會(huì)發(fā)現(xiàn)，網(wǎng)頁(yè)元素一一呈現(xiàn)，在標(biāo)簽之間是css代碼，在標(biāo)簽之間是js 代碼，link表示一個(gè)鏈接，

表示盒子模型······我們可以一層一層剝開(kāi)它的心，任何元素都可以找到它的位置，比如，我們找找百度的logo吧！

找到了logo所在的網(wǎng)址，我們打開(kāi)這個(gè)網(wǎng)址，就可以看到源文件了。

高效便捷發(fā)布一個(gè)網(wǎng)站

編輯好的網(wǎng)站，在本地瀏覽沒(méi)有問(wèn)題，那么如何才能讓更多的人看到呢？當(dāng)然是發(fā)布啦！傳統(tǒng)的網(wǎng)站發(fā)布需要申請(qǐng)一個(gè)服務(wù)器和域名，而這兩個(gè)東西需要購(gòu)買(mǎi)并且要到當(dāng)?shù)氐墓矙C(jī)關(guān)備案，審核期還較長(zhǎng)，這樣一來(lái)，會(huì)帶來(lái)極大的不便，我們的網(wǎng)站僅僅是大家用來(lái)瀏覽的，不需要與服務(wù)器交互，經(jīng)過(guò)一番探索，有一種方式極大的方便了這種需求的用戶——利用Github。

Github(https://github.com)是個(gè)網(wǎng)頁(yè)，更確切地說(shuō)叫做代碼托管平臺(tái)，內(nèi)容極其豐富，申請(qǐng)一個(gè)賬號(hào)之后，新建個(gè)Repository(倉(cāng)庫(kù))，可以用來(lái)上傳代碼，收藏，復(fù)制，或者對(duì)別人分享的代碼進(jìn)行修改等，這里我們需要用Repository(倉(cāng)庫(kù))來(lái)存放本地網(wǎng)頁(yè)文件。上傳到Github的方式主要有兩種，一是通過(guò)代碼的方式進(jìn)行上傳(git方式)，另一種方式是通過(guò)圖形化界面進(jìn)行上傳(GitHub Desktop)，顯然后者直觀些。

上傳到Github的文件與本地的文件結(jié)構(gòu)一樣。

滿足一下大家的好奇心，在記事本中編寫(xiě)程序，能不能行？新建個(gè)記事本，雙擊打開(kāi)，寫(xiě)入html 代碼，另保存為.html 文件格式，雙擊打開(kāi)即可看到網(wǎng)頁(yè)內(nèi)容，如下圖所示。

下一期將講述一根USB數(shù)據(jù)線的前世今生，期待與你一探究竟！

西農(nóng)的娃

別薛華

王勃

送送多窮路，遑遑獨(dú)問(wèn)津。

悲涼千里道，凄斷百年身。

心事同漂泊，生涯共苦辛。

無(wú)論去與往，俱是夢(mèng)中人。

總結(jié)

以上是生活随笔為你收集整理的webstorm打开网页_网页前端之HTML+CSS+JS的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。