当前位置： 首页 > news >正文

HTML课堂之搜索工具箱/讲师duluo

news 2026/4/9 17:54:48

目录：

源码在最后

小提示：
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>

 

 

相关文章：

HTML课堂之搜索工具箱/讲师duluo

目录&#xff1a; 源码在最后 小提示&#xff1a; 1.养成打卡习惯没日多加练习即可提什能力 2.源码在最后&#xff0c;请先看完代码讲解&#xff0c;在尝试自己写&#xff0c;这样容易掌握 3.请勿复制粘贴&#xff0c;因为你没掌握&#xff0c;即使复制粘贴也学不会 课堂重点笔…...

编程日记 2025/1/9 13:09:55

当歌 - RSS 订阅分发平台开发

以下将详细介绍当歌平台的技术架构、功能实现以及相关代码逻辑。 一、项目概述 当歌是一个极简的 RSS 订阅分发平台&#xff0c;旨在为用户提供便捷的 RSS 管理和订阅服务&#xff0c;帮助用户轻松获取和分享最新资讯。 二、技术架构 后端语言&#xff1a;PHP 数据库&#…...

编程日记 2025/1/9 13:08:53

学习threejs，导入wrl格式的模型

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.VRMLLoader wrl模型加…...

编程日记 2025/1/9 12:59:43

使用GitLab+Jenkins搭建CICD执行环境

使用GitLabJenkins搭建CI\CD执行环境 前言什么是DevOps&#xff1f;什么是CI/CD&#xff1f;使用GitLabJenkins搭建CI\CD执行环境GitLab安装1. 安装和配置所需的依赖2. 下载并安装极狐GitLab3. 登录极狐GitLab 实例4.常用gitlab指令5.修改密码 Jenkins安装1.Jenkins 的主要特点…...

编程日记 2025/1/9 12:58:42

使用vue-pdf预览pdf和解决pdf电子签章显示问题

使用vue-pdf预览pdf和解决pdf电子签章显示问题 第一步&#xff1a;npm install vue-pdf 第二步页面使用vue-pdf <template><div class"pdf1"><Pdf v-for"i in numPages" :key"i" :src"src" :page"i" />…...

编程日记 2025/1/9 12:54:35

【Rust自学】11.3. 自定义错误信息

喜欢的话别忘了点赞、收藏加关注哦&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 11.3.1. 添加错误信息 在 11.2. 断言(Assert) 中我们学习了assert!、assert_eq!和assert_ne!这三个宏&#xff0c;而这篇文章讲的就是它…...

编程日记 2025/1/9 12:52:32

05、Docker学习，常用安装：Mysql、Redis、Nginx、Nacos

Docker学习&#xff0c;常用安装&#xff1a;Mysql、Redis、Nginx、Nacos 一、Docker安装Mysql 1、docker search mysql ##查找mysql版本都有哪些 2、docker pull mysql:5.6 ##下载5.6版本的mysql镜像 3、docker run -p 13306:3306 --name mysql ##运行…...

编程日记 2025/1/9 12:48:28

RabbitMQ高级篇之MQ可靠性 数据持久化

文章目录 消息丢失的原因分析内存存储的缺陷如何确保 RabbitMQ 的消息可靠性&#xff1f;数据持久化的三个方面持久化对性能的影响持久化实验验证性能对比Spring AMQP 默认持久化总结 消息丢失的原因分析 RabbitMQ 默认使用内存存储消息&#xff0c;但这种方式带来了两个主要问…...

编程日记 2025/1/9 12:45:25

leetcode 2274. 不含特殊楼层的最大连续楼层数 中等

Alice 管理着一家公司&#xff0c;并租用大楼的部分楼层作为办公空间。Alice 决定将一些楼层作为 特殊楼层 &#xff0c;仅用于放松。 给你两个整数 bottom 和 top &#xff0c;表示 Alice 租用了从 bottom 到 top&#xff08;含 bottom 和 top 在内&#xff09;的所有楼层。另…...

编程日记 2025/1/9 12:42:20

Tauri教程-基础篇-第二节 Tauri的核心概念上篇

“如果结果不如你所愿&#xff0c;就在尘埃落定前奋力一搏。”——《夏目友人帐》 “有些事不是看到了希望才去坚持&#xff0c;而是因为坚持才会看到希望。”——《十宗罪》 “维持现状意味着空耗你的努力和生命。”——纪伯伦 Tauri 技术教程 * 第四章 Tauri的基础教程 第二节…...

