最简静态版（仅包含核心元素）
这个版本只包含百度最核心的搜索框和按钮,没有任何样式，适合初学者理解HTML的基本结构。
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">百度一下，你就知道</title>
</head>
<body>
<h1>百度</h1>
<!-- 百度搜索表单 -->
<form action="https://www.baidu.com/s" method="get">
<input type="text" name="wd" placeholder="请输入搜索内容">
<button type="submit">百度一下</button>
</form>
</body>
</html>
代码解释:
<!DOCTYPE html>: 声明这是一个HTML5文档。<html lang="zh-CN">: 整个HTML文档的根，lang="zh-CN"指定语言为中文。<head>: 包含文档的元数据，如标题、字符编码等。<title>: 显示在浏览器标签页上的标题。<body>: 包含网页的所有可见内容。<h1>: 一级标题，显示“百度”。<form>: 创建一个表单。action="https://www.baidu.com/s": 指定表单提交到的地址，这是百度实际的搜索处理URL。method="get": 指定使用GET方法提交数据，搜索词会显示在URL中。
<input type="text">: 创建一个文本输入框。name="wd": 这是百度用来接收搜索关键词的参数名。placeholder: 输入框中显示的提示文字。
<button type="submit">: 创建一个提交按钮，点击后，表单会将input通过name和value发送到action指定的地址。
带基本样式的模拟版（推荐）
这个版本在版本一的基础上,添加了CSS样式，使其在外观上更像真正的百度首页。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">百度一下，你就知道</title>
<style>
/* 全局样式 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f2f2f2;
}
/* 搜索容器 */
.search-container {
text-align: center;
}
/* 百度Logo */
.logo {
width: 270px;
height: 129px;
background-image: url('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-bottom: 30px;
}
/* 搜索框 */
.search-input {
width: 640px;
height: 44px;
padding: 0 16px;
font-size: 16px;
border: 2px solid #4e6ef2;
border-radius: 10px 0 0 10px;
outline: none; /* 去掉点击时的轮廓线 */
}
/* 搜索按钮 */
.search-button {
width: 108px;
height: 48px;
border: none;
background-color: #4e6ef2;
color: white;
font-size: 17px;
cursor: pointer; /* 鼠标悬停时显示手型 */
border-radius: 0 10px 10px 0;
}
/* 搜索按钮悬停效果 */
.search-button:hover {
background-color: #4662D9;
}
/* 表单布局 */
#searchForm {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="search-container">
<!-- 百度Logo -->
<div class="logo"></div>
<!-- 搜索表单 -->
<form id="searchForm" action="https://www.baidu.com/s" method="get">
<input class="search-input" type="text" name="wd" placeholder="请输入搜索内容">
<button class="search-button" type="submit">百度一下</button>
</form>
</div>
</body>
</html>
新增代码解释:
<meta name="viewport">: 这行代码对于移动设备非常重要，它告诉浏览器如何控制页面的尺寸和缩放。<style>: 在<head>标签内嵌入CSS样式代码。body样式: 使用了Flexbox布局（display: flex,justify-content: center,align-items: center完美地居中显示，并设置了背景色。.search-container: 一个包裹所有搜索元素的div，方便统一控制布局。.logo: 使用background-image来显示百度的Logo图片，而不是使用<img>标签，这样可以更好地控制样式。.search-input和.search-button: 通过CSS美化了输入框和按钮，包括宽度、高度、边框、圆角和颜色。#searchForm: 将表单设置为Flex布局，让输入框和按钮在同一行并居中对齐。
功能更丰富的模拟版（包含多标签页和页脚）
这个版本在版本二的基础上,增加了顶部的导航栏和底部的页脚，使其更像一个完整的网站首页。
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">百度一下，你就知道</title>
<style>
/* 全局样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
min-height: 100vh;
display: flex;
flex-direction: column; /* 让body成为flex容器，垂直排列 */
}
/* 顶部导航栏 */
.navbar {
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
background-color: #fff;
border-bottom: 1px solid #e0e0e0;
}
.nav-links a {
margin-left: 15px;
text-decoration: none;
color: #333;
font-size: 13px;
}
.nav-links a:hover {
color: #4e6ef2;
}
/* 中间主要内容区 */
.main-content {
flex-grow: 1; /* 让主内容区占据所有可用空间 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #fff;
}
.logo {
width: 270px;
height: 129px;
background-image: url('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-bottom: 30px;
}
.search-input {
width: 640px;
height: 44px;
padding: 0 16px;
font-size: 16px;
border: 2px solid #4e6ef2;
border-radius: 10px 0 0 10px;
outline: none;
}
.search-button {
width: 108px;
height: 48px;
border: none;
background-color: #4e6ef2;
color: white;
font-size: 17px;
cursor: pointer;
border-radius: 0 10px 10px 0;
}
.search-button:hover {
background-color: #4662D9;
}
#searchForm {
display: flex;
justify-content: center;
align-items: center;
}
/* 底部页脚 */
.footer {
height: 40px;
text-align: center;
line-height: 40px;
background-color: #f2f2f2;
font-size: 12px;
color: #777;
}
.footer-links a {
color: #777;
text-decoration: none;
margin: 0 10px;
}
.footer-links a:hover {
color: #333;
}
</style>
</head>
<body>
<!-- 顶部导航栏 -->
<div class="navbar">
<div>关于百度 | 关于百度 | 关于百度</div>
<div class="nav-links">
<a href="#">新闻</a>
<a href="#">地图</a>
<a href="#">视频</a>
<a href="#">贴吧</a>
<a href="#">登录</a>
</div>
</div>
<!-- 中间主要内容区 -->
<div class="main-content">
<div class="logo"></div>
<form id="searchForm" action="https://www.baidu.com/s" method="get">
<input class="search-input" type="text" name="wd" placeholder="请输入搜索内容">
<button class="search-button" type="submit">百度一下</button>
</form>
</div>
<!-- 底部页脚 -->
<div class="footer">
<div class="footer-links">
<a href="#">设为首页</a>
<a href="#">关于百度</a>
<a href="#">使用百度前必读</a>
<a href="#">意见反馈</a>
<a href="#">投诉中心</a>
</div>
<div>©2025 Baidu 使用百度前必读 意见反馈 京ICP证030173号</div>
</div>
</body>
</html>
新增代码解释:
* { box-sizing: border-box; }: 这是一个很好的CSS实践，它确保元素的padding和border不会增加其总宽度/高度。body样式:display: flex; flex-direction: column;将整个页面设置为垂直排列的Flex容器。.navbar: 创建了顶部的导航栏，使用justify-content: space-between分开。.main-content: 添加了flex-grow: 1，这会让这个区域自动拉伸，填充navbar和footer之间的所有剩余空间，确保页脚始终在底部。.footer: 创建了底部的页脚，包含了一些链接和版权信息。
您可以将以上任意版本的代码复制到一个文本文件中,将文件后缀名改为 .html，然后用浏览器打开它，就能看到效果了，建议从版本二开始学习和修改。
