JavaWeb学习-前端知识小结

前言

参照B站尚硅谷的教程进行学习，对javaweb的前端知识做个简单的小结，主要内容包括html、css、javascript。其中html表示了前端页面的结构和元素，例如表格、文本框、表单等；css表示前端页面的样式，例如段落中文字的颜色、字体大小，表格中文字的颜色，字体大小等；JavaScript是弱类型的脚本语言，可以基于各种事件表示前端页面的逻辑，例如鼠标悬浮事件背景颜色改变等。

html

基础

html语言是解释型语言，下面是一个html的页面案例

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
<html>
	<head>
		<title>这是我的第一个网页</title>
		<meta charset="UTF-8">
	</head>
	<body>
		
		HELLO WORLD!<br/>你好，HTML！
		<p>这里是一个段落</p>
		<p>这里是第二个段落</p>
		<img src="D:\sgg2021\0927_javaweb\1109\02.代码\imgs\girl.jpg" width="57" height="73" alt="这里是一张图片"/>
		<h1>标题一</h1>
		<h2>标题一</h2>
		<h3>标题一</h3>
		<h4>标题一</h4>
		<h5>标题一</h5>
		<h6>标题一</h6>
		
		武林高手排行榜:
		<ol type="i" start="3">
			<li>扫地僧</li>
			<li>萧远山</li>
			<li>慕容博</li>
			<li>虚竹</li>
			<li>阿紫</li>
		</ol>
		武林大会人员名单：
		<ul type="circle">
			<li>乔峰</li>
			<li>阿朱</li>
			<li>马夫人</li>
			<li>白世镜</li>
		</ul>

		你是<b><i><u>喜欢</u></i></b>是<b>甜</b>月饼还是<i>咸</i><u>月饼</u>？
		<br/>

		水分子的化学式： H<sub>2</sub>O <br/>
		氧气的化学式： O<sup>2</sup><br/>

		5&lt;10
		10&gt;5
		5&le;10
		10&ge;5
		注册商标 &reg;
		版权符号 &copy;

		<span>赵又廷</span>，夺妻之仇。

		<a href="http://www.baidu.com" target="_self">百度一下</a>

	</body>
</html>

元素解释：

  • <html> 称之为开始标签，</html>称之为结束标签
  • title 表示网页的标题
  • 可以在meta标签中设置编码方式（charset）
  • <br/>表示换行。br标签是一个单标签。单标签：开始标签和结束标签是同一个，斜杠放在单词后面
  • p 表示段落标签
  • img 标签图片标签
    src属性表示图片文件的路径
    width和height表示图片的大小
    alt表示图片的提示
  • h1~h6 : 标题标签
  • ol 有序列表
    start 表示从*开始，type 显示的类型：A a I i 1(deafult)
  • ul 无序列表
    type disc(default) , circle , square
  • u 下划线 b 粗体 i 斜体
  • 上标 sup 下标 sub
  • HTML中的实体：小于号 < 大于等于号 ≥ 版权 ©
  • span 不换行的块标记
  • a 表示超链接
    href 链接的地址
    target:
    _self 在本窗口打开
    _blank 在一个新窗口打开
    _parent 在父窗口打开
    _top 在顶层窗口打开
  • div 层

表格

下面是一个表格的样例

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
<html>
	<head>
		<title>表格标签的学习</title>
		<meta charset="UTF-8">
	</head>
	<body>
		<table border="1" width="600" cellspacing="0" cellpadding="4">
			<tr align="center">
				<th>姓名</th>
				<th>门派</th>
				<th>成名绝技</th>
				<th>内功值</th>
			</tr>
			<tr align="center">
				<td>乔峰</td>
				<td>丐帮</td>
				<td>少林长拳</td>
				<td>5000</td>
			</tr>
			<tr align="center">
				<td>虚竹</td>
				<td>灵鹫宫</td>
				<td>北冥神功</td>
				<td>15000</td>
			</tr>
			<tr align="center">
				<td>扫地僧</td>
				<td>少林寺</td>
				<td>七十二绝技</td>
				<td>未知</td>
			</tr>
		</table>
		<hr/>
		<table border="10" cellspacing="5" cellpadding="16" width="1200">
			<tr>
				<th>名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>小计</th>
				<th>操作</th>
			</tr>
			<tr align="left">
				<td>苹果</td>
				<td rowspan="2">5</td>
				<td>20</td>
				<td>100</td>
				<td><img src="imgs/del.jpg" width="24" height="24"/></td>
			</tr>
			<tr align="center">
				<td>菠萝</td>
				<td>15</td>
				<td>45</td>
				<td><img src="imgs/del.jpg" width="24" height="24"/></td>
			</tr>
			<tr align="center">
				<td>西瓜</td>
				<td>6</td>
				<td>6</td>
				<td>36</td>
				<td><img src="imgs/del.jpg" width="24" height="24"/></td>
			</tr>
			<tr align="center">
				<td>总计</td>
				<td colspan="4">181</td>
			</tr>
		</table>
	</body>
</html>

元素解释：

  • 表格基本元素
    表格 table
    行 tr
    列 td
    表头列 th

  • 属性
    table中有如下属性（基本淘汰，了解即可）

    • border：表格边框的粗细
    • width:表格的宽度
    • cellspacing：单元格间距
    • cellpadding：单元格填充

    tr中有一个属性： align -> center,left,right
    rowspan : 行合并
    colspan : 列合并

表单

表单样例如下：

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
<html>
	<head>
		<title>表单标签的学习</title>
		<meta charset="UTF-8">
	</head>
	<body>
		<form action="demo04.html" method="post">
			昵称：<input type="text" value="请输入你的昵称"/><br/>
			密码：<input type="password" name="pwd"/><br/>
			性别：<input type="radio" name="gender" value="male"/>男
	  			  <input type="radio" name="gender" value="female" checked/>女<br/>
			爱好：<input type="checkbox" name="hobby" value="basketball"/>篮球
				  <input type="checkbox" name="hobby" value="football" checked/>足球
				  <input type="checkbox" name="hobby" value="earth" checked/>地球<br/>
			星座：<select name="star">
					<option value="1">白羊座</option>
					<option value="2" selected>金牛座</option>
					<option value="3">双子座</option>
					<option value="4">天蝎座</option>
					<option value="5">天秤座</option>
				  </select><br/>
			备注：<textarea name="remark" rows="10" cols="50"></textarea><br/>
			<input type="submit" value=" 注 册 "/>
			<input type="reset" value="重置"/>
			<input type="button" value="这是一个普通按钮"/>
		</form>
	</body>
</html>

元素解释：

  • 表单 form
    action表示表单信息发往的目的地
    method表示表单的发送方式，一般选择post方式发送，如果是get方式密码等信息会显示出来
  • input type=”text” 表示文本框，其中name属性必须要指定，否则这个文本框的数据将来是不会发送给服务器的
  • input type=”password” 表示密码框
  • input type=”radio” 表示单选按钮。需要注意的是，name属性值保持一致，这样才会有互斥的效果;可以通过checked属性设置默认选中的项
  • input type=”checkbox” 表示复选框。name属性值建议保持一致，这样将来我们服务器端获取值的时候获取的是一个数组
  • select 表示下拉列表。每一个选项是option，其中value属性是发送给服务器的值 , selected表示默认选中的项
  • textarea 表示多行文本框（或者称之为文本域）,它的value值就是开始结束标签之间的内容
  • input type=”submit” 表示提交按钮
  • input type=”reset” 表示重置按钮
  • input type=”button” 表示普通按钮

css

css主要用于装饰HTML中的元素，属于特效的范畴，简单了解即可，下面举个含有css的html样例：

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
<html>
	<head>
		<meta charset="utf-8">
		<!-- 内部样式表 -->
		<style type="text/css">
			/* 被style标签包围的范围是CSS环境，可以写CSS代码 */

			/* 标签样式表 */
			p{
				color:red;
			}

			/* 类样式 */
			.f20{
				font-size:20px;
			}
		</style>
		<!-- 引用外部的CSS样式表文件 -->
		<link rel="stylesheet" href="css/demo01.css">
	</head>
	<body>
		<!--
		<p><font color="red">这里是段落一</font></p>
		<p><font color="red">这里是段落二</font></p>
		-->
		<p>这里是段落一</p>
		<p>这里是段落二</p>
		<p class="f20">这里是段落三</p>
		<p id="p4">这里是段落四</p>	<!-- id属性在整个HTML文档中，尽量保持唯一（虽然重复也不会报错） -->

		<div>
			<p><span style="font-size:60px;font-weight:bolder;color:yellow;">HELLO</span><span style="font-size:60px;font-weight:bolder;color:blue;">WOO</span></p>
			<span class="f32">World</span>
			<p class="f32">!!!</p>
		</div>

	</body>
</html>

下面是引入的外部css样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* ID样式 */
#p4{
	background-color:pink;
	font-size:24px;
	font-weight:bolder;
	font-style:italic;
	font-family:"华文彩云";
}
/* 组合样式 */
div p{
	color:blue;
}

div .f32{
	font-size:50px;
	font-family:"黑体";
}

被style标签包围的范围是CSS环境，可以写CSS代码，用来装饰html中的元素，另外可以引入外部的样式表，一般都是引用外部的样式表，便于不同功能的代码分离。

CSS的最基本的分类: 标签样式表、类样式表、ID样式表

CSS从位置上的分类：嵌入式样式表、内部样式表、外部样式表

JavaScript

JavaScript是一种弱类型的客户端的脚本语言，变量的数据类型由后面赋的值的类型决定，JavaScript可以给html上的元素绑定各种事件逻辑

下面是JavaScript基本样例：

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
<html>
	<head>
		<meta charset="utf-8">
		<script language="javascript">
			var str = "hello world";
			alert(typeof str);
			str = 9999 ;
			alert(typeof str);

			// 对象
			var person = new Object();
			person.pid = "p001";
			person.pname="鸠摩智";
			alert(person.pid+"_"+person.pname);
			
			//js 方法
			function hello(num1 , num2 , name){
				if(num1>num2){
					return "hello to" + name ;
				}else{
					alert("HELLO");
				}
			}
		</script>
	</head>
	<body>
		
	</body>
</html>

JavaScript一般也通过引入使用，html界面上一般不写JavaScript相关的语句。引入JavaScript脚本后，界面上就会出现一些交互的特效，例如鼠标悬浮显示详情，编辑表格等。

对于后端开发，其实主要还是关于客户端给服务器发送的实际信息，对于界面编辑、特效相关的应该还是属于前端的工作，了解即可。

参考

尚硅谷javaweb教程

JavaWeb
#html #css #javascript
JavaWeb学习-前端知识小结
https://fattree.cn/2022/12/27/JavaWeb学习-前端知识小结/
作者
fattree
发布于
2022年12月27日
许可协议