HTML 簡介

HTML (超文件標記語言，HyperText Markup Language)是用來作為呈現網頁資料的一種語言，由Tim Berners-Lee等人所設計，於1993年作為草案(Draft)發行， 1994年的HTML 2.0開始成為規範，到後來較為普及的HTML 4.01、以及目前使用上越來越廣泛的HTML5，將取代HTML 4.01成為新的標準。

超文本標記語言(HyperText Markup Language)

HTML 包含了一系列的元素（elements），而元素包含了標籤（tags ）與內容（content），我們用標籤來控制內容的呈現樣貌，例如字體大小、斜體粗體、 在文字或圖片設置超連結等。舉例來說，請看看以下這個句子： 

My cat is very grumpy

如果我們想讓這個句子自成一個段落，那麼可以在它前後分別加上段落標籤 (<p>)，它就變成一個段落元素了： 

<p>My cat is very grumpy</p>

HTML 元素的組成

讓我們來仔細的觀察一下，內容、標籤和元素的關係： 
<p>My cat is very grumpy</p>

我們可以看到基本的架構：

  1. 起始標籤 （The opening tag）：如上面的例子「<p>」。
  2. 結束標籤 （The closing tag）： 如上面的例子「</p>」。
  3. 內容（The content）： 以上面的例子來說，內容就是這句文字。
  4. 元素（The element）： 由起始標籤、結束標籤、內容所組成。

元素還可以有「屬性（Attribute）」，請大家看看下面的例子： 

<p class="editor-note">My cat is very grumpy</p>

屬性能提供更多的資訊（當然，這個資訊是幫助我們更有效及方便編輯，不會呈現在網頁上），屬性包含了屬性名稱與值，你可以利用屬性設定這個元素的色彩、對齊方式、圖表的格線等等。

巢狀元素

元素裡面可以在放進元素，我們稱之為「巢狀元素（nesting element）」。

例如這個句子：「我的貓有夠無敵臭臉」，若你想強調「有夠無敵」，我們就可以把「有夠無敵」這四個字自成一個顯示為粗體的元素 <strong> : 

<p>我的貓 <strong>有夠無敵</strong>臭臉 。</p>

空元素

有些元素沒有內容，我們稱為「空元素（empty elements）」。 以這個圖片元素 <img> 為例： 
<img src="images/firefox-icon.png" alt="My test image">

它有兩個屬性，但是沒有結束標籤，也沒有裡面的內容。因為圖片元素是直接把圖檔嵌在 HTML 網頁上。

首頁(Home Page)

  網點呈現的第一份文件, 預設為index.html。

HTML 文件的架構

讓我們來看看一個完整的HTML頁面它所包含的要素： 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="big-5">
    <title>My test page</title>
  </head>
  <body>
    歡迎, 來到 HTML 世界!
  </body>
</html>

第一個例題:看效果

我們可以看到：

圖片

再讓我們複習一下圖片元素： 
<img src="images/firefox-icon.png" alt="My test image">

如同我們前面提到，圖片元素是直接把圖檔嵌在HTML網頁上，它是透過圖片來源（src ，source）這個屬性，提供了連到圖片檔案的路徑。

我們也可以加上alt (alternative) 這個屬性。在網頁瀏覽者無法正確看到圖片時，你希望對他們呈現什麼樣的說明文字。
例題:看效果

統一資源定位器(Uniform Resource Locators, URL)

Web瀏覽器通過URL從Web服務器請求頁面。 一個統一資源定位器(URL) 用於定位網路上的文檔。

    scheme://host.domain[:port]/path/filename

說明:

常用的URL scheme

以下是一些常用的URL scheme：
Scheme 訪問 用于...
http 超文本傳輸協議 以 http:// 開頭的普通網頁。不加密。
https 安全超文本傳輸協議 安全網頁，加密所有信息交換。
ftp 文件傳輸協議 用於將文件下載或上傳至網站。
file 您計算機上的文件。

Example: <a href="https://www.csie.ntu.edu.tw/~sylee/courses/basics/hello.htm">hello.htm</a>
    hello.htm

URL 字符編碼

URL只能使用ASCII字符集 .
來通過因特網進行發送。 由於URL 常常會包含ASCII 集合之外的字符，URL 必須轉換為有效的ASCII 格式。
URL 編碼使用"%" 其後跟隨兩位的十六進制數來替換非ASCII 字符。
URL 不能包含空格。 URL 編碼通常使用+ 來替換空格。

標記標籤(Markup Tags)

格式化(Formating)

