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

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

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

哦，前段時間校慶，六十周年

紅專并進一甲子，科教報國六十年。

“優雅降級，漸進增強，彌散圓，原子化設計，HTML5, CSS3 ,JavaScript, jQuery······”這些前端術語，陌生中帶著些新奇，經過一番了解后，會發現它們的表達恰如其分，由此觸類旁通，呈現在腦海中的是萬事萬物互聯互通。

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

前端知多少

什么是前端？簡單理解就是研究瀏覽器如何顯示出網頁的布局，樣式和交互等的技術，相對地，后臺指的就是服務器了。HTML＋CSS＋JS是“前端三劍客“，它們各司其職，協同工作，將最基本的文字、圖片、超鏈接、音樂、視頻、動畫等網頁內容合理布局，細致交互，帶給用戶舒適的體驗。

常見前端編程軟件

我們該在哪里寫程序呢？記事本！完全沒問題，但是，白底黑字不美觀，體驗太差了。不如試試這些吧：Dreamweaver、Sublime、WebStorm、Notepad++、Visual Studio Code等，這些軟件分為輕量級和重量級，正如其字面意思一樣，輕度使用的話選擇輕量級足夠。這里以Visual Studio Code(VS code)為例——一款微軟開發的輕量級前端編程軟件，只有60M大小。這些軟件與記事本的區別是什么？增加了文本高亮顯示、標簽自動填充，程序錯誤提醒等輔助功能，使得編寫程序相對舒適和方便些。

HTML

HTML(Hyper Text Markup Language, 超文本標記語言)，它通過一些標簽來顯示和描述網頁內容，舉幾個非常常見的標簽吧：插入圖片標簽、插入段落標簽

······我們來實際操作一下吧(以下程序都在VS code中編寫)。

新建一個記事本，另存為.html文件，然后用VS code打開。以下代碼就是html文件的基本結構：

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

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

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

CSS

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

從這個例子可以看到css文件的特點，首先是找到html 中的元素，然后在大括號中書寫樣式，如文字顏色設為白色，背景顏色設置為紅色。CSS樣式還涉及到元素寬高、浮動、內外邊距、字體大小、行間距、對齊方式、位置等的控制。我們完善一下吧。

CSS 中好多屬性可以通過單詞意思進行判斷，這里比較有挑戰的一點是：網頁中各元素可能會相互影響，因此樣式的添加要考慮元素相互之間的關系。

至此，網頁中有了文字、圖片等內容(html來實現)和各元素的樣式(css 來實現)，那么，現在想在網頁中加一些動態，比如說圖片的自動切換等，怎么辦呢？JavaScript(Js)就需要出場了。

JavaScript

JS(JavsScript)是Web頁面中的一種腳本語言，它可以把靜態頁面轉化為支持用戶交互并響應的動態頁面。比如說實現下面的圖片切換效果：

和html與css一樣，首先新建記事本，然后另存為.js文件，使用VS code打開即可編寫代碼。實現上面那個例子，需要怎樣的js代碼呢？

JS代碼特點是有var 來定義變量，有“function 函數名()“來定義函數，還有一些窗口事件等。上面這個例子，具體執行了哪些功能呢？

結合實際的顯示效果來看，當網頁打開時執行init()函數，它的內容是每兩秒鐘執行一次tupian()，tupian()這個函數的作用是依次顯示照片，因此整個init()函數的作用是每隔兩秒顯示一張照片，圖片切換的效果就實現了。

至此，我們已經了解html、css和js所實現的基本功能，接下來一起看看它們是怎樣聯系在一起的吧！

這是在本地盤中文檔結構，包含了html文件、css文件、js文件和用到的圖片。

在html的標簽中分別引入了css和js文件，當然，也可以不引入外部的css和js，而是采用內聯的方式，在html中，把css代碼放在標簽之間，把js代碼放在標簽之間。

嘗試看懂一個網頁

當我們一步步打開折疊的小三角，會發現，網頁元素一一呈現，在標簽之間是css代碼，在標簽之間是js 代碼，link表示一個鏈接，

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

找到了logo所在的網址，我們打開這個網址，就可以看到源文件了。

高效便捷發布一個網站

編輯好的網站，在本地瀏覽沒有問題，那么如何才能讓更多的人看到呢？當然是發布啦！傳統的網站發布需要申請一個服務器和域名，而這兩個東西需要購買并且要到當地的公安機關備案，審核期還較長，這樣一來，會帶來極大的不便，我們的網站僅僅是大家用來瀏覽的，不需要與服務器交互，經過一番探索，有一種方式極大的方便了這種需求的用戶——利用Github。

Github(https://github.com)是個網頁，更確切地說叫做代碼托管平臺，內容極其豐富，申請一個賬號之后，新建個Repository(倉庫)，可以用來上傳代碼，收藏，復制，或者對別人分享的代碼進行修改等，這里我們需要用Repository(倉庫)來存放本地網頁文件。上傳到Github的方式主要有兩種，一是通過代碼的方式進行上傳(git方式)，另一種方式是通過圖形化界面進行上傳(GitHub Desktop)，顯然后者直觀些。

上傳到Github的文件與本地的文件結構一樣。

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

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

西農的娃

別薛華

王勃

送送多窮路，遑遑獨問津。

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

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

無論去與往，俱是夢中人。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。