tml開發(fā)環(huán)境搭建

有一個好的編輯器我們可以方便地的開發(fā)項目，編寫代碼，配置和管理我們的項目。所以我們開始編寫html代碼之前需要搭建開發(fā)環(huán)境。

基于html項目的開發(fā)和代碼編寫現(xiàn)在網(wǎng)上有很多編輯器，也有免費的，也有收費的編輯器。基于在Windows系統(tǒng)環(huán)境下開發(fā)和編寫html代碼最簡單的編輯器就是Windows自帶的記事本，我們可以使用記事本編輯html代碼。

使用記事本編寫html的步驟是首先新建一個文本文檔，按照html的語法規(guī)則編寫相關(guān)的代碼和保存文件，然后把文件的后綴名改為.html，使用電腦上的瀏覽器打開就可以查看我們代碼的運行結(jié)果。

雖然記事本也能編寫html代碼，但是效率不高也不方便，所以我們使用專業(yè)的編輯器來開發(fā)項目，編寫代碼和管理項目。

常用html代碼編寫的免費軟件有HBuilderX，vs code，Sublime Text 等等。

HBuilderX官網(wǎng)下載地址：

https://www.dcloud.io/hbuilderx.html

vs code的官網(wǎng)下載地址：

https://code.visualstudio.com/

Sublime Text官網(wǎng)下載地址：

http://www.sublimetext.com/

我們以后的教程都使用HBuilderX，所以下面為了同學們的學習方便，對HBuilderX的下載和安裝做詳細的教程。

一，下載

首先訪問HBuilderX的官網(wǎng)網(wǎng)址：

https://www.dcloud.io/hbuilderx.html

打開上面的HBuilderX下載網(wǎng)址后點擊頁面上download，在彈出的對話框里選擇適合自己電腦的HBuilderX版本下載。

在Windows10環(huán)境下下載后的文件是一個壓縮的.zip文件。

二，安裝

鼠標右擊下載下來的壓縮文件進行解壓。

解壓完成后是一個名為HBuilderX的文件夾。

解壓完成后鼠標雙擊HBuilderX文件夾：

雙擊運行名為HBuilderX.exe的應(yīng)用程序文件即可啟動HBuilderX編輯器：

因為HBuilderX是一個綠色軟件所以沒有桌面快捷方式和開始菜單快速啟動程序，我們可以右擊HBuilderX.exe文件創(chuàng)建桌面快捷方式。

小百科：

綠色軟件指一類小型軟件，多數(shù)為免費軟件，最大特點是軟件無需安裝便可使用，可存放于閃存中，移除后也不會將任何記錄留在本機計算機上。通俗點講綠色軟件就是指不用安裝，下載直接可以使用的軟件。綠色軟件不會在注冊表中留下注冊表鍵值，所以相對一般的軟件來說，綠色軟件對系統(tǒng)的影響幾乎沒有，所以是很好的一種軟件類型。

三，新建項目

HBuilderX編輯器初次啟動時的默認界面是下圖所示：

按照下圖所示可以創(chuàng)建一個新的名為demo1空白項目：

名為demo1的空白項目創(chuàng)建成功后的界面如下圖所示：

接下來在剛我們新建的demo1項目下創(chuàng)建名為helloworld的html文件

鼠標右擊創(chuàng)建的demo1項目選擇新建在選擇.html文件：

在彈出的對話框里填入html文件的名稱：

編寫一段代碼：

運行：

在瀏覽器上觀察效果：

好了，到這里html的開發(fā)環(huán)境搭建和HBuilderX的安裝教程結(jié)束了。

下面再給大家教一下怎樣修改HBuilderX的主題風格，HBuilderX自身提供了修改軟件主題的功能，使用者可以自身需求和喜好修改HBuilderX的風格。在喜歡自己喜歡的環(huán)境下做開發(fā)也是令人羨慕的一件事。

按照以下步驟可以修改HBuilderX的主題，默認主題是綠柔，我們可以改成雅黑，雅藍或者自定義主題：

