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

【前端】HTML 备忘清单（超级详细！）

news 来源：原创 2025/9/8 1:35:10

文章目录

- 入门
- - hello.html
  - 注释 Comment
  - 段落 Paragraph
  - HTML 链接
  - Image 标签
  - 文本格式标签
  - 标题
  - Section Divisions
  - 内部框架
  - HTML 中的 JavaScript
  - HTML 中的 CSS
- HTML5 标签
- - 页面
  - 标题导航
  - HTML5 Tags
  - HTML5 Video
  - HTML5 Audio
  - HTML5 Ruby
  - HTML5 kdi
  - HTML5 progress
  - HTML5 mark
- HTML 表格
- - Table 示例
  - HTML表格标签
  - \<td> 属性
  - \<th> 属性
- HTML 列表
- - 无序列表
  - 有序列表
  - 定义列表
- HTML 表单
- - Form 标签
  - Form 属性
  - Label 标签
  - Input 标签
  - Textarea 标签
  - Radio Buttons
  - Checkboxes
  - Select 标签
  - Fieldset 标签
  - 数据列表标签（HTML5）
  - 提交和重置按钮
- HTML input 标签
- - Input 属性
  - Input 类型
  - HTML5 中的新输入类型
  - Input CSS 选择器
- HTML meta 标签总结
- - Meta 标签
  - 常用 Meta
  - Open Graph
  - Twitter 卡片
  - Geotagging
- 标签语义化
- - 复杂布局1
  - 复杂布局2
  - 区域语义化
  - 页面头语义化
- 另见

此 HTML 快速参考备忘单以可读布局列出了 HTML 和 HTML5 标记。

入门

hello.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML5 Boilerplate</title>
</head>
<body><h1>Hello world, hello 备忘清单!</h1>
</body>
</html>

或者在 jsfiddle

注释 Comment

<!-- 这是代码注释 --><!--或者你可以注释掉一个大量的行。
-->

段落 Paragraph

<p>我来自快速参考</p>
<p>分享快速参考备忘单。</p>

请参阅：段落元素

HTML 链接

<a href="https://github.com/jaywcjlove/reference">Github
</a>
<a href="mailto:jack@abc.com">邮箱</a>
<a href="tel:+123456789">电话</a>
<a href="sms:+123456789&body=ha%20ha">短信
</a>

:-	:-
`href`	超链接指向的 URL
`rel`	链接 URL 的关系
`target`	链接目标位置：`_self`/`_blank`/`_top`/`_parent`

请参阅：<a> 属性

Image 标签

<img loading="lazy"src="https://xxx.png"alt="在此处描述图像"width="400" height="400">


	`src` (URL/路径)	必填，图片位置
	`alt`	描述图像
	`width`	图像宽度
	`height`	图像高度
	`loading`	浏览器应该如何加载

请参阅：图像嵌入元素

文本格式标签

<b>粗体文字</b>
<strong>这段文字很重要</strong>
<i>斜体文本</i>
<em>这段文字被强调</em>
<u>下划线文本</u>
<pre>预格式化文本</pre>
<code>源代码</code>
<del>删除的文字</del>
<mark>突出显示的文本 (HTML5)</mark>
<ins>插入的文本</ins>
<sup>使文本上标</sup>
<sub>使文本下标</sub>
<small>使文本变小</small>
<pre>预格式化文本</pre>
<kbd>Ctrl</kbd>
<blockquote>文本块引用</blockquote>

标题

<h1> 这是标题 1 </h1>
<h2> 这是标题 2 </h2>
<h3> 这是标题 3 </h3>
<h4> 这是标题 4 </h4>
<h5> 这是标题 5 </h5>
<h6> 这是标题 6 </h6>

您的页面上应该只有一个 h1

Section Divisions

:-	:-
`<div></div>`	页面内容的划分或部分
`<span></span>`	其他内容中的文本部分
`<p></p>`	文本段落
`<br>`	换行
`<hr>`	水平分割线

这些标签用于将页面划分为多个部分

内部框架

<iframeid="inlineFrameExample"title="Inline Frame Example"width="100%"height="200"frameborder="0"src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik">
</iframe>

预览

请参阅：内联框架元素

HTML 中的 JavaScript

<script type="text/javascript">let text = "Hello 快速参考";alert(text);
</script>

外部 JavaScript

<body>...<script src="app.js"></script>
</body>

HTML 中的 CSS

<style type="text/css">h1 {color: purple;}
</style>

外部样式表

<head>...<link rel="stylesheet" href="style.css"/>
</head>

HTML5 标签

页面

<body><header><nav>...</nav></header><main><h1>快速参考</h1></main><footer><p>©2023 快速参考</p></footer>
</body>

标题导航

<header><nav><ul><li><a href="#">编辑页面</a></li><li><a href="#">Twitter</a></li><li><a href="#">Facebook</a></li></ul></nav>
</header>

HTML5 Tags

