所謂網頁,可以先理解成就是網路節點上的一個檔案,這個檔案型態是.html,瀏覽器會知道怎麼去解析.html檔案型態,就像是word可以開啟.doc或.docx; excel可以開啟.exl等,而瀏覽器就是專門來開啟.html型態的,而「瀏覽」這個動作就是我們在瀏覽器上方輸入一個「位置」,不管是網路上的位置還是本機的位置,瀏覽器就會去試著看這個位置是否有網頁的檔案,有的話就將其開啟並解析,然後呈現給我們看
建立.html檔案
安裝好vscode之後,我們將vscode打開。並點選新增檔案

VSCODE會幫我們開啟一個新的空檔案,我們先將這個檔案存檔。

存檔的位置可以在自已電腦的任一地方,只要自已知道位置不管是桌面還是某個資料夾都好,重點是我們得先替這個檔案的副檔名命名為index.html

index.html可以這麼理解,index就是這個檔案的檔名,瀏覽器若導航的位置是一個目錄資料夾(一般也都是),那瀏覽器會優先去拿該目錄資料夾內的index.html檔案,所以我們可以先命名成這個檔名,而.html就是前面所說的網頁的檔案型態了。
若要命名成aaa.html也是OK的,因為我們目前練習只是單一檔案,還不會導覽到該目錄底下
存檔後就會發現vscode偵測到我們的檔案型態是html,也幫我們把對應的標示都套好了

我們先在這個檔案裡打上
hello world!
當然你要打任何其他的文字也沒有任何問題,完成之後存檔,存檔後在電腦的該目錄資料夾應該也可以看到檔案本身
直接選擊這個檔案,一般來說系統會用預設的瀏覽器開啟,這時後就可以直接看到我們建立的網頁

很簡單對吧,瀏覽器會很單純的把我們的內容直接反應出來,那如果我們希望這個字大一點呢?
我們在vscode裡面打 h1
然後按下鍵盤的 TAB

前面有提過,html就是由一對一對的標籤所構成的,標籤的格式就是< > xxx </ >
vscode會自動偵測到我們要輸入一對指定的標籤叫作h1
,所以幫我們直接把標籤完成。
然後我們在標籤內一樣打入 hello wolrd!
的字並且存檔
接下來的課程只要是說在「標籤內」,意思就是在
< > 這邊 </>
不要打成< 這邊>
了哦
hello world!
<h1>hello world</h1>
我們在瀏覽器看一下目前的樣子

可以發現被h1
包起來的文字變大了,標籤的功能就是告訴瀏覽器:「我現在這個標籤裡面的東西,都要用h1這個格式來呈現」,所以在這個標籤內的文字就會以內定的h1標題大小呈現出來了,內定的標題有h1~h6可以使用。