本文摘要：这篇文章介绍了HTML代码在网站制作中的关键作用，强调了HTML语言作为创建网页的标准工具的重要性。文章详细解读了一个基础HTML文档结构，包括<!DOCTYPE html>声明、<html>根元素、<head>中定义的元数据（如<title>标签内的网页标题）以及<body>内承载的实际内容，如<h1>到<h6>各级标题、<p>段落文本和<img>图片标签。学习HTML时需掌握标签成对出现、属性值加引号等语法规则，并理解常用标签如<a>链接标签的属性及使用方法。通过参考教程、文档及实践编写代码，可以有效提升HTML技术能力。

HTML

做HTML代码是网站创建中的重要步骤。HTML（超文本标记语言）是一种用于创建网页的规范语言。创建HTML代码需要一定的基本知识和方法。

<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<body>
<h1>这是顶级标题</h1>
<p>这是一段文字。</p>
<img src="图片地址">
</body>
</html>

在HTML代码中，<!DOCTYPE html>是声明文件类型的声明，<html>元素是包括所有HTML代码的顶层元素。<head>元素包括文档的metadata，如标题和脚本。<title>元素设定了文档的标题，该元素必需包括在head元素中。<body>元素设定了HTML包括的文本内容，如文字、图片、链接等。<h1>元素是一种标题元素，h1~h6共6种级别，用于设定不同级别的标题。<p>元素设定文本段落，可以包括文字、图片、链接等。

在编写HTML代码时，需要遵守语法规则，如元素必需成对出现，元素名要小写，属性值要用引号包括等。同时，也需要了解常用元素的属性和使用方法。例如，<img>元素用于显示图片，需要声明图片的地址和大小等属性；<a>元素用于创建链接，需要声明链接的地址和文本等属性。

在学习HTML代码时，可以参考相关教程和文档，也可以参考其他网站的源代码，学习其结构和语法。同时，还需要不断实践，编写代码才能够更好地掌握方法和规则。

名词解释

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

HTML（HyperText Markup Language）：HTML是一种用于创建网页的标准标记语言，通过使用各种标签来组织和格式化网页内容，如文本、图像、视频等，并定义其结构和语义。在文章中，HTML代码是网站制作的基础环节，开发者通过编写HTML代码构建网页的基本框架和内容展示。

