HTML3.2HTML3 基础核心标签

<html> <head> <body> <title>
页面基础骨架，HTML3规定所有网页必须包含这四层结构
<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>页面所有可见内容</body>
</html>
<p> <br> <hr> <b> <i> <u>
段落、换行、分割线、基础文字物理样式标签
<p>一段普通文字 <b>加粗文字</b> <i>斜体</i></p>
分割线：<hr>
强制换行<br>
<u>下划线文字</u>
<a> <ul> <ol> <li> <table> <tr> <td> <th>
超链接、有序/无序列表、表格布局，HTML3网页布局核心
<a href="/index.html">跳转链接</a>
<ul><li>列表项1</li></ul>
<table border="1">
  <tr><th>表头</th><td>单元格</td></tr>
</table>

HTML4.01HTML4 标准通用标签

<div> <span>
块级容器div、行内容器span，HTML4页面布局核心容器
<div class="box">块级容器，独占一行</div>
文字中间<span style="color:red">行内文字</span>不换行
<h1> ~ <h6>
6级标题标签，h1权重最高，h6最小，用于文档层级划分
<h1>一级主标题</h1>
<h2>二级副标题</h2>
<h3>三级小标题</h3>
<pre> <code> <blockquote>
保留格式文本、代码标记、段落引用标签
<pre>保留空格
和换行文本</pre>
代码：<code>alert(1)</code>
<blockquote>引用一段外部文字</blockquote>
<form> <input> <select> <textarea> <button>
HTML4完整表单基础组件，用于数据提交
<form action="/submit" method="post">
  用户名：<input type="text" name="user">
  <textarea rows="3">多行输入框</textarea>
  <button type="submit">提交</button>
</form>

HTML5HTML5 语义化布局标签

<header> <nav> <main> <aside> <footer>
替代div的语义化布局，搜索引擎识别页面结构
<header>页面头部导航区</header>
<nav>导航菜单</nav>
<main>页面主体内容</main>
<aside>侧边栏</aside>
<footer>页面底部版权</footer>
<section> <article> <figure> <figcaption>
内容区块、独立文章、图片组+图片说明语义标签
<article>
  <section>文章分段区域</section>
  <figure>
    <img src="img.jpg" alt="图片">
    <figcaption>图片描述文字</figcaption>
  </figure>
</article>
<mark> <time> <details> <summary>
高亮标记、时间语义、可折叠展开详情面板
<mark>高亮重点文字</mark>
发布时间：<time datetime="2026-06-13">2026-06-13</time>
<details>
  <summary>点击展开详情</summary>
  折叠隐藏的详细内容
</details>

HTML5HTML5 音视频媒体标签

<audio> <video> <source>
原生音频、视频播放器，无需Flash插件，source多格式兼容
<audio controls>
  <source src="music.mp3" type="audio/mpeg">
</audio>

<video width="600" controls>
  <source src="movie.mp4" type="video/mp4">
</video>
<track>
视频字幕轨道标签，加载vtt字幕文件
<video controls>
  <source src="video.mp4">
  <track kind="subtitles" src="cn.vtt" srclang="zh" label="中文字幕" default>
</video>

HTML5HTML5 表单新增标签与类型

<datalist> <output>
输入下拉候选列表、表单计算输出容器
<input list="cityList" placeholder="输入城市">
<datalist id="cityList">
  <option value="北京"></option>
  <option value="上海"></option>
</datalist>

<output name="res">计算结果</output>
input新增type：email/tel/url/number/range/date
原生表单校验，手机唤起对应数字/邮箱键盘
邮箱：<input type="email">
手机号：<input type="tel">
数字：<input type="number">
日期：<input type="date">
滑块：<input type="range" min="0" max="100">

HTML5HTML5 绘图/矢量标签

<canvas>
JS动态2D画布，绘制图形、动画、游戏
<canvas id="cvs" width="400" height="300">浏览器不支持画布</canvas>
<script>
  const ctx = document.getElementById('cvs').getContext('2d');
  ctx.fillRect(10,10,100,100);
</script>
<svg>
内置矢量图形标签，无损缩放图标图形
<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

HTML5HTML5 其余新增标签

<meter> <progress>
数值度量仪表、加载进度条原生组件
进度：<progress value="60" max="100"></progress>
容量：<meter value="0.7" min="0" max="1"></meter>
<iframe> <embed> <object> <param>
嵌入网页、第三方媒体、插件资源
<iframe src="https://example.com" width="800" height="400"></iframe>
<embed src="file.swf" width="500">
<object data="demo.pdf"></object>

废弃HTML标准移除、不推荐使用标签

<font> <center> <strike> <applet>
HTML5彻底废弃，改用CSS样式替代，applet Java插件已全部浏览器移除
<font size="3" color="green">旧字体标签，弃用CSS替代</font>
<center>旧居中标签，改用text-align</center>
<strike>删除线，改用CSS text-decoration</strike>
<frameset> <frame> <noframes>
页面分框架标签，HTML5完全删除，使用iframe或路由替代
<frameset cols="30%,70%">
  <frame src="left.html">
  <frame src="main.html">
</frameset>