:-	:-
article	独立的内容
aside	次要内容
audio	嵌入声音或音频流
bdi	双向隔离元件
canvas	通过JavaScript绘制图形
data	机器可读内容
datalist	一组预定义选项
details	其他信息
dialog	对话框或子窗口
embed	嵌入外部应用程序
figcaption	图形的标题或图例
figure	插图
footer	页脚或最不重要的
header	刊头或重要信息
main	文件的主要内容
mark	突出显示的文本
meter	已知范围内的标量值
nav	导航链接的一部分
output	计算的结果
picture	用于多个图像源的容器
progress	任务的完成进度
rp	提供回退括号
rt	定义字符的发音
ruby	表示ruby注释
section	一系列相关内容中的组
source	媒体元素的资源
summary	元素的摘要
template	定义HTML片段
time	时间或日期
track	媒体元素的字幕信息
video	嵌入视频
wbr	换行机会

HTML5 Video

<video controls="" width="100%"><source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">很抱歉，您的浏览器不支持嵌入式视频。
</video>

预览

很抱歉，您的浏览器不支持嵌入式视频。

HTML5 Audio

<audiocontrolssrc="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">您的浏览器不支持音频元素。
</audio>

预览

您的浏览器不支持音频元素。

HTML5 Ruby

<ruby>汉 <rp>(</rp><rt>hàn</rt><rp>)</rp>字 <rp>(</rp><rt>zì</rt><rp>)</rp>拼 <rp>(</rp><rt>pīn</rt><rp>)</rp>音 <rp>(</rp><rt>yīn</rt><rp>)</rp>
</ruby>

↓ 预览

汉 (hàn) 字 (zì) 拼 (pīn) 音 (yīn)

HTML5 kdi

<ul><li>User <bdi>hrefs</bdi>: 60 points</li><li>User <bdi>jdoe</bdi>: 80 points</li><li>User <bdi>إيان</bdi>: 90 points</li>
</ul>

预览

User hrefs: 60 points
User jdoe: 80 points
User إيان: 90 points

HTML5 progress

<progress value="50" max="100"></progress>

HTML5 mark

<p>我爱<mark>备忘清单</mark></p>

我爱备忘清单

HTML 表格

Table 示例

<table><thead><tr><td>name</td><td>age</td></tr></thead><tbody><tr><td>Roberta</td><td>39</td></tr><tr><td>Oliver</td><td>25</td></tr></tbody>
</table>

HTML表格标签

标签	说明
<table>	定义表格
<th>	定义表格中的标题单元格
<tr>	定义表中的行
<td>	定义表格中的单元格
<caption>	定义表格标题
<colgroup>	定义一组列
<col>	定义表中的列
<thead>	对标题内容进行分组
<tbody>	将正文内容分组
<tfoot>	对页脚内容进行分组

<td> 属性

属性	说明
`colspan`	单元格应跨越的列数
`headers`	单元格与一个或多个标题单元格相关
`rowspan`	单元格应跨越的行数

请参阅：td#属性

<th> 属性

属性	说明
`colspan`	单元格应跨越的列数
`headers`	单元格与一个或多个标题单元格相关
`rowspan`	单元格应跨越的行数
`abbr`	单元格内容的描述
scope	表头元素(在<th>中定义)关联的单元格

请参阅：th#属性

HTML 列表

无序列表

<ul><li>I'm an item</li><li>I'm another item</li><li>I'm another item</li>
</ul>

请参阅：无序列表元素

有序列表

<ol><li>I'm the first item</li><li>I'm the second item</li><li>I'm the third item</li>
</ol>

请参阅：有序列表元素

定义列表

<dl><dt>A Term</dt><dd>Definition of a term</dd><dt>Another Term</dt><dd>Definition of another term</dd>
</dl>

请参阅：描述列表元素

HTML 表单

Form 标签

<form method="POST" action="api/login"><label for="mail">邮箱: </label><input type="email" id="mail" name="mail"><br/><label for="pw">密码:</label><input type="password" id="pw" name="pw"><br/><input type="submit" value="登录"><br/><input type="checkbox" id="ck" name="ck"><label for="ck">记住我</label>
</form>

预览

邮箱:
密码:

记住我

HTML <form> 元素用于收集信息并将其发送到外部源。

Form 属性

属性	说明
`name`	脚本形式的名称
`action`	表单脚本的URL
`method`	HTTP方法，`POST`/`GET` (默认)
`enctype`	介质类型，请参见enctype
`onsubmit`	提交表单时运行
`onreset`	在窗体重置时运行

Label 标签

<!-- 嵌套标签 -->
<label>Click me 
<input type="text" id="user" name="name"/>
</label>

<!-- 'for' 属性 -->
<label for="user">Click me</label>
<input id="user" type="text" name="name"/>

for在标签中引用输入的id属性

Input 标签

<label for="Name">Name:</label>
<input type="text" name="Name" id="">

预览

Username:

请参阅：HTML输入标记

Textarea 标签

