【标签按照功能进行分类】：
：声明为 HTML5 文档
（双标记、块标记）：是 HTML 页面的根元素，定义 HTML 文档
（双标记、块标记）：包含文档的元（meta）数据， 定义网页编码格式为 utf-8。
（双标记，块标记）：定义浏览器工具栏的标题
<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>（双标记，块标记）：定义不支持脚本的浏览器的替代内容
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style="opacity: 0.556245;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li><li style="color: rgb(153, 153, 153);">42</li><li style="color: rgb(153, 153, 153);">43</li><li style="color: rgb(153, 153, 153);">44</li><li style="color: rgb(153, 153, 153);">45</li><li style="color: rgb(153, 153, 153);">46</li><li style="color: rgb(153, 153, 153);">47</li><li style="color: rgb(153, 153, 153);">48</li><li style="color: rgb(153, 153, 153);">49</li><li style="color: rgb(153, 153, 153);">50</li><li style="color: rgb(153, 153, 153);">51</li><li style="color: rgb(153, 153, 153);">52</li><li style="color: rgb(153, 153, 153);">53</li><li style="color: rgb(153, 153, 153);">54</li><li style="color: rgb(153, 153, 153);">55</li><li style="color: rgb(153, 153, 153);">56</li><li style="color: rgb(153, 153, 153);">57</li><li style="color: rgb(153, 153, 153);">58</li><li style="color: rgb(153, 153, 153);">59</li><li style="color: rgb(153, 153, 153);">60</li><li style="color: rgb(153, 153, 153);">61</li><li style="color: rgb(153, 153, 153);">62</li><li style="color: rgb(153, 153, 153);">63</li><li style="color: rgb(153, 153, 153);">64</li><li style="color: rgb(153, 153, 153);">65</li><li style="color: rgb(153, 153, 153);">66</li><li style="color: rgb(153, 153, 153);">67</li><li style="color: rgb(153, 153, 153);">68</li><li style="color: rgb(153, 153, 153);">69</li><li style="color: rgb(153, 153, 153);">70</li><li style="color: rgb(153, 153, 153);">71</li><li style="color: rgb(153, 153, 153);">72</li><li style="color: rgb(153, 153, 153);">73</li><li style="color: rgb(153, 153, 153);">74</li><li style="color: rgb(153, 153, 153);">75</li><li style="color: rgb(153, 153, 153);">76</li><li style="color: rgb(153, 153, 153);">77</li><li style="color: rgb(153, 153, 153);">78</li><li style="color: rgb(153, 153, 153);">79</li><li style="color: rgb(153, 153, 153);">80</li><li style="color: rgb(153, 153, 153);">81</li><li style="color: rgb(153, 153, 153);">82</li><li style="color: rgb(153, 153, 153);">83</li><li style="color: rgb(153, 153, 153);">84</li><li style="color: rgb(153, 153, 153);">85</li><li style="color: rgb(153, 153, 153);">86</li><li style="color: rgb(153, 153, 153);">87</li><li style="color: rgb(153, 153, 153);">88</li><li style="color: rgb(153, 153, 153);">89</li><li style="color: rgb(153, 153, 153);">90</li><li style="color: rgb(153, 153, 153);">91</li><li style="color: rgb(153, 153, 153);">92</li><li style="color: rgb(153, 153, 153);">93</li><li style="color: rgb(153, 153, 153);">94</li><li style="color: rgb(153, 153, 153);">95</li><li style="color: rgb(153, 153, 153);">96</li><li style="color: rgb(153, 153, 153);">97</li><li style="color: rgb(153, 153, 153);">98</li><li style="color: rgb(153, 153, 153);">99</li><li style="color: rgb(153, 153, 153);">100</li><li style="color: rgb(153, 153, 153);">101</li><li style="color: rgb(153, 153, 153);">102</li><li style="color: rgb(153, 153, 153);">103</li><li style="color: rgb(153, 153, 153);">104</li><li style="color: rgb(153, 153, 153);">105</li><li style="color: rgb(153, 153, 153);">106</li><li style="color: rgb(153, 153, 153);">107</li><li style="color: rgb(153, 153, 153);">108</li><li style="color: rgb(153, 153, 153);">109</li><li style="color: rgb(153, 153, 153);">110</li><li style="color: rgb(153, 153, 153);">111</li><li style="color: rgb(153, 153, 153);">112</li><li style="color: rgb(153, 153, 153);">113</li></ul></pre>
<p>【<a href="https://so.csdn.net/so/search?q=HTML&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=HTML&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"HTML\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=HTML&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"HTML\"}"}" data-tit="HTML" data-pretit="html">HTML</a> 属性参考手册】：</p>
<p>查看完整的HTML属性列表: <a href="https://www.runoob.com/tags/html-reference.html" rel="nofollow">HTML 标签参考手册</a>。</p>
<p>下面列出了适用于大多数 HTML 元素的属性：</p>
<div class="table-box"><table><thead><tr><th align="left">属性</th><th align="left">描述</th></tr></thead><tbody><tr><td align="left">class</td><td align="left">为html元素定义一个或多个类名（classname）(类名从样式文件引入)</td></tr><tr><td align="left">id</td><td align="left">定义元素的唯一id</td></tr><tr><td align="left">style</td><td align="left">规定元素的行内样式（inline style）</td></tr><tr><td align="left">title</td><td align="left">描述了元素的额外信息 (作为工具条使用)</td></tr></tbody></table></div>
<p>更多<a href="https://so.csdn.net/so/search?q=%E6%A0%87%E5%87%86&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E6%A0%87%E5%87%86&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"标准\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E6%A0%87%E5%87%86&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"标准\"}"}" data-tit="标准" data-pretit="标准">标准</a>属性说明： <a href="https://www.runoob.com/tags/ref-standardattributes.html" rel="nofollow">HTML 标准属性参考手册</a>.</p>
<p>【HTML 标签简写及全称】：</p>
<div class="table-box"><table><thead><tr><th align="left">标签</th><th align="left">英文全称</th><th align="left">中文说明</th></tr></thead><tbody><tr><td align="left">a</td><td align="left">Anchor</td><td align="left">锚</td></tr><tr><td align="left">abbr</td><td align="left">Abbreviation</td><td align="left">缩写词</td></tr><tr><td align="left">acronym</td><td align="left">Acronym</td><td align="left">取首字母的缩写词</td></tr><tr><td align="left">address</td><td align="left">Address</td><td align="left">地址</td></tr><tr><td align="left">alt</td><td align="left">alter</td><td align="left">替用(一般是图片显示不出的提示)</td></tr><tr><td align="left">b</td><td align="left">Bold</td><td align="left">粗体（文本）</td></tr><tr><td align="left">bdo</td><td align="left">Bi-Directional Override</td><td align="left">文本显示方向</td></tr><tr><td align="left">big</td><td align="left">Big</td><td align="left">变大（文本）</td></tr><tr><td align="left">blockquote</td><td align="left">Block Quotation</td><td align="left">区块引用语</td></tr><tr><td align="left">br</td><td align="left">Break</td><td align="left">换行</td></tr><tr><td align="left">cell</td><td align="left">cell</td><td align="left">巢</td></tr><tr><td align="left">cellpadding</td><td align="left">cellpadding</td><td align="left">巢补白</td></tr><tr><td align="left">cellspacing</td><td align="left">cellspacing</td><td align="left">巢空间</td></tr><tr><td align="left">center</td><td align="left">Centered</td><td align="left">居中（文本）</td></tr><tr><td align="left">cite</td><td align="left">Citation</td><td align="left">引用</td></tr><tr><td align="left">code</td><td align="left">Code</td><td align="left">源代码（文本）</td></tr><tr><td align="left">dd</td><td align="left">Definition Description</td><td align="left">定义描述</td></tr><tr><td align="left">del</td><td align="left">Deleted</td><td align="left">删除（的文本）</td></tr><tr><td align="left">dfn</td><td align="left">Defines a Definition Term</td><td align="left">定义定义条目</td></tr><tr><td align="left">div</td><td align="left">Division</td><td align="left">分隔</td></tr><tr><td align="left">dl</td><td align="left">Definition List</td><td align="left">定义列表</td></tr><tr><td align="left">dt</td><td align="left">Definition Term</td><td align="left">定义术语</td></tr><tr><td align="left">em</td><td align="left">Emphasized</td><td align="left">加重（文本）</td></tr><tr><td align="left">font</td><td align="left">Font</td><td align="left">字体</td></tr><tr><td align="left">h1~h6</td><td align="left">Header 1 to Header 6</td><td align="left">标题1到标题6</td></tr><tr><td align="left">hr</td><td align="left">Horizontal Rule</td><td align="left">水平尺</td></tr><tr><td align="left">href</td><td align="left">hypertext reference</td><td align="left">超文本引用</td></tr><tr><td align="left">i</td><td align="left">Italic</td><td align="left">斜体（文本）</td></tr><tr><td align="left">iframe</td><td align="left">Inline frame</td><td align="left">定义内联框架</td></tr><tr><td align="left">ins</td><td align="left">Inserted</td><td align="left">插入（的文本）</td></tr><tr><td align="left">kbd</td><td align="left">Keyboard</td><td align="left">键盘（文本）</td></tr><tr><td align="left">li</td><td align="left">List Item</td><td align="left">列表项目</td></tr><tr><td align="left">nl</td><td align="left">navigation lists</td><td align="left">导航列表</td></tr><tr><td align="left">ol</td><td align="left">Ordered List</td><td align="left">排序列表</td></tr><tr><td align="left">optgroup</td><td align="left">Option group</td><td align="left">定义选项组</td></tr><tr><td align="left">p</td><td align="left">Paragraph</td><td align="left">段落</td></tr><tr><td align="left">pre</td><td align="left">Preformatted</td><td align="left">预定义格式（文本 ）</td></tr><tr><td align="left">q</td><td align="left">Quotation</td><td align="left">引用语</td></tr><tr><td align="left">rel</td><td align="left">Reload</td><td align="left">加载</td></tr><tr><td align="left">s/ strike</td><td align="left">Strikethrough</td><td align="left">删除线</td></tr><tr><td align="left">samp</td><td align="left">Sample</td><td align="left">示例（文本</td></tr><tr><td align="left">small</td><td align="left">Small</td><td align="left">变小（文本）</td></tr><tr><td align="left">span</td><td align="left">Span</td><td align="left">范围</td></tr><tr><td align="left">src</td><td align="left">Source</td><td align="left">源文件链接</td></tr><tr><td align="left">strong</td><td align="left">Strong</td><td align="left">加重（文本）</td></tr><tr><td align="left">sub</td><td align="left">Subscripted</td><td align="left">下标（文本）</td></tr><tr><td align="left">sup</td><td align="left">Superscripted</td><td align="left">上标（文本）</td></tr><tr><td align="left">td</td><td align="left">table data cell</td><td align="left">表格中的一个单元格</td></tr><tr><td align="left">th</td><td align="left">table header cell</td><td align="left">表格中的表头</td></tr><tr><td align="left">tr</td><td align="left">table row</td><td align="left">表格中的一行</td></tr><tr><td align="left">tt</td><td align="left">Teletype</td><td align="left">打印机（文本）</td></tr><tr><td align="left">u</td><td align="left">Underlined</td><td align="left">下划线（文本）</td></tr><tr><td align="left">ul</td><td align="left">Unordered List</td><td align="left">不排序列表</td></tr><tr><td align="left">var</td><td align="left">Variable</td><td align="left">变量（文本）</td></tr></tbody></table></div>
<h3><a name="t1"></a><a id="_208"></a>学习小记</h3>
<p>1、单标记、双标记</p>
<p>双标记：</p>
<pre data-index="1" class="set-code-show prettyprint"><code class="has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><button> </button>
<div> </div>
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.556245;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre>
<p>单标记：</p>
<pre data-index="2" class="set-code-show prettyprint"><code class="has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><img/>
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.556245;"><li style="color: rgb(153, 153, 153);">1</li></ul></pre>
<p>2、块标记、行内标记</p>
<p>块标记：</p>
<pre data-index="3" class="set-code-show prettyprint"><code class="has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><ul>
</ul>
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.556245;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre>
<p>行内标记：</p>
<pre data-index="4" class="set-code-show prettyprint"><code class="has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><div> XXXXXXXXXXXXXXXXXX </div>
<a>、<input>、<img>
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style="opacity: 0.556245;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre>
<p>3、前端神器<code>emmet</code>：<a href="https://blog.csdn.net/VickyTsai/article/details/86749904">【Emmet 的使用手册（知识点超全版本）】_emme/2用户适用手册-CSDN博客</a></p>
<h3><a name="t2"></a><a id="HTML_246"></a>HTML练习</h3>
<p>1、参照慕课首页3.1.10的演示视频完成咖啡屋界面的HTML结构；</p>
<p>参考：</p>
<p><img src="https://1000bd.com/contentImg/2024/03/12/184007076.png" alt="image-20240304180605196"></p>
<p>计划：</p>
<p><img src="https://1000bd.com/contentImg/2024/03/12/184006497.png" alt="image-20240304185342437"></p>
<p>实现：</p>
<p><img src="https://1000bd.com/contentImg/2024/03/12/184006799.png" alt="image-20240304191010711"></p>
<pre data-index="5" class="set-code-hide prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Coffee Shop<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 容器作用#container --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 页头部分#header，放置logo、标题等信息 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Jay17's Coffee Shop<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 页面主题部分#main，放置页面主要信息，此处为左右结构 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 左边导航栏信息.sidebar --></span>
<span class="token comment"><!-- div.sidebar>ul>(li>a{menu$})*5 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sidebar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>menu1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>menu2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>menu3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>menu4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>menu5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 右边内容信息.mainbar --></span>
<span class="token comment"><!-- div.mainbar>p{coming soon}+(ul>li{item$}*10)+img[src="images/coffee.jpg"]+p{Road 23......} --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mainbar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>coming soon<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>item1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>item2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>item3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>item4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>item5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>item6<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>item7<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>item8<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>item9<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>item10<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>images/coffee.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Road 23......<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 页面底部信息#footer，放置版权，管理员信息等 --></span>
<span class="token comment"><!-- div#footer>p{copyright©}+a[herf="mailto:JiangShiQi@proton.me"]{JiangShiQi@proton.me} --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>copyright<span class="token entity named-entity" title="©">©</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">herf</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mailto:JiangShiQi@proton.me<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>JiangShiQi@proton.me<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style="opacity: 0.556245;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li><li style="color: rgb(153, 153, 153);">42</li><li style="color: rgb(153, 153, 153);">43</li><li style="color: rgb(153, 153, 153);">44</li><li style="color: rgb(153, 153, 153);">45</li><li style="color: rgb(153, 153, 153);">46</li><li style="color: rgb(153, 153, 153);">47</li><li style="color: rgb(153, 153, 153);">48</li><li style="color: rgb(153, 153, 153);">49</li><li style="color: rgb(153, 153, 153);">50</li><li style="color: rgb(153, 153, 153);">51</li><li style="color: rgb(153, 153, 153);">52</li><li style="color: rgb(153, 153, 153);">53</li><li style="color: rgb(153, 153, 153);">54</li><li style="color: rgb(153, 153, 153);">55</li><li style="color: rgb(153, 153, 153);">56</li><li style="color: rgb(153, 153, 153);">57</li><li style="color: rgb(153, 153, 153);">58</li><li style="color: rgb(153, 153, 153);">59</li><li style="color: rgb(153, 153, 153);">60</li><li style="color: rgb(153, 153, 153);">61</li><li style="color: rgb(153, 153, 153);">62</li><li style="color: rgb(153, 153, 153);">63</li><li style="color: rgb(153, 153, 153);">64</li><li style="color: rgb(153, 153, 153);">65</li><li style="color: rgb(153, 153, 153);">66</li></ul></pre>
<p>2、在第1项作业的基础上设计用户登录界面的草图，登录界面必须包含用户名、登录密码和登录按钮；</p>
<p>设想：</p>
<p><img src="https://1000bd.com/contentImg/2024/03/12/184006445.png" alt="image-20240304182009856"></p>
<p>3、根据第2步完成的设计草图，完成用户登录界面的HTML结构；</p>
<p><img src="https://1000bd.com/contentImg/2024/03/12/184006484.png" alt="image-20240311002713956"></p>
<p>还缺这些</p>
<p><img src="https://1000bd.com/contentImg/2024/03/12/184006712.png" alt="image-20240311002757972"></p>
<pre data-index="6" class="set-code-hide prettyprint"><code class="prism language-html has-numbering" onclick="mdcp.signin(event)" style="position: unset;"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Login<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
<span class="token comment">/* Your CSS styles go here */</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 容器作用#container --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sms-login<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>手机短信登录<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>smsLoginForm<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tel<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入手机号码<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入验证码<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span>
我已阅读并同意相关条款和隐私政策
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>注册登录<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>qr-login<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>扫码登录<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- QR code should be dynamically generated here --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>qrCode<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>使用微信扫描二维码登录<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token comment">// Your JavaScript for form handling and QR code generation goes here</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span>
<div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><ul class="pre-numbering" style="opacity: 0.556245;"><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li><li style="color: rgb(153, 153, 153);">42</li><li style="color: rgb(153, 153, 153);">43</li><li style="color: rgb(153, 153, 153);">44</li><li style="color: rgb(153, 153, 153);">45</li></ul></pre>
<p>4、在实验报告中总结标记的特点、前3步完成的作业中哪些是单标记、哪些是双标记。</p>
<p>将菜鸟教程中HTML部分（https://www.runoob.com/html/html-tutorial.html）进行功能分类，例如，文本类标记、媒体类标记等，注意单双标记区分，划分分类没有统一标准，根据自己的理解去划分，需告知划分标准。</p>
<p>放在开头了</p>
<p><img src="https://1000bd.com/contentImg/2022/07/20/203409866.jpeg" alt="img"></p>
</div>
</div>
</li>
<li class="list-group-item ul-li">
<b>相关阅读:</b><br>
<nobr>
<a href="/Article/Index/1887141">【环境搭建】Apache ZooKeeper 3.8.4 Stable</a> <br />
<a href="/Article/Index/742401">【华为OD机试真题 JS】一种字符串压缩表示的解压</a> <br />
<a href="/Article/Index/1195669">python的自定义函数的用法和实例</a> <br />
<a href="/Article/Index/1308350">EMMC模块电路的PCB设计建议</a> <br />
<a href="/Article/Index/1387509">uni-app小程序使用DCloud（插件市场）流程</a> <br />
<a href="/Article/Index/1023616">基于粒子群优化算法的时间调制非线性频偏FDA（Matlab代码实现）</a> <br />
<a href="/Article/Index/1022382">autopoi-web 导入 excel 解决二级表头重复问题</a> <br />
<a href="/Article/Index/1275234">Golang GUI框架</a> <br />
<a href="/Article/Index/1134247">C/C++文件压缩与解压（哈夫曼编码）</a> <br />
<a href="/Article/Index/1054621">【面经，数据分析岗】某头部汽车外企，简称车企；某医疗科技外企，简称医企</a> <br />
</nobr>
</li>
<li class="list-group-item from-a mb-2">
原文地址：https://blog.csdn.net/Jayjay___/article/details/136612579
</li>
</ul>
</div>
<div class="col-lg-4 col-sm-12">
<ul class="list-group" style="word-break:break-all;">
<li class="list-group-item ul-li-bg" aria-current="true">
最新文章
</li>
<li class="list-group-item ul-li">
<nobr>
<a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <br />
<a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <br />
<a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <br />
<a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <br />
<a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <br />
<a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <br />
<a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <br />
<a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <br />
<a href="/Article/Index/1887520">AnatoMask论文汇总</a> <br />
<a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> <br />
</nobr>
</li>
</ul>
<ul class="list-group pt-2" style="word-break:break-all;">
<li class="list-group-item ul-li-bg" aria-current="true">
热门文章
</li>
<li class="list-group-item ul-li">
<nobr>
<a href="/Article/Index/888177">十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！</a> <br />
<a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <br />
<a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <br />
<a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <br />
<a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <br />
<a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <br />
<a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <br />
<a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <br />
<a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <br />
<a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> <br />
</nobr>
</li>
</ul>
</div>
</div>
</div>
<!-- 主体 -->
<!--body结束-->
<!--这里是footer模板-->
<!--footer-->
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-muted center foot-height">
Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a>
<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a>
</div>
<div style="width:300px;margin:0 auto; padding:0px 5px;">
<a href="/regex.html">正则表达式工具</a>
<a href="/cron.html">cron表达式工具</a>
<a href="/pwdcreator.html">密码生成工具</a>
</div>
<div style="width:300px;margin:0 auto; padding:5px 0;">
<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
<img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a>
</div>
</div>
</div>
</div>
</nav>
<!--footer-->
<!--footer模板结束-->
<script src="/js/plugins/jquery/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>
<!--这里是scripts模板-->
<!--scripts模板结束-->
</body>
</html>