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

黑马JavaWeb企业级开发（知识清单）03——HTML实现正文：排版（音视频、换行、段落）、布局标签（div、span）、盒子模型

news 文章来源：https://blog.csdn.net/apple_68589597/article/details/140619787 2024/9/17 4:39:38

文章目录

  • 前言
  • 一、正文排版
    • 1. 视频标签: < video >
    • 2. 音频标签: < audio >
    • 3. 换行标签: < br >
    • 4. 段落标签 < p >
    • 5. vscode实现
  • 二、布局
    • 1. 盒子模型
    • 2. 布局标签< div >和< span >
    • 3. VScode实现
  • 三、源代码和运行结果
  • 总结

前言

本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）03：实现正文排版、布局的总结，帮助需要学习Web开发的朋友温故而知新。

  1. 视频标签< video >、音频标签< audio >
  2. 换行标签< br >、段落标签< p >
  3. 盒子模型
  4. 布局标签< div > < span >

一、正文排版

  • 整个正文部分的排版，主要分为这么四个部分：
    • 视频 (当前这种新闻页面,可能也会存在音频)
    • 文字段落
    • 字体加粗
    • 图片

1. 视频标签: < video >

  • src: 规定视频的url
  • controls: 显示播放控件
  • width: 播放器的宽度
  • height: 播放器的高度

2. 音频标签: < audio >

  • src: 规定音频的url
  • controls: 显示播放控件

3. 换行标签: < br >

注意: 在HTML页面中,我们在编辑器中通过回车实现的换行, 仅仅在文本编辑器中会看到换
行效果, 浏览器是不会解析的, HTML中换行需要通过br标签

4. 段落标签 < p >

  • 如: < p > 这是一个段落 < /p >
  • 文本格式标签
    在这里插入图片描述

    • 前面的标签 b、i、u、s 就仅仅是实现加粗、倾斜、下划线、删除线的效果，是没有强调语义的。

    • b标签：
      在这里插入图片描述

    • 而后面的strong、em、ins、del在实现加粗、倾斜、下划线、删除线的效果的同时，还带有强调语义。

    • strong标签：
      在这里插入图片描述

5. vscode实现

  • 实现视频播放

    • 如果只是给出视频路径，那么只有图片没有播放按钮
    • 加上controls就有了播放按钮播放视频（一定都要写）
    • 可以调整播放器的大小
      在这里插入图片描述

  • 实现音频

    • 会自动生成一个音频播放器
      在这里插入图片描述
      在这里插入图片描述

  • 实现文字和图片穿插

  • 设置段落缩进、行距和文本向右对齐
    在这里插入图片描述

二、布局

新浪新闻的原始页面，新闻网页内容都是居中展示的，左边、右边都有一定的边距。

1. 盒子模型

页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局。

盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）
在这里插入图片描述
在vscode 里，我们自设定一个盒子模型，体验一下每个参数的意义：
在这里插入图片描述

2. 布局标签< div >和< span >

实际开发网页中，会大量频繁的使用< div >和< span >这两个没有语义的布局标签。

  • div标签
    • 一行只显示一个（独占一行）
    • 宽度默认是父元素的宽度，高度默认由内容撑开
    • 可以设置宽高（width、height）
  • span标签
    • 一行可以显示多个
    • 宽度和高度默认由内容撑开
    • 不可以设置宽高（width、height）

3. VScode实现

  • 新浪新闻页面布局，上下边界为0，为版心居中布局
  • 直接用div包裹标题和正文部分，设置占比比例和边距，保证文本居中即可
    在这里插入图片描述
    在这里插入图片描述

三、源代码和运行结果

由于题材原因，这里的文本信息替换为正文1、正文2…

