java html教程-建站教程-锦华智联科技

Java 和 HTML 是两种完全不同、但常常协同工作的技术。

（图片来源网络，侵删）

HTML (HyperText Markup Language)：是网页的骨架，它是一种标记语言，用来定义网页的结构和内容，比如标题、段落、图片、链接等，它本身是静态的,只负责展示。
Java：是一种编程语言，它功能强大，可以用来做很多事情，其中在 Web 领域，最常见的是作为后端开发语言，负责处理业务逻辑、数据交互、用户认证等。

一个完整的 Web 应用，通常是“前后端分离”的架构：

前端：用户在浏览器中直接看到和交互的部分，主要由 HTML (结构)、CSS (样式) 和 JavaScript (行为) 构成。
后端：在服务器上运行的部分，通常由 Java (或其他语言如 Python, Go) 编写，负责处理前端发来的请求，与数据库交互,并返回数据。

下面,我将分几个部分为你详细讲解：

第一部分：HTML 基础教程（网页的骨架）

如果你是零基础，请务必从这里开始，没有 HTML，Java 的 Web 应用将无处展示。

什么是 HTML？

HTML 通过一系列的“标签”（Tags）来描述网页内容。<h1> 表示一级标题，<p> 表示段落。

（图片来源网络，侵删）

你的第一个 HTML 页面

创建一个文件，命名为 index.html，然后用记事本或 VS Code 等编辑器打开,输入以下内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到 HTML 世界！</h1>
    <p>这是一个段落，HTML 就是用各种标签把内容包裹起来。</p>
    <a href="https://www.google.com">这是一个链接到 Google</a>
    <img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="HTML5 Logo">
</body>
</html>

代码解释：

<!DOCTYPE html>：声明这是一个 HTML5 文档。
<html>：根元素,所有其他元素都包含在其中。
<head>：包含页面的元数据，比如标题、字符编码、引入的 CSS 等,不会直接显示在页面上。
<title>：显示在浏览器标签页上的标题。
<body>：包含所有可见的页面内容，比如标题、段落、图片等。

常用 HTML 标签

名称	描述	示例
`<h1>` - `<h6>`	`<h1>` 是最重要的标题，`<h6>` 是最不重要的。	`<h2>二级标题</h2>`
`<p>`	段落	定义一个文本段落。	`<p>这是一段文字。</p>`
`<a>`	链接	创建一个到另一个页面、文件或同一页面内位置的链接。	`<a href="page2.html">去第二页</a>`
`<img>`	图像	在页面上嵌入一张图片。	`<img src="image.jpg" alt="图片描述">`
`<ul>` / `<li>`	无序列表	创建一个项目符号列表。	`<ul><li>苹果</li><li>香蕉</li></ul>`
`<ol>` / `<li>`	有序列表	创建一个数字排序的列表。	`<ol><li>第一步</li><li>第二步</li></ol>`
`<div>`	容器	一个块级容器，用于组合其他 HTML 元素，方便用 CSS 样式化。	`<div>这里是一些内容</div>`
`<span>`	内联容器	一个内联容器，用于对文本的一部分进行样式化或操作。	`<p>你好，<span style="color:red;">红色</span>的世界。</p>`

如何学习 HTML？

最好的方式就是多写多练。

在线教程：
- MDN Web Docs (Mozilla)：https://developer.mozilla.org/zh-CN/docs/Web/HTML - 这是目前最权威、最全面的 Web 技术文档,强烈推荐。
- 菜鸟教程：https://www.runoob.com/html/html-tutorial.html - 非常适合初学者,有大量实例。
实践工具：
- VS Code：一个强大的代码编辑器，安装 "Live Server" 插件后，可以实时预览你的 HTML 效果。
- 浏览器开发者工具：在 Chrome 或 Firefox 中按 F12，可以查看任何网页的 HTML 结构,并实时修改和调试。

第二部分：Java Web 开发（网页的大脑）

学完 HTML 后，我们来看看 Java 如何与它互动，Java Web 开发通常指使用 Java 语言来处理后端逻辑。

