JavaWeb基础-①——前端技术基础

最新推荐文章于 2025-01-21 22:42:42 发布

原创最新推荐文章于 2025-01-21 22:42:42 发布 · 663 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#JavaWeb

JavaWeb学习专栏收录该内容

2 篇文章

订阅专栏

本文介绍了JavaWeb技术体系中的前端基础，重点讲解了HTML的常用标签，如标题、超链接、表格和表单元素，以及CSS的外部引入。此外，还探讨了登录界面的实现，强调了HTML、CSS和JavaScript在构建动态网页中的角色。

文章目录

一、JavaWeb技术体系
二、前端三剑客
三、登录界面

目标：了解JavaWeb技术体系，掌握常用技术点

【既然是学习大数据：以后主要就是集中到后端，对数据进行一些处理，那就得知道这些数据到底是怎么来的，也就是企业怎么就收集到用户的数据了，处理完了数据以后，又如何再反馈给用户
----> 即，后端的数据怎么来的，处理完了又如何返回给前端（而这整个过程，是通过JavaWeb来完成的）】

一、JavaWeb技术体系

在这里插入图片描述
【

"前端"相关技术，通过浏览器实现；
"后端"相关技术；
前后端肯定是要交互的，“通过HTTP协议交互”；
在交互过程中，肯定会发生数据的传递（客户端<---->服务端，可能会从客户端把一些数据传送到服务器端，也可能会把服务器端处理完成的数据响应给客户端），在这个过程中，就可以借助json、xml等格式进行"数据交互"；
在整个项目过程中，有时需要维护用户的状态（比如，登录状态，可以做某些操作，非登录状态，就不能做某些操作），可以使用Cookie、Session来"维持会话状态"

】

简化版如下：
在这里插入图片描述

【讲解过程是以一个小项目来进行的，主要功能包括：登录、注册
----> 那么首先就要有一个登录界面，让用户来输入用户名、密码，这就涉及前端技术】

二、前端三剑客

HTML（结构）：网页上要有什么东西，由HTML负责（用标记把图片、视频、音乐等等呈现出来）
CSS（样式）：美化网页
JS（行为）：想要实现交互（动态网页），需要JS

1、HTML（超文本标记语言）常用标签

超文本："超越"普通文本 —> 普通文本只能有文字，而网页上可以有文字、图片、链接、音乐、视频、程序
标记：HTML的核心就是标记，通过各种各样不同的标记，来呈现不同的内容（图片、视频等）

1.1 根标记< html >、头标记< head >、体标记< body >

一个HTML页面最基本的组成结构：

< html >：根标记
< head >：头标记 ——> 写描述性的信息（例如 CSS / JavaScript 的信息）
< body >：体标记 ——> 写页面显示的信息（页面上要显示的东西，都写在body里）

1.2 标题标记 < h1 >…< h6 >

	<h1 align="center">标题1</h1>
	<h2 align="center">标题2</h2>
	<h3>标题3</h3>
	<h4>标题4</h4>
	<h5 align="right">标题5</h5>
	<h6 align="right">标题6</h6>

1.3 超链接 < a >

	<!-- 超链接    href：可以指定应用内（本项目内）或应用外（互联网中）的任意地址 -->
	<a href="http://www.baidu.com">点我查看超链接</a>

1.4 表格 < table >

border属性：边框粗细（不设置，看不到边框）
width属性：设置宽度（推荐自适应，只写百分比，如60%）
cellspacing属性：设置单元格之间的距离（不想要边框的空隙，就设为0px）

	<h1 align="center">员工信息列表</h1>
	<!-- 表格 -->
	<table border="1px" align="center" width="60%" cellspacing="0px">
		<!-- 行 tr -->
		<tr>
			<!-- 列 th/td    （有了行才有列，所以在行里面去写列）
				th：标题列，自带居中并加粗
				td：普通列
			-->
			<th>员工ID</th>
			<th>姓名</th>
			<th>性别</th>
			<th>描述</th>
		</tr>
		<tr align="center">
			<td>1001</td>
			<td>小红</td>
			<td>女</td>
			<td>班花</td>
		</tr>
		<tr align="center">
			<td>1002</td>
			<td>小明</td>
			<td>男</td>
			<td>老司机</td>
		</tr>
	</table>

效果如下：
在这里插入图片描述

1.5 表单< form >：非常常用！

【作用：收集用户的信息，提交到后台服务器】

