初識(shí)前端與環(huán)境搭建

一、常用術(shù)語(yǔ)

1. httt/https:超文本傳輸協(xié)議

超文本傳輸協(xié)議指的是HTTP協(xié)議，是一個(gè)基于“TCP/IP”的通信協(xié)議，一個(gè)簡(jiǎn)單的“請(qǐng)求-響應(yīng)”協(xié)議，它指定了客戶(hù)端可能發(fā)送給服務(wù)器什么樣的消息以及得到什么樣的響應(yīng)；
html：超文本
tcp:傳輸

2. URL/URI:http://ipnx.cn/index.html

URI是URL的子集，表示指向互聯(lián)網(wǎng)上的唯一資源。

3. path:路徑

- 相對(duì)路徑：僅限當(dāng)前位置訪問(wèn)當(dāng)前服務(wù)器內(nèi)容

語(yǔ)法：當(dāng)前路徑：./
上級(jí)路徑：../

- 絕對(duì)路徑：從一個(gè)大家公認(rèn)的位置開(kāi)始查詢(xún)

4. 頁(yè)面

- 靜態(tài)頁(yè)面：html

瀏覽器向服務(wù)器發(fā)送html文件請(qǐng)求，服務(wù)器收到請(qǐng)求再響應(yīng)返回給瀏覽器。

- 動(dòng)態(tài)頁(yè)面：php

瀏覽器向服務(wù)器發(fā)送php文件請(qǐng)求，服務(wù)器收到請(qǐng)求，由于無(wú)法識(shí)別PHP文件必須交給php.exe解析，解析轉(zhuǎn)成服務(wù)器所能識(shí)別的html文件返回到服務(wù)器，然后再由服務(wù)器響應(yīng)接收到的html文件返回給瀏覽器。

二、環(huán)境搭建

安裝chrome和vscode與常用配置

一、Chrome 安裝

1.在瀏覽器中打開(kāi)下載地址：谷歌瀏覽器下載地址，進(jìn)入谷歌官網(wǎng)，點(diǎn)擊下載。

2.打開(kāi)下載的安裝包 ChromeSetup.exe 開(kāi)始按提示安裝，安裝完成創(chuàng)建桌面快捷方式。

二、Chrome插件安裝

1.由于谷歌商店無(wú)法訪問(wèn)打開(kāi)，需要在第三方網(wǎng)站下載插件，我用的是https://chrome.zzzmh.cn/#/index

2.輸入需要安裝的插件名稱(chēng)搜索，這里以FeHelper Web前端助手為例，如下圖：

• 點(diǎn)擊推薦下載，下載完成后解壓，解壓出來(lái)的文件是以 .crx 為后綴的，找到該文件，修改后綴名，后綴.CRX該為.zip,并解壓，如下圖：
  
  
• 點(diǎn)擊瀏覽器右上角的3個(gè)點(diǎn)按鈕，點(diǎn)擊“更多工具”=>“擴(kuò)展程序”，點(diǎn)擊打開(kāi)開(kāi)發(fā)者模式，
  
• 點(diǎn)擊左側(cè)加載已解壓的擴(kuò)展程序，
  
• 在對(duì)話框中選擇.zip解壓出來(lái)的文件夾，然后確認(rèn)點(diǎn)擊選擇文件夾
  
• 在FeHelper配置項(xiàng)頁(yè)面安裝如下插件：進(jìn)制轉(zhuǎn)換工具，頁(yè)面取色工具，安裝完成后就點(diǎn)擊保存，谷歌插件就已安裝完畢。
  

  三、vscode 安裝

  1.在瀏覽器中打開(kāi)下載地址：https://code.visualstudio.com/，打開(kāi) VS Code 官方網(wǎng)站，點(diǎn)擊下載安裝文件
  
  2.下載完成后單擊運(yùn)行，開(kāi)始進(jìn)行安裝，按提示默認(rèn)安裝即可，安裝完成后自動(dòng)打開(kāi)。軟件默認(rèn)是英文版的，我的是用插件漢化了的。
  

  四、VS Code 常用配置

1. 安裝常用插件，以安裝Live Server為例

• 點(diǎn)擊左側(cè)工具欄擴(kuò)展按鈕（最后一個(gè)按鈕）
  
• 在搜索框中輸入需要安裝的插件名稱(chēng)Live Server，在搜索結(jié)果中點(diǎn)擊右側(cè)安裝按鈕安裝，如下圖：
  
• 安裝完成后點(diǎn)擊小齒輪可以進(jìn)入插件設(shè)置頁(yè)面
  

附上需要安裝的插件名稱(chēng)：

批改老師：PHPz

批改狀態(tài)：合格

老師批語(yǔ)：完成得很好，總結(jié)的很詳細(xì)，繼續(xù)加油，只是你在提交的時(shí)候應(yīng)該沒(méi)有在“狀態(tài)”這一欄選擇“作業(yè)”進(jìn)行提交