HTML 基礎概論

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

那什麼是 Html 呢？

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

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

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

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

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

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

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

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

一般網頁基本結構如下：

<!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 的原始碼