列表元素和表格元素即展示信息的界面渣淳,主要用于顯示信息,不需要用戶直接輸入信息的界面伴箩。
界面展示元素常用的有4個:ul, ol, dl, table入愧。
- ui: unordered lists, 代表一個無序列表。 主要嵌套<li...>標(biāo)簽嗤谚,li即list列表的意思
<body>
<! 定義無序列表, 及沒有序號的列表 >
<! unordered lists 代表一個無序列表開始>
<ul>
<li>瘋狂Java講義</li>
<li>輕量級Java EE企業(yè)應(yīng)用實戰(zhàn)</li>
<li>瘋狂Android講義</li>
</ul>
</body>
顯示效果:
無序列表.png
- ol: ordered lists, 有序列表棺蛛, 和ul相對,是一個有序列號的列表巩步,可以設(shè)置開始序號和序號的類型鞠值。
<body>
<! ordered lists 代表一個有序列表開始>
<ol start="1" type="i">
<li>瘋狂Java講義</li>
<li>輕量級Java EE企業(yè)應(yīng)用實戰(zhàn)</li>
<li>瘋狂Android講義</li>
</ol>
</body>
顯示效果如下,可以看到序號從1開始
有序列表.png
- dl: definition list定義列表, 可以將相似屬性的信息分類展示并給出分組信息標(biāo)題
<body>
<! definition list定義列表>
<dl>
<! Definition Title 定義標(biāo)題>
<dt>Java系列書籍</dt>
<! Definition Description定于描述>
<dd>瘋狂Java體系</dd>
<dd>瘋狂Java講義</dd>
<dd>輕量級Java EE企業(yè)應(yīng)用實戰(zhàn)</dd>
<dt>其他書籍</dt>
<dd>Struts 2.1 權(quán)威指南</dd>
<dd>基于J2EE的Ajax寶典</dd>
</dl>
</body>
顯示效果:可以看到我們將書籍分為Java系列書籍和其他書籍兩類渗钉。
定義列表.png
- table: 表格元素,類似于iOS中的UITableView控件钞钙,主要起展示信息的作用鳄橘。
<body>
<! table 定義表格 類似于 iOS中的UITableView>
<table style="width: 400px" border="1">
<!-- 整個table的標(biāo)題,不管在哪個地方添加,它都會被放在最上面-->
<caption><b>瘋狂Java體系圖書</b></caption>
<thead>
<! table row 一行 >
<tr>
<!-- 單元格數(shù)據(jù), 只是字體表現(xiàn)和td不一樣,每組只需要設(shè)置一次就好 可以將th當(dāng)做每組tr的headerView,類似iOS中每個section的headerView-->
<th>書名</th>
<th>作者</th>
</tr>
</thead>
<tbody>
<tr>
<!-- table data 單元格數(shù)據(jù) -->
<td>瘋狂Java講義</td>
<td>李剛</td>
</tr>
<tr>
<td>輕量級Java EE企業(yè)應(yīng)用實戰(zhàn)</td>
<td>李剛</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2" style="text-align: right">現(xiàn)總計:2本書</td>
</tr>
</tfoot>
</table>
</body>
展示效果如下柠硕, 可以看到table用總標(biāo)題, 還有頭部勉躺、腳部和正文部分, 這是一個固定的套路藕届。
表格元素.png
這節(jié)主要是按照自己學(xué)習(xí)時的理解本刽,將用于信息展示的一些元素統(tǒng)計到一起鲸湃。