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

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

article 2026/3/24 22:48:00

文章目录

- 入门
- - 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/12/1 15:30:15

鸿蒙开发新视角：用ArkTS解锁责任链模式

责任链模式：概念与原理责任链模式（Chain of Responsibility Pattern）是一种行为型设计模式，它将多个处理者对象连接成一条链，并将请求沿着链传递，直到有一个处理者能够处理该请求。这种模式的核心思想是将…...

编程日记 2026/2/18 13:02:40

Linux的用户与权限--第二天

认知root用户（超级管理员） root用户用于最大的系统操作权限普通用户的权限，一般在HOME目录内部不受限制 su与exit命令 su命令： su [-] 用户名 -符号是可选的，表示切换用户后加载环境变量参数为用户名&#xff0c…...

编程日记 2026/3/16 23:31:00

【Unity】搭建HTTP服务器并解决IP无法访问问题解决

一、核心目标与背景在Unity中搭建本地HTTP服务器，可以用于实现Web与游戏交互、本地数据接口测试、跨设备通信等场景。但在实际部署中，开发者常遇到以下问题： 本机IP无法访问：服务绑定localhost时，局域网设备无法连…...

编程日记 2026/2/8 14:50:00

【C语言】结构体自动对齐问题解析与解决方案

【C语言】结构体自动对齐问题解析与解决方案文章目录【C语言】结构体自动对齐问题解析与解决方案一、引言：问题背景二、结构体对齐机制详解2.1 对齐规则2.2 示例分析三、实际案例与错误复现3.1 问题代码修正四、解决方案对比与实现4.1 禁用自动对齐&#xff…...

编程日记 2026/2/8 8:42:08

安卓开发相机功能

相机功能安卓中的相机调用功能也经历了很多的方案升级，目前可选的官方方案是CameraX、Camera2、Camera（废弃），还有一些第三方免费或者是付费的相机库。对于大多数开发者，建议使用 CameraX。 CameraX CameraX 是 An…...

编程日记 2026/1/23 23:29:13

Zookeeper 及基于ZooKeeper实现的分布式锁

1 ZooKeeper 1.1 ZooKeeper 介绍 ZooKeeper是一个开源的分布式协调服务，它的设计目标是将那些复杂且容易出错的分布式一致性服务封装起来，构成一个高效可靠的原语集，并以一系列简单易用的接口提供给用户使用。原语：操作系统或…...

编程日记 2026/3/24 8:11:13

Ubuntu20.04双系统安装及软件安装（五）：VSCode

Ubuntu20.04双系统安装及软件安装（五）：VSCode 打开VScode官网，点击中间左侧的deb文件下载： 系统会弹出下载框，确定即可。在文件夹的**“下载”目录**，可看到下载的安装包，在该目录下…...

编程日记 2026/3/6 13:22:45

【计算机网络入门】初学计算机网络（十一）重要

目录 1. CIDR无分类编址 1.1 CIDR的子网划分 1.1.1 定长子网划分 1.1.2 变长子网划分 2. 路由聚合 2.1 最长前缀匹配原则 3. 网络地址转换NAT 3.1 端口号 3.2 IP地址不够用？ 3.3 公网IP和内网IP 3.4 NAT作用 4. ARP协议 4.1 如何利用IP地址找到MAC地址…...

编程日记 2026/3/24 8:28:51

Android Flow操作符分类

Flow操作符分类...

编程日记 2026/3/19 18:32:16

经验分享：用一张表解决并发冲突！数据库事务锁的核心实现逻辑

背景对于一些内部使用的管理系统来说，可能没有引入Redis，又想基于现有的基础设施处理并发问题，而数据库是每个应用都避不开的基础设施之一，因此分享个我曾经维护过的一个系统中，使用数据库表来实现事务锁的方式。之…...

编程日记 2026/3/5 1:33:22

C#项目文件.csproj 文件结构解析

以下是对提供的 .csproj 文件内容的详细解析： 1. ‌项目根元素‌ <Project ToolsVersion"12.0" DefaultTargets"Build" xmlns"http://schemas.microsoft.com/developer/msbuild/2003"> ToolsVersion"12.0": 指定使…...

编程日记 2025/11/26 7:34:38

