零基础学前端系列教程 | 和前端谈恋爱的第005天—

温馨提示：被【】包裹的是专有名词，详细介绍见下文的恋爱宝典，你可以在目录中快速找到它们，有任何问题/建议，欢迎随时微信我，我是朝阳 13908056224！

经过第4天的精心打扮，我成功约到了前端，并一起看了电影《爱情神话》

零基础学前端系列教程 | 和前端谈恋爱的第004天——打扮漂亮

虽然约会进展还算顺利，不过反思下，还是有以下几点做得不太好：

无论什么原因，都应该比她先到电影院；
金箔玫瑰（随手礼）应该在见她的第一时间就送给她；

3. 一起晚餐（小吃）时，自顾吃自己的，表现得不够热情和贴心；
4. 看电影过程中，没有主动请她吃爆米花；
5. 电影还是不太符合她的口味，应该提前了解她喜欢的电影类型。

嗯，下次约会，这些方面，我一定要多多注意啦！

最后，一起来看看此次约会的账单吧：

可真巧，刚好一张红票票

诶，慢着，别看这约会账单用Excel 实现非常简单，但我这是用前端代码实现，可以在网页中查看的哦，下面就跟随我一起来学习表格的制作和设计吧！

新建网页

首先，我们重新创建一个空白的网页文件，这次改用前端编程神器【vscode】

在桌面上新建文件夹 day5
用【vscode】打开文件夹day5
新建文件 index.html
快捷生成【html模板】
在index.html中，输入html会自动弹出快捷菜单，选择 html:5

自动生成的【html模板】效果如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

是不是超级快捷又方便？
接下来就可以在【body】标签中任意挥洒我们的代码啦！

表格 table

整个账单就是一个表格，需使用到 html 和表格相关的一系列标签，表格标签在html世界里可是个豪门大户，我们先来看看它的族谱吧！

让我们来一步步实现它，你就更清楚啦！

<!-- 整个表格 -->
<table border="1" cellspacing="0"><!-- 表格的标题 --><caption>约会账单</caption><!-- 表格的头部 --><thead><tr><th>类型</th><th>内容</th><th>单价</th><th>数量</th><th>总价</th></tr></thead><!-- 表格的身体 --><tbody><tr><td>娱乐</td><td>电影票</td><td>30</td><td>2</td><td>60</td></tr><tr><td rowspan="2">美食</td><td>奶茶</td><td>12</td><td>2</td><td>24</td></tr><tr><td>爆米花</td><td>16</td><td>1</td><td>16</td></tr><tr><td colspan="4">合计</td><td>100</td></tr></tbody>
</table>

table 标签就像个围墙一样，把所有表格元素都包围在里面
table 标签上还添加了两个属性，一个是属性border="1" 用于指定表格的边框粗细为1px，另一个属性 cellspacing="0" 用于清除单元格和单元格之间的间隙（默认有1px的间隙）
表格的标题，用 caption 标签包裹，默认就有水平居中的效果。
表格的标题下方是表格的头部（简称表头），用 thead （table head 表格头部的简写）标签包裹，本范例中只有一行表头，所以内部只有一对 tr （table row 表格行的首字母缩写）标签。
本表格一共5列，每一列都对应一个表头单元格（即表头里的单元格），每个表头单元格用 th （table head 表格头部的首字母缩写）标签包裹，默认就有字体加粗的样式效果。
表头的下方紧接表格的身体（即表格的主体内容，具体数据部分），用 tbody （table body 表格身体的简写）标签包裹
共4行数据，所以 tbody 标签内共有 4 对 tr 标签。
第1行数据共5列，对应5个标准单元格，分别用 td （table data 表格数据的首字母缩写）标签包裹。
第2行数据的第1个单元格 “ 美食 ” 在垂直方向跨越两行，所以添加了属性 rowspan (用于合并行) , 属性值为2。
第3行数据因为第2行的 “ 美食 ” 占用了1个单元格，所以虽然有5列，但只剩下4个单元格的空位填充数据。
第4行数据的第1个单元格 “ 合计 ” 在水平方向跨越 4 行，所以添加了属性 colspan (用于合并列) , 属性值为4，剩下最后一个单元格的空位填充数据 100 。

