【HTML】HTML 与 CSS 基础教程

news2025/6/10 3:41:36

作为 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选择器逻辑快速定位样式问题