Z
ZHANK
🌐

HTML 速查表

HTML5 标签大全、语义标签、表单元素、全局属性、Meta 标签速查

HTML 速查表

文档结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
    <meta name="description" content="页面描述">
    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="favicon.ico">
</head>
<body>
    <!-- 内容 -->
    <script src="app.js" defer></script>
</body>
</html>

语义标签

<header>页头</header>
<nav>导航</nav>
<main>主体内容（每页一个）</main>
<article>独立文章</article>
<section>文档分区</section>
<aside>侧边栏/补充</aside>
<footer>页脚</footer>
<figure>
    <img src="img.jpg" alt="图片">
    <figcaption>图片说明</figcaption>
</figure>

文本

<h1>一级标题</h1>  <!-- 每页只用一个 -->
<h2>二级</h2> ... <h6>六级</h6>

<p>段落</p>
<br>       <!-- 换行 -->
<hr>       <!-- 水平线 -->

<strong>重要（加粗）</strong>
<em>强调（斜体）</em>
<b>加粗（无语义）</b>
<i>斜体（无语义）</i>
<mark>高亮</mark>
<small>小号文字</small>
<del>删除</del>
<ins>插入</ins>
H<sub>2</sub>O   <!-- 下标 -->
x<sup>2</sup>    <!-- 上标 -->

<pre><code>代码块</code></pre>
<kbd>Ctrl+C</kbd>  <!-- 键盘 -->
<samp>输出</samp>  <!-- 程序输出 -->

链接与图片

<a href="url">链接</a>
<a href="url" target="_blank">新窗口打开</a>
<a href="#section">页面内跳转</a>
<a href="mailto:email@test.com">邮件</a>
<a href="tel:13800000000">电话</a>

<img src="img.jpg" alt="描述" width="300" height="200">
<img src="img.jpg" alt="描述" loading="lazy">  <!-- 懒加载 -->

列表

<ul>              <!-- 无序 -->
    <li>项目1</li>
    <li>项目2</li>
</ul>

<ol>              <!-- 有序 -->
    <li>第一步</li>
    <li>第二步</li>
</ol>

<dl>              <!-- 描述列表 -->
    <dt>术语</dt>
    <dd>定义</dd>
</dl>

表格

<table>
    <thead>
        <tr><th>姓名</th><th>年龄</th></tr>
    </thead>
    <tbody>
        <tr><td>小明</td><td>25</td></tr>
    </tbody>
    <tfoot>
        <tr><td colspan="2">合计</td></tr>
    </tfoot>
</table>
<!-- colspan 跨列, rowspan 跨行 -->

表单

<form action="/submit" method="post">
    <fieldset>
        <legend>个人信息</legend>

        <label for="name">姓名：</label>
        <input type="text" id="name" name="name" required placeholder="请输入">

        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email">

        <label for="city">城市：</label>
        <select id="city" name="city">
            <option value="">请选择</option>
            <option value="bj">北京</option>
        </select>

        <label for="msg">留言：</label>
        <textarea id="msg" name="msg" rows="4"></textarea>

        <input type="checkbox" id="agree" name="agree">
        <label for="agree">同意条款</label>

        <input type="radio" name="gender" value="male"> 男
        <input type="radio" name="gender" value="female"> 女

        <button type="submit">提交</button>
        <button type="reset">重置</button>
    </fieldset>
</form>

Input 类型

<input type="text">
<input type="password">
<input type="email">
<input type="number" min="1" max="100">
<input type="date">
<input type="time">
<input type="color">
<input type="range" min="0" max="100">
<input type="file" accept=".jpg,.png">
<input type="hidden" name="token" value="abc">
<input type="search">
<input type="url">
<input type="tel">

多媒体

<video controls width="640">
    <source src="movie.mp4" type="video/mp4">
</video>

<audio controls>
    <source src="music.mp3" type="audio/mpeg">
</audio>

<iframe src="page.html" width="600" height="400"
        sandbox="allow-scripts" loading="lazy"></iframe>

全局属性

id="unique"         class="name1 name2"
style="color:red"   title="提示文字"
hidden              lang="zh-CN"
tabindex="1"        contenteditable="true"
data-user-id="123"  <!-- 自定义数据属性 -->