要在 HTML 页面中添加搜索框,可以使用以下代码:
<form action="/search" method="get">
  <input type="text" name="query" placeholder="Search...">
  <button type="submit">Go</button>
</form>
其中,action 属性指定了搜索表单提交后应该发送到的 URL,method 属性指定了使用 HTTP GET 还是 POST 方法提交表单数据。
input 元素是搜索框本身,type 属性设置为 text 表示这是一个文本输入框,name 属性设置为 query 表示这个输入框中的内容会以 query 作为键名提交到服务器。
placeholder 属性是可选的,当搜索框中没有输入内容时会显示该文本。
button 元素是提交按钮,点击后会将搜索框中的内容提交到服务器。
为了给搜索结果中的关键词加上高亮颜色,可以在服务器端根据查询参数 query 进行搜索,并将搜索结果中的关键词替换成带有高亮颜色的 HTML 标签,比如 <span class="highlighted">keyword</span>,然后将这些 HTML 片段发回客户端进行渲染。在 CSS 文件中定义 .highlighted 类的样式即可,比如:
.highlighted {
  color: red;
  font-weight: bold;
}
这样就可以让搜索结果中的关键词以红色加粗的方式显示出来。