总结
【标签按照功能进行分类】：
<!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）进行功能分类，例如，文本类标记、媒体类标记等，注意单双标记区分，划分分类没有统一标准，根据自己的理解去划分，需告知划分标准。
放在开头了
