JavaWeb基础（1）：Web概述、HTML、Tomcat环境搭建

最新推荐文章于 2022-03-24 23:40:13 发布

DougLeaMrConcurrency

最新推荐文章于 2022-03-24 23:40:13 发布

阅读量320

点赞数

分类专栏： # JavaWeb 文章标签： Web基础 HTML基础语法 Tomcat环境搭建 idea添加Tomcat idea创建web

本文链接：https://blog.csdn.net/qq_43265673/article/details/98508205

版权

JavaWeb 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

Web简介

整个javaWeb阶段的内容通过实际的案例贯穿学习，所涉及到的技术知识点会在案例中根据不同的需求引入。该阶段的学习目标是了解javaWEB的整个技术体系，掌握常用的技术知识点。

JavaWeb的技术体系

在这里插入图片描述

登录页面的开发

3.1 涉及的技术知识点
1)HTML
2)JSP
3)Tomcat
3.2 HTML是什么?

HTML指的超文本标记语言(Hyper Text Markup Language)，是一种用来描述网页的语言。超文本指的是除了可以包含文字之外，还可以包含图片、链接、音乐、视频、程序等内容。
HTML网页的组成:
常用的HTML标签

① html 根标记
② head 头标记
③ body 体标记
④ h 标题标签
⑤ a 超链接
⑥ table 表格
⑦ form 表单

一个基本结构的HTML页面
登录页面的示例

登录功能实现-环境的搭建

4.1 涉及的技术知识点

WEB服务器
动态的web工程

4.2Web服务器

Web服务器主要用来接收客户端发送的请求和响应客户端请求。
Tomcat（Apache）：当前应用最广的JavaWeb服务器；
JBoss（Redhat红帽）：支持JavaEE，应用比较广EJB容器 –> SSH轻量级的框架代替
GlassFish（Orcale）：Oracle开发JavaWeb服务器，应用不是很广；
Resin（Caucho）：支持JavaEE，应用越来越广；
Weblogic（Orcale）：要钱的！支持JavaEE，适合大型项目；
Websphere（IBM）：要钱的！支持JavaEE，适合大型项目

4.3 Tomcat服务器的安装及配置

将Tomcat的安装包解压到磁盘的任意位(非中文无空格)
Tomcat服务的目录结构
配置环境变量，方便Tomcat的启动关闭（可选）
① 新建环境变量CATALINA_HOME=解压目录

② 在Path环境变量中加入Tomcat解压目录\bin目录

③ 在命令行中运行catalina run或者 startup启动Tomcat服务器，在浏览器地址栏访问如下地址进行测试
http://localhost:8080
在这里插入图片描述

4.4 在eclipse中配置tomcat

在Eclipse中配置运行环境
在Eclipse中创建新的Server

4.5 创建动态的web工程

在Eclipse中点击File ->New->Dynamic Web Project

在idea中配置tomcat

点击run->Edit configurations或者箭头所示运行旁边进入配置
在这里插入图片描述
点击左上角“+”选择Tomcat Server

点击config，选择Tomcat所在目录，再点击两次OK即可

注意：此处的端口号建议修改，如果不修改后面会出现端口号冲突报错

idea创建动态的web工程

新建一个module（也可以新建一个project），
在这里插入图片描述
选择Java Enterprise，勾选Web Application，点下一步即可

命名好后测试运行

简单的HTML代码

<!DOCTYPE html>
<html>
<head>
	<!-- 设置当前页面编码使用的字符集，同时也告诉浏览器使用该字符集进行解码 -->
	<meta charset="UTF-8" />
	<!-- 设置浏览器标签页中显示的标题 -->
	<title>Hello World</title>
</head>
<body>
	<!-- 添加注释的快捷键：Ctrl + Shift + / -->
	<!-- 网页中的主要内容写在body标签中 -->
	我的第一个网页！
	我要显示在浏览器中1111
</body>
</html>

HTML路径说明

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- base标签中的href属性可以让当前页面中的相对路径变为绝对路径 -->
<base href="http://localhost:8080/Web_Ex/">
</head>
<body>
	<!-- 
		以  / 开头的路径即为绝对路径
		绝对路径中的 / 代表什么？
			如果路径由浏览器解析，那么 / 就代表http://localhost:8080/
			那些路径由浏览器解析？
				1）HTML标签中的路径。如a标签中的href属性中的路径、form标签中的action属性中的路径等
				2）重定向中的路径
			如果路径由服务器解析，那么 / 就代表http://localhost:8080/Web_Ex/
			那些路径服务器解析？
				1）web.xml配置文件中url-pattern标签中的路径
				2）转发中的路径
	 -->
	<a href="pages/login.html">我要登录</a><br><br>
	<a href="#">我要注册</a>
</body>
</html>