学习HTML也会遇到很困惑的事情，虽然HTML并不是意义上的编程语言，但它对于记忆力的考验还是很大的。年轻人记忆力好，学习HTML不算难，像我上了一些年纪的人，学习HTML可就是另外的情况了。HTML的标签不难理解，只是记忆力跟不上了，经常是学了这个标签，忘了那个标签。为了能更快速的学习HTML标签，我做了如下的总结：
HTML5在很大程度上做了简化，和之前的版本有很大的区别。在页头的声明和主体部分非常明显，页头直接用DOCTYPE HTML简化，主体页增加了大量的语义化的标签。HTML作为框架结构性的标签语言，我觉得开始的时候，只要记住以下常用的标签就可以了，其余的标签仅做了解。
1. HTML文档结构标签
<!DOCTYPE html> <!-- 声明HTML5文档类型，必须位于首行 --> <html lang="zh-CN"></html> <!-- 根元素，lang属性定义页面语言 --> <head> <!-- 文档头部，包含元数据和链接 --><meta charset="UTF-8"> <!-- 定义字符编码为UTF-8 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 响应式视口设置 --> <title>页面标题</title> <!-- 浏览器标签页标题，SEO重要 --> <link rel="stylesheet" href="style.css"> <!-- 引入外部CSS文件 --> <style>/* 内部CSS样式 */</style> <!-- 内部样式表 --> <script src="script.js" defer></script> <!-- 引入JS文件，defer延迟执行 --> <body></body> <!-- 文档主体内容区域 -->
2. HTML内容结构标签
<div id="container" class="wrapper" contenteditable="true"> <!-- 通用容器，contenteditable可编辑 --> <span class="inline-text" dir="ltr">行内文本</span> <!-- 行内容器，dir文字方向 --> <ul type="disc" start="1"> <!-- 无序列表，type标记类型 --> <ol reversed> <!-- 有序列表，reversed倒序 --> <li value="5">列表项</li> <!-- 列表项，value指定编号 --> <dl> <!-- 定义列表 --> <dt>术语</dt> <!-- 定义术语 --> <dd>描述</dd> <!-- 定义描述 --> <iframe src="page.html" width="100%" height="500" frameborder="0" sandbox="allow-scripts"> <!-- 内联框架，sandbox安全限制 -->
3. HTML文本媒体标签
<h1 id="title" class="title" title="主标题"> <!-- 一级标题，title鼠标悬停提示 --> <p class="text" align="center"> <!-- 段落，align对齐方式（已弃用，用CSS代替） --> <a href="#section1" target="_blank" rel="noopener"> <!-- 超链接，target打开方式，rel安全关系 --> <img src="img.jpg" alt="图片描述" loading="lazy"> <!-- 图片，alt替代文本，loading懒加载 --> <strong class="important"> <!-- 重要文本，语义化加粗 --> <em class="emphasis"> <!-- 强调文本，语义化斜体 --> <audio src="audio.mp3" controls loop preload="metadata"> <!-- 音频，controls显示控件，loop循环 --> <video src="video.mp4" controls poster="preview.jpg"> <!-- 视频，poster封面 -->
4. HTML表单控件标签
<form action="/submit" method="POST" enctype="multipart/form-data" novalidate> <!-- 表单，action提交地址，method方法，enctype编码类型，novalidate关闭浏览器验证 --> <input type="text" name="username" placeholder="请输入用户名" required maxlength="20" autocomplete="on"> <!-- 文本输入，required必填，autocomplete自动完成 --> <input type="email" name="email" pattern=".+@.+\..+" title="请输入有效邮箱"> <!-- 邮箱输入，pattern正则验证 --> <input type="number" min="0" max="100" step="5" value="50"> <!-- 数字输入，min/max范围，step步长 --> <input type="date" min="2020-01-01" max="2025-12-31"> <!-- 日期选择 --> <input type="range" min="0" max="100" value="50" list="range-markers"> <!-- 滑块 --> <input type="checkbox" name="subscribe" checked disabled> <!-- 复选框，checked默认选中，disabled禁用 --> <input type="radio" name="gender" value="male"> <!-- 单选按钮 --> <textarea name="content" rows="4" cols="50" wrap="hard" spellcheck="true"> <!-- 多行文本，wrap换行方式，spellcheck拼写检查 --> <select name="country" multiple size="4"> <!-- 下拉选择，multiple多选，size可见选项数 --> <option value="cn" selected>中国</option> <!-- 选项，selected默认选中 --> <label for="username" class="form-label">用户名</label> <!-- 标签，for关联输入控件ID --> <button type="submit" form="form1" autofocus>提交</button> <!-- 按钮，type类型，autofocus自动聚焦 -->
5. HTML表格结构标签
<table border="1" cellspacing="0" cellpadding="5" summary="数据表格"></table> <!-- 表格，border边框，cellspacing间距，cellpadding内边距，summary摘要 --> <caption>表格标题</caption> <!-- 表格标题--> <thead></thead> <!-- 表头区域 --> <tbody class="table-body"></tbody> <!-- 表体区域 --> <tfoot></tfoot> <!-- 表尾区域 --> <tr align="center" valign="middle"></tr> <!-- 表格行，align水平对齐，valign垂直对齐 --> <th scope="col" colspan="2" rowspan="2">标题</th> <!-- 表头单元格，scope关联范围，colspan跨列，rowspan跨行 --> <td class="cell" nowrap>数据</td> <!-- 数据单元格 -->
6. HTML语义化标签
<header id="main-header" class="page-header"> <!-- 页面/区域头部，id唯一标识，class样式类 --> <nav class="main-nav" aria-label="主导航"> <!-- 导航区域，aria-label无障碍标签 --> <main class="content" role="main"> <!-- 页面主要内容，role定义ARIA角色 --> <section id="intro" class="section"> <!-- 文档章节，id用于锚点链接 --> <article class="article" data-category="tech"> <!-- 独立文章，data-*自定义数据属性 --> <aside class="sidebar" hidden> <!-- 侧边内容，hidden属性隐藏元素 --> <footer class="page-footer" style="color:#333"> <!-- 页脚，style内联样式 -->
个人觉得1-4的标签记住就可以设计完整的网页，第5项的表格标签，做简单的网页没用过，第6项的所有标签都可以当作DIV来用，这样统计下来标签就少了很多，记忆不好的人也更容易记住。其他的标签未大概了解，未来用到的时候再去翻手册就可以，起码我是这样觉得。HTML5的标签就整理到这吧，把这些标签再加强一下记忆，该去CSS世界闯闯了。