HTML课堂之搜索工具箱/讲师duluo
目录：
源码在最后
小提示：1.养成打卡习惯没日多加练习即可提什能力2.源码在最后，请先看完代码讲解，在尝试自己写，这样容易掌握3.请勿复制粘贴，因为你没掌握，即使复制粘贴也学不会课堂重点笔记之源码讲解代码讲解：1. **HTML结构**：2. **头部（Head）**：3. **主体（Body）**：4. **CSS样式**：5. **JavaScript**：完整例子代码
源码在最后
小提示：
1.养成打卡习惯没日多加练习即可提什能力
2.源码在最后，请先看完代码讲解，在尝试自己写，这样容易掌握
3.请勿复制粘贴，因为你没掌握，即使复制粘贴也学不会
课堂重点笔记之源码讲解
代码讲解：
1. **HTML结构**：
- `<!DOCTYPE html>`：声明文档类型为HTML5。
- `<html lang="en">`：定义文档的语言为英语。
- `<head>`：包含元数据、标题和样式。
- `<body>`：包含页面的内容。
2. **头部（Head）**：
- `<meta charset="UTF-8">`：设置字符编码为UTF-8。
- `<meta name="viewport" content="width=device-width, initial-scale=1.0">`：确保页面在移动设备上正确缩放。
- `<title>Search Toolbox</title>`：设置网页标题。
- `<style>`：包含CSS样式，用于美化页面。
3. **主体（Body）**：
- `<div class="search-container">`：一个容器，用于包裹搜索工具箱。
- `<h1>Search Toolbox</h1>`：标题。
- `<div class="search-box">`：搜索框容器。
- `<input type="text" placeholder="Enter search term...">`：文本输入框，用户可以在这里输入搜索词。
- `<button οnclick="performSearch()">Search</button>`：搜索按钮，点击时调用JavaScript函数`performSearch()`。
4. **CSS样式**：
- `body`：设置全局字体、背景颜色和内边距。
- `.search-container`：设置最大宽度、居中对齐、背景颜色、内边距和阴影效果。
- `.search-box`：使用flex布局，使输入框和按钮在同一行。
- `.search-box input[type="text"]`：设置输入框的样式，包括占位符、边框、圆角和无焦点轮廓。
- `.search-box button`：设置按钮的样式，包括内边距、边框、背景色、文字颜色、光标样式和圆角。
- `.search-box button:hover`：设置按钮在鼠标悬停时的样式。
5. **JavaScript**：
- `function performSearch()`：定义一个函数，当用户点击搜索按钮时调用。
- `var searchTerm = document.querySelector('.search-box input').value`：获取输入框中的值。
- `console.log("Searching for:", searchTerm)`：将搜索词输出到控制台（实际应用中可以替换为其他逻辑）。
完整例子代码：
下面是一个简单的HTML搜索工具箱的示例代码，并附有详细的注释。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Search Toolbox</title><style>/* 样式部分 */body {font-family: Arial, sans-serif; /* 设置字体 */background-color: #f4f4f4; /* 背景颜色 */margin: 0;padding: 20px;}.search-container {max-width: 600px; /* 最大宽度 */margin: auto; /* 居中对齐 */background: white; /* 白色背景 */padding: 20px; /* 内边距 */box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */}.search-container h1 {text-align: center; /* 标题居中 */}.search-box {display: flex; /* 使用flex布局 */}.search-box input[type="text"] {flex: 1; /* 输入框占据剩余空间 */padding: 10px; /* 内边距 */border: 1px solid #ccc; /* 边框 */border-radius: 4px 0 0 4px; /* 左上和左下圆角 */outline: none; /* 去掉默认的焦点轮廓 */}.search-box button {padding: 10px; /* 内边距 */border: 1px solid #ccc; /* 边框 */border-left: none; /* 去掉左边的边框 */background: #007BFF; /* 按钮背景色 */color: white; /* 文字颜色 */cursor: pointer; /* 鼠标悬停时显示指针 */border-radius: 0 4px 4px 0; /* 右上和右下圆角 */}.search-box button:hover {background: #0056b3; /* 鼠标悬停时的背景色 */}</style>
</head>
<body><!-- 搜索容器 --><div class="search-container"><!-- 标题 --><h1>Search Toolbox</h1><!-- 搜索框 --><div class="search-box"><!-- 输入框 --><input type="text" placeholder="Enter search term..."><!-- 搜索按钮 --><button onclick="performSearch()">Search</button></div></div><script>// JavaScript函数：执行搜索操作function performSearch() {// 获取输入框的值var searchTerm = document.querySelector('.search-box input').value;// 打印搜索词到控制台（实际应用中可以替换为其他逻辑）console.log("Searching for:", searchTerm);// 这里可以添加实际的搜索逻辑，例如发送请求到服务器等}</script>
</body>
</html>