雅黑主題：

雅藍主題：

好了本節(jié)全部內(nèi)容全部結(jié)束了，希望我準備的內(nèi)容對你有所幫助

你的支持是我的最大動力，若覺得我的教程還可以或?qū)δ阌袔椭鸀槲尹c贊加關(guān)注！謝謝！

這里是云端源想IT，幫你輕松學IT”

嗨~ 今天的你過得還好嗎？

生命是什么呢，

生命是時時刻刻不知如何是好。

- 2024.03.06 -

工欲善其事必先利其器，一款好的開發(fā)工具可以讓我們事半功倍。前面我們對HTML的相關(guān)概念和基本結(jié)構(gòu)已經(jīng)有了基本的了解，下面我們就來安裝在前端開發(fā)中的需要使用的開發(fā)工具及環(huán)境。

在眾多HTML編輯器中，選擇一個適合自己的工具至關(guān)重要。今天我們就來認識一下前端開發(fā)工作中使用的最廣泛的工具 “VS Code” , 并在本地搭建好開發(fā)環(huán)境。

一、前端開發(fā)工具簡介

在介紹 “VS Code” 之前，我們先來了解一下什么是 “IDE”。

什么是 “IDE”

IDE 是集成開發(fā)環(huán)境的英文縮寫 （Integrated Development Environment)，集成開發(fā)環(huán)境就是將在開發(fā)過程中所需要的工具或功能集成到了一起，比如：代碼編寫、分析、編譯、調(diào)試等功能，從而最大化地提高開發(fā)者的工作效率。

IDE 通用特點：

• 提供圖形用戶界面，在 IDE 中可以完成開發(fā)過程中所有工作；
• 支持代碼補全與檢查，并提供快速修復選項；
• 內(nèi)置解釋器與編譯器；
• 功能強大的調(diào)試器，支持設(shè)置斷點與單步執(zhí)行等功能。

前端開發(fā)IDE

而在前端開發(fā)中我們需要安裝一個“趁手”的IDE，幫助我們更快更高效的開發(fā)，一個好的IDE是每個程序員的必備武器。前端開發(fā)IDE有很多種，例如 Visual Studio Code、HBuilder、WebStorm、Atom 或 Sublime Text 等。

我們可以任選一種使用。這幾種IDE的對比如下：

這么多IDE該怎么選呢？對于我們初學者來說，選擇Visual Studio Code，（簡稱VS Code）就可以了。VS code具備內(nèi)置功能非常豐富、插件很全且安裝簡單、輕量、對電腦的配置要求不算很高，且有MAC版本，應(yīng)用廣泛等優(yōu)點，很適合新手。

下面就和我一起下載并安裝VS code吧！

二、VS Code下載與安裝

1、進入VScode官網(wǎng)

官網(wǎng)地址：https://code.visualstudio.com/

點擊【Download】進入下載，不要點擊【Download for Windows Stable Build】，否則它會自動幫你下載User Installer用戶版本。

• 【Stable】：穩(wěn)定版本，比較穩(wěn)定。
• 【Insiders】：測試版本，添加了一些新東西，還在測試中，可能會存在一些Bug，不怎么穩(wěn)定。

2、然后你會看見Windows，Linux，蘋果三個版本，我們選擇Windows版本，選擇System Installer 點擊【x64】進行下載，不要點擊【↓ Windows windows8,10,11】，否則它也會自動默認下載User Installer用戶版本。

• 【User Installer】：用戶安裝程序，VScode安裝在你電腦當前賬戶的目錄上，如果你換了一個其他賬戶登錄你的電腦，那么你就用不了之前那個賬戶下載的VScode了。
• 
  

• 【System Installer】：系統(tǒng)安裝程序，VScode不會安裝在你電腦的當前賬戶上，而是直接安裝在系統(tǒng)上，所有賬戶都可以使用。

