HTML、CSS 和 JavaScript 常见用法及使用规范
一、HTML 深度剖析
1. 文档类型声明
HTML 文档开头的 <!DOCTYPE html> 声明告知浏览器当前文档使用的是 HTML5 标准。它是文档的重要元信息，能确保浏览器以标准模式渲染页面，避免怪异模式下的兼容性问题。
2. 元数据标签
<meta>标签：用途广泛，比如设置字符编码<meta charset="UTF-8">，保证页面能正确显示各种语言字符。还可用于设置页面描述<meta name="description" content="这是一个示例网页的描述">，利于搜索引擎优化。- 视口设置：
<meta name="viewport" content="width=device-width, initial-scale=1.0">可让页面在不同设备上正确缩放，实现响应式布局。
3. 超链接标签
<a>标签：基本用法是<a href="https://www.example.com">访问示例网站</a>。此外，还能创建邮件链接<a href="mailto:example@example.com">发送邮件</a>和下载链接<a href="example.pdf" download>下载 PDF 文件</a>。- 锚点链接：用于页面内跳转，先在目标位置设置
<a id="section1"></a>，然后在链接处使用<a href="#section1">跳转到第一节</a>。
4. 列表标签
- 无序列表：
<ul>标签，每个列表项用<li>包裹，如<ul><li>苹果</li><li>香蕉</li></ul>。 - 有序列表：
<ol>标签，同样用<li>表示列表项，浏览器会自动为其编号。 - 定义列表：由
<dl>包裹，包含<dt>（定义术语）和<dd>（术语定义），例如<dl><dt>HTML</dt><dd>超文本标记语言</dd></dl>。
5. 表单标签
<form>标签：用于收集用户输入，通过action属性指定表单数据提交的 URL，method属性指定提交方式（GET或POST）。- 输入字段：常见的有
<input type="text">（文本输入框）、<input type="password">（密码输入框）、<input type="radio">（单选框）、<input type="checkbox">（复选框）、<input type="submit">（提交按钮）等。 - 下拉列表：使用
<select>和<option>标签创建，如<select><option value="option1">选项 1</option></select>。 - 文本域：
<textarea>标签用于输入多行文本。
6. 多媒体标签
<img>标签：用于显示图片，除了src和alt属性，还可通过width和height属性设置图片尺寸。<video>标签：可嵌入视频，支持多种视频格式，如<video src="example.mp4" controls></video>，controls属性添加视频控制条。<audio>标签：用于播放音频，用法与<video>类似，如<audio src="example.mp3" controls></audio>。
7. 框架标签
<iframe>标签：可在页面中嵌入另一个网页，例如<iframe src="https://www.example.com" width="500" height="300"></iframe>。
8. HTML 实体
当需要显示特殊字符（如 <、>、& 等）时，可使用 HTML 实体，如 < 表示 <，> 表示 >，& 表示 &。
9. 表单元素及属性
表单 <form>
表单是 HTML 中用于收集用户输入数据的重要元素，以下是常见属性：
| 属性 | 描述 | 示例 |
|---|---|---|
action | 指定表单数据提交的 URL | <form action="submit.php"> |
method | 表单数据提交的方式，有 GET 和 POST 两种 | <form method="POST"> |
enctype | 当表单包含文件上传时，指定表单数据的编码类型，常见值有 application/x-www-form-urlencoded、multipart/form-data 等 | <form enctype="multipart/form-data"> |
除了基本的 action、method 和 enctype 属性外，还可以使用 novalidate 属性来禁用表单的默认验证。
<form action="submit.php" method="POST" enctype="multipart/form-data" novalidate><!-- 表单内容 -->
</form>文本框 <input type="text">
文本框用于接收用户输入的单行文本，常见属性如下：
| 属性 | 描述 | 示例 |
|---|---|---|
name | 表单数据提交时的名称 | <input type="text" name="username"> |
value | 文本框的初始值 | <input type="text" value="默认文本"> |
placeholder | 提示用户输入的文本，当文本框为空时显示 | <input type="text" placeholder="请输入用户名"> |
readonly | 设置文本框为只读，用户不能修改其内容 | <input type="text" readonly> |
disabled | 禁用文本框，用户不能与之交互，且提交表单时该字段数据不会被发送 | <input type="text" disabled> |
maxlength | 限制用户输入的最大字符数 | <input type="text" maxlength="20"> |
- 自动完成：
autocomplete属性可设置文本框是否启用自动完成功能，值可以是on或off。
<input type="text" name="email" autocomplete="off">- 输入模式：
inputmode属性可以指定输入的类型，如numeric表示只能输入数字。
<input type="text" name="phone" inputmode="numeric">密码框 <input type="password">
密码框用于输入密码，其属性与文本框类似，输入的内容会以星号或圆点显示。
<input type="password" name="password" placeholder="请输入密码">
按钮 <input type="button">、<button>
按钮可用于触发操作，常见属性如下：
| 属性 | 描述 | 示例 |
|---|---|---|
value | 按钮上显示的文本（<input type="button">） | <input type="button" value="点击我"> |
disabled | 禁用按钮，用户不能点击 | <button disabled>禁用按钮</button> |
onclick | 定义按钮被点击时执行的 JavaScript 代码 | <button onclick="alert('按钮被点击')">点击触发事件</button> |
除了使用 onclick 事件，还可以通过 disabled 属性动态控制按钮的可用性。
<button id="myButton" disabled>禁用按钮</button>
<script>const button = document.getElementById('myButton');// 模拟一段时间后启用按钮setTimeout(() => {button.disabled = false;}, 3000);
</script>复选框 <input type="checkbox">
复选框允许用户选择多个选项，常见属性如下：
| 属性 | 描述 | 示例 |
|---|---|---|
name | 表单数据提交时的名称 | <input type="checkbox" name="hobbies"> |
value | 复选框选中时提交的值 | <input type="checkbox" value="reading"> |
checked | 设置复选框默认选中 | <input type="checkbox" checked> |
单选框 <input type="radio">
单选框允许用户从一组选项中选择一个，同一组单选框需使用相同的 name 属性。
| 属性 | 描述 | 示例 |
|---|---|---|
name | 用于分组，同一组单选框使用相同名称 | <input type="radio" name="gender"> |
value | 单选框选中时提交的值 | <input type="radio" value="male"> |
checked | 设置单选框默认选中 | <input type="radio" checked> |
可以使用 JavaScript 来控制复选框和单选框的选中状态。
<input type="checkbox" id="check1"> 选项 1
<input type="checkbox" id="check2"> 选项 2
<button onclick="checkAll()">全选</button>
<script>function checkAll() {const checkboxes = document.querySelectorAll('input[type="checkbox"]');checkboxes.forEach(checkbox => {checkbox.checked = true;});}
</script>列表框 <select> 和 <option>
列表框用于提供一组选项供用户选择，常见属性如下：
| 属性 | 描述 | 示例 |
|---|---|---|
name | 表单数据提交时的名称 | <select name="city"> |
multiple | 允许用户选择多个选项 | <select multiple> |
size | 指定列表框中可见的选项数量 | <select size="3"> |
value | <option> 标签的属性，指定该选项被选中时提交的值 | <option value="beijing">北京</option> |
selected | 设置 <option> 默认选中 | <option selected>默认选项</option> |
10. 其他 HTML 元素和属性
表格 <table>
表格用于展示数据，包含 <tr>（行）、<th>（表头单元格）和 <td>（数据单元格）。
<table><tr><th>姓名</th><th>年龄</th></tr><tr><td>张三</td><td>25</td></tr>
</table>
图像 <img>
图像元素用于显示图片，常见属性如下：
| 属性 | 描述 | 示例 |
|---|---|---|
src | 图片的 URL 地址 | <img src="image.jpg"> |
alt | 图片无法显示时显示的替代文本 | <img alt="这是一张图片"> |
width 和 height | 设置图片的宽度和高度 | <img width="200" height="150"> |
视频 <video>
可以使用 preload 属性来控制视频的预加载策略，有 auto、metadata 和 none 三种值。
<video src="video.mp4" preload="metadata" controls></video>
音频 <audio>
可以使用 loop 属性让音频循环播放。
<audio src="audio.mp3" loop controls></audio>二、CSS 深入探究
1. 盒模型
盒模型由内容区（content）、内边距（padding）、边框（border）和外边距（margin）组成。可通过 width 和 height 属性设置内容区大小，padding、border 和 margin 属性分别控制内边距、边框和外边距。
.box {width: 200px;height: 200px;padding: 20px;border: 1px solid black;margin: 20px;
}
2. 浮动与清除浮动
- 浮动：使用
float属性（left或right）可让元素脱离正常文档流，实现多列布局。但浮动元素会导致父元素高度塌陷。 - 清除浮动：可使用
clear属性（left、right或both）清除浮动影响，也可使用 BFC（块级格式化上下文）来解决高度塌陷问题。
3. 定位
- 静态定位：默认值，元素按照正常文档流排列。
- 相对定位：
position: relative，元素相对于其正常位置进行偏移，不会脱离文档流。 - 绝对定位：
position: absolute，元素相对于最近的已定位祖先元素进行定位，会脱离文档流。 - 固定定位：
position: fixed，元素相对于浏览器窗口固定位置，常用于创建固定导航栏等。 - 粘性定位：
position: sticky，元素在滚动时固定在某个位置，直到滚动出特定区域。
4. 弹性布局（Flexbox）
弹性布局是一种一维布局模型，可轻松实现元素的水平和垂直对齐。
.container {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */
}
5. 网格布局（Grid）
网格布局是二维布局模型，可创建复杂的网格结构。
.grid-container {display: grid;grid-template-columns: 1fr 1fr 1fr; /* 三列布局 */grid-gap: 20px; /* 网格间距 */
}
6. 响应式设计
- 媒体查询：使用
@media规则根据不同的屏幕尺寸应用不同的样式。
@media (max-width: 768px) {/* 当屏幕宽度小于等于 768px 时应用的样式 */body {font-size: 14px;}
}
- 弹性单位：如
em、rem、vw、vh等，可根据父元素或视口大小动态调整元素尺寸。
7. 动画与过渡
- 过渡：使用
transition属性实现元素状态的平滑过渡，如颜色、大小等的变化。
.button {background-color: blue;transition: background-color 0.3s ease;
}
.button:hover {background-color: red;
}
- 动画：使用
@keyframes规则定义动画，然后通过animation属性应用动画。
@keyframes slide {from {transform: translateX(0);}to {transform: translateX(100px);}
}
.box {animation: slide 2s infinite;
}1. 旋转角度
使用 transform 属性的 rotate() 函数可以实现元素的旋转，单位可以是度（deg）、弧度（rad）、梯度（grad）或圈数（turn）。
.rotate-element {transform: rotate(45deg); /* 顺时针旋转 45 度 */
}
2. 缩放
使用 transform 属性的 scale() 函数可以实现元素的缩放，参数可以是一个值（等比例缩放）或两个值（分别指定水平和垂直方向的缩放比例）。
.scale-element {transform: scale(1.5); /* 等比例放大 1.5 倍 */
}
3. 倾斜
使用 transform 属性的 skew() 函数可以实现元素的倾斜，参数分别指定水平和垂直方向的倾斜角度。
.skew-element {transform: skew(20deg, 10deg); /* 水平倾斜 20 度，垂直倾斜 10 度 */
}
4. 平移
使用 transform 属性的 translate() 函数可以实现元素的平移，参数分别指定水平和垂直方向的平移距离。
.translate-element {transform: translate(50px, 20px); /* 水平向右平移 50px，垂直向下平移 20px */
}
5. 过渡效果
使用 transition 属性可以实现元素状态变化时的平滑过渡，常见属性如下：
| 属性 | 描述 | 示例 |
|---|---|---|
transition-property | 指定要过渡的 CSS 属性 | transition-property: width; |
transition-duration | 指定过渡的持续时间 | transition-duration: 0.5s; |
transition-timing-function | 指定过渡的时间曲线，如 ease、linear 等 | transition-timing-function: ease-in-out; |
transition-delay | 指定过渡的延迟时间 | transition-delay: 0.2s; |
.box {width: 100px;height: 100px;background-color: blue;transition: width 0.5s ease-in-out;
}
.box:hover {width: 200px;
}
6. 动画效果
使用 @keyframes 规则定义动画，然后通过 animation 属性应用动画。
@keyframes slide {from {transform: translateX(0);}to {transform: translateX(200px);}
}
.animated-element {animation: slide 2s infinite; /* 应用名为 slide 的动画，持续 2 秒，无限循环 */
}三、JavaScript 深度解读
1. 数据类型
- 基本数据类型：包括
Number、String、Boolean、Null、Undefined、Symbol。 - 引用数据类型：如
Object、Array、Function等。
2. 变量声明
var：旧的变量声明方式，存在变量提升和函数作用域问题。let：块级作用域变量声明，避免了变量提升带来的问题。const：声明常量，一旦赋值不能再重新赋值，但对于引用类型，其内部属性可以修改。
3. 函数
- 函数声明：
function add(a, b) { return a + b; } - 函数表达式：
const add = function(a, b) { return a + b; }; - 箭头函数：
const add = (a, b) => a + b;
4. 作用域
- 全局作用域：变量在整个脚本中都可访问。
- 函数作用域：变量只能在函数内部访问。
- 块级作用域：使用
let和const声明的变量在块级作用域内有效。
5. 面向对象编程
- 构造函数：用于创建对象实例，如
function Person(name, age) { this.name = name; this.age = age; } - 原型链：每个对象都有一个原型对象，通过原型链可以实现继承。
- 类和继承：ES6 引入了
class关键字，可使用extends实现类的继承。
class Animal {constructor(name) {this.name = name;}speak() {console.log(`${this.name} makes a noise.`);}
}
class Dog extends Animal {speak() {console.log(`${this.name} barks.`);}
}
6. 事件处理
- 事件绑定：可使用
addEventListener方法为元素添加事件监听器，支持多种事件类型，如click、mouseover、keydown等。
const button = document.getElementById('myButton');
button.addEventListener('click', function() {alert('Button clicked!');
});
- 事件冒泡和捕获：事件在 DOM 树中传播有冒泡和捕获两个阶段，可通过
addEventListener的第三个参数控制。
7. 异步编程
- 回调函数：是最基本的异步处理方式，但容易出现回调地狱问题。
function getData(callback) {setTimeout(() => {const data = { message: 'Hello' };callback(data);}, 1000);
}
getData((data) => {console.log(data.message);
});
- Promise：用于处理异步操作，避免回调地狱，有
pending、fulfilled和rejected三种状态。
const promise = new Promise((resolve, reject) => {setTimeout(() => {resolve('Success');}, 1000);
});
promise.then((result) => {console.log(result);
});
- async/await：是基于 Promise 的语法糖，使异步代码看起来更像同步代码。
async function fetchData() {const response = await fetch('https://api.example.com/data');const data = await response.json();return data;
}
fetchData().then((data) => {console.log(data);
});
8. 模块化
- ES6 模块：使用
import和export关键字实现模块的导入和导出。
// module.js
export const add = (a, b) => a + b;// main.js
import { add } from './module.js';
console.log(add(1, 2));
9. DOM 操作
JavaScript 可以通过 DOM（文档对象模型）操作 HTML 元素，常见方法如下：
| 方法 | 描述 | 示例 |
|---|---|---|
document.getElementById() | 根据元素的 ID 获取元素 | const element = document.getElementById('myElement'); |
document.getElementsByTagName() | 根据元素的标签名获取元素集合 | const elements = document.getElementsByTagName('p'); |
document.getElementsByClassName() | 根据元素的类名获取元素集合 | const elements = document.getElementsByClassName('myClass'); |
document.querySelector() | 根据 CSS 选择器获取第一个匹配的元素 | const element = document.querySelector('.myClass'); |
document.querySelectorAll() | 根据 CSS 选择器获取所有匹配的元素集合 | const elements = document.querySelectorAll('p'); |
element.innerHTML | 获取或设置元素的 HTML 内容 | element.innerHTML = '<p>新内容</p>'; |
element.style | 获取或设置元素的样式 | element.style.color = 'red'; |
10. 事件处理
JavaScript 可以监听 HTML 元素的各种事件，如点击、鼠标移动等。常见事件和绑定方法如下：
| 事件 | 描述 | 绑定方法 |
|---|---|---|
click | 元素被点击时触发 | element.addEventListener('click', function() { /* 处理代码 */ }); |
mouseover | 鼠标悬停在元素上时触发 | element.addEventListener('mouseover', function() { /* 处理代码 */ }); |
keydown | 按下键盘按键时触发 | document.addEventListener('keydown', function(event) { /* 处理代码 */ }); |
11. 表单验证
在用户提交表单之前，可以使用 JavaScript 对表单数据进行验证，确保数据的有效性。
<form id="myForm"><input type="text" id="username" required><input type="submit" value="提交">
</form>
<script>const form = document.getElementById('myForm');form.addEventListener('submit', function(event) {const username = document.getElementById('username').value;if (username.length < 3) {alert('用户名长度不能少于 3 个字符');event.preventDefault(); // 阻止表单提交}});
</script>
12. 异步编程
JavaScript 中的异步操作可以避免阻塞主线程，提高程序的性能。常见的异步编程方式有回调函数、Promise 和 async/await。
回调函数
function getData(callback) {setTimeout(() => {const data = { message: 'Hello' };callback(data);}, 1000);
}
getData((data) => {console.log(data.message);
});
Promise
const promise = new Promise((resolve, reject) => {setTimeout(() => {const success = true;if (success) {resolve('成功');} else {reject('失败');}}, 1000);
});
promise.then((result) => {console.log(result);
}).catch((error) => {console.error(error);
});
async/await
async function fetchData() {try {const response = await fetch('https://api.example.com/data');const data = await response.json();return data;} catch (error) {console.error(error);}
}
fetchData().then((data) => {console.log(data);
});13. 事件委托
事件委托是一种利用事件冒泡原理，将事件处理程序绑定到父元素上，从而处理子元素事件的技术。
<ul id="myList"><li>列表项 1</li><li>列表项 2</li>
</ul>
<script>const list = document.getElementById('myList');list.addEventListener('click', function(event) {if (event.target.tagName === 'LI') {console.log('点击了列表项：', event.target.textContent);}});
</script>
14. 本地存储
JavaScript 提供了 localStorage 和 sessionStorage 对象，用于在浏览器中存储数据。
// 存储数据
localStorage.setItem('username', 'John');
// 获取数据
const username = localStorage.getItem('username');
console.log(username);
// 删除数据
localStorage.removeItem('username');
15. 定时器
使用 setTimeout() 和 setInterval() 函数可以实现定时任务。
// 延迟 2 秒后执行函数
setTimeout(() => {console.log('2 秒后执行');
}, 2000);// 每隔 1 秒执行一次函数
const intervalId = setInterval(() => {console.log('每秒执行一次');
}, 1000);// 停止定时器
clearInterval(intervalId);
16. AJAX 请求
使用 XMLHttpRequest 或 fetch API 可以实现异步数据请求。
// 使用 fetch API
fetch('https://api.example.com/data').then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error));四、综合使用与最佳实践
1. 代码分离
将 HTML、CSS 和 JavaScript 代码分离到不同的文件中，提高代码的可维护性和复用性。
2. 命名规范
- HTML 类名和 ID 采用有意义的命名，如
header-nav、main-content。 - CSS 类名遵循 BEM（块、元素、修饰符）命名规范，如
.button--primary。 - JavaScript 变量和函数名使用驼峰命名法，如
userName、getUserInfo。
3. 注释与文档
添加必要的注释解释代码的功能和实现思路，特别是复杂的逻辑部分。同时，编写文档说明项目的整体架构和使用方法。
4. 性能优化
- HTML 中减少不必要的标签嵌套，压缩代码。
- CSS 避免使用内联样式，合并和压缩 CSS 文件。
- JavaScript 减少 DOM 操作，合理使用事件委托，压缩代码。
相关文章：
HTML、CSS 和 JavaScript 常见用法及使用规范
一、HTML 深度剖析 1. 文档类型声明 HTML 文档开头的 <!DOCTYPE html> 声明告知浏览器当前文档使用的是 HTML5 标准。它是文档的重要元信息，能确保浏览器以标准模式渲染页面，避免怪异模式下的兼容性问题。 2. 元数据标签 <meta> 标签&am…...
Elasticsearch 索引数据量激增的应对与优化：从原理到部署实践
Elasticsearch（ES）作为一款强大的分布式搜索和分析引擎，广泛应用于日志分析、全文搜索和实时数据处理等场景。然而，随着数据量激增，索引可能面临性能瓶颈，如写入变慢、查询延迟高或存储成本上升。如何有效应…...
CD27.【C++ Dev】类和对象 (18)友元和内部类
目录 1.友元 友元函数 几个特点 友元类 格式 代码示例 2.内部类(了解即可) 计算有内部类的类的大小 分析 注意:内部类不能直接定义 内部类是外部类的友元类 3.练习 承接CD21.【C Dev】类和对象(12) 流插入运算符的重载文章 1.友元 友元函数 在CD21.【C Dev】类和…...
QT安装详细步骤
下载 清华源 ： 清华源 1. 2. 3. 4....
Unity游戏多语言工具包
由于一开始的代码没有考虑多语言场景，导致代码中提示框和UI显示直接用了中文，最近开始提取代码的中文，提取起来太麻烦，所以拓展了之前的多语言包，降低了操作复杂度。最后把工具代码提取出来到单独项目里面，…...
实验三 I/O地址译码
一、实验目的 掌握I/O地址译码电路的工作原理。 二、实验电路 实验电路如图1所示，其中74LS74为D触发器，可直接使用实验台上数字电路实验区的D触发器，74LS138为地址译码器， Y0：280H～287H&…...
视觉语言导航（VLN）：连接语言、视觉与行动的桥梁
文章目录 1. 引言：什么是VLN及其重要性？2. VLN问题定义3. 核心挑战4. 基石：关键数据集与模拟器5. 评估指标6. 主要方法与技术演进6.1 前CLIP时代：奠定基础6.2 后CLIP时代：视觉与语言的统一 7. 最新进展与前沿趋势 (202…...
计算机网络中科大 - 第7章 网络安全（详细解析）-以及案例
目录 🛡️ 第8章：网络安全（Network Security）优化整合笔记📌 本章学习目标 一、网络安全概念二、加密技术（Encryption）1. 对称加密（Symmetric Key）2. 公钥加密࿰…...
2026《数据结构》考研复习笔记一（C++基础知识）
C基础知识复习 一、数据类型二、修饰符和运算符三、Lambda函数和表达式四、数学函数五、字符串六、结构体 一、数据类型 1.1基本类型 基本类型 描述 字节（位数） 范围 char 字符类型，存储ASCLL字符 1（8位） -128…...
XCTF-web（四）
unserialize3 需要反序列化一下：O:4:“xctf”:2:{s:4:“flag”;s:3:“111”;} php_rce 题目提示rce漏洞，测试一下：?s/Index/\think\app/invokefunction&functioncall_user_func_array&vars[0]phpinfo&vars[1][]1 flag࿱…...
在Vue项目中查询所有版本号为 1.1.9 的依赖包名 的具体方法，支持 npm/yarn/pnpm 等主流工具
以下是 在Vue项目中查询所有版本号为 1.1.9 的依赖包名 的具体方法，支持 npm/yarn/pnpm 等主流工具： 一、使用 npm 1. 直接过滤依赖树 npm ls --depth0 | grep "1.1.9"说明： npm ls --depth0：仅显示直接依赖…...
若依微服务版启动小程序后端
目录标题 本地启动，dev对应 nacos里的 xxx-xxx-dev配置文件 本地启动，dev对应 nacos里的 xxx-xxx-dev配置文件...
莒县第六实验小学：举行“阅读世界 丰盈自我”淘书会
4月16日，莒县第六实验小学校园内书香四溢、笑语盈盈，以“阅读世界 丰盈自我”为主题的第二十四届读书节之“淘书会”活动火热开启。全校师生齐聚一堂，以书会友、共享阅读之乐，为春日校园增添了一抹浓厚的文化气息。 活动在悠扬的诵…...
国产数据库与Oracle数据库事务差异分析
数据库中的ACID是事务的基本特性，而在Oracle等数据库迁移到国产数据库国产中，可能因为不同数据库事务处理机制的不同，在迁移后的业务逻辑处理上存在差异。本文简要介绍了事务的ACID属性、事务的隔离级别、回滚机制和超时机制，并总…...
C++学习记录：
今天我们来学习一门新的语言，也是C语言最著名的一个分支语言：C。 在C的学习中，我们主要学习的三大组成部分：语法、STL、数据结构。 C的介绍 C的历史可追溯至1979年，当时贝尔实验室的本贾尼斯特劳斯特卢普博士在面对复杂…...
等离子体浸没离子注入（PIII）
一、PIII 是什么？基本原理和工艺 想象一下，你有一块金属或者硅片（就是做芯片的那种材料），你想给它的表面“升级”，让它变得更硬、更耐磨，或者有其他特殊功能。怎么做呢？PIII 就像是用…...
LeetCode-16.最接近的三数之和 C++实现
一 题目描述 给你一个长度为 n 的整数数组 nums 和 一个目标值 target。请你从 nums 中选出三个整数，使它们的和与 target 最接近。 返回这三个数的和。 假定每组输入只存在恰好一个解 示例 1： 输入：nums [-1,2,1,-4], target 1 输出&…...
【机器学习】每日一讲-朴素贝叶斯公式
文章目录 **一、朴素贝叶斯公式详解****1. 贝叶斯定理基础****2. 从贝叶斯定理到分类任务****3. 特征独立性假设****4. 条件概率的估计** **二、在AI领域的作用****1. 文本分类与自然语言处理（NLP）****2. 推荐系统****3. 医疗与生物信息学****4. 实时监控…...
C 语言中的 volatile 关键字
1、概念 volatile 是 C/C 语言中的一个类型修饰符，用于告知编译器：该变量的值可能会在程序控制流之外被意外修改（如硬件寄存器、多线程共享变量或信号处理函数等），因此编译器不应对其进行激进的优化（如缓存…...
Python自学第1天：变量，打印，类型转化
突然想学Python了。经过Deepseek的推荐，下载了一个Python3.12安装。安装过程请自行搜索。 乖乖从最基础的学起来，废话不说了，上链接，呃，打错了，上知识点。 变量的定义 # 定义一个整数类型的变量 age 10#…...
探索鸿蒙应用开发：ArkTS应用执行入口揭秘
# 探索鸿蒙应用开发：ArkTS应用执行入口揭秘 在鸿蒙应用开发的领域中，ArkTS作为声明式开发语言，为开发者们带来了便捷与高效。对于刚接触鸿蒙开发的小伙伴来说，搞清楚ArkTS应用程序的执行入口是迈向成功开发的关键一步。今天&…...
idea中提高编译速度研究
探索过程： 有三种情况： 第一种： idea中用eclipse编译器编译springboot项目，然后debug启动Application报错找不到类。 有待继续研究。 第二种： idea中用javac编译器编译springboot项目，重新构建用时&a…...
静态链接part2
编译 语义分析 由语义分析器完成，这个步骤只是完成了对表达式的语法层面的分析，它并不了解这个语句是否真的有意义（例如在C语言中两个指针做乘法运算，这个语句在语法上是合法的，但是没有什么意义；还有同样…...
Vue3+Vite+TypeScript+Element Plus开发-17.Tags-组件构建
系列文档目录 Vue3ViteTypeScript安装 Element Plus安装与配置 主页设计与router配置 静态菜单设计 Pinia引入 Header响应式菜单缩展 Mockjs引用与Axios封装 登录设计 登录成功跳转主页 多用户动态加载菜单 Pinia持久化 动态路由 -动态增加路由 动态路由-动态删除…...
MATLAB R2023b如何切换到UTF-8编码，解决乱码问题
网上都是抄来抄去，很少有动脑子的，里面说的方法都差不多，但是在R2023b上怎么试都不管用，所以静下心来分析了下，我的 ...\MATLAB\R2016b\bin\lcdata.xml 里面除了注释几乎是空的，如果这样就能用为什么要加…...
3D语义地图中的全局路径规划！iPPD：基于3D语义地图的指令引导路径规划视觉语言导航
作者： Zehao Wang, Mingxiao Li, Minye Wu, Marie-Francine Moens, Tinne Tuytelaars 单位：鲁汶大学电气工程系，鲁汶大学计算机科学系 论文标题： Instruction-guided path planning with 3D semantic maps for vision-language …...
ShellScript脚本编程
语法基础 脚本结构 我们先从这个小demo程序来窥探一下我们shell脚本的程序结构 #!/bin/bash# 注释信息echo_str"hello world"test(){echo $echo_str }test echo_str 首先我们可以通过文本编辑器(在这里我们使用linux自带文本编辑神器vim)，新建一个文件…...
【HarmonyOS 5】敏感信息本地存储详解
【HarmonyOS 5】敏感信息本地存储详解 前言 鸿蒙其实自身已经通过多层次的安全机制，确保用户敏感信息本地存储安全。不过再此基础上，用户敏感信息一般三方应用还需要再进行加密存储。 本文章会从鸿蒙自身的安全机制进行展开，最后再说明本地…...
大厂面试：六大排序
前言 本篇博客集中了冒泡，选择，二分插入，快排，归并，堆排，六大排序算法 如果觉得对你有帮助，可以点点关注，点点赞，谢谢你！ 1.冒泡排序 //冒泡排序ÿ…...
.exe变成Windows服务
.exe变成Windows服务） 场景步骤 1: 安装 PyInstaller和win32serviceutil步骤 2: 使用 PyInstaller 创建 .exe 文件步骤 3: 检查生成的 .exe 文件步骤 4: 安装服务步骤 5: 启动服务步骤 6: 配置服务自动启动（可选）步骤 7: 检查服务状态完整示例…...