<!-- 文档类型为HTML -->
<!DOCTYPE html>
<html lang="en">
<head><!-- 字符集为UTF-8 --><meta charset="UTF-8"><!-- 设置浏览器兼容性的 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=S, initial-scale=1.0"><title>焦点访谈：中国底气 新思想夯实大国粮仓_新浪新闻</title><style>h1 {color: rgb(77, 79, 83);}/* ID选择器 */#time {color: #968D92;font-size: 13px; /* 设置字体大小 */}a {/* 把超链接字体颜色仍然设置为黑色 */color: black;/* 把下划线的效果去掉 *//* 设置文本为一个标准的文本，就默认把下划线去掉了 */text-decoration: none;}p {/* 为所有段落设置首行缩进 */text-indent: 35px;/* 把每一行行距调宽 */line-height: 40px;}#plast {/* 设置文本对齐方式，文本靠右对齐 */text-align: right;}#center {/* 整个标题和正文内容占整个区域65% */width: 65%;/* 让div居中展示 *//* margin: 0% 17.5% 0% 17.5%; */margin: 0 auto; /* 只有两个数据的时候，前一个表示上下边距，后一个表示左右边距 */}</style>
</head><body><div id="center"><img src="../img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a>  > 正文<!-- 方式三：外联样式 --><h1>焦点访谈：底气 新思想夯实大国粮仓</h1><hr><!-- <span></span>标签无意义，只是用来组合一行的元素的 --><!-- 可以把一行的元素单独切割，方便单独修改 --><span id="time">2023年03月02日 21:50</span> <span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a> </span><hr><!-- 正文 --><!-- 视频 --><video src="../video/1.mp4" controls width="950px"></video> <!-- 音频 --><!-- <audio src="../audio/1.mp3" controls></audio> --><!-- 用段落标签把正文每一个段都包裹起来 --><p><strong>重点内容</strong>正文1</p><p>正文2</p><img src="../img/1.jpg"><p>正文3</p><img src="../img/2.jpg"><p>正文4</p><p id="plast">责任编辑：XXX</p></div>
</body>
</html>

在这里插入图片描述

总结

本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）03：实现正文排版、布局的总结，帮助需要学习Web开发的朋友温故而知新。

  1. 视频标签< video >、音频标签< audio >
  2. 换行标签< br >、段落标签< p >
  3. 盒子模型
  4. 布局标签< div > < span >

相关文章：

黑马JavaWeb企业级开发（知识清单）03——HTML实现正文：排版（音视频、换行、段落）、布局标签（div、span）、盒子模型

文章目录 前言一、正文排版1. 视频标签: < video >2. 音频标签: < audio >3. 换行标签: < br >4. 段落标签 < p >5. vscode实现 二、布局1. 盒子模型2. 布局标签< div >和< span >3. VScode实现 三、源代码和运行结果总结 前言 本篇文章是…...

编程日记 2024/7/27 20:03:10

Java | Leetcode Java题解之第283题移动零

题目&#xff1a; 题解&#xff1a; class Solution {public void moveZeroes(int[] nums) {int n nums.length, left 0, right 0;while (right < n) {if (nums[right] ! 0) {swap(nums, left, right);left;}right;}}public void swap(int[] nums, int left, int right)…...

编程日记 2024/7/27 20:01:06

Django REST Framework(十三)视图集-GenericViewSet

Django REST Framework 中&#xff0c;ModelViewSet 和 ReadOnlyModelViewSet 提供了快速实现常见视图操作的便捷方法。它们分别继承自 GenericViewSet 并组合了多个 Mixin 类&#xff0c;使得视图的编写变得更加简单。 ModelViewSet ModelViewSet 继承自 GenericViewSet&…...

编程日记 2024/7/27 20:00:04

《0基础》学习Python——第二十四讲__爬虫/＜7＞深度爬取

一、深度爬取 深度爬取是指在网络爬虫中&#xff0c;获取网页上的所有链接并递归地访问这些链接&#xff0c;以获取更深层次的页面数据。 通常&#xff0c;一个简单的爬虫只会获取到初始页面上的链接&#xff0c;并不会进一步访问这些链接上的其他页面。而深度爬取则会不断地获…...

编程日记 2024/7/27 19:59:02

Python Pygame制作简单五子棋游戏

