HTML备忘录代码教程

HTML备忘录，通常被理解为一种能够帮助记忆的工具，它能够以简单的方式阐述主题和相关的事件。这些内容可能包括文本、图片或语音资料。在计算机科学中，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 QuickRef.ME!</h1>
</body>
</html>

二、注释

注销代码如下：

<!-- this is a comment -->

详情参见《HTML注释》

三、段落

<p>I'm from QuickRef.ME</p>
<p>Share quick reference cheat sheet.</p>

详情参见《HTML基础》

四、链接

<a href="https://quickref.me" rel="external nofollow"  rel="external nofollow" target="_blank" >QuickRef</a>
<a href="mailto:jack@abc.com" rel="external nofollow" >Email</a>
<a href="tel:+12345678" rel="external nofollow" >Call</a>
<a href="sms:+12345678&body=ha%20ha" rel="external nofollow" >Msg</a>

详情参见《HTML链接》

五、图片

<img loading="lazy" src="https://xxx.png" rel="external nofollow" alt="Describe image here" width="400" height="400">

src：必需，图像位置（URL | 路径）；
alt：图像描述；
width：图像的宽度；
height：图像的高度；
loading：浏览器应该如何加载。

详情参见《HTML图像》

六、文本格式

<b>Bold Text</b>
<strong>This text is important</strong>
<i>Italic Text</i>
<em>Emphasis - This text is emphasized</em>
<u>Underline Text</u>
<pre>Preformatted text</pre>
<code>Source code</code>
<del>Deleted text</del>
<mark>Marked/highlighted text</mark>
<ins>Inserted text</ins>
<sup>Makes text superscripted</sup>
<sub> Makes text subscripted</sub>
<small>Makes text smaller</small>
<pre>Pre-formatted Text</pre>
<kbd>Ctrl</kbd>
<blockquote>Text Block Quote</blockquote>

详情参见《HTML文本格式化》

七、标题

<h1> This is Heading 1 </h1>
<h2> This is Heading 2 </h2>
<h3> This is Heading 3 </h3>
<h4> This is Heading 4 </h4>
<h5> This is Heading 5 </h5>
<h6> This is Heading 6 </h6>

八、分区

<div></div>：页面内容的部分或部分；
<span></span>：其他内容中的文本部分；
<p></p>：文字段落；
<br>：换行；
<hr>：基本水平线。

1、JavaScript在HTML中

<script type="text/javascript">
alert("Hello QuickRef.ME");
</script>

2、外部JavaScript

<head>
...
<script src="app.js"></script>
</head>

3、CSS在HTML中

<style type="text/css">
h1 {
color: purple;
}
</style>

4、外部CSS

<body>
...
<link rel="stylesheet" href="style.css" rel="external nofollow" />
</body>

5、内联框架

<iframe id="inlineFrameExample"
title="YouTube video player"
width="560"
height="215"
src="https://www.youtube.com/embed/HmZKgaHa3Fg" rel="external nofollow" 
allow="fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture;">
</iframe>

九、表格

1、表格示例

<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>

2、表格标签

<table>：定义一个表；
<th>：定义表格中的标题单元格；
<tr>：定义表格中的一行；
<td>：定义表格中的单元格；
<caption>：定义表格标题；
<colgroup>：定义一组列；
<col>：定义表中的列；
<thead>：分组标题内容；
<tbody>：将正文内容分组；
<tfoot>：将页脚内容分组。

3、td属性

colspan：单元格应跨越的列数；
headers：一个或多个与单元格相关的标题单元格；
rowspan：单元格应跨越的行数；
abbr：单元格内容的描述；
scope：标题元素涉及。

详情参见：《HTML表格》

十、列表

1、无序列表

<ul>
<li>I'm an item</li>
<li>I'm another item</li>
<li>I'm another item</li>
</ul>

2、有序列表

<ol>
<li>I'm the first item</li>
<li>I'm the second item</li>
<li>I'm the third item</li>
</ol>

3、定义列表

<dl>
<dt>A Term</dt>
<dd>Definition of a term</dd>
<dt>Another Term</dt>
<dd>Definition of another term</dd>
</dl>

详情参见《HTML列表》

十一、HTML表单

<form method="POST" action="api/login">
<label for="mail">Email: </label>
<input type="email" id="mail" name="mail">
<br/>
<label for="pw">Password: </label>
<input type="password" id="pw" name="pw">
<br/>
<input type="submit" value="Login">
<br/>
<input type="checkbox" id="ck" name="ck">
<label for="ck">Remember me</label>
</form>

详情参见《HTML表单》

十二、HTML元标签

1、元标签

元标记描述 HTML 文档中的元数据，它解释了有关 HTML 的附加材料。

<meta charset='utf-8'>

<!-- title -->
<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://···'>

<!-- description -->
<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'>

2、OpenGraph

<meta property="og:type" content="website">
<meta property="og:locale" content="en_CA">
<meta property="og:title" content="Title of this page, same as title tag">
<meta property="og:url" content="http://fullurl.com/to-this/page/">
<meta property="og:image" content="http://fullurl.com/to-this/image.jpg">
<meta property="og:site_name" content="Name of your website">
<meta property="og:description" content="Description of this page, same as meta

3、Twutter Cards推特卡片

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@yourtwitterhandle">
<meta name="twitter:title" content="Title of this page, same as title tag">
<meta name="twitter:url" content="http://fullurl.com/to-this/page/">
<meta name="twitter:description" content="Description of this page, same as meta description">
<meta name="twitter:image" content="http://fullurl.com/to-this/image.jpg">

4、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">