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 标签就可行走天下了。
推荐学习资源
MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a
w3school: https://www.w3school.com.cn/cssref/css_entities.asp
常用标签使用示例
<!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
浙公网安备 33010602011771号