你有没有想过，用纯HTML+CSS做几个常用的各大网站搜索框，然后把它们放在一个页面里？这样，只需打开该页面就可以随便挑选一个进行搜索，无需来回访问各大网站去搜索了。这样效率可是能提高很多啊！

结构分析

常见的搜索框无非包括以下三个简单结构：

搜索图标icon：可以用字符、svg、png甚至是jpg
输入框：就用<input>，无需多言
搜索按钮：用<button>或者是<div>

于是简单的结构就出来了：

<div>
    <span><svg class="search-icon" t="1641104543254" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2294" width="200" height="200"><path d="M1012.573991 1011.664672c-18.074982 18.192982-62.081938 10.884989-62.081938 10.884989l-197.249803-197.405803a463.455538 463.455538 0 1 1 71.905928-71.905928l197.248804 197.248803s8.054992 43.359957-9.822991 61.177939zM829.667174 464.301218A365.007636 365.007636 0 1 0 464.639537 829.347854a365.066636 365.066636 0 0 0 365.027637-365.046636z" p-id="2295" fill="#d3d3d3"></path></svg></span>
    <input type="text" autocomplete="off" placeholder="请输入关键词">
    <button type="submit">搜索</button>
</div>

其中输入框的属性autocomplete="off"作用是关闭显示自动完成功能，也就是关掉显示输入历史的下拉菜单。

功能分析

在百度输入框搜索数字1，会跳转到页面：https://www.baidu.com/s?ie=UTF-8&wd=1

有几个部分组成：

https://www.baidu.com/s是百度的搜索(search)模块，我们可以放到<form>表单的action值里
ie=UTF-8是一种编码，我们先不用管
wd=是百度搜索的参数，我们可以把<input>标签的name属性值设置为wd
其中?和&都是分隔作用的，我们不用管

然后我们把刚刚的HTML代码完善一下，就能实现百度搜索框的内容啦。

实例练习

CSS样式就不写了，大家可以自定义。

<div>
    <form action="https://www.baidu.com/s">
        <span><svg class="search-icon" t="1641104543254" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2294" width="200" height="200"><path d="M1012.573991 1011.664672c-18.074982 18.192982-62.081938 10.884989-62.081938 10.884989l-197.249803-197.405803a463.455538 463.455538 0 1 1 71.905928-71.905928l197.248804 197.248803s8.054992 43.359957-9.822991 61.177939zM829.667174 464.301218A365.007636 365.007636 0 1 0 464.639537 829.347854a365.066636 365.066636 0 0 0 365.027637-365.046636z" p-id="2295" fill="#d3d3d3"></path></svg></span>
        <input name="wd" type="text" autocomplete="off" placeholder="百度一下">
        <button type="submit" style="background:#4e6ef2;">搜索</button>
    </form>
</div>