<textarea rows="2" cols="30" name="address" id="address"></textarea>

预览

Textarea 是一个多行文本输入控件

Radio Buttons

<input type="radio" name="gender" id="m">
<label for="m">Male</label>
<input type="radio" name="gender" id="f">
<label for="f">Female</label>

预览

Male Female

单选按钮用于让用户只选择一个

Checkboxes

<input type="checkbox" name="s" id="soc">
<label for="soc">Soccer</label>
<input type="checkbox" name="s" id="bas">
<label for="bas">Baseball</label>

预览

Soccer Baseball

复选框允许用户选择一个或多个

Select 标签

<label for="city">City:</label>
<select name="city" id="city"><option value="1">Sydney</option><option value="2">Melbourne</option><option value="3">Cromwell</option>
</select>

预览

City: Sydney Melbourne Cromwell

选择框是选项的下拉列表

Fieldset 标签

<fieldset><legend>Your favorite monster</legend><input type="radio" id="kra" name="m"><label for="kraken">Kraken</label><br/><input type="radio" id="sas" name="m"><label for="sas">Sasquatch</label>
</fieldset>

预览

Your favorite monster Kraken
Sasquatch

数据列表标签（HTML5）

<label for="b">Choose a browser: </label>
<input list="list" id="b" name="browser"/>
<datalist id="list"><option value="Chrome"><option value="Firefox"><option value="Internet Explorer"><option value="Opera"><option value="Safari"><option value="Microsoft Edge">
</datalist>

预览

Choose a browser:

提交和重置按钮

<form action="register.php" method="post"><label for="foo">Name:</label><input type="text" name="name" id="foo"><input type="submit" value="提交"><input type="reset" value="重置">
</form>

预览

Name:

将数据提交到服务器 重置为默认值

HTML input 标签

Input 属性

输入标记是一个空元素，用于标识要从用户处获取的特定类型的字段信息。

<input type="text" name="?" value="?" minlength="6"  required />

:-	:-
`type="…"`	正在输入的数据类型
`value="…"`	默认值
`name="…"`	用于在 HTTP 请求中描述此数据
`id="…"`	其他 HTML 元素的唯一标识符
`readonly`	停止用户修改
`disabled`	停止任何交互
`checked`	单选或复选框是否选中
`required`	是强制性的，参阅必填
`placeholder="…"`	添加临时，请参阅::placeholder
`autocomplete="off"`	禁用自动完成
`autocapitalize="none"`	禁用自动大写
`inputmode="…"`	显示特定键盘，请参阅inputmode
`list="…"`	关联的datalist的id
`maxlength="…"`	最大字符数
`minlength="…"`	最小字符数
`min="…"`	范围和编号上的最小数值
`max="…"`	范围和编号上的最大数值
`step="…"`	数字如何在范围和数字中递增
`pattern="…"`	指定一个正则表达式，请参阅pattern
`autofocus`	集中精力
`spellcheck`	执行拼写检查
`multiple`	是否允许多个值
`accept=""`	file 中需要文件类型上载控件

请参阅：<input>元素的属性

Input 类型


`type="checkbox"`
`type="radio"`
`type="file"`
`type="hidden"`
`type="text"`
`type="password"`
`type="image"`
`type="reset"`
`type="button"`
`type="submit"`

HTML5 中的新输入类型


`type="color"`
`type="date"`
`type="time"`
`type="month"`
`type="datetime-local"`
`type="week"`
`type="email"`
`type="tel"`
`type="url"`
`type="number"`
`type="search"`
`type="range"`

Input CSS 选择器


`input:focus`	当键盘聚焦时

HTML meta 标签总结

Meta 标签

meta 标记描述 HTML 文档中的元数据。它解释了关于 HTML 的其他材料。

<meta charset="utf-8">

<!-- 标题 -->
<title>···</title>
<meta property="og:title"  content="···">
<meta name="twitter:title" content="···">

<!-- url -->
<link rel="canonical"       href="https://···">
<meta property="og:url"  content="https://···">
<meta name="twitter:url" content="https://···">

<!-- 描述 -->
<meta name="description"         content="网页描述···">
<meta property="og:description"  content="···">
<meta name="twitter:description" content="···">

<!-- image -->
<meta property="og:image"  content="https://···">
<meta name="twitter:image" content="https://···">

<!-- ua -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<!-- viewport -->
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=1024">

<!-- 重定向 -->
<meta http-equiv="refresh" content="5;url=http://example.com/">
<meta name="robots" content="index,follow">
<meta name="generator" content="网站生成工具">
<meta name="csrf-token" content="token值">

常用 Meta

<meta name="description" content="网页描述···">
<meta name="keywords" content="关键词1,关键词2,关键词3">
<meta name="author" content="作者名">

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.png" type="image/png">
<link rel="icon" href="favicon.jpg" type="image/jpeg">

Open Graph

