Web学习历程（三）

作者：不正经 | 2024-02-16 21:39:30

踩

Web学习历程（三）

本文主要内容

列表标签：<ul>、<ol>、<dl>
表格标签：<table>
1
2

列表标签

列表标签分为三种。
1、无序列表< ul >，无序列表中的每一项是< li >
例如：

<ul>
	<li>默认1</li>
	<li>默认2</li>
	<li>默认3</li>
</ul>
1
2
3
4
5

效果：
在这里插入图片描述注意：

< li >不能单独存在，必须包裹在< ul >里面；反过来说, < ul >的“儿子”不能是别的东西，只能有< li >。
< ul >的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。

属性：

type=“属性值”。属性值可以选： disc(实心原点，默认)，square(实心方点)，circle(空心圆)。

代码展示：

<body>
    <ul>
        <li>默认1，默认</li>
        <li>默认2，默认</li>
        <li>默认3，默认</li>
    </ul>

    <ul type = "square">
        <li>实心方点1</li>
        <li>实心方点2</li>
        <li>实心方点3</li>
    </ul>

    <ul type = "circle">
        <li>空心圆1</li>
        <li>空心圆2</li>
        <li>空心圆3</li>
    </ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

效果如下：
在这里插入图片描述不光是< u l>标签有type属性，< ul >里面的< li >标签也有type属性（虽然说这种写法很少见。）
代码展示：

<ul type = "square">
        <li>实心方点1</li>
        <li type="circle">实心方点2</li>
        <li>实心方点3</li>
</ul>
1
2
3
4
5

效果如下：

在这里插入图片描述
上面说过< ul >的儿子只能是< li >。但是< li >是一个容量级标签，< li >里面什么都能放，甚至可以再放一个< ul >。
如:

2、有序列表< ol >，里面每一项是< li>

<ol >
	<li>呵呵哒1</li>
	<li>呵呵哒2</li>
	<li>呵呵哒3</li>
</ol>
1
2
3
4
5

属性：
type=“属性值”。属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合start属性表示从几开始。

代码展示：

<ol type="1">
	<li>我</li>
	<li>我</li>
	<li>我</li>
</ol>

<ol type="a">
	<li>爱</li>
	<li>爱</li>
	<li>爱</li>
</ol>

<ol type="i" start="4">
	<li>学</li>
	<li>学</li>
	<li>学</li>
</ol>

<ol type="I" start="10">
	<li>习</li>
	<li>习</li>
	<li>习</li>
</ol>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

效果如下：

在这里插入图片描述
和无序列表一样，有序列表也是可以嵌套的哦，这里就不举类似的例子了。
< ol >和< ul >就是语义不一样，怎么使用都是一样的。 < ol >里面只能有< li >，< li >必须被< ol >包裹。< li >是容器级。

3、定义列表< dl >

< dt >:definition title 列表的标题，这个标题是必须的。
< dd >:definition description列表的列表项，如果不需要它，可以不加

注：dt、dd只能在dl里面；dl里面只能有dt、dd。

代码展示：

<body>
   <dl>
       <dt>第一段</dt>
       <dd>我如果爱你——绝不像攀援的凌霄花，借你的高枝炫耀自己； </dd>
       <dd>我如果爱你——绝不学痴情的鸟儿，为绿荫重复单调的歌曲； </dd>

       <dt>第二段</dt>
       <dd>也不止像泉源，常年送来清凉的慰藉；也不止像险峰，增加你的高度，</dd>
       <dd>衬托你的威仪。甚至日光，甚至春雨。</dd>
   </dl>
</body>
1
2
3
4
5
6
7
8
9
10
11

效果展示：
在这里插入图片描述上图可以看出，定义列表表达的语义是两层：

（1）是一个列表，列出了几个dd项目
（2）每一个词儿都有自己的描述项。
1
2

定义列表用法非常灵活，可以一个dt配很多dd，也可以让每一个dl里面只有一个dt 和 dd。
dt、dd都是容器级标签，想放什么都可以。所以，现在就应该更加清晰的知道：用什么标签，不是根据样子来决定，而是语义（语义本质上是结构）。

表格标签

表格标签用< table >表示。一个表格< table >是由每行< tr >组成的，每行是由每个单元格< td >组成的。所以我们要记住，一个表格是由行组成的（行是由列组成的），而不是由行和列组成的。在以前，要想固定标签的位置，唯一的方法就是表格。现在可以通过CSS定位的功能来实现。但是现在在做页面的时候，表格作用还是有一些的。
例如制作一个3行4列的单元格：

<table>
	<tr>
		<td>学号</td>
		<td>姓名</td>
		<td>性别</td>
		<td>年龄</td>
	</tr>

	<tr>
		<td>01</td>
		<td>张三</td>
		<td>男</td>
		<td>18</td>
	</tr>

	<tr>
		<td>15</td>
		<td>李四</td>
		<td>女</td>
		<td>17</td>
	</tr>

</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

效果如下：
在这里插入图片描述 < table >的属性：

border：边框。像素为单位。
style=“border-collapse:collapse;”：单元格的线和表格的边框线合并（表格的两边框合并为一条）
width：宽度。像素为单位。
height：高度。像素为单位。
bordercolor：表格的边框颜色。
align：表格的水平对齐方式。属性值可以填：left right center。
注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签进行设置）
cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。
注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir=“rtl”，那就指的是内容到右边那条线的距离。
cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
bgcolor="#99cc66"：表格的背景颜色。
background=“路径src/…”：背景图片。背景图片的优先级大于背景颜色。
bordercolorlight：表格的上、左边框，以及单元格的右、下边框的颜色
bordercolordark：表格的右、下边框，以及单元格的上、左的边框的颜色这两个属性的目的是为了设置3D的效果。
dir：公有属性，单元格内容的排列方式(direction)。可以取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left）
既然说dir是共有属性，如果把这个属性放在任意标签中，那表明这个标签的位置可能会从右开始排列。

单元格的合并
单元格的属性：
colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。
rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上要占据两个单元格的位置。
效果举例：（横向合并）
效果举例：（纵向合并）
注：别忘了删除多余的单元格

补：以上内容参考[https://github.com/qianguyihao/Web/blob/master/01-HTML]，本篇博客仅作为学习参考，若有侵犯，告知必删

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/96917?site