网页中表格和列表随处可见,所以我们需要掌握各个标签的用法以及区别。
表格
简单的HTML表格由table元素以及多个tr th或td元素组成。这几个都是双标签。
tr定义行 th定义表头 td定义表格单元
两行两列的表格,常见代码:(运行结果自己查看)
<table> <tr> <th>序号</th> <th>姓名</th> </tr> <tr> <td>1</td> <td>张三</td> </tr> </table>
复杂的表格可能包含thead、tbody、tfoot比较常见,caption、col、colgroup不常见。
具体用法示例:(运行结果自己查看)
<table> <thead> <tr> <th>标题头</th> <th>标题头</th> </tr> </thead> <tbody> <tr> <td>单元内容</td> <td>单元内容</td> </tr> </tbody> <tfoot> <tr> <td>表格尾</td> <td>表格尾</td> </tr> </tfoot> </table>
列表
HTML支持有序、无序和定义列表。具体解释如下:
1、有序列表:列表项目使用数字进行标记。有序列表始于<ol>标签,每个列始于<li>标签。
示例:(运行结果自己查看)
<ol> <li>我</li> <li>喜</li> <li>欢</li> <li>你</li> </ol>
2、无序列表:每一列使用原点或圆圈进行标记。无序列表始于<ul>标签,每个列始于<li>标签。
示例代码:(运行结果自己查看)
<ul> <li>Coffee</li> <li>Milk</li> </ul>
2、自定义列表:每一列使用原点或圆圈进行标记。无序列表始于<dl>标签,每个列始于<dt>或者<dd>标签。dt内容块的标题,dd 内容。
示例代码:(运行结果自己查看)
<dl> <dt>标题</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>