基本表格
表格是用於排序內容的最佳手段。在HTML頁面中,有很多頁面都是使用表格進行排版的。基本表格是由
<table>
標籤、<tr>
標籤和<td>
標籤組成的。通過使用<table>
標籤,可以製作課程表、成績單等常見的表格。
用於製作表格的主要標籤:
標籤 | 含義 |
---|---|
<table> |
表格標籤 |
<tr> |
行標籤 |
<td> |
單元格標籤 |
語法個格式如下:
<table>
<tr>
<td>單元格內的文字</td>
<td>單元格內的文字</td>
...
</tr>
<tr>
<td>單元格內的文字</td>
<td>單元格內的文字</td>
...
</tr>
...
</table>
在上面代碼中,
<table>
和</table>
標籤分別表示一張表格的開始和結束;而<tr>
和</tr>
標籤則分別表示表格中一行開始和結束表示改表格有幾行;<td>
和</td>
標籤分別表示一個單元格的開始與結束,也就是一行中包括幾列。
表頭的設置:
表格中還有一種特殊的單元格,稱爲表頭。表頭一般位於表格第一行,用來表明改列的內容類別,用
<th>
和</th>
標籤來表示。標籤與標籤的使用方法相同,但是標籤中內容是加粗顯示的。
語法格式如下:
<table>
<caption>表格的標題</caption>
<tr>
<th>表格的表頭</th>
<th>表格的表頭</th>
....
</tr>
<tr>
<td>單元格內的文字</td>
<td>單元格內的文字</td>
....
</tr>
....
</table>
<div>
標籤:
<div>
標籤是用來爲HTML文檔的內容提供結構和背景的元素。<div>
開始標籤和</div>
結束標籤之間的所有內容都是用來構成這個塊的,其中所包含標籤的特性由<div>
標籤中的屬性來控制,或者通過使用樣式表格化這個塊進行控制。- div的全稱爲division,意爲“分隔”
<div>
標籤被稱爲分割標籤,表示一塊可以顯示HTML的區域,用於設置字、圖片、表格等的擺放位置。div標籤是塊級標籤,需要結束標籤</div>
(說明:塊級標籤又名塊級元素(Block Element),與其對應的是內聯元素(也稱行內標籤))
語法格式如下:
<div>
.....
</div>
塊元素和行內元素
- 塊元素:在HTML中,塊元素在瀏覽器顯示狀態下將佔據一整行,並且排斥其他元素與其位於同一行。此外,一般情況下,塊元素內部可以容納其他塊元素和行內元素。
- 行內元素:在HTML中,行內元素跟塊元素恰恰相反,行內元素是可以其他行內元素位於同一行的,此外,行內元素內部(標籤內部)只可以容納其他行內元素,不可以容納塊元素。
HTML常見塊元素
塊元素 | 說明 |
---|---|
h1~h6 | 表題元素 |
p | 段落元素 |
div | div元素 |
hr | 水平線 |
ol | 有序列表 |
ul | 無序列表 |
HTML常見行內元素
行內元素 | 說明 |
---|---|
strong | 粗體元素 |
em | 斜體元素 |
a | 超鏈接 |
span | 常用行內元素,結合css定義樣式 |
行內元素可以與其他行內元素位於同一行 行內元素內部可以容納其他行內元素,但是不可以容納塊元素