【前端】HTML 备忘清单（超级详细！）
文章目录
- 入门
- 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>
↓ 预览
汉 字 拼 音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="">
预览
请参阅：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>
预览
单选按钮用于让用户只选择一个
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>
预览
复选框允许用户选择一个或多个
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>
预览
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数据列表标签（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>
预览
提交和重置按钮
<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>
预览
将数据提交到服务器 重置为默认值
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 …...
版图自动化连接算法开发 00004 ------ 给定一个点，添加一个中间点实现 Manhattan 方式连接两个给定的坐标点
版图自动化连接算法开发 00004 ------ 给定一个点，添加一个中间点实现 Manhattan 方式连接两个给定的坐标点 引言正文引言 必读文章 ------ 版图自动化连接算法开发 00001 ------ 直接连接两个给定的坐标点。 此处，我们对给定点的坐标进行一下限制，因为是只添加一个点，因…...
C# Enumerable类 之 数据筛选
总目录 前言 在 C# 中，System.Linq.Enumerable 类是 LINQ（Language Integrated Query）的核心组成部分，它提供了一系列静态方法，用于操作实现了 IEnumerable 接口的集合。通过这些方法，我们可以轻松地对集合…...
Grafana服务安装并启动
Grafana服务安装并启动 1、介绍2、下载Grafana3、解压缩文件4、启动Grafana服务5、增加数据源,填写Prometheus访问地址6、增加图表 1、介绍 Grafana是一个开源的可视化系统监控和警报工具包。 2、下载Grafana 介绍：Grafana是一个开源的可视化系统监控和警报工具包…...
蓝桥杯web第三天
展开扇子题目， #box:hover #item1 { transform:rotate(-60deg); } 当悬浮在父盒子，子元素旋转 webkit display: -webkit-box：将元素设置为弹性伸缩盒子模型。-webkit-box-orient: vertical：设置伸缩盒子的子元素排列方…...
C#开发——时间间隔类TimSpan
TimeSpan 是 C# 中的一个结构（ struct ），用于表示时间间隔或持续时间。它位于 System 命名空间中，是处理时间相关操作时非常重要的工具，尤其是在计算两个日期或时间之间的差值、表示时间段或执行时间相关的运算…...
NModbus 连接到Modbus服务器（Modbus TCP）
1、在项目中通过NuGet添加NModbus，在界面中添加一个Button。 using NModbus.Device; using NModbus; using System.Net.Sockets; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Docu…...
蓝桥杯 之 图形规律
文章目录 分析组成，找到规律数正方形 在蓝桥杯中，常常会有一些图形的规律的题目需要我们去解决，所以我们需要学会其中的一些方法，我们这样才能解决对应的问题 方法1：直接对n进行拆分方法2：使用递归的思路&a…...
多线程学习之路
多线程的创建方式主要有以下几种： 1. 继承 Thread 类 通过继承 Thread 类并重写 run() 方法来创建线程。 class MyThread extends Thread {Overridepublic void run() {// 线程执行的任务System.out.println("Thread is running");} }public class Mai…...
英码科技携昇腾DeepSeek大模型一体机亮相第三届北京人工智能产业创新发展大会
2025年2月28日，第三届北京人工智能产业创新发展大会在国家会议中心隆重开幕。本届大会以"好用、易用、愿用——以突破性创新加速AI赋能千行百业”为主题，重点展示人工智能技术创新成果与产业化应用实践。作为昇腾生态的APN伙伴，英码科技…...
【AI】如何理解与应对AI中的敏感话题：详细分析与实用指南
引言 随着人工智能（AI）技术的不断发展，我们在与AI交互时，可能会遇到敏感话题的讨论限制。在许多情况下，AI系统为了避免触及社会、政治或文化敏感点，会对用户输入进行一定的筛选和过滤。那么，这…...
(十 三)趣学设计模式 之 模版方法模式！
目录 一、 啥是模板方法模式？二、 为什么要用模板方法模式？三、 模板方法模式的实现方式四、 模板方法模式的优缺点五、 模板方法模式的应用场景六、 总结 🌟我的其他文章也讲解的比较有趣😁，如果喜欢博主的讲解方式&a…...
20250225-代码笔记03-class CVRPModel AND other class
文章目录 前言一、class CVRPModel(nn.Module):__init__(self, **model_params)函数功能函数代码 二、class CVRPModel(nn.Module):pre_forward(self, reset_state)函数功能函数代码 三、class CVRPModel(nn.Module):forward(self, state)函数功能函数代码 四、def _get_encodi…...
【postman】postman找回接口数据
项目提测，一打开postman天塌了，所有接口都不见了。。。。conllection目录也看不见了，也导入不了同事给我发的json文件。 然后重新找同事要了一个安装包，覆盖安装了之后，在下面的目录里面找到了备份文件【C:\Users\yan…...
Milvus向量数据库部署
一、什么是Milvus Milvus 是一款开源的向量数据库，旨在帮助开发者轻松管理和检索大规模向量数据。它通过高效的索引技术，支持快速的相似度搜索，使得从海量数据中查找最接近的匹配变得简单而快捷。无论是构建推荐系统、进行图像识别还是分析自…...
显式 GC 的使用：留与去，如何选择？
目录 一、什么是显式 GC？ （一） 垃圾回收的基本原理 （二）显式 GC 方法和行为 1. System.gc() 方法 2. 显式 GC 的行为 （三）显式 GC 的使用场景与风险 1. JVM 如何处理显式 GC 2. 显式 GC…...
探秘基带算法：从原理到5G时代的通信变革【二】Viterbi解码
文章目录 二、关键算法原理剖析2.1 Viterbi 解码2.1.1 卷积码与网格图基础**卷积码****网格图****生成多项式****理想情况下解码过程** 2.1.2 Viterbi 算法核心思想2.1.3 路径度量与状态转移机制2.1.4 算法流程与关键步骤详解2.1.5 译码算法举例与复杂度分析2.1.6 算法代码示例…...
从零实现高并发内存池
目录 一、项目介绍 二、什么是内存池？ 1.池化技术 2.内存池 3.内存池解决的问题 三、malloc本身就是内存池 四、定长内存池 五、高并发内存池整体框架 六、thread cache 七、central cache 八、page cache 一、项目介绍 当前项目是实现一个高并发的内存池…...
学习笔记)
3-7 WPS JS宏 工作表移动复制实例-2(多工作簿的多工作表合并)学习笔记
************************************************************************************************************** 点击进入 -我要自学网-国内领先的专业视频教程学习网站 *******************************************************************************************…...
【计算机网络】考研复试高频知识点总结
文章目录 一、基础概念1、计算机⽹络的定义2、计算机⽹络的目标3、计算机⽹络的组成4、计算机⽹络的分类5、计算机⽹络的拓扑结构6、计算机⽹络的协议7、计算机⽹络的分层结构8、OSI 参考模型9、TCP/IP 参考模型10、五层协议体系结构 二、物理层1、物理层的功能2、传输媒体3、 …...
(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)
题目：3442. 奇偶频次间的最大差值 I 思路 ：哈希，时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况，哈希表这里用数组即可实现。 C版本： class Solution { public:int maxDifference(string s) {int a[26]…...
【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型
摘要 拍照搜题系统采用“三层管道（多模态 OCR → 语义检索 → 答案渲染）、两级检索（倒排 BM25 向量 HNSW）并以大语言模型兜底”的整体框架： 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后，分别用…...
龙虎榜——20250610
上证指数放量收阴线，个股多数下跌，盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型，指数短线有调整的需求，大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的：御银股份、雄帝科技 驱动…...
docker详细操作--未完待续
docker介绍 docker官网: Docker：加速容器应用程序开发 harbor官网：Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台，用于将应用程序及其依赖项（如库、运行时环…...
NLP学习路线图（二十三）：长短期记忆网络（LSTM）
在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN） 曾被视为…...
爬虫基础学习day2
# 爬虫设计领域 工商：企查查、天眼查短视频：抖音、快手、西瓜 ---> 飞瓜电商：京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空：抓取所有航空公司价格 ---> 去哪儿自媒体：采集自媒体数据进…...
vue3+vite项目中使用.env文件环境变量方法
vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量，这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...
SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题
分区配置 (ptab.json) img 属性介绍： img 属性指定分区存放的 image 名称，指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件，则以 proj_name:binary_name 格式指定文件名， proj_name 为工程 名&…...
JVM 内存结构 详解
内存结构 运行时数据区： Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器： 线程私有，程序控制流的指示器，分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 每个线程都有一个程序计数…...
R语言速释制剂QBD解决方案之三
本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...