其實選哪個版本都無傷大雅，就算你下載了【User Installer】版本也沒事，因為沒人會沒事把自己電腦上的賬戶換成其他人的賬戶登錄，就算換了也可以換回來，只是有時候特殊情況換了個賬戶登錄不能使用就有一點麻煩，所以還是推薦盡量下載【System Installer】版本。

【x86】：32位操作系統(tǒng)。【x64】:64位操作系統(tǒng)，如果想知道自己是什么系統(tǒng)，可以敲擊Win鍵找到“設(shè)置”→“系統(tǒng)”→“關(guān)于”→“系統(tǒng)類型”。

3、正在下載

這個下載會比較慢，如果不想等可直接去找個別人下好的安裝包哦！也可找小編領(lǐng)取。

4、下載完后打開文件，會彈出許可協(xié)議彈窗，勾選我同意此協(xié)議，單擊【下一步】。

5、先去D盤里創(chuàng)建一個新文件夾取名叫“VScode”，點擊【瀏覽】按鈕修改安裝路徑，把路徑改到剛剛在D盤里創(chuàng)建的VScode文件夾里。如果覺得麻煩也可以直接默認安裝在C盤，然后單擊【下一步】，但還是建議安裝在D盤里。

6、修改完路徑后，單擊【下一步】。（安裝路徑是這個樣子D:\VScode\Microsoft VS Code）

7、選擇開始菜單文件夾，默認"Visual Studio Code",單擊【下一步】。

8、根據(jù)自己的需求進行勾選，勾選完單擊【下一步】。

【創(chuàng)建桌面快捷方式】：在桌面創(chuàng)建VScode快捷方式。

【將“通過Code打開”操作添加到Windows資源管理器文件上下文菜單】：選中一個文件鼠標右鍵可以通過VScode打開文件。

【將“通過Code打開”操作添加到Windows資源管理器目錄上下文菜單】：選中一個文件夾鼠標右鍵可以通過VScode打開文件夾。

【將Code注冊為受支持的文件類型的編輯器】：對于受支持的文件類型的文件，鼠標右鍵選擇“打開方式”，可以通過“Vscode”打開。

【添加到PATH】：添加VScode文件夾里的bin目錄到PATH環(huán)境變量里，添加完以后可通過系統(tǒng)命令輸入code直接啟動VScode。

9、單擊【安裝】進行安裝。

10、安裝完成后單擊【完成】啟動。

三、VS code配置插件

下載完之后，大家可以根據(jù)自己的需求下載插件，這里推薦我用的比較順手的幾個。

1、下載漢化包

點擊擴展，在搜索欄搜索Chinese，選擇Chinese中文簡體點擊【Install】進行安裝。（建議少用，多看英文，這是一位優(yōu)秀的程序員走向成功的標志性成長。）

安裝完后單擊【Change Language and Restart】重啟VScode軟件，刷新一下就變成中文簡體了。

2、下載【會了吧】插件

在搜索欄里搜索【會了吧】，這個是在你敲代碼時會自動識別你敲的單詞進行翻譯，如果你有一個單詞不認識，可以點進“會了吧”看看翻譯，對英語基礎(chǔ)差的人很友好。

3、下載【Open in browser】插件

這個是用來運行代碼，并且在瀏覽器打開，查看運行效果的，這個插件必須下，否則當你寫完HTML網(wǎng)頁時你無法運行，無法預覽頁面，不信你可以先試試能不能運行再回來下載。

4、下載【Live Server】插件

這個是用于實時預覽運行效果，當你使用open in browser運行代碼時，只要你的代碼有改變，你就需要手動刷新重新預覽頁面運行結(jié)果，而Live Server是自動刷新運行結(jié)果，非常方便，非常滴銀性！

四、用VScode編寫HTML代碼

1、先去D盤里創(chuàng)建一個新文件夾取名叫“Workspace”（名字隨便取名）。

2、進入VScode找到左上角的文件選擇點擊打開文件夾。

3、找到剛剛創(chuàng)建的“workspace”文件夾，單擊【選擇文件夾】。

