<!--HTML 注释--> <!--HTML 注释格式-->
<!--example.html--> <!--文件后缀-->
<!DOCTYPE html> <!--文档声明-->
<html lang="zh"> <!--根元素-->
<head> <!--配置信息-->
<meta charset="UTF-8"> <!--元数据-->
<title>文档标题</title> <!--文档标题-->
<base target="_blank" href="http://example.com/"> <!--根URL-->
<link rel="icon" href="favicon.ico"> <!--图标-->
<link rel="stylesheet" href="example.css"> <!--外部样式链接-->
<style></style> <!--CSS样式-->
</head>
<body> <!--文档内容-->
<header> <!--头部内容-->
<nav></nav> <!--导航栏-->
</header>
<main> <!--主体内容-->
<section> <!--区域内容-->
<hgroup> <!--标题集合-->
<h1>一级标题</h1> <!--一级标题-->
<h2>二级标题</h2> <!--二级标题-->
<h3>三级标题</h3> <!--三级标题-->
<h4>四级标题</h4> <!--四级标题-->
<h5>五级标题</h5> <!--五级标题-->
<h6>六级标题</h6> <!--六级标题-->
</hgroup>
<q>块级短引用</q> <!--块级短引用-->
<blockquote>块级长引用</blockquote> <!--块级长引用-->
<article> <!--文章内容-->
<span>行内字块</span> <!--行内字块-->
<hr> <!--水平线-->
<br> <!--换行-->
<details> <!--详情展示-->
<summary>详情标题</summary> <!--摘要-->
<p> <!--块级段落-->
块级<wbr />段落 <!--可换行-->
<cite> <!--引用元素-->
<a href="#" target="_blank">链接</a> <!--锚元素链接-->
</cite>
<abbr title="完整描述">缩写</abbr> <!--缩写元素-->
<strong>粗体</strong> <!--粗体-->
<em>斜体</em> <!--斜体-->
<del>删除</del> <!--删除-->
<ins>下划线</ins> <!--下划线-->
<u>下划线</u> <!--下划线-->
<mark>突出文本</mark> <!--突出文本-->
<sup>上标</sup> <!--上标-->
<sub>下标</sub> <!--下标-->
<bdi>文本隔离</bdi> <!--双向隔离元素-->
<bdo dir="rtl">文本方向</bdo> <!--双向文本覆盖元素-->
<data value="shenzhen">深圳</data> <!--机器可读数据-->
<time datetime="2025-04-01">4月1日</time> <!--机器可读时间-->
<i>短语</i> <!--短语-->
<dfn>术语</dfn> <!--自定义术语-->
<kbd>cmd</kbd> <!--键盘元素-->
<ruby> <!--注音文本-->
汉
<rp>(</rp> <!--不支持注音显示-->
<rt>han</rt> <!--注音-->
<rp>)</rp>
</ruby>
</p>
</details>
</article>
<div> <!--块级容器-->
<pre> <!--预定义内容-->
预定义格式文本，原样输出。
<code>const a = '123'</code> <!--行内代码元素-->
</pre>
</div>
</section>
<aside> <!--侧边栏-->
<menu> <!--无序列表-->
<li>无序列表项一</li> <!--列表项-->
</menu>
<ul> <!--无序列表-->
<li>无序列表项一</li> <!--列表项-->
<li>无序列表项二</li>
</ul>
<ol> <!--有序列表-->
<li>有序列表项一</li> <!--列表项-->
<li>有序列表项二</li>
</ol>
<dl> <!--自定义列表-->
<dt>术语</dt> <!--列表项术语-->
<dd>术语描述</dd> <!--列表项术语描述-->
</dl>
</aside>
<section>
<picture> <!--自动选择源-->
<source srcset="example.png" /> <!--图片源-->
<img src="example.png" alt="图片提示" /> <!--图片元素-->
</picture>
<figure> <!--独立内容-->
<img src="example.png" alt="图片提示"> <!--图片元素-->
<figcaption>图片标题</figcaption> <!--独立内容标题-->
</figure>
<audio controls> <!--音频元素-->
<source src="example.mp3" type="audio/mp3"> <!--音频源-->
</audio>
<video controls> <!--视频元素-->
<source src="example.mp4" type="video/mp4"> <!--视频源-->
<track src="example.vtt" srclang="zh" /> <!--嵌入文本轨-->
</video>
<embed src="example.mov" type="video/quicktime"> <!--嵌入资源-->
<object></object> <!--嵌入资源-->
<iframe></iframe> <!--嵌入页面-->
<map name="map"> <!--图像映射元素-->
<area></area> <!--可点击的链接区域-->
</map>
</section>
<section>
<table> <!--表格-->
<caption>表格标题</caption> <!--表格标题-->
<colgroup> <!--列样式集合-->
<col> <!--列样式元素-->
<col>
</colgroup>
<thead> <!--列标题集合-->
<tr> <!--表格行-->
<th>列标题一</th> <!--列标题-->
<th>列标题二</th>
</tr>
</thead>
<tbody> <!--表格内容-->
<tr>
<td>数据一</td> <!--表格数据-->
<td>数据二</td>
</tr>
<tr>
<td>数据三</td>
<td>数据四</td>
</tr>
</tbody>
<tfoot> <!--表格底部信息-->
<tr>
<td colspan="2">底部信息</td>
</tr>
</tfoot>
</table>
</section>
<section>
<search> <!--搜索元素-->
<form action=""> <!--表单元素-->
<label for="movie">查找</label> <!--标签元素-->
<input type="search" id="movie" name="search" /> <!--搜索输入框-->
<button type="summit">搜索</button> <!--按钮-->
</form>
</search>
<form action="" method="get">
<fieldset> <!--表单框-->
<legend>表单标题</legend> <!--表单标题-->
<input type="text" value="文本" required> <!--单行文本输入框-->
<input type="button" value="按钮"> <!--按钮输入框-->
<input type="color"> <!--颜色输入框-->
<input type="date"> <!--年月日输入框-->
<input type="month"> <!--月份输入框-->
<input type="week"> <!--星期输入框-->
<input type="time"> <!--时间输入框-->
<input type="datetime-local"> <!--年月日时分输入框-->
<input type="email" value="example@exapmle.com"> <!--邮箱输入框-->
<input type="file"> <!--文件输入框-->
<input type="image" src="example.png"> <!--图片输入框-->
<input type="number" value="1"> <!--数字输入框-->
<input type="password" value="1"> <!--密码输入框-->
<input type="range" min="1" max="10" step="1"> <!--数字范围输入框-->
<input type="reset"> <!--重置输入框-->
<input type="submit"> <!--提交输入框-->
<input type="tel" value="电话"> <!--电话输入框-->
<input type="url" value="url"> <!--url输入框-->
<input type="hidden"> <!--隐藏输入框-->
<input type="radio" name="radio"> <!--单选输入框-->
<input type="radio" name="radio">
<input type="checkbox" name="checkbox"> <!--多选输入框-->
<input type="checkbox" name="checkbox">
<textarea name="textarea" cols="30" rows="2">多行文本</textarea> <!--多行文本-->
<output>计算结果</output> <!--计算结果-->
<samp>程序输出</samp> <!--程序输出-->
<var>变量</var> <!--变量-->
<meter min="200" max="500" value="300">计量器</meter> <!--计量器-->
<progress max="100" value="80">80%</progress> <!--进度条-->
<select name="select"> <!--下拉选择框-->
<optgroup label="分组一"> <!--选择框分组-->
<option value="value1">选项一</option> <!--选择框选项-->
<option value="value2">选项二</option>
</optgroup>
<optgroup label="分组二" disabled>
<option value="value3">选项三</option>
<option value="value4">选项四</option>
</optgroup>
</select>
<input list="datalist"> <!--关联数据列表输入框-->
<datalist id="datalist"> <!--带搜索数据列表-->
<option>选项一</option> <!--数据列表选项-->
<option disabled>选项二</option>
<option>选项三</option>
<option>选项四</option>
</datalist>
</fieldset>
</form>
</section>
<canvas></canvas> <!--画布元素-->
</main>
<footer> <!--底部内容-->
<address></address> <!--联系信息-->
<small>Copyright</small> <!--备注信息-->
</footer>
<template> <!--内容模板-->
<slot name="desc">插槽</slot> <!--占位元素-->
<span slot="desc"></span>
</template>
<script></script> <!--JavaScript脚本-->
<script src="example.js"></script> <!--外部脚本链接-->
<noscript></noscript> <!--不支持JavaScript显现-->
</body>
</html>
