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

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

news 2026/1/2 7:55:57

目录：

源码在最后

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

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2026/1/1 16:37:30

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/10/24 14:20:29

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

编程新知 2025/9/11 15:27:32

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

编程新知 2025/12/23 17:54:24

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/8/27 14:38:58

css的定位（position）详解：相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

编程新知 2025/12/20 15:01:20

Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

编程新知 2025/10/4 21:24:40

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

编程新知 2025/12/31 22:37:30

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

编程新知 2026/1/1 0:15:11

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。 步骤如下&#xff1a; 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载&#xff0c;下载地址&#xff1a;https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

编程新知 2026/1/1 1:27:02