Java Web 的核心概念：Servlet

Servlet (Server Applet) 是 Java Web 应用的基石，你可以把它理解为运行在服务器上的 Java 小程序。

工作流程：
1. 用户在浏览器中输入一个 URL（http://myapp.com/login）。
2. 浏览器向服务器发送一个 HTTP 请求。
3. 服务器的 Web 服务器（如 Tomcat）接收到请求，发现这个 URL 对应一个 Java Servlet。
4. Web 服务器调用这个 Servlet 的 service() 方法。
5. 在 Servlet 的代码中，你可以：
  - 接收浏览器传来的数据（比如用户名、密码）。
  - 处理业务逻辑（比如验证用户名密码是否正确）。
  - 查询或修改数据库。
  - 生成 HTML 内容,并返回给浏览器。

环境搭建：Java + Web 服务器

要运行 Java Web 程序,你需要安装：

JDK (Java Development Kit)：Java 开发工具包。
Web 服务器：最常用的是 Apache Tomcat，它是一个轻量级的 Web 服务器，专门用来运行 Java Web 应用（.war 文件）。

你的第一个 Servlet 程序（传统方式）

这个例子会展示 Servlet 如何动态生成 HTML 并返回给浏览器。

步骤 1：创建 Maven Web 项目 使用 IDE（如 IntelliJ IDEA 或 Eclipse）创建一个 Maven 项目，并选择 maven-archetype-webapp 模板。

步骤 2：编写 Servlet 代码 在 src/main/java 目录下，创建一个包，com.example，然后创建一个 HelloServlet.java 文件：

package com.example;
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;
import java.io.PrintWriter;
// 1. 继承 HttpServlet
public class HelloServlet extends HttpServlet {
    // 2. 重写 doGet 方法，用于处理 GET 请求
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 3. 设置响应内容类型为 HTML
        response.setContentType("text/html;charset=UTF-8");
        // 4. 获取一个输出流，用于向浏览器写入内容
        PrintWriter out = response.getWriter();
        // 5. 动态生成 HTML 内容
        out.println("<!DOCTYPE html>");
        out.println("<html>");
        out.println("<head>");
        out.println("<title>Servlet 生成的页面</title>");
        out.println("</head>");
        out.println("<body>");
        out.println("<h1>你好，世界！</h1>");
        out.println("<p>这个页面是由 Java Servlet 动态生成的。</p>");
        out.println("</body>");
        out.println("</html>");
    }
}

步骤 3：配置 Servlet 在 src/main/webapp/WEB-INF/web.xml 文件中，配置你的 Servlet 和 URL 映射：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <servlet>
        <servlet-name>HelloServlet</servlet-name>
        <servlet-class>com.example.HelloServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>HelloServlet</servlet-name>
        <url-pattern>/hello</url-pattern>
    </servlet-mapping>
</web-app>

步骤 4：部署和运行

将项目打包成 .war 文件。
将 .war 文件复制到 Tomcat 的 webapps 目录下。
启动 Tomcat 服务器。
在浏览器中访问：http://localhost:8080/你的项目名/hello

你将看到一个由 Java 代码生成的 HTML 页面。

第三部分：现代 Java Web 开发（更高效的方式）

直接写 Servlet 和 web.xml 是比较传统的方式，现在更流行的是使用框架来简化开发。

主流框架

Spring Framework / Spring Boot：Java Web 开发领域的绝对主流，Spring Boot 极大地简化了配置,让开发者能更专注于业务逻辑。
Jakarta EE (原 Java EE)：官方标准，包含了 Servlet, JSP, EJB 等规范，Tomcat Servlet 容器的一种实现。

Spring Boot 示例（极简）

使用 Spring Boot，你可以用几行代码就实现一个 Web 服务，并且它默认返回 JSON 数据，而不是 HTML。

步骤 1：创建 Spring Boot 项目 访问 start.spring.io,选择：