代码参考自&#xff1a;https://blog.csdn.net/weixin_43918046/article/details/119521845 新增功能&#xff1a;1任意棋盘大小&#xff1b;2.任意棋子连线 # 棋盘大小 [670, 670] # 棋盘行列 15*15 import pygame from pygame.locals import QUIT, KEYDOWN import numpy as…...

编程日记 2024/7/27 19:58:01

JS+H5在线文心AI聊天（第三方接口）

源码在最后面 调用的不是文心官方接口 可以正常聊天 有打字动画 效果图 源代码 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-s…...

编程日记 2024/7/27 19:55:57

kafka源码阅读-ReplicaStateMachine(副本状态机)解析

概述 Kafka源码包含多个模块&#xff0c;每个模块负责不同的功能。以下是一些核心模块及其功能的概述&#xff1a; 服务端源码 &#xff1a;实现Kafka Broker的核心功能&#xff0c;包括日志存储、控制器、协调器、元数据管理及状态机管理、延迟机制、消费者组管理、高并发网络…...

编程日记 2024/7/27 19:53:54

【MetaGPT系列】【MetaGPT完全实践宝典——如何定义单一行为多行为Agent】

目录 前言一、智能体1-1、Agent概述1-2、Agent与ChatGPT的区别 二、多智能体框架MetaGPT2-1、安装&配置2-2、使用已有的Agent&#xff08;ProductManager&#xff09;2-3、拥有单一行为的Agent&#xff08;SimpleCoder&#xff09;2-3-1、定义写代码行为2-3-2、角色定义2-3…...

编程日记 2024/7/27 19:52:53

Kolla-Ansible的确是不支持CentOS-Stream系列产品了

看着OpenStack最新的 C 版本出来一段时间了&#xff0c;想尝个鲜、用Kolla-Ansible进行容器化部署&#xff0c;结果嘛。。。 根据实验结果&#xff0c;自OpenStack Bobcat版本开始&#xff0c;Kolla-Ansible就适合在CentOS系列产品上部署了&#xff0c;通过对 Bobcat和Caracal…...

编程日记 2024/7/27 19:51:52

IDEA启动C:\Users\badboy\.jdks\corretto-17.0.7\bin\java.exe -Xmx700m报错

这篇文章写的就很详细了(IDEA启动C:\Users\badboy\.jdks\corretto-17.0.7\bin\java.exe -Xmx700m报错_error occurred during initialization of vm failed -CSDN博客)...

编程日记 2024/7/27 19:47:46

ctfshow298-300（java信息泄露，代码审计）

Web298 代码审计 这里看到getVipStatus方法&#xff0c;获得了获取flag的条件就是user等于admin&#xff0c;password等于ctfshow Poc: https://d036a90d-ac1c-4de1-9b0b-86f52d2586b9.challenge.ctf.show/ctfshow/login?usernameadmin&passwordctfshow Web299 打开页面…...

编程日记 2024/7/27 19:46:45

Java 基础 and 进阶面试知识点（超详细）

一个 Java 文件中是否可以存在多个类&#xff08;修饰类除外&#xff09;&#xff1f; 一个 Java 文件中是可以存在多个类的&#xff0c;但是一个 Java 文件中只能存在一个 public 所修饰的类&#xff0c;而且这个 Java 文件的文件名还必须和 public 所修饰类的类名保持一致&a…...

编程日记 2024/7/27 19:43:41

【LabVIEW作业篇 - 5】：水仙花数、数组与for循环的连接

文章目录 水仙花数数组与for循环的连接 水仙花数 水仙花数&#xff0c;是指一个3位数&#xff0c;它的每个位上的数字的3次幂之和等于它本身。如371 3^3 7^3 1^3&#xff0c;则371是一个水仙花数。 思路&#xff1a;水仙花数是一个三位数&#xff0c;通过使用for循环&#xf…...

编程日记 2024/7/27 19:42:40

Kafka系列之如何提高消费者消费速度

前言 在实际开发过程中&#xff0c;如果使用Kafka处理超大数据量(千万级、亿级)的场景&#xff0c;Kafka消费者的消费速度可能决定系统性能瓶颈。 实现方案 为了提高消费者的消费速度&#xff0c;我们可以采取以下措施&#xff1a; 将主题的分区数量增大&#xff0c;如 20&…...

