总结
【标签按照功能进行分类】：
<!DOCTYPE html>：声明为 HTML5 文档 <html>（双标记、块标记）：是 HTML 页面的根元素，定义 HTML 文档 <head>（双标记、块标记）：包含文档的元（meta）数据，<meta charset="utf-8"> 定义网页编码格式为 utf-8。 <title>（双标记，块标记）：定义浏览器工具栏的标题 <body>（双标记，块标记）：包含页面可见内容的主体部分 <h1>（双标记，块标记）：定义最高级标题 <a>（双标记，行标记）：创建超链接，可以链接到其他页面或页面中的某个位置 <br>（单标记，行标记）：在文本中插入一个换行，不需要闭合标签 <p>（双标记，块标记）：定义文本段落 <hr>（单标记，块标记）：创建一条水平线，常用于内容分割 <!--...-->（不适用，不适用）：定义注释，不会在浏览器中显示 【HTML 文本格式化标签】 <b>（双标记，行标记）：定义粗体文本 <em>（双标记，行标记）：定义着重文字 <i>（双标记，行标记）：定义斜体字 <small>（双标记，行标记）：定义小号字 <strong>（双标记，行标记）：定义加重语气 <sub>（双标记，行标记）：定义下标字 <sup>（双标记，行标记）：定义上标字 <ins>（双标记，行标记）：定义插入字 <del>（双标记，行标记）：定义删除字 【HTML "计算机输出" 标签】 <code>（双标记，行标记）：定义计算机代码 <kbd>（双标记，行标记）：定义键盘码 <samp>（双标记，行标记）：定义计算机代码样本 <var>（双标记，行标记）：定义变量 <pre>（双标记，块标记）：定义预格式文本 【HTML 引文, 引用, 及标签定义】 <abbr>（双标记，行标记）：定义缩写 <address>（双标记，块标记）：定义地址 <bdo>（双标记，行标记）：定义文字方向 <blockquote>（双标记，块标记）：定义长的引用 <q>（双标记，行标记）：定义短的引用语 <cite>（双标记，行标记）：定义引用、引证 <dfn>（双标记，行标记）：定义一个定义项目。 【HTML head 元素】 <head>（双标记，块标记）：定义了文档的信息 <title>（双标记，块标记）：定义了文档的标题 <base>（单标记，块标记）：定义了页面链接标签的默认链接地址 <link>（单标记，块标记）：定义了一个文档和外部资源之间的关系 <meta>（单标记，块标记）：定义了HTML文档中的元数据 <script>（双标记，块标记）：定义了客户端的脚本文件 <style>（双标记，块标记）：定义了HTML文档的样式文件 【HTML 样式标签】 <style>（双标记，块标记）：定义文本样式 <link>（单标记，块标记）：定义资源引用地址 【HTML 图像标签】 <img>（单标记，行标记）：定义图像 <map>（双标记，块标记）：定义图像地图 <area>（单标记，行标记）：定义图像地图中的可点击区域 【HTML 表格标签】 <table>（双标记，块标记）：定义表格 <th>（双标记，块标记）：定义表格的表头 <tr>（双标记，块标记）：定义表格的行 <td>（双标记，块标记）：定义表格单元 <caption>（双标记，块标记）：定义表格标题 <colgroup>（双标记，块标记）：定义表格列的组 <col>（单标记，块标记）：定义用于表格列的属性 <thead>（双标记，块标记）：定义表格的页眉 <tbody>（双标记，块标记）：定义表格的主体 <tfoot>（双标记，块标记）：定义表格的页脚 【HTML 列表标签】 <ol>（双标记，块标记）：定义有序列表 <ul>（双标记，块标记）：定义无序列表 <li>（双标记，行标记）：定义列表项 <dl>（双标记，块标记）：定义定义列表 <dt>（双标记，行标记）：定义定义列表中的项目 <dd>（双标记，行标记）：定义定义列表中项目的描述 【HTML 分组标签】 <div>（双标记，块标记）：定义文档的区域，用于布局设计 <span>（双标记，行标记）：用于文本的组合，不提供任何格式化 【HTML 表单标签】 <form>（双标记，块标记）：定义供用户输入的HTML表单 <input>（单标记，行标记）：定义各种类型的输入字段 <textarea>（双标记，块标记）：定义多行文本输入控件 <label>（双标记，行标记）：定义<input>元素的标签 <fieldset>（双标记，块标记）：用于对表单元素进行分组 <legend>（双标记，行标记）：定义<fieldset>元素的标题 <select>（双标记，块标记）：定义下拉选项列表 <optgroup>（双标记，块标记）：定义选项组 <option>（双标记，行标记）：定义选择列表中的选项 <button>（双标记，行标记）：定义按钮 <datalist>（双标记，块标记）：定义输入字段的预定义选项 <keygen>（单标记，行标记）：规定用于表单的密钥生成器字段（已废弃） <output>（双标记，行标记）：定义表单的输出 【HTML iframe 标签】 <iframe>（双标记，块标记）：定义内嵌的浏览上下文 【HTML 脚本标签】 <script>（双标记，块标记）：定义客户端脚本 <noscript>（双标记，块标记）：定义不支持脚本的浏览器的替代内容
【HTML 属性参考手册】：
查看完整的HTML属性列表: HTML 标签参考手册。
下面列出了适用于大多数 HTML 元素的属性：
| 属性 | 描述 |
|---|---|
| class | 为html元素定义一个或多个类名（classname）(类名从样式文件引入) |
| id | 定义元素的唯一id |
| style | 规定元素的行内样式（inline style） |
| title | 描述了元素的额外信息 (作为工具条使用) |
更多标准属性说明： HTML 标准属性参考手册.
【HTML 标签简写及全称】：
| 标签 | 英文全称 | 中文说明 |
|---|---|---|
| a | Anchor | 锚 |
| abbr | Abbreviation | 缩写词 |
| acronym | Acronym | 取首字母的缩写词 |
| address | Address | 地址 |
| alt | alter | 替用(一般是图片显示不出的提示) |
| b | Bold | 粗体（文本） |
| bdo | Bi-Directional Override | 文本显示方向 |
| big | Big | 变大（文本） |
| blockquote | Block Quotation | 区块引用语 |
| br | Break | 换行 |
| cell | cell | 巢 |
| cellpadding | cellpadding | 巢补白 |
| cellspacing | cellspacing | 巢空间 |
| center | Centered | 居中（文本） |
| cite | Citation | 引用 |
| code | Code | 源代码（文本） |
| dd | Definition Description | 定义描述 |
| del | Deleted | 删除（的文本） |
| dfn | Defines a Definition Term | 定义定义条目 |
| div | Division | 分隔 |
| dl | Definition List | 定义列表 |
| dt | Definition Term | 定义术语 |
| em | Emphasized | 加重（文本） |
| font | Font | 字体 |
| h1~h6 | Header 1 to Header 6 | 标题1到标题6 |
| hr | Horizontal Rule | 水平尺 |
| href | hypertext reference | 超文本引用 |
| i | Italic | 斜体（文本） |
| iframe | Inline frame | 定义内联框架 |
| ins | Inserted | 插入（的文本） |
| kbd | Keyboard | 键盘（文本） |
| li | List Item | 列表项目 |
| nl | navigation lists | 导航列表 |
| ol | Ordered List | 排序列表 |
| optgroup | Option group | 定义选项组 |
| p | Paragraph | 段落 |
| pre | Preformatted | 预定义格式（文本 ） |
| q | Quotation | 引用语 |
| rel | Reload | 加载 |
| s/ strike | Strikethrough | 删除线 |
| samp | Sample | 示例（文本 |
| small | Small | 变小（文本） |
| span | Span | 范围 |
| src | Source | 源文件链接 |
| strong | Strong | 加重（文本） |
| sub | Subscripted | 下标（文本） |
| sup | Superscripted | 上标（文本） |
| td | table data cell | 表格中的一个单元格 |
| th | table header cell | 表格中的表头 |
| tr | table row | 表格中的一行 |
| tt | Teletype | 打印机（文本） |
| u | Underlined | 下划线（文本） |
| ul | Unordered List | 不排序列表 |
| var | Variable | 变量（文本） |
学习小记
1、单标记、双标记
双标记：
<button> </button> <div> </div>
单标记：
<img/>
2、块标记、行内标记
块标记：
<ul> </ul>
行内标记：
<div> XXXXXXXXXXXXXXXXXX </div> <a>、<input>、<img>
3、前端神器emmet：【Emmet 的使用手册（知识点超全版本）】_emme/2用户适用手册-CSDN博客
HTML练习
1、参照慕课首页3.1.10的演示视频完成咖啡屋界面的HTML结构；
参考：
计划：
实现：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Coffee Shop</title> </head> <body> <!-- 容器作用#container --> <div id="container"> <!-- 页头部分#header，放置logo、标题等信息 --> <div id="header"> <h1>Jay17's Coffee Shop</h1> </div> <!-- 页面主题部分#main，放置页面主要信息，此处为左右结构 --> <div id="main"> <!-- 左边导航栏信息.sidebar --> <!-- div.sidebar>ul>(li>a{menu$})*5 --> <div class="sidebar"> <ul> <li><a href="">menu1</a></li> <li><a href="">menu2</a></li> <li><a href="">menu3</a></li> <li><a href="">menu4</a></li> <li><a href="">menu5</a></li> </ul> </div> <!-- 右边内容信息.mainbar --> <!-- div.mainbar>p{coming soon}+(ul>li{item$}*10)+img[src="images/coffee.jpg"]+p{Road 23......} --> <div class="mainbar"> <p>coming soon</p> <ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> <li>item7</li> <li>item8</li> <li>item9</li> <li>item10</li> </ul> <img src="images/coffee.jpg" alt=""> <p>Road 23......</p> </div> </div> <!-- 页面底部信息#footer，放置版权，管理员信息等 --> <!-- div#footer>p{copyright©}+a[herf="mailto:JiangShiQi@proton.me"]{JiangShiQi@proton.me} --> <div id="footer"> <p>copyright©</p> <a href="" herf="mailto:JiangShiQi@proton.me">JiangShiQi@proton.me</a> </div> </div> </body> </html>
2、在第1项作业的基础上设计用户登录界面的草图，登录界面必须包含用户名、登录密码和登录按钮；
设想：
3、根据第2步完成的设计草图，完成用户登录界面的HTML结构；
还缺这些
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login</title> <style> /* Your CSS styles go here */ </style> </head> <body> <!-- 容器作用#container --> <div class="container"> <div class="sms-login"> <h2>手机短信登录</h2> <form id="smsLoginForm"> <input type="tel" placeholder="请输入手机号码" required> <input type="text" placeholder="请输入验证码" required> <label> <input type="checkbox" required> 我已阅读并同意相关条款和隐私政策 </label> <button type="submit">注册登录</button> </form> </div> <div class="qr-login"> <h2>扫码登录</h2> <!-- QR code should be dynamically generated here --> <div id="qrCode"></div> <p>使用微信扫描二维码登录</p> </div> </div> <script> // Your JavaScript for form handling and QR code generation goes here </script> </body> </html>
4、在实验报告中总结标记的特点、前3步完成的作业中哪些是单标记、哪些是双标记。
将菜鸟教程中HTML部分（https://www.runoob.com/html/html-tutorial.html）进行功能分类，例如，文本类标记、媒体类标记等，注意单双标记区分，划分分类没有统一标准，根据自己的理解去划分，需告知划分标准。
放在开头了
