列表根據信息展示有無先後順序劃分為有序ol>li,無序ul>li;div容器盛放邏輯版塊;什麼是表格,它是由一個個單元格cell構成,表格中列td的個數,取決於一行tr中數據單元格的個數,表頭th文本預設為粗體並且居中顯示,<table summary="表格簡介文本">/*摘要的內容是不會在瀏覽器... ...
列表根據有無前後順序展示分為有序<ol><li>...</li></ol>和無序<ul>lil>...</li></ul>,在網頁製作過程,我們可以把一些獨立的邏輯部分(什麼是邏輯部分?它是頁面上相互關聯的一組元素.如網頁中的獨立的欄目版塊,就是一個典型的邏輯部分.)劃分出來,放在一個<div>標簽中,這個<div>標簽的作用就相當於一個容器.
那麼如何區分這些div容器了?辦法和我們每一個人使用身份證差不多,可以為這些div添加clas類名或者id屬性名,一般這樣展示<div id="版塊名稱" class="類別名稱">…</div>,然後通過css找到這個元素並添加樣式.
假如你想製作一個表格展示數據,使網頁上的信息更加豐富,怎麼辦?建議使用<table>標簽,代碼展示如下:
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>認識table表標簽</title> 6 <style type="text/css"> 7 table tr td,th{ 8 border:1px solid #000; 9 } 10 </style> 11 </head> 12 <body> 13 <table summary="本表格記錄2012年到2013年庫存記錄，記錄包括U盤和耳機庫存量"> 14 <caption>“2012年到2013年庫存記錄”</caption> 15 <tr> 16 <th>產品名稱 </th> 17 <th>品牌 </th> 18 <th>庫存量（個） </th> 19 <th>入庫時間 </th> 20 </tr> 21 <tr> 22 <td>耳機 </td> 23 <td>聯想 </td> 24 <td>500</td> 25 <td>2013-1-2</td> 26 </tr> 27 <tr> 28 <td>U盤 </td> 29 <td>金士頓 </td> 30 <td>120</td> 31 <td>2013-8-10</td> 32 </tr> 33 <tr> 34 <td>U盤 </td> 35 <td>愛國者 </td> 36 <td>133</td> 37 <td>2013-3-25</td> 38 </tr> 39 </table> 40 </body> 41 </html>
✰通過table標簽(什麼是表格,它是由一個個單元格cell構成,表格中列td的個數,取決於一行tr中數據單元格的個數),預設table表格在沒有添加css樣式<style type="text/css">table tr td,th{border:1px solid #000;}之前,在瀏覽器中顯示是沒有表格線的,總結如下幾點:
1.<tr>…</tr>:表格的一行,所以有幾對tr表格就有幾行.
2.<td>…</td>:表格的一個單元格,一行中包含幾對<td>...</td>,說明一行中就有幾列.
3.<th>…</th>:表格的頭部的一個單元格,表格表頭,文本預設為粗體並且居中顯示
4.<table summary="表格簡介文本">/*摘要的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內容。*/
5.caption標簽,為表格添加標題和摘要,標題用以描述表格內容，標題的顯示位置：表格上方
