當我們在進行網頁設計的時候，經常會用到HTML以及JQuery等前端技術來完成頁面的布局和交互功能。

然而，當我們的代碼越寫越多時，這些前端代碼的數量會變得越來越龐大，閱讀和維護也就變得越來越麻煩。因此，我們需要對這些代碼進行優化和整理，將其分散到不同的文件中來提高代碼的可讀性和可維護性。

那么，如何將HTML和JQuery的代碼分離呢？我們可以使用以下兩種方法：

1. 將HTML和JQuery代碼分離到不同的文件

//HTML代碼
<!-- header部分 -->
<div id="header">
<h1>歡迎來到我的網站</h1>
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關于我</a></li>
<li><a href="#">聯系我</a></li>
</ul>
</nav>
</div>
//JQuery代碼
$(function() {
$("#header").addClass("active");
});

我們可以將上面的代碼分別保存在兩個不同的文件中，例如：header.html和header.js。然后，在我們的HTML文件中通過如下代碼來引用它們：

<!-- 引用header.html -->
<link rel="import" href="header.html">
<!-- 引用header.js -->
<script src="header.js"></script>

這樣，當我們需要修改或查看某一個部分的代碼時，只需打開相應的文件即可，代碼也更具有可讀性。

2. 使用前端框架

除了將代碼分散到不同的文件中之外，我們還可以使用一些前端框架來協助我們進行頁面的構建，例如Angular、Vue、React等。這些框架可以將HTML和JS綁定起來，并提供一些便捷的函數和指令，使得我們能夠更快地編寫頁面和實現交互效果。

總之，在進行網頁設計和前端開發時，除了要注重頁面的美觀和交互效果外，還需要注重代碼的結構和可維護性。通過將HTML和JQuery代碼進行分離和優化，我們可以讓代碼更加易讀、易懂和易于維護。