本文摘要：本文介绍了如何运用纯HTML代码搭建个人博客，首先从创建基础HTML文件开始，设置必要的元数据如字符集和页面标题。在网页主体部分，依次构建导航栏（包含首页、关于我、联系我等链接）、博客文章列表（展示各篇文章的链接）以及页脚（添加版权信息）。通过这些步骤，初步实现了一个个人博客的基础框架结构，为进一步个性化和完善提供了起点。关键词包括：HTML代码、个人博客、创建、导航栏、博客文章列表、页脚、元数据、标题、链接及页面结构。

HTML

个人博客是一个非常好的沟通渠道，让我们可以共享自己的经历，思索和心得。在这里，我们可以呈现我们的作品，记录我们的发展历程，甚至可以通过博客认识更多的志趣相投的朋友。在这篇文章中，我将讲解如何应用原始HTML代码建立个人博客。首先，我们需要建立一个html文件，并在头部信息中插入必需的metadata。以下是一个典型的html头部信息：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的个人博客</title>
</head>
<body>
</body>
</html>

在body标签内，我们可以开始搭建我们的博客。首先，我们需要一个菜单栏，可以帮助读者便捷浏览网站。以下是一个简单的菜单栏代码样例：

<nav>
<ul>
<li><a href="index.html">主页</a></li>
<li><a href="about.html">个人简介</a></li>
<li><a href="contact.html">联络方式</a></li>
</ul>
</nav>

接下来我们需要一个文章目录。以下是一个简单的列表代码样例：

<h2>我的博客</h2>
<ul>
<li><a href="post1.html">我的第一篇博客</a></li>
<li><a href="post2.html">我的第二篇博客</a></li>
</ul>

最后，我们需要插入一个页脚，让我们的博客看起来更加完整。以下是一个简单的页脚代码样例：

<footer>
<p>版权所有 © 2021 我的个人博客</p>
</footer>

到此为止，我们已经成功建立了一个基本的个人博客。应用p标签和pre标签可以使我们的代码更加清晰易懂。当然，这只是一个起点，我们可以根据自己的需求和兴趣不断地对博客进行改进。

名词解释

作为当前文章的名词解释，仅对当前文章有效。

HTML代码：HTML（HyperText Markup Language）是一种标记语言，用于创建和设计网页内容的结构。在本文语境中，HTML代码是指用HTML语法编写的源代码，用于构建个人博客的基本框架，包括设置元数据、创建导航栏、展示博客文章列表以及添加页脚等元素。

