HTML-表格與div標籤

基本表格

表格是用於排序內容的最佳手段。在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>標籤:

  1. <div>標籤是用來爲HTML文檔的內容提供結構和背景的元素。<div>開始標籤和</div>結束標籤之間的所有內容都是用來構成這個塊的,其中所包含標籤的特性由<div>標籤中的屬性來控制,或者通過使用樣式表格化這個塊進行控制。
  2. 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定義樣式

行內元素可以與其他行內元素位於同一行 行內元素內部可以容納其他行內元素,但是不可以容納塊元素

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章