跟着艾文一起学前端-第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的距离,就是单元格内边距

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

发布了37 篇原创文章 · 获赞 15 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/u012764358/article/details/104908849