在HTML5的世界里，我们可以通过多种方式为网页元素添加发光效果，使网页更加生动和吸引人。下面，我将详细介绍几种实现发光效果的简单技巧，并分享一些实例。

技巧一：使用CSS渐变（Gradient）

CSS渐变是一种非常流行的技术，可以用来创建从一种颜色平滑过渡到另一种颜色的效果。要实现发光效果，我们可以使用线性渐变或径向渐变。

实例：使用线性渐变实现发光按钮

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>发光按钮实例</title>
<style>
  .glow-button {
    padding: 10px 20px;
    border: none;
    background: linear-gradient(45deg, #ff9, #f06);
    color: #fff;
    font-size: 16px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    transition: transform 0.3s;
  }

  .glow-button:before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: radial-gradient(circle, #fff, #fff00);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .glow-button:hover {
    transform: scale(1.05);
  }

  .glow-button:hover:before {
    opacity: 1;
  }
</style>
</head>
<body>

<button class="glow-button">点击我</button>

</body>
</html>

在上面的例子中，我们通过CSS的linear-gradient函数创建了一个发光按钮，并使用:before伪元素来增强发光效果。

技巧二：使用CSS模糊（Blur）

CSS模糊效果可以用来创建类似于光晕的效果，通过在元素周围添加一个模糊的边框来实现。

实例：使用CSS模糊实现发光文本

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>发光文本实例</title>
<style>
  .glow-text {
    color: #fff;
    font-size: 48px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(255, 255, 255, 0.5), 0 0 30px rgba(255, 255, 255, 0.3);
  }
</style>
</head>
<body>

<h1 class="glow-text">发光文本示例</h1>

</body>
</html>

在这个例子中，我们通过text-shadow属性为文本添加了多个模糊的阴影，从而实现了发光效果。

技巧三：使用SVG滤镜

SVG滤镜可以用来创建复杂的光影效果，包括发光效果。SVG滤镜通过定义一系列的图形操作来实现，如模糊、颜色变换等。

实例：使用SVG滤镜实现发光图标

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>发光图标实例</title>
<style>
  .glow-icon {
    width: 50px;
    height: 50px;
    background: url('icon.png') no-repeat center center;
    background-size: contain;
    filter: url('#glow-filter');
  }
</style>
</head>
<body>

<svg width="0" height="0">
  <defs>
    <filter id="glow-filter" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur" />
      <feMerge>
        <feMergeNode in="blur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>
</svg>

<div class="glow-icon"></div>

</body>
</html>

在这个例子中，我们使用SVG滤镜为图标添加了发光效果。首先，我们定义了一个名为glow-filter的滤镜，其中包含了一个模糊效果。然后，我们将这个滤镜应用到图标的filter属性上。

通过以上三种技巧，我们可以轻松地在HTML5中实现发光效果。这些技巧不仅简单易用，而且可以灵活地应用于各种网页元素，为你的网页增添更多魅力。