web前端之HTML5 入门（5）：表格、列表和区块

HTML 表格

HTML表格标签：

表格由 <table> 标签来定义。表格的每行由 <tr> 标签定义，行的每个单元格由 <td> 标签定义。

<td >指表格数据（table data），即数据单元格的内容。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

举个例子：

<table border="1">
    <tr>
        <td>(1 , 1)</td>
        <td>(1 , 2)</td>
    </tr>
    <tr>
        <td>(2 , 1)</td>
        <td>(2 , 2)</td>
    </tr>
</table>

浏览器显示如下：

——————————————————————————————————————————————————
上图中的边框，由属性 border定义。

表格的表头使用 <th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本。如下：

————————————————————————————————————————————————————
表格标题由<caption>标签定义
跨行跨列的单元格分别由属性colspan（行）和rowspan（列）定义：

——————————————————————————————————————————————————

HTML 列表

HTML 支持有序、无序和定义列表，列表标签为：

——————————————————————————————————————————————————
HTML无序列表——使用 <ul> 标签，每个列表项始于 <li> 标签。
：
：
——————————————————————————————————————————————————
HTML 有序列表——有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。列表项使用数字来标记。
：

————————————————————————————————————————————————————
HTML 自定义列表——自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

————————————————————————————————————————————————————

提示：列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

HTML 区块

HTML 可以通过

和 将元素组合起来，进行分组，形成区块。

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。 实例：
<h1>, <p>, <ul>, <table>

内联元素在显示时通常不会以新行开始。实例:：
<b>, <td>, <a>, <img>

举个例子——<div>标签：
<div> 元素是块级元素，它可用于组合其他 HTML 元素的容器，没有特定的含义。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格<table>定义布局的老式方法。

举个例子——<span> 元素：
<span> 元素是内联元素，可用作文本的容器，也没有特定的含义。与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。