Project: Maven
Language: Java
Spring Boot: 选择一个稳定版本 (如 3.x.x)
Project Metadata: 填写 Group, Artifact 等。
Dependencies: 添加 Spring Web。

点击 "GENERATE" 下载项目，并用你的 IDE 打开。

步骤 2：编写一个控制器 在 src/main/java 下，创建一个包，com.example.demo，然后创建一个 HelloController.java 文件：

package com.example.demo;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
// @RestController 告诉 Spring 这是一个 RESTful 控制器
@RestController
public class HelloController {
    // @GetMapping 告诉 Spring 当收到 "/hello" 的 GET 请求时，执行这个方法
    @GetMapping("/hello")
    public String sayHello() {
        // 这个方法的返回值会直接作为 HTTP 响应体返回给浏览器
        return "你好，来自 Spring Boot 的问候！";
    }
}

步骤 3：运行和测试

运行 DemoApplication.java 中的 main 方法。
Spring Boot 会自动启动一个内置的 Tomcat 服务器。
在浏览器或 Postman 中访问：http://localhost:8080/hello

你会看到浏览器直接显示了文本："你好，来自 Spring Boot 的问候！"

Java 如何返回 HTML 给前端？

在现代前后端分离的架构中，Java 后端通常不直接生成 HTML，它只提供数据（通常是 JSON 格式），而 HTML 的渲染工作由前端框架（如 React, Vue, Angular）来完成。

如果你仍然想让 Java 返回一个完整的 HTML 页面（一些传统的项目或内部管理系统），Spring Boot 也可以做到：

// 在 HelloController 中添加一个新方法
@GetMapping("/page")
public String getHtmlPage() {
    // 直接返回一个 HTML 字符串
    return "<html><head><title>Spring HTML</title></head><body><h1>这是一个由 Spring Boot 返回的 HTML 页面</h1></body></html>";
}

访问 http://localhost:8080/page 即可看到。

更高级的做法是使用模板引擎，如 Thymeleaf，它允许你在 HTML 文件中嵌入动态数据，Spring Boot 会处理这些数据并生成最终的 HTML。

学习路线图建议

如果你是初学者,我建议你按照以下路径学习：

掌握前端三剑客
- HTML：学习所有基本标签,理解网页结构。
- CSS：学习如何美化 HTML 页面（布局、颜色、字体等）。
- JavaScript：学习如何为网页添加交互功能（响应用户点击、动态修改内容等）。
- 目标：能够独立制作一个静态的、有良好交互效果的个人网站。
学习 Java 基础
- 不再是 Web 开发，而是纯粹的 Java 编程。
- 学习语法、面向对象、集合、异常、IO流、多线程等核心概念。
- 目标：能够用 Java 编写一个桌面应用程序（如一个记事本、一个简单的计算器）。
进入 Java Web 后端开发
- 学习 Servlet 和 HTTP 协议：理解 Web 开发的基本原理。
- 学习数据库：掌握 SQL 语句，学习使用 MySQL 或 PostgreSQL。
- 学习一个主流框架：强烈推荐 Spring Boot，学习如何用它来构建 RESTful API,实现增删改查操作。
- 目标：能够独立开发一个后端服务，例如一个“用户管理系统”的 API。
前后端结合
- 学习使用前端框架（如 Vue.js 或 React）调用你用 Spring Boot 写的 API。
- 学习使用 Git 进行版本控制。
- 学习将项目部署到服务器（如阿里云、腾讯云）。
- 目标：能够独立完成一个全栈项目，例如一个博客系统、一个电商网站。

技术	角色	作用	学习重点
HTML	网页结构	定义网页的骨架和内容	各种标签、语义化、表单
CSS	网页样式	美化网页，控制布局	选择器、盒模型、Flex/Grid 布局
JavaScript	网页行为	实现网页的交互和动态效果	DOM/BOM 操作、事件、异步编程
Java	后端逻辑	处理数据、业务逻辑、API 接口	Java 基础、Spring Boot、数据库、API 设计

希望这份详细的教程能帮助你理清思路，开启你的 Java Web 开发之旅！祝你学习顺利！