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>
相关文章:
HTML课堂之搜索工具箱/讲师duluo
目录: 源码在最后 小提示: 1.养成打卡习惯没日多加练习即可提什能力 2.源码在最后,请先看完代码讲解,在尝试自己写,这样容易掌握 3.请勿复制粘贴,因为你没掌握,即使复制粘贴也学不会 课堂重点笔…...
当歌 - RSS 订阅分发平台开发
以下将详细介绍当歌平台的技术架构、功能实现以及相关代码逻辑。 一、项目概述 当歌是一个极简的 RSS 订阅分发平台,旨在为用户提供便捷的 RSS 管理和订阅服务,帮助用户轻松获取和分享最新资讯。 二、技术架构 后端语言:PHP 数据库&#…...
学习threejs,导入wrl格式的模型
👨⚕️ 主页: gis分享者 👨⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨⚕️ 收录于专栏:threejs gis工程师 文章目录 一、🍀前言1.1 ☘️THREE.VRMLLoader wrl模型加…...
使用GitLab+Jenkins搭建CICD执行环境
使用GitLabJenkins搭建CI\CD执行环境 前言什么是DevOps?什么是CI/CD?使用GitLabJenkins搭建CI\CD执行环境GitLab安装1. 安装和配置所需的依赖2. 下载并安装极狐GitLab3. 登录极狐GitLab 实例4.常用gitlab指令5.修改密码 Jenkins安装1.Jenkins 的主要特点…...
使用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" />…...
【Rust自学】11.3. 自定义错误信息
喜欢的话别忘了点赞、收藏加关注哦,对接下来的教程有兴趣的可以关注专栏。谢谢喵!(・ω・) 11.3.1. 添加错误信息 在 11.2. 断言(Assert) 中我们学习了assert!、assert_eq!和assert_ne!这三个宏,而这篇文章讲的就是它…...
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 ##运行…...
RabbitMQ高级篇之MQ可靠性 数据持久化
文章目录 消息丢失的原因分析内存存储的缺陷如何确保 RabbitMQ 的消息可靠性?数据持久化的三个方面持久化对性能的影响持久化实验验证性能对比Spring AMQP 默认持久化总结 消息丢失的原因分析 RabbitMQ 默认使用内存存储消息,但这种方式带来了两个主要问…...
leetcode 2274. 不含特殊楼层的最大连续楼层数 中等
Alice 管理着一家公司,并租用大楼的部分楼层作为办公空间。Alice 决定将一些楼层作为 特殊楼层 ,仅用于放松。 给你两个整数 bottom 和 top ,表示 Alice 租用了从 bottom 到 top(含 bottom 和 top 在内)的所有楼层。另…...
Tauri教程-基础篇-第二节 Tauri的核心概念上篇
“如果结果不如你所愿,就在尘埃落定前奋力一搏。”——《夏目友人帐》 “有些事不是看到了希望才去坚持,而是因为坚持才会看到希望。”——《十宗罪》 “维持现状意味着空耗你的努力和生命。”——纪伯伦 Tauri 技术教程 * 第四章 Tauri的基础教程 第二节…...
大风车excel:怎么把题库导入excel?题库导入excel
高效管理试题库:如何批量导入试题到 Excel? 在教育培训、学校管理以及在线学习平台中,试题库的管理是核心工作之一。如何快速、准确地将试题导入到 Excel 表格中,成为许多教育工作者和开发者的迫切需求。本文将围绕“题库导入 Ex…...
Java 兼容读取WPS和Office图片,结合EasyExcel读取单元格信息
在Java开发中,处理Excel文件中的图片(包括浮动图片和嵌入图片)是一个常见的需求。本文将介绍如何使用EasyExcel和Apache POI库来读取Excel文件中的图片,并将其与数据进行关联。 1. 引言 在许多应用场景中,Excel文件不…...
电脑硬盘系统迁移及问题处理
一、系统迁移准备 1、确认你的电脑主板是否支持安装两块硬盘,如电脑主板有多个M2硬盘接口,我们将新硬盘安装到主板上,原来的老硬盘安装在第二个接口上,主板只有一个M2接口的话可以使用移动硬盘盒。 2、新硬盘安装好后,我们进入原来的系统,在 此电脑–右键–管理–磁盘管…...
网关 + Nacos配置管理
网关 网关:就是网络的关口,负责请求的路由、转发、身份校验。 网关路由 新建网关模块gateway引入相关依赖 <!--网关--> <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter…...
《Spring Framework实战》6:核心技术 4.1.IoC 容器
欢迎观看《Spring Framework实战》视频教程 本章介绍 Spring 的控制反转 (IoC) 容器。 本部分摘要 Spring IoC 容器和 Bean 简介 容器概述 Bean 概述 依赖 Bean 作用域 自定义 Bean 的性质 Bean 定义继承 容器扩展点 基于注解的容器配置 Clas…...
ModuleNotFoundError: No module named ‘audioop‘
问题 ModuleNotFoundError: No module named pyaudioop ModuleNotFoundError: No module named audioop解决方案 安装库 pip3 install audioop-lts...
STM32-笔记38-I2C-oled实验
一、什么是I2C? I2C总线,全称Inter-Integrated Circuit(互连集成电路),是一种由Philips(现NXP半导体)公司在1980年代初开发的同步 串行 半双工通信总线。 二、有了串口通信为什么要使用I2C&…...
人大金仓实现主键自增.
使用数据库中自带的参数类型 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"));插入时指定自增值…...
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…...
小程序学习08—— 系统参数获取和navBar组件样式动态设置
一 系统信息的概念 uni-app提供了异步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2个API获取系统信息。 success 返回参数说明: 参数分类说明statusBarHeight手机状态栏的高度system操作系统名称及版本。。。 二 自定义navbar 2.1 获取系统参数 代码展示…...
STM32+rt-thread判断是否联网
一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...
CMake基础:构建流程详解
目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...
如何将联系人从 iPhone 转移到 Android
从 iPhone 换到 Android 手机时,你可能需要保留重要的数据,例如通讯录。好在,将通讯录从 iPhone 转移到 Android 手机非常简单,你可以从本文中学习 6 种可靠的方法,确保随时保持连接,不错过任何信息。 第 1…...
基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目(父项目)主要用于依赖管理 一些需要注意的点: 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件,否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...
如何在网页里填写 PDF 表格?
有时候,你可能希望用户能在你的网站上填写 PDF 表单。然而,这件事并不简单,因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件,但原生并不支持编辑或填写它们。更糟的是,如果你想收集表单数据ÿ…...
Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?
Redis 的发布订阅(Pub/Sub)模式与专业的 MQ(Message Queue)如 Kafka、RabbitMQ 进行比较,核心的权衡点在于:简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...
五子棋测试用例
一.项目背景 1.1 项目简介 传统棋类文化的推广 五子棋是一种古老的棋类游戏,有着深厚的文化底蕴。通过将五子棋制作成网页游戏,可以让更多的人了解和接触到这一传统棋类文化。无论是国内还是国外的玩家,都可以通过网页五子棋感受到东方棋类…...
Spring Boot + MyBatis 集成支付宝支付流程
Spring Boot MyBatis 集成支付宝支付流程 核心流程 商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面 代码实现示例(电脑网站支付) 1. 添加依赖 <!…...
相关类相关的可视化图像总结
目录 一、散点图 二、气泡图 三、相关图 四、热力图 五、二维密度图 六、多模态二维密度图 七、雷达图 八、桑基图 九、总结 一、散点图 特点 通过点的位置展示两个连续变量之间的关系,可直观判断线性相关、非线性相关或无相关关系,点的分布密…...
背包问题双雄:01 背包与完全背包详解(Java 实现)
一、背包问题概述 背包问题是动态规划领域的经典问题,其核心在于如何在有限容量的背包中选择物品,使得总价值最大化。根据物品选择规则的不同,主要分为两类: 01 背包:每件物品最多选 1 次(选或不选&#…...
