一、什么是HTML
- HTML的英文全稱是Hypertext Marked Language，中文叫做“超文本標記語言”。
- 和一般文本的不同的是，一個HTML文件不僅包含文本內容，還包含一些Tag，中文稱“標記”。
- 一個HTML文件的后綴名是.htm或者是.html。 用文本編輯器就可以編寫HTML文件。
二、如何編寫HTML文件
讓我們先創建第一個HTML文件！
<html> <head> <title>simple</title> </head> <body>Thisisasimple.<b>Thistextisbold</b></body> </html>
HTML元素
- 這個文件的第一個Tag是<html>，這個Tag告訴你的瀏覽器這是HTML文件的頭。文件的最后一個Tag是</html>，表示HTML文件到此結束。
- 在<head>和</head>之間的內容，是Head信息。Head信息是不顯示出來的，你在瀏覽器里看不到。但是這并不表示這些信息沒有用處。比如你可以在Head信息里加上一些關鍵詞，有助于搜索引擎能夠搜索到你的網頁。
- 在<title>和</title>之間的內容，是這個文件的標題。你可以在瀏覽器最頂端的標題欄看到這個標題。
- 在<body>和</body>之間的信息，是正文。
- 在b和/b之間的文字，用粗體表示。b顧名思義，就是bold的意思。
HTML文件看上去和一般文本類似，但是它比一般文本多了Tag，比如<html>,<body>等，通過這些Tag，可以告訴瀏覽器如何顯示這個文件。
HTML元素屬性
HTML元素可以擁有屬性。屬性可以擴展HTML元素的能力。
比如你可以使用一個bgcolor屬性，使得頁面的背景色成為紅色，就像這樣：
<body bgcolor="red">
再比如，你可以使用border這個屬性，將一個表格設成一個無邊框的表格。如下：
<table border="0">
屬性通常由屬性名和值成對出現，就像這樣：name="value"
上面例子中的bgcolor, border就是name，red和0就是value。屬性值一般用雙引號標記起來。屬性通常是附加給HTML的Opening Tag，而不是Closing Tag。
三、基礎HTML tag
HTML里，比較基礎的Tag主要用于標題，段落和分行。
學習HTML最好的方法，就是跟著示例學。
HTML用<h1>到<h6>這幾個Tag來定義正文標題，從大到小。每個正文標題自成一段。
<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>
顯示為：
<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>
段落劃分
在HTML里用<p>和</p>劃分段落。
<p>This is a paragraph</p><p>This is another paragraph</p>
換行
通過使用<br>這個Tag，可以在不新建段落的情況下換行。<br>沒有Closing Tag。用<p>換行是個壞習慣，正確的是使用<br>。
<p>This <br> is a para<br>graph with line breaks</p>
HTML注釋
在HTML文件里，你可以寫代碼注釋，解釋說明你的代碼，這樣有助于你he他人日后能夠更好地理解你的代碼。
注釋可以寫在``之間。瀏覽器是忽略注釋的，你不會在HTML
正文中看到你的注釋。
居中的正文標題
這個示例告訴你如何將正文標題居中顯示。
<html> <body> <h1 align="center">這是標題</h1> <p>上面的標題是居中顯示的。</p> </body> </html>
加條橫線
這個示例演示了如何在HTML文中加條橫線。
<html> <body> <p>用hr這個Tag可以在HTML文件里加一條橫線</p> <hr><p>hello</p><hr> <p>helloworld</p><hr> <p>helloworldhello</p> </body> </html>
背景顏色
這個示例演示如何改變HTML文件的背景色。
<html><body bgcolor="yellow"><h2>看，這個頁面是黃色的</h2></body></html>
常用文本格式Tag
| Tag | Tag說明 |
|---|---|
<b> |
粗體blod |
<i> |
斜體italic |
<del> |
文字當中劃線表示刪除 |
<ins> |
文字下劃線表示插入 |
<sub> |
下標 |
<sup> |
上標 |
<blockquote> |
縮進表示引用 |
<pre> |
保留空格和換行 |
<code> |
表示計算機代碼，等寬字體 |
<html>
<body>
<p><b>粗體用b表示。</b></p>
<p><i>斜體用i表示。</i></p>
<p><del>芙蓉姐姐</del>這個詞當中劃線表示刪除。</p>
<p><ins>想唱就唱</ins>這個詞下劃線插入。</p>
<p>X<sub>2</sub>其中的2是下標</p>
<p>X<sup>2</sup>其中的2是上標</p>
<p><blockquote>好好學習，天天向上。這句話縮進表示引用</blockquote></p>
<pre>這是預設(preformatted) 文本.在pre這個tag里的文本保留空格和分行。</pre><code>call getOrders</code>
<p>用code顯示計算機代碼，code里顯示的字符是等寬字符。</p>
</body>
</html>
如何看HTML的源代碼
在瀏覽器看到的HTML網頁，是瀏覽器解釋HTML源代碼后產生的結果。
要查看這個HTML的源代碼，有兩種方法。一是點擊鼠標右鍵，點擊View Source(查看源文件)命令；二是選擇瀏覽器菜單View(查看)中的Source(源文件)命令。利用View Source得到網頁的源代碼，你可以由此借鑒一下別人寫得好的地方。不過在你對HTML知識尚少的情況下，看別人復雜的HTML源代碼，只會讓你頭暈。建議你還是再等等，先掌握一些基礎再說。
四、Html特殊字符顯示
HTML字符實體(Character Entities)
有些字符在HTML里有特別的含義，比如小于號<就表示HTML Tag的開始，這個小于號是不顯示在我們最終看到的網頁里的。那如果我們希望在網頁顯示一個小于號，該怎么辦呢？這就要說到HTML字符實體(HTML Character Entities)了。
一個字符實體(Character Entity)分成三部分：第一部分是一個&符號，英文叫ampersand；第二部分是實體(Entity)名字或者是#加上實體(Entity)編號；第三部分是一個分號。比如，要顯示小于號，就可以寫<或者<。用實體(Entity)名字的好處是比較好理解，一看lt，大概就猜出是less than的意思，但是其劣勢在于并不是所有的瀏覽器都支持最新的Entity名字。而實體(Entity)編號，各種瀏覽器都能處理。
注意：Entity是區分大小寫的。
如何顯示空格
通常情況下，HTML
會自動截去多余的空格。不管你加多少空格，都被看做一個空格。比如你在兩個字之間加了10個空格，HTML會截去9個空格，只保留一個。為了在網頁中增加空格，你可以使用表示空格。
五、HTML的超鏈接
先看兩個示例
建立一個超鏈接
這個示例演示了如何在HTML文件里創建超鏈接。
<html>
<body>
<p>
<a href="../asdocs/html_tutorials/humor02.html">這是一個鏈接</a>
</p>
<p><a href="http://www.baidu.com>百度</a></p>
</body>
</html>
將一個圖片作為一個超鏈接
這個示例演示了如何將一個圖片作為一個超鏈接，即點擊一個圖片，可以連接到其它文件。
<html>
<body>
<p>你可以將一張圖片作為一個鏈接，點擊這個圖片。<a href="../asdocs/html_tutorials/humor03.html">[圖片上傳失敗...(image-c907e8-1523171412804)]</a>
</p>
</body>
</html>
a和href屬性
HTML用<a>來表示超鏈接，英文叫anchor。
<a>可以指向任何一個文件源：一個HTML網頁，一個圖片，一個影視文件等。用法如下：
<a href="url">鏈接的顯示文字</a>
點擊<a></a>當中的內容，即可打開一個鏈接文件，href屬性則表示這個鏈接文件的路徑。比如鏈接到home.com/html
站點首頁，就可以這樣表示：
<a >首頁</a>
target屬性
使用target屬性，可以在一個新窗口里打開鏈接文件。
<a target=_blank>首頁</a>
<html>
<body>
<a href="../asdocs/html_tutorials/humor01.html" target="_blank">一則笑話</a>
<p>如果你將target的屬性值設成_blank，你點擊這個鏈接的時候，網頁就會在一個新窗口出現。</p>
</body>
</html>
title屬性
使用 title 屬性，可以讓鼠標懸停在超鏈接上的時候，顯示該超鏈接的文字注釋。
<a title = "首頁">首頁</a>
如果希望注釋多行顯示，可以使用
；作為換行符。
<a title = "首頁
；點擊返回">首頁</a>
六、HTML相對路徑(Relative Path)和絕對路徑(Absolute Path)
HTML初學者會經常遇到這樣一個問題，如何正確引用一個文件。比如，怎樣在一個HTML網頁中引用另外一個HTML網頁作為超鏈接(hyperlink)？怎樣在一個網頁中插入一張圖片？如果你在引用文件時(如加入超鏈接，或者插入圖片等)，使用了錯誤的文件路徑，就會導致引用失效(無法瀏覽鏈接文件，或無法顯示插入的圖片等)。為了避免這些錯誤，正確地引用文件，我們需要學習一下HTML路徑。
HTML有2種路徑的寫法：相對路徑和絕對路徑。
HTML相對路徑(Relative Path)
同一個目錄的文件引用如果源文件和引用文件在同一個目錄里，直接寫引用文件名即可。
我們現在建一個源文件info.html，在info.html里要引用index.html文件作為超鏈接。假設info.html路徑是：
C:/Users/asus/Desktop/Untitled-1.html
假設index.html路徑是：
C:/Users/asus/Desktop/Untitled-2.html
在info.html加入index.html超鏈接的代碼應該這樣寫：
<a href = "index.html">index.html</a>
<a href = "index.html">index.html</a>
如何表示上級目錄
../表示源文件所在目錄的上一級目錄，
../../表示源文件所在目錄的上上級目錄，以此類推。
假設info.html路徑是：
C:/Users/asus/Desktop/Untitled-1.html
假設index.html路徑是：
C:/Users/asus/Untitled-2.html
在info.html加入index.html超鏈接的代碼應該這樣寫：
<a href = "../index.html">index.html</a>
<a href = "../index.html">index.html</a>
假設info.html路徑是：
C:/Users/asus/Desktop/Untitled-1.html
假設index.html路徑是：
C:/Users/Untitled-2.html
在info.html加入index.html超鏈接的代碼應該這樣寫：
<a href = "../../index.html">index.html</a>
<a href = "../../index.html">index.html</a>
假設info.html路徑是：
C:/Users/asus/Desktop/Untitled-1.html
假設index.html路徑是：
C:/Users/asus/babala/Untitled-2.html
在info.html加入index.html超鏈接的代碼應該這樣寫：
<a href = "../babala/index.html">index.html</a>
<a href = "../babala/index.html">index.html</a>
如何表示下級目錄
引用下級目錄的文件，直接寫下級目錄文件的路徑即可。
假設info.html路徑是：
C:/Users/asus/Desktop/Untitled-1.html
假設index.html路徑是：
C:/Users/asus/Desktop/html/Untitled-2.html
在info.html加入index.html超鏈接的代碼應該這樣寫：
<a href = "html/index.html">index.html</a>
<a href = "html/index.html">index.html</a>
假設info.html路徑是：
C:/Users/asus/Desktop/Untitled-1.html
假設index.html路徑是：
C:/Users/asus/Desktop/html\tutorials\index.html
在info.html加入index.html超鏈接的代碼應該這樣寫：
<a href = "html/tutorials/index.html">index.html</a>
<a href = "html/tutorials/index.html">index.html</a>
HTML絕對路徑(Absolute Path)
HTML絕對路徑(absolute path)指帶域名的文件的完整路徑。
假設你注冊了域名www.admin5.com/html，并申請了虛擬主機，你的虛擬主機提供商會給你一個目錄，比如www，這個www就是你網站的根目錄。
假設你在www根目錄下放了一個文件index.html，這個文件的絕對路徑就是：
http://www.admin5.com/html。
假設你在www根目錄下建了一個目錄叫html_tutorials，然后在該目錄下放了一個文件index.html，這個文件的絕對路徑就是
http://www.admin5.com/html/html_tutorials/index.html。
七、如何在HTML中創建表格
HTML表格用<table>表示。一個表格可以分成很多行(row)，用<tr>表示；每行又可以分成很多單元格(cell)，用<td>表示。這三個Tag是創建表格最常用的Tag。
示例
<html>
<body>
<p>表格所用到的Tag：整個表格開始要用table；每一行開始要用tr；每一單元格開始要用td。</p>
<h4>只有一行(Row)一列(Column)的表格</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>一行三列的表格</h4>
<table border="1"><tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table><h4>兩行三列的表格</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr><tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
border屬性
在缺省情況下，如果不設置表格的邊界，表格是不顯示邊界的。
示例
<html>
<body>
<h4>缺省情況下，表格沒有邊界。</h4>
<table><tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr><tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table><h4>表格Border設為0，也不顯示邊界：</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr><tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
要顯示表格的邊界，可使用border這個屬性。
示例
<html>
<body>
<h4>表格的邊界值設為1：</h4>
<table border="1">
<tr>
<td>第一</td>
<td>行</td>
</tr><tr>
<td>第二</td>
<td>行</td>
</tr></table>
<h4>表格的邊界值設為8，邊界更粗：</h4>
<table border="8">
<tr>
<td>第一</td>
<td>行</td>
</tr><tr>
<td>第二</td>
<td>行</td>
</tr></table>
<h4>表格的邊界值設為15，邊界更粗：</h4>
<table border="15">
<td>第一</td>
<td>行</td>
</tr><tr>
<td>第二</td>
<td>行</td></tr>
</table>
</body>
</html>
表格的表頭
用<th>來表示表格的表頭，表頭的字是粗體顯示的。
設置表格的背景顏色和背景圖片
這個示例演示如何用bgcolor屬性設置表格的背景顏色，如何用background
屬性為表格添加背景圖片。
<html>
<body>
<h4>給表格設置背景顏色：</h4>
<table border="1" bgcolor="red">
<tr>
<td>第一</td>
<td>行</td>
</tr><tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
<h4>給表格加背景圖片：</h4>
<table border="1"background="../images/html_tutorials/background.gif"><tr>
<td>第一</td>
<td>行</td>
</tr><tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
</body>
</html>
設置單元格的背景顏色和背景圖片
這個示例演示如何用bgcolor屬性設置單元格的背景顏色，如何用background屬性為單元格添加背景圖片。
<html>
<body>
<h4>單元格背景色：</h4>
<table border="1"><tr>
<td bgcolor="red">第一</td>
<td>行</td>
</tr>
<tr>
<td background="../images/html_tutorials/background.gif">第二</td>
<td>行</td>
</tr>
</table>
</body>
</html>
