从0开始学习Java+AI知识点总结-29.前端web开发

ly870316

1127人浏览 · 2025-09-02 15:18:09

ly870316 · 2025-09-02 15:18:09 发布

一、初识 Web 前端

1.1 网页的组成

我们看到的网页，本质是由多种元素组合而成，常见组成部分包括：

文本内容：标题、正文、数据等；
媒体资源：图片（JPG/PNG/GIF）、音频（MP3）、视频（MP4）；
交互元素：超链接、按钮、表单、下拉框；
结构化元素：表格、列表、分区布局等。

1.2 网页的本质

用户眼中的 “网页”，背后是前端开发者编写的代码—— 在前后端分离的开发模式下，前端代码负责定义页面的 “骨架”（结构）和 “外观”（样式），后续通过浏览器解析渲染后，才呈现为可视化的页面。

1.3 代码如何转换成网页？

前端代码无法直接被用户 “看见”，需要通过浏览器的解析与渲染完成转换：

浏览器中负责解析渲染的核心模块称为 “浏览器内核”；
不同浏览器内核存在差异（如 Chrome 的 Blink、Firefox 的 Gecko、Safari 的 WebKit），可能导致相同代码在不同浏览器中显示效果不一致；
为解决兼容性问题，需要遵循 “Web 标准”—— 由 W3C（万维网联盟）制定的统一规范，确保代码在各浏览器中表现一致。

1.4 Web 标准的核心构成

Web 标准是前端开发的 “规则手册”，主要包含三部分，三者分工明确、协同工作：

技术	核心职责	作用示例
HTML	定义网页的结构	确定标题、图片、表格的位置
CSS	控制网页的表现	设置字体颜色、元素大小、布局
JavaScript	实现网页的行为	点击按钮跳转、表单验证

后续学习中，还会接触前端进阶技术（如 Vue3、ElementPlus、Ajax），但 HTML+CSS 是所有前端技术的基础。

二、HTML 核心知识点：构建页面骨架

2.1 什么是 HTML？

HTML（HyperText Markup Language，超文本标记语言）是定义网页结构的核心语言：

超文本：超越普通文本的限制，可包含图片、音视频、超链接等非文本内容；
标记语言：由<标签名>构成，所有标签均为预定义（不能自定义），例如：
- <h1>：一级标题（最大字号）；
- <img>：插入图片；
- <video>：插入视频；
- <a>：超链接；
运行方式：HTML 代码直接在浏览器中运行，无需编译，标签由浏览器自动解析。

2.2 HTML 快速入门：从 0 到 1 写第一个页面

操作步骤

新建文件：创建文本文件，将后缀名改为.html（如01-html-demo.html）；
编写骨架：HTML 有固定的基础结构，包含 4 个核心标签；
添加内容：在body标签中写入用户可见的内容（如标题、图片）；
预览效果：右键文件，选择 “用浏览器打开”。

基础骨架代码与解析

<!DOCTYPE html>

<head>

<title>我的第一个HTML页面</title>

</head>

<body>

<h1>Hello HTML！</h1>

</body>

</html>

骨架标签职责

标签	层级	核心作用
<html>	根标签	包裹所有 HTML 内容
<head>	子标签	配置页面元信息（编码、标题、CSS 等）
<title>	孙标签	定义浏览器标签栏标题
<body>	子标签	存放用户可见的内容（文本、图片等）

2.3 HTML 标签的 3 个核心特点

不区分大小写：<H1>和<h1>效果一致，但建议统一用小写（代码规范）；
属性值灵活：标签属性的值可用单引号或双引号（如<a href="xxx">或<a href='xxx'>），推荐用双引号；
语法松散但建议规范：浏览器对 HTML 语法容错性高（如标签不闭合也可能显示），但必须保证标签嵌套正确、属性完整（便于后续维护）。

2.4 常见 HTML 标签：按场景分类

1. 文本与标题标签

标签	作用	注意事项
<h1>-<h6>	标题（h1 最大，h6 最小）	一个页面建议只写 1 个 h1（SEO 友好）
<p>	段落文本	自动换行，段落间有默认间距
<br>	强制换行	单标签（无需闭合）
<strong>	文本加粗（有强调语义）	比<b>更符合 Web 标准
<em>	文本倾斜（有强调语义）	比<i>更符合 Web 标准
<del>	删除线	比<s>更符合 Web 标准
<ins>	下划线	比<u>更符合 Web 标准

示例：