元数据（Metadata）：元数据是关于数据的数据，它提供了有关文档或资源的附加信息，但并非直接呈现给用户的内容。在HTML文档中，部分包含了元数据元素，例如标签定义了网页标题，这不仅影响浏览器标签页上的显示，还对SEO优化和用户体验有重要作用。</span></div> <div class='explaination-item'><span class='noun'><a href='/index/search_1.html?term=响应式图片（Responsive Images）'>响应式图片（Responsive Images）<i class='el-icon-search'></i></a></span>：<span class='explain'>响应式图片是指在不同设备和屏幕尺寸下能够自适应调整大小和分辨率的图片。虽然文中未直接提到响应式图片，但HTML5中的<img>标签可以通过srcset和sizes属性实现响应式图片功能，确保图片在不同设备上都能获得最佳显示效果，从而提升网页加载速度和用户体验。</span></div> <div class='explaination-item'><span class='noun'><a href='/index/search_1.html?term=SEO优化（Search Engine Optimization, SEO）'>SEO优化（Search Engine Optimization, SEO）<i class='el-icon-search'></i></a></span>：<span class='explain'>SEO优化是指通过改进网站内容、结构、关键词布局以及外部链接等方式，提高网站在搜索引擎自然搜索结果中的排名，从而吸引更多的潜在访问者并转化为有效流量。在文中提及，合理设置网页标题（<title>标签）等HTML元素有助于SEO优化，因为搜索引擎会优先考虑具有良好结构化数据和语义化的网页。</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代码对于网站制作的重要性后，进一步关注当前网页开发领域的最新动态和技术趋势是必不可少的。例如，W3C（万维网联盟）近期更新了对HTML5.2规范的支持，新增了如<dialog>标签用于创建对话框、<picture>标签以实现响应式图片布局等特性，这些都为开发者提供了更多优化用户体验的可能性。<br/>同时，随着Web组件技术的发展，自定义元素和Shadow DOM等新特性使得HTML代码更加模块化和可复用。前端开发者可以利用这些新技术构建更复杂、独立且易于维护的UI组件，提高开发效率。<br/>此外，在SEO优化方面，HTML结构和语义化标签的合理使用日益凸显其价值。Google等搜索引擎已明确表示会优先考虑具有良好结构化数据的网页，因此，学习如何通过HTML5语义标签（如<main>、<article>、<section>等）正确描述页面内容，将有助于提升网站在搜索结果中的排名和用户体验。<br/>对于初学者来说，不断实践并参考优质的教程资源至关重要。Mozilla Developer Network（MDN）持续提供详尽的HTML文档及实战案例，帮助开发者紧跟行业步伐，掌握最新的HTML编码技巧与最佳实践。通过积极参与开源项目、参与线上编程挑战以及定期查阅行业资讯，都能有效提升HTML技术水平，从而在实际的网站制作中游刃有余。 </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'>fc -e - </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='[Tornado]基于Tornado和Google Cloud Secret Manager构建加密存储敏感信息的Web服务' placement='top-start'> <a href='/tornado/7664.html' class='article-link'><span class='article-category'>[Tornado]</span>基于Tornado和Google Cloud Secret Manager构建加密存储敏感信息的Web服务</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>04-09</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[JQuery插件下载]jQuery弹性响应式网格布局图片画廊插件' placement='top-start'> <a href='/jquery_plugin/7569.html' class='article-link'><span class='article-category'>[JQuery插件下载]</span>jQuery弹性响应式网格布局图片画廊插件</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>02-03</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[Hibernate]属性级联同步与实体管理：Hibernate实战案例详解' placement='top-start'> <a href='/hibernate/7550.html' class='article-link'><span class='article-category'>[Hibernate]</span>属性级联同步与实体管理：Hibernate实战案例详解</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>01-27</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[JQuery插件下载]jQuery超酷响应式自适应模态窗口特效插件' placement='top-start'> <a href='/jquery_plugin/7441.html' class='article-link'><span class='article-category'>[JQuery插件下载]</span>jQuery超酷响应式自适应模态窗口特效插件</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>12-21</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[JQuery插件下载]超逼真的魔兽世界Tooltip提示框样式' placement='top-start'> <a href='/jquery_plugin/7158.html' class='article-link'><span class='article-category'>[JQuery插件下载]</span>超逼真的魔兽世界Tooltip提示框样式</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>09-16</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[JQuery插件下载]jQuery超实用文字和图片列表滚动插件' placement='top-start'> <a href='/jquery_plugin/6551.html' class='article-link'><span class='article-category'>[JQuery插件下载]</span>jQuery超实用文字和图片列表滚动插件</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>02-21</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[JQuery插件下载]jQuery.fontFlex-轻量级jQuery响应式字体插件' placement='top-start'> <a href='/jquery_plugin/6717.html' class='article-link'><span class='article-category'>[JQuery插件下载]</span>jQuery.fontFlex-轻量级jQuery响应式字体插件</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>01-31</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[Hadoop]YARN ResourceManager初始化失败问题：排查Hadoop集群资源、配置文件错误与服务启动异常的解决方案' placement='top-start'> <a href='/hadoop/4198.html' class='article-link'><span class='article-category'>[Hadoop]</span>YARN ResourceManager初始化失败问题：排查Hadoop集群资源、配置文件错误与服务启动异常的解决方案</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>01-17</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[Lua]Lua中模拟枚举类型：利用Table、Metatable与元方法实现数据约束及私有封装' placement='top-start'> <a href='/lua/2036.html' class='article-link'><span class='article-category'>[Lua]</span>Lua中模拟枚举类型：利用Table、Metatable与元方法实现数据约束及私有封装</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>12-25</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='[建站模板下载]蓝色简约家电器械维修企业网站模板' placement='top-start'> <a href='/resource_download/4677.html' class='article-link'><span class='article-category'>[建站模板下载]</span>蓝色简约家电器械维修企业网站模板</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>12-19</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[JQuery插件下载]jquery.scrollex-可制作炫酷页面滚动效果的jQuery事件插件' placement='top-start'> <a href='/jquery_plugin/6586.html' class='article-link'><span class='article-category'>[JQuery插件下载]</span>jquery.scrollex-可制作炫酷页面滚动效果的jQuery事件插件</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>11-09</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[JQuery]jquery数据数值型转化' placement='top-start'> <a href='/jquery/6089.html' class='article-link'><span class='article-category'>[JQuery]</span>jquery数据数值型转化</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>09-13</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[HTML]二级导航代码html' placement='top-start'> <a href='/html/5842.html' class='article-link'><span class='article-category'>[HTML]</span>二级导航代码html</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>08-10</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[JQuery插件下载]纯js超酷select下拉框美化插件' placement='top-start'> <a href='/jquery_plugin/6308.html' class='article-link'><span class='article-category'>[JQuery插件下载]</span>纯js超酷select下拉框美化插件</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>07-28</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[VUE]vue基础' placement='top-start'> <a href='/vue/5609.html' class='article-link'><span class='article-category'>[VUE]</span>vue基础</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>07-03</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[SpringCloud]SpringCloud中Hystrix熔断器的阈值设置与熔断时间控制：处理分布式系统服务故障实践' placement='top-start'> <a href='/springcloud/1848.html' class='article-link'><span class='article-category'>[SpringCloud]</span>SpringCloud中Hystrix熔断器的阈值设置与熔断时间控制：处理分布式系统服务故障实践</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>05-11</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[转载文章][转载]第六计 / Explosive City (2004)' placement='top-start'> <a href='/csdn_blog/5971.html' class='article-link'><span class='article-category'>[转载文章]</span>[转载]第六计 / Explosive City (2004)</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>05-10</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/5258.html' class='article-link'><span class='article-category'>[建站模板下载]</span>橙色化妆美妆用品化妆美妆刷类企业模板下载</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>03-31</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='/csdn_blog/5900.html' class='article-link'><span class='article-category'>[转载文章]</span>[转载]怎么用python画圆柱_python绘制圆柱体</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>01-31</span></el-col></el-row> <el-row class='article-row'> <el-col :span='20'> <el-tooltip class='item' effect='dark' content='[JQuery插件下载]jQuery扁平化风格下拉框美化插件' placement='top-start'> <a href='/jquery_plugin/6639.html' class='article-link'><span class='article-category'>[JQuery插件下载]</span>jQuery扁平化风格下拉框美化插件</a> </el-tooltip> </el-col> <el-col :span='4'><span class='article-time'>01-12</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>