柚子快報(bào)激活碼778899分享：前端 html 文檔標(biāo)題

Vova優(yōu)選出海集綜合2025-05-05480

http://yzkb.51969.com/

在編寫完代碼之后需要保存再打開瀏覽器才能看到界面的效果，作者在初學(xué)網(wǎng)頁(yè)的時(shí)候經(jīng)常忘記保存代碼，導(dǎo)致頁(yè)面一直不出現(xiàn)效果。所以推薦大家開啟vscode里的自動(dòng)保存。

左上角：文件->勾選自動(dòng)保存。

創(chuàng)建文件/文件夾

在VSCode中除了在之前介紹的可以直接將文件/文件夾直接拖進(jìn)vscode以外，還可以快捷的創(chuàng)建文件/文件夾。只需要選中要?jiǎng)?chuàng)建文件/文件夾的父級(jí)目錄再點(diǎn)擊按鈕就可以快捷創(chuàng)建。

具體操作如下圖：

插件推薦

這里推薦幾款目前階段適合大家的插件。插件這部分我不會(huì)一次推薦很多，只會(huì)分階段的推薦，并且講解每個(gè)插件的具體作用。以防大家裝了一堆插件，結(jié)果連具體插件是做什么的都不知道。（也歡迎大家多多關(guān)注作者的干貨推薦專欄，里面會(huì)推薦很多實(shí)用的插件）

Auto Close Tag

自動(dòng)閉合標(biāo)簽。裝上這款插件我們?cè)趯憳?biāo)簽的時(shí)候只需要輸入/就可以快速生成閉合標(biāo)簽。

Auto Rename Tag

自動(dòng)重命名標(biāo)簽。這個(gè)插件可以讓我們?cè)谛薷臉?biāo)簽時(shí)自動(dòng)幫我們修改另一個(gè)。比如在修改

標(biāo)簽為標(biāo)簽的時(shí)候，它會(huì)自動(dòng)幫我們把

標(biāo)簽替換為標(biāo)簽。

open in browser

快速在瀏覽器打開，裝上這個(gè)插件可以讓我們?cè)趘scode界面中快速打開瀏覽器

pass：該插件作者在初學(xué)的時(shí)候出現(xiàn)過(guò)快捷鍵不能正常打開瀏覽器的情況，解決辦法是降低該插件的版本即可。

使用方式：

右鍵選擇快捷鍵：Alt + b

Live Server

實(shí)時(shí)預(yù)覽，這款插件可以在本地運(yùn)行一個(gè)微型服務(wù)器，讓我們可以實(shí)時(shí)預(yù)覽編輯的效果。（在修改召喚神龍那篇文章中就是用該插件和谷歌的另一個(gè)路徑映射的插件聯(lián)動(dòng)，從而達(dá)到修改游戲的效果。有興趣的同學(xué)可以去看看我寫的修改召喚神龍的文章）

使用方式：

安裝好該插件之后在vscode右下角會(huì)出現(xiàn)一個(gè)’Go Live’，點(diǎn)擊即可。

Path Intellisense

路徑聯(lián)想，在我們引入圖片或者其他文件的時(shí)候這款軟件會(huì)為我們提示路徑。

HTML常用標(biāo)簽介紹

在網(wǎng)頁(yè)中，每個(gè)html標(biāo)簽被稱為元素，每個(gè)元素都有對(duì)應(yīng)的屬性（關(guān)于屬性，會(huì)在下一篇CSS介紹的文章中詳細(xì)講解）

HTML標(biāo)簽的本質(zhì)是為文本添加語(yǔ)義！

在學(xué)習(xí)編程的時(shí)候會(huì)涉及大量的概念，以及一些常用的代碼片段。所以建議大家養(yǎng)成記筆記的習(xí)慣。

拓展內(nèi)容

建議大家自主學(xué)習(xí)gitpage搭建個(gè)人博客（后期可能會(huì)出教程，等不了的同學(xué)可以自行百度，關(guān)鍵詞：gitpage搭建個(gè)人博客）

同時(shí)建議大家學(xué)習(xí)markdown語(yǔ)法，并選擇一款順手的markdown編輯器。作者使用的是typroa 0.9版本（因?yàn)樵撥浖?.0之后的版本收費(fèi)）

typroa歷史版本下載：https://typora.io/releases/all

既然安裝了typroa可以自主學(xué)習(xí)一下圖床的概念，再將Typroa和PicGo聯(lián)動(dòng)起來(lái)

世上無(wú)難事，只要肯登攀。 —— 毛澤東《水調(diào)歌頭·重上井岡山》

pass:以下標(biāo)簽取自菜鳥教程

基本文檔標(biāo)簽

文檔標(biāo)題

可見文本…

網(wǎng)頁(yè)基礎(chǔ)的結(jié)構(gòu)，主要需要注意層級(jí)結(jié)構(gòu)，以及外部文件是在標(biāo)簽中引入（js文件可以在body中引入）

基本標(biāo)簽

一級(jí)標(biāo)題

二級(jí)標(biāo)題

三級(jí)標(biāo)題

. . .

六級(jí)標(biāo)題

文本

‘盒子’

這是一個(gè)段落。

（換行）

（水平線）

大家在這里可以試試標(biāo)簽和

標(biāo)簽有什么區(qū)別

提示：行級(jí)元素，塊級(jí)元素（后續(xù)DIV+CSS布局章節(jié)會(huì)詳細(xì)講解）

文本格式化

粗體文本

計(jì)算機(jī)代碼

強(qiáng)調(diào)文本

斜體文本

鍵盤輸入

預(yù)格式化文本

更小的文本

重要的文本

（縮寫）

（聯(lián)系信息）

（文字方向）

（從另一個(gè)源引用的部分）

（工作的名稱）

（刪除的文本）

（插入的文本）

（下標(biāo)文本）

（上標(biāo)文本）

鏈接

普通的鏈接：鏈接文本

圖像鏈接：

郵件鏈接：發(fā)送e-mail

書簽：

提示部分

跳到提示部分

注意a標(biāo)簽設(shè)置跳轉(zhuǎn)的屬性是href可不是src。

圖片

圖片這里的話需要注意一點(diǎn)就是文件的引用路徑，相對(duì)路徑和絕對(duì)路徑是不同的

相對(duì)路徑和絕對(duì)路徑的區(qū)別：https://blog.csdn.net/qq_34107571/article/details/82834825

./是當(dāng)前文件夾

…/是上一級(jí)文件夾

…/…/是上上一級(jí)文件夾

在目前的階段，圖片顯示不出絕大部分是因?yàn)槁窂降膯栴}，相對(duì)路徑需要結(jié)合之前推薦的Path Intellisense 路徑聯(lián)想插件多多練習(xí)。

pass：使用絕對(duì)路徑的時(shí)候?qū)⒋a發(fā)送給別人，圖片會(huì)因?yàn)槁窂轿恢脹]有對(duì)應(yīng)圖片而顯示不出來(lái)，所以需要注意。其他外部文件（列如CSS、JS文件）在使用絕對(duì)路徑的時(shí)候也會(huì)出現(xiàn)這種問題。這點(diǎn)需要注意。

無(wú)序列表

項(xiàng)目項(xiàng)目有序列表

第一項(xiàng)第二項(xiàng)定義列表

項(xiàng)目 1

描述項(xiàng)目 1

項(xiàng)目 2

描述項(xiàng)目 2

表格

表格標(biāo)題表格標(biāo)題表格數(shù)據(jù) 表格數(shù)據(jù)

框架

表單

蘋果香蕉櫻桃