/html/
HTML备忘单
阅读(3186) 赞(0)

HTML备忘单

2021-08-30 09:17:07 更新

此 HTML 快速参考备忘单以易于阅读的格式列出了常见的 HTML 标记及其属性。

开始

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 QuickRef.ME!</h1>
</body>
</html>

注释

<!-- this is a comment -->

这段代码将会被注释掉。

段落

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

请参阅：<p>标签

链接

<a href="https://quickref.me" rel="external nofollow" target="_blank" >QuickRef</a>
<a href="mailto:jack@abc.com">Email</a>
<a href="tel:+12345678">Call</a>
<a href="sms:+12345678&body=ha%20ha">Msg</a>
href 超链接指向的 URL
rel 链接网址的关系
target 链接目标位置：
_self, _blank, _top,_parent

请参阅：<a> 标签

图片

<img loading="lazy" src="https://www.programbbs.com/pic/html/xxx.png" rel="external nofollow"  alt="Describe image here" width="400" height="400">
src 必需，图像位置（URL | 路径）
alt 图像描述
width 图像的宽度
height 图像的高度
loading 浏览器应该如何加载

请参阅：<img>标签

文本格式

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

标题

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

您的页面上应该只有一个 h1

分区

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

这些是用于将您的页面划分为多个部分的标签

JavaScript在HTML中

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

外部JavaScript

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

CSS在HTML中

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

外部CSS

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

内联框架

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

HTML 表格

表格示例

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

表格标签

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

<td> 属性

colspan 单元格应跨越的列数
headers 一个或多个与单元格相关的标题单元格
rowspan 单元格应跨越的行数

请参阅：<td>属性

<th> 属性

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

请参阅：tth>属性

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 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<form>元素用于收集信息并将其发送到外部源。

表单属性

name 脚本形式的名称
action 表单脚本的 URL
method HTTP 方法，POST/ GET （默认）
enctype 媒体类型，请参见enctype
onsubmit 在提交表单时运行
onreset 当表单被重置时运行

标签标签

<!-- Nested label -->
<label>Click me 
<input type="text" id="user" name="name"/>
</label>

<!-- 'for' attribute -->
<label for="user">Click me</label>
<input id="user" type="text" name="name"/>

​for在标签中引用输入的id属性

输入标签

<label for="Name">Name:</label>
<input type="text" name="Name" id="">

请参阅：HTML 输入标签

文本区域标签

<textarea rows="2" cols="30" name="address" id="address"></textarea>

textarea 是一个多行文本输入控件

单选按钮

<input type="radio" name="gender" id="m">
<label for="m">Male</label>
<input type="radio" name="gender" id="f">
<label for="f">Female</label>

单选按钮用于让用户选择一个

复选框

<input type="checkbox" name="sports" id="soccer">
<label for="soccer">Soccer</label>
<input type="checkbox" name="sports" id="baseball">
<label for="baseball">Baseball</label>

复选框允许用户选择一个或多个

选择标签

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

选择框是选项的下拉列表

字段集标签

<fieldset>
    <legend>Choose your favorite monster</legend>
    <input type="radio" id="kraken" name="monster">
    <label for="kraken">Kraken</label><br/>
    <input type="radio" id="sasquatch" name="monster">
    <label for="sasquatch">Sasquatch</label><br/>
</fieldset>
Choose your favorite monster


数据列表标签

<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="Submit">
  <input type="reset" value="Reset">
</form>

Submit到服务器的数据；Reset默认值

HTML 输入标签

输入属性

输入标签是一个空元素，标识要从用户那里获取的特定类型的字段信息。 

<input type="text" name="?" value="?" minlength="6"	 required />

type="…"

输入的数据类型

value="…"

默认值

name="…"

用于在 HTTP 请求中描述此数据

id="…"

其他 HTML 元素的唯一标识符

readonly

阻止用户修改

disabled

停止任何交互

checked

单选或复选框选择与否

required

强制性

placeholder="…"

添加临时

autocomplete="off"

禁用自动完成

autocapitalize="none"

禁用自动大写

inputmode="…"

显示特定的键盘。见输入模式

list="…"

关联数据列表的 id

maxlength="…"

最大字符数

minlength="…"

最少字符数

min="…"

范围和数字上的最小数值

max="…"

范围和数字上的最大数值

step="…"

数字如何在范围和数字中递增

pattern="…"

指定正则表达式。查看模式

multiple

多个条目

autofocus

专注

spellcheck

执行拼写检查

输入类型

type="date"
type="time"
type="month"
type="datetime-local"
type="week"
type="checkbox"
type="radio"
type="color"
type="file"
type="hidden"
type="number"
type="range"
type="text"
type="search"
type="password"
type="email"
type="tel"
type="url"
type="image"
type="reset"
type="button" Button
type="submit"

输入 CSS 选择器

:focus 当它的键盘聚焦时

另请参阅：CSS 备忘单的选择器

HTML 元标签

元标签

元标记描述 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'>

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

被 Facebook、Instagram、Pinterest、LinkedIn 等使用。

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

请参阅：推特卡片文档

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

请参阅：地理标记

另见


    ← HTML元素嵌套嵌套错误可能引起的问题

    推荐文章

    推荐教程

    最新教程