<h2>前端技术栈</h2>

<p>前端开发需要掌握<strong>HTML（结构）</strong>、<em>CSS（样式）</em>和JavaScript（交互）。</p>

<p>旧版本技术：<del>jQuery</del>，现在更流行：<ins>Vue/React</ins></p>

2. 媒体标签

标签	作用	核心属性
<img>	插入图片	src（图片路径）、width/height（尺寸）、alt（加载失败提示）
<video>	插入视频	src（视频路径）、controls（显示播放控件）、width（宽度）

示例：

3. 超链接标签（<a>）

核心作用：实现页面跳转或链接到外部资源，核心属性如下：

href：指定跳转的 URL（绝对路径如https://www.cctv.com，相对路径如./page2.html）；
target：指定打开方式（_self默认当前页打开，_blank新窗口打开）。

示例：

4. 表单标签（数据采集）

表单用于采集用户输入（如登录、搜索、注册），核心标签与属性如下：

标签 / 属性	作用	说明
<form>	表单容器	包含所有表单项
action	表单提交地址	数据提交到的后端 URL
method	提交方式	GET（URL 拼接数据，有大小限制）、POST（请求体携带数据，无限制）
<input>	基础表单项	type 属性控制类型（text 文本、password 密码、button 按钮等）
<select>	下拉选择框	内部用<option>定义选项
<textarea>	多行文本输入框	cols/rows 控制默认尺寸
<button>	按钮	type=submit 提交、type=reset 重置、type=button 普通按钮

示例（搜索表单）：

<option value="">请选择性别</option>

</select>

</form>

5. 表格标签（数据展示）

用于结构化展示数据（如员工列表、成绩表），核心标签如下：

标签	作用	说明
<table>	表格容器	包裹所有表格内容
<thead>	表格头部	存放表头（可选，语义化）
<tbody>	表格主体	存放数据行（可选，语义化）
<tr>	表格行	一行包含多个单元格
<th>	表头单元格	默认居中加粗
<td>	普通单元格	存放具体数据

示例（员工表格）：

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

6. 布局标签（<div>与<span>）

无语义标签，仅用于页面布局，两者特点对比：

标签	布局特点	宽高设置	应用场景
<div>	独占一行（块级元素）	可设置 width/height	大区域布局（导航栏、表格区、 footer）
<span>	一行多元素（行内元素）	不可设置宽高（由内容撑开）	行内内容包裹（如时间、关键词）

示例：

</div>

2.5 字符实体：解决特殊符号显示问题

浏览器会将<、>等符号解析为 HTML 标签，需用字符实体表示特殊符号：

特殊符号	字符实体	说明
空格		普通空格不生效时使用
<	<	显示小于号
>	>	显示大于号

示例：

<p>HTML中<h1>是一级标题</p>

2.6 路径表示：正确引入外部资源

引入图片、视频、CSS 文件时，需指定正确路径，分为两类：

1. 绝对路径

磁盘绝对路径：从磁盘根目录开始（如C:/Users/xxx/img/1.jpg），仅本地生效，不推荐线上使用；
网络绝对路径：完整 URL（如https://xxx.com/img/avatar.jpg），适用于引用外部资源。

2. 相对路径（推荐，依赖文件间相对位置）

./：表示 “当前目录”（可省略），如./img/1.jpg等价于img/1.jpg；
../：表示 “上一级目录”，如../css/style.css（从当前目录向上一级，再进入 css 文件夹）。

示例（文件结构如下）：

project/

├─ html/

│ ├─ index.html （当前文件）

├─ img/

│ ├─ 1.jpg

├─ css/

│ ├─ style.css

三、CSS 核心知识点：控制页面样式

3.1 什么是 CSS？

CSS（Cascading Style Sheet，层叠样式表）是用于控制 HTML 元素 “外观” 和 “布局” 的语言 —— 通过 CSS，可实现字体颜色、元素大小、间距、对齐等效果。

示例：通过 CSS 将标题改为红色

3.2 CSS 的 3 种引入方式

不同引入方式适用于不同场景，企业开发中优先推荐 “外部样式”：

引入方式	语法	优点	缺点	适用场景
行内样式	标签内加style属性	快速生效，针对性样式	代码冗余，无法复用	配合 JavaScript 动态修改样式
内部样式	<style>标签（建议放<head>）	样式与 HTML 在同一文件，便于调试	样式无法跨页面复用	单页面小型项目
外部样式	<link href="xxx.css">引入	样式与 HTML 分离，可复用、易维护	需要额外加载 CSS 文件	多页面大型项目（企业常用）

