Web前端入门第 11 问：HTML 常用标签有多少？全量标签有多少？

HELLO，这里是大熊学习前端开发的入门笔记。

本系列笔记基于 windows 系统。

截止发文，MDN 收录的 HTML 全量标签有 126 个，有 18 个标记已弃用。

名词解释：MDN --- MDN Web Docs （前身为 Mozilla Developer Network ）是一个开源的、由 Mozilla 基金会创建和维护的 Web 开发者资源库。

HTML 常用标签

根据大数据统计，在开发中常用的标签有 60 个左右，按功能区分如下：

文档结构标签

<!DOCTYPE>：文档类型声明

<html>：根元素

<head>：文档头部（包含元数据）

<title>：页面标题

<body>：文档主体内容

元数据与资源标签

<meta>：元信息（字符集、视口设置等）

<link>：引入外部资源（CSS、图标）

<style>：内联 CSS

<script>：JavaScript 代码或引用

语义化标签（HTML5）

<header>：页眉

<footer>：页脚

<nav>：导航栏

<article>：独立内容

<section>：内容区块

<aside>：侧边栏

<main>：主体内容

<menu>：交互式无序列表内容

<figure>、<figcaption>：图片/图表与说明

容器与布局标签

<div>：通用块级容器

<span>：通用行内容器

文本与段落标签

<h1>-<h6>：标题

<p>：段落

<span>：行内文本容器

<br>：换行

<hr>：水平分割线

<pre>：保留格式文本

<strong>：强调（粗体）

<em>：强调（斜体）

<blockquote>：长引用

链接与媒体标签

<a>：超链接

<img>：图片

<video>：视频

<audio>：音频

<source>：媒体资源（配合 video/audio 使用）

列表标签

<ul>：无序列表

<ol>：有序列表

<li>：列表项

<dl>、<dt>、<dd>：定义列表

表单与输入标签

<form>：表单容器

<input>：输入控件（文本、密码、按钮等）

<textarea>：多行文本输入

<select>、<option>：下拉选择

<label>：表单标签

<button>：按钮

<fieldset>、<legend>：表单分组

表格标签

<table>：表格

<tr>：表格行

<td>：单元格

<th>：表头单元格

<thead>、<tbody>、<tfoot>：表格结构

图形渲染

<canvas>： 2D 、3D 图形及图形动画绘制

内嵌框架元素

<iframe>：嵌入三方页面

总结

标签那么多，是不是光 HTML 都够喝一壶了？还学啥 css，js ？

说实话，除了功能性标签（1,2,4,6,8,10,11 中列出的标签，大约27个）无法替代，其他标签嘛...一言难尽！

就浏览器端渲染的 vue 项目来说，就一个 div 标签就可行走天下了。

常用标签使用示例

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>HTML 常用标签一览</title>

  <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon">

  <style>

    body {

      font-size: 14px;

    }

  </style>

</head>

<body>

  <h3>3. 语义化标签（HTML5）</h3>

  <header>页眉</header>

  <footer>页脚</footer>

  <nav>导航栏</nav>

  <article>独立内容</article>

  <section>内容区块</section>

  <aside>侧边栏</aside>

  <main>主体内容</main>

  <menu>

    <li><button id="share">交互式无序列表内容</button></li>

  </menu>

  <figure>

    <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/elephant-660-480.jpg"

      alt="Elephant at sunset" />

    <figcaption>图片/图表与说明</figcaption>

  </figure>

  <h3>4. 容器与布局标签</h3>

  <div>通用块级容器</div>

  <span>通用行内容器</span>

  <h3>5. 文本与段落标签</h3>

  <h1>1级标题</h1>

  <h2>2级标题</h2>

  <h3>3级标题</h3>

  <h4>4级标题</h4>

  <h5>5级标题</h5>

  <h6>6级标题</h6>

  <p>段落</p>

  <span>行内文本容器</span>

  <br>换行</br>

  <hr>水平分割线</hr>

  <pre>保留格式文本</pre>

  <strong>强调（粗体）</strong>

  <em>强调（斜体）</em>

  <blockquote>长引用</blockquote>

  <h3>6. 链接与媒体标签</h3>

  <a href="https://www.baidu.com">超链接</a>

  <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/elephant-660-480.jpg"

    alt="Elephant at sunset">图片</img>

  <video controls width="250">

    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm" />

    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4" />

  </video>

  <div>视频</div>

  <audio controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"></audio>

  <div>音频</div>

  <h3>7. 列表标签</h3>

  <ul>

    <li>无序列表项</li>

    <li>无序列表项</li>

  </ul>

  <ol>

    <li>有序列表项</li>

    <li>有序列表项</li>

  </ol>

  <dl>

    <dt>定义列表 dt</dt>

    <dd>定义列表 dd</dd>

    <dt>定义列表 dt</dt>

    <dd>定义列表 dd</dd>

  </dl>

  <h3>8. 表单与输入标签</h3>

  <form action="/submit-form" method="post">

    <fieldset>

      <legend>用户信息</legend>

      <label for="username">用户名:</label>

      <input type="text" id="username" name="username" required>

      <br><br>

      <label for="email">电子邮件:</label>

      <input type="email" id="email" name="email" required>

      <br><br>

      <label for="password">密码:</label>

      <input type="password" id="password" name="password" required>

      <br><br>

      <label for="bio">个人简介:</label>

      <textarea id="bio" name="bio" rows="4" cols="50"></textarea>

      <br><br>

      <label for="gender">性别:</label>

      <select id="gender" name="gender" required>

        <option value="">请选择</option>

        <option value="male">男</option>

        <option value="female">女</option>

        <option value="other">其他</option>

      </select>

      <br><br>

      <button type="submit">提交</button>

      <button type="reset">重置</button>

    </fieldset>

  </form>

  <h3>9. 表格标签</h3>

  <table>

    <thead>

      <tr>

        <th>序号</th>

        <th>姓名</th>

        <th>年龄</th>

        <th>城市</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td>1</td>

        <td>张三</td>

        <td>28</td>

        <td>北京</td>

      </tr>

      <tr>

        <td>2</td>

        <td>李四</td>

        <td>34</td>

        <td>上海</td>

      </tr>

      <tr>

        <td>3</td>

        <td>王五</td>

        <td>22</td>

        <td>广州</td>

      </tr>

    </tbody>

    <tfoot>

      <tr>

        <td colspan="4">总计人数: 3</td>

      </tr>

    </tfoot>

  </table>

  <h3>10. 图形渲染</h3>

  <canvas id="myCanvas"></canvas> 2D 、3D 图形及图形动画绘制(需要JS能力)

  <h3>11. 内嵌框架元素</h3>

  <!-- <iframe src="https://www.baidu.com/"></iframe> -->

  <iframe src="./example-11.html"></iframe>

  <script>

    console.log('Hello World!')

    const canvas = document.getElementById('myCanvas');

    const ctx = canvas.getContext('2d');

    // 设置画笔颜色

    ctx.strokeStyle = 'blue';

    // 开始路径

    ctx.beginPath();

    // 圆心位置 (x, y), 半径, 起始角度, 结束角度, 方向 (true为顺时针, false为逆时针)

    ctx.arc(150, 75, 50, 0, Math.PI * 2, false);

    // 闭合路径

    ctx.closePath();

    // 描边

    ctx.stroke();

  </script>

</body>

</html>

参考资料：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a