编程日记 2025/1/9 12:40:17

大风车excel：怎么把题库导入excel？题库导入excel

高效管理试题库&#xff1a;如何批量导入试题到 Excel&#xff1f; 在教育培训、学校管理以及在线学习平台中&#xff0c;试题库的管理是核心工作之一。如何快速、准确地将试题导入到 Excel 表格中&#xff0c;成为许多教育工作者和开发者的迫切需求。本文将围绕“题库导入 Ex…...

编程日记 2025/1/9 12:28:05

Java 兼容读取WPS和Office图片，结合EasyExcel读取单元格信息

在Java开发中&#xff0c;处理Excel文件中的图片&#xff08;包括浮动图片和嵌入图片&#xff09;是一个常见的需求。本文将介绍如何使用EasyExcel和Apache POI库来读取Excel文件中的图片&#xff0c;并将其与数据进行关联。 1. 引言 在许多应用场景中&#xff0c;Excel文件不…...

编程日记 2025/1/9 12:26:02

电脑硬盘系统迁移及问题处理

一、系统迁移准备 1、确认你的电脑主板是否支持安装两块硬盘，如电脑主板有多个M2硬盘接口，我们将新硬盘安装到主板上，原来的老硬盘安装在第二个接口上，主板只有一个M2接口的话可以使用移动硬盘盒。 2、新硬盘安装好后，我们进入原来的系统，在 此电脑–右键–管理–磁盘管…...

编程日记 2025/1/9 12:24:00

网关 + Nacos配置管理

网关 网关&#xff1a;就是网络的关口&#xff0c;负责请求的路由、转发、身份校验。 网关路由 新建网关模块gateway引入相关依赖 <!--网关--> <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter…...

编程日记 2025/1/9 12:21:59

《Spring Framework实战》6：核心技术 4.1.IoC 容器

欢迎观看《Spring Framework实战》视频教程 本章介绍 Spring 的控制反转 &#xff08;IoC&#xff09; 容器。 本部分摘要 Spring IoC 容器和 Bean 简介 容器概述 Bean 概述 依赖 Bean 作用域 自定义 Bean 的性质 Bean 定义继承 容器扩展点 基于注解的容器配置 Clas…...

编程日记 2025/1/9 12:20:57

ModuleNotFoundError: No module named ‘audioop‘

问题 ModuleNotFoundError: No module named pyaudioop ModuleNotFoundError: No module named audioop解决方案 安装库 pip3 install audioop-lts...

编程日记 2025/1/9 12:19:56

STM32-笔记38-I2C-oled实验

一、什么是I2C&#xff1f; I2C总线&#xff0c;全称Inter-Integrated Circuit&#xff08;互连集成电路&#xff09;&#xff0c;是一种由Philips&#xff08;现NXP半导体&#xff09;公司在1980年代初开发的同步 串行 半双工通信总线。 二、有了串口通信为什么要使用I2C&…...

编程日记 2025/1/9 12:18:53

人大金仓实现主键自增.

