HTML備忘單

此 HTML 快速參考備忘單以易于閱讀的格式列出了常見(jiàn)的 HTML 標(biāo)記及其屬性。

開(kāi)始

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

這段代碼將會(huì)被注釋掉。

段落

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

請(qǐng)參閱：<p>標(biāo)簽

鏈接

<a  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`	鏈接網(wǎng)址的關(guān)系
`target`	鏈接目標(biāo)位置： `_self`, `_blank`, `_top`,`_parent`

請(qǐng)參閱：<a> 標(biāo)簽

圖片

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

`src`	必需，圖像位置（URL \| 路徑）
`alt`	圖像描述
`width`	圖像的寬度
`height`	圖像的高度
`loading`	瀏覽器應(yīng)該如何加載

請(qǐng)參閱：<img>標(biāo)簽

文本格式

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

標(biāo)題

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

您的頁(yè)面上應(yīng)該只有一個(gè) h1

分區(qū)

`<div></div>`	頁(yè)面內(nèi)容的部分或部分
`<span></span>`	其他內(nèi)容中的文本部分
`<p></p>`	文字段落
`<br>`	換行
`<hr>`	基本水平線

這些是用于將您的頁(yè)面劃分為多個(gè)部分的標(biāo)簽

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>

內(nèi)聯(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>

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>

表格標(biāo)簽

<table>	定義一個(gè)表
<th>	定義表格中的標(biāo)題單元格
<tr>	定義表格中的一行
<td>	定義表格中的單元格
<caption>	定義表格標(biāo)題
<colgroup>	定義一組列
<col>	定義表中的列
<thead>	分組標(biāo)題內(nèi)容
<tbody>	將正文內(nèi)容分組
<tfoot>	將頁(yè)腳內(nèi)容分組

<td> 屬性

`colspan`	單元格應(yīng)跨越的列數(shù)
`headers`	一個(gè)或多個(gè)與單元格相關(guān)的標(biāo)題單元格
`rowspan`	單元格應(yīng)跨越的行數(shù)

請(qǐng)參閱：<td>屬性

<th> 屬性

`colspan`	單元格應(yīng)跨越的列數(shù)
`headers`	一個(gè)或多個(gè)與單元格相關(guān)的標(biāo)題單元格
`rowspan`	單元格應(yīng)跨越的行數(shù)
`abbr`	單元格內(nèi)容的描述
scope	標(biāo)題元素涉及

請(qǐng)參閱：tth>屬性

HTML 列表

無(wú)序列表

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

請(qǐng)參閱：無(wú)序列表元素

有序列表

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

請(qǐng)參閱：有序列表元素

定義列表

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

請(qǐng)參閱：描述列表元素

HTML 表單

表單標(biāo)簽

<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>元素用于收集信息并將其發(fā)送到外部源。

表單屬性

`name`	腳本形式的名稱
`action`	表單腳本的 URL
`method`	HTTP 方法，`POST`/ `GET` （默認(rèn)）
`enctype`	媒體類型，請(qǐng)參見(jiàn)enctype
`onsubmit`	在提交表單時(shí)運(yùn)行
`onreset`	當(dāng)表單被重置時(shí)運(yùn)行

標(biāo)簽標(biāo)簽

<!-- 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在標(biāo)簽中引用輸入的id屬性

輸入標(biāo)簽

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

請(qǐng)參閱：HTML 輸入標(biāo)簽

文本區(qū)域標(biāo)簽

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

textarea 是一個(gè)多行文本輸入控件

單選按鈕

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

單選按鈕用于讓用戶選擇一個(gè)

復(fù)選框

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

復(fù)選框允許用戶選擇一個(gè)或多個(gè)

選擇標(biāo)簽

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

選擇框是選項(xiàng)的下拉列表

字段集標(biāo)簽

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

數(shù)據(jù)列表標(biāo)簽

<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到服務(wù)器的數(shù)據(jù)；Reset默認(rèn)值

HTML 輸入標(biāo)簽

輸入屬性

輸入標(biāo)簽是一個(gè)空元素，標(biāo)識(shí)要從用戶那里獲取的特定類型的字段信息。

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

`type="…"`
輸入的數(shù)據(jù)類型
`value="…"`
默認(rèn)值
`name="…"`
用于在 HTTP 請(qǐng)求中描述此數(shù)據(jù)
`id="…"`
其他 HTML 元素的唯一標(biāo)識(shí)符
`readonly`
阻止用戶修改
`disabled`
停止任何交互
`checked`
單選或復(fù)選框選擇與否
`required`
強(qiáng)制性
`placeholder="…"`
添加臨時(shí)
`autocomplete="off"`
禁用自動(dòng)完成
`autocapitalize="none"`
禁用自動(dòng)大寫
`inputmode="…"`
顯示特定的鍵盤。見(jiàn)輸入模式
`list="…"`
關(guān)聯(lián)數(shù)據(jù)列表的 id
`maxlength="…"`
最大字符數(shù)
`minlength="…"`
最少字符數(shù)
`min="…"`
范圍和數(shù)字上的最小數(shù)值
`max="…"`
范圍和數(shù)字上的最大數(shù)值
`step="…"`
數(shù)字如何在范圍和數(shù)字中遞增
`pattern="…"`
指定正則表達(dá)式。查看模式
`multiple`
多個(gè)條目
`autofocus`
專注
`spellcheck`
執(zhí)行拼寫檢查

輸入類型

`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 當(dāng)它的鍵盤聚焦時(shí)

另請(qǐng)參閱：CSS 備忘單的選擇器

HTML 元標(biāo)簽

元標(biāo)簽

元標(biāo)記描述 HTML 文檔中的元數(shù)據(jù)。它解釋了有關(guān) 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">

請(qǐng)參閱：推特卡片文檔

Geotagging 地理標(biāo)記

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

請(qǐng)參閱：地理標(biāo)記

另見(jiàn)

HTML 4.01 規(guī)范 (w3.org)

? Previous Next ?

`type="…"`	輸入的數(shù)據(jù)類型
`value="…"`	默認(rèn)值
`name="…"`	用于在 HTTP 請(qǐng)求中描述此數(shù)據(jù)
`id="…"`	其他 HTML 元素的唯一標(biāo)識(shí)符
`readonly`	阻止用戶修改
`disabled`	停止任何交互
`checked`	單選或復(fù)選框選擇與否
`required`	強(qiáng)制性
`placeholder="…"`	添加臨時(shí)
`autocomplete="off"`	禁用自動(dòng)完成
`autocapitalize="none"`	禁用自動(dòng)大寫
`inputmode="…"`	顯示特定的鍵盤。見(jiàn)輸入模式
`list="…"`	關(guān)聯(lián)數(shù)據(jù)列表的 id
`maxlength="…"`	最大字符數(shù)
`minlength="…"`	最少字符數(shù)
`min="…"`	范圍和數(shù)字上的最小數(shù)值
`max="…"`	范圍和數(shù)字上的最大數(shù)值
`step="…"`	數(shù)字如何在范圍和數(shù)字中遞增
`pattern="…"`	指定正則表達(dá)式。查看模式
`multiple`	多個(gè)條目
`autofocus`	專注
`spellcheck`	執(zhí)行拼寫檢查

色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

HTML教程