在构建网站时，星星评价系统是一个常见的功能，它不仅能够帮助网站收集用户反馈，还能提升用户体验。以下，我将详细讲解如何使用HTML代码轻松实现一个星星评价系统。

1. 基本概念

星星评价系统通常由一组可交互的星星图标组成，用户可以通过点击星星来表示他们的评分。这个系统通常涉及到CSS和JavaScript，但在这里，我们将专注于HTML的基础实现。

2. HTML结构

首先，我们需要创建一个HTML结构，它将包含星星图标和评分的隐藏输入字段。

<div class="star-rating">
  <input type="radio" id="5-star" name="rating" value="5">
  <label for="5-star" class="star">&#9734;</label>
  <input type="radio" id="4-star" name="rating" value="4">
  <label for="4-star" class="star">&#9734;</label>
  <input type="radio" id="3-star" name="rating" value="3">
  <label for="3-star" class="star">&#9734;</label>
  <input type="radio" id="2-star" name="rating" value="2">
  <label for="2-star" class="star">&#9734;</label>
  <input type="radio" id="1-star" name="rating" value="1">
  <label for="1-star" class="star">&#9734;</label>
</div>

在这个例子中，我们创建了五个单选按钮，每个按钮都对应一个星星。每个单选按钮都关联一个标签（<label>），这个标签包含了星星字符（使用HTML实体&#9734;）。

3. CSS样式

为了使星星看起来像星星，并且能够响应用户的点击，我们需要添加一些CSS样式。

.star-rating {
  direction: rtl; /* 从右向左，使得星星从满到空排列 */
  unicode-bidi: bidi-override;
}

.star {
  font-size: 2em; /* 根据需要调整星星大小 */
  cursor: pointer;
  display: inline-block;
}

/* 根据选中的星星显示不同的样式 */
input[type="radio"]:checked ~ label {
  color: gold;
}

这段CSS代码设置了星星的方向，使得星星从满到空排列，并且当单选按钮被选中时，相应的星星会变成金色。

4. JavaScript交互

为了实现更好的用户体验，我们可以使用JavaScript来动态地显示选中的星星。

<script>
  // 获取所有的星星标签
  const stars = document.querySelectorAll('.star');
  
  // 为每个星星添加点击事件监听器
  stars.forEach(star => {
    star.addEventListener('click', () => {
      // 将所有星星的颜色重置为灰色
      stars.forEach(s => s.style.color = 'gray');
      // 设置当前点击的星星为金色
      star.style.color = 'gold';
    });
  });
</script>

这段JavaScript代码为每个星星添加了一个点击事件监听器，当用户点击一个星星时，它会将所有星星的颜色设置为灰色，并将当前点击的星星设置为金色。

5. 完整示例

将上述HTML、CSS和JavaScript代码合并，就可以得到一个完整的星星评价系统。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>星星评价系统</title>
<style>
  .star-rating {
    direction: rtl;
    unicode-bidi: bidi-override;
  }
  .star {
    font-size: 2em;
    cursor: pointer;
    display: inline-block;
  }
  input[type="radio"]:checked ~ label {
    color: gold;
  }
</style>
</head>
<body>
<div class="star-rating">
  <input type="radio" id="5-star" name="rating" value="5">
  <label for="5-star" class="star">&#9734;</label>
  <input type="radio" id="4-star" name="rating" value="4">
  <label for="4-star" class="star">&#9734;</label>
  <input type="radio" id="3-star" name="rating" value="3">
  <label for="3-star" class="star">&#9734;</label>
  <input type="radio" id="2-star" name="rating" value="2">
  <label for="2-star" class="star">&#9734;</label>
  <input type="radio" id="1-star" name="rating" value="1">
  <label for="1-star" class="star">&#9734;</label>
</div>

<script>
  const stars = document.querySelectorAll('.star');
  stars.forEach(star => {
    star.addEventListener('click', () => {
      stars.forEach(s => s.style.color = 'gray');
      star.style.color = 'gold';
    });
  });
</script>
</body>
</html>

通过这个简单的例子，你可以在你的网站上轻松实现一个用户友好的星星评价系统。