iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 1
1
自我挑戰組

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

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

  • 分享至 

  • xImage
  •  

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

相信是不小心按到,或是想對網頁做壞壞的事情,都會在瀏覽器按下 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>

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


下一篇
Day 2 _ 關於 HTML 標籤語言 - 2
系列文
大學 50 萬貸款的交代30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
glj8989332
iT邦研究生 4 級 ‧ 2020-09-09 16:18:05

現在才看到這系列的標題, 好沉重阿..../images/emoticon/emoticon02.gif

我要留言

立即登入留言