在网页设计中，文字高光效果是一种常见的视觉元素，它能够吸引用户的注意力，使网页内容更加生动和有趣。HTML5 提供了多种方式来实现文字高光效果，以下是一些简单而实用的方法。

1. 使用CSS伪元素

CSS伪元素 ::after 和 ::before 可以用来在文字周围添加装饰性内容，从而实现高光效果。

1.1 使用 ::after 和 ::before

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字高光效果</title>
<style>
  .highlight {
    position: relative;
    padding: 0 5px;
  }
  .highlight::after {
    content: attr(data-highlight);
    position: absolute;
    background-color: yellow;
    padding: 0 5px;
    left: 0;
    top: 0;
  }
</style>
</head>
<body>
<div class="highlight" data-highlight="高亮文字">这里是普通文字，这里是一些<em>高亮文字</em>。</div>
</body>
</html>

在这个例子中，我们使用 data-highlight 属性来定义高亮文字的内容，并通过 ::after 伪元素将其显示出来。

1.2 使用渐变背景

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字高光效果</title>
<style>
  .gradient-highlight {
    background-image: linear-gradient(to right, yellow, orange);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 0 5px;
  }
</style>
</head>
<body>
<p>这是一个渐变背景的文字高亮效果：<span class="gradient-highlight">渐变高亮文字</span></p>
</body>
</html>

在这个例子中，我们使用渐变背景和 background-clip 属性来实现文字的高亮效果。

2. 使用JavaScript

JavaScript 可以提供更动态的文字高光效果，例如根据用户的交互来改变高亮文字。

2.1 简单的点击高亮

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字高亮效果</title>
<style>
  .highlight {
    cursor: pointer;
    background-color: yellow;
    padding: 0 5px;
  }
</style>
</head>
<body>
<p>点击以下文字查看高亮效果：<span class="highlight">点击高亮文字</span></p>
<script>
  const highlightElement = document.querySelector('.highlight');
  highlightElement.addEventListener('click', function() {
    this.style.backgroundColor = 'transparent';
  });
</script>
</body>
</html>

在这个例子中，我们通过点击来改变文字的背景颜色，从而实现高亮效果。

3. 使用Web字体

Web字体提供了一种简单的方法来添加独特的文字效果，包括高光。

3.1 使用Google Fonts

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字高光效果</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap" rel="stylesheet">
<style>
  .highlight {
    font-family: 'Open Sans', sans-serif;
    background-color: yellow;
    padding: 0 5px;
  }
</style>
</head>
<body>
<p>使用Web字体实现的高亮效果：<span class="highlight">Web字体高亮文字</span></p>
</body>
</html>

在这个例子中，我们使用Google Fonts来加载字体，并通过设置背景颜色来实现高亮效果。

总结

通过以上方法，你可以轻松地在HTML5网页中实现文字高光效果。这些方法不仅简单易用，而且可以根据你的需求进行定制。尝试将这些技巧应用到你的网页设计中，让你的网页更加生动和吸引人。