<meta property="og:type" content="website">
<meta property="og:locale" content="en_CA">
<meta property="og:title" content="HTML cheatsheet">
<meta property="og:url" content="https://jaywcjlove.github.io/">
<meta property="og:image" content="https://xxx.com/image.jpg">
<meta property="og:site_name" content="Name of your website">
<meta property="og:description" content="Description of this page">

Facebook、Instagram、Pinterest、LinkedIn 等使用。

Twitter 卡片

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@QuickRef_ME">
<meta name="twitter:title" content="HTML cheatsheet">
<meta name="twitter:url" content="https://jaywcjlove.github.io/">
<meta name="twitter:description" content="Description of this page">
<meta name="twitter:image" content="https://xxx.com/image.jpg">

请参阅：Twitter 卡片文档

Geotagging

<meta name="ICBM" content="45.416667,-75.7">
<meta name="geo.position" content="45.416667;-75.7">
<meta name="geo.region" content="ca-on">
<meta name="geo.placename" content="Ottawa">

请参阅：Geotagging

标签语义化

复杂布局1

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ <header>                                ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ <nav>                                   ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ <section>                               ┆
┆╭┈┈┈┈┈┈┈┈╮╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮┆
┆┆<aside> ┆┆ <main>                      ┆┆
┆┆        ┆┆╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮┆┆
┆┆        ┆┆┆  <article>    ┆ ┆ <aside> ┆┆┆
┆┆        ┆┆┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆         ┆┆┆
┆┆        ┆┆┆ ┆ <header>  ┆ ┆ ┆         ┆┆┆
┆┆        ┆┆┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ┆         ┆┆┆
┆┆        ┆┆┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆         ┆┆┆
┆┆        ┆┆┆ ┆ <article> ┆ ┆ ┆         ┆┆┆
┆┆        ┆┆┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ┆         ┆┆┆
┆┆        ┆┆┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ┆         ┆┆┆
┆┆        ┆┆┆ ┆ <footer>  ┆ ┆ ┆         ┆┆┆
┆┆        ┆┆┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ┆         ┆┆┆
┆┆        ┆┆╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯┆┆
┆╰┈┈┈┈┈┈┈┈╯╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ <footer>                                ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

复杂布局2

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆  <header>                           ┆
┆  ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮  ┆
┆  ┆  <nav>                        ┆  ┆
┆  ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯  ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ 
┆  <main>                             ┆ 
┆ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈╮  ┆ 
┆ ┆  <article>       ┆ ┆  <aside>  ┆  ┆ 
┆ ┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮    ┆ ┆           ┆  ┆ 
┆ ┆ ┆ <header>  ┆    ┆ ┆           ┆  ┆ 
┆ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯    ┆ ┆           ┆  ┆ 
┆ ┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮    ┆ ┆           ┆  ┆ 
┆ ┆ ┆ <section> ┆    ┆ ┆           ┆  ┆ 
┆ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯    ┆ ┆           ┆  ┆ 
┆ ┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮    ┆ ┆           ┆  ┆ 
┆ ┆ ┆ <footer>  ┆    ┆ ┆           ┆  ┆ 
┆ ┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯    ┆ ┆           ┆  ┆ 
┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈╯  ┆ 
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ 
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆  <footer>                           ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

区域语义化

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈╮
┆  <main>          ┆ ┆  <aside>  ┆
┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮    ┆ ┆           ┆
┆ ┆ <header>  ┆    ┆ ┆           ┆
┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯    ┆ ┆           ┆
┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮    ┆ ┆           ┆
┆ ┆ <section> ┆    ┆ ┆           ┆
┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯    ┆ ┆           ┆
┆ ╭┈┈┈┈┈┈┈┈┈┈┈╮    ┆ ┆           ┆
┆ ┆ <footer>  ┆    ┆ ┆           ┆
┆ ╰┈┈┈┈┈┈┈┈┈┈┈╯    ┆ ┆           ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈╯

页面头语义化

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆  <header>                           ┆
┆  ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮  ┆
┆  ┆  <section>                    ┆  ┆
┆  ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯  ┆
┆  ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮  ┆
┆  ┆  <nav>            ┆ ┆ <aside> ┆  ┆
┆  ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯  ┆
┆  ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮  ┆
┆  ┆  <footer>                     ┆  ┆
┆  ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯  ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

另见

HTML 4.01 Specification (w3.org)
HTML Tutorial (jaywcjlove.github.io)
Emmet 备忘清单，提升 HTML 和 CSS 代码编写的工具包 (jaywcjlove.github.io)

【前端】HTML 备忘清单（超级详细！）

文章目录入门hello.html注释 Comment段落 ParagraphHTML 链接Image 标签文本格式标签标题Section Divisions内部框架HTML 中的 JavaScriptHTML 中的 CSS HTML5 标签页面标题导航HTML5 TagsHTML5 VideoHTML5 AudioHTML5 RubyHTML5 kdiHTML5 progressHTML5 mark HTML 表格Table …...

编程日记 2025/9/8 1:35:10

React 中 useState 的基础使用

