知识分享小能手
知识分享小能手

Html5学习教程，从入门到精通，HTML `＜div＞` 和 `＜span＞` 标签：语法知识点与案例代码（12）

HTML
和 标签：语法知识点与案例代码

一、语法知识点

1.
标签
  • 定义:
    是一个块级元素，用于将文档内容划分为独立的、可样式化的部分。它本身没有特定的语义，主要用于布局和分组。
  • 特点:
    • 块级元素，默认占据一整行。
    • 可以包含其他块级元素和行内元素。
    • 常用于创建页面的布局结构，例如头部、导航栏、内容区域、侧边栏、底部等。
  • 属性:
    • 通用属性: 例如 id, class, style, title 等。
    • 事件属性: 例如 onclick, onmouseover 等。
2. 标签
  • 定义: 是一个行内元素，用于对文档中的一部分文本进行分组和样式化。它本身没有特定的语义，主要用于对文本进行修饰。
  • 特点:
    • 行内元素，只占据内容所需的空间。
    • 只能包含其他行内元素。
    • 常用于对文本进行样式化，例如改变颜色、字体、背景等。
  • 属性:
    • 通用属性: 例如 id, class, style, title 等。
    • 事件属性: 例如 onclick, onmouseover 等。
3.
和 的区别
特性
元素类型 块级元素 行内元素
默认显示 占据一整行 只占据内容所需空间
包含内容 可以包含其他块级元素和行内元素 只能包含其他行内元素
主要用途 布局和分组 文本修饰

二、案例代码

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div 和 span 示例title>
    <style>
        /* 为 div 添加样式 */
        .container {
            width: 80%;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
        }

        .header {
            background-color: #f0f0f0;
            padding: 10px;
            text-align: center;
        }

        .content {
            margin-top: 20px;
        }

        .footer {
            background-color: #f0f0f0;
            padding: 10px;
            text-align: center;
            margin-top: 20px;
        }

        /* 为 span 添加样式 */
        .highlight {
            color: red;
            font-weight: bold;
        }
    style>
head>
<body>

    
    <div class="container">
        <div class="header">
            <h1>这是一个标题h1>
        div>

        <div class="content">
            <p>这是一个段落，其中包含一些 <span class="highlight">重要span> 的文字。p>
            <p>这是另一个段落。p>
        div>

        <div class="footer">
            <p>版权所有 © 2023p>
        div>
    div>

body>
html>

三、代码解释

  1. : 创建一个容器，用于包裹整个页面内容，并设置宽度、边距、内边距和边框。
  2. : 创建页面的头部区域，设置背景颜色、内边距和文本居中。
  3. : 创建页面的内容区域，设置上边距。
  4. : 创建页面的底部区域，设置背景颜色、内边距、文本居中以及上边距。
  5. : 对文本中的“重要”两个字进行样式化，设置红色和加粗效果。

四、总结

  • 和 是 HTML 中常用的两个标签，用于对文档内容进行分组和样式化。
  • 是块级元素，用于创建页面布局和分组。
  • 是行内元素，用于对文本进行修饰。
  • 通过 CSS 可以进一步控制
    和 的样式，实现更丰富的页面效果。

以下是几个实际开发中使用

和 的具体案例，涵盖了常见的应用场景。

案例 1：网页布局

场景描述：

在网页开发中，通常会将页面划分为多个区域，例如头部、导航栏、内容区域和底部。使用

可以轻松实现这种布局。

代码示例：

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页布局示例title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        /* 头部样式 */
        .header {
            background-color: #4CAF50;
            color: white;
            padding: 15px;
            text-align: center;
        }

        /* 导航栏样式 */
        .navbar {
            background-color: #333;
            overflow: hidden;
        }

        .navbar a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
        }

        .navbar a:hover {
            background-color: #ddd;
            color: black;
        }

        /* 内容区域样式 */
        .content {
            padding: 20px;
        }

        /* 底部样式 */
        .footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    style>
head>
<body>

    
    <div class="header">
        <h1>我的网站h1>
    div>

    
    <div class="navbar">
        <a href="#">首页a>
        <a href="#">关于我们a>
        <a href="#">服务a>
        <a href="#">联系我们a>
    div>

    
    <div class="content">
        <h2>欢迎来到我的网站h2>
        <p>这是一个简单的网页布局示例。p>
    div>

    
    <div class="footer">
        <p>版权所有 © 2023 我的公司p>
    div>

body>
html>

代码说明：

  • 使用
    将页面划分为头部 (header)、导航栏 (navbar)、内容区域 (content) 和底部 (footer)。
  • 通过 CSS 设置每个区域的样式，例如背景颜色、内边距、文本对齐等。

