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

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

news 2025/9/21 5:24:37

目录：

源码在最后

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

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

编程新知 2025/8/4 15:02:27

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

编程新知 2025/9/19 21:58:22

FastAPI 教程：从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

编程新知 2025/9/2 4:01:22

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2025/9/9 14:48:41

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

编程新知 2025/9/20 15:14:17

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

编程新知 2025/6/17 3:19:01

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

编程新知 2025/9/2 19:12:02

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

编程新知 2025/9/19 11:48:15

【Linux系统】Linux环境变量：系统配置的隐形指挥官

。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量&#xff1a;setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...

编程新知 2025/9/3 18:06:27

c# 局部函数 定义、功能与示例

C# 局部函数&#xff1a;定义、功能与示例 1. 定义与功能 局部函数&#xff08;Local Function&#xff09;是嵌套在另一个方法内部的私有方法&#xff0c;仅在包含它的方法内可见。 • 作用&#xff1a;封装仅用于当前方法的逻辑&#xff0c;避免污染类作用域&#xff0c;提升…...

编程新知 2025/9/18 4:17:51