概念：useState 是一个React Hook（函数），它允许我们向组件添加状态变量，从而影响组件的渲染结果。本质：和普通JS变量不同的是，状态变量一旦发生变化，组件的视图UI也会跟着变化&…...

编程日记 2025/9/4 11:25:44

蓝桥杯单片机组第十二届省赛第二批次

前言第十二届省赛涉及知识点：NE555频率数据读取，NE555频率转换周期，PCF8591同时测量光敏电阻和电位器的电压、按键长短按判断。本试题涉及模块较少，题目不难，基本上准备充分的都能完整的实现每一个功能，并…...

编程日记 2025/9/8 1:32:20

React Native 原理

React Native 是一个跨平台移动应用开发框架，它允许开发者使用 JavaScript 和 React 来开发 iOS 和 Android 原生应用。React Native 的核心原理是通过桥接（Bridge） 技术，使用 JavaScript 来控制原生组件，并将应用逻辑…...

编程日记 2025/8/21 19:38:14

C++简易贪食蛇项目

一.案例介绍二.制作思路三.墙模块 #include "wall.h" //初始化墙 void initWall() { for (int i 0; i < HEIGHT; i) { for (int j 0; j < WIDTH;j) { if (i 0 || j 0 || i HEIGHT - 1 || j WIDTH - 1) …...

编程日记 2025/9/7 5:47:36

C++蓝桥杯基础篇（七）

片头嗨~小伙伴们，大家好！今天我们来一起学习蓝桥杯基础篇（七），学习相关字符串的知识，准备好了吗？咱们开始咯！ 一、字符与整数的联系——ASCII码每个常用字符都对应一个-128~127的…...

编程日记 2025/9/2 17:39:37

Sass基础

目录什么是sass? Sass的安装 Sass的编译 Sass的语法： Sass的基本使用: 一、Sass变量： 二、嵌套语法： 三、import的使用： 四、mixin混入和include: 五、extend: 六、注释七、if和if: 八、for: 总结： 什么是sas…...

编程日记 2025/9/2 4:51:48

Linux文档编辑相关命令详解

Linux文档编辑相关命令 1. grep grep (global regular expression) 命令用于查找文件里符合条件的字符串或正则表达式。 1.1 语法 grep [options] pattern [files] 1.2 常用选项 -i：忽略大小写进行匹配。-v：反向查找，只打印不匹配的行。-…...

编程日记 2025/9/5 18:50:44

QT实现简约美观的动画Checkbox

*最终效果: * 一共三个文件: main.cpp , FancyCheckbox.h , FancyCheckbox.cpp main.cpp #include <QApplication> #include "FancyCheckbox.h" #include <QGridLayout> int main(int argc, char *argv[]) {QApplication a(argc, argv);QWidget* w new…...

编程日记 2025/9/7 8:07:30

每日学习Java之一万个为什么？[MySQL面试篇]

分析SQL语句执行流程中遇到的问题前言1 MySQL是怎么在一台服务器上启动的2 MySQL主库和从库是同时启动保持Alive的吗？3 如果不是主从怎么在启动的时候保证数据一致性4 ACID原则在MySQL上的体现5 数据在MySQL是通过什么DTO实现的6 客户端怎么与MySQL Server建立连接…...

编程日记 2025/9/2 3:56:53

git笔记

定义：分布式版本控制工具，免费开源的，快速高效的处理从小到大的项目，git占地面积小，性能快，有廉价的本地库安装：官网最新版全部点下一步就行版本控制工具：使用中央服务器&#…...

编程日记 2025/9/1 3:34:44

Full GC 排查

在 Java 中，Full GC（完全垃圾回收）会对整个堆（包括年轻代和老年代，甚至可能包括永久代/元空间）进行垃圾回收，通常会导致较长的停顿（STW，Stop-The-World）。如果…...

编程日记 2025/9/4 17:45:21

VS2022远程调试Ubuntu中的C++程序

前言最近想基于星火大模型的SDK开发第一些应用。但是，发现星火的SDK当中Linux版本的比较丰富，Windows 版本支持的比较少。但是，从调试的IDE而言，Visual Studio又是最方便的。所以，考虑采用Visual Studio Ubuntu的形式…...

编程日记 2025/9/7 13:19:42

Flutter 学习之旅之 flutter 使用 flutter_screenutil 简单进行屏幕适配

Flutter 学习之旅之 flutter 使用 flutter_screenutil 简单进行屏幕适配目录 Flutter 学习之旅之 flutter 使用 flutter_screenutil 简单进行屏幕适配一、简单介绍二、简单介绍 flutter_screenutil 三、安装 carousel_slider 四、简单案例实现五、关键代码六、补…...

编程日记 2025/9/3 17:59:52

【华为OD机考】华为OD笔试真题解析(16)--微服务的集成测试

题目描述现在有n个容器服务，服务的启动可能有一定的依赖性（有些服务启动没有依赖），其次，服务自身启动加载会消耗一些时间。给你一个 n n n \times n nn的二维矩阵useTime，其中useTime[i][i]10表示服务…...

