作者簡(jiǎn)介：hello！大家好，初學(xué)前端知識(shí)，請(qǐng)多多指教。
希望我的分享能夠幫助到更多的人，如果覺得我的分享有幫助的話，請(qǐng)大家一鍵三連支持一下哦~
前言
————————————————————————————
剛接觸前端，零基礎(chǔ)小白，從頭開始學(xué)起，請(qǐng)大家多多指教~
下面是VsCode使用教程和html基礎(chǔ)知識(shí)的簡(jiǎn)單介紹，希望這篇文章能幫助到更多初學(xué)前端的人，加油吧！
一、VsCode編輯器使用教程
1、VsCode的下載與安裝
官網(wǎng)下載地址：https://code.visualstudio.com/
2、安裝兩個(gè)有用的插件
在VsCode編輯器里，這兩個(gè)插件很有用哦，一定要提前安裝好~
3、新建文件
在這里創(chuàng)建一個(gè)文件，名字是demo-01.html，然后回車
*注意是html結(jié)尾的文件名
如果不是html后綴的，就是這個(gè)樣子，這時(shí)候不要慌，右擊然后重新命名就可以了
二、第一個(gè)小項(xiàng)目
shift+1輸入一個(gè)感嘆號(hào)，然后回車
回車之后就出現(xiàn)這幾行代碼啦，直接在< body >< /body>里寫代碼就好了，
我們先寫一個(gè)hello world
然后右擊面板，點(diǎn)擊這里，自己選瀏覽器
此時(shí)，瀏覽器里就會(huì)出現(xiàn)hello world了
三、HTML基礎(chǔ)知識(shí)
1、 < b > 標(biāo)簽定義及用法
< b >標(biāo)簽是使用來定義粗體的文本，意思就是在該標(biāo)簽中的文本將顯示為粗體。
< b > 文本內(nèi)容 < /b >
說明：文本內(nèi)容將顯示為粗體
2、< i > 標(biāo)簽定義及用法
說明：文本內(nèi)容將傾斜顯示
3、< u > 標(biāo)簽定義及用法
說明：j將在文本內(nèi)容下顯示下劃線
4、< s > 標(biāo)簽定義及用法
說明：文本內(nèi)容將顯示刪除線
效果如下：
標(biāo)題標(biāo)簽:h1-h6
現(xiàn)在的效果如下：
5、< br >標(biāo)簽定義及用法
現(xiàn)在效果是這樣的：
6、圖像標(biāo)簽（< img >）和源屬性（src）
在 HTML 中，圖像由 < img> 標(biāo)簽定義。
< img> 是空標(biāo)簽，意思是說，它只包含屬性，并且沒有閉合標(biāo)簽。
要在頁面上顯示圖像，你需要使用源屬性（src）。src 指 “source”。源屬性的值是圖像的 URL 地址。
定義圖像的語法是：
< img src=“url” />
URL 指存儲(chǔ)圖像的位置。
瀏覽器將圖像顯示在文檔中圖像標(biāo)簽出現(xiàn)的地方。如果你將圖像標(biāo)簽置于兩個(gè)段落之間，那么瀏覽器會(huì)首先顯示第一個(gè)段落，然后顯示圖片，最后顯示第二段。
替換文本屬性（Alt）
alt 屬性用來為圖像定義一串預(yù)備的可替換的文本。替換文本屬性的值是用戶定義的。
先把要放的圖片放到這個(gè)html文件相同的路徑下
<img src="./demo.jpg" alt="">
HTML 文件路徑
<img src="demo.jpg"> picture.jpg 位于與當(dāng)前網(wǎng)頁相同的文件夾
<img src="images/demo.jpg"> picture.jpg 位于當(dāng)前文件夾的 images 文件夾中
<img src="/images/demo.jpg"> picture.jpg 當(dāng)前站點(diǎn)根目錄的 images 文件夾中
<img src="../demo.jpg"> picture.jpg 位于當(dāng)前文件夾的上一級(jí)文件夾中
好啦，看到這里，想必你對(duì)html基礎(chǔ)知識(shí)一定也有了初步認(rèn)識(shí)了，下邊是以上操作的所有代碼文章來源：http://www.zghlxwxcb.cn/news/detail-801342.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
hello world
<b>hello world</b>
<i>傾斜</i>
<u>下劃線</u>
<s>刪除線</s>
<h1>一級(jí)標(biāo)題</h1>
<h2>二級(jí)標(biāo)題</h2>
<h3>三級(jí)標(biāo)題</h3>
<h6>六級(jí)標(biāo)題</h6>
第一段<br>第二段<br>第三段<br>
<img src="./demo.jpg" alt="">
</body>
</html>
寫在最后
原創(chuàng)不易，希望大家多多支持！
點(diǎn)贊+收藏+評(píng)論
之后我會(huì)繼續(xù)更新前端學(xué)習(xí)小知識(shí)，關(guān)注我不迷路
一鍵三連~文章來源地址http://www.zghlxwxcb.cn/news/detail-801342.html
到了這里，關(guān)于前端基礎(chǔ)從頭學(xué)——VsCode使用教程+html基礎(chǔ)（入門篇）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