action属性：提交的地址（数据要提交到哪个地址）
method属性：提交方式（GET / POST）

表单内的输入框< input />

type属性：输入框的输入格式
name属性：表单提交到后台时的key值，数据提交的格式是"key=value"（对于页面没什么作用，将来表单要提交到后台，这个属性就有用了）
value属性：输入框的默认值

1.5.1 文本框 < input type=“text” />

文本框可以有默认值，通过value属性来设定

1.5.2 密码框 < input type=“password” />

设定为密码框后，用户输入的字符默认显示为星号

1.5.3 单选框 < input type=“radio” />

注意：同一组单选框，必须设定相同的name，否则不认为是同组，没有互斥效果
注意：同组内的不同选项，设定不同value，后台根据value判断选中的是谁

1.5.4 多选框：< input type=“checkbox” />

注意：同上

1.5.5 下拉列表：< select >（注意不再是< input >中换换type）

name属性
< option >标签：每一个选项都是一个< option >
< option >的value属性：提交给后台的是选中的那个< option >的value属性的值

1.5.6 提交按钮：< input type=“submit” />，（依然是< input >中换换type）

点击该按钮后，就会跳转并提交到的action属性中指定的地址
value属性：按钮上显示的内容

1.5.7 重置按钮：< input type=“reset” />

点击以后，表单中的填写的所有内容都会被重置为空或默认值

实例：

	<!-- 表单    收集用户的信息，提交到后台服务器 -->
	<form action="http://www.baidu.com" method="GET">
		<!-- 数据提交的格式：username=admin -->
		用户名称： <input type="text" name="username" value="admin" />
		<br/>
		用户密码： <input type="password" name="password" />
		<br/>
		用户性别： 男 <input type="radio" name="gender" value="1" />
				  女 <input type="radio" name="gender" value="0" />
		<br/>
		用户爱好： 吃饭 <input type="checkbox" name="hobby" value="eat" />
				  睡觉 <input type="checkbox" name="hobby" value="sleep" />
				  打豆豆 <input type="checkbox" name="hobby" value="ddd" />
		<br/>
		用户地址：省份 <select name="province">
							<option value="sd">山东省</option>
							<option value="sx">山西省</option>
					  </select>
		<br/>
		<input type="submit" value="注册" />
		<input type="reset" value="重置">

	</form>

效果如下：
在这里插入图片描述

2、CSS样式

【CSS（样式）是描述网页的，因此要写在< head >里】

1.1 CSS的三种修饰方法：

在< head >中使用一对< style >标签，在其中通过CSS语法来描述一些样式

第一种方式 —— 元素选择器：这种方式作用的是所有的< div >标签（不一定给
施加，任何标签都可以）
第二种方式 —— id选择器：这样可以单独给某个< div >作一个样式的设置，注意，id必须唯一
第三种方式 —— 类选择器：这样可以给一组< div >作同一个样式设置

示例代码如下：

<head>
	<style>
		div{ /*元素选择器*/
			width: 300px;
			height: 100px;
			border: 2px solid red;
			background-color: green;
		}

		#d1{ /*id选择器*/
			background-color: yellow;
		}

		.d{ /*类选择器*/
			background-color: gray;
		}

	</style>
</head>

<body>
    <div>这是个div</div>
    <div id="d1">这是个div</div>
    <div class="d">这是个div</div>
    <div class="d">这是个div</div>
</body>

效果如下：
在这里插入图片描述

1.2 外部引入CSS文件

注意：样式特别多的时候，全部直接写在< head >里，会特别乱，也不便于集中管理
因此可以把CSS样式直接写在一个样式文件（xx.css）里，此时想使用这些样式，首先就要把样式文件引入当前HTML中

<head>
    <!-- 引入外部的样式文件 -->
    <link rel="stylesheet" type="text/css" href="my.css">
</head>
<!-- 此处my.css和该html文件在同一路径下，因此可以直接访问 -->

三、登录界面

【有了上述相关技术，一个简单的登录界面就可以实现了】

<html>
	<head>
		<style type="text/css">
			body{
				background-color: pink;
			}
		</style>
	</head>
	<!--<body bgcolor="pink">--><!-- 也可以使用body标签的自带属性"bgcolor" -->
	<body>
		<h1>欢迎登录</h1>
		<form action="" method="">
			用户名称： <input type="text" name="username" />
			<br/>
			用户密码： <input type="password" name="password" />
			<br/>
			<input type="submit" value="Login" />
			
		</form>
	</body>
</html>