这样就实现了用html来绘制表格啦，是不是也挺好理解呢？

美化表格

杨澜说得好 “ 没有人愿意通过你邋遢的外表去了解你高尚的灵魂！”
但凡是需要给别人看的，那形象工程就特别特别重要。
作为以展示数据为核心目标的表格，该怎样美化呢？

主题色

每个网页通常都有一个主题色，作为恋爱主题，当然首选“恋爱粉”啦！

使用第4天教你的拾色器工具，便能轻松获取到它的颜色值 #ffb5cc

对于表格而言，通常需要用到主题色的有：

表格标题的文字颜色
表头的背景色
单元格的边框颜色

这么多地方都要用到，万一换个主题色，会不会需要改很多代码呢？
有没有好的解决方案呢？
当然有，快拨打 120 ，呼叫 “CSS自定义属性” 来帮忙！

CSS自定义属性

我们知道 CSS 有很多很多样式，比如控制颜色的样式 color ，改变文字粗细的样式 font-weight ，若将CSS看作一个【对象】，那么这些样式就是它的【属性】，像 color 这些提前被定义好，无论在哪使用含义都相同的属性叫官方属性，倘若我们想自己定义一个样式，那么就要用到 CSS自定义属性，定义格式如下：

--ThemeColor: #ffb5cc;

用 -- 开头，后面接的自定义的样式名称需符合以下规则：

支持数字命名
支持使用短横线和空格命名
支持中文、日文、韩文
不支持包含$、[、]、^、(、)、%、"等特殊字符的命名，要使用这些特殊字符，需要使用反斜杠转义。

那么这里的 --ThemeColor 就是一个 CSS 自定义属性，其属性值就是我们的主题色 #ffb5cc

CSS 自定义属性通常都写在当前页面最顶级的标签上，所以最终 table 标签的css样式为

table {--ThemeColor: #ffb5cc;--TableBorder: 1px solid var(--ThemeColor);margin: 30px;text-align: center;border-left: var(--TableBorder);
}

代码倒不多，但知识点海量，不要急，让我们来一一解析：

首先是 table{} ，这是一种新的给标签添加样式的方式，叫【CSS标签选择器】（详见下文的恋爱宝典），此处即表示给 table 标签添加样式。
--ThemeColor 刚刚才学过，是一个CSS 自定义属性，其属性值是我们的主题色 #ffb5cc
那么同理 --TableBorder 是另一个CSS 自定义属性，其属性值是1px solid var(--ThemeColor) ，用来描述表格【边框】的，含义为 1px 粗细的实线（solid），颜色与主题色相同。这里又用到了一个新的 CSS 函数 var() ，参数为CSS 自定义属性，用于解析获取CSS 自定义属性的属性值，最终效果与下方代码相同：

--TableBorder: 1px solid #ffb5cc;

margin: 30px; 用于给表格的上下左右都添加 30px 的外边距
text-align: center; 用于指定表格内的文本对齐方式全部为水平居中对齐。
border-left 用于指定表格的左边框样式，此处直接使用 var(--TableBorder) , 则当修改CSS自定义属性--ThemeColor和 --TableBorder 时，border-left 也会同步变化，我们一直担忧的主题色发生变化需要修改大量代码的问题就这样轻松解决啦！

至此，表格的效果如下：

非常棒，已经有点像模像样了，接下来从上到下，依次美化吧！

美化表格标题

caption {color: var(--ThemeColor);font-weight: bold;font-size: 24px;line-height: 60px;
}

【CSS标签选择器】 caption {} 会选中caption 标签，并给它添加样式；
color 的属性值 var(--ThemeColor) 会被解析为主题色 #ffb5cc
font-weight: bold; 用于加粗文字
font-size: 24px; 用于加大文字
line-height: 60px; 指定行高，可以增加表格的标题和表头之间的间距。