4、找到WORKSPACRE，點擊新建文件，名字輸入“01.html”,然后點擊回車鍵創(chuàng)建。

5、在剛剛創(chuàng)建的01.html文件下輸入以下代碼。

<!DOCTYPE html>
<html>
    <head>
        <meta charest="utf-8">
        <title>HTML</title>
    </head>
    <body>
        <h1>這是我的第一個網(wǎng)頁</h1>
    </body></html>

6、鼠標右擊空白處單擊【Open In Default Browser】查看運行結(jié)果。

7、運行結(jié)果如下 。

以上就是常用的前端開發(fā)工具VS Code的下載和安裝教程了，你的第一個HTML網(wǎng)頁運行成功了嗎？

一個高效的HTML開發(fā)工具和環(huán)境是每個前端開發(fā)者的得力助手。通過合理選擇工具、配置環(huán)境、使用框架和庫、以及不斷的調(diào)試和測試，你可以將創(chuàng)意轉(zhuǎn)化為現(xiàn)實，構(gòu)建出令人驚嘆的網(wǎng)頁。記住，技術(shù)永遠在變，唯有不斷學習和實踐，才能讓你在這個數(shù)字世界中游刃有余。

今天就先講到這里了，

更多前端開發(fā)基礎(chǔ)知識點擊文末閱讀原文查看哦！

記得關(guān)注【云端源想IT】一起學編程！

我們下期再見！

END

文案編輯|云端學長

文案配圖|云端學長

內(nèi)容由：云端源想分享

為工作中接觸到一些代碼的使用，本小白開始學習編程知識，每天記錄一些自學編程過程中的一些知識點，一是為了方便跟大家分享，另外就是為了以后復習使用。

一、前端環(huán)境搭建

• 安裝Visual Studio Code，Chrome（谷歌瀏覽器）
• 安裝VS和Chrome插件

Visual Studio Code常用插件：

1.語言、格式化：

• Chinese Language Pack for Visual Studio Code 中文簡體語音包
• Prettier-Code Formatter 幾乎支持所有前端代碼的格式化
• Simple icons小巧實用的文件圖標集合
• One Dark Pro個人非常喜歡的一款主題

2.HTML/CSS插件：

• Auto Close Tag 標簽自動關(guān)閉
• Auto Rename Tag 標簽自動更名
• Auto Complete Tag 標簽自動完成
• HTML CSS Support 自動補全樣式表
• HTML Snippetshtml 代碼片段
• highlight matching tag 自動高亮顯示結(jié)束括號/標簽

3.JS/Vue插件：

• JavaScript(ES6) Code snippets JS/ES6代碼片段
• Vue Vue語法提示
• Vue2 Snippets Vue代碼片段
• Vue-beautify Vue代碼格式化

4.PHP/MySQL相關(guān)插件：

• PHP Intelephense 代碼提示與函數(shù)跳轉(zhuǎn)
• PHP IntelliSense 代碼智能感知（可選）
• PHP DocBlocker代碼塊注釋（可選）
• Format HTML in PHP格式化 PHP 中的 html 代碼
• MySQL MySQL 語法高亮

5.MarkDown語法插件：

• Markdownlint Markdown 語法檢查器
• Markdown Rreview Enhancedmardown 文件預覽

6.提高工作效率的插件：

• Path Intellisense 智能路徑提示
• Bracket Pair Colorizer 不同顏色表示不同層級括號
• Code Runner 支持常見的編程語言運行調(diào)試
• Live Server 內(nèi)置 web 服務(wù)器

7.如何在VSCode中配置PHP代碼檢查器：在VSCode配置文件（setting.json）

// 版本與路徑替換成系統(tǒng)中的php可執(zhí)行文件路徑與版本號
"php.validate.executablePath": "E:/phpstudy_pro/Extensions/php/php7.3.4nts/php.exe",
"intelephense.environment.phpVersion": "7.3.4",

二、初識HTML

