HTML 备忘清单
此 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 |
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> |
水平分割线 |
这些标签用于将页面划分为多个部分
内部框架
<iframe
id="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
<audio
controls
src="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表格标签
标签 | 说明 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
\
\ | 属性
请参阅:td#属性 \ | 属性
请参阅:th#属性 HTML 列表无序列表
请参阅:无序列表元素 有序列表
请参阅:有序列表元素 定义列表
请参阅:描述列表元素 HTML 表单Form 标签
↓ 预览HTML Form 属性
Label 标签
Input 标签
↓ 预览请参阅:HTML输入标记 Textarea 标签
↓ 预览Textarea 是一个多行文本输入控件 Radio Buttons
↓ 预览单选按钮用于让用户只选择一个 Checkboxes
↓ 预览复选框允许用户选择一个或多个 Select 标签
↓ 预览选择框是选项的下拉列表 Fieldset 标签
↓ 预览数据列表标签(HTML5)
↓ 预览提交和重置按钮
↓ 预览
HTML input 标签Input 属性输入标记是一个空元素,用于标识要从用户处获取的特定类型的字段信息。
请参阅:\元素 的属性 Input 类型
HTML5 中的新输入类型
Input CSS 选择器
HTML meta 标签Meta 标签meta 标记描述 HTML 文档中的元数据。它解释了关于 HTML 的其他材料。
Open Graph
Facebook、Instagram、Pinterest、LinkedIn 等使用。 Twitter 卡片
请参阅:Twitter 卡片文档 Geotagging
请参阅:Geotagging 另见
|