HTML是利用標籤來做設計。
何謂標籤
<開始標籤 標籤屬性>元素(inner)<結束標籤>
標籤由以下三個組成:開始標籤,元素內容以及結束標籤。
開始標籤內也可以放入標籤屬性來提升標籤的功用。
標題與段落
HTML中,文字可以區分為標題以及段落兩種。
標題的標籤主要都是以h為開頭。
<h1>是最大的標題,<h6>則是最小
段落則是用p為標籤,其中<br>可以換行,<em>為斜體,<strong>為粗體
<p>此處放入段落</p>
功能表
功能表分為兩種,黑點的是<ul>,數字的是<ol>。
<ul>
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
</ul>
圖片
圖片的標籤為<img>,而這個標籤沒有結束標籤。
利用標籤屬性src可以告知圖片位置,alt則是圖片載入失敗時顯示的文字。
<img src="url." alt="text">
連結
<a>為連結標籤,其中href屬性表示連結目標,加入target="_blank"可以開新分頁。
<a href="url." target="_blank">可放任何東西表示點擊位置</a>
表格
表格比較複雜,我們先看程式碼。
<table>
<caption>標題</caption>
<tr>
<th>欄位名1</th>
<th>欄位名2</th>
<th>欄位名3</th>
</tr>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</table>
呈現的效果如下
標題
欄位名1 |
欄位名2 |
欄位名3 |
1-1 |
1-2 |
1-3 |
2-1 |
2-2 |
2-3 |
要使用表格時必須先要有<table>,<caption>為表格的標題(自動置中),
每一列都要用<tr>包住,每一格再用<th>和<td>匡著。