编程日记 2025/9/6 4:14:21

NCCL AI 分布式训练集合通讯库技术基本原理

目录文章目录目录AI 分布式训练NCCL 的简介NCCL 的核心功能NCCL 的基本工作流程NCCL 的集合通信操作方式NCCL 的 API 编程示例 AI 分布式训练在一个最初的 AI 模型训练场景中，由于模型自身的程序体积、输入的参数量以及样本的数据量都比较有限，一张 …...

编程日记 2025/9/8 1:12:31

算法-回溯篇01-组合

组合力扣题目链接题目描述给定两个整数 n 和 k，返回范围 [1, n] 中所有可能的 k 个数的组合。你可以按任何顺序返回答案。解题思路刚开始做回溯的题目，关于回溯的相关知识推荐大家去看代码随想录的视频。做了几道题，感觉回溯题…...

编程日记 2025/9/4 1:36:03

泵吸式激光可燃气体监测仪：快速精准守护燃气管网安全

在城市化进程加速的今天，燃气泄漏、地下管网老化等问题时刻威胁着城市安全。如何实现精准、高效的可燃气体监测，守护“城市生命线”，成为新型基础设施建设的核心课题。泵吸式激光可燃气体监测仪，以创新科技赋能安全监测&#xff0…...

编程日记 2025/9/7 15:49:50

Lumoz Chain正式上线：AI 时代的新算力破局者

新的叙事和技术突破永远是推动行业前行的核心动力。当下，AI Agent无疑是最炙手可热的赛道之一。当加密世界将目光投向AI领域时，大多数项目仍停留在以AI为工具或应用场景的层面，试图通过集成AI模型或优化链上功能来吸引用户。然而&#xff0…...

编程日记 2025/9/4 1:36:05

算法之排序算法

排序算法 ♥常见排序算法知识体系详解♥ | Java 全栈知识体系算法 - 排序 | CS-Notes 面试笔记十大经典排序算法总结 | JavaGuide...

编程日记 2025/8/30 8:51:51

Java面试第七山！《MySQL索引》

一、索引的本质与作用索引是帮助MySQL高效获取数据的数据结构，类似于书籍的目录。它通过减少磁盘I/O次数（即减少数据扫描量）来加速查询，尤其在百万级数据场景下，索引可将查询效率提升数十倍。核心作用：…...

编程日记 2025/9/8 1:32:20

基于 Rust 与 GBT32960 规范的编解码层

根据架构设计，实现编解码层的代码设计 Cargo.toml 加入二进制序列化支持 # 序列化支持 ... bincode "1.3" # 添加二进制序列化支持 bytes-utils "0.1" # 添加字节处理工具开始编码错误处理（error.rs&#x…...

编程日记 2025/9/8 1:33:39

二、Redis 安装与基本配置：全平台安装指南服务器配置详解

Redis 安装与基本配置：全平台安装指南 & 服务器配置详解 Redis 作为高性能的内存数据库，其安装和配置是使用 Redis 的第一步。本篇文章将全面介绍 Redis 的安装方式，覆盖 Windows、Linux、Docker 环境，并详细讲解 Redis 的基础配置，包括持久化、日志、端口设置等。此…...

编程日记 2025/9/8 1:33:40

⭐算法OJ⭐矩阵的相关操作【动态规划 + 组合数学】（C++ 实现）Unique Paths 系列

文章目录 62. Unique Paths动态规划思路实现代码复杂度分析组合数学思路实现代码复杂度分析 63. Unique Paths II动态规划定义状态状态转移方程初始化复杂度分析优化空间复杂度状态转移方程 62. Unique Paths There is a robot on an m x n grid. The robot is initially lo…...

编程日记 2025/9/4 0:12:52

基于 Elasticsearch 和 Milvus 的 RAG 运维知识库的架构设计和部署落地实现指南

