整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

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

          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

          • 安裝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)來面對這么多難題,加油!


          主站蜘蛛池模板: 嫩B人妻精品一区二区三区| 国产一区二区不卡在线播放| 亲子乱av一区二区三区| 久久久久人妻精品一区二区三区| 日本在线视频一区| 中文字幕无码不卡一区二区三区| 亲子乱av一区二区三区| 国产一区二区三区美女| 欧美av色香蕉一区二区蜜桃小说| 亚洲电影一区二区三区| 免费一区二区无码东京热| 国产一区二区三区在线电影| 成人免费一区二区无码视频| 99精品国产一区二区三区2021 | 久久久久人妻精品一区二区三区 | 能在线观看的一区二区三区| 无码中文字幕人妻在线一区二区三区 | 亚洲bt加勒比一区二区| 夜夜添无码试看一区二区三区| 国产成人综合精品一区| 日本在线视频一区| 一区二区三区美女视频| 国产成人片视频一区二区| 红桃AV一区二区三区在线无码AV| 国产一区二区三区樱花动漫| 日本一区二区三区精品国产| 天堂不卡一区二区视频在线观看| 一区五十路在线中出| 日韩一区二区三区精品| 久久亚洲中文字幕精品一区四| 亚洲熟女乱综合一区二区| 国产日韩精品一区二区三区在线| 国产日韩一区二区三区在线观看| 亚洲日韩精品一区二区三区 | 日本一区二区在线不卡| 久久精品综合一区二区三区| 精品久久一区二区| 亚洲字幕AV一区二区三区四区| 日本一区免费电影| AV无码精品一区二区三区宅噜噜| 久久91精品国产一区二区|