【HTML】HTML 与 CSS 基础教程

作为 Java 工程师,掌握 HTML 和 CSS 也是需要的,它能让你高效与前端团队协作、调试页面元素,甚至独立完成简单页面开发。本文将用最简洁的方式带你掌握核心概念。

一、HTML,网页骨架搭建

核心概念 :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>

表单示例(后端工程师重点):

html 复制代码
<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. 内联样式(直接写在标签内):

    html 复制代码
    <p style="color: blue; font-size: 16px;">蓝色文本</p>
  2. 内部样式 (写在<head>中):

    html 复制代码
    <style>
      p {
        color: red;       /* 所有段落变红色 */
        text-align: center; /* 文字居中 */
      }
    </style>
  3. 外部样式(最佳实践):

    html 复制代码
    <!-- 在head中引入外部CSS文件 -->
    <link rel="stylesheet" href="styles.css">

常用选择器

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属性决定后端接收参数的键名:

      html 复制代码
      <input type="text" name="email"> → 后端获取:request.getParameter("email")
  2. 调试技巧

    • 浏览器右键 → 检查元素 查看 HTML/CSS
    • 修改CSS值实时预览效果(无需重启应用)
  3. 协作建议

    • 与前端沟通时准确使用标签术语(如:"这个<div>的间距需要调整")
    • 理解CSS选择器逻辑快速定位样式问题
相关推荐
22jimmy35 分钟前
JavaWeb(二)CSS
java·开发语言·前端·css·入门·基础
m0_738120724 小时前
CTFshow系列——命令执行web38-40
前端·windows·安全·web安全
是小狐狸呀5 小时前
elementUI-表单-下拉框数据选中后,视图不更新
前端·javascript·elementui
四岁半儿8 小时前
常用css
前端·css
你的人类朋友8 小时前
说说git的变基
前端·git·后端
姑苏洛言8 小时前
网页作品惊艳亮相!这个浪浪山小妖怪网站太治愈了!
前端
字节逆旅8 小时前
nvm 安装pnpm的异常解决
前端·npm
Jerry9 小时前
Compose 从 View 系统迁移
前端
GIS之路9 小时前
2025年 两院院士 增选有效候选人名单公布
前端
四岁半儿9 小时前
vue,H5车牌弹框定制键盘包括新能源车牌
前端·vue.js