案例 2：文本修饰

场景描述：

在网页中，有时需要对部分文本进行特殊样式化，例如高亮显示关键词或添加特殊效果。使用 可以轻松实现这种需求。

代码示例：

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本修饰示例title>
    <style>
        /* 高亮样式 */
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }

        /* 特殊文本样式 */
        .special {
            color: red;
            text-decoration: underline;
        }
    style>
head>
<body>

    <p>
        这是一个段落，其中包含一些 <span class="highlight">重要span> 的文字。
        你可以使用 <span class="special">spanspan> 标签对文本进行修饰。
    p>

body>
html>

代码说明：

  • 使用 包裹需要修饰的文本，例如“重要”和“span”。
  • 通过 CSS 为 添加样式，例如背景颜色、字体加粗、颜色和下划线。

案例 3：按钮组

场景描述：

在网页中，通常会将多个按钮放在一起形成一个按钮组。使用

可以方便地对按钮进行分组和布局。

代码示例：

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按钮组示例title>
    <style>
        /* 按钮组样式 */
        .button-group {
            margin: 20px;
        }

        .button-group button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            margin-right: 10px;
        }

        .button-group button:hover {
            background-color: #45a049;
        }
    style>
head>
<body>

    
    <div class="button-group">
        <button>按钮 1button>
        <button>按钮 2button>
        <button>按钮 3button>
    div>

body>
html>

代码说明：

  • 使用
    包裹一组按钮，形成一个按钮组。
  • 通过 CSS 设置按钮的样式，例如背景颜色、内边距、鼠标悬停效果等。

案例 4：卡片布局

场景描述：

在网页中，卡片布局是一种常见的展示方式，通常用于展示产品、文章或用户信息。使用

可以轻松实现卡片布局。

