有序无序列表,div盛放逻辑版块,table表格
列表根据有无前后顺序展示分为有序<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标签,为表格添加标题和摘要,标题用以描述表格内容，标题的显示位置：表格上方
