上次介紹了一些簡單的文本標簽設計, 這篇介紹列表類標簽, 通過列表能寫出很好看的, 多元化的網路頁面. ul-li 列表標簽 <ul> <li>列表1</li> <li>列表2</li> </ul> ul-li在網頁中顯示的預設樣式一般為:每項li前都帶一個圓點, 所以ul-li是沒有序號的信息列表
上次介紹了一些簡單的文本標簽設計, 這篇介紹列表類標簽, 通過列表能寫出很好看的, 多元化的網路頁面.
ul-li 列表標簽
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
ul-li在網頁中顯示的預設樣式一般為:每項li前都帶一個圓點, 所以ul-li是沒有序號的信息列表, 不存在前面的1, 2, 3等等的序號為其排序.
ol-li 列表標簽
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
</ol>
ol-li在網頁中顯示的預設樣式和ui-li的區別就在於, 它是有序號的信息列表, 所以它的前面不再是圓點, 而是1, 2, 3等等的序號為其排序, 如果懂一些英文的人我想會更好記憶(<ul>代表的就是, unorder list, <ol>代表的是order list, <li>代表的是list, 如上都是我推斷出來, 英文本人慚愧的連四級都沒有過, 所以如果哪裡有錯誤, 希望批評指正).
<div>邏輯標簽
<div>邏輯標簽很大程度上和文本標簽中的<span>很像, 但是它是有語義的, 也會對原本的佈局產生影響, 之所以說很像, 也是因為<div>標簽大部分都只是為自定義提供了一個容器, 這點和<span>是相同的, 在實際的網頁中, <div>也和<span>一樣, 是最重要的標簽之一. <div>最主要的作用是將一個完整的邏輯模塊框在一起, 說的通俗一點, 就是古惑仔中的這片場子歸我管.
<table>表格標簽
先來簡單說說標簽名字的含義, 我個人習慣這樣, 因為這樣能方便記憶, 就如同ol-li這樣似的, 在<table>中會有三種必用標簽, <tr>, <th>, <td>.
<tr> table row 表格行標簽, 這個標簽的出現意味著下麵的都是這一行上面要出現的數據, 結束也就意味著這一行結束了. 再出現當然就是又出現一行了.
<th> table head 表頭標簽, 這個標簽是內嵌在<tr>中的, 因為先有行, 才會有表頭對吧, 所以這個只會在一個<tr>標簽中出現, 畢竟表頭不可能有兩行.
<td> table data cell 單元數據標簽, 這個標簽的的用法和<th>是一樣的, 在非表頭行使用, 是指每個單元中和表頭標題一一對象的元素, 所以在第一行表頭有多少個<th>在後面的<tr>中就會有多少個<td>與之相對應.
下麵上代碼給大家解釋:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>認識table表標簽</title> </head> <body> <!--表格開始標簽--> <table> <!--表格行開始標簽--> <tr> <!--表格頭標簽--> <th>班級</th> <th>學生數</th> <th>平均成績</th> </tr> <tr> <!--表格單元格標簽--> <td>一班</td> <td>30</td> <td>89</td> </tr> <tr> <td>二班</td> <td>35</td> <td>85</td> </tr> <tr> <td>三班</td> <td>32</td> <td>80</td> </tr> </table> </body> </html>
運行效果如下
可能會有人想, 表格為什麼沒有邊框呢, 但是這些是需要css進行幫助的, 所以這裡就先不解釋如何添加了.
<caption>表格標題標簽
這個標簽沒什麼可說的, 就是為表格添加一個標題, 使用在<table>開始標簽之後.
