HTML基本結構

【HTML指南】Day04 – HTML 基本結構，有哪些標籤呢?

Leave a Comment / HTML學習指南, 技能 / By

在每個網頁都會有一個基本的結構標籤 ( 又稱為骨架標籤 )，那你有想過你看到瀏覽器的頁面內容是不是一大堆標籤所堆砌並標記出來的呢? 答案是肯定的。那你有想過頁面裡面最基本的結構有哪些，那些是必寫的呢?

  • HTML 頁面又稱為文檔?
  • 要如何寫第一個頁面?
  • 什麼是 html 格式?
點我瞭解 小青如何每月多賺5位數台幣

HTML 基本結構

最基礎的框架首先一定會有 html 標籤，再來是 head 標籤，它的功能是頁面的頭部跟 head 標籤的並列關係 ( 兄弟關係 ) 是 title 標籤，它有顯示頁面的名稱的功能，不然你打開頁面你不知道該頁面的標題內容，大家普遍都會寫好 title 標籤，最後是 body 標籤，它是把所有的布局內容都寫在這裡。

如何創建第一個頁面?

首先打開你的記事本，在裏頭先寫下上一節所講的 HTML 基本結構，要注意這邊都是雙標籤，有開始就有結束，如果忘記什麼是雙標籤可以複習上一篇文章，複習好了再回來這裡繼續學習，我們在這裡等你跟上!!!

STEP01

我們會先在記事本寫下 html 的雙標籤。

<html>

</html>

STEP02

接下來是要規劃 HTML 的基本骨架，可以想成 HTML 也是有頭有身體的，頭的部分先寫下 head 標籤，身體的部分就寫下 body 標籤，這樣我們就完成粗略的基礎骨架了，要注意 head 標籤和 body 標籤都是雙標籤唷!有開始就有結束。

<html>
    
    <head>

    </head>

    <body>

    </body>

</html>

STEP03

再來我們回到 head 標籤裡頭，裡面可以寫下 title 標籤，因為要讓人知道頁面的內容主題是什麼，普遍都會寫不然空白沒人知道你頁面是什麼內容。

<html>
    
    <head>

        <title>我的第一個頁面</title>
    </head>

    <body>

    </body>

</html>

STEP04

那我們完成的頁面的 title 標籤了，回到 body 標籤裡頭打入你要的內容，在這裡直接輸入你要打的英文或是中文字即可，這樣我們就完成我們的第一個網頁了。

點我瞭解 小青如何每月多賺5位數台幣 

<html>
    
    <head>

        <title>我的第一個頁面</title>
    </head>

    <body>

        Hello~
    </body>

</html>

STEP05

要記得我們是在記事本寫的內容，整理是文件 txt 檔，必須另存成 html 檔才能夠用瀏覽器打開來看，當你另存好 .html 格式就會變成一個瀏覽器的圖式，依照你預設瀏覽器為主，建議網頁開發使用 Chrome。

小總結

標籤名稱定義說明
<html></html>HTML文檔標籤頁面中最大的標籤，又稱為跟標籤，所有標籤都必須在跟標籤裡頭
<head></head>文檔的頭部head標籤為頁面的頭部區塊，裡頭會放tilte標籤
<title></title>文檔的標題title標籤是讓使用者知道頁面的標題
<body></body>文檔的主體所有網頁佈局規劃都會寫在body標籤裡頭，在HTML中算是最重要的區塊
此表格為HTML最基礎的骨架

當你創建第一個頁面時以上就是最為基本的內容，是不是不難呀! 你可能有發現在 body 標籤我們直接打文字在裡面，最後在頁面也是可以呈現，因為我們還沒學到其他標籤，一般文字內容我們也會使用特定標籤把文字包含起來，雖然不包起來也是可以顯示，但是缺點要更改他們的字體顏色、字體大小…等更多細節就無法做到，因為它不在標籤裡頭這點需要注意。

總結

透過完成第一個頁面你會更加了解，開發一個網頁的過程，你會了解開發網頁其實用作業系統內建的筆記本就可以開始來寫了，但是想要確定是不是你所寫的內容一定要使用瀏覽器選染呈現，你才能知道是不是有寫好。

這邊你可能會想，用筆記本寫是有點不太方便有沒有別的編輯軟體，是有的在往後文章會介紹編輯工具，讓你開發時更有效率。

不管任何一個網頁你去查看他們的代碼，你一定會發現一定有 html 標籤、head 標籤、title 標籤、body 標籤，就跟人一樣大家普遍都會有頭和身體，這就是網頁的最基本架構，也就是骨架。

點我瞭解 小青如何每月多賺5位數台幣

其他相關文章推薦:

能看到這裡通常只有 1％ 的人，很感謝您可以閱讀到這裡（鞠躬）
本篇文章歡迎社群分享，可按分享按鈕，讓更多的人知道此篇文章
如果是引用本篇文章任何段落請附上本篇文章連結即可唷！
嚴禁搬運整篇文章到你個人部落格、寫成新聞稿
這麼做你會被任何搜尋引擎懲罰 Ban 掉
如需合作請右上角服務項目 -> 聯繫我們
by 小青

發表迴響