当前位置：首页 > news >正文

01-(JavaWeb)前端部分（HTML+CSS）

news 2025/10/20 8:21:32

1、HTML快速入门

1.1、操作步骤

1.2、总结

1.2.1、HTML页面的基础结构标签

1.2.2、HTML中的标签特点

2、常见标签和样式

2.1、常见标签

2.1.1、标题标签

2.1.2、超链接标签：

2.1.3、一些常用标签

2.3、css样式

2.3.1、css样式引入方式

2.3.2、颜色表示方式

2.3.3、css选择器

2.4、路径表示

3、页面布局

3.1、盒子模型

3.2、布局标签

3.3、代码实现

4、案例

4.1、顶部导航栏

4.1.1、基本实现

4.1.2、flex布局

4.2、搜索表单

4.2.1、表单标签

4.2.2、表单项标签

编辑

4.2.3、搜索表单的实现

4.3、表格数据展示

4.3.1、基本实现

4.3.2、表格标签

4.4、底部版权区域

编辑

4.4.1、基本实现

4.5、版心居中

相信大家在学习javaweb的时候对前端都学过了，这里简单回顾一下前端的知识,记录一下学习javaweb的过程。

1、HTML快速入门

1.1、操作步骤

新建文本文件，后缀名改为 .html，命名为：01. html快速入门.html

写HTML的基本骨架，定义标题

右键html文件，选择记事本打开，写如下代码：

<html><head><title>HTML 快速入门</title></head><body></body>
</html>

其中<html>是根标签，<head>和<body>是子标签。

<head> : 定义网页的头部，用来存放给浏览器看的信息，如：CSS样式、网页的标题。
<body> : 定义网页的主体部分，存放给用户看的信息，也是网页的主体内容，如：文字、图片、视频、音频、表格等。

继续完善主体：

<html><head><title>HTML 快速入门</title></head><body><h1>Hello HTML</h1><img src="img/1.png"></body>
</html>

其中 <h1> 标签是一个一级标题的标签。 <img> 标签是一个图片标签，用来展示图片，而其中的 src 属性是用来指定要展示的图片。浏览器呈现效果如下:

1.2、总结

1.2.1、HTML页面的基础结构标签

<html><head><title> </title></head><body></body>
</html>

<title>中定义标题显示在浏览器的标题位置，<body>中定义的内容会呈现在浏览器的内容区域

1.2.2、HTML中的标签特点
HTML标签不区分大小写，建议小写
HTML标签的属性值，采用单引号、双引号都可以，一般写双引号
HTML语法相对比较松散 (建议大家编写HTML标签的时候尽量严谨一些)

2、常见标签和样式

2.1、常见标签

2.1.1、标题标签

HTML 提供了 h 系列标题标签：

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

使用说明：

标题级别从 h1 到 h6 依次递减
h1 字体最大，h6 字体最小
HTML 标题标签是预定义的，仅支持 h1-h6 六个级别
不存在 h7 及更高级别的标题标签
2.1.2、超链接 <a> 标签：

语法：

<a href="URL" target="打开方式">链接文本</a>

主要属性说明：

href：指定目标资源的URL地址
target：控制链接打开方式
- _self（默认值）：在当前窗口/标签页打开
- _blank：在新窗口/标签页打开
2.1.3、一些常用标签

在HTML页面中，我们在代码中录入空格、<、> 这些符号的时候，是没有对应的效果的，因为浏览器并不能准确的识别，此时，我们就需要通过字符实体来表示空格，<, > 。常见符号的字符实体如下：

2.3、css样式

2.3.1、css样式引入方式

那在HTML的文件中，我们如何来编写CSS样式呢，此时就涉及到CSS的三种引入方式。具体有3种引入方式，语法如下表格所示：

行内样式：会出现大量的代码冗余，不方便后期的维护，所以不常用（常配合JS使用）。
内部样式：通过定义css选择器，让样式作用于当前页面的指定的标签上。（可以写在页面任何位置，但通常约定写在head标签中）

外部样式：html和css实现了完全的分离，企业开发常用方式。

2.3.2、颜色表示方式

在前端程序开发中，颜色的表示方式常见的有如下三种：

2.3.3、css选择器

顾名思义：选择器是选取需设置样式的元素（标签），但是我们根据业务场景不同，选择的标签的需求也是多种多样的，所以选择器有很多种。选择器通用语法如下：

选择器名   {css样式名：css样式值;css样式名：css样式值;
}