最近在整理一些业务场景的架构设计和部署落地实现指南先放一个【基于RAG的运维知识库 (ElasticSearch + Milvus) 的详细实现指南】，其中包含了详尽的技术实现细节、可运行的示例代码、原理分析、优缺点分析和应用场景分析。架构描述：基于RAG的运维知识库 (ElasticSearch…...

编程日记 2025/8/31 20:38:33

山西青年杂志山西青年杂志社山西青年编辑部2025年第3期目录

青年争鸣教师发展中心行动转向的价值意蕴分析框架研究与启示于宝证;李军红;郑钰莹;何易雯; 产教融合视角下职业本科工商管理专业人才培养模式探析杜芯铭; 青年教育研究教育数字化背景下高职院校的课堂教学研究张晨; 统筹职业教育、高等教育、继续教育协同…...

编程日记 2025/9/5 18:44:13

使用Truffle、Ganache、MetaMask、Vue+Web3完成的一个简单区块链项目

文章目录概要初始化Truffle项目创建编写合约编译合约配置Ganache修改truffle-config.js文件编写迁移文件部署合约使用Truffle 控制台使用MetaMask和VueWeb3与链交互概要使用Truffle、Ganache、MetaMask、VueWeb3完成的一个简单区块链项目。初始化Truffle项目安装好truf…...

编程日记 2025/9/5 19:35:23

【GenBI优化】提升text2sql准确率：建议使用推理大模型，增加重试

引言 Text-to-SQL（文本转 SQL）是自然语言处理（NLP）领域的一项重要任务，旨在将自然语言问题自动转换为可在数据库上执行的 SQL 查询语句。这项技术在智能助手、数据分析工具、商业智能（BI）平台等领域具有广泛的应用前景，能够极大地降低数据查询和分析的门槛，让非技术用…...

编程日记 2025/9/5 18:58:00

LLVM - 编译器前端 - 学习将源文件转换为抽象语法树（二）

一：处理消息在一个庞大的软件（比如编译器）中，我们不希望将消息字符串分散在各个地方。如果需要修改消息内容或将其翻译成另一种语言，最好将它们集中存放在一个地方！目前缺少的是对消息的集中定义。下面我们看看来如何实现它。一种简单的方法是，每条消息都有一个 ID（一…...

编程日记 2025/9/3 4:52:37

T-SQL 语言基础： SQL 数据库对象元数据及配置信息获取

目录介绍目录视图获取表和架构名称获取列信息信息架构视图获取表信息获取列信息系统存储过程和函数获取对象列表获取对象详细信息获取约束信息获取数据库属性信息总结引用介绍在 SQL 数据库管理中，获取数据库对象的元数据信息是至关重要的。元数据提供了…...

编程日记 2025/9/7 11:42:38

基于vue框架的游戏博客网站设计iw282（程序+源码+数据库+调试部署+开发环境）带论文文档1万字以上，文末可获取，系统界面在最后面。

系统程序文件列表项目功能：用户,博客信息,资源共享,游戏视频,游戏照片开题报告内容基于FlaskVue框架的游戏博客网站设计开题报告一、项目背景与意义随着互联网技术的飞速发展和游戏产业的不断壮大，游戏玩家对游戏资讯、攻略、评测等内容的需求日…...

编程日记 2025/9/4 13:36:23

批量提取 Word 文档中的页面

如何将 Word 文档中的页面提取出来形成一个新的文档呢？比如将 Word 文档中的第一页提取出来、将 Word 文档中的最后一页提取出来、再或者将 Word 文档中的中间几页提取出来等等。人工的处理肯定非常的麻烦，需要新建 Word 文档，然后将内容复制…...

编程日记 2025/9/4 11:31:01

本地大模型编程实战(26)用langgraph实现基于SQL数据构建的问答系统(5)

本文将将扩展上一篇文章完成的 langgraph 链，继续使用基于 langgraph 链 ，对结构化数据库 SQlite 进行查询的方法。该系统建立以后，我们不需要掌握专业的 SQL 技能，可以用自然语言询问有关数据库中数据的问题并返回答案。主要完善…...

编程日记 2025/9/5 12:10:59

csrf与ssrf学习笔记

一、CSRF（Cross-Site Request Forgery） 1. 定义攻击目标：利用用户已登录的合法身份，在用户不知情的情况下发起恶意请求。核心条件：受害者需已登录目标系统，且浏览器会自动携带身份凭证（如 C…...

编程日记 2025/9/5 3:24:07

安装Maven配置阿里云地址详细教程

下面以安装Maven公认最稳定版本（使用最多）3.6.1为例 1、访问maven官网 Maven官网直接跳转Maven3.6.1 Maven3.6.1 2、点击下载跳转页面后继续单击 Maven 3 archives 下载后解压放到自己的软件目录下 ~ 2.配置本地仓库在目录下创建repo文件夹 &…...

编程日记 2025/9/4 8:38:41

我的世界1.20.1forge模组开发进阶物品（7）——具有动画、3D立体效果的物品

基础的物品大家都会做了对吧？包括武器的释放技能，这次来点难度，让物品的贴图呈现动画效果和扔出后显示3D立体效果，这个3D立体效果需要先学习blockbench，学习如何制作贴图。 Blockbench Blockbench是一个用于创建和编辑三维模型的免费软件，特别适用于Minecraft模型的设计…...

编程日记 2025/9/6 2:22:35

火语言RPA--PDF提取表格

【组件功能】：提取PDF文档指定位置表格配置预览配置说明文件路径支持T或# 默认FLOW输入项待提取表格的PDF文件的完整路径。提取位置全部、指定页、指定范围3种位置供选择。 PDF文件密码支持T或# 打开PDF文件的密码。页码支持T或# 提取指定页的页…...

编程日记 2025/8/30 17:47:55

【开源-线程池（Thread Pool)项目对比】

一些实现**线程池（Thread Pool）**功能的开源项目的对比分析。线程池功能的开源项目项目名称语言优点缺点适用场景开源代码链接ThreadPoolC简单易用，代码简洁；适合快速原型开发。功能较为基础，不支持动态调整线程数…...

