跟着艾文一起学前端-第4篇-HTML的常用标签（2）-数据集标签

数据集标签

1. 列表

1.1 无序列表<ul>

<ul>
	<li> apple </li>
	<li> pen</li>
	<li> apple pen</li>
</ul>

效果如下：

• apple
• pen
• apple pen

<ul> 是unordered list ，就是没有排序号的列表，列表中的每一项是用 <li> 包裹起来的，li是list item 列表项的意思。

注意：<ul>标签包裹着<li>标签，<li>标签中可以包含其他标签

1.2 有序列表<ol>

由上面的无序列表应该能猜出来，有序列表就是ordered list ，被排序的列表，但是我觉得理解成带序号的列表更为准确。上代码

<ol>
	<li> apple </li>
	<li> pen</li>
	<li> apple pen</li>
</ol>

效果如下所示：

1. apple
2. pen
3. apple pen

我们可以看出，有序列表和无序列表的区别在于，有序列表每一项都会有数字序号，无序列表每一项前面是一个黑色的点，所以我们为了方便记忆，就把他们记成有序号和无序号列表。

上面这两个列表都是一列的，那如果想要有多个列，比如说像Excel表这样的呢，多列多行的数据呢，这就是接下来咱们要讲的另一个，表格标签

2. 表格标签- <table>

学过数据库的人应该知道table就是表格的意思，话不多说，先上代码，后讲解：

<table>
	<tr>
		<td>姓名</td>
		<td>性别</td>
		<td>年龄</td>
	</tr>
	<tr>
		<td>艾文</td>
		<td>男</td>
		<td>18</td>
	</tr>
	<tr>
		<td>艾克</td>
		<td>男</td>
		<td>18</td>
	</tr>
</table>

效果如下图所示：

姓名	性别	年龄
艾文	男	18
艾克	男	18

tr 是 table row 列表中的一行的意思，td是 table data 表数据的意思。 先说一下我个人对table的感觉，现实中我们表格，我们人都喜欢看一列一列的数据，但是计算机它只是按照一行一行的去读取展示的，不仅仅是HTML，我们可以将其理解为他是由一个一个的横向列表组成的。

咱们再来讲讲table标签的一些属性值

<table border="2" width=300 align="center" cellspacing=5 cellpadding=20>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>艾文</td>
            <td>男</td>
            <td>18</td>
        </tr>
        <tr>
            <td>艾克</td>
            <td>男</td>
            <td>18</td>
        </tr>
    </table>

效果图如下：

表格常用的属性说明：

属性名称	属性值	解释说明
border	整数数字类型，单位是像素，如2	表格的外边框的宽度
width	整数数字类型，单位也是像素，如300	表格的宽
align	center、left、right	表明列表是贴着浏览器水平位置的哪里，left是默认的，也就是说默认位于最左边，center是在浏览器页面的最中间，right是靠着最右边
cellspacing	像素值	是每一个<td>距离另个一<td>的距离，也叫作单元格的外边距，单元格的外边距更准确一些
cellpadding	像素值	是<td>中包裹的的元素距离td的距离，就是单元格内边距

为了更好地帮助理解，下面这张图可以帮助记忆：