只使用HTML和jsp知识

使用纯HTML和JSP (Java Server Pages) 知识，你可以创建简单的静态网页和动态内容呈现。HTML用于设计静态的用户界面，而JSP在服务器端处理动态逻辑。

**1. 静态内容**：
- 使用HTML创建页面的基本结构，包括标题、段落、列表、表单等元素，展示商品信息、图片和描述。比如，一个商品卡片可以这样编写：

<div class="product">
    <img src="product.jpg" alt="产品名称">
    <h2><a href="#">产品名称</a></h2>
    <p>价格：￥xx</p>
    <div class="actions">
        <a href="#" onclick="addToCart()">加入购物车</a>
        <a href="#" onclick="deleteFromCart()">移除</a>
    </div>
</div>

这里的`onclick`事件调用的是JavaScript函数，但只完成简单提示，并不会直接执行服务器端操作。

**2. 动态内容**：
- 使用JSP标签（如`<c:out>`）嵌入在HTML中，显示动态生成的内容，如当前时间、登录用户的用户名等。例如：

<h1>Welcome, <c:out value="${username}" default="Guest">!</c:out></h1>

这里`${username}`会查找session或cookie中的用户名值。

**3. 控制流程**：
- JSP文件中也可以包含Java代码片段（`<% %>`)，用来执行服务器端逻辑，如判断用户是否已登录、查询数据库等，然后设置页面属性或跳转至其他JSP。

<% if (isLoggedIn()) { %>
    <!-- 显示登录用户专享内容 -->
<% } else { %>
    <!-- 未登录用户引导 -->
<% } %>

**4. 表单处理**：
- 如果需要用户提交数据，使用HTML表单，提交到服务器的JSP页面接收数据，再做进一步处理。例如：

<form action="processOrder.jsp" method="post">
    <input type="hidden" name="productId" value="<%= productId %>">
    <input type="submit" value="立即购买">
</form>

这个例子中，`processOrder.jsp`是一个JSP，它会接收到`productId`作为参数。

然而，这种架构的缺点是不够灵活，对于复杂的业务逻辑，推荐使用MVC（Model-View-Controller）架构结合现代的Web技术栈，如Spring MVC，能更好地分离关注点和职责。