【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选择器逻辑快速定位样式问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

RumIV

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值