C++-第二十章：智能指针

目录第一节：std::auto_ptr 第二节：std::unique_ptr 第三节：std::shared_ptr 第四节：std::shared_ptr的缺陷 4-1.循环引用 4-2.删除器下期预告： 智能指针的作用是防止指针出作用域时忘记释放内存而造成内存泄漏&…...

编程日记 2026/3/23 17:56:59

chrome Vue.js devtools 提示不支持该扩展组件，移除

可能是版本不兼容，可以重新安装，推荐网址极简插件官网_Chrome插件下载_Chrome浏览器应用商店直接搜索vue，下载旧版，vue2、vue3都支持，上面那个最新版本试了下，vue2的肯定是不能用...

编程日记 2026/3/17 0:10:28

C# 中的Action和Func是什么？Unity 中的UnityAction是什么？他们有什么区别？

所属范围：Action 和 Func 是 C# 语言标准库中的委托类型，可在任何 C# 项目里使用；UnityAction 是 Unity 引擎专门定义的委托类型，只能在 Unity 项目中使用。返回值：Action 和 UnityAction 封装的方法没有返回值&…...

编程日记 2026/3/24 8:17:24

【流行病学】Melodi-Presto因果关联工具

title: “[流行病学] Melodi Presto因果关联工具” date: 2022-12-08 lastmod: 2022-12-08 draft: false tags: [“流行病学”,“因果关联工具”] toc: true autoCollapseToc: true 阅读介绍 Melodi-Presto: A fast and agile tool to explore semantic triples derived from …...

编程日记 2025/11/20 9:39:12

Stream在Swift 和 Flutter上的对比

Swift 和 Flutter 都是跨平台开发框架，它们各自提供了强大的工具来处理数据流，尤其是在移动应用开发中。虽然 Swift 主要用于 iOS 开发，而 Flutter 主要用于移动应用的开发（包括 iOS 和 Android），但它们各自…...

编程日记 2025/11/19 23:38:34

Vue3 TransitionGroup组件深入解析：结合Element Plus实践指南

引言在动态列表交互场景中，元素的增删排序需要优雅的过渡效果。Vue3的TransitionGroup组件为这类需求提供了专业解决方案。本文将通过Element Plus等流行UI库的实战案例，深入剖析TransitionGroup的应用技巧。一、TransitionGroup核心特性 1.1 与Tran…...

编程日记 2025/7/6 1:36:45

关于opencv中solvepnp中UPNP与DLS与EPNP的参数

The methods SOLVEPNP_DLS and SOLVEPNP_UPNP cannot be used as the current implementations are unstable and sometimes give completely wrong results. If you pass one of these two flags, SOLVEPNP_EPNP method will be used instead.、由于当前的实现不稳定&#x…...

编程日记 2025/7/6 21:59:35

Versal - XRT（CPP） 2024.1

目录 1.简介 2. XRT 2.1 XRT vs OpenCL 2.2 Takeways 2.3 XRT C APIs 2.4 Device and XCLBIN 2.5 Buffers 2.5.1 Buffer 创建 2.5.1.1 普通 Buffer 2.5.1.2 特殊 Buffer 2.5.1.3 用户指针 Buffer 2.5.2 Data Transfer 2.5.2.1 read/write API 2.5.2.2 map API 2…...

编程日记 2026/3/23 7:37:48

【零基础到精通Java合集】第十八集：多线程与并发编程-线程池与Callable/Future应用

课程标题：线程池与Callable/Future应用（15分钟）目标：掌握线程池的创建与管理，理解Callable任务与Future异步结果处理机制 0-1分钟：课程引入与线程池意义以“银行窗口服务”类比线程池：复用固定资源（柜员）处理多任务（客户）。说明线程池的核心价值——避免频繁创建…...

编程日记 2026/3/20 7:50:37

windows下安装Open Web UI

windows下安装openwebui有三种方式,docker,pythonnode.js,整合包. 这里我选择的是第二种,非docker. 非Docker方式安装 1. 安装Python： 下载并安装Python 3.11，建议安装路径中不要包含中文字符，并勾选“Add python 3.11 to Path”选项。安…...

编程日记 2026/3/23 12:09:45