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

news/2025/1/9 20:30:47 标签: 开发语言, html
htmledit_views">

目录:

源码在最后

 
 
 
小提示:
 
 
 
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搜索工具箱的示例代码,并附有详细的注释。

 

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>

 

 


http://www.niftyadmin.cn/n/5817959.html

相关文章

B-tree 数据结构详解

1. 引言 1.1 什么是 B-tree&#xff1f; B-tree&#xff08;Balanced Tree&#xff0c;平衡树&#xff09;是一种自平衡的多路搜索树数据结构&#xff0c;其核心特性包括&#xff1a; 多路性&#xff1a; 每个节点可以包含多个关键字和子节点&#xff0c;而非仅二分。平衡性…

策略模式(Stragety Pattern)

文章目录 1.定义2.结构3.代码实现 1.定义 策略模式是一种行为设计模式&#xff0c; 它能让你定义一系列算法&#xff0c; 并将每种算法分别放入独立的类中&#xff0c; 以使算法的对象能够相互替换。 2.结构 上下文 &#xff08;Context&#xff09; &#xff1a;维护指向具体…

基于html5实现音乐录音播放动画源码

源码介绍 基于html5实现音乐录音播放动画源码是一款类似Shazam的UI&#xff0c;点击按钮后&#xff0c;会变成为一个监听按钮。旁边会有音符飞入这个监听按钮&#xff0c;最后转换成一个音乐播放器。 效果预览 源码获取 基于html5实现音乐录音播放动画源码

如何将某两个提交去掉父提交的合并

q&#xff1a; 在一个两个月前的分支&#xff0c;我想保持纯净&#xff0c;但是需要把另一个变化很大的分支只将某两个提交的变更同步过来&#xff0c;基于idea的git操作该怎么做 a: 其实很多人会一下想到cherry pick&#xff0c;这个确实方便&#xff0c;但是会将父提交连带合…

Three.js 渲染技术:打造逼真3D体验的幕后功臣

文章目录 前言一、着色器&#xff08;Shaders&#xff09;二、后处理&#xff08;Post-processing&#xff09;三、抗锯齿&#xff08;Anti-aliasing&#xff09;四、实时渲染与离线渲染五、光照模型与材质优化六、环境映射&#xff08;Environment Mapping&#xff09;七、纹理…

C++中的list详解+模拟实现

介绍&#xff1a; C语言中我们学习过链表&#xff0c;链表其实就是多个节点通过指针连在一起&#xff0c;而list其实是一个双向循环链表,可以通过任意一个节点来找到所有节点。 与vector的用法大致相同&#xff0c;只不过两者的物理结构有所不同&#xff0c;一个是连续空间的存…

1-【选修】逻辑回归

1 Logistic Regression 1.1 step1: Function Set – 1.2 Step2: Goodness of a Function cross entropy 衡量两个分布有多接近 1.3 Step3: Find the best function 1.4 Review 2 why not Logsitic Regression Square Error? 3 Discriminative V.S. Generative Logistics模…

如何在 IDEA 中配置 npm ?

在 IntelliJ IDEA 或其他基于 IntelliJ 的 IDE&#xff08;如 WebStorm&#xff09;中配置 npm 主要涉及以下几个步骤。这些步骤将帮助你确保项目可以正确使用 npm 来管理依赖项和运行脚本。 1. 安装 Node.js 和 npm 首先&#xff0c;确保你的计算机上已经安装了 Node.js 和 …