前面我們講過了HTML的基本架構,現在我們來說明一下其他HTML的標籤,來美化我們的網頁.
首先我們來認識一下標籤的類別,依標籤的用途來分,可以分為「內容顯示標籤」和「結構標籤」
「內容顯示標籤」是用來改變內容的顯示方法,比如說字要大一點,背景要改變顏色,這邊我要斷行等等.
以下為幾個「內容顯示標籤」的例子
<h1></h1>標題顯示<h1>這是h1的顯示</h1>
以標題方式顯示內容,HTML會顯示如下,是不是明顯放大呢??
這是h1的顯示
<p></p>來進行文章的分段<p>這是一段很長的文章</p><p>長到無法分段落</p><p>很難閱讀</p>
我們透過使用<p></p>段落標籤來替文章進行分段,顯示結果如下是不是比較容易閱讀了呢??
這是一段很長的文章
長到無法分段落
很難閱讀
<br>來進行文章的換行這是一段很長的文章<br>長到無法分段落<br>很難閱讀
使用<br>可以讓文章在需要的地方換到下一行,它和<p></p>不同的是,換行中間的間隔比較小,顯示結果如下
這是一段很長的文章
長到無法分段落
很難閱讀
那「結構標籤」則是用來建立表格,區塊,清單樣式等容器,再將內容放到容器內顯示給使用者,以下為幾個「結構標籤」的例子
<table>用來建立表格<table border="1">
<tr>
<td>內容1</td>
<td>內容2</td>
</tr>
<tr>
<td>內容3</td>
<td>內容4</td>
</tr>
</table>
上面的HTML程式會建立一個只有二行二列的表格,表格內放內容,顯示結果如下
| 內容1 | 內容2 |
| 內容3 | 內容4 |
<div style="background: red; height:100px; width:100px;">內容</div>
使用<div></div>建立一個區塊,並將背景設從紅色,裡面放內容
<ul>
<li>清單一</li>
<li>清單二</li>
</ul>
使用<ul><li></li></ul>來建立清單,顯示內容如下
- 清單一
- 清單二
這些標籤只是HTML的一小部分,而且每一個標籤還有屬性可以創造更多的變化,只要我們善用這些標籤和屬性,就可以讓你的網頁有各式各樣的模樣,接下來我們會針對常用的標籤及屬性來進行介紹.
綜合知識 (3)