📅 最后修改于: 2023-12-03 15:08:53.371000 🧑 作者: Mango
在Web开发中，搜索栏是非常常见的一个组件。搜索栏可以帮助用户快速找到所需的信息，提高了用户的使用体验。本文将介绍如何在HTML中制作搜索栏。
在制作搜索栏之前，需要先了解一些HTML的基础知识。以下是一些常用的HTML标签：
<html>：整个HTML页面的根标签，必须出现在文档的开头。<head>：用于定义文档的头部，里面可以定义页面的元数据（如标题、作者、编码等）。<body>：用于定义文档的主体，里面包含了实际的内容。<form>：用于定义一个表单，里面包含了各种表单元素（如输入框、按钮等）。<input>：用于定义输入框，可以定义不同的类型（如文本框、密码框、复选框等）。<button>：用于定义按钮。制作搜索栏的关键在于使用<form>和<input>标签。以下是一个简单的搜索栏示例：
<form action="" method="get">
<input type="text" name="keyword" placeholder="请输入关键词">
<button type="submit">搜索</button>
</form>
解析：
<form>标签定义了一个表单，其中action属性为空表示提交到当前页面，method属性为get表示使用GET方法提交表单数据。<input>标签定义了一个文本框，type属性为text表示文本框类型为文本，name属性为keyword表示提交时的数据键值对的键为keyword，placeholder属性为文本框显示的提示文本。<button>标签定义了一个提交按钮。为了使搜索栏更加美观，可以为其添加样式。以下是一个简单的样式示例：
<style>
form {
display: flex;
align-items: center;
justify-content: center;
height: 40px;
}
input {
padding: 0 10px;
width: 200px;
height: 100%;
border: none;
box-shadow: inset 0 0 0 2px #0077cc;
}
button {
width: 80px;
height: 100%;
border: none;
background-color: #0077cc;
color: #fff;
font-size: 16px;
cursor: pointer;
}
</style>
<form action="" method="get">
<input type="text" name="keyword" placeholder="请输入关键词">
<button type="submit">搜索</button>
</form>
解析：
<style>标签，内部定义了样式。display: flex、align-items: center和justify-content: center使搜索栏垂直居中并水平居中。<input>标签样式中的padding、width、height、border和box-shadow使文本框具有背景、圆角边框，box-shadow实现了高亮边框效果。<button>标签样式中的width、height、border、background-color、color、font-size和cursor使按钮具有背景、样式统一，鼠标悬浮时有指针提示等效果。制作搜索栏并不难，只需要掌握一些基础的HTML知识，稍微添加些样式就可以制作出美观的搜索栏。