使用数据库中自带的参数类型 serial 类型(相当于创建一个INT列), 或者bigserial(相当于创建一个BIGINT列. 示例sql: CREATE TABLE ord(id SERIAL,ord_no INT NOT NULL,ord_name VARCHAR(32),CONSTRAINT "ord_PKEY" PRIMARY KEY ("id"));插入时指定自增值…...

编程日记 2025/1/9 12:16:50

h264之多视点mvc编码及解码过程(JMVC平台举例）

h264标准参考平台JMVC是针对MVC标准的&#xff0c;JMVC支持多视点编码、合流、多视点解码操作。可以利用JMVC生成h264 mvc码流和解码。 JMVC的下载地址是&#xff1a;jvet / JMVC GitLabH.264/AVC multi-view coding (MVC) extension JMVC reference softwarehttps://vcgit.hh…...

编程日记 2025/1/9 12:13:47

小程序学习08—— 系统参数获取和navBar组件样式动态设置

一 系统信息的概念 uni-app提供了异步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2个API获取系统信息。 success 返回参数说明&#xff1a; 参数分类说明statusBarHeight手机状态栏的高度system操作系统名称及版本。。。 二 自定义navbar 2.1 获取系统参数 代码展示…...

编程日记 2025/1/9 12:12:45

Pretext：值得关注的文本排版引擎涎

一、语言特性&#xff1a;Java 26 与模式匹配进化 1.1 Java 26 语言级别支持 IDEA 2026.1 EAP 最引人注目的变化之一&#xff0c;就是新增 Java 26 语言级别支持。这意味着开发者可以提前体验和测试即将在 JDK 26 中正式发布的语言特性。 其中最重要的变化是对 JEP 530 的全面支…...

编程新知 2026/4/9 16:13:46

IOSSecuritySuite 最佳实践：避免常见陷阱的7个关键点

IOSSecuritySuite 最佳实践&#xff1a;避免常见陷阱的7个关键点 【免费下载链接】IOSSecuritySuite iOS platform security & anti-tampering Swift library 项目地址: https://gitcode.com/gh_mirrors/io/IOSSecuritySuite 在iOS应用开发中&#xff0c;安全防护是…...

编程新知 2026/4/9 15:39:27

Git-Sim终极调试指南：快速解决常见错误与性能优化技巧

Git-Sim终极调试指南&#xff1a;快速解决常见错误与性能优化技巧 【免费下载链接】git-sim Visually simulate Git operations in your own repos with a single terminal command. 项目地址: https://gitcode.com/gh_mirrors/gi/git-sim Git-Sim是一款强大的Git操作可…...

编程新知 2026/4/9 15:27:26

突破1k ！具身智能中文教程项目火了

Datawhale干货 作者&#xff1a;李昀迪&#xff0c;every-embodied团队学完具身导航基础课&#xff0c;还是一头雾水不会动手实践&#xff1f;复现顶会代码&#xff0c;被复杂逻辑绕晕&#xff0c;摸不清算法流程&#xff1f;环境配置地狱、数据集超大、下载繁琐&#xff0c;想…...

编程新知 2026/4/9 14:37:05

轻量级跨平台安卓应用安装解决方案：APK-Installer高效实施指南

轻量级跨平台安卓应用安装解决方案&#xff1a;APK-Installer高效实施指南 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 在Windows环境中运行安卓应用长期面临资源占…...

编程新知 2026/4/9 13:13:21

OpenClaw调试技巧：Gemma-3-12b-it任务失败时的7种诊断方法

OpenClaw调试技巧&#xff1a;Gemma-3-12b-it任务失败时的7种诊断方法 1. 为什么需要系统化的调试方法 上周我让OpenClaw配合Gemma-3-12b-it模型自动整理项目文档时&#xff0c;遇到了一个诡异现象&#xff1a;任务开始时运行正常&#xff0c;但在处理到第三个Markdown文件时…...

编程新知 2026/4/9 13:11:20

【Python机器学习】零基础掌握RidgeClassifier线性分类器

面临选择，如何更准确地预测乳腺癌？ 在医疗领域，准确地预测疾病的发生非常关键。尤其是像乳腺癌这样常见但又严重的疾病，早期诊断和预测可以极大地提高治疗成功率。那么问题来了，如何在大量的医疗数据中，准确、快速地诊断乳腺癌？ 假设有以下一组乳腺癌相关的医疗检查数…...

编程新知 2026/4/9 12:14:27

OpenClaw 真能提效？拆解 7 个场景背后的实际代价与边界

先说结论AI 助手在邮件分类、文档生成等结构化任务上确实能省时间&#xff0c;但需要前期投入配置和调试成本。代码审查、会议纪要等场景对模型能力和数据质量依赖很高&#xff0c;实际效果可能打折扣&#xff0c;更适合作为辅助工具。部署这类系统要考虑团队规模、数据安全和维…...

编程新知 2026/4/9 11:48:03

RimWorld模组管理终极指南：从混乱到秩序的专业解决方案

RimWorld模组管理终极指南&#xff1a;从混乱到秩序的专业解决方案 【免费下载链接】RimSort RimSort is an open source mod manager for the video game RimWorld. There is support for Linux, Mac, and Windows, built from the ground up to be a reliable, community-man…...

编程新知 2026/4/9 9:11:00

5个AI Skill实测：影视内容创作全流程自动化

为什么AI助手的能力上限取决于你装了什么Skill养虾必装的5个Skill&#xff0c;影视博主效率翻倍你的小龙虾&#xff08;OpenClaw/CodeBuddy/Windsurf&#xff09;装了几个Skill&#xff1f;很多人养虾只用来写代码、查资料&#xff0c;但其实用小龙虾做内容创作、数据分析、批量…...

编程新知 2026/4/9 8:21:56