美化表头

为了简化描述，以后 thead 和 th 都统称为表头。

th {padding: 5px 10px;color: white;background-color: var(--ThemeColor);
}

【CSS标签选择器】 th{} 会选中所有 th 标签，并给它添加样式；
color: white; 将前景色设定为白色
background-color: var(--ThemeColor); 将背景色设定为主题色–恋爱粉

美化单元格

为了简化描述，以后单元格仅指 td ，不包含表头单元格 th ( 以后也简称为表头啦！)

td {padding: 5px 10px;border-right: var(--TableBorder);border-bottom: var(--TableBorder);
}

【CSS标签选择器】 td{} 会选中所有 td 标签，并给它添加样式；
padding: 5px 10px; 给每个单元格都添加上下内边距 5px 左右内边距 10px ，这样可以让单元格边框与内容保持一定的距离，又更加扁平，看起来更稳固舒服些！
border-right 指定单元格的右边框与自定义的表格边框样式相同；
border-bottom 指定单元格的下边框与自定义的表格边框样式相同；

美化边框

其实我们已经添加了大量的边框样式：

给表格 table 添加了左边框

  border-left: var(--TableBorder);

给单元格 td 添加了右和下边框

  border-right: var(--TableBorder);border-bottom: var(--TableBorder);

按道理来讲，表头th应该没有边框，表格的左边框和单元格的下和右边框也都应该是恋爱粉，为什么似乎有黑线存在呢？

其实这是表格的默认边框效果，还记得我们给table添加了属性border="1" 吗？
现在我们已经重新设计了边框样式，就不需要默认的边框啦，赶紧将它改成 0 吧！

 <table border="0" cellspacing="0">

哇，就像变魔法一样，瞬间表格的颜值就提升了一个境界！

美化列宽

尽管表格已经基本完成了美化，但总觉得有点不够大气，问题出在哪儿呢？
是列宽！

有节奏的列宽变化和扁平化的设计更利于展现表格的妩媚，可以该怎么做呢？
新的神器要上线啦！ —— colgroup 和 col 标签

    <!-- 整个表格 --><table border="0" cellspacing="0"><!-- 表格的标题 --><caption>约会账单</caption><!-- 自定义表格的列宽 --><colgroup><col class="col1" /><col class="col2" /><col class="col3" /><col class="col4" /><col class="col5" /></colgroup><!-- 表格的头部 --><thead>

colgroup标签只能用于 table标签内部，表示列的集合
col标签只能用于 colgroup标签内部，表示列
通过给 col标签添加列宽/背景色的样式，就能轻松调整表格的列宽和指定列的背景色啦！

赶紧试一下，在style 标签中添加以下与col标签的 class 属性值对应的样式:

.col1 {width: 100px;
}
.col2 {width: 200px;
}
.col3 {width: 80px;
}
.col4 {width: 80px;
}
.col5 {width: 100px;
}

小技巧：使用数字来区分不同列的 class 属性值可以方便一眼就看出是第几列。

哇，一下子就 nice 啦！

突显重要数据

最后，为了提升表格传达信息的效率，让表格更加一目了然，对于重点关注的数据，可以通过加粗、添加背景色、改变前景色来突出强调下。

比如加粗付款的内容：

<td class="b">电影票</td>
……
<td class="b">奶茶</td>
……
<td class="b">爆米花</td>

给最后一行添加背景色、改变前景色、并加粗：

<tr class="totalRow b"><td colspan="4">合计</td><td>100</td>
</tr>

相关样式如下：

.b {font-weight: bold;
}
.totalRow {color: red;background: #f2f6fc;
}