编程日记 2024/7/27 19:41:39

mac安装Whisper

Whisper 官方git https://github.com/openai/whisper?tabreadme-ov-file 基本上参考官方的安装流程 pip3 install -U openai-whisper pip3 install githttps://github.com/openai/whisper.git pip3 install --upgrade --no-deps --force-reinstall githttps://github.com/…...

编程日记 2024/7/27 19:40:38

Linux：进程概述（什么是进程、进程控制块PCB、并发与并行、进程的状态、进程的相关命令）

进程概述 (1)What&#xff08;什么是进程&#xff09; 程序&#xff1a;磁盘上的可执行文件&#xff0c;它占用磁盘、是一个静态概念 进程&#xff1a;程序执行之后的状态&#xff0c;占用CPU和内存&#xff0c;是一个动态概念&#xff1b;每一个进程都有一个对应的进程控制块…...

编程日记 2024/7/27 19:39:37

Unity UGUI 之 坐标转换

本文仅作学习笔记与交流&#xff0c;不作任何商业用途 本文包括但不限于unity官方手册&#xff0c;唐老狮&#xff0c;麦扣教程知识&#xff0c;引用会标记&#xff0c;如有不足还请斧正 本文在发布时间选用unity 2022.3.8稳定版本&#xff0c;请注意分别 前置知识&#xff1a;…...

编程日记 2024/7/27 19:37:34

使用 uPlot 在 Vue 中创建交互式图表

本文由ScriptEcho平台提供技术支持 项目地址&#xff1a;传送门 使用 uPlot 在 Vue 中创建交互式图表 应用场景介绍 uPlot 是一个轻量级、高性能的图表库&#xff0c;适用于创建各种交互式图表。它具有丰富的功能&#xff0c;包括可自定义的轴、网格、刻度和交互性。本篇博…...

编程日记 2024/7/27 19:36:32

SpringBoot 项目配置文件注释乱码的问题解决方案

一、问题描述 在项目的配置文件中&#xff0c;我们写了一些注释&#xff0c;如下所示&#xff1a; 但是再次打开注释会变成乱码&#xff0c;如下所示&#xff1a; 那么如何解决呢&#xff1f; 二、解决方案 1. 点击” File→Setting" 2. 搜索“File Encodings”, 将框…...

编程日记 2024/7/27 19:35:31

TTS如何正确读AI缩写、金额和数字

案例&#xff1a;Tell me whats AI(a i), you need pay $186.30, your card Number is 1 2 3, your work Number is 5 6 7 8...

编程日记 2024/7/27 19:28:24

python基础知识点（蓝桥杯python科目个人复习计划75）

第一题&#xff1a;ip补充 题目描述&#xff1a; 小蓝的ip地址为192.168.*.21&#xff0c;其中*是一个数字&#xff0c;请问这个数字最大可能是多少&#xff1f; import os import sys# 请在此输入您的代码 print("255") 第二题&#xff1a;出现最多的字符 题目描…...

编程日记 2024/7/27 19:27:23

小技巧：如何在已知PDF密码情况下去掉PDF的密码保护

第一步&#xff0c;用Edge打开你的pdf&#xff0c;输入密码进去 第二步&#xff0c;点击打印 第三步&#xff0c;选择导出PDF&#xff0c;选择彩印 第四步&#xff0c;选择导出位置&#xff0c;导出成功后打开发现没有密码限制了&#xff01;...

编程日记 2024/7/27 19:25:20

Java泛型的介绍和基本使用

什么是泛型 ​ 泛型就是将类型参数化&#xff0c;比如定义了一个栈&#xff0c;你必须在定义之前声明这个栈中存放的数据的类型&#xff0c;是int也好是double或者其他的引用数据类型也好&#xff0c;定义好了之后这个栈就无法用来存放其他类型的数据。如果这时候我们想要使用这…...

编程日记 2024/7/27 19:24:19

【C++】动态内存管理与模版

目录 1、关键字new&#xff1a; 1、用法&#xff1a; 2、理解&#xff1a; 3、与malloc的相同与不同&#xff1a; 1、相同&#xff1a; 2、不同&#xff1a; 2、模版初阶&#xff1a; 1、函数模版&#xff1a; 1、概念&#xff1a; 2、关键字&#xff1a;template&…...

编程日记 2024/7/27 19:20:13

MongoDB - 组合聚合阶段：$group、$match、$limit、$sort、$skip、$project、$count

文章目录 1. $group2. $group-> $project2.1 $group2.2 $group-> $project2.3 SpringBoot 整合 MongoDB 3. $match-> $group -> $match3.1 $match3.2 $match-> $group3.3 $match-> $group-> $match3.4 SpringBoot 整合 MongoDB 4. $match-> $group->…...

编程日记 2024/7/27 19:19:11

vue element-ui日期控件传参

前端&#xff1a;Vue element-ui <el-form-item label"过期时间" :rules"[ { required: true, message: 请选择过期时间, trigger: blur }]"><el-date-picker v-model"form.expireTime" type"date" format"yyyy-MM-dd&…...

编程日记 2024/7/27 19:17:09

MacOS安装SDKMan管理Java版本

文章目录 1 简介2 安装与卸载2.1 安装2.2 卸载 3 使用3.1 查看其他工具&#xff1a;支持 Ant, Maven 等3.2 查看Java版本3.3 安装Java&#xff0c;加上相关的版本3.4 设置Java版本(全局)3.5 只在当前窗口生效3.6 卸载1 默认环境无法卸载 4 jdk安装的位置5 与IDEA集成参考 1 简介…...

编程日记 2024/7/27 19:16:06

【网络安全的神秘世界】文件包含漏洞

&#x1f31d;博客主页&#xff1a;泥菩萨 &#x1f496;专栏&#xff1a;Linux探索之旅 | 网络安全的神秘世界 | 专接本 | 每天学会一个渗透测试工具 一、概述 文件包含&#xff1a;重复使用的函数写在文件里&#xff0c;需要使用某个函数时直接调用此文件&#xff0c;而无需再…...

编程日记 2024/7/27 19:14:03

并发编程--volatile

1.什么是volatile volatile是 轻 量 级 的 synchronized&#xff0c;它在多 处 理器开 发 中保 证 了共享 变 量的 “ 可 见 性 ” 。可 见 性的意思是当一个 线 程 修改一个共享变 量 时 &#xff0c;另外一个 线 程能 读 到 这 个修改的 值 。如果 volatile 变 量修 饰 符使用…...

编程日记 2024/7/27 19:13:01

记录unraid docker更新的域名

背景&#xff1a;级联 一、安装内容 unraid更新docker&#xff0c;之前一直失败&#xff0c;修改网络后可以进行安装。 二、查看域名 查看域名&#xff0c;发现是走github的&#xff0c;怪不得有一些docker无法正常更新 三、解决方法 更改代理&#xff0c;这里为unraid的…...

编程日记 2024/7/27 19:09:58

SpringCloud+Vue3多对多，多表联查

♥️作者&#xff1a;小宋1021 &#x1f935;‍♂️个人主页&#xff1a;小宋1021主页 ♥️坚持分析平时学习到的项目以及学习到的软件开发知识&#xff0c;和大家一起努力呀&#xff01;&#xff01;&#xff01; &#x1f388;&#x1f388;加油&#xff01; 加油&#xff01…...

编程日记 2024/7/27 19:06:55

麒麟系统信创改造

麒麟系统信创改造 一、查看操作系统架构下载相应的依赖，压缩包1、查看Linux系统架构、CPU（1）uname -m（2）lscpu（3）cat /proc/cpuinfo（4）arch（5）getconf LONG_BIT（6）dmidecode2、根据Linux系统架构、CPU的差异进行下载相关依赖，看第二项二、以下是根据本系统的aarc…...

编程日记 2024/7/27 19:03:52

【Android】ListView和RecyclerView知识总结

文章目录 ListView步骤适配器AdpterArrayAdapterSimpleAdapterBaseAdpter效率问题 RecyclerView具体实现不同布局形式的设置横向滚动瀑布流网格 点击事件 ListView ListView 是 Android 中的一种视图组件&#xff0c;用于显示可滚动的垂直列表。每个列表项都是一个视图对象&…...

编程日记 2024/7/27 19:02:51

泛域名绑定到wordpress网站二级目录

要将WordPress的泛域名绑定到二级目录&#xff0c;你需要在你的服务器上修改Apache或Nginx配置文件。以下是两种最常见的服务器配置的示例&#xff1a; Apache服务器 编辑你的虚拟主机配置文件&#xff0c;通常位于/etc/apache2/sites-available/目录下。 <VirtualHost *…...

编程日记 2024/7/27 19:01:50

8、从0搭建企业门户网站——网站部署

目录 正文 1、域名解析 2、云服务器端口授权 3、Mysql数据库初始化 4、上传网站软件包 5、Tomcat配置 6、运行Tomcat 7、停止Tomcat 8、部署后发现验证码无法使用 完毕！ 正文 当云服务器租用、域名购买和软件开发都完成后，我们就可以开始网站部署上线，ICP备案会长…...

编程日记 2024/7/27 19:00:48

uniapp中出现图片过小会与盒子偏离

结论&#xff1a;在image的父盒子中加上display: flex&#xff0c;原因不清楚 出问题的代码和图片如下&#xff1a; <template><view style" background-color: greenyellow; height: 10rpx;width: 10rpx;"><image :src"imgSrc.seatnull" …...

编程日记 2024/7/27 18:59:46

MySQL练手 --- 1934. 确认率

题目链接&#xff1a;1934. 确认率 思路 由题可知&#xff0c;两个表&#xff0c;一个表为Signups注册表&#xff0c;另一个表为Confirmations信息确认表&#xff0c;表的关联关系为 一对一&#xff0c;且user_id作为两个表的连接条件&#xff08;匹配字段&#xff09;&#…...

编程日记 2024/7/27 18:56:41

【OpenCV C++20 学习笔记】扫描图片数据

扫描图片数据 应用情景图像数据扫描的难点颜色空间缩减&#xff08;color space reduction&#xff09;查询表 扫描算法计算查询表统计运算时长连续内存3种扫描方法C风格的扫描方法迭代器方法坐标方法LUT方法 算法效率对比结论 应用情景 图像数据扫描的难点 在上一篇文章《基…...

编程日记 2024/7/27 18:50:34

LeetCode：爬楼梯（C语言）

1、问题概述&#xff1a;每次可以爬 1 或 2 个台阶。有多少种不同的方法可以爬到楼顶 2、示例 示例 1&#xff1a; 输入&#xff1a;n 2 输出&#xff1a;2 解释&#xff1a;有两种方法可以爬到楼顶。 1. 1 阶 1 阶 2. 2 阶 示例 2&#xff1a; 输入&#xff1a;n 3 输出&a…...

编程日记 2024/7/27 18:49:33

银河麒麟（arm64）环境下通过docker安装postgis3，并实现数据整体迁移

银河麒麟(arm64)环境下通过docker安装postgis3，并实现数据整体迁移 硬件配置：麒麟9006C 系统环境：银河麒麟桌面版v10 sp1 数据库：postgresql11+postgis3.0 具体的步骤参考https://blog.csdn.net/qq_34817440/article/details/103914574 -----主要操作-----------------…...

编程日记 2024/7/27 18:46:29

C语言 | Leetcode C语言题解之第278题第一个错误的版本

题目&#xff1a; 题解&#xff1a; int firstBadVersion(int n) {int left 1, right n;while (left < right) { // 循环直至区间左右端点相同int mid left (right - left) / 2; // 防止计算时溢出if (isBadVersion(mid)) {right mid; // 答案在区间 [left, mid] 中…...

编程日记 2024/7/27 18:43:25

京东科技集团将在香港发行与港元1:1挂钩的加密货币稳定币

据京东科技集团旗下公司京东币链科技(香港)官网信息&#xff0c;京东稳定币是一种基于公链并与港元(HKD) 1:1挂钩的稳定币&#xff0c;将在公共区块链上发行&#xff0c;其储备由高度流动且可信的资产组成&#xff0c;这些资产安全存放于持牌金融机构的独立账户中&#xff0c;通…...

编程日记 2024/7/27 18:41:24

Vue 实现电子签名并生成签名图片

目录 前言项目结构代码实现 安装依赖创建签名画布组件生成签名图片 总结相关阅读 1. 前言 电子签名在现代Web应用中越来越普遍&#xff0c;例如合同签署、确认表单等。本文将介绍如何使用Vue.js实现一个简单的电子签名功能&#xff0c;并将签名生成图片。 2. 项目结构 项…...

编程日记 2024/7/27 18:40:23

Visual Studio 2022美化

说明&#xff1a; VS版本&#xff1a;Visual Studio Community 2022 背景美化 【扩展】【管理扩展】搜索“ClaudiaIDE”&#xff0c;【下载】&#xff0c;安装完扩展要重启VS 在wallhaven下载壁纸图片作为文本编辑器区域背景图片 【工具】【选项】搜索ClaudiaIDE&#xff…...

编程日记 2024/7/27 18:39:22

[CISCN2019 华东南赛区]Web11

进来先做信息收集&#xff0c;右上角显示当前ip&#xff0c;然后有api的调用地址和请求包的格式以及最重要的是最下面的smarty模版&#xff0c;一看到这个就得想到smarty模版注入 测试了一下两个api都无法访问 直接切到数据包看看能不能通过XFF来修改右上角ip 成功修改&#x…...

编程日记 2024/7/27 18:38:20

【图形图像-1】SDF

在图形图像处理中&#xff0c;SDF&#xff08;Signed Distance Field&#xff0c;带符号的距离场&#xff09;是一种表示图形轮廓和空间距离的数学结构。它通常用于计算机图形学、文本渲染、碰撞检测和物理模拟等领域。 SDF&#xff08;Signed Distance Field&#xff0c;带符号…...

编程日记 2024/7/27 18:37:19

苍穹外卖01

0. 配置maven (仅一次的操作 1.项目导入idea 2. 保证nginx服务器运行 &#xff08;nginx.exe要在非中文的目录下&#xff09; 开启服务&#xff1a; start nginx 查看任务进程是否存在&#xff1a; tasklist /fi "imagename eq nginx.exe" 关闭ngi…...

编程日记 2024/7/27 18:35:14

ElasticSearch(三)—文档字段参数设置以及元字段

一、 字段参数设置 analyzer&#xff1a; 指定分词器。elasticsearch 是一款支持全文检索的分布式存储系统&#xff0c;对于 text类型的字段&#xff0c;首先会使用分词器进行分词&#xff0c;然后将分词后的词根一个一个存储在倒排索引中&#xff0c;后续查询主要是针对词根…...

编程日记 2024/7/27 18:34:13

ARM功耗管理之压力测试和PM_DEBUG实验

安全之安全(security)博客目录导读 ARM功耗管理精讲与实战汇总参见&#xff1a;Arm功耗管理精讲与实战 思考&#xff1a;睡眠唤醒实验&#xff1f;压力测试&#xff1f;Suspend-to-Idle/RAM/Disk演示&#xff1f; 1、实验环境准备 2、软件代码准备 3、唤醒源 4、Suspend-…...

编程日记 2024/7/27 18:32:10

ESP8266用AT指令实现连接MQTT

1准备工作 硬件&#xff08;ESP8266&#xff09;连接电脑 硬件已经烧入了MQTT透传固件 2实现连接 2-1&#xff08;进入AT模式&#xff09; 打开串口助手发送如下指令 AT 2-2&#xff08;复位&#xff09; ATRST 2-3&#xff08;开启DHCP&#xff0c;自动获取IP&#x…...

编程日记 2024/7/27 18:31:09