对于后端，我们只需要掌握这几种：

2.4、路径表示

在引入图片、视频、音频、css等内容时，我们需要指定文件的路径，而在前端开发中，路径的书写形式分为两类：

绝对路径:
- 绝对磁盘路径: <img src="C:\Users\Administrator\Desktop\HTML\img\logo.png">
- 绝对网络路径: <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">
相对路径:

./ : 当前目录 , ./ 可以省略的

../: 上一级目录

3、页面布局

3.1、盒子模型

盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局。
盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）。

盒子的大小，其实就包括三个部分： border、padding、content，而margin外边距是不包括在盒子之内的。

3.2、布局标签

布局标签：实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签。
标签：<div> <span>
特点：
<div>标签：
- 一行只显示一个（独占一行）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高（width、height）
<span>标签：
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高（width、height）

我们来测试一段代码：

<body><div>A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div><div>A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div><span>A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </span><span>A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </span>
</body>

浏览器打开后的效果:

1). div会独占一行，默认宽度为父元素 body 的宽度。可以设置宽高（width、height）

2). span一行会显示多个，用来组合行内元素，默认宽度为内容撑开的宽度。不可以设置宽高（width、height）

3.3、代码实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型</title><style>div {width: 200px;  /* 宽度 */height: 200px;  /* 高度 */box-sizing: border-box; /* 指定width height为盒子的高宽 */background-color: aquamarine; /* 背景色 */padding: 20px 20px 20px 20px; /* 内边距, 上 右 下 左 , 边距都一行, 可以简写: padding: 20px;*/ border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */margin: 30px 30px 30px 30px; /* 外边距, 上 右 下 左 , 边距都一行, 可以简写: margin: 30px; */}</style>
</head><body><div>A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div></body>
</html>

代码编写好了, 可以通过浏览器打开该页面, 通过开发者工具,我们就可以看到盒子的大小 , 以及盒子各个组成部分(内容、内边距、边框、外边距)：

上述的padding、margin属性值，可以是4个值、也可以是两个值、也可以是一个值，具体的含义如下：

padding: 20px 20px 20px 20px; -------> 表示上、右、下、左都是20px；

padding: 20px 10px; ----------------------> 表示上下是20px，左右是10px；

padding: 20px; -----------------------------> 表示上、右、下、左都是20px；

4、案例

需求：参照Tlias智能学习辅助系统，完成员工管理页面的制作。

产品经理制作的页面原型如下：

4.1、顶部导航栏

