認識 HTML: Hello World

HTML 這幾年因為 Mobile 的崛起,因此有紅一點點,又因為 HTML5 非常強大的關係,有了強大的誘因讓許多開發者都轉而學習 HTML5

此篇文章不會對於 HTML 的歷史扯上任何的關係,要看歷史可以自行 Google 或是去看 WIKI…

HTML5 要怎麼寫呢?

打開純文字編輯器並且打上下面內容

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
</head>
<body>
Hello World.
</body>
</html>

並且儲存成為 index.html,第一個 HTML5 的檔案就完成了

要怎麼看成果呢?直接把檔案拉近瀏覽器,或是直接點兩下使用預設瀏覽器開啟即可!

其中 分頁的標題就是 包住的部分

那麼網頁內容的 Hello World 就是 包著的部分

代表著此網頁是告知瀏覽器以 HTML5 的格式 parse 此網頁(未來有機會再詳細說明)

在一份正確的網頁裡面只會有一個 HEAD 與一個 BODY 標籤

HEAD 通常存放描述的資訊,不會有任何內容顯示在畫面上(標題 (title) 除外)

BODY 通常存放所有看的到的內容,你看的到的東西,都要寫在 BODY 內

英文沒問題,那麼中文呢?試試看吧!

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
<title>你好</title>
</head>
<body>
你好,世界
</body>
</html>

難道這世界上網頁都只能是英文嗎?

當然不可能,不然你怎麼看到這篇文章上的中文呢??

要讓中文可以顯示必須要宣告編碼為 UTF-8,語法如下

1
<meta http-equiv="content-type" content="text/html; charset=utf-8">

因為是不會顯示在頁面上的所以要放在 HEAD 裡面,又因為它是重要的定義

倘若有中文出現在此定義之前,那麼一樣會是亂碼

因此建議放在 的下一行直接輸出,結果如下:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Hello</title>
</head>
<body>
Hello World.
</body>
</html>

最後網頁瀏覽的結果如下圖:

恭喜啦,第一個中文的網頁完成了 :)