HTML備忘錄，通常被理解為一種能夠幫助記憶的工具，它能夠以簡單的方式闡述主題和相關的事件。這些內容可能包括文本、圖片或語音資料。在計算機科學中，HTML備忘錄常常被用于創(chuàng)建網頁應用程序，用于記錄和顯示重要的信息。
一、示例
<!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 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>
八、分區(qū)
- <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、內聯(lián)框架
<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：單元格應跨越的列數(shù)；
- headers：一個或多個與單元格相關的標題單元格；
- rowspan：單元格應跨越的行數(shù)；
- 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 文檔中的元數(shù)據(jù)，它解釋了有關 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">