最终效果

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>约会账单</title></head><body><!-- 整个表格 --><table border="0" cellspacing="0"><!-- 表格的标题 --><caption>约会账单</caption><!-- 自定义表格的列宽 --><colgroup><col class="col1" /><col class="col2" /><col class="col3" /><col class="col4" /><col class="col5" /></colgroup><!-- 表格的头部 --><thead><tr><th>类型</th><th>内容</th><th>单价</th><th>数量</th><th>总价</th></tr></thead><!-- 表格的身体 --><tbody><tr><td>娱乐</td><td class="b">电影票</td><td>30</td><td>2</td><td>60</td></tr><tr><td rowspan="2">美食</td><td class="b">奶茶</td><td>12</td><td>2</td><td>24</td></tr><tr><td class="b">爆米花</td><td>16</td><td>1</td><td>16</td></tr><tr class="totalRow b"><td colspan="4">合计</td><td>100</td></tr></tbody></table><style>table {--ThemeColor: #ffb5cc;--TableBorder: 1px solid var(--ThemeColor);margin: 30px;text-align: center;border-left: var(--TableBorder);}caption {color: var(--ThemeColor);font-weight: bold;font-size: 24px;line-height: 60px;}th {padding: 5px 10px;color: white;background-color: var(--ThemeColor);}td {padding: 5px 10px;border-right: var(--TableBorder);border-bottom: var(--TableBorder);}.col1 {width: 100px;}.col2 {width: 200px;}.col3 {width: 80px;}.col4 {width: 80px;}.col5 {width: 100px;}.b {font-weight: bold;}.totalRow {color: red;background: #f2f6fc;}</style></body>
</html>

恋爱宝典

vscode

VSCode（全称：Visual Studio Code）是一款特别适合前端开发的代码编辑器，就像 word 特别适合编辑办公类图文并茂的文档、Excel 特别适合制作表格、PPT特别适合制作演示文稿一样，只是一种安装在电脑上的软件。

打开链接 https://code.visualstudio.com/Download 便能下载安装它

我的电脑是win11的操作系统，所以选择 windows，请根据你的操作系统，下载匹配的版本。

html 模板

文件格式后缀名为 .html 的文件即网页文件，一个规范的html文件通常结构如下：

我们通常只需在 body 标签内，编辑所需的代码即可，其他标签大多是固定写法，所以这些不怎么变化的标签写法就被设定成了一种模板，每次新建网页时，让vscode帮我们自动生成即可：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>看我，看我，快看我，在这里编写代码就好了哈！
</body>
</html>

至于为什么要写这些奇奇怪怪的代码，不必深究，有兴趣的朋友也可以自行百度，若在后续课程中，涉及到相关的改动，到时候会详细介绍的哦！

body 标签–网页的身体

如果把一个网页（html文档）看作一个人，那么整个人首先被html 标签包裹，在html 标签里，就有网页的头 head 标签和网页的身体 body 标签。网页内容相关的代码，就写在 body 标签中。

<html><head> </head><body> 看我，看我，快看我，在这里编写代码就好了哈！</body>
</html>

对象

将事物看作一个对象，是一种编程思想，叫 “面向对象编程”

任何东西都能看做一个对象，既可以是具体的事物，如猫、狗，也可以是抽象的概念，如恋爱心理、哲学问题。

对象通常是一个名词，如猫 cat，狗 dog

对象有个别名，叫“实例”，只是叫法不同而已，都是指具体的某个事物。

属性

对象拥有的特征，如姓名、颜色、体重，一般为名词。

属性值 —— 属性具体的值，如姓名为朝阳、颜色为黄色、体重为58kg，其中的朝阳、黄色、58kg都是属性值

方法

对象执行的动作，如跑步、睡觉、吃饭，一般为动词。

CSS 标签选择器

我们已经知道，html 负责构建内容，css用于添加样式，但两者写法完全不同，那么他俩是如何协同工作的呢?

关键点就在于 “ CSS 选择器 ”，而 CSS 标签选择器只是其中一种。

CSS 标签选择器通过html标签名来选中元素，如将超链接a标签的颜色改成红色

<style>
a {color: red;
}
</style>

格式为 标签名{}
写在 style 标签中
效果是页面中，所有的超链接都会变成红色。

边框

每个html标签都相当于装在了一个透明的矩形盒子里，所以它们的边框都是一个矩形。