【HTML】HTML 与 CSS 基础教程 - 教程

 作为 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通过选择器定位元素，用属性控制样式。

  1. 内联样式（直接写在标签内）：

    <p style="color: blue;
font-size: 16px;">蓝色文本</p>

  2. 内部样式（写在<head>中）：

    <style>
  p {
  color: red;
  /* 所有段落变红色 */
  text-align: center;
  /* 文字居中 */
  }
</style>

  3. 外部样式（最佳实践）：

    <!-- 在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
三、后端工程师需要特别关注的点

  1. 表单数据对接：

    • 表单<form>的action属性对应后端API地址
    • name属性决定后端接收参数的键名：
      <input type="text" name="email"> → 后端获取：request.getParameter("email")

  2. 调试技巧：

    • 浏览器右键 → 检查元素 查看 HTML/CSS
    • 修改CSS值实时预览效果（无需重启应用）

  3. 协作建议：

    • 与前端沟通时准确使用标签术语（如：“这个<div>的间距需要调整”）
    • 理解CSS选择器逻辑快速定位样式问题
posted @ 2025-07-22 21:48  wzzkaifa  阅读(11)  评论(0)    收藏  举报