编程日记 2025/9/5 16:16:31

JavaScript系列05-现代JavaScript新特性

JavaScript作为网络的核心语言之一，近年来发展迅速。从ES6(ECMAScript 2015)开始，JavaScript几乎每年都有新的语言特性加入，极大地改善了开发体验和代码质量。本文主要内容包括： ES6关键特性：解构赋值与扩展运算符&am…...

编程日记 2025/9/7 10:03:59

【二.提示词工程与实战应用篇】【3.Prompt调优：让AI更懂你的需求】

最近老张在朋友圈秀出用AI生成的国风水墨画，隔壁王姐用AI写了份惊艳全场的年终总结，就连楼下小卖部老板都在用AI生成营销文案。你看着自己跟AI对话时满屏的"我不太明白您的意思"，是不是怀疑自己买了台假电脑？别慌，这可能是你的打开方式不对。今天咱们就聊聊这个…...

编程日记 2025/8/23 9:10:37

C++学习之C++初识、C++对C语言增强、对C语言扩展

一.C初识 1.C简介 2.第一个C程序 //#include <iostream> //iostream 相当于 C语言下的 stdio.h i - input 输入 o -output 输出 //using namespace std; //using 使用 namespace 命名空间 std 标准 ，理解为打开一个房间，房间里有我们所需…...

编程日记 2025/8/16 10:30:05

基于eRDMA实测DeepSeek开源的3FS

DeepSeek昨天开源了3FS分布式文件系统, 通过180个存储节点提供了 6.6TiB/s的存储性能, 全面支持大模型的训练和推理的KVCache转存以及向量数据库等能力, 每个客户端节点支持40GB/s峰值吞吐用于KVCache查找. 发布后, 我们在阿里云ECS上进行了快速的复现, 并进行了性能测试, ECS…...

编程日记 2025/9/6 19:49:54

写Oracle表耗时25分钟缩短到23秒——SeaTunnel性能优化

本文主要给大家介绍JDBC Source批处理任务动态切分优化，希望大家批评指正 JDBC Source 如果配置了table_path 和 partition_column，引擎会对数据进行动态切分，可以通过分析样本数据优化切分区间，规避数据倾斜问题。目前发现任务…...

编程日记 2025/9/3 8:52:16

Golang的图形用户界面设计

一、Golang图形用户界面设计的基本概念了解Golang 也称为Go语言，是一种由Google开发的开源编程语言。它具有良好的并发性，能够更好地利用多核处理器，同时也拥有丰富的标准库和强大的工具链。什么是图形用户界面图形用户界面（GU…...

编程日记 2025/9/6 18:34:16

蓝桥杯备赛Day12 动态规划1基础

动态规划动态规划基础动态规划将复杂问题分解成很多重叠的子问题，再通过子问题的解得到整个问题的解分析步骤: 确定状态:dp[i][j]val,“到第i个为止，xx为j的方案数/最小代价/最大价值” 状态转移方程: 确定最终状态要求: (1)最优子结构 (2)无后效性…...

编程日记 2025/9/4 19:51:46

我的AI工具箱Tauri版-通用音频转文本

本模块支持FunAsr和FasterWhisper两种模式，可批量处理音频与视频文件，自动生成txt文本与srt字幕，满足多种应用场景需求。工具内置FunAsr，无需额外参数调整，特别适用于中文语音的高质量转录，确保识别准确率…...

编程日记 2025/9/3 18:42:26

C#—Settings配置详解

C#—Settings配置详解在C#项目中，全局配置通常指的是应用程序的设置（settings），这些设置可以跨多个类或组件使用，并且通常用于存储应用程序的配置信息，如数据库连接字符串、用户偏好设置等。 Settings配置…...

编程日记 2025/9/3 7:07:28

机器学习算法——分类任务

算法： 1、决策树 2、随机森林 3、梯度提升树 4、逻辑回归 5、支持向量机SVM 6、K近邻 KNN 7、朴素贝叶斯 8、多层感知机 9、统一分类 10、比较总结 11、完整代码 1、决策树 1.1 Decision Tree Analysis (C4.5,CART,CHAID)决策树算法树结构特征选择连续值处理缺失…...

编程日记 2025/9/3 18:06:56

聆听PostgreSQL数据库的使用

参考：（1）零基础入门PostgreSQL教程 （2）菜鸟教程文章目录一、PostgreSQL是什么？二、基本使用1.下载2.操作（1）数据库（2）表一、PostgreSQL是什么？…...

编程日记 2025/9/2 11:25:19

C# 装箱（Boxing）与拆箱（Unboxing）

C# 装箱（Boxing）与拆箱（Unboxing） 在 C# 中，装箱和拆箱是与值类型（如结构体）和引用类型（如类）之间的转换相关的操作。它们是类型系统的一部分，但如果不正确使…...

编程日记 2025/9/3 7:27:03