跟着艾文一起学前端-第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表格的宽
aligncenter、left、right表明列表是贴着浏览器水平位置的哪里,left是默认的,也就是说默认位于最左边,center是在浏览器页面的最中间,right是靠着最右边
cellspacing像素值是每一个<td>距离另个一<td>的距离,也叫作单元格的外边距,单元格的外边距更准确一些
cellpadding像素值是<td>中包裹的的元素距离td的距离,就是单元格内边距

为了更好地帮助理解,下面这张图可以帮助记忆:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值