使用IDEA学习JSP代码第003课

最新推荐文章于 2023-09-20 13:56:23 发布
最新推荐文章于 2023-09-20 13:56:23 发布
阅读量192 收藏
点赞数
分类专栏： Java 文章标签： 学习 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/modern358/article/details/125192361
版权

new331.jsp


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../other/boot/css/bootstrap.min.css">
    <script type="text/javascript" src="../other/jQuery/jQuery-3.4.1.js"></script>
    <script type="text/javascript" src="../other/boot/js/bootstrap.min.js"></script>
    <style rel="stylesheet">
        [class*="col-"]{
            border: 1px solid red;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul>
            <li>无序列表</li>
            <li>无序列表</li>
            <li>无序列表</li>
            <li>无序列表</li>
        </ul>
        <ol>
            <li>有序列表</li>
            <li>有序列表</li>
            <li>有序列表</li>
            <li>有序列表</li>
        </ol>
        <ul class="list-unstyled">
            <li>无样式列表list-unstyled</li>
            <li>无样式列表list-unstyled</li>
            <li>无样式列表list-unstyled</li>
            <li>无样式列表list-unstyled</li>
        </ul>
        <ul class="list-inline">
            <li>内联列表list-inline</li>
            <li>内联列表list-inline</li>
            <li>内联列表list-inline</li>
            <li>内联列表list-inline</li>
        </ul>
        <hr>
        <dl>
            <dt>描述</dt>
            <dd>说明</dd>
        </dl>
        <dl class="dl-horizontal">
            <dt>横向描述dl-horizontal</dt>
            <dd>横向说明dl-horizontal</dd>
        </dl>
        <hr>
        <p>内联代码使用code，比如<code>&lt;div&gt;</code>是一个标签</p>
        <p>使用kbd，可以显示一个突出的颜色，比如<kbd>需要突出显示的部分</kbd></p>
        <pre>
            我们知道使用pre，可以完整的显示代码的样式。
            比如
            <ul>
                <li>无序列表</li>
                <li>无序列表</li>
                <li>无序列表</li>
                <li>无序列表</li>
            </ul>
        </pre>
        <p>使用var标记，可以显示变量，比如：<var>a</var> + <var>b</var> = <var>c</var>,没有加标记的 a + b = c</p>
        <samp>使用samp，可以显示为输出的文字。abcdefg</samp>
    </div>
</body>
</html>

new332.jsp


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../other/boot/css/bootstrap.min.css">
    <script type="text/javascript" src="../other/jQuery/jQuery-3.4.1.js"></script>
    <script type="text/javascript" src="../other/boot/js/bootstrap.min.js"></script>
    <style rel="stylesheet">
        [class*="col-"]{
            border: 1px solid red;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <table>
        <tr>
            <th>无样式表格</th>
            <th>无样式表格</th>
            <th>无样式表格</th>
            <th>无样式表格</th>
        </tr>
        <tr>
            <td>空格</td>
            <td>空格</td>
            <td>空格</td>
            <td>空格</td>
        </tr>
        <tr>
            <td>空格</td>
            <td>空格</td>
            <td>空格</td>
            <td>空格</td>
        </tr>
        <tr>
            <td>空格</td>
            <td>空格</td>
            <td>空格</td>
            <td>空格</td>
        </tr>
    </table>
    <br>
    <table class="table">
        <tr>
            <th>table样式表格</th>
            <th>table样式表格</th>
            <th>table样式表格</th>
            <th>table样式表格</th>
        </tr>
        <tr>
            <td>有table样式的</td>
            <td>空格</td>
            <td>空格</td>
            <td>空格</td>
        </tr>
        <tr>
            <td>空格</td>
            <td>空格</td>
            <td>空格</td>
            <td>空格</td>
        </tr>
        <tr>
            <td>空格</td>
            <td>空格</td>
            <td>空格</td>
            <td>空格</td>
        </tr>
    </table>
    <br>
    <table class="table table-striped">
        <tr>
            <th>table table-striped样式表格</th>
            <th>table table-striped样式表格</th>
            <th>table table-striped样式表格</th>
            <th>table table-striped样式表格</th>
        </tr>
        <tr>
            <td>有隔行变色，俗称斑马条</td>
            <td>空格</td>
            <td>空格</td>
            <td>空格</td>
        </tr>
        <tr>
            <td>空格</td>
            <td>空格</td>
            <td>空格</td>
            <td>空格</td>
        </tr>
        <tr>
            <td>空格</td>
            <td>空格</td>
            <td>空格</td>
            <td>空格</td>
        </tr>
    </table>
    <br>
    <table class="table table-striped table-bordered">
        <tr>
            <th>table table-striped table-bordered样式表格</th>
            <th>table table-striped table-bordered样式表格</th>
            <th>table table-striped table-bordered样式表格</th>
            <th>table table-striped table-bordered样式表格</th>
        </tr>
        <tr>
            <td>有边框的</td>
            <td>空格</td>
            <td>空格</td>
            <td>空格</td>
        </tr>
        <tr>
            <td>空格</td>
            <td>空格</td>
            <td>空格</td>
            <td>空格</td>
        </tr>
        <tr>
            <td>空格</td>
            <td>空格</td>
            <td>空格</td>
            <td>空格</td>
        </tr>
    </table>
    <br>
    <table class="table table-striped table-bordered table-hover">
        <tr>
            <th>table-hover 样式表格</th>
            <th>table-hover 样式表格</th>
            <th>table-hover 样式表格</th>
            <th>table-hover 样式表格</th>
        </tr>
        <tr>
            <td>鼠标悬停，行变色的</td>
            <td>空格</td>
            <td>空格</td>
            <td>空格</td>
        </tr>
        <tr>
            <td>空格</td>
            <td>空格</td>
            <td>空格</td>
            <td>空格</td>
        </tr>
        <tr>
            <td>空格</td>
            <td>空格</td>
            <td>空格</td>
            <td>空格</td>
        </tr>
    </table>
    <br>
    <table class="table table-striped table-bordered table-hover table-condensed">
        <tr>
            <th>table-condensed 样式表格</th>
            <th>table-condensed 样式表格</th>
            <th>table-condensed 样式表格</th>
            <th>table-condensed 样式表格</th>
        </tr>
        <tr>
            <td>表格行紧缩的</td>
            <td>空格</td>
            <td>空格</td>
            <td>空格</td>
        </tr>
        <tr>
            <td>空格</td>
            <td>空格</td>
            <td>空格</td>
            <td>空格</td>
        </tr>
        <tr>
            <td>空格</td>
            <td>空格</td>
            <td>空格</td>
            <td>空格</td>
        </tr>
    </table>
    <br>
    <table class="table ">
        <tr class="active">
            <td>active</td>
            <td>active</td>
            <td>active</td>
            <td>active</td>
        </tr>
        <tr class="success">
            <td>success</td>
            <td>success</td>
            <td>success</td>
            <td>success</td>
        </tr>
        <tr class="info">
            <td>info</td>
            <td>info</td>
            <td>info</td>
            <td>info</td>
        </tr>
        <tr class="warning">
            <td>warning</td>
            <td>warning</td>
            <td>warning</td>
            <td>warning</td>
        </tr>
        <tr class="danger">
            <td>danger</td>
            <td>danger</td>
            <td>danger</td>
            <td>danger</td>
        </tr>
    </table>
    <div class="table-responsive" style="width: 500px;border: 1px red solid">
        <table class="table">
            <tr>
                <th>序号</th>
                <th>列名称</th>
                <th>列名称</th>
                <th>列名称</th>
            </tr>
            <tr>
                <td>充满了内容..........................................</td>
                <td>充满了内容..........................................</td>
                <td>充满了内容..........................................</td>
                <td>充满了内容..........................................</td>
            </tr>
            <tr>
                <td>充满了内容..........................................</td>
                <td>充满了内容..........................................</td>
                <td>充满了内容..........................................</td>
                <td>充满了内容..........................................</td>
            </tr>
            <tr>
                <td>充满了内容..........................................</td>
                <td>充满了内容..........................................</td>
                <td>充满了内容..........................................</td>
                <td>充满了内容..........................................</td>
            </tr>
            <tr>
                <td>充满了内容..........................................</td>
                <td>充满了内容..........................................</td>
                <td>充满了内容..........................................</td>
                <td>充满了内容..........................................</td>
            </tr>
        </table>
    </div>
</div>
<br>

</body>
</html>

虾米大王
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
解决IDEA JSP没有代码提示问题的几种方法
10-16
主要介绍了解决IDEA JSP没有代码提示问题的几种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
使用IDEA学习JSP代码第008课
虾米大王的学习历程
06-16 149
new341.jsp new342.jsp
使用IDEA学习JSP代码第025课
虾米大王的学习历程
08-05 100
代码】使用IDEA学习JSP代码第025课。
使用IDEA学习JSP代码第007课
虾米大王的学习历程
06-15 115
new339.jsp new340.jsp
JSP入门及idea上配置tomcat
HJY
11-30 736
之前配置好tomcat以后就可以开始写第一个网页了 首先我们来到tomcat目录下的WebApps文件，这里是放项目的地方，创建一个文件夹，比如我创建一个myhome，这个目录下有一个examples是tomcat自带的一个例子，可以参照里面的结构进行创建，首先在myhome里面创建一个WEB-INF文件夹，同时在myhome目录下创建一个jsp文件，我用的是dw，然后随便写点你想要写的东西（这
java代码-软三47JSP3
07-14
【描述】虽然描述信息非常简洁，但我们可以推测这是针对软件工程第三年的课程内容，可能涵盖了JSP的进阶概念和实践应用。在大学的软件工程课程中，学生通常会在第三年接触到更复杂的技术，如JSP，用于构建Web应用...
JSP应用开发详解第三版源代码
11-24
"JSP应用开发详解第三版源代码"这一文件名表明，读者可以获取到书中所有示例和实例的源代码。这些源码覆盖了从基础的JSP语法到高级的Servlet、JSP EL（Expression Language）、JSP自定义标签、MVC设计模式、JDBC...
[JSP&Servlet;学习笔记(第2版)]
04-06
**JSP（Java Server Pages）与Servlet...这个**[JSP&Servlet学习笔记(第2版)]**会涵盖这些主题，并可能包括示例代码、最佳实践和常见问题解答，帮助读者全面掌握JSP和Servlet的使用技巧，进一步提升Java Web开发能力。
JSP网上拍卖平台系统设计(源代码+论文).rar
最新发布
04-11
系统应集成第三方支付接口，如支付宝或微信支付，确保交易安全。 5. **评价模块**：用户可以对交易进行评价，提升平台的信誉度。 **技术实现** 1. **JSP技术**：使用JSP的内置对象（如request、response、session...
JSP大学实用教程程序源代码.doc
03-30
JSP大学实用教程程序源代码 JSP（Java Server Pages）是一种基于Java技术的服务器端脚本语言，主要用于开发基于Web的动态应用程序。JSP技术可以将静态的HTML页面和动态的Java代码结合起来，生成动态的Web页面。 ...
使用IDEA学习JSP代码第026课
虾米大王的学习历程
08-07 84
代码】使用IDEA学习JSP代码第026课。
使用IDEA学习JSP代码第018课
虾米大王的学习历程
07-19 97
代码】使用IDEA学习JSP代码第018课。
使用IDEA学习JSP代码第006课
虾米大王的学习历程
06-14 103
new337.jsp new338.jsp
使用IDEA学习JSP代码第004课
虾米大王的学习历程
06-12 107
new333.jsp new334.jsp
IDEA中向JSP页面添加css和js引用路径的问题
u014650759的专栏
10-16 1万+
现在有一个项目，用到了第三方的js和css插件，需要引用到我们的jsp页面，项目结构大致如下 如果直接采用下面的方式，将无法引用成功，导致页面效果无法实现。 <link title="blue" type="text/css" rel="alternate stylesheet" href="/css/common/weui.min.css"> <script type="...
准备我们心爱的IDEA写Jsp
m0_74154295的博客
09-20 1062
JSP全称Java Server Pages，是一种动态网页开发技术。它使用JSP标签在HTML网页中插入Java代码。标签通常以结束。 JSP是一种Java servlet，主要用于实现Java web应用程序的用户界面部分。网页开发者们通过结合HTML代码、XHTML代码、XML元素以及嵌入JSP操作和命令来编写JSP。 JSP通过网页表单获取用户输入数据、访问数据库及其他数据源，然后动态地创建网页。 JSP标签有多种功能，比如访问数据库、记录用户选择信息、访问JavaBeans组件
Intellij IDEA 关于jsp中找不到css样式，jsp中css样式的效果不能显示（已解决）
热门推荐
qq_40573403的博客
10-23 1万+
这段时间在做“毕设”，前端模板是在网上找的，应用到我的项目中，能显示效果，但是只要我一改java代码，就报错了。 这里就跟大家分享一下我的经验： jsp中css样式的效果不能显示，然后自己的路径啥的都没有问题，这就奇怪了，后来才发现是web.xml文件的配置出问题，我想应该是路径被拦截了，就尝试着改了一下&lt;servlet-mapping&gt;，没想到成功了！ 具体代码如下：   ...
【jsp新手入门】idea+MySQL+tomcat案例完整代码
xjj1128的博客
10-25 2212
代表servlet程序回传html页面的数据。 jsp页面本质上就是一个servlet程序。 当我们第一次访问jsp页面，tomcat服务器会将页面进行翻译成为.java文件，将它进行翻译成.class文件。
idea编写jsp出现http404
09-22
3. 缺少依赖库和配置文件：如果JSP页面中引用了第三方库或配置文件，确保这些依赖项在正确的位置，并在服务器中进行了正确的配置。 4. 编译错误：如果JSP文件中存在错误的Java代码或表达式，编译过程可能会失败，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

虾米大王

有你的支持，我会更有动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值