本文為第一課的核心知識點(diǎn)總結(jié),主要是關(guān)于前端開發(fā)環(huán)境搭建和網(wǎng)頁構(gòu)成的基本認(rèn)識,前者主要是瀏覽器chrome和編輯器VSCode

前端開發(fā)環(huán)境之瀏覽器chrome配置

課上老師只是展示一下其檢查功能中的最基本一項(xiàng),把一個網(wǎng)頁的結(jié)構(gòu)讓我們看的清清楚楚—-這應(yīng)該就是該軟件最大的魅力了吧.
為了更好地使用該利器,推薦了幾個擴(kuò)展程序也即插件,其中兩個感覺是必裝的:

1. 劃詞翻譯 主要功能就是把網(wǎng)頁上的英文選擇后直接翻譯成中文.只是沒想到安裝過程一步三折,最后還是沒有安裝成功,最后只是替換成了騰訊翻譯,對應(yīng)的插件下載地址為https://transmart.qq.com/zh-CN/download.關(guān)于安裝過程我在后面統(tǒng)一說.
2. FeHelper(前端助手) 功能包裝JSON自動格式化、手動格式化等等,還沒怎么使用,但應(yīng)該很適用.

插件安裝過程

安裝不成功,感覺啥都不對,安裝成功了,又覺得這太簡單.主要分為三步:

1. 插件下載.由于一些原因,只是網(wǎng)上自己找對應(yīng)的插件,推薦或者自己百度,或者在極簡插件里搜索下載,下載后的文件格式為.crx.
2. 下載成功的安裝只需要把該文件拉動到chrome的擴(kuò)展程序下就好,可以直接點(diǎn)擊chrome://extensions/打開.
3. 安裝完成后,根據(jù)提示,選擇使用就好.

   我安裝上最開始遇到了全部安裝不成功的情況,網(wǎng)上查了下說可能是chrome版本不是最新的原因,我又重先下載了一下,再次安裝,完成.

最終安裝好的顯示如下:

前端開發(fā)環(huán)境之瀏覽器VScode配置

這一開發(fā)利器的配置也即插件的安裝,主要包括以下三個方面:

語言顯示為中文

添加Chinese (Simplified) (簡體中文) Language Pack for Visual Studio Code重啟就可以顯示為中文了.

窗口顯示風(fēng)格的一些設(shè)置

老師推薦了One Dark Pro,Material Icon Theme,Material Product Icons三個插件,對于我這個”色盲”來講,好像沒看出多大變化.

VScode配置功能插件

這個非常重要,最基本的包括Prettier - Code formatter,Code Spell Checker,open in browser,以及markdown對應(yīng)的markdownlint和Markdown Preview Enhanced.

網(wǎng)頁元素的基本認(rèn)識

通過更改一行最基本的樣式,讓原來的很美觀的PHP中文網(wǎng)官網(wǎng)顯露出了其內(nèi)部骨架,顯示如下:

額外添加了樣式:

*{border: 1px solid red}

在如此一目了然下,我真正地懂了何為塊元素,何為行內(nèi)元素,又何為行內(nèi)塊元素,這三者又是如何最終融合在一起來顯示整個網(wǎng)頁,牛逼.

以上,簡單記錄,希望接下來學(xué)習(xí)得更好!