web前端HTML教程-開(kāi)發(fā)環(huán)境搭建下載和安裝編輯器

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

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

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

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

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

常用html代碼編寫的免費(fèi)軟件有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，所以下面為了同學(xué)們的學(xué)習(xí)方便，對(duì)HBuilderX的下載和安裝做詳細(xì)的教程。

一，下載

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

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

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

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

二，安裝

鼠標(biāo)右擊下載下來(lái)的壓縮文件進(jìn)行解壓。

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

解壓完成后鼠標(biāo)雙擊HBuilderX文件夾：

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

因?yàn)镠BuilderX是一個(gè)綠色軟件所以沒(méi)有桌面快捷方式和開(kāi)始菜單快速啟動(dòng)程序，我們可以右擊HBuilderX.exe文件創(chuàng)建桌面快捷方式。

小百科：

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

三，新建項(xiàng)目

HBuilderX編輯器初次啟動(dòng)時(shí)的默認(rèn)界面是下圖所示：

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

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

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

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

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

編寫一段代碼：

運(yùn)行：

在瀏覽器上觀察效果：

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

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

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

雅黑主題：

雅藍(lán)主題：

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

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

這里是云端源想IT，幫你輕松學(xué)IT”

嗨~ 今天的你過(guò)得還好嗎？

生命是什么呢，

生命是時(shí)時(shí)刻刻不知如何是好。

- 2024.03.06 -

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

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

一、前端開(kāi)發(fā)工具簡(jiǎn)介

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

什么是 “IDE”

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

IDE 通用特點(diǎn)：

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

前端開(kāi)發(fā)IDE

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

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

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

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

二、VS Code下載與安裝

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

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

點(diǎn)擊【Download】進(jìn)入下載，不要點(diǎn)擊【Download for Windows Stable Build】，否則它會(huì)自動(dòng)幫你下載User Installer用戶版本。

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

2、然后你會(huì)看見(jiàn)Windows，Linux，蘋果三個(gè)版本，我們選擇Windows版本，選擇System Installer 點(diǎn)擊【x64】進(jìn)行下載，不要點(diǎn)擊【↓ Windows windows8,10,11】，否則它也會(huì)自動(dòng)默認(rèn)下載User Installer用戶版本。

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

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

其實(shí)選哪個(gè)版本都無(wú)傷大雅，就算你下載了【User Installer】版本也沒(méi)事，因?yàn)闆](méi)人會(huì)沒(méi)事把自己電腦上的賬戶換成其他人的賬戶登錄，就算換了也可以換回來(lái)，只是有時(shí)候特殊情況換了個(gè)賬戶登錄不能使用就有一點(diǎn)麻煩，所以還是推薦盡量下載【System Installer】版本。

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

3、正在下載

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

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

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

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

7、選擇開(kāi)始菜單文件夾，默認(rèn)"Visual Studio Code",單擊【下一步】。

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

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

【將“通過(guò)Code打開(kāi)”操作添加到Windows資源管理器文件上下文菜單】：選中一個(gè)文件鼠標(biāo)右鍵可以通過(guò)VScode打開(kāi)文件。

【將“通過(guò)Code打開(kāi)”操作添加到Windows資源管理器目錄上下文菜單】：選中一個(gè)文件夾鼠標(biāo)右鍵可以通過(guò)VScode打開(kāi)文件夾。

【將Code注冊(cè)為受支持的文件類型的編輯器】：對(duì)于受支持的文件類型的文件，鼠標(biāo)右鍵選擇“打開(kāi)方式”，可以通過(guò)“Vscode”打開(kāi)。

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

9、單擊【安裝】進(jìn)行安裝。

10、安裝完成后單擊【完成】啟動(dòng)。

三、VS code配置插件

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

1、下載漢化包

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

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

2、下載【會(huì)了吧】插件

