JavaWeb~前端基础，带你了解html常见标签，教你如何用maven配置web项目

最新推荐文章于 2024-05-21 23:21:19 发布
最新推荐文章于 2024-05-21 23:21:19 发布
阅读量806 收藏 3
点赞数 1
分类专栏： Java JavaWeb 文章标签： 前端 html javascript java 数据库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24016309/article/details/123514296
版权

目录

一.前端三剑客：

二.tomcat简单使用

三.html介绍

四.html常见标签

1.文本标签（段落+标题）

1）.段落标签

2）.标题标签

2.表单标签（文本，密码，按钮，表单）

1）.文本框

2）.密码框

3）. 普通按钮，一般按钮，

4）. 提交按钮

5）. 表单

五.Maven配置web项目

1）.如何进行配置

一.前端三剑客：

（1）.html前端展示控件（页面内容）的资源文件

（2）.javascript：前端的脚本语言，写代码完成功能

（3）.css:前端样式文件

  1. javascript和css可以是单独的资源文件，也可以在html里边直接写

二.tomcat简单使用

|---bin

        |--startup.bat/shutdown.bat（启动、关闭的脚本）

|--webapps 部署的路径（有一栋房子，要招租提供服务）

        |--项目（租户的名称，提供的各种服务）

  • 注意如果在localhost:8080后面不加上webapps里面的项目文件名的话，默认访问的是webapps下的ROOT文件中的内容。

 

这种情况下，访问对应的项目服务方法为

http://localhost:8080/docs/apr.html

因为8080后面的内容为以部署路径（webapps）开始的相对路径

 

三.html介绍

1.HTML代表超文本标记语言。HTML是一种标记语言，它是标记标签的集合。

2.HTML文档结构至少要包括head, body两部分.如:

<html>
    <head>
        <meta charset="UTF-8">
        <title>html基础</title>
    </head>
    <body>
        <h3>Zebra</h3>
    </body>
</html>

 

3.HTML标签是由尖括号括起来的词，如 <html>， <body> 。

标签通常成对出现，例如 <html>和</html> 。也可以单个出现，如<br/>（两种写法）

四.html常见标签

1.文本标签（段落+标题）

1）.段落标签

段落标签使用p标签，是paragraph的缩写，自带换行效果。如：

<p>段落标签使用p表示,是paragraph的缩写</p> 
<p>这里就是第二段啦</p>

2）.标题标签

 标题标签h1 ~ h6 标题标签从名字就能看出,是用来定义文字标题的,包括h1-h6,数字越小对应的字体越大，如下:

<h1>我是一级标题</h1>
<h2>我是二级标题</h2> 
...
<h6>我是老六</h6>

 

2.表单标签（文本，密码，按钮，表单）

1）.文本框

单行的文本使用input标签，input标签有很多属性，如下：

  1. type ，表示文本的类型；
  2. name，表示文本的名称,后端使用name来获取框中的属性值；
  3. value，默认属性框的填充值，用户输入后显示输入的内容
  4. placeholder，文本框内容为空显示的内容（类似水印“请输入密码”）；
  5. size，文本框的长度
<input type="text" name="name" value="Zebra" placeholder="请输入姓名" size="10">

2）.密码框

密码框与文本框类似 , 区别在于type取值不同, 取值为password, 输入时候自动显示为星号,如:

<input type="password" name="password" placeholder="请填写密码">

3）. 普通按钮，一般按钮，

如下：

普通按钮<input type="button" value="登录">

4）. 提交按钮

当需要提交表单的时候，需要使用提交按钮。提交按钮需要配合form表单才能向服务器提交数据。如下：

提交按钮<input type="submit" value="提交">

5）. 表单

使用form来表示,表示提交到的服务器的信息,一般在注册或者登陆两个应用场景中使用 如下:

<form method="post" action="http://how2j.cn/study/login.jsp"> 
账号：<input type="text" name="name"> 
<br/> 
密码：<input type="password" name="password" > 
<br/> 
    <input type="submit" value="登录"> 
</form>
  • 这两个<br/表示换行>
  • action=请求路径（相对路径和绝对路径都可以，相对路径的话以当前html文件所在的文件夹为根目录的路径）

五.Maven配置web项目

1）.如何进行配置

 现在我们要配置一个web项目，那就会有前端的一些文件，但是maven的src/main/resources里面存放的文件是后端的资源文件，为此我们要建立一个文件夹存放前端的资源文件。

配置完成后，在src/main/下会多一个webapp的文件夹，用于存放前端的资源文件

 

