java综合开发-前后端分离-01前端html，css

啤愿 · 2025-6-1 20:38:13

java综合开发-前后端分离-01前端html，css

[ 任务列表 ]
1.阶段目标
2.网页基础知识
3.html和css
4.html的常用标签
4.1. 标题标签：h1-h6
4.2. 图片标签：img
4.3. 水平分割线标签：hr
4.4. css的三种引入方式：
4.5. 颜色的三种表示形式：
4.6. css的三种选择器：
4.7. 无语义的标签：span
4.8. 超链接：a
4.9. 视频标签：video
4.10. 音频标签：audio
4.11. 段落标签：p
4.12. 空格：&nbsp；
5.页面布局
5.1. 盒子模型
5.2. 布局标签：div，span
5.3. 表格标签：table
5.4. 表单标签：form
5.5. 表单项标签：Input，select，textarea
5.6. 多区域选中标签：label
6.补充知识

1.阶段目标

学习路线：
学习目标：
具备一定的Java基础；
掌握数据库表的设计和操作能力，基础的优化能力；
掌握主流的前后端分离的开发模式；
掌握文本开发核心知识，接口开发能力；
掌握文本开发的解决方案。
web：全球广域网，万维网（www world wide web），能够通过浏览器访问的网站。
web应用的基础架构（web架构的重要组成部分）：
浏览器；
前端服务器（前端程序）；
后端服务器（Java程序）；
数据库服务器。

2.网页基础知识

网页的组成部分：
文字，图片，音频，视频，超链接……
网页背后的本质是什么？
前端代码。
前端代码如何转换为用户看到的网页的？
通过浏览器转化（解析和渲染）；
浏览器中对代码进行解析渲染的部分称为浏览器内核。
web标准：由w3c（world wide web Consortium，万维网联盟）负责制定；
网页的三个组成部分：
HTML：负责网页的结构（页面元素和内容）；
CSS：负责网页的表现（外观，位置，颜色，大小）；
JavaScript（简称js）：负责网页的行为（交互效果）。

3.html和css

HTML（HyperText Markup Language）：超文本标记语言。
超文本：超越了文本的限制，比普通文本更强大；
标记语言：由标签构成的语言，标签都是预定义好的。
HTML快速入门：
① 创建文本文件，后缀名改为.html；
② 编写HTML结构标签；
③ 在中填写内容。
HTML的特点：
html标签不区分大小写；
html标签一般写在之中，而且一般成对出现；
html标签属性值单双引号都可以；
html语法松散。

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

复制代码

css（Cascading Style Sheet）：层叠样式表，用于控制页面的样式（外观，位置，颜色，大小）。
css三种引入方式：
- 行内样式：写在style属性中（不推荐）
- 内嵌样式：写在style标签中（可以写在页面任何位置，通常约定写在head标签中）
- 外联样式：写在一个单独的.css文件中（需要通过link标签在网页中引入）

4.html的常用标签

1. 标题标签：h1 - h6

（大 - 小）
2. 图片标签：img

属性值：
- src：图片资源路径；
- width：宽度（px，像素；%，相对于父元素的百分比）；
- height：高度（px，像素；%，相对于父元素的百分比）；
- 为了等比例缩放，通常在高度和宽度中只会选择一个进行设置。
路径的书写方式：
- 绝对路径：
  - 绝对磁盘路径：https://www.cnblogs.com/E:\work\Javaweb\HTML\img\news_logo.png
  - 绝对网络路径：https://i2.sinaimg.cn/……/news_logo.png
- 相对路径：（推荐使用相对路径）
  - ./ 当前目录，其中./可以省略的
  - ../ 上一级目录，../不可省略

3. 水平分割线标签：hr

作用：画出一条水平分割线。
4. css的三种引入方式：

方式一：行内样式：写在style属性中（不推荐）
焦点访谈：中国底气新思想夯实大国粮仓
方式二：内嵌样式：写在style标签中（可以写在页面任何位置，通常约定写在head标签中）

<head>
<title>焦点访谈：中国底气新思想夯实大国粮仓</title>
</head>

复制代码

方式三：外联样式：写在一个单独的.css文件中（需要通过link标签在网页中引入，也是通常约定写在head标签中）

h1{
color: aqua;
}

复制代码

5. 颜色的三种表示形式：

关键字：预定义颜色名，red，green……
rgb表示法：每项取值0-255
十六进制表示法：#开头，将数字转换成十六进制表示。其中两位是一样的可以简写。例如：#000000 ==> #000 ，#cccccc ==> #ccc

6. css的三种选择器：

作用：用来选取需要设置样式的元素（标签）
作用的优先级：id选择器 > 类选择器 > 元素选择器

id选择器：一个页面中，id是唯一的
类选择器：一个页面中，class是可以重复的。
元素选择器：例如h1，h2……

7. 无语义的标签：span

作用：组合行内元素，一行可以展示多个span标签
8. 超链接：a

属性值：
- href：指定资源访问的url
- target：制定在何处打开资源链接
- _self：默认值，在当前页面打开
- _blank：在空白页面打开
去掉超链接中的下划线，和颜色定义成黑色：
- text-decoration：文本装饰
- color：定义文本颜色（black）

9. 视频标签：video

属性值：

src：视屏的url
controls：显示视频播放控件
width：播放器的宽度
height：播放器的高度
注：controls标准写法是：controls=“controls”，但在html中，如果标签的属性名和属性值一样，可以省略不写，只要一个controls

10. 音频标签：audio

属性值：

src：音频的url
controls：显示播放控件

11. 段落标签：p

文本加粗标签：b 或者 strong
strong标签有强调的意思，不强调可以用b标签。
文本对齐样式：text-align：center，left，right

12. 空格：&nbsp；

在html中，无论输入多少个空格，只会显示一个。可以使用空格占位符：&nbsp；。
5.页面布局

1. 盒子模型

盒子：页面中所有的元素（标签），都可以看作是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行布局。

盒子模型组成：
内容区域（content）；
内边距区域（padding）；
边框区域（border）；
外边距区域（margin）。
其中，外边距区域margin不包含在盒子里面。

2. 布局标签：div，span

div标签：
一行只显示一个（独占一行）；
宽度默认是父元素的宽度，高度默认由内容撑开；
可以设置宽高（width，height）
span标签：
一行可以显示多个；
宽度和高度默认由内容撑开；
不可以设置宽和高。

3. 表格标签：table

场景：在网页中以表格（行、列）形式整齐地展示数据，如班级表。
table：表格整体，可以包裹多个tr，
- border：规定表格边框的宽度，
- width：规定表格的宽度，
- cellspacing：规定单元之间的空间。
tr：表格的行，可以包含多个td
td：表格单元格，可以包裹内容，如果是表头单元格，可以替换成th（加粗，居中）

4. 表单标签：form

场景：在网页中主要负责数据采集功能，如注册、登录等数据采集。
表单标签内含多个表单项标签：Input，select，textarea
- Input：定义表单项，通过type属性控制输入形式；
- select：定义下拉列表；
- textarea：定义文本域。
属性：
- action：规定当提交表单时向何处发送表单数据，url；
- method：规定用于发送表单数据的方式。get，post。
  - get：在url后面拼接表单数据，比如：？username=Tom&age=12，url长度有限制。get是method提交方式的默认值
  - post：在消息体（请求体）中传递的，参数大小无限制。
    查看post内容：f12-> network -> 点击提交 -> payload
- name：表单项必须有name属性才可以提交
- value：表单项提交的值

<html>
<head>
<title>表单标签</title>
</head>
<body>
<form action="" method="post">
姓名：<input type="text" name="name"> <br>
密码：<input type="password" name="password"><br>
性别：<label><input type="radio" name="gender" value="1">男</label>
<label><input type="radio" name="gender" value="2">女</label><br>
<input type="submit" value="提交"><br>
</form>
</body>
</html>

复制代码

5. 表单项标签：Input，select，textarea

Input定义表单项标签，通过type属性控制输入形式。

text：默认值，定义单行的输入字段；
password：定义密码字段；
radio：定义单选框；
checkbox：定义复选框；
file：定义文件上传按钮；
date/time/datetime-local：定义日期/时间/日期时间；
number：定义数字输入框；
email：定义邮件输入框；
hidden：定义隐藏域；
submit/reset/button：定义提交按钮/重置按钮/可点击按钮；
select：定义下拉列表，
- option定义列表项；
textarea：文本域，
- cols：一行可以输入多少字符，
- rows：默认多少行；

6. 多区域选中标签：label

label标签所包裹的任何区域都可以被选中。
6.补充知识

前端开发官方文档：https://www.w3school.com.cn/
前端开发工具：vscode
开发注意事项：
修改完了要记得保存；
alt+B打开浏览器运行代码。
浏览器打开前端代码：
在浏览器右键：检查（打开开发者工具）；
或者f12。
字体大小调整的属性：font-size，记得加上px

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

账号		自动登录	找回密码
密码			立即注册