【HTML、CSS和JavaScript制作网页成品】这段代码实现了一个简单的“喝水提醒”网页应用，旨在帮助用户跟踪他们每天喝了多少水，目标是2升

这段代码实现了一个简单的“喝水提醒”网页应用，旨在帮助用户跟踪他们每天喝了多少水，目标是2升。以下是代码的详细分析：

HTML结构

1. 头部（Head）:
   • 设置了字符集为UTF-8。
   • 设置了视口，以确保页面在移动设备上正确显示。
   • 在<style>标签中定义了CSS样式，使用了CSS变量来定义边框和填充颜色。
   • 引入了Montserrat字体（虽然代码中没有直接的链接，但通常通过Google Fonts或其他服务加载）。
   • 设置了页面的标题为“Drink Water”。
2. 主体（Body）:
   • 包含一个标题<h1>和一个副标题<h3>，显示应用的主要目的和喝水目标。
   • 有一个大的容器.cup，用于显示已经喝了多少水。
   • 在.cup内部，有一个.remained部分，显示剩余的水量，以及一个.percentage部分，以图形方式显示喝水的进度。
   • 一段文本<p>，提示用户选择他们喝了多少杯水。
   • 一个.cups容器，包含多个小的.cup-small元素，每个代表250毫升的水。

CSS样式

• 使用了CSS变量（--border-color 和 --fill-color）来方便地管理颜色。
• 对所有元素设置了box-sizing: border-box;，确保元素的尺寸包括边框和内边距。
• 设置了页面的背景颜色、文本颜色和字体。
• 定义了.cup和.cup-small的样式，包括大小、边框、颜色、圆角等。
• .cup-small.full类用于表示杯子已满的状态，改变背景色和文字颜色。
• .percentage的高度会根据喝水的进度动态变化。

JavaScript功能

1. 变量初始化:
   • smallCups：获取所有.cup-small元素。
   • liters、percentage、remained：获取用于显示剩余水量、百分比和剩余文字的元素。
2. 事件监听:
   • 为每个.cup-small元素添加了点击事件监听器。点击时，调用highlightCups函数。
3. 函数: