2025.04.29
JavaWeb学习之HTML
一、HTML概述
1.1 HTML简介
- HTML (HyperText Markup Language) ：超文本标记语言
- 超文本：超越文本的文本，包含链接、图像、音频、视频等多媒体元素
- 标记语言：由标签构成的语言
- HTML标签都是预定义好的。例如:使用<a>展示超链接,使用<img>展示图片, <video>展示视频
- HTML代码直接在浏览器中运行，HTML标签由浏览器解析
- CSS (Cascading Style Sheets) ：层叠样式表
1.2 HTML入门案例
- 新建文本文件，后缀名改为.html
- 编写HTML结构标签
- 在<body>中填写内容
- HTML特点
- HTML标签不区分大小写
- HTML标签属性值单双引号都可以
- HTML语法松散
实现效果：
1
2
3
4
5
6
7
8
9
10
| <html>
<head>
<title>HTML 快速入门</title>
</head>
<body>
<h1>Hello HTML</h1>
<img src = "1.JPG"/>
</body>
</html>
|
二、新浪新闻
参考新浪新闻页：焦点访谈：中国底气 新思想夯实大国粮仓
三、基础标签&样式
3.1 标题排版
- 图片标签
- <img>
- src：图片路径(绝对路径/相对路径)
- 绝对路径：绝对磁盘路径、绝对网络路径
- 相对路径：从当前文件开始查找(./ :当前目录，…/ :上级目录)
- width：图片的宽度(像素/相对于父元素的百分比)
- height：图片的高度(像素/相对于父元素的百分比)
- 标题标签
- 水平线标签
标题排版实现代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
</head>
<body>
<img src="img/news_logo.png"> 新浪政务 > 正文
<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
<hr>
2023年03月02日 21:50 央视网
<hr>
</body>
</html>
|
最终效果
3.2 标题样式
- <span>标签
- <span>标签是一个在开发网页时会大量用到的没有语义的布局标签
- 特点：一行可以显示多个(组合行内元素)，宽度和高度默认由内容撑开
- 通过CSS来实现样式控制
- CSS引入方式
- 行内样式：写在标签的style属性中(不推荐)
- 内嵌样式：写在style标签中(可以写在页面任何位置，但通常约定写在head标签中)
- 外嵌样式：写在一个单独的.css文件中(需要通过link标签在网页中引入)
- 颜色的表示形式
| 表示方式 | 表示含义 | 取值 |
| -------------- | ------------------------------- | ------------------------------------------ |
| 关键字 | 预定义的颜色名 | red、green、blue… |
| rgb表示法 | 红绿蓝三原色，每项取值范围0~255 | rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0) |
| 十六进制表示法 | #开头，将数字转换成十六进制表示 | #000000、#cccccc，简写：#000、#ccc |
- CSS选择器：用来选取需要设置样式的元素(标签)
- 元素选择器
- id选择器
- 类选择器
- 优先级：id选择器 > 类选择器 > 元素选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<h1 style="color: red; font-size: 30px;">焦点访谈</h1>
<style>
h1 {
color: red;
font-size: 30px;
}
</style>
<link rel="stylesheet" href="css/style.css">
|
标题样式实现代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
<style>
h1 {
color: #4D4F53;
}
</style>
</head>
<body>
<img src="img/news_logo.png"> 新浪政务 > 正文
<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
<hr>
2023年03月02日 21:50 央视网
<hr>
</body>
</html>
|
最终效果
3.3 超链接
- 标签
- <a>：超链接标签
- <a href=“…” target=“…”>超链接文本
- 属性
- href：超链接地址(绝对路径/相对路径)
- target：打开方式
- _self：默认值，在当前页面打开
- _blank：在空白页打开
- _parent：在父页面打开
- _top：在最顶层页面打开
- CSS属性
- text-decoration：文本装饰
- color：文本颜色
- font-size：字体大小(px/%)
超链接实现代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
<style>
h1 {
color: #4D4F53;
}
#time {
color: #968D92;
font-size: 13px;
}
a {
color: black;
text-decoration: none;
}
</style>
</head>
<body>
<img src="img/news_logo.png"> <a href="https://gov.sina.com.cn/" target="_self">新浪政务</a> > 正文
<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
<hr>
<span class="cls" id="time">2023年03月02日 21:50</span> <span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a> </span>
<hr>
</body>
</html>
|
最终效果
2025.05.02
3.4 正文排版
- 视频标签：
- <video>：视频标签
- src：规定视频的url
- controls：显示视频控制器(播放、暂停、音量等)
- width：视频宽度
- height：视频高度
- autoplay：自动播放
- 音频标签：
- <audio>：音频标签
- src：规定音频的url
- controls：显示音频控制器(播放、暂停、音量等)
- autoplay：自动播放
- loop：循环播放
- 段落标签：
- <p>：段落标签
- <br>：换行标签(换行不换段落)
- 文本加粗标签：
- <strong>：加粗标签(语义化标签)
- <b>：加粗标签(非语义化标签)
- CSS样式：
- line-height：行高(行间距)
- text-indent：首行缩进(单位：px/%)
- text-align：文本对齐方式
- left：左对齐
- right：右对齐
- center：居中对齐
- justify：两端对齐(首行不缩进)
正文排版实现代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
<style>
h1 {
color: #4D4F53;
}
#time {
color: #968D92;
font-size: 13px;
}
a {
color: black;
text-decoration: none;
}
p {
text-indent: 35px;
line-height: 40px;
}
#plast {
text-align: right;
}
</style>
</head>
<body>
<img src="img/news_logo.png"> <a href="https://gov.sina.com.cn/" target="_self">新浪政务</a> > 正文
<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
<hr>
<span class="cls" id="time">2023年03月02日 21:50</span> <span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a> </span>
<hr>
<video src="video/1.mp4" controls width="950px"></video>
<p>
<strong>央视网消息</strong>（焦点访谈）：党的十八大以来，以习近平同志为核心的党中央始终把解决粮食安全问题作为治国理政的头等大事，重农抓粮一系列政策举措有力有效，我国粮食产量站稳1.3万亿斤台阶，实现谷物基本自给、口粮绝对安全。我们把饭碗牢牢端在自己手中，为保障经济社会发展提供了坚实支撑，为应对各种风险挑战赢得了主动。连续八年1.3万亿斤，这个沉甸甸的数据是如何取得的呢？
</p>
<p>
人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。
</p>
<img src="img/1.jpg">
<p>
今年，我国启动了新一轮千亿斤粮食产能提升行动，这是一个新的起点。2015年以来，我国粮食产量连续8年稳定在1.3万亿斤以上，人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤，粮食产量提高了1500亿斤。
</p>
<img src="img/2.jpg">
<p>
中国式现代化一个重要的中国特色是人口规模巨大的现代化。我们粮食生产的发展，意味着我们要立足国内，解决14亿多人吃饭的问题。仓廪实，天下安。保障粮食安全是一个永恒的课题，任何时候都不能放松。在以习近平同志为核心的党中央坚强领导下，亿万中国人民辛勤耕耘、不懈奋斗，我们就一定能够牢牢守住粮食安全这一“国之大者”，把中国人的饭碗牢牢端在自己手中，夯实中国式现代化基础。
</p>
<p id="plast">
责任编辑：王树淼 SN242
</p>
</body>
</html>
|
最终效果：
3.5 页面布局
- 盒子：页面中的所有元素(标签)，都可以看做一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
- 盒子模型组成：
- 内容区域(content)
- 内边距区域(padding)
- 边框区域(border)
- 外边距区域(margin)
- 布局标签：实际开发网页中，会大量频繁的使用div和span这两个没有语义的布局标签
- 标签：
- <div>：块级标签(默认换行，宽度100%)
- <span>：行内标签(默认不换行，宽度由内容撑开)
- 特点：
- div标签
- 一行只能显示一个（独占一行）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽度和高度（width、height）
- span标签
- 一行可以显示多个（组合行内元素）
- 宽度和高度默认由内容撑开
- 不可以设置宽度和高度（width、height）
页面布局实现代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
<style>
h1 {
color: #4D4F53;
}
#time {
color: #968D92;
font-size: 13px;
}
a {
color: black;
text-decoration: none;
}
p {
text-indent: 35px;
line-height: 40px;
}
#plast {
text-align: right;
}
#center {
width: 65%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="center">
<img src="img/news_logo.png"> <a href="https://gov.sina.com.cn/" target="_self">新浪政务</a> > 正文
<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
<hr>
<span class="cls" id="time">2023年03月02日 21:50</span> <span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a> </span>
<hr>
<video src="video/1.mp4" controls width="950px"></video>
<p>
<strong>央视网消息</strong>（焦点访谈）：党的十八大以来，以习近平同志为核心的党中央始终把解决粮食安全问题作为治国理政的头等大事，重农抓粮一系列政策举措有力有效，我国粮食产量站稳1.3万亿斤台阶，实现谷物基本自给、口粮绝对安全。我们把饭碗牢牢端在自己手中，为保障经济社会发展提供了坚实支撑，为应对各种风险挑战赢得了主动。连续八年1.3万亿斤，这个沉甸甸的数据是如何取得的呢？
</p>
<p>
人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。
</p>
<img src="img/1.jpg">
<p>
今年，我国启动了新一轮千亿斤粮食产能提升行动，这是一个新的起点。2015年以来，我国粮食产量连续8年稳定在1.3万亿斤以上，人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤，粮食产量提高了1500亿斤。
</p>
<img src="img/2.jpg">
<p>
中国式现代化一个重要的中国特色是人口规模巨大的现代化。我们粮食生产的发展，意味着我们要立足国内，解决14亿多人吃饭的问题。仓廪实，天下安。保障粮食安全是一个永恒的课题，任何时候都不能放松。在以习近平同志为核心的党中央坚强领导下，亿万中国人民辛勤耕耘、不懈奋斗，我们就一定能够牢牢守住粮食安全这一“国之大者”，把中国人的饭碗牢牢端在自己手中，夯实中国式现代化基础。
</p>
<p id="plast">
责任编辑：王树淼 SN242
</p>
</div>
</body>
</html>
|
最终效果：
四、表格、表单标签
4.1 表格标签
- 场景：在网页中以表格（行、列）形式整齐展示数据，如：班级表
- 标签
- <table>：表格标签
- <tr>：表格行标签
- <td>：表格单元格标签（普通单元格）
- <th>：表格单元格标签（表头单元格）
| 标签 |
描述 |
属性/备注 |
| <table> |
定义表格整体，可以包裹多个<tr> |
border:规定表格边框的宽度 width:规定表格的宽度 cellspacing:规定单元之间的空间 |
| <tr> |
表格的行，可以包裹多个<td> |
|
| <td> |
表格单元（普通），可以包裹内容 |
如果是表头单元格，可以替换为<th> |
表格标签实现代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| <!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>
<style>
td {
text-align: center;
}
</style>
</head>
<body>
<table border="1px" cellspacing="0" width="600px">
<tr>
<th>序号</th>
<th>品牌Logo</th>
<th>品牌名称</th>
<th>企业名称</th>
</tr>
<tr>
<td>1</td>
<td> <img src="img/huawei.jpg" width="100px"> </td>
<td>华为</td>
<td>华为技术有限公司</td>
</tr>
<tr>
<td>2</td>
<td> <img src="img/alibaba.jpg" width="100px"> </td>
<td>阿里</td>
<td>阿里巴巴集团控股有限公司</td>
</tr>
</table>
</body>
</html>
|
最终效果：
4.2 表单标签
- 场景：在网页中收集用户输入的数据，如：注册、登录、搜索等
- 标签
- 表单项：不同类型的input元素、下拉列表、文本域等
- <input>：输入框标签，通过type属性来定义输入框的类型
- <select>：下拉列表标签
- <textarea>：文本域标签
- <button>：按钮标签
- 属性
- action：表单提交的地址
- method：表单提交的方式
- get：通过url传递参数(默认值)
- post：通过请求体传递参数
表单标签实现代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <!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="" method="post">
用户名: <input type="text" name="username">
年龄: <input type="text" name="age">
<input type="submit" value="提交">
</form>
</body>
</html>
|
最终效果：
4.3 表单项
- 表单项
- <input>：输入框标签，通过type属性来定义输入框的类型
- <select>：下拉列表标签
- <textarea>：文本域标签
表单项实现代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| <!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="" 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>
邮箱: <input type="email" name="email"> <br><br>
年龄: <input type="number" name="age"> <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>
|
最终效果：
参考资料：
[1] 黑马程序员Java零基础视频教程_下部