_Zebra
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javaweb前端——HTML常用标签.pdf
04-09
Javaweb前端——HTML常用标签.pdf
JavaWeb标准标签
m0_61857264的博客
04-15 187
目录 使用web.xml设置网页首选项 双击web.xml 标准标签 包含：把别的页面的属性包含到该界面 传参：与上面一起连用 转发 相当于实例化 setproperty:给userBean属性设置 getproperty:拿userBean属性的值 login.jsp 界面 index.jsp 使用web.xml设置网页首选项 新建项目，按next，勾选Generate web.xml deployment descripor 双击web.xml ...
maven创建html项目,使用Maven创建Web项目
weixin_29297127的博客
06-11 683
使用Maven创建Web项目碧远|bystander2013-09-2010189 阅读本文通过Maven完成一个简单的Web项目(注意，Spring配置不是重点，看看就行)1.从Maven模板创建Web应用程序命令格式如下：mvn archetype:generate -DgroupId={project-packaging} -DartifactId={project-name} -Darch...
JavaWeb - 多模块maven项目---前端录入显示信息
qq_52029763的博客
05-09 1051
多模块maven项目并用git提交 一.要求 1.创建一个名为servlet_Exam的多模块maven项目, 其中有三个子模块分别为 ​ 1) 基础模块servlet_pojo ​ 2) 基础模块servlet_dao ​ 3) web模块servlet_web 2.设置其依赖关系: **servlet_web 依赖 servlet_dao** ​ servlet_dao 依赖 servlet_pojo
Maven高级.html
03-01
Maven高级.html
Javaweb期末设计项目-日记管理系统
01-05
使用场景及目标：这份资源适用于Javaweb期末设计作业，也适合用于练习适用ssm项目和vue+elementui开发的模式，从而更好的入门Javaweb这门课程，为后续学习Java或者前端做好准备。 其他说明：资源中包括：Java代码，...
毕业设计基于JavaWeb实现的一个备忘录系统项目源码.zip
06-13
毕业设计基于JavaWeb实现的一个备忘录系统项目源码。难度适中，新手自己可操作 备忘录 介绍 后端部分基于Servlet、Jdbc实现. 前端部分基于Layui、jqury实现。 一个简单的前后端分离Demo，前后端交互JSON数据格式 ...
java及javaweb编程教程、ssm、商城实战项目、how2j网站的全站教程、包含从前端到后端全栈技术
04-12
非常优秀的java及javaweb教程，how2j全站教程，包括java基础、java初级、java高级、java应用、前端技术，包括html、css、JavaScript、HTML DOM、json、ajax、jquery、bootstrap、vue.js、node.js、webpack、chartjs...
毕业设计基于JavaWeb的超市管理系统源码+开发文档，maven为项目管理工具，tomcat为web应用服务器
12-30
用IntelliJ IDEA开发工具，使用Java为开发语言，maven为项目管理工具，tomcat为web应用服务器开发了一个超市管理系统，其中前端包含最基本的html编写的网页以及bootstrap框架和少量的JS语言控制的页面提示弹窗。
SSM项目+Mysql数据库+maven Javaweb管理系统
09-20
在eclipse里部署好，tomcat和maven属性都配置好后，启动该项目就可以了。html页面会自己弹出来的：http://localhost:8080/Hospital/。页面样式在应用项目的：/Hospital/src/main/webapp/assets路径里。
【JavaWeb】从零开始：使用Maven搭建JavaWeb开发环境
山赶着山，山山漫漫结成关
12-17 563
在现代的JavaWeb开发中，Maven已经成为了一个不可或缺的构建工具和项目管理工具。它可以帮助开发者更轻松地管理依赖库、构建项目，以及管理项目的整个生命周期。本文将为您详细介绍如何使用Maven搭建JavaWeb开发环境，让您能够更高效地开展Web应用程序的开发。通过本文的步骤，您已经成功地搭建了一个JavaWeb开发环境，并学会了如何使用Maven来管理项目的构建和依赖。Maven能够使您的开发更加规范和高效，让您可以专注于业务逻辑的实现。希望您能够在这个基础上，进一步探索JavaWeb开发的奥秘！
工具类——简单的java实现发送纯文本或HTML邮件（使用spring+maven构建）
做一个善良的码农
05-12 722
本次用maven创建项目 引入maven依赖 &lt;dependency&gt; &lt;groupId&gt;javax.mail&lt;/groupId&gt; &lt;artifactId&gt;mail&lt;/artifactId&gt; &lt;version&gt;1.4.7&lt;/version&gt; &lt;/dependency&gt; 具体
html文件在JAVAweb位置,JavaWeb中的关于html、jsp、servlet下的路径问题
weixin_29611239的博客
06-05 2142
#1 前言 本文将对近期项目练习中出现的关于文件路径的问题进行分析和总结，主要涉及html页面中的href及ajax指向路径、jsp页面中href指向路径及servlet转发或重定向路径等内容，本文的分析及总结将尽量做到知其然知其所以然。注：本文中的项目练习，是通过IDEA的MAVEN插件，部署到TOMCAT完成的。**所有html、jsp页面都在webapp文件夹下，所有src中的java文件会...
Maven的介绍及使用
weixin_57244464的博客
01-10 706
就是mysql驱动包的坐标，只需要在maven项目pom.xml文件中的dependencies节点下写这段配置，其他都不需要我们担心，Maven都帮我们进行操作了，即maven会自动帮我们把所依赖的mysql驱动包下载到项目中。如上图所示我们开发了一套系统，代码需要进行编译、测试、打包、发布，这些操作如果需要反复进行就显得特别麻烦，而Maven提供了一套简单的命令来完成项目构建。Maven提供了一套标准化的项目结构，所有IDE使用Maven构建的项目完全一样，所以IDE创建的Maven项目可以通用。
JavaWeb开发 —— HTML
hdakj22的博客
04-10 1869
什么是HTML、CSS、基本标签 & 样式以及标题排版、标题样式、超链接以及正文排版、页面布局以及表格标签、表单标签和表单项标签
相对路径与绝对路径（以javaweb项目的html文件为例）
qq_46053741的博客
06-21 1366
base href="http://localhost:8080/">中的href路径表示当前文件夹中引用的所有路径以http://localhost:8080/为基本路径的基础上寻找文件。代码中src="static/script/jquery-1.7.2.js"等同于src="http://localhost:8080/static/script/jquery-1.7.2.js"。值得注意的是基础路径http://localhost:8080/必须和tomcat配置的路径保持一致。
vue源码之mustache模板引擎1
最新发布
qweasl_的博客
05-21 162
模板引擎的一个有点：它是将数据转为视图的最优雅的方法。相信vue的玩家首先想到的是。而还没学vue的朋友，就只能进行dom操作了。通过数组的join方法。以及es6推出的模板字符串。
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 673
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
【Web】CISCN 2024初赛 题解(全)
uuzeray的博客
05-21 618
这里注意细节，靶机发了两次请求，第一次我们就返回一个正常的图片，第二次请求就发一个302，php代码块要用html标签包裹。注意下面这段报错，因为加不了引号，开头是数字的话，就会将类型识别为数字，若后续出现了字符串就会报错。再打sqlite，指定tableName，加载写入的恶意so文件，反弹shell。最后注意要将获取的变量元组转字符串，再用逗号分隔，依次输出，从而绕过seed。考的python栈帧沙箱逃逸，获取到外部的栈帧，就可以用。因为ban了引号，考虑hex2bin，将数字转为字符串。
请你帮我写一个基于javaweb以及使用了maven的游戏查询系统的代码
05-29
抱歉，由于时间和篇幅限制，我无法在这里为您编写完整的代码。但是，我可以提供一些思路和参考代码，希望能对您有所帮助。 首先，您需要创建一个基于JavaWeb的Maven项目，并添加相关的依赖。这里我们可以使用SpringBoot来简化开发流程。 接下来，您需要建立数据库，并创建游戏信息表。可以使用MySQL等关系型数据库实现。 然后，您需要编写数据访问层(DAO)的代码，实现对游戏信息表的增删改查操作。这里我们可以使用MyBatis等ORM框架来简化代码。 接着，您需要编写服务层(Service)的代码，实现对游戏信息的业务逻辑处理。例如，查询游戏信息、添加游戏信息、修改游戏信息等。 最后，您需要编写控制层(Controller)的代码，实现与前端页面的交互。例如，接收用户的查询请求，调用服务层的代码进行处理，并将结果返回给前端页面。 下面是一个简单的参考代码，仅供参考： pom.xml: ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> </dependency> ``` GameMapper.java: ```java @Mapper public interface GameMapper { List<Game> getAll(); Game getById(int id); void insert(Game game); void update(Game game); void delete(int id); } ``` GameService.java: ```java @Service public class GameService { @Autowired private GameMapper gameMapper; public List<Game> getAll() { return gameMapper.getAll(); } public Game getById(int id) { return gameMapper.getById(id); } public void insert(Game game) { gameMapper.insert(game); } public void update(Game game) { gameMapper.update(game); } public void delete(int id) { gameMapper.delete(id); } } ``` GameController.java: ```java @RestController @RequestMapping("/games") public class GameController { @Autowired private GameService gameService; @GetMapping("/") public List<Game> getAll() { return gameService.getAll(); } @GetMapping("/{id}") public Game getById(@PathVariable int id) { return gameService.getById(id); } @PostMapping("/") public void insert(@RequestBody Game game) { gameService.insert(game); } @PutMapping("/{id}") public void update(@PathVariable int id, @RequestBody Game game) { game.setId(id); gameService.update(game); } @DeleteMapping("/{id}") public void delete(@PathVariable int id) { gameService.delete(id); } } ``` 以上代码仅是一个简单的示例，实际的项目中还需要考虑很多其他因素，例如数据校验、异常处理等。希望对您有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值