元数据：元数据是关于数据的数据，它提供了有关网页基本信息的描述，如字符集、页面标题等。在HTML文件中，元数据通常位于标签内，例如，定义了网页的字符编码格式，标签则设置了浏览器标签页上显示的网页标题，这些都是构成网页元数据的重要部分。</span></div> <div class='explaination-item'><span class='noun'><a href='/index/search_1.html?term=静态网站生成器'>静态网站生成器<i class='el-icon-search'></i></a></span>：<span class='explain'>静态网站生成器是一种工具，它可以将文本文件（如Markdown格式的内容）转换为完整的、功能齐全的静态网页。在Web开发领域，Jekyll、Hugo和Hexo等静态网站生成器常被用来搭建个人博客，它们的优势在于能快速生成SEO友好、加载速度快且易于部署的静态网页，同时支持主题定制和插件扩展，使得非专业开发者也能高效地管理博客内容和样式布局。虽然本文主要介绍了如何使用纯HTML代码创建博客，但提及静态网站生成器是为了提供一个更现代化、高效的博客搭建方案作为后续探索方向。</span></div> </div> </div> <div class="extended-reading-box content-box" style="margin-top:20px;"> <div class="box-title"> <i class="el-icon-reading title-icon"></i> <span class="title-text">延伸阅读</span> <span class="title-info"> <el-tooltip placement="bottom-end"> <div slot="content">作为当前文章的延伸阅读，仅对当前文章有效。</div> <i class="el-icon-info"></i> </el-tooltip> </span> </div> <div class="reading-content"> 在深入理解如何使用纯HTML代码创建个人博客后，进一步探索现今Web开发领域中更多元化的博客搭建方案是十分有益的。例如，静态网站生成器（如Jekyll、Hugo和Hexo）正逐渐受到欢迎，它们不仅支持Markdown格式写作，还能结合HTML、CSS和JavaScript进行深度定制，极大地提升了博客制作效率与个性化程度。<br/>近期，GitHub Pages与Netlify等服务平台提供了免费托管静态网站的服务，使得基于这些生成器创建个人博客变得更为便捷。用户只需将源代码推送到GitHub仓库，即可自动部署博客，实现版本控制的同时降低了运维成本。<br/>此外，对于追求动态功能和交互体验的用户，可以考虑学习WordPress、Ghost等CMS系统来构建博客。它们基于数据库驱动，拥有丰富的主题模板和插件生态系统，使不具备专业编程技能的博主也能轻松管理内容和设计样式。<br/>同时，随着Web技术的发展，响应式设计和无障碍访问已成为现代网页的标准配置。在创建个人博客时，确保你的HTML结构遵循语义化原则，配合CSS Flexbox或Grid布局，以及恰当运用ARIA属性提升辅助技术用户的体验，也是不容忽视的重要环节。<br/>总之，在掌握了基础HTML编码后，持续关注并学习Web开发领域的最新趋势和技术，将有助于我们打造更专业、更具吸引力的个人博客空间。 </div> </div>  <div class="random-linux-study content-box" style="margin-top:20px;margin-bottom:20px;"> <div class="box-title"> <i class="el-icon-monitor title-icon"></i> <span class="title-text">知识学习</span> <span class="title-info"> <el-tooltip placement="bottom-end"> <div slot="content">实践的时候请根据实际情况谨慎操作。</div> <i class="el-icon-info"></i> </el-tooltip> </span> </div> <div class="custom-gray-tip" style="margin-top:10px">随机学习一条linux命令：</div> <div class="command-content"> <span class='command-text'>scp local_file user@remote_host:destination_path </span> <span class='comment-text'>- 安全复制文件到远程主机。</span> </div> </div>  <div class="popular-list content-box"> <div class="box-title"> <i class="el-icon-star-off title-icon"></i> <span class="title-text">推荐内容</span> <span class="title-info"> <el-tooltip placement="bottom-end"> <div slot="content">推荐本栏目内的其它文章，看看还有哪些文章让你感兴趣。</div> <i class="el-icon-info"></i> </el-tooltip> </span> </div> <div class="article-items"> <div class='article-item'> <el-row> <el-col :span='8' class='article-left'> <span class='category-tag'>HTML</span> <el-image class='article-image' src='/blog-imgs/thumbnail/2024-01-23/d23652e2-bd32-4af2-904c-20fee6cbd9ba.jpg' fit='cover' style='border-radius:5px;width:100%;height:80px;' alt='冰墩墩html css代码'></el-image> </el-col> <el-col :span='16' class='article-info'> <div class='article-title'> <el-tooltip class='item' effect='dark' content='冰墩墩html css代码' placement='top-start'> <a href='/html/5700.html' class='article-link'>冰墩墩html css代码</a> </el-tooltip> </div> <div class='article-bottom'>2023-07-30</div> </el-col> </el-row></div> <div class='article-item'> <el-row> <el-col :span='8' class='article-left'> <span class='category-tag'>HTML</span> <el-image class='article-image' src='/blog-imgs/thumbnail/2024-01-18/ddcfd83c-78bd-413d-ab8e-6dd96a33ad40.jpg' fit='cover' style='border-radius:5px;width:100%;height:80px;' alt='webpack --watch 模式下利用自定义插件CopyAfterCompilePlugin实现编译完成后文件实时拷贝至指定目录'></el-image> </el-col> <el-col :span='16' class='article-info'> <div class='article-title'> <el-tooltip class='item' effect='dark' content='webpack --watch 模式下利用自定义插件CopyAfterCompilePlugin实现编译完成后文件实时拷贝至指定目录' placement='top-start'> <a href='/html/4119.html' class='article-link'>webpack --watch 模式下利用自定义插件CopyAfterCompilePlugin实现编译完成后文件实时拷贝至指定目录</a> </el-tooltip> </div> <div class='article-bottom'>2023-12-07</div> </el-col> </el-row></div> <div class='article-item'> <el-row> <el-col :span='8' class='article-left'> <span class='category-tag'>HTML</span> <el-image class='article-image' src='/blog-imgs/thumbnail/2024-01-23/72c3292f-4927-4ab0-b207-531a7ce2db40.jpg' fit='cover' style='border-radius:5px;width:100%;height:80px;' alt='分页的html代码'></el-image> </el-col> <el-col :span='16' class='article-info'> <div class='article-title'> <el-tooltip class='item' effect='dark' content='分页的html代码' placement='top-start'> <a href='/html/5719.html' class='article-link'>分页的html代码</a> </el-tooltip> </div> <div class='article-bottom'>2023-07-10</div> </el-col> </el-row></div> <div class='article-item'> <el-row> <el-col :span='8' class='article-left'> <span class='category-tag'>HTML</span> <el-image class='article-image' src='/blog-imgs/thumbnail/2024-01-17/9b284851-8ae9-46fc-b01c-7c7aeb382ca2.jpg' fit='cover' style='border-radius:5px;width:100%;height:80px;' alt='解决服务器部署中视图文件路径错误：配置设置、引擎支持与相对/绝对路径应用实践'></el-image> </el-col> <el-col :span='16' class='article-info'> <div class='article-title'> <el-tooltip class='item' effect='dark' content='解决服务器部署中视图文件路径错误：配置设置、引擎支持与相对/绝对路径应用实践' placement='top-start'> <a href='/html/2078.html' class='article-link'>解决服务器部署中视图文件路径错误：配置设置、引擎支持与相对/绝对路径应用实践</a> </el-tooltip> </div> <div class='article-bottom'>2023-11-08</div> </el-col> </el-row></div> <div class='article-item'> <el-row> <el-col :span='8' class='article-left'> <span class='category-tag'>HTML</span> <el-image class='article-image' src='/blog-imgs/thumbnail/2024-01-16/01ce2149-4d5c-411c-a12c-86a36249f737.jpg' fit='cover' style='border-radius:5px;width:100%;height:80px;' alt='Bootstrap滚动监听无效问题排查：jQuery与DOMContentLoaded事件应用及CSS样式冲突解决方案'></el-image> </el-col> <el-col :span='16' class='article-info'> <div class='article-title'> <el-tooltip class='item' effect='dark' content='Bootstrap滚动监听无效问题排查：jQuery与DOMContentLoaded事件应用及CSS样式冲突解决方案' placement='top-start'> <a href='/html/387.html' class='article-link'>Bootstrap滚动监听无效问题排查：jQuery与DOMContentLoaded事件应用及CSS样式冲突解决方案</a> </el-tooltip> </div> <div class='article-bottom'>2023-01-14</div> </el-col> </el-row></div> <div class='article-item'> <el-row> <el-col :span='8' class='article-left'> <span class='category-tag'>HTML</span> <el-image class='article-image' src='/blog-imgs/thumbnail/2024-01-22/c1fcb529-1f24-4738-9a03-e6a375702673.jpg' fit='cover' style='border-radius:5px;width:100%;height:80px;' alt='倒数html代码'></el-image> </el-col> <el-col :span='16' class='article-info'> <div class='article-title'> <el-tooltip class='item' effect='dark' content='倒数html代码' placement='top-start'> <a href='/html/5631.html' class='article-link'>倒数html代码</a> </el-tooltip> </div> <div class='article-bottom'>2023-11-11</div> </el-col> </el-row></div> <div class='article-item'> <el-row> <el-col :span='8' class='article-left'> <span class='category-tag'>HTML</span> <el-image class='article-image' src='/blog-imgs/thumbnail/2024-01-23/c53fae25-916a-46a3-bd62-ae195ba58386.jpg' fit='cover' style='border-radius:5px;width:100%;height:80px;' alt='下载的视频怎么是html代码是什么'></el-image> </el-col> <el-col :span='16' class='article-info'> <div class='article-title'> <el-tooltip class='item' effect='dark' content='下载的视频怎么是html代码是什么' placement='top-start'> <a href='/html/5997.html' class='article-link'>下载的视频怎么是html代码是什么</a> </el-tooltip> </div> <div class='article-bottom'>2023-12-03</div> </el-col> </el-row></div> <div class='article-item'> <el-row> <el-col :span='8' class='article-left'> <span class='category-tag'>HTML</span> <el-image class='article-image' src='/blog-imgs/thumbnail/2024-01-22/c5103ddf-904e-4b12-be21-e3ea104c2814.jpg' fit='cover' style='border-radius:5px;width:100%;height:80px;' alt='下拉导航条html代码'></el-image> </el-col> <el-col :span='16' class='article-info'> <div class='article-title'> <el-tooltip class='item' effect='dark' content='下拉导航条html代码' placement='top-start'> <a href='/html/5627.html' class='article-link'>下拉导航条html代码</a> </el-tooltip> </div> <div class='article-bottom'>2023-06-06</div> </el-col> </el-row></div> <div class='article-item'> <el-row> <el-col :span='8' class='article-left'> <span class='category-tag'>HTML</span> <el-image class='article-image' src='/blog-imgs/thumbnail/2024-01-18/de690680-c483-4751-a29d-2990cee45455.jpg' fit='cover' style='border-radius:5px;width:100%;height:80px;' alt='Electron 渲染进程中利用 electron-log 进行日志输出与管理：主进程协作、初始化设置及自定义路径格式化实践'></el-image> </el-col> <el-col :span='16' class='article-info'> <div class='article-title'> <el-tooltip class='item' effect='dark' content='Electron 渲染进程中利用 electron-log 进行日志输出与管理：主进程协作、初始化设置及自定义路径格式化实践' placement='top-start'> <a href='/html/3541.html' class='article-link'>Electron 渲染进程中利用 electron-log 进行日志输出与管理：主进程协作、初始化设置及自定义路径格式化实践</a> </el-tooltip> </div> <div class='article-bottom'>2023-10-02</div> </el-col> </el-row></div> <div class='article-item'> <el-row> <el-col :span='8' class='article-left'> <span class='category-tag'>HTML</span> <el-image class='article-image' src='/blog-imgs/thumbnail/2024-01-27/b0919223-2d83-4bdc-863e-b8a46d53048c.jpg' fit='cover' style='border-radius:5px;width:100%;height:80px;' alt='webpagetest帮助html站点页面全面体检，让你发现细节问题，针对性优化'></el-image> </el-col> <el-col :span='16' class='article-info'> <div class='article-title'> <el-tooltip class='item' effect='dark' content='webpagetest帮助html站点页面全面体检，让你发现细节问题，针对性优化' placement='top-start'> <a href='/html/6492.html' class='article-link'>webpagetest帮助html站点页面全面体检，让你发现细节问题，针对性优化</a> </el-tooltip> </div> <div class='article-bottom'>2024-01-27</div> </el-col> </el-row></div> <div class='article-item'> <el-row> <el-col :span='8' class='article-left'> <span class='category-tag'>HTML</span> <el-image class='article-image' src='/blog-imgs/thumbnail/2024-01-19/ca385abc-952e-4f86-9134-643cef513f8c.jpg' fit='cover' style='border-radius:5px;width:100%;height:80px;' alt='HTML标签内插入文档时的内容解析问题及保持完整结构的JavaScript解决方案举例'></el-image> </el-col> <el-col :span='16' class='article-info'> <div class='article-title'> <el-tooltip class='item' effect='dark' content='HTML标签内插入文档时的内容解析问题及保持完整结构的JavaScript解决方案举例' placement='top-start'> <a href='/html/4344.html' class='article-link'>HTML标签内插入文档时的内容解析问题及保持完整结构的JavaScript解决方案举例</a> </el-tooltip> </div> <div class='article-bottom'>2023-04-15</div> </el-col> </el-row></div> <div class='article-item'> <el-row> <el-col :span='8' class='article-left'> <span class='category-tag'>HTML</span> <el-image class='article-image' src='/blog-imgs/thumbnail/2024-01-22/21d95904-9945-4324-a402-7ddd1d37ef9e.jpg' fit='cover' style='border-radius:5px;width:100%;height:80px;' alt='代码靠右对齐html'></el-image> </el-col> <el-col :span='16' class='article-info'> <div class='article-title'> <el-tooltip class='item' effect='dark' content='代码靠右对齐html' placement='top-start'> <a href='/html/5570.html' class='article-link'>代码靠右对齐html</a> </el-tooltip> </div> <div class='article-bottom'>2023-12-23</div> </el-col> </el-row></div> </div> </div>  <div class="navigator-box content-box"> <div class="box-title"> <i class="el-icon-suitcase title-icon"></i> <span class="title-text">快速导航 </span> <span class="title-info"> <el-tooltip placement="bottom-end"> <div slot="content">这里展示了本站支持的所有栏目，方便快速切换。</div> <i class="el-icon-info"></i> </el-tooltip> </span> </div> <el-row> <el-col :span='8'><a href='/index/page_1.html' class='nav-item'>首页</a></el-col> <el-col :span='8'><a href='/resource_download/page_1.html' class='nav-item'>建站模板下载</a></el-col> <el-col :span='8'><a href='/jquery_plugin/page_1.html' class='nav-item'>JQuery插件下载</a></el-col> </el-row> <el-row> <el-col :span='8'><a href='/csdn_blog/page_1.html' class='nav-item'>转载文章</a></el-col> <el-col :span='8'><a href='/html/page_1.html' class='nav-item'>HTML</a></el-col> <el-col :span='8'><a href='/css/page_1.html' class='nav-item'>CSS</a></el-col> </el-row> <el-row> <el-col :span='8'><a href='/javascript/page_1.html' class='nav-item'>Javascript</a></el-col> <el-col :span='8'><a href='/java/page_1.html' class='nav-item'>Java</a></el-col> <el-col :span='8'><a href='/python/page_1.html' class='nav-item'>Python</a></el-col> </el-row> <el-row> <el-col :span='8'><a href='/php/page_1.html' class='nav-item'>PHP</a></el-col> <el-col :span='8'><a href='/golang/page_1.html' class='nav-item'>Golang</a></el-col> <el-col :span='8'><a href='/scala/page_1.html' class='nav-item'>Scala</a></el-col> </el-row> <el-row> <el-col :span='8'><a href='/kotlin/page_1.html' class='nav-item'>Kotlin</a></el-col> <el-col :span='8'><a href='/groovy/page_1.html' class='nav-item'>Groovy</a></el-col> <el-col :span='8'><a href='/ruby/page_1.html' class='nav-item'>Ruby</a></el-col> </el-row> <el-row> <el-col :span='8'><a href='/lua/page_1.html' class='nav-item'>Lua</a></el-col> <el-col :span='8'><a href='/dotnet/page_1.html' class='nav-item'>.net</a></el-col> <el-col :span='8'><a href='/csharp/page_1.html' class='nav-item'>c#</a></el-col> </el-row> <el-row> <el-col :span='8'><a href='/cplusplus/page_1.html' class='nav-item'>c++</a></el-col> <el-col :span='8'><a href='/springboot/page_1.html' class='nav-item'>SpringBoot</a></el-col> <el-col :span='8'><a href='/springcloud/page_1.html' class='nav-item'>SpringCloud</a></el-col> </el-row> <el-row> <el-col :span='8'><a href='/struts2/page_1.html' class='nav-item'>Struts2</a></el-col> <el-col :span='8'><a href='/tornado/page_1.html' class='nav-item'>Tornado</a></el-col> <el-col :span='8'><a href='/beego/page_1.html' class='nav-item'>Beego</a></el-col> </el-row> <el-row> <el-col :span='8'><a href='/go_spring/page_1.html' class='nav-item'>Go-Spring</a></el-col> <el-col :span='8'><a href='/go_gin/page_1.html' class='nav-item'>Go Gin</a></el-col> <el-col :span='8'><a href='/go_iris/page_1.html' class='nav-item'>Go Iris</a></el-col> </el-row> <el-row> <el-col :span='8'><a href='/mybatis/page_1.html' class='nav-item'>MyBatis</a></el-col> <el-col :span='8'><a href='/hibernate/page_1.html' class='nav-item'>Hibernate</a></el-col> <el-col :span='8'><a href='/mysql/page_1.html' class='nav-item'>MySQL</a></el-col> </el-row> <el-row> <el-col :span='8'><a href='/oracle/page_1.html' class='nav-item'>Oracle</a></el-col> <el-col :span='8'><a href='/mongo/page_1.html' class='nav-item'>Mongo</a></el-col> <el-col :span='8'><a href='/vue/page_1.html' class='nav-item'>VUE</a></el-col> </el-row> <el-row> <el-col :span='8'><a href='/reactjs/page_1.html' class='nav-item'>ReactJS</a></el-col> <el-col :span='8'><a href='/angularjs/page_1.html' class='nav-item'>AngularJS</a></el-col> <el-col :span='8'><a href='/jquery/page_1.html' class='nav-item'>JQuery</a></el-col> </el-row> <el-row> <el-col :span='8'><a href='/nodejs/page_1.html' class='nav-item'>NodeJS</a></el-col> <el-col :span='8'><a href='/json/page_1.html' class='nav-item'>JSON</a></el-col> <el-col :span='8'><a href='/element_ui/page_1.html' class='nav-item'>Element-UI</a></el-col> </el-row> <el-row> <el-col :span='8'><a href='/bootstrap/page_1.html' class='nav-item'>Bootstrap</a></el-col> <el-col :span='8'><a href='/material_ui/page_1.html' class='nav-item'>Material UI</a></el-col> <el-col :span='8'><a href='/redis/page_1.html' class='nav-item'>Redis</a></el-col> </el-row> <el-row> <el-col :span='8'><a href='/memcache/page_1.html' class='nav-item'>MemCache</a></el-col> <el-col :span='8'><a href='/etcd/page_1.html' class='nav-item'>Etcd</a></el-col> <el-col :span='8'><a href='/cassandra/page_1.html' class='nav-item'>Cassandra</a></el-col> </el-row> <el-row> <el-col :span='8'><a href='/kafka/page_1.html' class='nav-item'>Kafka</a></el-col> <el-col :span='8'><a href='/rabbitmq/page_1.html' class='nav-item'>RabbitMQ</a></el-col> <el-col :span='8'><a href='/rocketmq/page_1.html' class='nav-item'>RocketMQ</a></el-col> </el-row> <el-row> <el-col :span='8'><a href='/activemq/page_1.html' class='nav-item'>ActiveMQ</a></el-col> <el-col :span='8'><a href='/hive/page_1.html' class='nav-item'>Hive</a></el-col> <el-col :span='8'><a href='/impala/page_1.html' class='nav-item'>Impala</a></el-col> </el-row> <el-row> <el-col :span='8'><a href='/clickhouse/page_1.html' class='nav-item'>ClickHouse</a></el-col> <el-col :span='8'><a href='/dorisdb/page_1.html' class='nav-item'>DorisDB</a></el-col> <el-col :span='8'><a href='/greenplum/page_1.html' class='nav-item'>Greenplum</a></el-col> </el-row> <el-row> <el-col :span='8'><a href='/postgresql/page_1.html' class='nav-item'>PostgreSQL</a></el-col> <el-col :span='8'><a href='/hbase/page_1.html' class='nav-item'>HBase</a></el-col> <el-col :span='8'><a href='/kylin/page_1.html' class='nav-item'>Kylin</a></el-col> </el-row> <el-row> <el-col :span='8'><a href='/hadoop/page_1.html' class='nav-item'>Hadoop</a></el-col> <el-col :span='8'><a href='/apache_pig/page_1.html' class='nav-item'>Apache Pig</a></el-col> <el-col :span='8'><a href='/elasticsearch/page_1.html' class='nav-item'>ElasticSearch</a></el-col> </el-row> <el-row> <el-col :span='8'><a href='/apache_lucene/page_1.html' class='nav-item'>Lucene</a></el-col> <el-col :span='8'><a href='/apache_solr/page_1.html' class='nav-item'>Apache Solr</a></el-col> <el-col :span='8'><a href='/kibana/page_1.html' class='nav-item'>Kibana</a></el-col> </el-row> <el-row> <el-col :span='8'><a href='/logstash/page_1.html' class='nav-item'>Logstash</a></el-col> <el-col :span='8'><a href='/seatunnel/page_1.html' class='nav-item'>SeaTunnel</a></el-col> <el-col :span='8'><a href='/sqoop/page_1.html' class='nav-item'>Sqoop</a></el-col> </el-row> <el-row> <el-col :span='8'><a href='/datax/page_1.html' class='nav-item'>Datax</a></el-col> <el-col :span='8'><a href='/flink/page_1.html' class='nav-item'>Flink</a></el-col> <el-col :span='8'><a href='/spark/page_1.html' class='nav-item'>Spark</a></el-col> </el-row> <el-row> <el-col :span='8'><a href='/apache_atlas/page_1.html' class='nav-item'>Atlas</a></el-col> <el-col :span='8'><a href='/superset/page_1.html' class='nav-item'>Superset</a></el-col> <el-col :span='8'><a href='/saiku/page_1.html' class='nav-item'>Saiku</a></el-col> </el-row> <el-row> <el-col :span='8'><a href='/mahout/page_1.html' class='nav-item'>Mahout</a></el-col> <el-col :span='8'><a href='/tesseract/page_1.html' class='nav-item'>Tesseract</a></el-col> <el-col :span='8'><a href='/zookeeper/page_1.html' class='nav-item'>ZooKeeper</a></el-col> </el-row> <el-row> <el-col :span='8'><a href='/nacos/page_1.html' class='nav-item'>Nacos</a></el-col> <el-col :span='8'><a href='/consul/page_1.html' class='nav-item'>Consul</a></el-col> <el-col :span='8'><a href='/dubbo/page_1.html' class='nav-item'>Dubbo</a></el-col> </el-row> <el-row> <el-col :span='8'><a href='/hessianrpc/page_1.html' class='nav-item'>HessianRPC</a></el-col> <el-col :span='8'><a href='/tomcat/page_1.html' class='nav-item'>Tomcat</a></el-col> <el-col :span='8'><a href='/nginx/page_1.html' class='nav-item'>Nginx</a></el-col> </el-row> <el-row> <el-col :span='8'><a href='/netty/page_1.html' class='nav-item'>Netty</a></el-col> <el-col :span='8'><a href='/linux/page_1.html' class='nav-item'>Linux</a></el-col> <el-col :span='8'><a href='/shell/page_1.html' class='nav-item'>Shell</a></el-col> </el-row> <el-row> <el-col :span='8'><a href='/docker/page_1.html' class='nav-item'>Docker</a></el-col> <el-col :span='8'><a href='/kubernetes/page_1.html' class='nav-item'>Kubernetes</a></el-col> <el-col :span='8'><a href='/maven/page_1.html' class='nav-item'>Maven</a></el-col> </el-row> <el-row> <el-col :span='8'><a href='/gradle/page_1.html' class='nav-item'>Gradle</a></el-col> </el-row> </div>  <div class="history-box content-box" style="margin-bottom:20px;margin-top:20px;"> <div class="box-title"> <i class="el-icon-date title-icon"></i><span class="title-text">历史内容</span> <span class="title-info"> <el-tooltip placement="bottom-end"> <div slot="content">快速导航到对应月份的历史文章列表。</div> <i class="el-icon-info"></i> </el-tooltip> </span> </div> <div class="history-month-list"> <el-row> <el-col :span='8'><a href='/index/search_1.html' class='month-link'>全部文章</a></el-col> <el-col :span='8'><a href='/html/search_1.html' class='month-link month-link-active'>全部HTML</a></el-col> <el-col :span='8'><a href='/html/search_1.html?month=2025-05' class='month-link'>2025年05月</a></el-col> <el-col :span='8'><a href='/html/search_1.html?month=2025-04' class='month-link'>2025年04月</a></el-col> <el-col :span='8'><a href='/html/search_1.html?month=2025-03' class='month-link'>2025年03月</a></el-col> <el-col :span='8'><a href='/html/search_1.html?month=2025-02' class='month-link'>2025年02月</a></el-col> <el-col :span='8'><a href='/html/search_1.html?month=2025-01' class='month-link'>2025年01月</a></el-col> <el-col :span='8'><a href='/html/search_1.html?month=2024-12' class='month-link'>2024年12月</a></el-col> <el-col :span='8'><a href='/html/search_1.html?month=2024-11' class='month-link'>2024年11月</a></el-col> <el-col :span='8'><a href='/html/search_1.html?month=2024-10' class='month-link'>2024年10月</a></el-col> <el-col :span='8'><a href='/html/search_1.html?month=2024-09' class='month-link'>2024年09月</a></el-col> <el-col :span='8'><a href='/html/search_1.html?month=2024-08' class='month-link'>2024年08月</a></el-col> <el-col :span='8'><a href='/html/search_1.html?month=2024-07' class='month-link'>2024年07月</a></el-col> <el-col :span='8'><a href='/html/search_1.html?month=2024-06' class='month-link'>2024年06月</a></el-col> <el-col :span='8'><a href='/html/search_1.html?month=2024-05' class='month-link'>2024年05月</a></el-col> <el-col :span='8'><a href='/html/search_1.html?month=2024-04' class='month-link'>2024年04月</a></el-col> <el-col :span='8'><a href='/html/search_1.html?month=2024-03' class='month-link'>2024年03月</a></el-col> <el-col :span='8'><a href='/html/search_1.html?month=2024-02' class='month-link'>2024年02月</a></el-col> <el-col :span='8'><a href='/html/search_1.html?month=2024-01' class='month-link'>2024年01月</a></el-col> <el-col :span='8'><a href='/html/search_1.html?month=2023-12' class='month-link'>2023年12月</a></el-col> <el-col :span='8'><a href='/html/search_1.html?month=2023-11' class='month-link'>2023年11月</a></el-col> <el-col :span='8'><a href='/html/search_1.html?month=2023-10' class='month-link'>2023年10月</a></el-col> <el-col :span='8'><a href='/html/search_1.html?month=2023-09' class='month-link'>2023年09月</a></el-col> <el-col :span='8'><a href='/html/search_1.html?month=2023-08' class='month-link'>2023年08月</a></el-col> <el-col :span='8'><a href='/html/search_1.html?month=2023-07' class='month-link'>2023年07月</a></el-col> <el-col :span='8'><a href='/html/search_1.html?month=2023-06' class='month-link'>2023年06月</a></el-col> <el-col :span='8'><a href='/html/search_1.html?month=2023-05' class='month-link'>2023年05月</a></el-col> <el-col :span='8'><a href='/html/search_1.html?month=2023-04' class='month-link'>2023年04月</a></el-col> <el-col :span='8'><a href='/html/search_1.html?month=2023-03' class='month-link'>2023年03月</a></el-col> <el-col :span='8'><a href='/html/search_1.html?month=2023-02' class='month-link'>2023年02月</a></el-col> <el-col :span='8'><a href='/html/search_1.html?month=2023-01' class='month-link'>2023年01月</a></el-col> </el-row> </div> </div>  <div class="guess-interested-container"> <div class="guess-article-list content-box" style="margin-top:20px;"> <div class="box-title"> <i class="el-icon-collection title-icon"></i> <span class="title-text">随便看看</span> <span class="title-info"> <el-tooltip placement="bottom-end"> <div slot="content">拉到页底了吧，随便看看还有哪些文章你可能感兴趣。</div> <i class="el-icon-info"></i> </el-tooltip> </span>  </div> <div class="article-items"> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[ActiveMQ]多语言环境下的ActiveMQ部署：统一消息格式与API接口实践' placement='top-start'> <a href='/activemq/7224.html' class='article-link'><span class='article-category'>[ActiveMQ]</span>多语言环境下的ActiveMQ部署：统一消息格式与API接口实践</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>10-09</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[JQuery插件下载]支持6种放大模式的jQuery图片放大镜插件' placement='top-start'> <a href='/jquery_plugin/7126.html' class='article-link'><span class='article-category'>[JQuery插件下载]</span>支持6种放大模式的jQuery图片放大镜插件</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>09-05</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[SpringBoot]在Spring Boot应用中配置Nginx反向代理并实现HTTPS的SSL证书设置，包括请求路径获取与proxy_pass用法详解' placement='top-start'> <a href='/springboot/1998.html' class='article-link'><span class='article-category'>[SpringBoot]</span>在Spring Boot应用中配置Nginx反向代理并实现HTTPS的SSL证书设置，包括请求路径获取与proxy_pass用法详解</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>01-22</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[建站模板下载]白色纯净精品星级豪华酒店预定网站模板' placement='top-start'> <a href='/resource_download/4915.html' class='article-link'><span class='article-category'>[建站模板下载]</span>白色纯净精品星级豪华酒店预定网站模板</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>12-30</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[JQuery插件下载]egg.js-趣味复活节彩蛋js插件' placement='top-start'> <a href='/jquery_plugin/6281.html' class='article-link'><span class='article-category'>[JQuery插件下载]</span>egg.js-趣味复活节彩蛋js插件</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>11-05</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[Hive]在Apache Hive中运用窗口函数进行多列排序与聚合操作：分区、排序与ROW_NUMBER()实践' placement='top-start'> <a href='/hive/346.html' class='article-link'><span class='article-category'>[Hive]</span>在Apache Hive中运用窗口函数进行多列排序与聚合操作：分区、排序与ROW_NUMBER()实践</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>10-19</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[建站模板下载]数字代理商业公司模板下载' placement='top-start'> <a href='/resource_download/4695.html' class='article-link'><span class='article-category'>[建站模板下载]</span>数字代理商业公司模板下载</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>10-16</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[Mongo]MongoDB查询操作符详解：从基础到高级用法，涵盖$eq、范围查询与内嵌文档查询至汇总查询与aggregate应用' placement='top-start'> <a href='/mongo/4367.html' class='article-link'><span class='article-category'>[Mongo]</span>MongoDB查询操作符详解：从基础到高级用法，涵盖$eq、范围查询与内嵌文档查询至汇总查询与aggregate应用</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>10-04</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[Mahout]Mahout版本更新后应对API弃用：从旧版GenericItemBasedRecommender到新版recommend()方法的重构实践' placement='top-start'> <a href='/mahout/2055.html' class='article-link'><span class='article-category'>[Mahout]</span>Mahout版本更新后应对API弃用：从旧版GenericItemBasedRecommender到新版recommend()方法的重构实践</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>09-14</span></el-col></el-row> <el-row class='article-row more-article-tip'> <el-col :span='24'> <span>本次刷新还10个文章未展示，点击 <span class='more-button'><span class='more-text'>更多</span><i class='el-icon-arrow-down more-icon'></i></span>查看。 </span> </el-col></el-row> <div class='more-article-rows'> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[PostgreSQL]PostgreSQL数据库中InvalidColumnTypeCastError错误：原因、检查与转换函数解决方案' placement='top-start'> <a href='/postgresql/2266.html' class='article-link'><span class='article-category'>[PostgreSQL]</span>PostgreSQL数据库中InvalidColumnTypeCastError错误：原因、检查与转换函数解决方案</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>08-30</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[SpringCloud]SpringCloud网关与OAuth2访问权限管理在微服务架构中的实践运用' placement='top-start'> <a href='/springcloud/121.html' class='article-link'><span class='article-category'>[SpringCloud]</span>SpringCloud网关与OAuth2访问权限管理在微服务架构中的实践运用</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>07-15</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[转载文章][转载]每个字符旋转随机角度的图象验证码 V2.0' placement='top-start'> <a href='/csdn_blog/6027.html' class='article-link'><span class='article-category'>[转载文章]</span>[转载]每个字符旋转随机角度的图象验证码 V2.0</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>05-27</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[转载文章][转载]关于mysql的一些小知识' placement='top-start'> <a href='/csdn_blog/5681.html' class='article-link'><span class='article-category'>[转载文章]</span>[转载]关于mysql的一些小知识</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>04-26</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[建站模板下载]简洁披萨快餐厅外卖网站模板下载' placement='top-start'> <a href='/resource_download/5048.html' class='article-link'><span class='article-category'>[建站模板下载]</span>简洁披萨快餐厅外卖网站模板下载</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>04-03</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[Logstash]Logstash内存不足问题解决方案：调整pipeline.workers、队列大小与分批处理数据实践' placement='top-start'> <a href='/logstash/3526.html' class='article-link'><span class='article-category'>[Logstash]</span>Logstash内存不足问题解决方案：调整pipeline.workers、队列大小与分批处理数据实践</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>03-27</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[转载文章][转载]DevOps相关知识点' placement='top-start'> <a href='/csdn_blog/6164.html' class='article-link'><span class='article-category'>[转载文章]</span>[转载]DevOps相关知识点</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>03-19</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[JQuery插件下载]Swiper-强大的移动手机端幻灯片插件' placement='top-start'> <a href='/jquery_plugin/6382.html' class='article-link'><span class='article-category'>[JQuery插件下载]</span>Swiper-强大的移动手机端幻灯片插件</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>02-09</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[建站模板下载]字母个性质感高级机构动态HTML5网站模板' placement='top-start'> <a href='/resource_download/4712.html' class='article-link'><span class='article-category'>[建站模板下载]</span>字母个性质感高级机构动态HTML5网站模板</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>01-12</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[建站模板下载]红色大气企业数据统计后台管理网站模板' placement='top-start'> <a href='/resource_download/4987.html' class='article-link'><span class='article-category'>[建站模板下载]</span>红色大气企业数据统计后台管理网站模板</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>01-03</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[Python]python每日定时任务' placement='top-start'> <a href='/python/5657.html' class='article-link'><span class='article-category'>[Python]</span>python每日定时任务</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>01-01</span></el-col></el-row> </div> </div> </div> </div>   <div class="time-goes-box content-box" style="margin-top:20px;padding-top:10px;"> <div class="box-title" style="padding-top:10px"> <i class="el-icon-alarm-clock title-icon"></i> <span class="title-text">时光飞逝</span> <span class="title-info"> <el-tooltip placement="bottom-end"> <div slot="content">"流光容易把人抛，红了樱桃，绿了芭蕉。"</div> <i class="el-icon-info"></i> </el-tooltip> </span> </div> <div class="time-goes-progress"> <div class="progress-title time-day-title"></div> <div class="progressbar time-day-bar" data-perc="100"> <div class="bar"><span></span></div> <div class="label"><span></span></div> </div> <div class="progress-title time-week-title"></div> <div class="progressbar time-week-bar" data-perc="75"> <div class="bar color2"><span></span></div> <div class="label"><span></span></div> </div> <div class="progress-title time-month-title"></div> <div class="progressbar time-month-bar" data-perc="50"> <div class="bar color3"><span></span></div> <div class="label"><span></span></div> </div> <div class="progress-title time-year-title"></div> <div class="progressbar time-year-bar" data-perc="25"> <div class="bar color4"><span></span></div> <div class="label"><span></span></div> </div> </div> </div>  </div> </el-col> </el-row> </div> </el-main> <el-footer> <div class="footer"> <el-row class="footer-row"> <el-col :span="2" class="only-browser-item"> </el-col> <el-col :span="4" class="only-browser-item">  <i class="el-icon-chat-dot-round"></i> <span>客服QQ：424399461</span> </el-col> <el-col :span="4" class="only-browser-item"> <i class="el-icon-alarm-clock"></i> <span>工作时间：8:30-22:00</span> </el-col> <el-col :span="4" class="mobile-browser-item"> <i class="el-icon-link"></i> <span><a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">鲁ICP备2023030764号-4</a></span> </el-col> <el-col :span="4" class="only-browser-item"> <i class="el-icon-link"></i> <span><a href="http://www.12377.cn/" target="_blank" rel="nofollow">中国互联网举报中心</a></span> </el-col> <el-col :span="4" class="only-browser-item"> <i class="el-icon-house"></i> <span><a href="/sitemap.html" target="_blank">本站的站点地图</a></span> </el-col> <el-col :span="2" class="only-browser-item"> </el-col> </el-row> </div> </el-footer> <div class="go-to-top" @click="goToTop()"> <el-tooltip class="item" effect="dark" content="点我回到顶部" placement="top-start"> <el-image alt="回到顶部" src="/imgs/top.png" style="width:30px"></el-image> </el-tooltip> </div> </el-container> </div> <script> const pageType = "article"; const category = "html"; const categoryMap = {"kubernetes":"Kubernetes","css":"CSS","tomcat":"Tomcat","saiku":"Saiku","vue":"VUE","hessianrpc":"HessianRPC","redis":"Redis","seatunnel":"SeaTunnel","logstash":"Logstash","csharp":"c#","tesseract":"Tesseract","java":"Java","elasticsearch":"ElasticSearch","mysql":"MySQL","html":"HTML","memcache":"MemCache","kibana":"Kibana","datax":"Datax","python":"Python","oracle":"Oracle","nginx":"Nginx","zookeeper":"ZooKeeper","maven":"Maven","index":"首页","impala":"Impala","apache_solr":"Apache Solr","javascript":"Javascript","flink":"Flink","groovy":"Groovy","shell":"Shell","cassandra":"Cassandra","clickhouse":"ClickHouse","consul":"Consul","kafka":"Kafka","angularjs":"AngularJS","jquery_plugin":"JQuery插件下载","dorisdb":"DorisDB","hive":"Hive","mongo":"Mongo","springcloud":"SpringCloud","dotnet":".net","superset":"Superset","scala":"Scala","mybatis":"MyBatis","golang":"Golang","dubbo":"Dubbo","bootstrap":"Bootstrap","nodejs":"NodeJS","hibernate":"Hibernate","resource_download":"建站模板下载","apache_pig":"Apache Pig","jquery":"JQuery","springboot":"SpringBoot","docker":"Docker","nacos":"Nacos","postgresql":"PostgreSQL","spark":"Spark","linux":"Linux","greenplum":"Greenplum","apache_lucene":"Apache Lucene","json":"JSON","hadoop":"Hadoop","cplusplus":"c++","hbase":"HBase","netty":"Netty","activemq":"ActiveMQ","element_ui":"Element-UI","tornado":"Tornado","rocketmq":"RocketMQ","material_ui":"Material UI","kotlin":"Kotlin","csdn_blog":"转载文章","rabbitmq":"RabbitMQ","reactjs":"ReactJS","ruby":"Ruby","gradle":"Gradle","mahout":"Mahout","struts2":"Struts2","go_gin":"Go Gin","lua":"Lua","php":"PHP","apache_atlas":"Apache Atlas","sqoop":"Sqoop","go_spring":"Go-Spring","go_iris":"Go Iris","beego":"Beego","kylin":"Kylin","etcd":"Etcd"}; const moduleList = ["前端技术","前端框架和UI库","服务端和客户端","后端WEB和工程框架","数据库","中间件与web容器","大数据技术","数据搜索与日志","数据可视化与OLAP","系统与容器"]; const moduleMap = {"前端技术":["html","css","javascript"],"前端框架和UI库":["vue","reactjs","angularjs","jquery","nodejs","json","element_ui","bootstrap","material_ui"],"数据可视化与OLAP":["apache_atlas","superset","saiku","tesseract"],"中间件与web容器":["redis","memcache","etcd","cassandra","kafka","rabbitmq","rocketmq","activemq","nacos","consul","tomcat","nginx","netty"],"系统与容器":["linux","shell","docker","kubernetes"],"大数据技术":["hive","impala","clickhouse","dorisdb","greenplum","postgresql","hbase","kylin","hadoop","apache_pig","zookeeper","seatunnel","sqoop","datax","flink","spark","mahout"],"服务端和客户端":["java","python","php","golang","scala","kotlin","groovy","ruby","lua","dotnet","csharp","cplusplus"],"数据库":["mysql","oracle","mongo"],"数据搜索与日志":["elasticsearch","apache_lucene","apache_solr","kibana","logstash"],"后端WEB和工程框架":["springboot","springcloud","struts2","mybatis","hibernate","tornado","beego","go_spring","go_gin","go_iris","dubbo","hessianrpc","maven","gradle"]}; new Vue({ el: '#app', data: function () { return { searchCategory: "html", searchTerm:"", activeMenuKey: category, loginDialogVisible: false, loginDialogType: 'login', form:{ username:"", password:"", passwordAgain:"", inviteCode:"", rememberDays:"15days" } } }, created() { }, methods: { searchList(){ var term = this.onlyLeftEnChNumCharacters(this.searchTerm); window.open("/"+this.searchCategory+"/search_1.html?term="+term, '_self'); }, onlyLeftEnChNumCharacters(text) { if(!text){ return ""; } text = text.substring(0, Math.min(text.length, 38)); return text.replace(/[^a-zA-Z0-9一-龥\-\._ ]/g, ' ').replace(/\s+/g, ' '); }, userLogin(){ this.post("/user/login",{ username:this.form.username, password:this.base64Encode(this.form.password), rememberDays:this.form.rememberDays },res=>{ window.location.href = "/index.html"; },err=>{ // this.$message.info(err.msg); }); }, userRegister(){ this.post("/user/register",{ username:this.form.username, password:this.base64Encode(this.form.password), passwordAgain:this.base64Encode(this.form.passwordAgain), inviteCode:this.form.inviteCode },res=>{ window.location.href = "/index.html"; },err=>{ // this.$message.info(err.msg); }); }, post(url, data, hook, errHook) { axios.post(url, data) // 这里直接发的data，没有包body .then(response => { if (0 == response.data.status) { let msg = response.data.msg; if (msg && -1 != msg.indexOf("Exception: ")) { msg = msg.split("Exception: ")[1]; response.data.msg = msg; } this.$message.error(msg); if (errHook) { errHook(response.data); } } else { hook(response.data); } }) .catch(error => { if (errHook) { errHook(error); } }); }, base64Encode(str) { return str str = unescape(encodeURIComponent(str)); return btoa(str); }, goToTop(){ window.scrollTo({ top: 0, left: 0, behavior: 'smooth'}); } } }) </script> </body> </html>