1.標題和段落

• 頁面的內(nèi)容均由元素組成；
• 元素是由標簽來描述的，標簽根據(jù)元素的類型分為單標簽、雙標簽，每個元素的特征由屬性來描述，需要將屬性寫到起始標簽中。

<h1>開會通知：本周五進行大掃除</h1>
<p>開會通知：本周五進行大掃除</p>

• 元素是由標簽和屬性共同描述的；

<male sex="famale" sw="80, 90, 100" height="170" weight="200">男朋友</male>

• html中的所有內(nèi)容，如果想要添加到html文檔中，就必須要使用一個標簽。

// JS代碼必須寫到一個script標簽中
<script>
    const SITE = "Hello World！";
</script>

<?php
// php代碼必須放在一對php標簽中
echo "Hello World！";
?>

<!-- 標題標簽：除了設(shè)置文檔標題之外，還可以用來劃分頁面結(jié)構(gòu)的 -->
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>

<!-- 內(nèi)容標簽 <p></p> -->
<p>程序猿界有一句話：每一個程序猿都應(yīng)該擁有一臺MacBook Pro</p>

2.鏈接與錨點

• 鏈接標簽 a標簽-當今互聯(lián)網(wǎng)的靈魂，實現(xiàn)了全球資源之間的共享

1.target屬性：

• 規(guī)定在何處打開鏈接文檔。

1. _blank跳轉(zhuǎn)到新的頁面，在新窗口打開
2. _self(默認值) 在相同的框架中打開鏈接文檔；
3. _parent在父框架集中打開被鏈接文檔；
4. _top在整個窗口中打開被鏈接文檔；
5. iframename在指定窗口打開。

代碼案例：

<!-- _self 當前窗口打開 -->
<a href="跳轉(zhuǎn)目標" target="_self">Hello World</a>

<!-- _blank 跳轉(zhuǎn)到新的頁面，在新窗口打開 -->
<a href="跳轉(zhuǎn)目標" target="_blank">Hello World</a>

<!-- 在指定窗口打開 target="iframe內(nèi)聯(lián)框架的name值" 此時a標簽的target值需要跟iframe里的name值保持一致 -->
<a href="https://www.baidu.com/" target="baidu">打開百度</a>
<iframe srcdoc="點擊上面的按鈕打開百度" name="baidu" frameborder="0" width="600" height="500"></iframe>

• 注意：
  使用target="iframename"時，需要注意a標簽的target值需要跟iframe的name值相等。

2.錨點

• 使用錨點可以實現(xiàn)在當前頁面中的任意位置進行跳轉(zhuǎn)。

<a href="#footer">跳轉(zhuǎn)到底部</a>

<!-- 創(chuàng)建錨點 -->
<div id="footer" style="margin-top: 1000px;">This is footer</div>

• div：通用元素標簽，內(nèi)部可以放任意元素類型。
• 如何返回當前頁面頂部？
  直接將a標簽的href值設(shè)置為#即可，如：<a href="#">回到頂部</a>。
• 備注：
  vue.js、react等單頁面應(yīng)用，路由就是使用錨點實現(xiàn)的。

三、圖片元素

如果我們想要在頁面添加一張圖片，可以使用img標簽

• 必須屬性：

1. src 圖片的URL地址；
2. alt 圖片的描述信息。

• 案例：

<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度一下" width="200">

• 備注：
  設(shè)置圖片大小時，可以只設(shè)置寬度或者高度，另一個屬性就會進行等比縮放，不需要同時設(shè)置。在實際開發(fā)中，一般在CSS中設(shè)置圖片的樣式，圖片很少單獨使用，基本都是用在鏈接中。

個人總結(jié)：有些代碼看起來簡單，但是自己上手起來真的是難，屬于那種一看就會，一寫就錯，看來只能通過多寫，多練才可以熟能生巧，這是個細活，急不得，要戒驕戒躁，平穩(wěn)心態(tài)來面對這么多難題，加油！