示例：

<p style="font-size: 16px; color: #333;">行内样式文本</p>

<head>

<style>

.text {

font-size: 16px;

color: #333;

}

</style>

</head>

<body>

<p class="text">内部样式文本</p>

</body>

<head>

</head>

3.3 颜色表示方式：4 种常用格式

CSS 中颜色可通过以下 4 种方式定义，根据场景选择：

表示方式	语法格式	说明	示例
关键字	颜色英文单词	简单直观，颜色有限	red（红色）、gray（灰色）
RGB	rgb(r, g, b)	红绿蓝三原色，取值 0-255	rgb(255, 0, 0)（红色）
RGBA	rgba(r, g, b, a)	RGB 基础上加透明度（a=0-1）	rgba(255, 0, 0, 0.5)（半透红）
十六进制	#rrggbb或简写#rgb	#开头，每两位表示一种原色	#ff0000（红色）、#f00（简写）

示例：

/* 4种方式实现同一灰色 */

.text1 { color: gray; }

.text2 { color: rgb(153, 153, 153); }

.text3 { color: rgba(153, 153, 153, 1); }

.text4 { color: #999; } /* #999999简写 */

3.4 CSS 选择器：精准选中元素

选择器的作用是 “找到需要设置样式的 HTML 元素”，常用选择器如下：

选择器类型	语法格式	示例	说明
元素选择器	标签名 {}	p { color: #333; }	选中所有<p>标签
类选择器	.class 值 {}	.text { font-size: 16px; }	选中所有class="text"的元素
ID 选择器	#id 值 {}	#title { font-weight: bold; }	选中id="title"的元素（唯一）
分组选择器	选择器 1, 选择器 2 {}	h1, h2 { margin: 0; }	同时选中<h1>和<h2>
后代选择器	父元素子元素 {}	div p { line-height: 2; }	选中<div>内所有<p>
属性选择器	标签 [属性 ="值"] {}	input[type="text"] { width: 200px; }	选中type="text"的<input>

示例：

<style>

/* 1. 元素选择器：所有h2标题加粗 */

h2 { font-weight: bold; }

/* 2. 类选择器：所有class="time"的元素灰色 */

.time { color: #999; }

/* 3. ID选择器：id="header"的元素背景色 */

#header { background-color: #f5f5f5; }

/* 4. 后代选择器：.content内的p标签首行缩进 */

.content p { text-indent: 2em; }

</style>

<body>

</div>

</div>

</body>

3.5 常用 CSS 样式：从文本到布局

1. 文本样式

样式属性	作用	示例
color	文本颜色	color: #333;
font-size	字体大小	font-size: 16px;
font-weight	字体粗细（bold 加粗）	font-weight: bold;
text-decoration	文本装饰（none 去下划线）	text-decoration: none;（超链接去下划线）
text-indent	首行缩进（2em=2 个字符）	text-indent: 2em;（段落首行缩进）
line-height	行高（2=2 倍行高）	line-height: 2;（文本垂直居中或换行间距）

2. 盒子样式（控制元素大小与背景）

样式属性	作用	示例
width/height	元素宽 / 高	width: 80%; height: 100px;
background-color	背景色	background-color: #f5f5f5;
border	边框（宽度 + 类型 + 颜色）	border: 1px solid #ddd;
border-radius	圆角（圆形用 50%）	border-radius: 50%;（圆形头像）

3. 布局样式（margin/padding）

margin：元素外部间距（与其他元素的距离）；
padding：元素内部间距（内容与边框的距离）；

两者均支持 “多值简写”，顺序为 “上→右→下→左”：

简写方式	等价写法	说明
margin: 10px;	margin: 10px 10px 10px 10px;	四个方向均 10px
margin: 10px 20px;	margin: 10px 20px 10px 20px;	上下 10px，左右 20px
margin: 0 auto;	-	水平居中（常用版心居中）

示例（版心居中）：

/* 页面内容占宽度70%，水平居中 */

.container {

width: 70%;

margin: 0 auto; /* 左右自动居中 */

padding: 20px; /* 内部间距20px */

}

3.6 盒子模型：理解元素的 “空间结构”

所有 HTML 元素都可视为一个 “盒子”，由 4 部分组成（从内到外）：

Content（内容区）：元素的实际内容（文本、图片等），宽高由width/height控制；
Padding（内边距）：内容区与边框的间距，不影响外部布局；
Border（边框）：元素的边框，会增加元素的总宽度 / 高度；
Margin（外边距）：元素与其他元素的间距，不影响元素自身大小。

关键公式：元素总宽度 = width + 2padding + 2border（左右方向）；

技巧：若想让width/height直接表示 “盒子总大小”，可添加box-sizing: border-box;（边框和内边距包含在宽高中）。

示例：

.box {

width: 200px;

height: 100px;

box-sizing: border-box; /* 宽高包含padding和border */

padding: 20px;

border: 10px solid #ddd;

margin: 30px;

background-color: #05a5d2;

}

3.7 Flex 弹性布局：快速实现复杂布局

Flex（弹性布局）是现代前端最常用的布局方式，通过给父容器设置display: flex，可灵活控制子元素的排列：

1. 核心概念

Flex 容器：设置display: flex的父元素；
Flex 项目：容器内的子元素；
主轴：项目排列的主要方向（默认水平向右，可通过flex-direction修改）；
交叉轴：与主轴垂直的方向（默认垂直向下）。

2. 常用 Flex 属性（容器）

属性	取值	作用
display	flex	将元素设为 Flex 容器
flex-direction	row（默认）/column	主轴方向：水平 / 垂直
justify-content	flex-start/center/space-between/space-around	项目在主轴上的对齐方式：左对齐 / 居中 / 两端贴边平分间距 / 均匀分布（含两端留白）
align-items	center/flex-start/flex-end	项目在交叉轴上的对齐方式（如垂直居中）

示例（导航栏布局：左侧标题，右侧链接）：

<style>

.header {

display: flex; /* 父容器设为Flex */

justify-content: space-between; /* 主轴（水平）两端对齐 */

align-items: center; /* 交叉轴（垂直）居中 */

padding: 10px 20px;

background-color: #f5f5f5;

}

</style>

</div>

四、前端开发工具：VS Code 使用指南

4.1 工具优势

Visual Studio Code（VS Code）是前端开发的首选工具，优势如下：

轻量高效：启动快，占用资源少；
多语言支持：不仅支持 HTML/CSS/JS，还支持 Java、Python 等；
强大插件：通过插件可扩展功能（如代码提示、格式化、实时预览）；
跨平台：Windows、Mac、Linux 均可使用。

4.2 安装与配置

下载地址：VS Code 官网；
安装注意：
- 路径避免中文和空格（如C:/VSCode，而非C:/我的工具/VS Code）；
- 勾选 “添加到 PATH”（便于终端调用）；

必备插件：
- HTML CSS Support：HTML 标签 CSS 属性提示；
- Live Server：实时预览 HTML 页面（保存即刷新）；
- Prettier：代码自动格式化（统一代码风格）；
- Chinese (Simplified)：中文语言包（新手友好）。

4.3 常用快捷键（适配 IDEA 习惯）

若习惯 IDEA 快捷键，可安装 “IntelliJ IDEA Keybindings” 插件，常用快捷键：

Ctrl+S：保存文件；
Ctrl+N：新建文件；
Ctrl+F：查找内容；
Ctrl+/：单行注释；
Alt+Shift+F：格式化代码。

五、实战案例：从理论到实践

案例 1：新闻页面（基础综合）

需求

实现新闻页面，包含标题（带来源和时间）、正文（含视频、图片、段落）、版心居中（宽度 70%）。

完整代码

<!DOCTYPE html>

<head>

<style>

/* 版心居中 */

.news-container {

width: 70%;

margin: 0 auto;

}

/* 标题样式 */

#news-title {

font-size: 24px;

color: #333;

margin: 20px 0;

}

/* 来源与时间 */

.news-info {

margin-bottom: 20px;

}

.news-source {

color: #0066cc;

text-decoration: none;

}

.news-time {

color: #999;

margin-left: 10px;

}

/* 正文样式 */

.news-content p {

text-indent: 2em;

line-height: 2;

color: #333;

margin: 10px 0;

}

/* 视频与图片 */

video, img {

width: 100%;

margin: 20px 0;

}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

案例 2：员工管理系统页面（综合实战）

需求

实现员工管理页面，包含 4 个模块：顶部导航栏、搜索表单、表格数据展示、底部版权区，所有内容版心居中。

完整代码

<!DOCTYPE html>

<head>

<title>Tlias智能学习辅助系统 - 员工管理</title>

<style>

/* 全局样式重置 */

body {

margin: 0;

padding: 0;

font-family: "Microsoft YaHei", sans-serif;

}

/* 版心居中 */

#container {

width: 80%;

margin: 0 auto;

}

/* 1. 顶部导航栏 */

.header {

display: flex;

justify-content: space-between;

align-items: center;

padding: 15px 20px;

background-color: #f5f5f5;

box-shadow: 0 2px 5px rgba(0,0,0,0.1);

}

.header h1 {

margin: 0;

font-size: 22px;

color: #333;

}

.header a {

text-decoration: none;

color: #333;

font-size: 16px;

}

/* 2. 搜索表单 */

.search-form {

display: flex;

align-items: center;

padding: 20px;

background-color: #f9f9f9;

margin: 20px 0;

}

.search-form input, .search-form select {

margin-right: 15px;

padding: 8px 10px;

border: 1px solid #ddd;

border-radius: 4px;

width: 180px;

}

.search-form button {

padding: 8px 20px;

border: none;

border-radius: 4px;

cursor: pointer;

margin-left: 10px;

}

.search-btn {

background-color: #007bff;

color: white;

}

.reset-btn {

background-color: #6c757d;

color: white;

}

/* 3. 表格展示 */

.emp-table {

width: 100%;

border-collapse: collapse; /* 合并边框 */

}

.emp-table th, .emp-table td {

border: 1px solid #ddd;

padding: 12px;

text-align: center;

}

.emp-table th {

background-color: #f5f5f5;

color: #333;

}

/* 头像样式 */

.avatar {

width: 50px;

height: 50px;

border-radius: 50%;

object-fit: cover;

}

/* 操作按钮 */

.oper-btn {

padding: 5px 10px;

border: none;

border-radius: 4px;

cursor: pointer;

margin: 0 5px;

}

.edit-btn {

background-color: #28a745;

color: white;

}

.del-btn {

background-color: #dc3545;

color: white;

}

/* 4. 底部版权 */

.footer {

background-color: #8f8c8c;

color: white;

text-align: center;

padding: 20px 0;

margin-top: 30px;

}

</style>

</head>

<body>

<h1>Tlias智能学习辅助系统</h1>

</div>

<option value="">请选择性别</option>

</select>

<option value="">请选择职位</option>

</select>

</form>

<thead>

<tr>

<th>最后操作时间</th>

</tr>

</thead>

<tbody>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

六、实用技巧与注意事项

浏览器兼容性：
- 开发时优先遵循 Web 标准，避免使用浏览器私有属性；
- 若需兼容旧浏览器（如 IE），可通过工具（如 Autoprefixer）自动添加 CSS 前缀。

代码规范：
- HTML 标签闭合、属性引号统一（推荐双引号）；
- CSS 选择器命名语义化（如.header而非.box1）；
- 关键代码添加注释（如布局逻辑、复杂样式）。

调试技巧：
- 浏览器按F12打开 “开发者工具”，在 “Elements” 面板查看 DOM 结构与样式生效情况；
- 在 “Console” 面板打印日志，排查 JS 交互问题（后续学习 JS 时常用）。

AI 辅助开发：
- 编写提示词（Prompt）时，明确需求（如 “生成员工管理页面的搜索表单，包含姓名输入框、性别下拉框”）；
- 基于 AI 生成的代码，需手动调试细节（如样式适配、路径修正）。

七、总结与后续展望

本文系统梳理了 HTML+CSS 的核心知识点，从基础概念（Web 标准、标签、选择器）到实战案例（新闻页面、管理系统），覆盖了前端入门所需的全部核心能力。HTML 是页面的 “骨架”，CSS 是 “外观”，两者结合可实现绝大多数静态页面的开发。

后续学习中，你还将接触：

JavaScript：实现页面交互（如表单验证、按钮点击效果）；
Vue/React：前端框架，提升大型项目开发效率；
Ajax：实现前后端数据交互（如获取后端员工数据）。

如果在实践中遇到问题，欢迎在评论区交流；觉得本文有用的话，别忘了点赞 + 收藏 + 关注，后续会持续更新前端进阶内容，帮你从入门到精通！

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

STL库——map/set（类函数学习）

2048 AI社区

毕业论文写作全攻略：从选题到定稿，5 个实用技巧 + 智元兔 AI 写作助手深度辅助

2048 AI社区

一文了解大模型微调与对齐

2048 AI社区

所有评论(0)

查看更多评论

ly870316

@ly870316

已为社区贡献16条内容