1. 创建HTML文件
首先，创建一个新的HTML文件，命名为index.html。你可以使用任何文本编辑器，如Notepad++、Sublime Text、VS Code等
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>搜索起始页</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.search-container {
text-align: center;
}
.search-box {
width: 300px;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
.search-button {
padding: 10px 20px;
font-size: 16px;
border: none;
background-color: #0078d7;
color: white;
border-radius: 5px;
cursor: pointer;
}
.search-button:hover {
background-color: #005bb5;
}
</style>
</head>
<body>
<div class="search-container">
<h1>搜索起始页</h1>
<form action="https://www.google.com/search" method="GET">
<input type="text" name="q" class="search-box" placeholder="输入搜索内容">
<button type="submit" class="search-button">搜索</button>
</form>
</div>
</body>
</html>2. 代码解析
2.1 HTML结构
<!DOCTYPE html>：声明文档类型为HTML5<html lang="zh-CN">：定义HTML文档的语言为中文<head>：包含文档的元数据，如字符编码、视口设置和标题<body>：包含网页的可见内容
2.2 搜索表单
<form action="https://www.google.com/search" method="GET">：创建一个表单，当用户提交表单时，会将搜索内容发送到Google的搜索页面action：指定表单提交的URLmethod：指定表单提交的HTTP方法，这里使用GET方法
<input type="text" name="q" class="search-box" placeholder="输入搜索内容">：创建一个文本输入框，用户可以在其中输入搜索内容name="q"：指定输入框的名称，Google搜索使用q作为查询参数的名称。placeholder：在输入框中显示的提示文本
<button type="submit" class="search-button">搜索</button>：创建一个提交按钮，用户点击后提交表单
2.3 CSS样式
body：设置页面的字体、布局和背景颜色.search-container：居中显示搜索框和按钮.search-box：设置搜索框的宽度、内边距、字体大小和边框样式.search-button：设置按钮的样式，包括背景颜色、文字颜色和圆角
3. 运行效果
保存index.html文件后，在浏览器中打开它。你将看到一个简洁的搜索起始页，包含一个搜索框和一个搜索按钮。输入搜索内容并点击“搜索”按钮后，页面将跳转到Google的搜索结果页面
4. 进一步优化
你可以根据需要进一步优化这个搜索起始页，例如：
- 添加更多的搜索引擎选项
- 使用JavaScript实现自动补全功能
- 美化页面布局，添加背景图片或图标
发表回复