1.HTML简介

HTML指的是超文本标记语言(HyperText Markup Language)，是一种用于创建网页的标准标记语言

HTML页面基本结构



My bolg

This is my first title.
This is my first paragraph.

1.声明为HTML5文档

2.元素是HTML页面的根元素

3.元素包含了文档的元(meta)数据，如定义网页编码格式为utf-8

4.元素描述了文档的标题 </p> <p>5.<body>元素包含可见的页面内容，只有<body>区域才会在浏览器中显示</p> <p>6.<h1>元素定义一个大标题</p> <p>7.<p>元素定义一个段落</p> </blockquote> <p>运行结果如下图所示</p> <p class="img-center"><img alt="" height="181" src="https://img.pic99.top/linuxoffice369/202405/ce9fad558fc6657.png" width="486" /></p> <p>HTML文档的后缀名.html</p> <p>HTML文档包含了HTML标签及文本内容</p> <blockquote> <p>HTML标签</p> <p>①HTML标签是由<em>尖括号</em>包围的关键词，比如 <html></p> <p>②HTML标签通常是<em>成对出现</em>的，比如 <p> 和 </p></p> <p>③标签对中的第一个标签是<em>开始标签</em>，第二个标签是<em>结束标签</em></p> <p><em><strong><开始标签>内容</结束标签></strong></em></p> <p>④开始标签也被称为<strong>起始标签(opening tag)</strong>，结束标签也被称为<strong>闭合标签(closing tag)</strong></p> <p>⑤HTML标签需使用小写标签</p> </blockquote> <h1>2.HTML元素</h1> <p>一个 HTML元素包含了开始标签与结束标签，举个例子</p> <pre><code class="language-html"><p>This is a paragraph</p></code></pre> <p>提示Tips：HTML元素以<strong>开始标签</strong>为起始，以<strong>结束标签</strong>为终止，<strong>元素的内容</strong>是开始标签与结束标签之间的内容</p> <p>HTML元素可以进行嵌套，可理解为HTML元素可以包含其他HTML元素，HTML文档由相互嵌套的HTML元素构成，例如以下实例包含了三个HTML元素</p> <pre><code class="language-html"><!DOCTYPE html> <html> <body><p>This is a paragraph.</p> </body> </html></code></pre> <p><strong>HTML空元素</strong></p> <p>没有内容的HTML元素被称为空元素</p> <p>空元素是在开始标签中关闭的，比如 <br />、<hr></p> <h1>3.HTML属性</h1> <p>HTML元素可以设置属性，属性是HTML元素提供的附加信息</p> <p>属性一般描述于开始标签，总是以名称/值对的形式出现，例如: <strong>attr="value"</strong></p> <p>attr表示属性名，value表示属性值，属性值使用双引号" "括起来</p> <p>例如: HTML链接由<a>标签定义，链接的地址在<strong>href属性</strong>中指定 </p> <pre><code class="language-html"><!DOCTYPE html> <html> <body><a href="https://blog.csdn.net/Hudas">This is my blog.</a> </body> </html></code></pre> <p><strong>HTML常用的通用属性</strong></p> <table border="1" cellpadding="1" cellspacing="1" style="width:500px;"><tbody><tr><td style="text-align:center;">属性</td><td style="text-align:center;">描述</td></tr><tr><td>id</td><td>赋予某个html标签唯一的名称(标识符)</td></tr><tr><td>class</td><td>为html标签定义一个或多个类名(classname)</td></tr><tr><td>title</td><td>用来对标签内容进行描述说明，当鼠标移动到该标签上方时会显示出 title属性的值</td></tr><tr><td>style</td><td>规定html标签的行内样式(inline style)</td></tr></tbody></table> <pre><code class="language-html"><!DOCTYPE html> <html> <style>#username{color: red;}.content1{color: cornflowerblue;}.content2{text-decoration: underline;} </style> <body><p id="username">My name is Andy.</p><p class="content1 content2">I graduated from Dalian Maritime University.</p><p class="content1">I'm learning HTML.</p><p class="content1">Welcome to my Blog!!!</p><a href="https://blog.csdn.net/Hudas" title="Andy的博客">This is my blog.</a><p style="color:orange;">Let's learn HTML together!!!</p> </body> </html></code></pre> <p>运行结果如下图所示</p> <p class="img-center"><img alt="" height="285" src="https://img.pic99.top/linuxoffice369/202405/1868fd4513145df.png" width="350" /></p> <h1>4.HTML标题标签</h1> <p>标题(Heading)是通过 <h1>...<h6> 标签进行定义的 </p> <pre><code class="language-html"><!DOCTYPE html> <html> <body><h1>这是第一个标题</h1><h2>这是第二个标题</h2><h3>这是第三个标题</h3><h4>这是第四个标题</h4><h5>这是第五个标题</h5><h6>这是第六个标题</h6> </body> </html></code></pre> <p>运行结果如下图所示</p> <p class="img-center"><img alt="" height="406" src="https://img.pic99.top/linuxoffice369/202405/c326624d674a2c9.png" width="350" /></p> <p>提示Tips: HTML标题标签只能用来定义标题，不可以使用标题标签来对文本进行加粗设计 </p> <h1>5.HTML段落</h1> <p>HTML中可以使用段落标签<p>来将文档中的内容分割为若干个段落</p> <p>段落标签由开始标签<p>和结束标签</p>组成，开始和结束标签之间的内容会被视为一个段落</p> <pre><code class="language-html"><!DOCTYPE html> <html> <body><p>这是段落1</p><p>这是段落2</p><p>这是段落3</p><p>这是段落4</p> </body> </html></code></pre> <p>运行结果如下图所示 </p> <p class="img-center"><img alt="" height="212" src="https://img.pic99.top/linuxoffice369/202405/d60b751eb7bfb41.png" width="350" /></p> <blockquote> <p>提示Tips</p> <p>默认情况下，段落标签会对文本中的空白符进行合并，将多个连续的空白符显示为一个空格的效果，具体表现如下：</p> <p>①如果段落中出现多个连续的空格，浏览器会忽略这些空格只保留一个</p> <p>②如果段落中出现多个连续的换行，浏览器会将这些换行转换成一个空格</p> </blockquote> <h1>6.HTML换行 </h1> <p>如果想要在段落中进行换行，需要使用专门的换行标签<br /></p> <pre><code class="language-html"><!DOCTYPE html> <html> <body><p>这个<br>段落<br>演示了换行的效果</p> </body> </html></code></pre> <p>运行结果如下图所示 </p> <p class="img-center"><img alt="" height="177" src="https://img.pic99.top/linuxoffice369/202405/5d85a634d697.png" width="435" /></p> <h1>7.HTML水平线</h1> <p><hr>标签在HTML页面中创建水平线，可用于分隔内容</p> <pre><code class="language-html"><!DOCTYPE html> <html> <body><p>这是段落1</p><hr><p>这是段落2</p><hr><p>这是段落3</p> </body> </html></code></pre> <p>运行结果如下图所示</p> <p class="img-center"><img alt="" height="226" src="https://img.pic99.top/linuxoffice369/202405/dc204812874f.png" width="400" /></p> <h1>8.HTML文本格式化 </h1> <p>HTML常用的文本格式化标签</p> <table border="1" cellpadding="1" cellspacing="1" style="width:500px;"><tbody><tr><td style="text-align:center;">标签</td><td style="text-align:center;">描述</td></tr><tr><td>b</td><td>加粗标签中的字体</td></tr><tr><td>i</td><td>定义标签中的字体为斜体</td></tr><tr><td>sub</td><td>定义下标文本</td></tr><tr><td>sup</td><td>定义上标文本</td></tr><tr><td>del</td><td>在文本内容上添加删除线</td></tr><tr><td>ins</td><td>定义文档的其余部分之外的插入文本</td></tr><tr><td>em</td><td>强调标签中的内容，并使标签中的字体倾斜</td></tr><tr><td>strong</td><td>强调标签中的内容，并将字体加粗</td></tr><tr><td>small</td><td>定义标签中的字体为小号字体</td></tr><tr><td>big</td><td>定义标签中的字体为大号字体</td></tr><tr><td>pre</td><td>定义预格式化的文本，被该标签包裹的文本会保留所有的空格和换行符，字体也会呈现为等宽字体</td></tr></tbody></table> <pre><code class="language-html"><!DOCTYPE html> <html> <body><b>加粗文本1</b><br /><i>斜体文本2</i><br /><span>上下标文本3: H<sub>2</sub>SO<sub>4</sub> = 2H<sup>+</sup>SO<sub>4</sub><sup>2-</sup></span><br /><del>删除文本4</del><br /><ins>插入文本5</ins><br /><em>强调内容文本6</em><br /><strong>加重语气文本7</strong><br /><small>定义小号字文本8</small><br /><big>定义大号字文本9</big><br /><pre>预格式文本 10</pre> </body> </html></code></pre> <p>运行结果如下图所示</p> <p class="img-center"><img alt="" height="392" src="https://img.pic99.top/linuxoffice369/202405/b72b93355308c7e.png" width="435" /></p> <h1>9.HTML注释</h1> <p>HTML注释主要用来对文档中的代码进行解释说明，注释也是代码的一部分，但浏览器会自动忽略注释的内容，所以用户在网页中是看不到注释的内容</p> <p>通过注释我们可以帮助自身或者他人更好的阅读代码，提高代码的可读性</p> <p>我们也可以注释程序中的代码，例如当不希望某段代码执行时，就可以先将它们注释掉，这样浏览器就不会执行这段代码</p> <p>在HTML中可以使用<code></code>在代码中添加注释，<code></code>之间的所有内容都会被视为注释</p> <pre><code class="language-html"><!DOCTYPE html> <html> <body><p>这是一个未注释的字段</p> </body> </html></code></pre> <p>运行结果如下图所示</p> <p class="img-center"><img alt="" height="122" src="https://img.pic99.top/linuxoffice369/202405/a7b2a392bb4dd1f.png" width="436" /></p> <p>提示Tips: 注释可以出现在HTML文档的任意位置，包括文档开头、文档末尾、文档中间、标签外部、标签内容中等</p> <h1>10.HTML超链接</h1> <p>点击超链接可以从一张页面跳转到另一张页面</p> <p>HTML使用标签 <a>来设置超文本链接，常用的语法格式如下所示</p> <pre><code class="language-html"><a href="url" target="opentype">链接文本</a></code></pre> <p>href 属性用来指明要跳转到的 url地址，target 属性用来指明新页面的打开方式，链接文本需要写在 <a> 和 </a> 之间</p> <p><strong>示范1</strong></p> <pre><code class="language-html"><!DOCTYPE html> <html> <body><a href="https://blog.csdn.net/Hudas/">访问我的博客</a> </body> </html></code></pre> <p>运行结果如下图所示</p> <p class="img-center"><img alt="" height="125" src="https://img.pic99.top/linuxoffice369/202405/af7fd528a5d76b7.png" width="437" /></p> <p>点击文本链接即可跳转到我的博客主页</p> <p class="img-center"><img alt="" height="418" src="https://img.pic99.top/linuxoffice369/202405/33b8130746c83ee.png" width="1200" /></p> <p><strong>示范2</strong></p> <pre><code class="language-html"><!DOCTYPE html> <html> <body><a href="https://blog.csdn.net/Hudas/" target="_blank">访问我的博客</a> </body> </html></code></pre> <p>提示Tips: 使用 target 属性，可以定义被链接的文档在何处显示，绝大部分情况下，target 属性要么不写，保持默认值 _self，在现有窗口中打开新页面;要么将它的值设置为 _blank，在新窗口中打开页面</p> <h1>11.HTML表格</h1> <p>在HTML 中，使用 <table> 标签来定义表格，利用表格来展示数据</p> <p><strong>示例1</strong></p> <pre><code class="language-html"><!DOCTYPE html> <html> <style>.content{color: aliceblue;} </style> <body><table width="600" style="border-collapse: collapse;" border="1"><caption>人员基本信息表</caption><tr align="left" bgcolor='#555555'><th class="content">First Name</th><th class="content">Last Name</th><th class="content">City</th></tr><tr><td>John</td><td>Smith</td><td>深圳</td></tr><tr><td>Andy</td><td>Hu</td><td>广州</td></tr><tr><td>Even</td><td>Jackson</td><td>上海</td></tr><tr><td>Adam</td><td>Bob</td><td>北京</td></tr></table> </body> </html></code></pre> <p>运行结果如下图所示</p> <p class="img-center"><img alt="" height="262" src="https://img.pic99.top/linuxoffice369/202405/d1a80d321939741.png" width="763" /></p> <p><table> 表示表格，表格的所有内容需要写在 <table> 和 </table> 之间，如果不定义边框属性border，表格将不显示边框</p> <p><caption>标签定义表格标题，当表格需要标题时，使用<caption>表格标题</caption></p> <p><tr>表示表格的行(table row)，表格中有多少个 <tr> 标签就表示有多少行数据</p> <p><th>表示表格的表头(table heading)</p> <p><td>表示表格的单元格(table datacell)，单元格可以包含文本、图片、列表、段落、表单、水平线、表格等</p> <p><strong>示例2：跨行跨列合并单元格</strong></p> <p>跨行合并：rowspan="合并单元格的个数"</p> <p>跨列合并：clospan="合并单元格的个数"</p> <p>具体格式如下</p> <pre><code class="language-html"><td rowspan="n">单元格内容</td> <td colspan="n">单元格内容</td></code></pre> <figure class="image"><img alt="" height="332" src="https://img.pic99.top/linuxoffice369/202405/a960e72d7d133.png" width="512" /><figcaption>初始表格</figcaption></figure> <pre><code class="language-html"><!DOCTYPE html> <html> <body><table border="1" cellspacing="0" width="500" height="249"><tr><td></td><td colspan="2"></td></tr><tr><td rowspan="2"></td><td></td><td></td></tr><tr><td></td><td></td></tr></table> </body> </html></code></pre> <p>运行结果如下图所示</p> <p class="img-center"><img alt="" height="331" src="https://img.pic99.top/linuxoffice369/202405/dd72a07366984e6.png" width="511" /></p> <h1>12.HTML列表</h1> <p>HTML支持有序、无序和自定义列表</p> <table border="1" cellpadding="1" cellspacing="1" style="width:500px;"><tbody><tr><td>标签</td><td>描述</td></tr><tr><td><ol></td><td>定义有序列表</td></tr><tr><td><ul></td><td>定义无序列表</td></tr><tr><td><li></td><td>定义列表项</td></tr><tr><td><dl></td><td>定义列表</td></tr><tr><td><dt></td><td>自定义列表项目</td></tr><tr><td><dd></td><td>定义自定列表项的描述</td></tr></tbody></table> <p><strong>示例1：无序列表</strong></p> <p>无序列表，使用 <ul> + <li> 标签</p> <pre><code class="language-html"><!DOCTYPE html> <html> <body><ul><li>Andy</li><li>Jack</li><li>Rita</li></ul> </body> </html></code></pre> <p>运行结果如下所示</p> <p class="img-center"><img alt="" height="148" src="https://img.pic99.top/linuxoffice369/202405/67d27b6c34312f3.png" width="482" /></p> <p><strong>示例2：有序列表</strong></p> <p>有序列表，使用 <ol> + <li> 标签</p> <pre><code class="language-html"><!DOCTYPE html> <html> <body><ol><li>Andy</li><li>Jack</li><li>Rita</li></ol> </body> </html></code></pre> <p>运行结果如下所示</p> <p class="img-center"><img alt="" height="146" src="" width="482" /></p> <p><strong>示例3：自定义序列</strong></p> <p>自定义列表，使用 <dl> + <dt> + <dd> 标签</p> <pre><code class="language-html"><!DOCTYPE html> <html> <body><h3>自定义列表：</h3><dl><dt>Apple</dt><dd>- Sweet and sour</dd><dd>- Produced in Liaoning Province</dd><dt>Banana</dt><dd>- Soft and delicious</dd><dd>- Produced in Guangdong Province</dd></dl> </body> </html></code></pre> <p>运行结果如下所示</p> <p class="img-center"><img alt="" height="245" src="https://img.pic99.top/linuxoffice369/202405/8361923ad37f543.png" width="481" /></p> <pre><code class="language-html"><!DOCTYPE html> <html> <body><dl><dl style="margin-bottom:0px;"><dt><b>HTML</b></dt><dd style="margin:auto auto 10px 0px;">HTML是一种专门用来开发网页的标记语言</dd><dt><b>CSS</b></dt><dd style="margin:auto auto 10px 0px;">CSS层叠样式表可以控制HTML文档的显示样式,用来美化网页</dd><dt><b>Javascript</b></dt><dd style="margin:auto auto 10px 0px;">Javascript简称JS,是一种用来开发网站的脚本编程语言</dd></dl></dl> </body> </html></code></pre> <p>运行结果如下所示</p> <p class="img-center"><img alt="" height="231" src="https://img.pic99.top/linuxoffice369/202405/d1015732f32f1d.png" width="483" /></p>  </div>  <div class="mt-5">  <a href="/index.php?s=news&c=search&keyword=%E8%AF%8D%E5%BA%93%E5%8A%A0%E8%BD%BD%E9%94%99%E8%AF%AF%3A%E6%9C%AA%E8%83%BD%E6%89%BE%E5%88%B0%E6%96%87%E4%BB%B6%E2%80%9CE%3A%5Chighferrum_mysql%5CConfiguration%5CDict_Stopwords.txt%E2%80%9D%E3%80%82" class="badge badge-light-primary fw-bold my-2" target="_blank">词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。</a> </div> <div class="mt-5"> <p class="fc-show-prev-next"> <strong>上一篇：</strong><a href="/code/17293.html">小程序超长页面截图保存web-view+html2canvas</a><br> </p> <p class="fc-show-prev-next"> <strong>下一篇：</strong><a href="/code/17295.html">【学vue跟玩一样】快速搞懂vue渲染</a> </p> </div>  <div class="d-flex flex-stack mb-2 mt-10">  <h3 class="text-dark fs-5 fw-bold text-gray-800">相关内容</h3>  </div> <div class="separator separator-dashed mb-9"></div>  <div class="row g-10"> </div> </div>  </div>   <div class="col-xl-4 mt-0">  <div class="card card-flush h-md-100">  <div class="card-header pt-5 ">  <h3 class="card-title align-items-start flex-column">  <div class="d-flex align-items-center mb-2">  <span class="fs-5 fw-bold text-gray-800 ">热门资讯</span>  </div>  </h3>  </div>   <div class="card-body pt-3">  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/uploadfile/202405/202883a02494a7d.gif')"></div> </div>   <div class="m-0"> <a href="/code/17007.html" class="text-dark fw-bold text-hover-primary fs-6">【NI Multisim 14...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7"> 目录序言一、工具栏 🍊1.“标准”工具栏 🍊 2.视图工具...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/uploadfile/202405/2d9a7c3e3a74.png')"></div> </div>   <div class="m-0"> <a href="/code/19861.html" class="text-dark fw-bold text-hover-primary fs-6">银河麒麟V10SP1高级服务器...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">银河麒麟高级服务器操作系统简介：银河麒麟高级服务器操作系统V10是针对企业级关键业务...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div>   <div class="m-0"> <a href="/code/186639.html" class="text-dark fw-bold text-hover-primary fs-6">不能访问光猫的的管理页面</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">光猫是现代家庭宽带网络的重要组成部分，它可以提供高速稳定的网络连接。但是，有时候我们会遇到不能访问光...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div>   <div class="m-0"> <a href="/code/63851.html" class="text-dark fw-bold text-hover-primary fs-6">AWSECS：访问外部网络时出...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">如果您在AWS ECS中部署了应用程序，并且该应用程序需要访问外部网络，但是无法正常访问，可能是因为...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div>   <div class="m-0"> <a href="/code/84151.html" class="text-dark fw-bold text-hover-primary fs-6">Android|无法访问或保存...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">这个问题可能是由于权限设置不正确导致的。您需要在应用程序清单文件中添加以下代码来请求适当的权限：此外...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div>   <div class="m-0"> <a href="/code/148340.html" class="text-dark fw-bold text-hover-primary fs-6">北信源内网安全管理卸载</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">北信源内网安全管理是一款网络安全管理软件，主要用于保护内网安全。在日常使用过程中，卸载该软件是一种常...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div>   <div class="m-0"> <a href="/code/63983.html" class="text-dark fw-bold text-hover-primary fs-6">AWSElasticBeans...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">在Dockerfile中手动配置nginx反向代理。例如，在Dockerfile中添加以下代码：FR...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div>   <div class="m-0"> <a href="/code/57543.html" class="text-dark fw-bold text-hover-primary fs-6">AsusVivobook无法开...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">首先，我们可以尝试重置BIOS（Basic Input/Output System）来解决这个问题。...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div>   <div class="m-0"> <a href="/code/124779.html" class="text-dark fw-bold text-hover-primary fs-6">ASM贪吃蛇游戏-解决错误的问...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">要解决ASM贪吃蛇游戏中的错误问题，你可以按照以下步骤进行：首先，确定错误的具体表现和问题所在。在贪...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/uploadfile/202403/b8ff226395d4434.png')"></div> </div>   <div class="m-0"> <a href="/code/14159.html" class="text-dark fw-bold text-hover-primary fs-6">月入8000+的steam搬砖...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">大家好，我是阿阳今天要给大家介绍的是 steam 游戏搬砖项目，目前...</span> </div>  </div> </div>  </div>  </div>  </div> </div>  </div>  </div>   <div id="kt_app_footer" class="app-footer">  <div class="app-container container-xxl d-flex flex-column flex-md-row flex-center flex-md-stack py-3">  <div class="text-dark order-2 order-md-1"> <span class="text-muted fw-semibold me-1">2025 ©</span> <a href="/" target="_blank" class="text-gray-800 text-hover-primary">linux办公网</a> </div>   <ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1"> <li class="menu-item"> <a href="/news/" target="_blank" class="menu-link px-2">linux资讯</a> </li> <li class="menu-item"> <a href="/yingyong/" target="_blank" class="menu-link px-2">linux应用</a> </li> <li class="menu-item"> <a href="/code/" target="_blank" class="menu-link px-2">编程开发</a> </li> <li class="menu-item"> <a href="/linuxzg/" target="_blank" class="menu-link px-2">Linux中国 </a> </li> </ul>  </div>  </div>  </div>  </div>  </div>  </div>  <div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true">  <span class="svg-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect opacity="0.5" x="13" y="6" width="13" height="2" rx="1" transform="rotate(90 13 6)" fill="currentColor"></rect> <path d="M12.5657 8.56569L16.75 12.75C17.1642 13.1642 17.8358 13.1642 18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25L12.7071 5.70711C12.3166 5.31658 11.6834 5.31658 11.2929 5.70711L5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75C6.16421 13.1642 6.83579 13.1642 7.25 12.75L11.4343 8.56569C11.7467 8.25327 12.2533 8.25327 12.5657 8.56569Z" fill="currentColor"></path> </svg> </span>  </div>  <script>var hostUrl = "/static/default/pc/";</script>  <script src="/static/default/pc/plugins/global/plugins.bundle.js"></script> <script src="/static/default/pc/js/scripts.bundle.js"></script>   </body>  </html>