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

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

news 2025/11/12 11:21:21

目录：

源码在最后

小提示：

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

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

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

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

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

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

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

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：threejs gis工程师文章目录一、🍀前言1.1 ☘️THREE.VRMLLoader wrl模型加…...

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

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

使用GitLabJenkins搭建CI\CD执行环境前言什么是DevOps？什么是CI/CD？使用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电子签章显示问题第一步：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. 自定义错误信息

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

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

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

Docker学习，常用安装：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 的消息可靠性？数据持久化的三个方面持久化对性能的影响持久化实验验证性能对比Spring AMQP 默认持久化总结消息丢失的原因分析 RabbitMQ 默认使用内存存储消息，但这种方式带来了两个主要问…...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

网关 + Nacos配置管理

网关网关：就是网络的关口，负责请求的路由、转发、身份校验。网关路由新建网关模块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 的控制反转 （IoC） 容器。本部分摘要 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？ I2C总线，全称Inter-Integrated Circuit（互连集成电路），是一种由Philips（现NXP半导体）公司在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标准的，JMVC支持多视点编码、合流、多视点解码操作。可以利用JMVC生成h264 mvc码流和解码。 JMVC的下载地址是：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 返回参数说明： 参数分类说明statusBarHeight手机状态栏的高度system操作系统名称及版本。。。二自定义navbar 2.1 获取系统参数代码展示…...

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

wordpress后台更新后前端没变化的解决方法

使用siteground主机的wordpress网站，会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后，网站没有变化的情况。不熟悉siteground主机的新手，遇到这个问题，就很抓狂，明明是哪都没操作错误&#x…...

编程新知 2025/11/12 5:39:20

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

一、SQL 基础 1. 复杂查询 （1）连接查询（JOIN） 内连接（INNER JOIN）：返回两表匹配的记录。 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

synchronized 学习

学习源： https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景不超卖，也要考虑性能问题（场景） 2.常见面试问题： sync出…...

编程新知 2025/10/23 14:31:06

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

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

编程新知 2025/11/7 20:35:03