知識文章HTML 基礎概論

HTML 基礎概論

對於新手網頁工程師而言,認識什麼是 Html 是一件基礎的事,基本上瀏覽器開啟網頁,幾乎都是開啟 Html 的!

 

那什麼是 Html 呢?

詳細的歷史淵源、解釋這邊就不多說啦,大家若有興趣可以自己去 Goolge or Wiki

這邊簡單的說明一下,Html 是一種標籤語言,什麼是標籤?

<table></table> 這個就是標籤!

基本上在 Html 的世界,只要是用小括弧包起來的都可視為一個標籤!

Html 標籤基本上分成兩種,一種是 <table></table> 這樣的有頭有尾的格式,這種稱作雙標籤元素

另外一種則是 <input /> 這樣形式的單標籤元素,而這些標籤通常會稱作 Html 的<b>元素</b>!

 

所以這邊做個小整理總結:

  • Html 是一種標籤語言,是由標籤所組成的
  • Html 標籤分成兩種,分別是單標籤、雙標籤
  • Html 裡面的標籤亦稱作元素

 

既然組成網頁的元素都是這些標籤所構成,那就來講一下網頁的基本結構吧!

一般網頁基本結構如下:

<!DOCTYPE html>
<html>
  <head>
    <title>網頁標題</title>
  </head>
  <body>
    網頁內容
  </body>
</html>

 

第一行的 <!DOCTYPE html>,我們目前就先別理它,照寫就對了!

那第二行開始,你會發現都是一對對的標籤,從最外圍的 <html>,裡面分成 <head>、<body>,這就是網頁的基本結構!

 

head,顧名思義就是 Html 檔案的開頭,基本的 css、meta、JavaScrip 都會在這邊引用,那 css、meta、JavaScrip 這些是什麼?當然現在先不用知道沒關係!

在 head 裡面可以看到 title 標籤,這個標籤就是設定你的網頁標題

body,代表著網頁內容,所有網頁可見的內容,都是要寫在這裡面的!

 

既然知道了這些,那就實作一下,首先在你的電腦內新增一個 Html 文字檔案,接著命名它為 index.html,然後用文字編譯器編輯它!

內容就貼上以下這段程式碼:

<!DOCTYPE html>
<html>
  <head>
    <title>網頁標題</title>
  </head>
  <body>
    網頁內容
  </body>
</html>

 

完成後儲存,接著用你的滑鼠大力的點兩下 index.html,亦或者把 index.html 拖到你的瀏覽器上,這樣你就會看到網頁瀏覽器執行了你的 index.html 囉!

 

下面是基本結構的對照圖,這就是基本的 Html 的結構!

HTML 基礎概論 - 宙思設計 ZEUS // Design Studio
▲ Html 結構對照圖

 

其實每個瀏覽器都有可以檢視原始碼的功能,試著對剛剛開啟的網頁,用 滑鼠按右鍵 > 檢視原始碼  後,就可以看到網頁的原始碼!

HTML 基礎概論 - 宙思設計 ZEUS // Design Studio
▲ index.html 的原始碼

張貼者:吳政賢發佈。
瀏覽人數:145 人