在搜索欄里搜索【會(huì)了吧】，這個(gè)是在你敲代碼時(shí)會(huì)自動(dòng)識(shí)別你敲的單詞進(jìn)行翻譯，如果你有一個(gè)單詞不認(rèn)識(shí)，可以點(diǎn)進(jìn)“會(huì)了吧”看看翻譯，對(duì)英語(yǔ)基礎(chǔ)差的人很友好。

3、下載【Open in browser】插件

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

4、下載【Live Server】插件

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

四、用VScode編寫HTML代碼

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

2、進(jìn)入VScode找到左上角的文件選擇點(diǎn)擊打開(kāi)文件夾。

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

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

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

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

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

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

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

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

今天就先講到這里了，

更多前端開(kāi)發(fā)基礎(chǔ)知識(shí)點(diǎn)擊文末閱讀原文查看哦！

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

我們下期再見(jiàn)！

END

文案編輯|云端學(xué)長(zhǎng)

文案配圖|云端學(xué)長(zhǎng)

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

為工作中接觸到一些代碼的使用，本小白開(kāi)始學(xué)習(xí)編程知識(shí)，每天記錄一些自學(xué)編程過(guò)程中的一些知識(shí)點(diǎn)，一是為了方便跟大家分享，另外就是為了以后復(fù)習(xí)使用。

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

Visual Studio Code

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

Visual Studio Code常用插件：

1.語(yǔ)言、格式化：

Chinese Language Pack for Visual Studio Code 中文簡(jiǎn)體語(yǔ)音包
Prettier-Code Formatter 幾乎支持所有前端代碼的格式化
Simple icons小巧實(shí)用的文件圖標(biāo)集合
One Dark Pro個(gè)人非常喜歡的一款主題

2.HTML/CSS插件：

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

3.JS/Vue插件：

JavaScript(ES6) Code snippets JS/ES6代碼片段
Vue Vue語(yǔ)法提示
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 語(yǔ)法高亮

5.MarkDown語(yǔ)法插件：

Markdownlint Markdown 語(yǔ)法檢查器
Markdown Rreview Enhancedmardown 文件預(yù)覽

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

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

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

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

二、初識(shí)HTML

1.標(biāo)題和段落

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

<h1>開(kāi)會(huì)通知：本周五進(jìn)行大掃除</h1>
<p>開(kāi)會(huì)通知：本周五進(jìn)行大掃除</p>

元素是由標(biāo)簽和屬性共同描述的；

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

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

// JS代碼必須寫到一個(gè)script標(biāo)簽中
<script>
    const SITE = "Hello World！";
</script>

<?php
// php代碼必須放在一對(duì)php標(biāo)簽中
echo "Hello World！";
?>

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

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

2.鏈接與錨點(diǎn)

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

1.target屬性：

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

_blank跳轉(zhuǎn)到新的頁(yè)面，在新窗口打開(kāi)
_self(默認(rèn)值) 在相同的框架中打開(kāi)鏈接文檔；
_parent在父框架集中打開(kāi)被鏈接文檔；
_top在整個(gè)窗口中打開(kāi)被鏈接文檔；
iframename在指定窗口打開(kāi)。

鏈接地址

代碼案例：

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

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

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

注意：
使用target="iframename"時(shí)，需要注意a標(biāo)簽的target值需要跟iframe的name值相等。

2.錨點(diǎn)

使用錨點(diǎn)可以實(shí)現(xiàn)在當(dāng)前頁(yè)面中的任意位置進(jìn)行跳轉(zhuǎn)。

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

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

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

三、圖片元素

如果我們想要在頁(yè)面添加一張圖片，可以使用img標(biāo)簽

必須屬性：

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

案例：

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

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

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

在線咨詢

上一篇：html初學(xué)者，用table完成頁(yè)面布局
下一篇：原生JS手寫絲滑流暢的元素拖拽效果

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

web前端HTML教程-開(kāi)發(fā)環(huán)境搭建下載和安裝編輯器

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

一、前端開(kāi)發(fā)工具簡(jiǎn)介

二、VS Code下載與安裝

三、VS code配置插件

四、用VScode編寫HTML代碼