Day 1 _ 關於 HTML 標籤語言 - 1 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 12 屆 iThome 鐵人賽

DAY 1

自我挑戰組

大學 50 萬貸款的交代系列第 1 篇

Day 1 _ 關於 HTML 標籤語言 - 1

12th鐵人賽 html

lyuki

2020-09-04 22:56:27

1812 瀏覽

分享至

前言 == 廢話的意思 σ`∀´)σ

相信是不小心按到，或是想對網頁做壞壞的事情，都會在瀏覽器按下 F12 看到下圖這樣的東西。

可能不是所有工程師都這麼有個性，但絕對沒有工程師喜歡使用者看這個。這是瀏覽器都會有的工具，可以用這個工具看到網頁原本的樣子。對了，下面這張才是我要作範例的圖，上面放錯了 (`・ω・´)

這也是 Day 1 紀錄的內容， HTML 標籤語言。

HTML 標籤語言

所謂標籤語言，有點像是你各位國高中的時候在課本做下的任何筆記。如果有這些筆記，讀書能事半功倍，考試都能考一百分呢。對於瀏覽器來說，標籤語言就是為了要讓瀏覽器理解某個區塊的意義是什麼而存在的。不過後來被當成爬蟲的目標，那就是另一個故事了。

總之，要學習做網頁，HTML 是一定要認識的。不過 HTML 從版本1長到現在的版本5，多了很多不同類型的標籤，因此，這裡只列出幾個很常會看到的標籤。剩下的標籤都在 Google 上找的到哦。

首先，先來個網頁起手式

<!--告訴瀏覽器要用什麼模式閱讀這個檔案-->
<!DOCTYPE html>    

<!--後面的 lang=zh-TW 意思是，這個網頁用的語言是繁體中文-->
<html lang=zh-TW>  

    <!--寫在head的內容不會被顯示出來，大部分會用來載入css檔案-->
    <head>         
    </head>
    
    <!--要寫的內容全部放在body裡面-->
    <body>         
    </body>
</html>

大部的網頁都是這樣的結構，再根據需求增減一些標籤與內容，就會是網路上看到的網頁原型啦!(ﾉ>ω<)ﾉ
另外，標籤通常會成對的出現像是有 head 就會有 /head 。不過種情況下多少還是有例外就是了_(:3 」∠ )_

再來會有幾個也是常用到的標籤

<!DOCTYPE html>    
<html lang=zh-TW>  
    <head>
        <!--告訴瀏覽器使用UTF-8編碼，中文才不會怪怪的。也是第一個例外-->
        <meta charset="utf-8"> 
        
        <!--用title標起來的字會顯示在瀏覽器分頁標籤上-->
        <title>我是標題</title> 
    </head>
    <body>
        <!--用h1標起來的字會很大-->
        <h1>這裡的字很大</h1> 
        
        <!--用於標示換行的標籤，是第二個出現的例外-->
        <br> 
        
        <!--用a標起來的字會是超連結，按下就可以到 href 指定的網址-->
        <a href="https://www.google.com/"> Google傳送門 </a>
        
        <!--額外寫target可以有不一樣的連結開啟方式-->
        <a href="https://www.google.com/" target="_blank"> Google分頁</a>
       
    </body>
</html>

範例

既然是第一個 HTML ，免不了來個 Hello World 囉 ξ( ✿＞◡❛)

<!DOCTYPE html>    
<html lang=zh-TW>  
<head>
    <title>(#`口ˊ) 標題啦</title>
</head>

<body>
    <h1>(／` 口ˊ)／~ ╧╧ 歡樂送啦</h1>
    <a href="https://www.google.com/">Hello Google</a>
</body>
</html>

順帶一提，這是我大學做的第一個網頁作業。(´・ω・`)