作为 Java 工程师，掌握 HTML 和 CSS 也是需要的，它能让你高效与前端团队协作、调试页面元素，甚至独立完成简单页面开发。本文将用最简洁的方式带你掌握核心概念。
一、HTML，网页骨架搭建
核心概念：HTML通过标签定义内容结构，浏览器解析标签渲染页面。
基础结构（所有HTML文件的起点）：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>页面标题</title> <!-- 显示在浏览器标签页 -->
</head>
<body><!-- 所有可见内容写在这里 -->
</body>
</html>
常用内容标签速查表：
| 标签 | 作用 | 示例 |
|---|---|---|
<h1>~<h6> | 标题（重要性递减） | <h1>主标题</h1> |
<p> | 段落（自动换行） | <p>这是一个段落</p> |
<a> | 超链接 | <a href="https://example.com">点击</a> |
<img> | 图片 | <img src="logo.png" width="100"> |
<ul>/<ol> | 无序/有序列表 | <ul><li>项目1</li></ul> |
<div> | 内容区块（布局核心） | <div>内容容器</div> |
表单示例（后端工程师重点）：
<form action="/submit" method="POST"><input type="text" name="username" placeholder="用户名"> <!-- 文本输入 --><input type="password" name="pwd"> <!-- 密码框 --><input type="checkbox" name="agree"> 同意协议 <!-- 复选框 --><input type="radio" name="gender" value="male"> 男 <!-- 单选框 --><button type="submit">提交</button> <!-- 提交按钮 -->
</form>
二、CSS，网页样式
核心概念：CSS通过选择器定位元素，用属性控制样式。
-
内联样式（直接写在标签内）：
<p style="color: blue; font-size: 16px;">蓝色文本</p> -
内部样式（写在
<head>中）：<style>p {color: red; /* 所有段落变红色 */text-align: center; /* 文字居中 */} </style> -
外部样式（最佳实践）：
<!-- 在head中引入外部CSS文件 --> <link rel="stylesheet" href="styles.css">
常用选择器：
/* 1. 标签选择器（选择所有<p>） */
p { font-family: Arial; }/* 2. 类选择器（选择class="highlight"的元素） */
.highlight { background-color: yellow; }/* 3. ID选择器（选择id="header"的元素） */
#header { border: 1px solid black; }
高频CSS属性：
| 属性 | 作用 | 示例值 |
|---|---|---|
color | 文字颜色 | red, #FF0000 |
background-color | 背景颜色 | #FFFFFF |
font-size | 字体大小 | 16px, 1.2rem |
margin | 外边距 | 10px 5px |
padding | 内边距 | 20px |
border | 边框 | 1px solid black |
display | 显示模式 | block, flex |
三、后端工程师需要特别关注的点
-
表单数据对接：
- 表单
<form>的action属性对应后端API地址 name属性决定后端接收参数的键名：<input type="text" name="email"> → 后端获取：request.getParameter("email")
- 表单
-
调试技巧：
- 浏览器右键 → 检查元素 查看 HTML/CSS
- 修改CSS值实时预览效果（无需重启应用）
-
协作建议：
- 与前端沟通时准确使用标签术语（如：“这个
<div>的间距需要调整”） - 理解CSS选择器逻辑快速定位样式问题
- 与前端沟通时准确使用标签术语（如：“这个
