看板 Knuckles
作者 標題 鄉民也能懂的 HTML
時間 2012年03月28日 Wed. AM 09:31:40
前言
什麼是標記語言？
大家應該都知道 HTML 吧，總之就是用來寫網頁的語言嘛。
這樣講起來好像是程式語言似的，有時候還會聽到有人說想學寫網頁程式，所以開始學 HTML。
不過 HTML 不是程式語言喔！程式語言必需要有變數、函式、迴圈、條件判斷這些東西，而 HTML 都沒有，所以以後不要再說會寫 HTML 就是在會寫程式啦！
HTML 只是一種標記語言，後面兩個字母 ML 就是 Markup Language 的意思。
那標記語言又是什麼咧？
舉個例來說，我想把重點文字加底線，可以使用
使用瀏覽器看就會變成
有沒有看到重點文字有加上底線了呢？
其中的<u>...</u>就是用來說明包起來的文字要設為粗體的標記語言
從這個例子可以知道 HTML 就是用 <標籤名稱> 與 </標籤名稱>
把一段文字包起來，然後依標籤名稱賦與這段文字某種屬性
其他常見用來描述字體格式的 HTML 標籤還有：
<b>粗體</b>、<i>斜體</i>、<s>刪除線</s> …
除了用來描述字體格式， HTML 也可以用來排版，例如：
<p>代表這是一個段落
<br>代表要換行
<table>、<tr>、<td> 用來產生一個表格
<ul>、<ol>、<li> 代表每段前面要加上項目符號或編號
文章結構
利用 HTML 把整份文件的所有文字都加上各種 HTML 標籤後，就可以把文件變成一個樹狀結構啦
例如這個網頁：http://pttcard.twbbs.org/web/ 用Chrome開，然後按F12
![[圖]]()
就可以看到這個網頁的 HTML 樹狀結構了
一個標準的 HTML 結構會像這樣：
整個文件都用<html>包起來，然後分成<head>與<body>兩個部份
<head>裡面是用來放一些要給瀏覽器看得東西，例如要顯示在視窗標題列上的<title>
<body>裡放要用來顯示在內文中的東西
把文章結構化有什麼好處呢？ 主要就是要讓電腦也能看得懂某一段文字主要是要用來做什麼的
這樣瀏覽器才能把他顯示成正確的樣子
搜尋引擎才能知道哪一段文字是重要的要被搜尋到
超文件
HTML 的前面兩個字母是 HyperText (超文件) 的縮寫。
什麼是超文件？到底是有多超級？
其實就是文章中可以有超連結文字的意思啦
HTML 一開始發展的目的，就是想破除只能一篇一篇文章依序看下來的傳統閱讀方法
而讓每篇文章可以藉由超連結文字連來連去
例如在文章中提到了 HTML ，我可以直接把他加上維基百科的連結位址，這樣有興趣的人就可以直接點過去看維基百科的說明了， HTML 語法為
用瀏覽器看就會變成
也可以在文章中顯示放在其他地方的圖片，例如使用
就會顯示成
![[圖]]()
結論
現在應該大概知道 HTML 是要做什麼用的了吧
簡單來說，就是一種設計來讓給瀏覽器顯示用的標記語言
主要是要來將文件結構化
至於將文章排版、設定字體格式的語法，後來漸漸要被 CSS 來取代了
下次再來介紹 CSS 吧
網路上常常會看到很多科技名詞縮寫，雖然聽久了大概會知道是什麼東西，不過對一般人還是常常有聽沒有懂，所以我想來嘗試做些淺顯易懂的說明。由於我是做網頁設計的，所以先從跟網頁有關的東西開始吧。
什麼是標記語言？
大家應該都知道 HTML 吧，總之就是用來寫網頁的語言嘛。
這樣講起來好像是程式語言似的，有時候還會聽到有人說想學寫網頁程式，所以開始學 HTML。
不過 HTML 不是程式語言喔！程式語言必需要有變數、函式、迴圈、條件判斷這些東西，而 HTML 都沒有，所以以後不要再說會寫 HTML 就是在會寫程式啦！
HTML 只是一種標記語言，後面兩個字母 ML 就是 Markup Language 的意思。
那標記語言又是什麼咧？
舉個例來說，我想把重點文字加底線，可以使用
我想把<u>重點文字</u>加底線
使用瀏覽器看就會變成
我想把重點文字加底線
有沒有看到重點文字有加上底線了呢？
其中的<u>...</u>就是用來說明包起來的文字要設為粗體的標記語言
從這個例子可以知道 HTML 就是用 <標籤名稱> 與 </標籤名稱>
把一段文字包起來，然後依標籤名稱賦與這段文字某種屬性
其他常見用來描述字體格式的 HTML 標籤還有：
<b>粗體</b>、<i>斜體</i>、<s>
除了用來描述字體格式， HTML 也可以用來排版，例如：
<p>代表這是一個段落
<br>代表要換行
<table>、<tr>、<td> 用來產生一個表格
<ul>、<ol>、<li> 代表每段前面要加上項目符號或編號
文章結構
利用 HTML 把整份文件的所有文字都加上各種 HTML 標籤後，就可以把文件變成一個樹狀結構啦
例如這個網頁：http://pttcard.twbbs.org/web/ 用Chrome開，然後按F12
一個標準的 HTML 結構會像這樣：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
<html>
<head>
<title>顯示在視窗列上的標題</title>
</head>
<body>
<h1>顯示在文章中的主標題</h1>
<p>一段文字</p>
</body>
</html>
整個文件都用<html>包起來，然後分成<head>與<body>兩個部份
<head>裡面是用來放一些要給瀏覽器看得東西，例如要顯示在視窗標題列上的<title>
<body>裡放要用來顯示在內文中的東西
把文章結構化有什麼好處呢？ 主要就是要讓電腦也能看得懂某一段文字主要是要用來做什麼的
這樣瀏覽器才能把他顯示成正確的樣子
搜尋引擎才能知道哪一段文字是重要的要被搜尋到
超文件
HTML 的前面兩個字母是 HyperText (超文件) 的縮寫。
什麼是超文件？到底是有多超級？
其實就是文章中可以有超連結文字的意思啦
HTML 一開始發展的目的，就是想破除只能一篇一篇文章依序看下來的傳統閱讀方法
而讓每篇文章可以藉由超連結文字連來連去
例如在文章中提到了 HTML ，我可以直接把他加上維基百科的連結位址，這樣有興趣的人就可以直接點過去看維基百科的說明了， HTML 語法為
文章中提到了 <a href="http://zh.wikipedia.org/wiki/HTML">HTML</a> ，
用瀏覽器看就會變成
文章中提到了 HTML ，
也可以在文章中顯示放在其他地方的圖片，例如使用
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/HTML.svg/160px-HTML.svg.png" />
就會顯示成
![[圖]](http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/HTML.svg/160px-HTML.svg.png)
結論
現在應該大概知道 HTML 是要做什麼用的了吧
簡單來說，就是一種設計來讓給瀏覽器顯示用的標記語言
主要是要來將文件結構化
至於將文章排版、設定字體格式的語法，後來漸漸要被 CSS 來取代了
下次再來介紹 CSS 吧
--
※ 作者: Knuckles 時間: 2012-03-28 09:31:40
※ 編輯: Knuckles 時間: 2012-03-28 10:16:02
※ 看板: Knuckles 文章推薦值: 0 目前人氣: 0 累積人氣: 538
回列表(←)
分享