代码示例：

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>卡片布局示例title>
    <style>
        /* 卡片容器样式 */
        .card {
            width: 300px;
            border: 1px solid #ccc;
            border-radius: 10px;
            overflow: hidden;
            margin: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        /* 卡片图片样式 */
        .card img {
            width: 100%;
            height: auto;
        }

        /* 卡片内容样式 */
        .card-content {
            padding: 15px;
        }

        .card-content h3 {
            margin: 0 0 10px;
        }

        .card-content p {
            margin: 0;
            color: #555;
        }
    style>
head>
<body>

    
    <div class="card">
        <img src="https://via.placeholder.com/300" alt="图片">
        <div class="card-content">
            <h3>卡片标题h3>
            <p>这是一个简单的卡片示例，用于展示内容。p>
        div>
    div>

    
    <div class="card">
        <img src="https://via.placeholder.com/300" alt="图片">
        <div class="card-content">
            <h3>另一个卡片h3>
            <p>这是另一个卡片的示例内容。p>
        div>
    div>

body>
html>

代码说明：

  • 使用
    创建卡片容器，并设置边框、圆角、阴影等样式。
  • 在卡片内部使用
    划分图片区域和内容区域。
  • 通过 CSS 设置卡片的布局和样式。

案例 5：表单输入框组

场景描述：

在表单中，通常会将标签和输入框放在一起形成一个输入框组。使用

可以方便地对输入框进行分组和布局。

代码示例：

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单输入框组示例title>
    <style>
        /* 输入框组样式 */
        .input-group {
            margin-bottom: 15px;
        }

        .input-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .input-group input {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
    style>
head>
<body>

    <form>
        
        <div class="input-group">
            <label for="username">用户名：label>
            <input type="text" id="username" name="username">
        div>

        
        <div class="input-group">
            <label for="password">密码：label>
            <input type="password" id="password" name="password">
        div>

        <button type="submit">提交button>
    form>

body>
html>

代码说明：

  • 使用
    包裹标签和输入框，形成一个输入框组。
  • 通过 CSS 设置标签和输入框的样式，例如宽度、内边距、字体加粗等。

总结

以上案例展示了

和 在实际开发中的常见应用场景：

  1. ：用于布局、分组和容器化，例如网页布局、卡片布局、按钮组、表单输入框组等。
  2. ：用于文本修饰，例如高亮显示、特殊样式等。

通过灵活使用

和 ，可以轻松实现各种网页布局和样式化需求。

你可能感兴趣的:(前端开发,网页开发,编程语言如门,html,html5,学习,前端,开发语言,java,前端框架)

  • JMH (Java Microbenchmark Harness) 阙芸 python测试工具开发语言
    JMH是Java的微基准测试工具，由OpenJDK团队开发，专门用于编写、运行和分析Java代码的微基准测试（microbenchmark）。为什么需要JMH普通的基准测试方法（如多次循环调用方法并计时）存在很多问题：JVM的JIT编译优化（方法内联、死代码消除等）预热效应（JVM需要"热身"才能达到最佳性能）垃圾回收的干扰操作系统调度的影响JMH解决了这些问题，提供了准确的基准测试环境。基本使用
  • Python机器学习元学习库higher 音程 机器学习人工智能python机器学习
    higher是一个用于元学习（Meta-Learning）和高阶导数（Higher-ordergradients）的Python库，专为PyTorch设计。它扩展了PyTorch的自动微分机制，使得在训练过程中可以动态地计算参数的梯度更新，并把这些更新过程纳入到更高阶的梯度计算中。一、主要用途higher主要用于以下场景：元学习（Meta-Learning）比如MAML（Model-Agnosti
  • 使用CSS @layer控制样式优先级的新方式 海派程序猿 css前端
    CSS@layer：拯救你的样式优先级，告别“!important”的焦虑各位前端同僚们，你们有没有经历过这样的噩梦？深夜，正当你准备结束一天的工作，舒舒服服地躺在床上刷手机时，测试突然甩来一个bug：一个看起来简单的样式问题，却怎么改都改不过来！你瞪大了眼睛，一行一行地检查CSS，发现优先级简直乱成了一锅粥。仿佛无数个小恶魔在你代码里跳舞，疯狂地嘲笑你的努力。最后，你无奈地祭出了“!import
  • 从台式电脑硬件架构看前后端分离开发模式 程序猿全栈の董 电脑硬件架构状态模式
    在软件开发领域，前后端分离早已成为主流架构设计理念。它将系统的业务逻辑处理与用户界面展示解耦，提升开发效率与系统可维护性。有趣的是，我们日常生活中常见的台式电脑硬件架构，竟与这一理念有着异曲同工之妙。今天，就让我们从台式电脑的硬件组成出发，深入探讨其与前后端分离开发模式的内在联系。文章目录一、台式电脑硬件架构与前后端的类比1.1主机：后端的硬件化身1.2显示屏：前端的硬件呈现二、二者分离模式的共同
  • Linux离线搭建Jenkins 为你奋斗！ 开发环境软件安装servlet测试工具经验分享笔记
    Linux离线搭建Jenkins(centos7)Jenkins简介:Jenkins只是一个平台，真正运作的都是插件。这就是jenkins流行的原因，因为jenkins什么插件都有，Hudson是Jenkins的前身，是基于Java开发的一种持续集成工具，用于监控程序重复的工作，Hudson后来被收购，成为商业版。后来创始人又写了一个jenkins,jenkins在功能上远远超过hudson.下载
  • 前端 E2E 测试实践：打造稳定 Web 应用的利器！ 朱公子的Note 编程语言前端端到端E2E测试
    在现代Web开发中，端到端（E2E）测试就像为应用程序配备了一面“照妖镜”，它模拟真实用户的操作流程，从用户点击到获得反馈的每一步都进行验证。想象一下，你刚刚完成了一个完美的登录功能，结果用户反馈“点了登录按钮没有反应”——这种“我以为OK其实不行”的问题，正是E2E测试要解决的。E2E测试并不止于前端界面，它涵盖了前端、后端及数据库等所有环节，确保每个节点都能正常工作。历史经验也提醒我们其重要性
  • taro开发钉钉小程序，打包后真机测试tabbar丢失解决方案，以及在小程序上使用路由守卫 Miong学不会前端 小程序taro钉钉前端
    吐槽一下，最近公司让我搞钉钉小程序，因为公司用的是taro框架，本来这个框架的社区人就比较少，taro开发钉钉小程序的人更少，以致于遇到的bug和坑在网上都找不到解决方案，挺难受的。今天搞定taro编译钉钉小程序真机测试时底部tabbar丢失问题，分享一下解决方案。在taro编译成小程序的时候，在开发工具的模拟器里面，通过配置app.config.ts文件配置tabbar，是可以正常显示的,配置如
  • 《Redis高并发优化策略与规范清单：从开发到运维的全流程指南》 猕员桃 redis运维数据库
    Redis高并发优化策略与规范清单：从开发到运维的全流程指南在互联网应用的后端架构中，Redis凭借其高性能、高并发的特性，成为缓存和数据存储的首选方案。无论是电商抢购、社交平台的点赞计数，还是在线旅游平台的实时数据查询，Redis都在支撑着海量请求的快速处理。然而，随着业务规模的扩大和流量的激增，Redis在高并发场景下也面临诸多挑战，如性能瓶颈、内存溢出、缓存雪崩等。为了确保Redis在高并发
  • OpenCV CUDA模块设备层-----线性插值函数log() 村北头的码农 OpenCVopencv人工智能计算机视觉
    操作系统：ubuntu22.04OpenCV版本：OpenCV4.9IDE:VisualStudioCode编程语言：C++11算法描述该函数用于创建线性插值访问器，支持对GPU内存中的图像数据进行双线性插值采样。主要应用于图像缩放、旋转等几何变换中需要亚像素级精度的场景。为输入图像构造一个基于“双线性插值”的访问器对象LinearInterPtrSz，可以在CUDA核函数中按需访问缩放后的像素值
  • 基于迁移学习的ResNet50模型实现石榴病害数据集多分类图片预测 深度学习乐园 深度学习实战项目迁移学习分类人工智能
    完整源码项目包获取→点击文章末尾名片！番石榴病害数据集背景描述番石榴（Psidiumguajava）是南亚的主要作物，尤其是在孟加拉国。它富含维生素C和纤维，支持区域经济和营养。不幸的是，番石榴生产受到降低产量的疾病的威胁。该数据集旨在帮助开发用于番石榴果实早期病害检测的机器学习模型，帮助保护收成并减少经济损失。数据说明该数据集包括473张番石榴果实的注释图像，分为三类。图像经过预处理步骤，例如钝
  • 四个机器学习模型对比道路裂缝检测识别分类模型 深度学习乐园 深度学习实战项目机器学习分类人工智能
    完整源码项目包获取→点击文章末尾名片！一、课题综述1.1.课题简介在机器学习的研究领域中，传统分类算法模型数量众多，适合的应用场景也各不相同。1.2.课题目标（示例）本课题使用的数据集来自于数据分析与数据挖掘竞赛Kaggle，该竞赛为数据科学领域著名的国际性赛事之一。课题使用的数据集为带标签的图像数据集，包含带有裂痕和不带有裂痕的桥梁、墙和人行道图片。课题的目标为对于目标数据集，搭建相应的传统机器
  • Densenet模型花卉图像分类 深度学习乐园 分类数据挖掘人工智能
    项目源码获取方式见文章末尾！600多个深度学习项目资料，快来加入社群一起学习吧。《------往期经典推荐------》项目名称1.【基于CNN-RNN的影像报告生成】2.【卫星图像道路检测DeepLabV3Plus模型】3.【GAN模型实现二次元头像生成】4.【CNN模型实现mnist手写数字识别】5.【fasterRCNN模型实现飞机类目标检测】6.【CNN-LSTM住宅用电量预测】7.【VG
  • 基于AFM注意因子分解机的推荐算法 深度学习乐园 深度学习实战项目深度学习科研项目推荐算法算法机器学习
    关于深度实战社区我们是一个深度学习领域的独立工作室。团队成员有：中科大硕士、纽约大学硕士、浙江大学硕士、华东理工博士等，曾在腾讯、百度、德勤等担任算法工程师/产品经理。全网20多万+粉丝，拥有2篇国家级人工智能发明专利。社区特色：深度实战算法创新获取全部完整项目数据集、代码、视频教程，请进入官网：zzgcz.com。竞赛/论文/毕设项目辅导答疑，v：zzgcz_com1.项目简介项目A033基于A
  • 钉钉小程序开发的技术选型 脑袋大大的 钉钉生态创业者专栏钉钉小程序
    作为一名专注于前端技术发展的技术博主，今天我将分享一下在进行钉钉小程序开发时关于技术选型的一些思考和经验。本文旨在探讨uni-app、Taro等跨平台框架与原生开发框架之间的优缺点，并最终推荐一个我认为最适合当前需求的技术栈组合。着急想知道答案的可以直接滑到最后看小编觉得好的解决方案吧！多端开发框架vs原生开发框架uni-appuni-app是一个基于Vue.js的跨平台开发框架，它允许开发者通过
  • 微服务架构设计模式资源下载介绍：掌握微服务设计精髓，助力架构升级
    微服务架构设计模式资源下载介绍：掌握微服务设计精髓，助力架构升级【下载地址】微服务架构设计模式资源下载介绍探索微服务架构的奥秘，掌握设计模式的精髓。本仓库提供了一本权威的英文书籍《MicroservicePatterns:WithexamplesinJava》的PDF资源，由克里斯-理查森精心撰写。书中不仅涵盖了微服务的基本概念，还深入探讨了服务拆分、服务发现、负载均衡等关键主题，辅以丰富的实例和
  • 钉钉小程序开发实战：打造一个简约风格的登录页面 脑袋大大的 钉钉生态创业者专栏钉钉小程序
    在上一篇文章中，我们已经介绍了如何搭建钉钉小程序的基础环境，并完成了项目的初始化配置。本文将继续深入，手把手带你实现一个简约风格的登录页面，这是大多数企业级应用不可或缺的一部分。钉钉小程序基于前端Web技术栈，采用类似于Vue的模板语法和组件化结构，非常适合快速构建轻量级企业内部应用。登录页虽然看似简单，但却是用户与系统交互的第一步，良好的体验和简洁的设计往往能给用户留下深刻印象。本章节直接上干货
  • vue3.5中useTemplateRef获取DOM元素 whhhhhhhhhw vue.jsjavascript前端
    前言：vue3.5推出了一种新的获取DOM元素的API（useTemplateRef），它与vue3.5之前获取DOM元素有什么不同呢？今天我们来学习一下。1.vue3.5之前如何获取DOM元素在vue3.5之前，我们要给需要获取DOM元素上面添加一个ref，然后给这个ref一个名字，在逻辑代码中创建一个变量，变量名需要和DOM元素上ref的名称相同。代码如下：import{ref,onMount
  • 解决vue移动端哈希模式页面返回滚动条置顶问题 【03】 vue笔记vue.jsjavascript
    问题：如a页面为列表，点击列表进入b页面，再返回a页面，a页面的滚动条置顶了解决思路：使用keep-alive缓存页面，在路由跳转时存储滚动条高度，在页面显示是设置滚动条高度全局js文件GFN.jsexportdefault{/***储存列表滚动条高度*@paramt*/saveScroller:(t)=>{t.scrollY=t.$refs.v_list.scroller.scrollTop},
  • 校园志愿者系统前端代码实现及技术解析 创新工场
    本文还有配套的精品资源，点击获取简介：本项目集中展示了Web开发中的关键技术和框架，包含PHP、Vue.js、ElementUI和Laravel在校园志愿者系统前台构建中的应用。首先，PHP用于后端开发，处理业务逻辑并与数据库交互。接着，Vue.js作为前端框架，实现交云动界面和用户交互。ElementUI提供企业级UI组件，加速开发流程，提高界面美观度。Laravel框架则用于搭建后端架构，处理
  • 微信小程序出现冒泡问题的原因和解决方法 天和都成 微信小程序微信小程序
    微信小程序中的冒泡问题通常由事件冒泡机制引发，即子组件触发的事件会逐级向上传播至父组件。以下是其原因分析及解决方法：一、冒泡问题的原因事件冒泡机制微信小程序中，冒泡事件（如tap、longtap、touchstart等）默认会从触发事件的子组件向上传播至父组件。例如，若子组件和父组件均绑定了bindtap事件，点击子组件时会依次触发子组件和父组件的事件处理函数。事件绑定方式不当使用bind绑定事件
  • 前后端分离与不分离解析，很全面！ 涔溪 前端
    从多个维度对前后端分离与不分离进行更加深入、系统的分析，包括技术架构、开发流程、部署维护、性能优化、团队协作、适用场景等方面全面理解两者的区别和优劣。一、概念定义1.前后端不分离（传统服务端渲染）前端页面由服务器端生成并返回给浏览器，如PHP、JSP、ASP.NET等。前端逻辑和后端业务耦合在一起，通常一个请求对应一个完整的HTML页面。2.前后端分离（现代Web开发模式）前端独立开发为一个完整的
  • 远程光伏电站网络解决方案：SD-WAN与传统方式的双剑合璧 北极光SD-WAN组网 网络
    在“双碳”目标驱动下，光伏行业迎来了爆发式增长。然而，光伏电站由于数量多、分布广且位置偏远，其远程运维管理面临巨大挑战。传统的网络接入方式（如VPN和专线）虽然成熟稳定，但在成本、灵活性和扩展性上存在明显不足。而近年来兴起的**SD-WAN（软件定义广域网）**技术，凭借其智能化、敏捷性和成本优势，为光伏行业提供了更为灵活高效的网络解决方案。但从实际场景来看，完全“抛弃”传统方式并不可取，而是需要
  • 《聚类算法》入门--大白话篇：像整理房间一样给数据分类
    一、什么是聚类算法？想象一下你的衣柜里堆满了衣服，但你不想一件件整理。聚类算法就像一个聪明的助手，它能自动帮你把衣服分成几堆：T恤放一堆、裤子放一堆、外套放一堆。它通过观察衣服的颜色、大小、款式这些特征，把相似的放在一起，不相似的分开。在计算机世界里，聚类算法就是帮我们把杂乱的数据分成有意义的组。它不需要提前知道答案（这就是"无监督学习"），而是像侦探一样，从数据中发现隐藏的规律。二、最常见的三种
  • AI正在偷偷取代这10种职业，你的工作安全吗？
    近年来，人工智能（AI）的飞速发展正在悄然改变我们的工作方式。从自动化客服到AI生成内容，许多传统职业正面临被取代的风险。虽然AI带来了更高的效率和便利，但也让不少人开始担忧：我的工作会被AI抢走吗？今天，我们就来盘点10种最容易被AI取代的职业，并探讨如何在这个AI时代保持竞争力。1.客服代表取代指数：★★★★★AI驱动的聊天机器人（如ChatGPT、GoogleBard）已经能够处理大部分基础
  • stm32学习笔记——TIM定时中断 算法萌新——1 stm32学习笔记
    一、TIM定时中断的基本概念TIM定时中断是嵌入式系统中一种重要的功能，它基于定时器（TIM）实现。定时器可以对内部时钟或外部事件进行计数，当计数值达到预设的阈值时，会触发一个中断信号。这个中断信号会使CPU暂停当前正在执行的主程序，转而执行预先编写好的中断服务程序（ISR），执行完中断服务程序后，CPU再返回到主程序继续执行。TIM定时中断的核心在于“定时”，它可以实现精确的时间控制，为系统提供
  • Java集合面试“送命题”合集！这15个问题，你能答对几个？ java干货 java面试python
    问题1：ConcurrentHashMap和Collections.synchronizedMap()有什么区别？✅答案：两者都提供线程安全的Map，但实现方式截然不同：•ConcurrentHashMap是为并发而设计的。它使用分段锁（Java7及以前）或CAS+节点级锁（Java8+），允许在不锁定整个Map的情况下进行并发的读和写，性能更高。•Collections.synchronized
  • 【半夜爬起来学python】零基础学习Pygame|第一期|知识点+小球反弹游戏案例 奈樱. python(pygame)pygame学习游戏pip
    一.安装PygamePygame是跨平台Python模块，很多编译器不会向用户提供该模块，需要我们自己安装。安装步骤：打开Pygame官网：www.pygame.org点击PYGAME2.6.0-25JUN,2024下载好之后，解压压缩包，安装路径最好放在c盘里Administrator文件里在菜单栏点击搜索，输入cmd，找到“命令提示符”输入命令pipinstallpygame运行的时候会发现命
  • 【Python】Pygame从零开始学习 宅男很神经 python开发语言
    模块一：Pygame入门与核心基础本模块将引导您完成Pygame的安装，并深入理解Pygame应用程序的基石——游戏循环、事件处理、Surface与Rect对象、显示控制以及颜色管理。第一章：Pygame概览与环境搭建1.1什么是Pygame？Pygame是一组专为编写视频游戏而设计的Python模块。它构建在优秀的SDL(SimpleDirectMediaLayer)库之上，允许您使用Pytho
  • C#串口通信的5大绝招：从菜鸟到大神的通关秘籍！ 墨瑾轩 一起学学C#【十】c#网络开发语言
    关注墨瑾轩，带你探索编程的奥秘！超萌技术攻略，轻松晋级编程高手技术宝库已备好，就等你来挖掘订阅墨瑾轩，智趣学习不孤单即刻启航，编程之旅更有趣你的串口是“快递员”还是“快递刺客”？嘿，C#开发者！今天咱们要破解一个超硬核的谜题——“如何让串口通信像‘超级快递员’一样精准无误，让乱码像‘纸片人’一样秒躺”！有没有遇到过这样的“惊魂现场”：发送数据像“发往火星”一样石沉大海？接收数据像“天书”一样全是乱
  • 【教程】使用Visual Studio debug exe和dll yunquantong visualstudioide
    如何Debugexe和dll在实际项目中，我们经常需要对可执行文件（exe）和动态链接库（dll）进行调试。本文详细总结如何通过远程和本地调试exe，以及如何调试dll，包括常规与资源路径调试。一、Debugexe1.远程调试exe（使用VSRemoteTools）适用场景：程序必须在服务器上运行。步骤：在目标服务器上部署对应版本的VisualStudioRemoteDebugger（如msvsm
  • jquery实现的jsonp掉java后台 知了ing javajsonpjquery
    什么是JSONP？ 先说说JSONP是怎么产生的： 其实网上关于JSONP的讲解有很多，但却千篇一律，而且云里雾里，对于很多刚接触的人来讲理解起来有些困难，小可不才，试着用自己的方式来阐释一下这个问题，看看是否有帮助。 1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准； 2、
  • Struts2学习笔记 caoyong struts2
    SSH : Spring + Struts2 + Hibernate 三层架构(表示层,业务逻辑层,数据访问层) MVC模式 (Model View Controller) 分层原则:单向依赖，接口耦合 1、Struts2  =  Struts  + Webwork 2、搭建struts2开发环境    a>、到www.apac
  • SpringMVC学习之后台往前台传值方法 满城风雨近重阳 springMVC
    springMVC控制器往前台传值的方法有以下几种： 1.ModelAndView    通过往ModelAndView中存放viewName：目标地址和attribute参数来实现传参：      ModelAndView mv=new ModelAndView();  mv.setViewName="success
  • WebService存在的必要性？ 一炮送你回车库 webservice
    做Java的经常在选择Webservice框架上徘徊很久，Axis  Xfire Axis2 CXF ，他们只有一个功能，发布HTTP服务然后用XML做数据传输。 是的，他们就做了两个功能，发布一个http服务让客户端或者浏览器连接，接收xml参数并发送xml结果。 当在不同的平台间传输数据时，就需要一个都能解析的数据格式。 但是为什么要使用xml呢？不能使json或者其他通用数据
  • js年份下拉框 3213213333332132 java web ee
    <div id="divValue">test...</div>测试 //年份 <select id="year"></select> <script type="text/javascript"> window.onload =
  • 简单链式调用的实现技术 归来朝歌 方法调用链式反应编程思想
    在编程中，我们可以经常遇到这样一种场景：一个实例不断调用它自身的方法，像一条链条一样进行调用 这样的调用你可能在Ajax中，在页面中添加标签： $("<p>").append($("<span>").text(list[i].name)).appendTo("#result");   也可能在HQ
  • JAVA调用.net 发布的webservice 接口 darkranger webservice
    /** * @Title: callInvoke * @Description: TODO(调用接口公共方法) * @param @param url 地址 * @param @param method 方法 * @param @param pama 参数 * @param @return * @param @throws BusinessException
  • Javascript模糊查找 | 第一章 循环不能不重视。 aijuans Way
    最近受我的朋友委托用js+HTML做一个像手册一样的程序，里面要有可展开的大纲，模糊查找等功能。我这个人说实在的懒，本来是不愿意的，但想起了父亲以前教我要给朋友搞好关系，再加上这也可以巩固自己的js技术，于是就开始开发这个程序，没想到却出了点小问题，我做的查找只能绝对查找。具体的js代码如下： function search(){ var arr=new Array("my
  • 狼和羊，该怎么抉择 atongyeye 工作
    狼和羊，该怎么抉择 在做一个链家的小项目，只有我和另外一个同事两个人负责，各负责一部分接口，我的接口写完，并全部测联调试通过。所以工作就剩下一下细枝末节的，工作就轻松很多。每天会帮另一个同事测试一些功能点，协助他完成一些业务型不强的工作。 今天早上到公司没多久，领导就在QQ上给我发信息，让我多协助同事测试，让我积极主动些，有点责任心等等，我听了这话，心里面立马凉半截，首先一个领导轻易说
  • 读取android系统的联系人拨号 百合不是茶 androidsqlite数据库内容提供者系统服务的使用
           联系人的姓名和号码是保存在不同的表中,不要一下子把号码查询来,我开始就是把姓名和电话同时查询出来的,导致系统非常的慢   关键代码:     1, 使用javabean操作存储读取到的数据 package com.example.bean; /** * * @author Admini
  • ORACLE自定义异常 bijian1013 数据库自定义异常
    实例： CREATE OR REPLACE PROCEDURE test_Exception ( ParameterA IN varchar2, ParameterB IN varchar2, ErrorCode OUT varchar2 --返回值,错误编码 ) AS /*以下是一些变量的定义*/ V1 NUMBER; V2 nvarc
  • 查看端号使用情况 征客丶 windows
    一、查看端口 在windows命令行窗口下执行： >netstat -aon|findstr "8080" 显示结果： TCP     127.0.0.1:80         0.0.0.0:0    &
  • 【Spark二十】运行Spark Streaming的NetworkWordCount实例 bit1129 wordcount
    Spark Streaming简介   NetworkWordCount代码   /* * Licensed to the Apache Software Foundation (ASF) under one or more * contributor license agreements. See the NOTICE file distributed with
  • Struts2 与 SpringMVC的比较 BlueSkator struts2spring mvc
    1. 机制：spring mvc的入口是servlet，而struts2是filter，这样就导致了二者的机制不同。 2. 性能：spring会稍微比struts快。spring mvc是基于方法的设计，而sturts是基于类，每次发一次请求都会实例一个action，每个action都会被注入属性，而spring基于方法，粒度更细，但要小心把握像在servlet控制数据一样。spring
  • Hibernate在更新时，是可以不用session的update方法的(转帖） BreakingBad Hibernateupdate
    地址：http://blog.csdn.net/plpblue/article/details/9304459 public void synDevNameWithItil() {Session session = null;Transaction tr = null;try{session = HibernateUtil.getSession();tr = session.beginTran
  • 读《研磨设计模式》-代码笔记-观察者模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; import java.util.Observable; import java.util.Observer; /** * “观
  • 重置MySQL密码 chenhbc mysql重置密码忘记密码
    如果你也像我这么健忘，把MySQL的密码搞忘记了，经过下面几个步骤就可以重置了（以Windows为例，Linux/Unix类似）： 1、关闭MySQL服务 2、打开CMD，进入MySQL安装目录的bin目录下，以跳过权限检查的方式启动MySQL mysqld --skip-grant-tables  3、新开一个CMD窗口，进入MySQL mysql -uroot  
  • 再谈系统论，控制论和信息论 comsci 设计模式生物能源企业应用领域模型
                               再谈系统论，控制论和信息论     偶然看
  • oracle moving window size与 AWR retention period关系 daizj oracle
    转自： http://tomszrp.itpub.net/post/11835/494147 晚上在做11gR1的一个awrrpt报告时,顺便想调整一下AWR snapshot的保留时间,结果遇到了ORA-13541这样的错误.下面是这个问题的发生和解决过程. SQL> select * from v$version; BANNER -------------------
  • Python版B树 dieslrae python
    话说以前的树都用java写的,最近发现python有点生疏了,于是用python写了个B树实现,B树在索引领域用得还是蛮多了,如果没记错mysql的默认索引好像就是B树... 首先是数据实体对象,很简单,只存放key,value class Entity(object): '''数据实体''' def __init__(self,key,value)
  • C语言冒泡排序 dcj3sjt126com 算法
    代码示例： # include <stdio.h> //冒泡排序 void sort(int * a, int len) { int i, j, t; for (i=0; i<len-1; i++) { for (j=0; j<len-1-i; j++) { if (a[j] > a[j+1]) // >表示升序
  • 自定义导航栏样式 dcj3sjt126com 自定义
    -(void)setupAppAppearance { [[UILabel appearance] setFont:[UIFont fontWithName:@"FZLTHK—GBK1-0" size:20]]; [UIButton appearance].titleLabel.font =[UIFont fontWithName:@"FZLTH
  • 11.性能优化-优化-JVM参数总结 frank1234 jvm参数性能优化
    1.堆 -Xms --初始堆大小 -Xmx --最大堆大小 -Xmn --新生代大小 -Xss --线程栈大小 -XX:PermSize  --永久代初始大小 -XX:MaxPermSize  --永久代最大值 -XX:SurvivorRatio --新生代和suvivor比例,默认为8 -XX:TargetSurvivorRatio --survivor可使用
  • nginx日志分割 for linux HarborChung nginxlinux脚本
    nginx日志分割 for linux 默认情况下，nginx是不分割访问日志的，久而久之，网站的日志文件将会越来越大，占用空间不说，如果有问题要查看网站的日志的话，庞大的文件也将很难打开，于是便有了下面的脚本   使用方法，先将以下脚本保存为 cutlog.sh，放在/root 目录下，然后给予此脚本执行的权限   复制代码代码如下: chmo
  • Spring4新特性——泛型限定式依赖注入 jinnianshilongnian springspring4泛型式依赖注入
    Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
  • centOS安装GCC和G++ liuxihope centosgcc
    Centos支持yum安装，安装软件一般格式为yum install .......，注意安装时要先成为root用户。 按照这个思路，我想安装过程如下： 安装gcc：yum install gcc 安装g++： yum install g++ 实际操作过程发现，只能有gcc安装成功，而g++安装失败，提示g++ command not found。上网查了一下，正确安装应该
  • 第13章 Ajax进阶（上） onestopweb Ajax
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • How to determine BusinessObjects service pack and fix pack blueoxygen BO
    http://bukhantsov.org/2011/08/how-to-determine-businessobjects-service-pack-and-fix-pack/   The table below is helpful. Reference   BOE XI 3.x 12.0.0. y BOE XI 3.0 12.0. x. y BO
  • Oracle里的自增字段设置 tomcat_oracle oracle
    　大家都知道吧，这很坑，尤其是用惯了mysql里的自增字段设置，结果oracle里面没有的。oh，no 　　我用的是12c版本的，它有一个新特性，可以这样设置自增序列，在创建表是，把id设置为自增序列 create table t ( id 　　 　　 number generated by default as identity (start with 1 increment b
  • Spring Security（01）——初体验 yang_winnie springSecurity
    Spring Security（01）——初体验     博客分类： spring Security Spring Security入门安全认证        首先我们为Spring Security专门建立一个Spring的配置文件，该文件就专门用来作为Spring Security的配置