HTML和jQuery是web前端開發中非常重要的兩個技術。HTML作為網頁的基礎語言，負責文本、圖片、視頻等內容的展示和組織。而jQuery則是一款流行的JavaScript庫，提供了簡單易于使用的API，用于DOM的操作、事件處理和動畫效果的實現等。

<!-- HTML代碼 -->
<div id="box">
<p>這是一個段落</p>
<img src="example.jpg" width="300" height="200">
</div>
<!-- jQuery代碼 -->
$(document).ready(function(){
$('#box').click(function(){
$('p').css('color', 'red');
});
});

在HTML代碼中，我們使用了<div>、<p>和<img>等標簽來組織內容。其中，<div>標簽用于分隔不同的部分，<p>標簽用于表示文章的段落，<img>標簽則用于插入圖片。

在jQuery代碼中，我們使用了document.ready()函數，確保頁面DOM元素加載完成后再執行jQuery代碼。接著，我們用click()函數為ID為box的<div>元素綁定了一個點擊事件。當用戶點擊<div>元素時，我們使用css()函數為<p>標簽添加了樣式。這里，我們使用了字體顏色為紅色的樣式。如果您使用瀏覽器查看HTML代碼及運行以下jQuery代碼，則點擊<div>元素后，段落文字將變為紅色。