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

Web基础:HTML快速入门

HTML基础语法

HTML(超文本标记语言) 是用于创建网页内容的 标记语言,通过定义页面的 结构和内容 来告诉浏览器如何呈现网页。

超文本(Hypertext) 是一种通过 链接(Hyperlinks) 将不同文本、图像、视频等内容关联起来的信息组织形式,其核心特点是 非线性可扩展性

为什么需要掌握HTML?

学习Web渗透需要掌握HTML,因为HTML是网页内容的结构语言,渗透测试的核心目标是发现并利用网站漏洞。通过HTML标签(如<form><input><a>)可以:

  1. 分析页面逻辑:快速定位漏洞入口(如登录表单、上传功能);

  2. 构造恶意请求:直接篡改HTML参数(如SQL注入、XSS攻击)或绕过前端验证;

  3. 绕过安全防护:利用HTML结构识别WAF规则盲区或隐藏接口;

html代码编辑方式
文本编辑器

HTML代码的编辑方式多种多样,可以根据需求、场景和技术水平选择不同的工具或方法。

  • Visual Studio Code(推荐,功能强大且免费)

  • Sublime Text(轻量高效)

在线编辑器
  • JSFiddle

  • CodeSandbox

我建议从CodePen开始。它用户友好,非常适合初学者。

图片

让我们编写我们的第一个HTML代码!这里有一个简单的例子:

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>我的第一个网页</title></head><body><h1>你好,世界!</h1><p>这是我的第一个HTML页面。</p></body></html>

代码含义如下:

  • <!DOCTYPE html> 告诉浏览器这是一个HTML5文档。

  • <html> 是HTML页面的根元素。

  • <head> 包含关于文档的元信息。

  • <title> 指定页面的标题(显示在浏览器的标题栏中)。

  • <body> 定义文档的正文,其中包含可见内容。

  • <h1> 定义一个大标题。

  • <p> 定义一个段落。

在Codepen中查看代码效果:

图片

HTML元素

HTML使用“元素”来构建内容结构。以下是一些常见的HTML元素:

图片

让我们看看一些实际的例子:

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>我的第一个网页</title>
</head><h1>我最喜欢的动物</h1><p>以下是我最喜欢的三种动物:</p><ol><li>猫</li><li>狗</li><li>昆</li></ol><p>了解更多关于<a href="https://www.baidu.com">动物</a>的信息。</p></html>

这段代码创建了一个标题、一个段落、一个动物的有序列表和一个指向百度的链接,以了解更多关于动物的信息。效果如下:

图片

网络浏览器就像是HTML的翻译。它们读取HTML代码并将其渲染成我们看到的视觉网页。不同的浏览器可能会稍微不同地渲染相同的HTML,这就是为什么要在多个浏览器上测试你

HTML标签、属性和元素

HTML由三个关键组件组成:

  1. 标签:这些是HTML的构建块。它们总是被包含在尖括号中,比如<p>代表段落。

  2. 属性:这些提供了关于元素的额外信息。它们总是在开始标签中指定。

  3. 元素:一个元素是从开始标签到结束标签的所有内容

如上述代码中提到的例子:

<a href="https://www.baidu.com" title="访问百度">动物</a>

在这个例子中:

  • <a>是标签(代表超链接)

  • hreftitle是属性

  • 整行是一个元素

基本HTML结构

下面是一个代码片段,展示你可能在这些编辑器之一中设置的基本HTML结构:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我惊人的网站</title><link rel="stylesheet" href="styles.css">
</head><body><header><h1>欢迎来到我惊人的网站</h1><nav><ul><li><a href="#home">首页</a></li><li><a href="#about">关于</a></li><li><a href="#contact">联系方式</a></li></ul></nav></header><main>        <section id="home"><h2>首页</h2><p>欢迎来到我的网站!随意探索。</p></section><!-- 更多部分将在这里 --></main><footer><p>&copy; 2023 我惊人的网站。保留所有权利。</p></footer><script src="script.js"></script>
</body></html>

这段代码为网站设置了一个基本结构,包括页头、导航菜单、主要内容区域和页脚。

<nav> 是 HTML5 引入的语义化标签,用于定义页面的导航部分。

图片

HTML基础标签

现在,让我们探索一些最常用的HTML标签。我会为每个标签提供示例和解释。

1. 标题

HTML提供了六级标题,从 <h1><h6>

<h1>这是一个主标题</h1>
<h2>这是一个次要标题</h2>
<h3>这是一个三级标题</h3>

这些标签不仅使文本变大,还帮助搜索引擎理解你的内容结构。把它们想象成书中的章节标题!

图片

2. 段落

标签用于定义段落。

<p>这是一个段落。它可以包含多个句子,甚至在你HTML代码中跨越多行,但在浏览器中会显示为单一的文本块。</p>

小贴士:总是使用 <p> 标签来定义段落,而不仅仅是用于间距。这有助于提高可访问性和SEO!效果:

图片

3. 链接

链接是使用 <a>(锚点)标签创建的。

<a href="https://www.example.com">点击这里访问Example.com</a>

href 属性指定了链接所指向的页面URL链接就像是网站中的门——它们使用户可以从一个页面导航到另一个页面!

效果:

图片

4. 图像

图像是通过 <img> 标签插入的。

<img src="cat.jpg" alt="一只可爱的小猫坐在窗台上">

src 属性指定了图像文件的路径,而 alt 提供了屏幕阅读器使用或图像加载失败时的替代文本。总是包含描述性的替代文本——这就像是给你们的图像一个声音!

图片

5. 列表

HTML支持有序(编号)列表和无序列表(项目符号)。

无序列表:

<ul>
<li>苹果</li>
<li>香蕉</li>
<li>樱桃</li>
</ul>

图片

有序列表:

<ol>
<li>起床</li>
<li>刷牙</li>
<li>吃早餐</li>
</ol>

列表非常适合组织信息。

图片

6. 强调和重要

使用 <em> 来强调(通常显示为斜体),使用 <strong> 来表示重要(通常显示为粗体)。

<p>我<em>真的</em>喜欢HTML。这对于网页开发是<strong>至关重要</strong>的!</p>

图片

7. 换行和水平线

有时你需要添加一个换行而不开始一个新的段落。这时 <br> 就派上用场了:

<p>玫瑰是红的,<br>紫罗兰是蓝的,<br>HTML很棒,<br>你也是!</p>

图片

要添加一条水平线,使用 <hr> 标签:

<p>玫瑰是红的,<br>紫罗兰是蓝的,<hr><br>HTML很棒,<br>你也是!</p>

<br> 想象成键盘上的软回车,而 <hr> 就像是在纸上画一条线来分隔部分。

图片

强制性结束标签

大多数HTML元素都需要一个开始标签和一个结束标签。然而,有些元素是自闭合的。这些元素通常不包含任何内容。下面是一个表格,列出了一些常见元素以及它们是否需要结束标签:

图片

HTML 属性

HTML 属性是用于调整 HTML 元素行为或显示的标记语言的一部分。它总是包含在元素的开始标签中,通常由一个名称和一个值组成。让我们看看一些实际的例子,以更好地理解属性是如何工作的:

1. href 属性
<a href="https://www.example.com">访问 Example.com</a>

在这个例子中,href 是属性。它告诉浏览器点击链接时应该去哪里。

2. src 属性
<img src="cute-puppy.jpg" alt="一只可爱的狗狗">

在这里,有两个属性:

  • src:指定图像文件的路径。

  • alt:如果图像无法显示,提供替代文本。

3. style 属性
<p style="color: blue; font-size: 16px;">这是一个蓝色的段落。</p>

图片

style 属性允许我们直接向元素添加 CSS。

HTML 全局属性

全局属性可以用于任何 HTML 元素。让我们看看一些最常见的内容:

属性描述示例
class为元素指定一个或多个类名<div class="header">
id为元素指定一个唯一的 ID<p id="intro">
style为元素指定一个内联 CSS 样式<p style="color:blue;">
title为元素指定额外信息<abbr title="世界卫生组织">WHO</abbr>

此时有以下例子:

<a href="https://www.example.com" target="_blank" title="访问 Example.com">点击我!</a>

在这个例子中,我们使用了三个属性:

  • href:指定链接去的页面的 URL。

  • target:指定在哪里打开链接的文档。

  • title:提供关于链接的额外信息。

通用属性

通用属性是可以用于大多数(但不是全部)HTML 元素的属性。它们不像全局属性那样通用,但仍然非常灵活。以下是一些例子:

属性描述示例
onclick指定当元素被点击时运行的脚本<button onclick="alert('你好!')">点击我</button>
tabindex指定元素的键盘导航顺序<input type="text" tabindex="1">
accesskey指定激活/聚焦元素的快捷键<a href="/" accesskey="h">首页</a>

图片

HTML - 块级和内联元素
块级元素

想象我们正在用积木建造一座房子,其中一些积木很大,独自占据了一整行。这些就像是HTML中的块级元素。它们从新的一行开始,并占据全部可用的宽度。

常见的块级元素:

<div>我是一个块级元素</div>
<p>我也是一个块级元素</p>
<h1>我也是一个标题,同时也是块级元素!</h1>

运行这段代码时,每个元素都会出现在新的一行上。

图片

下面是一些常见块级元素的表格:

图片

内联元素

现在,让我们想象一下那些可以并排放在同一行上的积木部件。这些就像是HTML中的内联元素。它们只占据必要的宽度,并且不会从新的一行开始。

这里有一个例子:

<span>我是一个内联元素</span>
<a href="#">我是一个链接,同时也是内联的</a>
<strong>我是加粗的,也是内联的!</strong>

这些元素都会出现在同一行上(如果有足够的空间)。

下面是一些常见内联元素的表格:

图片

图片

使用 <span> 标签分组

<span> 标签就像是一个小而透明的容器,你可以用来分组内联元素,甚至是在块级元素内的文本部分。

这里有一个例子:

<p>
我喜欢 <span style="color: blue;">蓝色</span> 和
<span style="color: green;">绿色</span> 颜色。
</p>

图片

在这个例子中,我们使用了 <span> 来将不同的颜色应用到段落中的特定单词。

记住,<div> 是用来分组块级元素(或创建块级分组)的,而 <span> 是用来分组内联元素或文本部分的。

Iframe:通往其他世界的窗口

Iframe,全称“inline frame”,是一个HTML元素,允许你在当前HTML文档中嵌入另一个HTML文档。它就像在网页上创建了一个小窗口,展示了互联网上其他地方的内容。

语法

Iframe的基本语法出奇地简单:

<iframe src="URL"></iframe>

在这里,src是一个属性,用于指定你想嵌入的页面的URL。

iframes的示例

让我们通过一些实际示例来更好地理解iframes。

1. 基础Iframe
<iframe src="http://www.bilibili.com" height="1000" width="800"></iframe>

这段代码将嵌入"url"的内容到你的网页中。

图片

我们设置了一个宽为800,高为1000显示文档为b站(也可以选择本地html文档)的内联框架。

如果我们把链接换成www.baidu.com, 就会受到策略限制,无法正常显示:

图片

这是因为百度使用了 X-Frame-Options 响应头来限制其在 iframe 中的嵌套。X-Frame-Options 是一种安全策略,可以由网站的服务器设置,用于控制页面是否允许在 iframe 中嵌套。当网站设置了 X-Frame-Options 为 DENYSAMEORIGIN,浏览器将不允许将该页面在 iframe 中加载,以防止点击劫持等安全问题。

除此之外iframe的使用有其他需要注意的地方,可以参考如下文章:

https://juejin.cn/post/7261808673035075643
表单:交互式网页的门户
HTML表单的功能

想象你在一个咖啡店里,你想点你最喜欢的拿铁。你需要告诉咖啡师你想要什么,对吧?HTML表单就像是这种对话的数字版本。它们允许用户输入信息并将其发送到网页服务器进行处理。

表单是网页上用户交互的支柱。它们用于:

  1. 收集用户数据(如订阅新闻通讯)

  2. 登录网站

  3. 搜索信息

  4. 进行在线购买

  5. 提交反馈或评论

没有表单,网页将是一个相当无聊的单向信息通道。表单使网页变得交互和动态!

创建表单

让我们创建一个基本的HTML表单

<form action="/submit-form" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required><label for="email">电子邮件:</label>
<input type="email" id="email" name="email" required><input type="submit" value="提交">
</form>

图片

让我们分解一下:

  1. <form> 标签是我们所有表单元素的容器。

  2. action="/submit-form" 告诉浏览器在表单提交时将数据发送到哪里。

  3. method="post" 指定如何发送数据(在这个例子中,数据以HTTP POST请求的形式发送)。

  4. <label> 标签为我们的输入字段提供描述。

  5. <input> 标签创建实际的输入字段。

  6. <input> 中的 type 属性指定输入的类型(文本、电子邮件等)。

  7. required 属性使字段成为必填项。

  8. 最后一个 <input>type="submit" 创建了一个提交按钮。

一个简单的搜索表单
<form action="/search" method="get">
<input type="text" name="query" placeholder="搜索...">
<input type="submit" value="搜索">
</form>

这个表单创建了一个简单的搜索框和一个提交按钮。当用户输入查询并点击“搜索”时,它会发送一个GET请求到“/search”,并将查询作为参数。

图片

一个联系表单
<form action="/search" method="get">
<input type="text" name="query" placeholder="搜索...">
<input type="submit" value="搜索">
</form>

这个表单包括一个文本区域,用于撰写较长的消息,非常适合联系页面!

图片

HTML表单元素

表单不仅仅只是文本输入。有一整套工具箱中的元素可以用来创建丰富、交互式的表单。让我们探索一些:

图片

每个元素都有自己独特的属性和用例。随着你在网页开发旅程中的进步,你将发现自己会在创造性的组合中使用这些元素来构建复杂且用户友好的表单。

HTML表单属性

属性就像是我们给表单元素的特殊指令。它们帮助控制表单的行为以及它与用户的交互。以下是一些重要的属性:

图片

当正确使用时,这些属性可以非常强大。例如,在包含敏感信息的表单上设置 autocomplete="off" 可以通过防止浏览器存储输入数据来增强安全性。

HTML表单示例代码

现在,让我们将所有内容放在一起,展示一个比较复杂的注册表单示例:

<form action="/register" method="post">
<fieldset>
<legend>个人信息</legend><label for="fullname">全名:</label>
<input type="text" id="fullname" name="fullname" required><label for="email">电子邮件:</label>
<input type="email" id="email" name="email" required><label for="birthdate">出生日期:</label>
<input type="date" id="birthdate" name="birthdate"><label for="gender">性别:</label>
<select id="gender" name="gender">
<option value="">选择...</option>
<option value="male">男性</option>
<option value="female">女性</option>
<option value="other">其他</option>
</select>
</fieldset><fieldset>
<legend>账户详情</legend><label for="username">用户名:</label>
<input type="text" id="username" name="username" required><label for="password">密码:</label>
<input type="password" id="password" name="password" required><label for="confirmpassword">确认密码:</label>
<input type="password" id="confirmpassword" name="confirmpassword" required>
</fieldset><fieldset>
<legend>偏好设置</legend><label>
<input type="checkbox" name="newsletter" value="yes"> 订阅新闻通讯
</label><p>喜欢的颜色:</p>
<label>
<input type="radio" name="color" value="red"> 红色
</label>
<label>
<input type="radio" name="color" value="blue"> 蓝色
</label>
<label>
<input type="radio" name="color" value="green"> 绿色
</label>
</fieldset><input type="submit" value="注册">
</form>

这个表单展示了我们讨论的各种表单元素和属性的使用。它被组织成三个字段集:个人信息、账户详情和偏好设置。每个字段集将相关的输入分组,使表单更加有序且易于理解。

图片

HTML表单是如何工作的?

现在我们已经创建了我们的表单,当我点击那个提交按钮时会发生如下过程:

  1. 用户输入:用户填写表单字段中的信息。

  2. 验证:如果我们设置了客户端验证(使用HTML5属性如 required 或JavaScript),浏览器会在继续之前检查输入是否有效。

  3. 提交:当用户点击提交按钮时,浏览器收集所有表单数据。

  4. 请求:浏览器创建一个HTTP请求(GET或POST,取决于 method 属性),并将其发送到 action 属性指定的URL。

  5. 服务器处理:服务器接收到请求并处理数据(这部分涉及到服务器端编程,超出了本HTML教程的范围)。

  6. 响应:服务器将响应发送回浏览器,这可能是新页面、重定向或成功/错误消息。

  7. 浏览器行为:浏览器根据响应采取行动,通常是通过加载新页面或更新当前页面。

相关文章:

Web基础:HTML快速入门

HTML基础语法 HTML&#xff08;超文本标记语言&#xff09; 是用于创建网页内容的 标记语言&#xff0c;通过定义页面的 结构和内容 来告诉浏览器如何呈现网页。 超文本&#xff08;Hypertext&#xff09; 是一种通过 链接&#xff08;Hyperlinks&#xff09; 将不同文本、图像…...

技术领域,有许多优秀的博客和网站

在技术领域&#xff0c;有许多优秀的博客和网站为开发者、工程师和技术爱好者提供了丰富的学习资源和行业动态。以下是一些常用的技术博客和网站&#xff0c;涵盖了编程、软件开发、数据科学、人工智能、网络安全等多个领域&#xff1a; 1. 综合技术博客 1.1 Medium 网址: ht…...

k8s概念及k8s集群部署(Centos7)

Centos7部署k8s集群 部署之前&#xff0c;先简单说下k8s是个啥&#xff1a; 一、k8s简介&#xff1a; k8s&#xff0c;全称&#xff1a;kubernetes&#xff0c;它可以看作是一个分布式系统支撑平台。k8s的作用&#xff1a; 1、故障自愈&#xff1a; k8s这个玩意可以监控容器…...

《DeepSeek-V3:动态温度调节算法,开启推理新境界!》

在人工智能领域不断探索的征程中&#xff0c;DeepSeek-V3以其卓越的创新技术&#xff0c;尤其是动态温度调节算法&#xff0c;成为了备受瞩目的焦点。这项算法犹如一把神奇的钥匙&#xff0c;巧妙地开启了推理速度与精度动态平衡的大门&#xff0c;为大语言模型的发展开辟了新的…...

Python从入门到精通1:FastAPI

引言 在现代 Web 开发中&#xff0c;API 是前后端分离架构的核心。FastAPI 凭借其高性能、简洁的语法和自动文档生成功能&#xff0c;成为 Python 开发者的首选框架。本文将从零开始&#xff0c;详细讲解 FastAPI 的核心概念、安装配置、路由设计、请求处理以及实际应用案例&a…...

fastapi+angular停车管理系统可跨域

说明&#xff1a; 我计划用fastapiangular做一款停车管理系统&#xff0c;支持跨域 1.设计mysql数据库表&#xff0c; 2.建表&#xff0c;添加测试数据&#xff0c;多表查询&#xff0c; 3.在fastapi写接口查询数据&#xff0c; 4.用postman测试&#xff0c; 5.在angular前端展…...

前端题目类型

HTMLCSS常见面试题 HTML标签有哪些行内元素 img、picture、span、input、textarea、select、label 说说你对元素语义化的理解 元素语义化就是用正确的元素做正确的事情。虽然理论上所有html元素都可通过css样式实现相同效果&#xff0c;但这样会使事情复杂化&#xff0c;所以需…...

openwrt路由系统------lua、uci的关系

1. Luci 的核心组成 (1) Lua 简介:Luci 的界面和逻辑几乎完全使用 Lua 脚本语言编写。Lua 是一种轻量级、高效的嵌入式脚本语言,适合在资源受限的路由器环境中运行。作用: 生成动态 Web 页面(与后端交互渲染 HTML)。处理用户提交的表单数据(如修改 Wi-Fi 密码)。调用系…...

Elastic:AI 会开始取代网络安全工作吗?

作者&#xff1a;来自 Elastic Joe DeFever 不会&#xff0c;但它正在从根本上改变这些工作。 生成式 AI (GenAI) 正迅速成为日常安全工作流程中的一个重要组成部分。那么&#xff0c;它是合作伙伴还是竞争对手&#xff1f; GenAI 技术在安全堆栈几乎每个方面的广泛应用&#…...

Linux安装升级docker

Linux 安装升级docker Linux 安装升级docker背景升级停止docker服务备份原docker数据目录移除旧版本docker安装docker ce恢复数据目录启动docker参考 安装找到docker官网找到docker文档删除旧版本docker配置docker yum源参考官网继续安装docker设置开机自启配置加速测试 Linux …...

【经验分享】Ubuntu20.04编译RK3568 AI模型报错问题(已解决)

【经验分享】Ubuntu20.04编译RK3568 AI模型报错问题&#xff08;已解决&#xff09; 前言问题现象问题分析解决方案总结 前言 这里使用的是Rockchip提供的rknn_model_zoo&#xff0c;https://github.com/airockchip/rknn_model_zoo/tree/main 此解决方案适用于Rockchip芯片在U…...

国产算力助力工业智能新范式

随着人工智能、智能制造以及边缘计算等技术趋势的发展&#xff0c;算力设备正逐渐从中心云向边缘机房乃至边缘现场下沉。在此背景下&#xff0c;以工控机为例的部署于各类边缘现场的算力设备市场&#xff0c;也正面临着新的变革。 根据IDC 2024研究报告显示&#xff1a;在能源制…...

学习笔记:利用OpenAI实现阅卷智能体

https://zhuanlan.zhihu.com/p/18047953492 ### 学习笔记&#xff1a;利用OpenAI实现阅卷智能体 #### 一、背景与需求 在各类考试中&#xff0c;选择题、判断题、填空题的阅卷相对简单&#xff0c;只需对比答案与作答是否一致。然而&#xff0c;简答题的阅卷较为复杂&#xff…...

第6届传智杯复赛第一场

A小红劈字符串 题目链接 题目链接&#xff1a;A-小红劈字符串&#xff08;B组&#xff09;_第6届传智杯复赛第一场&#xff08;补题&#xff09; (nowcoder.com) 题目描述 小红拿到了一个仅由小写字母组成的字符串&#xff0c;她希望将其分割成两个非空子串&#xff0c;使得第…...

CSDN博客:Markdown编辑语法教程总结教程(中)

❤个人主页&#xff1a;折枝寄北的博客 Markdown编辑语法教程总结 前言1. 列表1.1 无序列表1.2 有序列表1.3 待办事项列表1.4 自定义列表 2. 图片2.1 直接插入图片2.2 插入带尺寸的图片2.3 插入宽度确定&#xff0c;高度等比例的图片2.4 插入高度确定宽度等比例的图片2.5 插入居…...

Codeforces Round 258 (Div. 2) E. Devu and Flowers 生成函数

题目链接 题目大意 有 n n n ( 1 ≤ n ≤ 20 ) (1\leq n \leq 20) (1≤n≤20) 个花瓶&#xff0c;第 i i i 个花瓶里有 f i f_i fi​ ( 1 ≤ f i ≤ 1 0 12 ) (1\leq f_i \leq 10^{12}) (1≤fi​≤1012) 朵花。现在要选择 s s s ( 1 ≤ s ≤ 1 0 14 ) (1\leq s \leq 1…...

【高并发内存池】释放内存 + 申请和释放总结

高并发内存池 1. 释放内存1.1 thread cache1.2 central cache1.3 page cache 2. 申请和释放剩余补充 点赞&#x1f44d;&#x1f44d;收藏&#x1f31f;&#x1f31f;关注&#x1f496;&#x1f496; 你的支持是对我最大的鼓励&#xff0c;我们一起努力吧!&#x1f603;&#x…...

AutoGen学习笔记系列(九)Advanced - Selector Group Chat

这篇文章瞄的是AutoGen官方教学文档 Advanced 章节中的 Selector Group Chat 篇章&#xff0c;介绍了SelectorGroupChat对象如何从一个Team中选择其中一个Agent与LLM进行对话&#xff0c;并且在得到结果后进行二次规划&#xff0c;同时你也可以自定义选择函数。本质上还是对Tea…...

Stream特性(踩坑):惰性执行、不修改原始数据源

在日常开发中&#xff0c;Stream API 提供了一种高效且易于使用的工具集来处理集合数据。 本文主要讲解 Stream 的两个特性&#xff1a;惰性执行&#xff0c;不修改原始数据源。 为什么说这两个、而不讲下其他的特性呢&#xff1f;主要是因为在开发中如果忽略这两个特性的话&…...

springcloud sentinel教程

‌QPS&#xff08;Queries Per Second&#xff09;即每秒查询率 TPS&#xff0c;每秒处理的事务数目 PV&#xff08;page view&#xff09;即页面浏览量 UV 访问数&#xff08;Unique Visitor&#xff09;指独立访客访问数 一、初识Sentinel 什么是雪崩问题? 微服务之间相…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

Linux云原生安全:零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

LangChain知识库管理后端接口:数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

C++.OpenGL (20/64)混合(Blending)

混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...