例題:hello2.htm 

       <html>
       <head>
          <title>Sample page
          </title>
       </head>

       <body bgcolor="#EFFFEF">   <!--改變網頁底色
       <h3>Sample page</h3>       <!--使用標題3
          Hello, HTML World!      <!--文本
       </body>
       </html>

鏈結 (Link)

使用標籤<a>來連結其他網頁或網站，

內部鏈結(Local link)

連結到網站內的其他網頁，格式如下： 
       <a href="primer.htm"> An HTML Primer</A>
        |           |               |
      anchor       link      text associated

以下是實例 (看效果)：

<a href="hello.htm" target="_blank">hello</a>

href 用來指定鏈結目標，target="_black" 設置在新視窗開啟頁面，這些都是 HTML 標籤的屬性 (attributes)。

外部鏈結(External link)

鏈結到其他網站，以下是實例 (看效果)： 
<a href="https://www.google.com.tw/" target="_blank">Google 台灣</a>

Cross references

在同一網頁內的鏈結。

例題:在本頁文本的起點，建立定錨點 "top"，如: 

       <a name="top" ></a>

再用本地鏈結到該點，如: 

        <a href="#top">Page Top</a>

Page Top

General Information

Comments

       <!-- CS U1430: Expert Systems -->

預格式化(Preformatted)

       <pre>
          ...
       </pre>

實體名稱(Entitiy names)

在HTML 中，某些字符是預留的。 在HTML 中不能使用小於號（<）和大於號（>），這是因為瀏覽器會誤認為它們是標籤。 如果希望正確地顯示預留字符，我們必須在HTML 源代碼中使用字符實體（character entities）。 字符實體類似這樣： 
&entity_name;
或
&#entity_number;
如需顯示小於號，我們必須這樣寫：&lt;或&#60;或&#060; 
       <     &lt;
       >     &gt;
       &     &amp; ampersand

內嵌圖像(Embedded graphs)

用來載入圖片或影像 (Images)，以下是實例 ([Under construction])：
src 用來指定圖片來源，alt 用於圖片無法載入時的替代性文字，width="40" 是指將寬度縮小到 40 像素，而高度會隨之等比例縮放。 
       <img src="underconstruction.gif" border=0  width=40
               alt="[Under construction]">/a>

內嵌視頻(Embedded video)

HTML <video> 元件用於在網頁上顯示視頻。

例題

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Courtesy of Big Buck Bunny:

內嵌音頻(Embedded audio)

HTML <audio> 元件用於在網頁上顯示音頻。

Example: 杯底不可飼金魚

<audio controls>
  <source src="杯底不可飼金魚.mp3" type="audio/mpeg">
Your browser does not support the video tag.
</audio>

<object> 元件

<object> 元素定義 HTML 文檔中的嵌入物件。 旨在在網頁中嵌入插件（如 Java applet、PDF 閱讀器和 Flash 播放器），但也可用於在 HTML 中包含 HTML： 
<object width="100%" data="heading.html"></object>

看效果

<embed> 元件

<embed> 元素還定義了 HTML 文檔中的嵌入物件。
<embed width="25%" height="20%" src="ch16_455.jpg">
請注意， <embed> 元件沒有結束標記。 它不能包含替代文本。

Iframes

內嵌框架用於在當前 HTML 文檔中嵌入另一個文檔。

使用 height 和 width 屬性來指定 iframe 的大小。
高度和寬度在預設情況下，以像素為單位指定： 

<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>
或者您可以添加樣式屬性，並使用 CSS 的高度、寬度及其他屬性： 
<iframe src="demo_iframe.htm" style="height:200px;width:300px;border:none;"></iframe>
例題: iframe

要嵌入圖片，最好使用 <img> 標籤。

要嵌入 HTML，最好使用 <iframe> 標籤。

要嵌入視頻或音頻，最好使用 <video> 和 <audio> 標籤。

背景圖像

background-image 屬性為元素設置一個或多個背景圖像。 預設背景圖像放置在元素的左上角，並在垂直和水平方向重複。 
       background-image:url("gif/gas.jpg");

看效果

語言編碼

我們可以使用 meta 標籤來指定網頁的語言編碼，請見下例： 
<HTML>
<HEAD>
	<TITLE> meta 標籤的使用：中文網頁 </TITLE>
	<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</HEAD>
<BODY>
這是一個繁體中文網頁！
(This page uses big5 character set.)
charset=big5
</BODY>
</HTML>
charset 的設定: 繁體用 big5，簡體用gb2312，日語用 Shift_JIS。如果要在同一個網頁呈現多國語言，則用unicode (UTF-8) 編碼。

詳見語言編碼

-->格式化(Formating)

參考資料