4.1.1、基本实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{background-color: #f5f5f5;margin: 0;}/* 顶栏样式 */.header{display: flex;justify-content: space-between;align-items: center;background-color: #f1f1f1;padding: 10px 20px;box-shadow: 0 2px 5px rgba(0,0,0,0.1);}/* 加大加粗标题 */.header h1 {margin: 0;font-size: 24px;font-weight: bold;}/* 文本链接样式 */.header a {text-decoration: none;color: #333;font-size: 16px;}</style>
</head>
<body><!-- 顶栏 --><div class="header"><h1>Tlias智能学习辅助系统</h1><a href="#">退出系统</a></div><!-- 其它部分 --> 
</body>
</html>

4.1.2、flex布局

在上述示例代码中，我们使用了一种称为Flex布局的页面排版模式。

Flex是Flexible Box的缩写，意为"弹性布局"。当我们为元素设置Flex布局时，该元素就成为了Flex容器（container），其所有子元素会自动成为容器内的Flex项目（item）。
通过为父容器设置Flex属性，我们可以灵活控制其子元素的排列方式和位置。

测试代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#container {display: flex;/* justify-content: space-between; */ /* 先两边贴边，再平分剩余空间 *//* justify-content: flex-start;*/ /* 从头开始排列  *//* justify-content: flex-end; */ /* 从尾开始排列 *//* justify-content: center; */ /* 居中排列 *//* justify-content: space-around; */ /* 两边留白，中间平分，平分剩余空间 */flex-direction: row;justify-content: space-between;background-color: #aeea6a;width: 400px;height: 300px;}#container div {background-color: #e866ef;width: 100px;height: 50px; }</style>
</head>
<body><div id="container"><div>Flex Item</div><div>Flex Item</div><div>Flex Item</div></div>
</body>
</html>

flex布局相关的CSS样式：

如果主轴设置为row，其实就是横向布局。主轴设置为column，其实就是纵向布局

4.2、搜索表单

那接下来，我们要完成的是第二个部分，也就是搜索栏的制作。页面原型展示如下：

制作搜索表单需要使用到html的表单标签：
4.2.1、表单标签
在日常上网时，我们几乎每天都会遇到表单。无论是登录页面、注册页面还是个人信息提交页面，都是由各种表单组成的。当我们填写完表单数据并点击"提交"后，这些信息就会被采集并发送至服务器端，最终存储到数据库中。

那其实，上述的整个窗口是一个表单，而表单是一项一项的，这个我们称为表单项或表单元素。

表单场景: 表单就是在网页中负责数据采集功能的，如：注册、登录的表单。
表单标签: <form>
表单属性:
- action: 规定表单提交时，向何处发送表单数据，表单提交的URL。
- method: 规定用于发送表单数据的方式，常见为： GET、POST。
  - GET：表单数据是拼接在url后面的，如： xxxxxxxxxxx?username=Tom&age=12，url中能携带的表单数据大小是有限制的。
  - POST：表单数据是在请求体（消息体）中携带的，大小没有限制。
表单项标签: 不同类型的input元素、下拉列表、文本域等。
- input: 定义表单项，通过type属性控制输入形式
- select: 定义下拉列表
- textarea: 定义文本域
GET方式提交的表单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-表单</title>
</head>
<body><!-- form表单属性: action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面method: 表单的提交方式 .get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值post: 在消息体(请求体)中传递的, 参数大小无限制的.-->   <form action="" method="get">用户名: <input type="text" name="username">年龄: <input type="text" name="age"><input type="submit" value="提交"></form></body>
</html>

表单编写完毕之后，通过浏览器打开此表单，然后再表单项中录入值之后，点击提交，我们会看到表单的数据在url后面提交到服务端，格式为：?username=Tom&age=12。

POST方式提交表单

将上述的表单提交方式由get，改为post

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-表单</title>
</head>
<body><!-- form表单属性: action: 表单提交的url, 往何处提交数据 . 如果不指定, 默认提交到当前页面method: 表单的提交方式 .get: 在url后面拼接表单数据, 比如: ?username=Tom&age=12 , url长度有限制 . 默认值post: 在消息体(请求体)中传递的, 参数大小无限制的.-->   <form action="" method="post">用户名: <input type="text" name="username">年龄: <input type="text" name="age"><input type="submit" value="提交"></form></body>
</html>

数据通过请求体（request body）传递，不会显示在URL中，而是通过HTTP请求体（request body）发送到服务器。无法直接在浏览器地址栏看到提交的数据，但可以通过以下方式验证： 注意事项：

表单中的所有表单项，要想能够正常的采集数据，在提交的时候能提交到服务端，表单项必须指定name属性。否则，无法提交该表单项。

用户名: <input type="text" name="username">

4.2.2、表单项标签

在一个表单中，可以存在很多的表单项，而虽然表单项的形式各式各样，但是表单项的标签其实就只有三个，分别是：

<input>: 表单项 , 通过type属性控制输入形式。

<select>: 定义下拉列表, <option> 定义列表项
<textarea>: 文本域

创建一个表单：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-表单项标签</title>
</head>
<body><!-- value: 表单项提交的值 -->
<form action="/save" method="post">姓名: <input type="text" name="name"> <br><br>密码: <input type="password" name="password"> <br><br> 性别: <input type="radio" name="gender" value="1"> 男<label><input type="radio" name="gender" value="2"> 女 </label> <br><br>爱好: <label><input type="checkbox" name="hobby" value="java"> java </label><label><input type="checkbox" name="hobby" value="game"> game </label><label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>图像: <input type="file" name="image">  <br><br>生日: <input type="date" name="birthday"> <br><br>时间: <input type="time" name="time"> <br><br>日期时间: <input type="datetime-local" name="datetime"> <br><br>学历: <select name="degree"><option value="">----------- 请选择 -----------</option><option value="1">大专</option><option value="2">本科</option><option value="3">硕士</option><option value="4">博士</option></select>  <br><br>描述: <textarea name="description" cols="30" rows="10"></textarea>  <br><br><input type="hidden" name="id" value="1"><!-- 表单常见按钮 --><input type="button" value="按钮"><input type="reset" value="重置"> <input type="submit" value="提交">   <br>
</form></body>
</html>

而对于<input type="hidden">，是一个隐藏域，在表单中并不会显示出来，但是在提交表单的时候，是会提交到服务端的。