HTML加固3——超文本
和普通文本不同，html被稱為超文本(hypertext),之所以被稱為超文本，是因為其中的超鏈接（也就是我們平常說的鏈接）能夠指向其他資源。
0x01HTML鏈接
之所以你可以在瀏覽器屏幕上單擊鼠標或在鍵盤上按下按鍵，從而選擇並自動跳轉到文檔中自己感興趣的那個主題，或跳轉到世界上某處完全不同的集合中的某個文檔。那是因為你點擊的這就是超鏈接
相信大家對超鏈接不會陌生吧，天天都不知道點了多少個呢。超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，你可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。我們在前面的例子中只簡單使用了< a>標簽 ，用字符作為網頁的超鏈接，還使用< a>實現了發送郵件的功能。下面我們要講到的都是關於< a>標簽的屬性
我們這就詳細來講解HTML鏈接：
1 給文字及圖片添加超鏈接
首先我們還是回顧一下最簡單的鏈接使用，直接給文字添加鏈接到網頁和另外的HTML文件。
HTML內容如下
<html>
<body>
<p>let‘s have an example< /p>
<p>
< a href="http://www.shiyanlou.com">shiyanlou< /a>
</p>
</body>
</html>
這是最簡單的超鏈接,接下來我們就來讓這個HTML文件鏈接到另一個HTML文件。（在相同的文件夾，再添加一個HTML文件），然後下面是HTML內容和結果
說完了給文字添加超鏈接，下面我們就來說說給給圖片添加超鏈接，點擊圖片，鏈接到另一個頁面
這是內容與結果截圖：
2 超鏈接的打開方式
打開方式分為在本頁打開和在新的瀏覽器窗口打開，默認情況下，超級鏈接打開新頁面的方式是自我覆蓋（就是在本頁打開）。根據瀏覽者的不同需要，讀者可以指定超級鏈接的其他打開新窗口的方式。超級鏈接標簽提供了target屬性進行設置，取值分別為_self（自我覆蓋，默認）、_blank（創建新窗口打開新頁面）。下面我們就來動手區分下這兩個屬性的區別（由於我們已經寫過默認的情況，這裏我們就只添加_blank屬性）
在前面的基礎上我們在< a>標簽加入target屬性：target="_blank"
通過與第一張圖的對比我們可以看出，_blank屬性加上以後，鏈接到的網頁是在新窗口中打開的，而默認的_self屬性則是在本頁面以覆蓋的形式打開
3 超鏈接添加提示文字
有些時候超鏈接文字不足以說明點擊以後所要鏈接的內容，所以這個時候我們就需要給超鏈接添加提示文字，加以描述下一個鏈接的內容，當光標停留在超鏈接上時，提示語言就會顯現，會讓頁面顯現的很簡介。設計到的屬性就是title，下面我們再來動手實驗一把 下面就是實驗內容和效果
在前面的基礎上，< a>標簽加上title屬性：title="this word will link to the web of shiyanlou"
4 超鏈接實現書簽
也許你在網頁看過小說，當你在頁首點擊章節的題目，就會自動的跳轉到相應的章節，這是怎樣實現的呢？。要實現書簽，你就要了解，什麽是錨（anchor）。錨（anchor）是引自於船只上的錨，錨被拋下後，船只就不容易飄走、迷路。實際上錨就是用於在單個頁面內不同位置的跳轉，有的地方叫做書簽。涉及到的標簽當然還是< a>標簽,超級鏈接標簽的name屬性用於定義錨的名稱，一個頁面可以定義多個錨，通過超級鏈接的href屬性可以根據name跳轉到對應的錨。 如下實現跳轉：
<a href="#跳轉目的地名稱">跳轉起始字符</a> ... ... ... <a name="跳轉目的地名稱">跳轉目的地字符</a>
下面我們就來具體的實現下：
<html>
<head>
<title>HTML</title>
</head>
<body style="font-size:20px">
<p style="text-align:center">HTML LEARNING</p>
<p>
<a href="#c1"> HTML chushi</a>
</p>
<p>
<a href="#c2">HTML wenben </a>
</p>
<p>
<a href="#c3">HTML chaowenben 1 </a>
</p>
<p>
<a href="#c4"> HTML chaowenben 2 </a>
</p>
<p>
<a href="#c5">HTML shiyan </a>
</p>
<h1><a name="c1"></a>chapter 1 chushi HTML</h1>
<p>lalalaalalal</p>
<p>lalalaalalal</p>
<p>lalalaalalal</p>
<h1><a name="c2"></a>chapter 2 wenben HTML</h1>
<p>lalalaalalal</p>
<p>lalalaalalal</p>
<p>lalalaalalal</p>
<h1><a name="c3"></a>chapter 3 chaowenben 1 HTML</h1>
<p>lalalaalalal</p>
<p>lalalaalalal</p>
<p>lalalaalalal</p>
<h1><a name="c4"></a>chapter 4 chaowenben 2 HTML</h1>
<p>lalalaalalal</p>
<p>lalalaalalal</p>
<p>lalalaalalal</p>
<h1><a name="c5"></a>chapter 5 shiyan HTML</h1>
<p>lalalaalalal</p>
<p>lalalaalalal</p>
<p>lalalaalalal</p>
</body>
</html>
0x02 HTML表格
HTML 網頁設計不可或缺的元素就是表格（Table），通常表格用來做版面的排版，而表格的用法包含了幾個重要的標簽，分別是 table、tr 與 td 這幾個重點，組合起來才是個完整的表格，表格由 < table> 標簽來定義。每個表格均有若幹行（由 < tr> 標簽定義），每行被分割為若幹單元格（由 < td> 標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。< th>標簽用來定義表頭。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
下面我們動手來寫一個簡單HTML文件來練習這幾個標簽：
<html>
<title >TABLE</title>
<body style="font-size:20px">
<p style="text-align:center">table practice</p>
<table align="center" border="1">
<tr>
<td>first row and first column</td>
<td>first row and second column</td>
<td>first row and third column</td>
</tr>
<tr>
<td>second row and first column</td>
<td>second row and second column</td>
<td>second row and third column</td>
</tr>
</table>
</body>
</html>
border="1"定義的是最外面邊框粗細，為1，你也可以設置為0，就是不顯示邊框（默認就是沒有邊框）
下面我們再介紹表格兩個屬性： colspan：控制此單位所占列數 rowspan：控制此單位所占行數
<html>
<title >TABLE</title>
<body style="font-size:30px">
<p style="text-align:center">table practice</p>
<table align="center" border="15" >
<tr>
<td align="center" colspan="2">first row and first column</td>
</tr>
<tr>
<td rowspan="2">second row and first column </td>
<td>second row and second column </td>
<td >second row and third column</td>
</tr>
<tr>
<td>third row and first column </td>
<td>third row and second column </td>
</tr>
</table>
</body>
</html>
如果不是很理解，我們就來看看在網頁上的表現，對比起來有助於我們理解。 讓第一列第一行這個單位占兩列，讓第二行第一列這個單位占兩行，就是這個效果。
表格還有很多細節可以定義,我們早這裏就簡單敘述，大家需要動手練習：
- 標簽：< th>表頭< /th>：設置表頭