Skip to main content

HTML 速查表

HTML 基本文档​

<!DOCTYPE html>
<html>
  <head>
    <title>文档标题</title>
  </head>
  <body>
     可见文本... 
  </body>
</html>

基本标签 Basic Tags​

<!-- Heading -->
<h1>最大的标题</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>最小的标题</h6>
 
<!-- Paragraph -->
<p>这是一个段落。</p>

<!-- 换行 -->
<br /> 

<!-- 水平线  -->
<hr />
  
<!-- 这是注释 -->

文本格式化 Formatting​

<b>粗体</b>
<i>斜体</i>
<q>引用</q>
<u>下划线</u>
<s>删除线</s>
<em>强调</em>
<strong>重要</strong>
<mark>标记</mark>
<code>代码</code>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>小字体</small>

<abbr>缩写</abbr>
<address>地址</address>
<bdo>文字方向</bdo>
<blockquote>块引用从另一个源引用的部分）</blockquote>
<cite>引用</cite>
<dfn>定义</dfn>
<ins>插入文本</ins>
<del>删除文本</del>
<var>变量文本</var>
<sub>下标文本</sub>
<sup>上标文本</sup>
<!-- 普通的链接 -->
<a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer">Baidu</a>

<!-- 图像链接 -->
<a href="https://www.baidu.com" target="_blank">
  <img src="https://www.baidu.com/img/bd_logo1.png" alt="百度" />
</a>

<!-- 邮箱链接 -->
<a href="mailto:12345@qq.com">发送邮件</a>

<!-- 书签 -->
<a id="tips"></a>

<!-- 提示部分 -->
<a href="#tips">跳转到提示书签部分</a>

图片 Images​

<img src="https://www.baidu.com/img/bd_logo1.png" alt="百度" />

列表 List​

无序列表 Unordered List​

<ul>
  <li>列表项</li>
  <li>列表项</li>
  <li>列表项</li>
</ul>

有序列表 Ordered List​

<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

定义列表 Definition List​

<dl>
  <dt>定义列表项 1</dt>
  <dd>定义列表项 1 的描述</dd>
  <dt>定义列表项 2</dt>
  <dd>定义列表项 2 的描述</dd>
</dl>

表格 Tables​

<table>
  <thead>
    <tr>
      <th>表头 1</th>
      <th>表头 2</th>
      <th>表头 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>单元格 1</td>
      <td>单元格 2</td>
      <td>单元格 3</td>
    </tr>
    <tr>
      <td>单元格 4</td>
      <td>单元格 5</td>
      <td>单元格 6</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>表尾 1</td>
      <td>表尾 2</td>
      <td>表尾 3</td>
    </tr>
  </tfoot>
</table>

表单 Form​

输入框 Input​

<input type="text" value="文本" />
<input type="password" value="密码" />
<input type="email" value="邮箱" />
<input type="tel" value="电话" />
<input type="url" value="链接" />
<input type="number" value="数字" />
<input type="range" value="范围" />
<input type="date" value="日期" />
<input type="time" value="时间" />
<input type="datetime-local" value="本地日期时间" />
<input type="month" value="月份" />
<input type="week" value="周" />
<input type="color" value="颜色" />
<input type="file" value="文件" />
<input type="checkbox" value="复选框" />
<input type="radio" value="单选框" />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
<input type="button" value="按钮" />
<textarea>文本区域</textarea>
<select>
  <option>下拉列表</option>
</select>

文本域 Textarea​

<textarea></textarea>

下拉框 Select​

<select>
  <option value="1">选项 1</option>
  <option value="2">选项 2</option>
  <option value="3">选项 3</option>
</select>

按钮 Button​

<button>按钮</button>

表单 Form​

<form action="./action_page.php" method="get">
  <!-- 表单内容 -->
</form>

媒体 Media​

图像 Image​

<img src="https://www.baidu.com/img/bd_logo1.png" alt="百度" />

音频 Audio​

<audio controls>
  <source src="horse.ogg" type="audio/ogg" />
  <source src="horse.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

视频 Video​

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

框架 Frames​

<iframe src="https://www.baidu.com" title="百度"></iframe>

脚注 Footnotes​

<p>
  这是一个脚注
  <sup>
    <a href="#fn1" id="ref1">1</a>
  </sup>
</p>
<p>
  这是一个脚注
  <sup>
    <a href="#fn2" id="ref2">2</a>
  </sup>
</p>
<hr />
<p>
  脚注 1
  <a href="#ref1" id="fn1"> 1 </a>
</p>
<p>
  脚注 2
  <a href="#ref2" id="fn2"> 2 </a>
</p>

代码 Code​

行内代码 Inline Code​

<p>这是一个 <code>&lt;div&gt;</code> 元素</p>

块级代码 Block Code​

<pre>
  <code>
    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
      &lt;head&gt;
        &lt;title&gt;Page Title&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;h1&gt;My First Heading&lt;/h1&gt;
        &lt;p&gt;My first paragraph.&lt;/p&gt;
      &lt;/body&gt;
    &lt;/html&gt;
  </code>
</pre>