diff --git a/README.md b/README.md index 17f1110..2d90b25 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,7 @@ Quick Reference [JavaScript](./docs/javascript.md) [JSON](./docs/json.md) [React](./docs/react.md) +[HTML](./docs/html.md) [Styled Components](./docs/styled-components.md) [TOML](./docs/toml.md) [Markdown](./docs/markdown.md) diff --git a/docs/emmet.md b/docs/emmet.md index 0213074..8f34f8a 100644 --- a/docs/emmet.md +++ b/docs/emmet.md @@ -1,7 +1,7 @@ -Emmet +Emmet 备忘清单 ==== -[Emmet](https://emmet.io/) 是一个用于提升 HTML 和 CSS 代码编写的 Web 开发人员工具包，它允许您使用著名的 CSS 选择器以光速编写大型 HTML 代码块。 +[Emmet](https://emmet.io/) 是一个用于提升 [HTML](./html.md) 和 CSS 代码编写的 Web 开发人员工具包，它允许您使用著名的 CSS 选择器以光速编写大型 HTML 代码块。 Emmet 语法 diff --git a/docs/html.md b/docs/html.md new file mode 100644 index 0000000..9a533db --- /dev/null +++ b/docs/html.md @@ -0,0 +1,903 @@ +HTML 备忘清单 +=== + +此 HTML 快速参考备忘单以可读布局列出了常见的 `HTML` 和 `HTML5` 标记。 + +入门 +------------ + +### hello.html + + +```html + + + + + + + HTML5 Boilerplate + + +

Hello world, hello 备忘清单!

+ + +``` + +或者在 [jsfiddle](https://jsfiddle.net/Randy8080/1e4wz20b/) + +### 注释 Comment + +```html + + + +``` + +### 段落 Paragraph + +```html +

我来自快速参考

+

分享快速参考备忘单。

+``` +请参阅：[段落元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/p) + +### HTML 链接 + +```html + + Github + +邮箱 +电话 + + 短信 + +``` + +--- + +:-|:- +:-|:- +`href` | 超链接指向的 URL | +`rel` | 链接 URL 的关系 | +`target` | 链接目标位置：`_self`/`_blank`/`_top`/`_parent` | + +请参阅：[\ 属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a#attributes) + + + +### Image 标签 + +```html +在此处描述图像 +``` + + +--- + +| | | | +|---|-----------|------------------------------------------| +| | `src` _(URL/路径)_ | 必填，图片位置 | +| | `alt` | 描述图像 | +| | `width` | 图像宽度 | +| | `height` | 图像高度 | +| | `loading` | 浏览器应该如何加载 | + +请参阅：[图像嵌入元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img) + +### 文本格式标签 + +```html +粗体文字 +这段文字很重要 +斜体文本 +这段文字被强调 +下划线文本 +
预格式化文本
+源代码 +删除的文字 +突出显示的文本 (HTML5) +插入的文本 +使文本上标 +使文本下标 +使文本变小 +
预格式化文本
+Ctrl +
文本块引用
+``` + +### 标题 + +```html +

这是标题 1

+

这是标题 2

+

这是标题 3

+

这是标题 4

+
这是标题 5
+
这是标题 6
+``` + +您的页面上应该只有一个 `h1` + +### Section Divisions + +:-|:- +:-|:- +`
` | 页面内容的划分或部分 +`` | 其他内容中的文本部分 +`

` | 文本段落 +`
` | 换行 +`
` | 水平分割线 + +这些标签用于将页面划分为多个部分 + +### 内部框架 + + +```html + +``` + + +#### ↓ 预览 + + + + +请参阅：[内联框架元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe) + + +### HTML 中的 JavaScript + +```html + +``` + + +#### 外部 JavaScript + +```html + + ... + + +``` + + +### HTML 中的 CSS + +```html + +``` + +#### 外部样式表 + +```html + + ... + + +``` + + + +HTML5 标签 +------------- + +### 页面 + +```html + +
+ +
+
+

快速参考

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

我爱备忘清单

+``` + +

我爱备忘清单

+ + +HTML 表格 +-------------- + +### Table 示例 + + +```html + + + + + + + + + + + + + + + + + +
nameage
Roberta39
Oliver25
+``` + +### HTML表格标签 + + +标签|说明 +:-|:- +[\](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table) | 定义表格 +[\](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/tr) | 定义表中的行 +[\](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/colgroup) | 定义一组列 +[\](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/col) | 定义表中的列 +[\](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/thead) | 对标题内容进行分组 +[\](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/tbody) | 将正文内容分组 +[\](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/tfoot) | 对页脚内容进行分组 + +### \
](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/th) | 定义表格中的标题单元格 +[\
](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/td) | 定义表格中的单元格 +[\
](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/caption) | 定义表格标题 +[\
属性 + +属性|说明 +:-|:- +`colspan` | 单元格应跨越的列数 +`headers` | 单元格与一个或多个标题单元格相关 +`rowspan` | 单元格应跨越的行数 + +请参阅：[td\#属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/td#attributes) + +### \ 属性 + +属性|说明 +:-|:- +`colspan` | 单元格应跨越的列数 +`headers` | 单元格与一个或多个标题单元格相关 +`rowspan` | 单元格应跨越的行数 +`abbr` | 单元格内容的描述 +[scope](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/th#attr-scope) | 表头元素(在\中定义)关联的单元格 + +请参阅：[th\#属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/th#attributes) + +HTML 列表 +---- + +### 无序列表 + +```html +
    +
  • I'm an item
    • +
  • I'm another item
    • +
  • I'm another item
    • +
+``` + +请参阅：[无序列表元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ul) + +### 有序列表 + +```html +
    +
  1. I'm the first item
    2. +
  2. I'm the second item
    3. +
  3. I'm the third item
    4. +
+``` + +请参阅：[有序列表元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ol) + +### 定义列表 + +```html +
+
A Term
+
Definition of a term
+
Another Term
+
Definition of another term
+
+``` + +请参阅：[描述列表元素](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/dl) + +HTML 表单 +----------- + +### Form 标签 + + +```html +
+ + +
+ + +
+ +
+ + +
+``` + +#### ↓ 预览 + +
+ + +
+ + +
+ +
+ + +
+ + +HTML `
` 元素用于收集信息并将其发送到外部源。 + +### Form 属性 + +属性|说明 +:-|:- +`name` | 脚本形式的名称 +`action` | 表单脚本的URL +`method` | HTTP方法，`POST`/`GET` _(默认)_ +`enctype` | 介质类型，请参见[enctype](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLFormElement/enctype) +`onsubmit` | 提交表单时运行 +`onreset` | 在窗体重置时运行 + +### Label 标签 + +```html + + +``` + +--- + +```html + + + +``` + +`for`在标签中引用输入的`id`属性 + +### Input 标签 + +```html + + +``` + +#### ↓ 预览 + + + + +
+ +请参阅：[HTML输入标记](/html#html-input-tags) + +### Textarea 标签 + +```html + +``` + + +#### ↓ 预览 + +
+ +
+ +Textarea 是一个多行文本输入控件 + +### Radio Buttons + +```html + + + + +``` + +#### ↓ 预览 + +
+ + + + +
+ +单选按钮用于让用户只选择一个 + +### Checkboxes +```html + + + + +``` +#### ↓ 预览 +
+ + + + +
+ +复选框允许用户选择一个或多个 + +### Select 标签 + +```html + + +``` + +#### ↓ 预览 + +
+ + +
+ +选择框是选项的下拉列表 + +### Fieldset 标签 + +```html +
+ Your favorite monster + +
+ + +
+``` + +#### ↓ 预览 + +
+
+ Your favorite monster + +
+ + +
+
+ +### 数据列表标签（HTML5） + +```html + + + + +``` + +#### ↓ 预览 + +
+ + + + +
+ +### 提交和重置按钮 + +```html +
+ + + + +
+``` + +#### ↓ 预览 + +
+ + + + +
+ +`将数据提交到服务器` 重置为默认值 + + +HTML input 标签 +----------- + + +### Input 属性 + + +输入标记是一个空元素，用于标识要从用户处获取的特定类型的字段信息。 + +```html + +``` + +---- + +:-|:- +:-|:- +`type="…"` | 正在输入的数据类型 +`value="…"` | 默认值 +`name="…"` | 用于在 HTTP 请求中描述此数据 +`id="…"` | 其他 HTML 元素的唯一标识符 +`readonly` | 停止用户修改 +`disabled` | 停止任何交互 +`checked` | 单选或复选框是否选中 +`required` | 是强制性的，参阅[必填](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/required#example) +`placeholder="…"` | 添加临时，请参阅[::placeholder](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::placeholder#examples) +`autocomplete="off"` | 禁用自动完成 +`autocapitalize="none"` | 禁用自动大写 +`inputmode="…"` | 显示特定键盘，请参阅[inputmode](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/inputmode) +`list="…"` | 关联的[datalist](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/datalist)的id +`maxlength="…"` | 最大字符数 +`minlength="…"` | 最小字符数 +`min="…"` | 范围和编号上的最小数值 +`max="…"` | 范围和编号上的最大数值 +`step="…"` | 数字如何在范围和数字中递增 +`pattern="…"` | 指定一个[正则表达式](./regex.md)，请参阅[pattern](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/pattern) +`autofocus` | 集中精力 +`spellcheck` | 执行拼写检查 +`multiple` | 是否允许[多个](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/multiple)值 +`accept=""` | [file](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/file) 中需要文件类型上载控件 + +请参阅：[\元素 的属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#attributes) + +### 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 的其他材料。 + +```html + +``` + +```html + +··· + + +``` +--- + +```html + + + + +``` +--- + +```html + + + + +``` +--- + +```html + + + +``` +--- + +```html + + +``` +--- + +```html + + + +``` + +### Open Graph + +```html + + + + + + + +``` + +Facebook、Instagram、Pinterest、LinkedIn 等使用。 + +### Twitter 卡片 + +```html + + + + + + +``` + +请参阅：[Twitter 卡片文档](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary) + +### Geotagging + +```html + + + + +``` + +请参阅：[Geotagging](https://en.wikipedia.org/wiki/Geotagging#HTML_pages) + +另见 +-------- + +- [HTML 4.01 Specification](https://www.w3.org/TR/REC-html40/cover.html#minitoc) _(w3.org)_ +- [HTML Tutorial](https://wangchujiang.com/html-tutorial/) _(jaywcjlove.github.io)_ +- [Emmet 备忘清单，提升 HTML 和 CSS 代码编写的工具包](./emmet.md) _(jaywcjlove.github.io)_ \ No newline at end of file diff --git a/scripts/assets/html.svg b/scripts/assets/html.svg new file mode 100644 index 0000000..6b5365d --- /dev/null +++ b/scripts/assets/html.svg @@ -0,0 +1,3 @@ + + + diff --git a/scripts/style.css b/scripts/style.css index 2d4bcc8..a18430a 100644 --- a/scripts/style.css +++ b/scripts/style.css @@ -117,10 +117,7 @@ body { } *, ::before, ::after { - box-sizing: border-box; - border-width: 0; - border-style: solid; - border-color: #e5e7eb; + box-sizing: border-box; } blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { @@ -399,6 +396,7 @@ a.text-grey { padding-bottom: 0.5rem; border-radius: 9999px; transition: all .3s; + border: 0; } .header-nav .menu { @@ -654,6 +652,9 @@ body:not(.home) .h2wrap > h2 a::after { } .h3wrap hr, .h3wrap-body hr { + border-width: 0; + border-style: solid; + border-color: #e5e7eb; border-bottom: 1px solid var(--color-border-default); }