【前端】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、 …...
＜6＞-MySQL表的增删查改
目录 一，create（创建表） 二，retrieve（查询表） 1，select列 2，where条件 三，update（更新表） 四，delete（删除表…...
AI Agent与Agentic AI：原理、应用、挑战与未来展望
文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例：使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例：使用OpenAI GPT-3进…...
Admin.Net中的消息通信SignalR解释
定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...
Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）
概述 在 Swift 开发语言中，各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过，在涉及到多个子类派生于基类进行多态模拟的场景下，…...
【解密LSTM、GRU如何解决传统RNN梯度消失问题】
解密LSTM与GRU：如何让RNN变得更聪明？ 在深度学习的世界里，循环神经网络（RNN）以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而，传统RNN存在的一个严重问题——梯度消失&#…...
Opencv中的addweighted函数
一.addweighted函数作用 addweighted（）是OpenCV库中用于图像处理的函数，主要功能是将两个输入图像（尺寸和类型相同）按照指定的权重进行加权叠加（图像融合），并添加一个标量值&#x…...
深入理解JavaScript设计模式之单例模式
目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式（Singleton Pattern&#…...
镜像里切换为普通用户
如果你登录远程虚拟机默认就是 root 用户，但你不希望用 root 权限运行 ns-3（这是对的，ns3 工具会拒绝 root），你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案：创建非 roo…...
ServerTrust 并非唯一
NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...
HTML前端开发：JavaScript 常用事件详解
作为前端开发的核心，JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例： 1. onclick - 点击事件 当元素被单击时触发（左键点击） button.onclick function() {alert("按钮被点击了！&…...