2.4-使用idea开发javaWeb应用程序-1（前端页面）

最新推荐文章于 2025-04-11 09:30:00 发布

如沐春风细雨中

最新推荐文章于 2025-04-11 09:30:00 发布

阅读量1.3w

点赞数 17

分类专栏：开发-测试技术基础知识培训

本文链接：https://blog.youkuaiyun.com/lovelyruiju/article/details/112095060

版权

使用idea开发javaWeb应用程序-编写前端页面

回到第一章：目录

文章目录

使用idea开发javaWeb应用程序-编写前端页面
前言
一、新建index.html

前言

上一节搭建了idea+maven+tomcat的java web开发环境，创建了一个webapp模板工程：FirstJavaWeb
这节将在此基础上，编写3个静态页面，并实现页面的一些效果和跳转：
index.html 用 html4编写
login.html 用html5 编写
main.jsp 用jsp页面编写

工程结构如下：
在这里插入图片描述

一、新建index.html

1、在webapp目录上点右键，new - HTML File，选html4，输入名字index。

在这里插入图片描述
2、代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- html的头部-->
<head>

    <title>我的第一个网站</title><!-- 网页标题-->
    <meta charset="utf-8"><!-- 编码格式-->
    <link rel="stylesheet" type="text/css" href="css/my.css"><!-- 引入样式文件-->
</head>
<!-- html的body部分-->
<body>
<div id="main-container" >  <!-- 最外层div区域-->
    <div id="div-header" >  <!-- 用于显示头部的div区域-->
        <h3 style="margin-bottom:0;">欢迎进入我的网站</h3>
        </hr>
        <p>
            天将降大任于斯人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。——孟子
        </p>
    </div>

    <div id="div-content" >  <!-- 用于显示图片和内容的区域-->
        <img src="./pics/pic0.jpg" alt="" class="main-img">
        </br>
        <hr>
        <button id="enterButton" onclick="toJsp()">登录入口</button>
    </div>

最低0.47元/天解锁文章