【Java Web学习 | 第1篇】前端 – HTML（2026最新版）
欢迎来到 Java Web 全栈学习系列 第1篇！
作为 Java 后端开发者（Spring Boot + Web API），前端基础是必备技能。HTML 是网页的“骨架”，负责定义页面结构和内容。它是纯标记语言，无需复杂逻辑，认识英文单词就能快速上手。
2026 年，HTML5 仍是企业开发的唯一标准，所有现代浏览器（Chrome、Edge、Firefox、Safari）已完全兼容。重点掌握语义化标签（Semantic HTML），这能提升 SEO、无障碍访问（Accessibility）、代码可读性和维护性，尤其在与 Vue/React 等前端框架结合时非常重要。
本篇采用“快学快用”风格：核心知识 + 代码示例 + 最佳实践 + 小练习。预计 1-2 小时上手基础，边看边敲代码。
1. HTML 核心概念
- HTML（HyperText Markup Language）：超文本标记语言，用于描述网页内容结构。
- HTML5：最新版本，新增语义标签、多媒体支持、表单增强、本地存储等。
- 基本结构（每个 HTML 文件必须有）：
<!DOCTYPE html> <!-- 文档类型声明，告诉浏览器这是 HTML5 -->
<html lang="zh-CN"> <!-- 根元素，lang 属性提升可访问性 -->
<head>
<meta charset="UTF-8"> <!-- 字符编码，防止乱码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 移动端适配 -->
<title>页面标题 - 显示在浏览器标签页</title>
</head>
<body>
<!-- 页面可见内容写在这里 -->
</body>
</html>
保存为 index.html，用浏览器直接打开即可查看效果。
2. 常用标签分类（2026 企业主流用法）
文本与排版标签（基础内容）
- 标题：
<h1>~<h6>（h1 只能有一个，用于页面主标题） - 段落：
<p> - 强调：
<strong>（粗体+语义重要）、<em>（斜体+强调） - 列表：
- 无序列表：
<ul><li> - 有序列表：
<ol><li> - 换行：
<br>（空元素，无结束标签） - 水平线：
<hr>
示例：
<h1>欢迎来到 Java Web 学习</h1>
<p>这是第一段落。<strong>重要内容</strong> 用 strong 标签。</p>
<ul>
<li>HTML 结构</li>
<li>CSS 样式</li>
<li>JavaScript 交互</li>
</ul>
语义化标签（HTML5 核心，强烈推荐！）
语义化标签让浏览器、搜索引擎、屏幕阅读器“理解”页面结构，提升 SEO 和无障碍访问。
常用语义标签（2026 最爱）：
<header>：页面或区块头部（logo、导航）<nav>：导航链接<main>：页面主要内容（一个页面只有一个）<article>：独立文章/内容块（如博客、新闻）<section>：文档中的区块/章节<aside>：侧边栏（相关但不核心的内容）<footer>：页面或区块底部（版权、联系方式）<figure>+<figcaption>：图片/图表 + 说明- 其他：
<time>（日期时间）、<mark>（高亮）、<details>+<summary>（折叠面板，无需 JS）
示例（语义化页面骨架）：
<header>
<h1>我的 Java Web 博客</h1>
<nav>
<a href="#">首页</a> | <a href="#">后端教程</a>
</nav>
</header>
<main>
<article>
<h2>第1篇：HTML 入门</h2>
<p>内容...</p>
</article>
</main>
<aside>
<h3>相关推荐</h3>
</aside>
<footer>
<p>© 2026 Java Web 学习系列</p>
</footer>
为什么用语义标签？
- 屏幕阅读器能更好导航（Accessibility）。
- SEO 友好，搜索引擎理解内容层次。
- CSS 选择器更清晰，后续样式维护容易。
- 与 Vue 组件开发无缝衔接（复用结构）。
图像与多媒体
- 图片：
<img src="路径" alt="替代文本（必须写，提升 a11y）" width="300" height="200"> - 音频：
<audio controls><source src="music.mp3" type="audio/mpeg"></audio> - 视频：
<video controls><source src="video.mp4" type="video/mp4"></video>
链接与锚点
<a href="https://example.com" target="_blank" rel="noopener">外部链接</a>
<a href="#section1">页面内跳转</a>
表单标签（Java Web 后端交互核心）
表单是前端与后端 API 通信的基础，后续会与 Spring Boot 结合提交数据。
基础表单：
<form action="/api/users" method="POST">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required placeholder="请输入用户名">
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>
<label for="gender">性别：</label>
<select id="gender" name="gender">
<option value="male">男</option>
<option value="female">女</option>
</select>
<button type="submit">提交</button>
</form>
常用 input 类型（HTML5 新增）：
type="text"、password、email、number、date、tel、urlrequired、placeholder、min、max、pattern（正则验证）
表单最佳实践：
- 每个输入框配
<label for="id">（提升可访问性）。 - 使用
autocomplete、aria-*属性辅助屏幕阅读器。 - 生产中结合 JavaScript 做客户端验证，后端再做服务器验证。
3. 关键属性与技巧
- 全局属性：
id（唯一标识）、class（样式/JS 钩子）、style（内联样式，少用）、title（鼠标悬停提示）、data-*（自定义数据，后续 JS/Vue 常用）。 - 路径写法：相对路径（
images/pic.jpg）、绝对路径（/static/css/style.css）。 - 注释：
<!-- 这是注释 --> - 实体字符：
<（<）、>（>）、 （空格）、©（©）。
4. 开发工具与调试
- 编辑器：VS Code（推荐安装 Live Server 插件，实时预览）。
- 浏览器开发者工具（F12）：Elements 面板查看 HTML 结构。
- 验证工具：W3C Markup Validation Service（检查代码规范）。
5. 小练习（边学边练）
- 创建一个个人简历页面，使用语义化标签组织：header、main（含 section）、footer。
- 做一个简单的登录表单（用户名、密码、记住我复选框、提交按钮）。
- 在页面中嵌入一张图片，并添加 alt 描述。
把代码保存为 .html 文件，用浏览器打开测试效果。
6. 学习建议与下一步
- 核心目标：能独立写出结构清晰、语义化的静态页面。
- 时间建议：1 天掌握基础标签 + 语义化，1 天练习表单与多媒体。
- 推荐资源（2026 友好）：
- MDN Web Docs（最权威）：https://developer.mozilla.org/zh-CN/docs/Learn/HTML
- 菜鸟教程 HTML：https://www.runoob.com/html/html-tutorial.html
- 实战小项目：黑马/渡一等 B 站 2026 新版 HTML+CSS 教程。
下一篇文章预告：《【Java Web学习 | 第2篇】前端 – CSS 基础与布局》
我们将学习盒子模型、Flex 布局、响应式设计等，为 Java Web 项目美化页面打基础。
有问题随时问：
- 想看完整语义化首页示例代码？
- 需要表单 + JavaScript 简单验证结合？
- 或直接跳到 HTML + Spring Boot 后端交互？
回复“我要完整示例”或“下一篇 CSS”，我立刻给你！
坚持练习，HTML 是 Java Web 全栈的第一块基石，加油！🚀
