初探HTML

5 min readMar 1, 2017

什麼是HTML

HTML的中文翻譯是－超文件標示語言（英語：HyperText Markup Language，簡稱：HTML）是一種用於建立網頁的標準標示語言。一般來說當我們使用瀏覽器瀏覽特定資源時（在網址列輸入某個網址），我們可能會得到一份文件、下載檔案或是擁有大量資訊的頁面。當我們的瀏覽器去讀取這些頁面時，會去讀取HTML檔中的資料，並轉化出一個視覺化、對人類友善的網頁。（css的部分下次再談）

如果你有興趣的話，在任何一個網頁上點擊右鍵，並檢視網頁原始碼，你就會看到一大堆密密麻麻的文字，而這其實才是你造訪某個網頁後最初得到的東西。至於我們眼睛所看到的畫面，都是透過瀏覽器幫我們“翻譯”之後所看到的。

值得注意的是，放在網頁上的HTML檔的檔名需要是.html，如果使用txt檔則會得到純文字，不會有特別的畫面效果。

HTML基本的組成

接下來我想介紹HTML最基本的組成，Elements、Tags還有Attributes

什麼是Elements

Element是html中構成一切的元素，頁面上呈現的所有東西都應該用適當的element所包覆。如果沒有用適當的element包覆的文字、符號仍會呈現在頁面上，雖然視覺可見，但是對爬蟲或是頁面本身並不清楚”它“所代表的意義。element的構造包含start tag、內容還有end tag，像是：

<h1>你好</h1>

一般來說大多數的element都是由start tag和end tag所組成，像是<p>哈囉你好</p>，但是有些element只有start tag並沒有end tag，我們稱這種element為self-closing element。而在self-closing element的start tag的“>”之前，會有一個“/”（但基本上在HTML5中可有可無）符號表示結束。像是img element就是常見的self-closing element，如：

<img src="https://example.jpg" />

什麼是Tags

Tags用來標明element的起始和結束範圍，由小於“<“和大於“>”包覆特定帶有html語意的文字/數字，我們一般稱之為element name，如<p>中的“p”，代表的是文字段落（paragraph）的意思。

什麼是Attributes

Attributes用來提供element額外的資訊，像是標明代號（id attribute）、source來源（src attribute），甚至是將css寫在element中也是透過attribute來提供資訊。而attribute是被寫在start tag中、element name之後。

<p id="1">Launch School</p>

建立一個簡單的網頁

<!DOCTYPE html>
<html>
  <head>
    <title>我的個人頁面</title>
  <head>
  <body>
    <h1>歡迎來到我的網頁</h1>
    <p>我叫林家弘</p>
    <img src="avatar.jpg" width="10%">
  <body>
</html>

各Element的意思

<!DOCTYPE html>：是用來對瀏覽器聲明我們所使用的HTML的版本，而值得注意的是!DOCTYPE並非tag或element

<html>：html被視為root element，在這個頁面下所有的element都必須被撰寫在html element之中，超出的話則會被視為一般文字

<head>：head中是那些載入頁面時所需要、但我們不希望呈現在頁面內容上的資訊，像是title、css檔、js檔等等。

<body>：在這個element中的資訊，是那些我們想要“呈現”在使用者眼前的資訊。也就是說，所有你輸入在body內的內容使用者都看得到，除非特別設定attribute或css selector使用者才無法看到。

<h1>-<h6>：這些element表示的是heading的意思，權重最大的是1最小的是6，可以想像成是大標題到小標題的差異，h1的預設字體大小大於h6。而不只是在頁面內眼上的呈現，heading權重也在網頁的SEO上有所影響。

以上就是HTML最基本的組成，之後會花更多的時間介紹HTML/CSS的觀念。