##########################################HTML介紹##########################################
HTML檔案是什麼？
HTML表示超文字標記語言（Hyper Text Markup Language）。
HTML檔案是一個包含標記的文字檔案。
這些標記保速瀏覽器怎樣顯示這個頁面。
HTML檔案必須有htm或者html副檔名。
HTML檔案可以用一個簡單的文字編輯器建立。
---------------------------------------
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage.
<b>This text is bold</b>
</body>
</html>
---------------------------------------
HTML文件中，第一個標籤是<html>。這個標籤告訴瀏覽器這是HTML文件的開始。HTML文件的最後一個標籤是</html>，這個標籤告訴瀏覽器這是HTML文件的終止。
在<head>和</head>標籤之間文字的是頭資訊。在瀏覽器視窗中，頭資訊是不被顯示的。
在<title>和</title>標籤之間的文字是文件標題，它被顯示在瀏覽器視窗的標題欄。
在<body>和</body>標籤之間的文字是正文，會被顯示在瀏覽器中。
在<b>和</b>標籤之間的文字會以加粗字型顯示。
為什麼使用小寫標籤？
HTML標籤是大小寫無關的：<B>跟<b>含義相同。當你上網的時候，你會注意到多數教程在示例中使用大寫的HTML標籤，我們總是使用小寫標籤。為什麼？
假如你想投入到下一代HTML中，你應該開始使用小寫標籤。W3C在他們的HTML4建議中提倡使用小寫標籤，XHTML（下一代HTML）也需要小寫標籤。
標籤<body>定義了HTML頁面的主體元素。使用一個附加的bgcolor屬性，你可以告訴瀏覽器：你頁面的背景色是紅色的，就像這樣：
<body bgcolor="red">
標籤<table>定義了一個HTML表格。使用一個附加的border屬性，你可以告訴瀏覽器：這個表格是沒有邊框的，程式碼是：
<table border="0">
屬性通常由屬性名和值成對出現，就像這樣：name="value"。屬性通常是附加給HTML元素的開始標籤的。
屬性值應該被包含在引號中。雙引號是最常用的，但是單引號也可以使用。
在很少情況下，比如說屬性值本身包含引號，使用單引號就很必要了。
比如：name='John "ShotGun" Nelson'。
注意：中文引號跟英文引號是不一樣的。上面所指的引號都是英文狀態下的引號。
##########################################HTML介紹##########################################
##########################################HTML基本標籤##########################################
----------------------------------------------------------
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>Paragraph elements are defined by the p tag.</p>
</body>
</html>
----------------------------------------------------------
段落
<p> </p> --> HTML自動在一個段落前後各新增一個空行。
標題元素由標籤<h1>到<h6>定義。<h1>定義了最大的標題元素，<h6>定義了最小的。
----------------------------------
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
----------------------------------
換行<br>
當需要結束一行，並且不想開始新段落時，使用<br>標籤。<br>標籤不管放在什麼位置，都能夠強制換行。
<p>This <br> is a para<br>graph with line breaks</p>
<br>標籤是一個空標籤，它沒有結束標記。
HTML中的註釋
註釋標籤用來在HTML原始檔中插入註釋。註釋會被瀏覽器忽略。你可以使用註釋來解釋你的程式碼，這可以在你以後編輯程式碼的時候幫助你。
<!-- This is a comment -->
注意：你需要在左括號“<”後面跟一個感嘆號，右括號不用。
基本注意點——有用的技巧:
當你寫下HTML文字的時候，你不能確知在另外一個瀏覽器中，這些文字將被如何顯示。有人用著大的顯示器，有的人用的小一些。每次使用者調整視窗大小的時候，文字都將被重新格式化。不要想在編輯器中寫一些空行和空格來協助排版。
HTML將截掉你文字中的多餘空格。不管多少個空格，處理起來只當一個。一點附加資訊：在HTML裡面，一個空行也只被當作一個空格來處理。
使用空段落<p>來插入空白行是一個壞習慣，請使用<br>標籤來替代。（但是不要用<br>標籤來建立列表，我們後面會專門學習HTML列表的。）
你也許注意到了段落可以不寫結束標記</p>。別依賴它，HTML的下一個版本將不准你漏掉任何一個結束標籤。
HTML自動在某些元素前後增加額外的空行，就像在段落和標題元素的前後一樣。
使用水平線（<hr>標籤）來分隔
------------------------------------------------------------
<html>
<body bgcolor="blue">
<hr>
<center><p>This is a test page <br>This is a test page</p>
<hr>
</body>
</html>
------------------------------------------------------------
-----------------------------------------
<html>
<body>
<b>This text is bold</b>
<br>
<strong>
This text is strong
</strong>
<br>
<big>
This text is big
</big>
<br>
<em> <! -- 強調 -->
This text is emphasized
</em>
<br>
<i> <! -- 斜體 -->
This text is italic
</i>
<br>
<small>
This text is small
</small>
<br>
This text contains
<sub> <! -- 下標 -->
subscript
</sub>
<br>
This text contains
<sup>
superscript
</sup> <! -- 上標 -->
</body>
</html>
-----------------------------------------
-----------------------------------------
<html>
<body>
<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>
<p>The pre tag is good for displaying computer code:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
----------------------------------------
<!-- pre元素可定義預格式化的文字。被包圍在pre元素中的文字通常會保留空格和換行符。而文字也會呈現為等寬字型。 -->
##########################################HTML基本標籤##########################################
##########################################HTML實體##########################################
有些字元，比如說“<”字元，在HTML中有特殊的含義，因此不能在文字中使用。
想要在HTML中顯示一個小於號“<”，需要用到字元實體。
一個字元實體擁有三個部分：一個and符號（&），一個實體名或者一個實體號，最後是一個分號（;）
想要在HTML文件中顯示一個小於號，我們必須這樣寫：<或者<
使用名字相對於使用數字的優點是容易記憶，缺點是並非所有的瀏覽器都支援最新的實體名，但是幾乎所有的瀏覽器都能很好地支援實體號。
注意：實體名是大小寫敏感的。
-------------------------------------------
<html>
<body>
<p>This is a character entity: {</p>
<p>
</body>
</html>
##########################################HTML實體##########################################
##########################################HTML連結##########################################
-----------------------------------------------------------
<html>
<body>
<p>
<a href="lastpage.htm">
This text</a> is a link to a page on this Web site.
</p>
<p>
<a href="http://www.microsoft.com/">
<! -- 建立連結 其中<a href="http://www.microsoft.com/" target="_blank">
<! -- 以上表示在新標籤開啟連結，不加的話會在當前標籤覆蓋原網頁開啟 -->
This text</a> is a link to a page on the World Wide Web.
</p>
</body>
</html>
-----------------------------------------------------------
------------------------------------------
<html>
<body>
<p>
<a href="#C4">
See also Chapter 4.
</a>
</p>
<p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<a name="C4"><h2>Chapter 4</h2></a>
<!-- name屬性用來建立一個命名的錨。使用命名錨以後，可以讓連結直接跳轉到一個頁面的某一章節，而不用使用者開啟那一頁，再從上到下慢慢找。 -->
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
------------------------------------------
##########################################HTML連結##########################################
##########################################HTML框架##########################################
------------------------------------------
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm"> <! -- 這個例子說明了如何建立一個有三個頁面的垂直分欄。src=填網頁名稱 -->
<frame src="frame_c.htm">
</frameset>
</html>
------------------------------------------
------------------------------------------
<html>
<frameset rows="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm"> <! -- 這個例子說明了如何建立一個有三個頁面的水平分欄。src=填網頁名稱 -->
<frame src="frame_c.htm">
</frameset>
</html>
------------------------------------------
<frame>標籤定義了每個框架中放入什麼檔案
基本注意點——有用的技巧
假如一個框架有可見邊框，使用者可以拖動邊框來改變它的大小。如果不想讓使用者改變大小，可以在<frame>標籤中加入：noresize="noresize"。
##########################################HTML框架##########################################
##########################################HTML表格##########################################
<tr> 標籤定義 HTML 表格中的行。
--------------------------------------
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
-------------------------------------
##########################################HTML表格##########################################