jsp学习笔记

最新推荐文章于 2023-03-25 09:38:10 发布
最新推荐文章于 2023-03-25 09:38:10 发布
阅读量1k 收藏 2
点赞数
文章标签： 学习 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SmileJayNew/article/details/119682328
版权

文章目录

JSP+IDEA2021.2学习

1.网页的结构

内容：在网页中可以看到的数据，所有的文字、图片等等。使用HTML实现

表现：在页面上的展示形式，布局、颜色、大小等等。使用CSS实现

行为：页面中的元素与输入设备的交互响应。通过JavaScript实现

2. HTML

2.1HTML简介

HTML全称为：Hyper Text Markup Language(超文本标记语言)

通过**标签来标记要显示的网页中的各个部分。网页文件本身是一种文本**文件，通过在文本文件中添加标记符，可以高速浏览器如何显示其中的内容，如文字如何处理，画面如何安排，图片如何显示等。

2.2HTML格式

<!DOCTYPE html> 			<!--约束，声明-->
<html lang="en"> 			<!-- html标签-->
<head> 						<!--表示头部信息-->
    <meta charset="UTF-8">	<!--表示当前页面使用的字符集 UTF-8-->
    <title>Smile</title>	<!--标题，页面名称-->
</head>
<body>						<!--整个HTML页面显示的主体内容-->
初识HTML
</body>
</html>

2.3HTML标签

2.3.1HTML标签简介
  1. 标签的格式

<标签名>

封装的数据

</标签名>

  1. 标签名，大小写**不敏感**

  2. 标签有自己的属性

    ​ 基本属性：bgcolor = “red” 可以修改简单的样式效果

    ​ 事件属性：onclick = “alert(‘你好！’)” 可以直接设置事件响应后的效果

  3. 标签的分类
    单标签：<标签名/> 换行(br)、水平线(hr)等

    ​ 双标签：<标签名>…封装的数据…</标签名>

2.3.2HTML标签语法
  1. 标签不能交叉嵌套
  2. 标签必须正确闭合(双标签成对出现！)
  3. 属性必须要有值
  4. 注释不能嵌套

2.4常用标签

2.4.1 字体设置 font

可以设置字体的颜色，类型，字号

可选属性：

​ 固有属性：color, face, size

​ 事件属性：null

<font color="#a52a2a" size="7" face="宋体">
    听说你很猛？
</font>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-scgu5PKV-1628852457276)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210809145935476.png)]

2.4.2 按钮添加 button
<body bgcolor="#7fffd4">
hello
<button onclick="alert('爬')">莫挨老子</button>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zJz4JGBQ-1628852457281)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210809143708111.png)]

2.4.3 标题添加 h

添加标题

可选属性：

​ 固有属性：align(对齐) = “left(默认) / center / right”

​ color, face, size

<h1>标题内容</h1>

…

<h6>标题内容</h6>

2.4.4 超链接添加 a

注：当连接为外部链接时，要带上前缀协议http。

可选属性：

​ 事件属性：target = “__self(在当前页面打开) / blank(新建窗口打开)”

<a href="http://www.baidu.com" target="_blank">谷歌首页</a>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MdkHHMSS-1628852457282)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210809152307762.png "alt = “image-20210809152307762.png " style = " zoom 200%”)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ftL3xaxs-1628852457283)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210809152940329.png)]

当超链接遇到图片，就变成了，广告！西八儿

<a href="http://www.baidu.com" target="_blank"><img src="src/images.jpg"/></a>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DeTBiIeA-1628852457284)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210809165235008.png)]

点进去以后，直接打开porn，不，打开百度页面

2.4.5 列表生成
2.4.5.1无序列表 ul
<ul>
    <li>尼古拉斯狗蛋</li>
    <li>尼古拉斯？？</li>
    <li>尼古拉斯？！</li>
</ul>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-POuHUPMT-1628852457285)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210809153455323.png)]

2.4.5.2有序列表 ol

可选属性：

​ 固有属性：type(符号类型 )

<ol> <!--可以修改序号类型-->
    <li>尼古拉斯狗蛋</li>
    <li>尼古拉斯？？</li>
    <li>尼古拉斯？！</li>
</ol>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SJOVNQxS-1628852457286)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210809153605283.png)]

2.4.6换行与添加水平线 br, hr

注：< hr/ >默认在下一行加水平线，同时起点移到开头

hello<br/>我好困<hr/>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iv9Izx5i-1628852457286)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210809144235452.png)]

2.4.7添加图片 IMG

属性：

​ 固有属性：

​ src：设置图片的路径

​ width：设置图片宽度

​ height：设置图片高度

​ border：添加边框 单位：像素

​ 事件属性：

​ alt：当图片找不到时，替换为后面的内容

<img src="../src/1.jpg" alt = "图我偷了，不给你看！"/>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3p3HQdMh-1628852457287)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210809160207792.png)]

JaveSE中的路径：

​ 相对路径：从工程名开始

​ 绝对路径：盘符：/目录/文件名

web中的路径：

​ 相对路径

​ . 表示当前文件所在的目录

​ … 表示当前文件所在的上一级目录

​ 文件名 表示当前文件所在目录的文件

​ 绝对路径

​ http://ip:port/工程名/资源路径

<img src="../src/images.jpg"/>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xqXLpPtn-1628852457288)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210809155153621.png)]

2.4.8表格生成 table

table固有属性：

​ alain: 对齐方式

​ border：边框

​ cellspacing：单元格之间的间距

​ width, weight

行标签：tr

​ tr固有属性：

​ colspan：跨列

​ rowspan：跨行

​

单元格标签：td

加粗标签：b

​ td固有属性

​ align

表头：th

<table width="400" height = "300" border = "1" cellspacing="0">
    <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
        <td>1.4</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td rowspan="2">2.2</td>
        <td colspan="2">2.3</td>
    </tr>
    <tr>
        <td>3.1</td>
        <th>3.2</t>
        <td>3.3</td>
    </tr>
</table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c0CTZ54W-1628852457288)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210809163831674.png)]

2.4.9画中画 iframe

可以在页面中开辟一个小区域，用来显示一个单独页面。

固有属性：

​ src, width, height

​ name：定义页面访问名称

这是第一个页面噢！<br/>
第二个页面在下面！<hr/>
<iframe src = "Tutorial2.html" width="310" height="200" frameborder="0"/>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WJDznn5L-1628852457290)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210809165715475.png)]

注：套娃操作

<body>
这是第一个页面噢！<br/>
第二个页面在下面！<hr/>
<iframe src = "Tutorial2.html" width="310" height="200" frameborder="0" name="TKWA"></iframe>
<br/>
新页面来咯！
<br/>
<a href="Tutorial1.html" target="TKWA" >套娃开始！！！</a>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VZonwnHy-1628852457290)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210809170846886.png)]

2.4.10表单生成 form

表单就是html页面中用来收集用户数据的部分，然后浏览器将这些数据发送到服务器

form固有属性：

​ action：属性设置提交的服务器地址

​ method：属性设置提交的方式get(默认)或post

注：表单提交内容缺失的原因

		1. 只提交有<font color = "red">name</font>属性的项，查看是否有忘了写name的
		2. 单选、复选、下拉列表中的option，需要先赋值，这样发送的信息为所赋的值，而不是on(已选)
		3. 只提交form标签内的内容

GET请求的特点：

  1. 浏览器地址栏中的地址是：action属性(+ ？+请求参数)

​ 请求参数的格式是：name = value&name = value

  1. 不安全，参数在浏览器地址栏可以看到
  2. 数据长度的限制，100个字符

POST请求的特点：

  1. 浏览器地址栏中只有action属性值，即只有服务器地址

  2. 相对于GET请求，更安全

  3. 理论上没有数据长度的限制

标签(表单项)：

​ 1. input 文本输入框

​ input固有属性：

​ type：输入值的类型

​ 参数：type = “password” 输入直接就是*

​ type = “text”

​ type = “radio” 同组内单选项，注：需要提前用name属性进行分组

​ type = “checkbox” 多选

​ type = "reset"重置之前的内容为默认值

​ type = "submit"提交

​ type = "button"添加按钮

​ type = “file” 提交文件

​ type = "hidden"隐藏域 当需要发送某些信息，而不需要用户参与时，则使用隐藏域

​ value：默认值

​ maxlength：数据最大长度

​ name：分组

​ checked：默认

  1. select：下拉项

​ select固有属性：

​ selected：默认

  1. textarea：多行文本输入框

​ textarea固有属性：

​ rows：设置显示几行

​ cols：设置显示几列

表单格式化：加table

​

<body>
<h1 align="center">用户注册</h1>
<table align="right">
    <tr>
        <td>用户名：</td>
        <td><input type="text"/></td>
    </tr>
    <tr>
        <td>密码：</td>
        <td><input type="password"/></td>
    </tr>
    <tr>
        <td>确认密码：</td>
        <td><input type="password"/></td>
    </tr>
    <tr>
        <td>手机号：</td>
        <td><input type="tel"/></td>
    </tr>
    <tr>
        <td>性别：</td>
        <td>
            <input type="radio" name="sex" /> 男
        </td>
        <td>
            <input type="radio" name="sex" /> 女
        </td>
    </tr>
    <tr>
        <td>如何得知这个机构的：</td>
        <td>
            <input type="checkbox" /> 朋友介绍
        </td>
        <td>
            <input type="checkbox" /> 听讲座知道的
        </td>
        <td>
            <input type="checkbox" /> 看到街边的广告知道的
        </td>
    </tr>
    <tr>
        <td>自我介绍：</td>
        <td>
            <textarea rows="5" cols="20"></textarea>
        </td>
    </tr>
    <tr>
        <td><input type="reset"/></td>
        <td align="right">
            <input type="submit" />
        </td>
    </tr>

</table>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Dewx7bwE-1628852457291)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210809181634347.png)]

2.4.11 文本文字的格式 div、span、p标签

div标签 默认一个标签就是一行

span标签 默认一个标签跟一个空格

p标签 默认会在段落的上方或下方各空出一行

3.CSS技术

3.1 CSS简介

CSS是层叠样式表单，用于增强控制网页样式，并允许将 样式与网页内容分离的一种标记性语言。

3.2 CSS语法规则

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h1fJNeJs-1628852457291)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210810082255058.png)]

选择器：浏览器根据选择器决定受CCS样式影响的HTML元素（标签）

属性：需要改变的样式名，属性与值用冒号"：“隔开，并用花括号”{}"包围；

​ 若定义不止一个声明，则需要用分号将每个声明分开。

3.3 HTML结合CSS

3.3.1 第一种：加键值对

在标签的style属性上设置键值对

<td style = "border: 1px solid #ff0000">用户名：</td>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HTKMwBlu-1628852457292)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210810085933985.png)]

3.3.2 第二种：在head标签中定义需要的css格式

注：head标签下语言为CSS语言，不是HTML语言！

注：在head标签下，修改后，所有的标签都会改变。

注：在单个标签设置的样式优先级更高！

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        td{border: 1px solid red}
    </style>
</head>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mpBz6irP-1628852457292)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210810091218955.png)]

3.3.3 第三种：将css样式写成单独的css文件

link标签可以引入css样式文件

<link rel="stylesheet" type="text/css" href="src/1.css">

3.4 CSS选择器

3.4.1 标签名选择器

标签名选择器格式：

​ 标签名{

​ 属性：属性值；

​ }

可以确定哪些标签使用这些样式

3.4.2 id选择器

注：id 不受标签名的影响，可以跨标签名进行同类设置

id选择器格式：

​ #id 属性值{

​ 属性：属性值；

​ }

3.4.3 class选择器

class选择器格式：

​ .class 属性值{

​ 属性：属性值；

}

3.4.4 id选择器与class选择器的使用

摘自 @theusProme CSS ID选择器与类选择器的区别

id选择器与class选择器类似，也都可以任意使用。

但是id选择器原则上，只能使用一次，而class不限制使用次数。

工程上，

​ id选择器留给写js的人用

​ class选择器用来写css

3.4.5 组合选择器

组合选择器的格式：

​ 选择器 1，选择器 2，… ，{

​ 属性：属性值；

}

可以让多个选择器共享一个格式

4.JavaScript语言

4.1 JavaScript简介

JavaScript主要是完成页面的数据验证，因此运行在客户端，需要浏览器来解析执行JavaScript代码。

JS是Netscape网景公司的产品，最早取名为LiveScript，为了吸引更多的java程序员，更名为JavaScript

JS是弱类型，类型可变

弱类型Java是强类型，在定义变量的时候，类型已确定且不可变

特点：

1. 交互性（可以做的就是信息的动态交互）
2. 安全性（不允许直接访问本地磁盘）
3. 跨平台性（只要是可以解释JS的浏览器都可以执行，与平台无关）

4.2 JavaScript结合HTML

4.2.1 第一种方式：script标签

在head或body标签中，使用script标签来书写JavaScript代码

<script type="text/javascript">
    //alert 提供警告框函数
    alert("hello,javascript!");
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3Y7sZ6Sh-1628852457293)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210810112144855.png)]

4.2.2 第二种方式：引入.js文件

在head或body标签中，使用script标签引入js文件来书写JavaScript代码

<script type="text/javascript" src ="hello.js"></script>

注：一个script标签，引入js文件或建立js域只能二选一

4.3 变量

4.3.1 变量类型

数值类型： number

字符串类型： string

对象类型： object

布尔类型： boolean

函数类型： function

4.3.2 特殊值

undefined 未定义（所有js变量未赋初始值的时候，默认为undefined）

null 空值（）

NAN 非数值（全称Not A Number）

4.3.3 变量的定义

var 变量名；

var 变量名 = 初值；

4.4 运算

4.4.1 关系运算

除常规运算符以外，还有

​ == 字面匹配

​ === 全匹配

<script type="text/javascript">
    var i1 = "123";
    var i2 = 123;
    alert(i1 == i2);
    alert(i1 === i2);
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fFuL1EdO-1628852457293)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210810161609095.png)]

第一个为字面匹配，一个字符型的 i1 一个是数值型的 i2，字面匹配为true

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RuJhj6hE-1628852457293)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210810161614015.png)]

第二个为全匹配，由于一个是字符型，一个是数值型，因此为false

4.4.2 逻辑运算

注：所有类型均可当做布尔型，其中0、null、空串、undefined均为假

空串：var i = “” 不能有空格

与运算：&&

​ 当表达式全为真，返回最后一个表达式的值

​ 当表达式中有一个为假，返回第一个为假的表达式的值

<script type="text/javascript">
    var i1 = "123";
    var i2 = true;
    alert(i1 && i2);
    alert(i2 && i1);
</script>

​ 第一个返回：true

​ 第二个返回：123

或运算： ||

​ 当表达式全为假时，返回最后一个表达式的值

​ 当表达式有一个为真，则返回第一个为真的表达式的值

取反运算： |

4.5 数组

注：数组中的可以包含多种类型

注：可以通过下标完成对数组的扩容（随时可以对数组元素进行添加）

​ 注：仅限于赋值操作

注：未赋值的数组元素为undefined

var 数组名 = []； 空数组

var 数组名 = {}； 带初值的数组

4.6 函数

注：必须调用才能执行！

注：含参函数无需指明参数类型

注：返回值无需设定，直接用return就可以

注：js中函数无法重载，会直接完成函数的覆盖

4.6.1 函数的定义方式

第一种定义格式：

​ function 函数名(形参){

​ 函数体

​ }

第二种定义格式：

​ var 函数名 = function(形参){

​ 函数体

​ }

4.6.2 arguments 隐形参数(只在function函数内)

在function函数中，无需定义，但是可以获取所有参数的变量。

js中的隐形参数，与java基础的可变长参数一样，操作类似数组

作用：在没有规定个数的函数中，实现对参数的处理。

​ 如：在不规定输入参数个数的情况下，求和并返回

<script type="text/javascript">
    function test(){
        alert("无参函数test()调用")
        alert(arguments.length);
        alert(arguments[0]);
        alert(arguments[1]);
        alert(arguments[2]);
    }
    test(1,"smile",true);
</script>

在网页中，依次输出： 无参函数test()调用 3 1 smile true

4.7 自定义对象

4.7.1 Object形式的对象

定义格式：

​ var 变量名 = new Object()； 实例化一个空对象

​ 变量名.属性名 = 属性值； 定义一个属性

​ 变量名.函数名 = function(参数){函数体} 定义一个方法(函数)

访问格式：

​ 变量名.属性名

​ 变量名.方法(参数)

<script type="text/javascript">
    var obj = new Object();
    obj.name = "赵日天";
    obj.age = 21;
    obj.fun = function (){
        alert("姓名：" + this.name + "，年龄：" + this.age);
    }
    obj.sum = function (a,b){
        var result;
        result = a+b;
        alert("result的结果为：" + result);
    }

    obj.fun();
    obj.sum(13,29);
</script>
4.7.2 {}形式的对象

注：不同属性或函数之间用逗号"，"隔开，最后一个不加

定义格式：

​ var 变量名 = {

​ 属性名：值，

​ 函数名：function(形参){函数体}

​ 属性名：值

​ }；

访问格式：

​ 变量名.属性名

​ 变量名.函数名(形参)

4.8 事件

定义：电脑输入设备与页面进行交互的响应

4.8.1 事件的注册

事件注册(绑定)：告诉浏览器，当事件响应后，要执行那些操作。

4.8.1.1 静态注册

通过HTML标签的事件属性直接赋予事件响应后的代码

4.8.1.2动态注册

先通过js代码得到标签的dom对象，然后在通过dom对象.事件名 = function(){}这种形式赋予事件响应后的代码

基本步骤：

1. 获取标签对象
2. 赋予事件响应
4.8.2 onload事件

浏览器页面解析完成(即，页面的文字、样式已经出现)之后，自动触发该事件。

4.8.2.1 onload事件静态注册

注：一般在静态注册时，只写一个方法，增加可读性。

注：提前将所有需要调用的方法在head中写完，再直接调用该方法

<body onload="alert('静态注册onload事件')"></body>
4.8.2.2 onload事件动态注册

固定格式：

​ window.onload = function(形参){

​ 函数体

​ }

4.8.3 onclick事件

鼠标单击响应

4.8.3.1 onclick事件静态注册
<head>
    <script type="text/javascript">
        function onclickfun(){alert("静态注册成功");}
    </script>
</head>    
<body>
    <button onclick="onclickfun()">点点你试试</button>
</body>
4.8.3.2 onclick事件动态注册

注：小心方法重载，由于js无法重载，所以会直接覆盖之前的方法！

​ 固定格式：

​ window.onload = function(){

​ var 标签对象名 = document.getElementById = (“标签的id”)

​ 标签对象名.onclick = function(形参){函数体}

​ }

<head>		
    
    </head>
    <script type = "text/javascript">
        window.onload = function (){
    	var btnObj = document.getElementById("btn01");
   		btnObj.onclick = function (){alert("动态注册成功");}
		}
    </script>
</head>  
<body>  <!--如果改为<body οnlοad="alert('静态注册onload事件')" 则点击按钮无效-->
    <button id="btn01">别点我</button>
</body>
4.8.4 onblur(失去焦点)事件

常用于输入框离开后验证其输入内容是否合法

返回验证提示效果

4.8.4.1 onblur事件静态注册
<head>
    <script type="text/javascript">
    function onblurfun(){
        console.log("静态事件失去焦点事件"); //console为控制台对象，log为控制台输出方法
    }
</script>
</head>
<body>
    密码：<input type="password" onblur="onblurfun()"/>
</body>
4.8.4.2 onblur事件动态注册
<head>
    <script type="text/javascript">
    function onblurfun(){
        console.log("静态事件失去焦点事件");
    }
    window.onload = function() {
        var psdObj = document.getElementById("psd");
        psdObj.onblur = function () {
            console.log("输出了");
        }
    }
</script>
</head>

<body>
密码：<input  type="password" id="psd" />
</body>
4.8.5 onchange事件

常用于下拉列表。

当列表内容改变时，触发事件

4.8.5.1 onchange事件静态注册
<head> 
        <script type="text/javascript">
            function onchangefun(){
                alert("changed!")
            }
        </script>

</head>
<body>
你的职业是：
<select onchange="onchangefun()">
    <option>学生</option>
    <option>教师</option>
    <option>建筑师</option>
</select>

</body>
4.8.5.2 onchange事件动态注册
<head>
    <script type="text/javascript">
            window.onload = function (){
                var onchangeObj = document.getElementById("change");
                onchangeObj.onchange = function (){
                    alert("Something has changed.")
                }
            }
        </script>
</head>

<body>
	你的职业是：
<select id="change">
    <option>学生</option>
    <option>教师</option>
    <option>建筑师</option>
</select>    
</body>
4.8.6 onsubmit事件

常用于表单提交前，验证表单内容是否合法

先调用，再提交！

注：onsubmit = “return false” 可以阻止表单提交

4.8.6.1 onsubmit事件静态注册
<head> 
        <script type="text/javascript">
            function onsubmitfun(){
                alert("静态表单提交事件！");
                // 将return false填在这里，可以阻止不合法表单
            }
        </script>
</head>
<body>
    <form action="http://localhost:8085" method="get" onsubmit="onsubmitfun()">
<!-->
	<form action="http://localhost:8085" method="get" οnsubmit="onsubmitfun()">
	可以阻止不合法表单的提交
<-->
        <input type="submit" value="静态注册"/>
    </form>
</body>
4.8.6.2 onsubmit事件动态注册
<head> 
        <script type="text/javascript">
           window.onload = function (){
                var submitObj = document.getElementById("form1");
                submitObj.onsubmit = function (){
                    return false;
                }
            }
        </script>

</head>
<body>
    <form action="http://localhost:8085" method="get" id="form1">
        <input type="submit" value="动态注册"/>
    </form>
</body>
4.8.7 事件的注册——总结

静态注册：在<head></head>标签下的<script></script>中完成对需求的实现，直接在需求对应标签上进行方法的调用。

动态注册：在<head></head>标签下的<script></script>中写window.onload，在这个方法下面获取目标对象，并完成对该对象的个性化方法。

4.9 DOM模型

DOM全称是Document Object Module，指的是把文档中的标签、属性、文本转换成对象进行处理

4.9.1 Document对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2HPBDznn-1628852457294)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210812152514913.png)]

特点：

1.  Document 对象，管理了所有HTML文档的内容
2.  Document对象是一种树形结构的文档，有从属关系
3.  Document对象可以使我们将所有的标签都对象化
4.  我们可以通过Document对象访问所有的标签对象
4.9.2 Document中对象查询的方法
4.9.2.1根据id查找标签

注：若存在同名ID，只会返回第一个

调用格式：document.getElementById(elementId)

<head>
        <script type="text/javascript">
            window.onload = function (){
                var patt = /^\w{5,12}$/     //正则表达式，实质为对象
                var btnObj = document.getElementById("btn01");
                var userNameObj = document.getElementById("userName");
                btnObj.onclick = function (){
                    /*
                     * test方法用来测试某个字符串是否符合规则
                     * 匹配则返回true，不匹配则返回false
                     */
                    if(patt.test(userNameObj.value))
                        alert("用户名合法");
                    else
                        alert("非法字符");
                }
            }
        </script>
</head>
<body>
    用户名：<input type="text" id="userName"/>
    <button id="btn01">验证</button>
</body>
4.9.2.2根据name查找标签

返回带有指定名称的对象集合

调用格式：document.getElementsByName(elementName)

<head>
    <meta charset="UTF-8">
    <title>Tutorial1</title>

        <script type="text/javascript">
            window.onload = function (){

                var chk_allObj = document.getElementById("chkAll");
                var chk_nonObj = document.getElementById("chkNon");
                var chk_reverseObj = document.getElementById("chkReverse");
                
                //获取所有name属性为hobby的标签并以对象形式存入hobbyObj中，对它的操作操作类似数组
                var hobbyObj = document.getElementsByName("hobby")

                chk_allObj.onclick = function (){
                    for (var i=0;i<hobbyObj.length;i++){
                        
                        //对checkbox类型的输入框对象可以调用其checked属性，可读可写。借此完成对选项的修改
                        hobbyObj[i].checked = true;
                    }

                }

                chk_nonObj.onclick = function (){
                    for (var i=0;i<hobbyObj.length;i++){
                        hobbyObj[i].checked = false;
                    }

                }

                chk_reverseObj.onclick = function (){
                    for (var i=0;i<hobbyObj.length;i++){
                        hobbyObj[i].checked = ! hobbyObj[i].checked;
                    }

                }
            }

        </script>

</head>
<body>
    兴趣爱好：
    <input type="checkbox"  name="hobby" value="cpp"/>C++
    <input type="checkbox" name="hobby" value="java"/>Java
    <input type="checkbox"  name="hobby" value="js"/>JavaScript
    <br/>
    <button id="chkAll" >全选</button><button id = "chkNon">全不选</button><button id="chkReverse">反选</button>
</body>
4.9.2.3根据标签名查找标签

注：范围太大，不好用。

调用格式：document.getElements ByTagName(tagname)

4.9.3 Document中对象查询的方法总结

使用优先级：id > name > tag

以上三个方法，必须在页面加载完成之后执行，才能查询到标签对象。

4.10 正则表达式(RegExp)

正则表达式是描述字符模式的对象，可以用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。

语法：

​ var patt = new RegExp(patten,modufiers)；

​ 或

​ var = patt = /patten/modifiers；

其中：pattern 描述了表达式的模式

​ modifiers 用于指定全局匹配、区分大小写的匹配和多行匹配

4.11 常见的验证提示效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sv4vPxQl-1628852457295)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210812170934255.png)]

实现方式：

<head>
    <meta charset="UTF-8">
    <title>Tutorial1</title>

        <script type="text/javascript">
            window.onload = function (){
                /*正则表达式，实质为对象
                  该表达式的意义为
                  5-12个字符，字母数字或下划线*/
                var patt = /^\w{5,12}$/     
                
                var btnObj = document.getElementById("btn01");
                var userNameObj = document.getElementById("userName");
                var userNameSpanObj = document.getElementById("userNameSpan");
                btnObj.onclick = function (){
                    /*
                     * test方法用来测试某个字符串是否符合规则
                     * 匹配则返回true，不匹配则返回false
                     */
                    if(patt.test(userNameObj.value))
                        userNameSpanObj.innerText = "用户名合法";
                    else
                        userNameSpanObj.innerText = "用户名不合法";

                }
            }

        </script>

</head>
<body>
    用户名：<input type="text" id="userName"/>
        <span id="userNameSpan" style="color:red" ></span>
    <button id="btn01">验证</button>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cqcx1k62-1628852457295)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210812174219755.png)]

实现方式：

<head>
    <meta charset="UTF-8">
    <title>Tutorial1</title>

        <script type="text/javascript">
            window.onload = function (){
                var patt = /^\w{5,12}$/     //正则表达式，实质为对象
                var btnObj = document.getElementById("btn01");
                var userNameObj = document.getElementById("userName");
                var userNameSpanObj = document.getElementById("userNameSpan");
                btnObj.onclick = function (){
                    /*
                     * test方法用来测试某个字符串是否符合规则
                     * 匹配则返回true，不匹配则返回false
                     */
                    if(patt.test(userNameObj.value))
                        userNameSpanObj.innerText = "用户名合法";
                    else
                        userNameSpanObj.innerText = "用户名不合法";

                }
            }

        </script>

</head>
<body>
    用户名：<input type="text" id="userName"/>
        <span id="userNameSpan" height= ></span>
    <button id="btn01">验证</button>
</body>

​ innerHTML 指的是从对象的起始位置到终止位置的全部内容,包括Html标签。
​ innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。

​ 以上两种方法在实际网站中使用失去焦点事件触发

5.jQuery

jQuery是辅助JavaScript开发的js类库，是JavaScript和Query结合的产物

核心思想：Write less，do more。

5.1 jQuery的导入

在jQuery下载地址完成jQuery的下载，之后导入到项目所在路径。

<head>
    <script type="text/javascript" src="src/jquery-3.6.0.min.js"></script>

    <script type="text/javascript">

        //页面加载完之后执行{}中的内容，相当于window.onload = function(){}
        $(function (){
            var $btnObj = $("#id001");
            $btnObj.click(function (){
                alert("jQuery 单击事件");
            });
        });
    </script>

</head>
<body>
    <button id="id001">点击触发</button>
</body>

5.2 jQuery的核心函数$()

  1. 当传入参数为函数时

    表示页面加载完成之后，相当于window.οnlοad=function(){}

  2. 当传入参数为HTML字符串时

    表示创建这个HTML标签对象。

    注：要写在$(function(){})；里面，否则无法正常执行

    <head>
    <script type="text/javascript" src="src/jquery-3.6.0.min.js"></script>

    <script type="text/javascript">
       $(function (){
           $("<button id=\"id001\">点击触发</button>").appendTo("body");
       });
    </script>

</head>
<body>

</body>

在body标签内容为空时，出现按钮组件。

  1. 当传入参数为选择器字符串时

    $(“#id属性值”)； 根据id查询标签对象

    $(“标签名”)； 根据标签名查询对象

    $(“.class属性值”)； 根据class属性查询对象

  2. 当传入参数为DOM对象时

    会把DOM对象转换为jQuery对象。

5.3 jQuery与Dom对象

DOM对象Alert出来的效果为 [object HTML标签名Element]
jQuery对象Alert出来的效果为 [object Object]
jQuery对象的本质：数组，存放dom对象的数组，同时包含jQuery提供的函数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NcpmgQx6-1628852457296)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210813100614059.png)]

5.4 jQuery的选择器与过滤器

5.4.1层级选择器

$(“祖标签 后代标签名”)： 找祖先标签下的所有匹配的后代标签

$(“父标签 > 子标签”)： 找父标签下的所有匹配的子标签

$(“prev标签 + next标签”)： 找prev标签的下一个next标签

$(“prev标签 ~ next标签”)： 找与prev同级的所有next标签

5.4.2 普通过滤器

$(“标签名：first”)： 获取第一个元素

$(“标签名：last”)： 获取最后一个元素

$(“标签名：not(：属性名)”)： 获取不包含某属性的标签

$(“标签名：even”)： 获取所有索引值为偶数的元素

$(“标签名：odd”)： 获取所有索引值为奇数的元素

$(“标签名：eq(索引值)”)： 获取指定索引值的元素

$(“标签名：gt(索引值)”)： 获取大于索引值的元素

$(“标签名：lt(索引值)”)： 获取大于索引值的元素

$(“标签名：header”)： 获取所有标题

$(“标签名：animated”)： 获取正在执行动画效果的标签

5.4.3 内容过滤器

$(“标签名：contains(‘内容’)”)： 获取包含指定内容的标签

$(“标签名：empty”)： 获取不包含子元素或文本的空元素

$(“标签名：has(选择器名)”)： 获取包含选择器所匹配的元素的元素

$(“标签名：has(选择器名)”)： 获取包含选择器所匹配的元素的元素

<head>
    <meta charset="UTF-8">
    <title>Tutorial1</title>

    <script type="text/javascript" src="src/jquery-3.6.0.min.js"></script>

    <script type="text/javascript">
       $(function (){
           
           //选中包含p标签的div标签，为其添加class属性为test
           $("div:has(p)").addClass("test");
           
       });
    </script>

</head>
<body>
    <div><p>Hello</p></div>
    <div>Hello个屁呢！</div>
</body>

效果图如下，在body标签中并未给div标签设置属性，但是执行完之后，发现第一个div标签有了class属性，且值为test。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qQMsmbdL-1628852457297)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210813163150431.png)]

5.4.4 属性过滤器

$(“标签名[属性名]”)： 获取包含某属性的标签

$(“标签名[属性名 = ‘属性值’]”)： 获取包含某属性且属性值为特定值的标签

$(“标签名[属性名 ！= ‘属性值’]”)： 获取包含某属性且属性值不为特定值的标签

​ 注：两种情况都会被选出来，第一：不包含该属性；第二：属性值不是给定值

​ 验证如下：

<head>
    <meta charset="UTF-8">
    <title>Tutorial1</title>

    <script type="text/javascript" src="src/jquery-3.6.0.min.js"></script>

    <script type="text/javascript">
       $(function (){
           $("div[name != 'Smile']").addClass("test");
       });
    </script>

</head>
<body>
    <div name = "Smlie">Hello</div>
    <div>Hello个屁呢！</div>
    <div name = "sry">Hello个屁呢！</div>
</body>

在标签name属性为为sry以及不包含name属性的div标签均出现新的class属性[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nm6bSGUI-1628852457297)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210813165823236.png)]

$(“标签名[属性名 ^= ‘属性值’]”)： 获取包含某属性且以某些值开头的标签

​ 比如<div name = “Smile”>，就可以通过<div ^= ‘Sm’>查到

$(“标签名[属性名 $= ‘属性值’]”)： 获取包含某属性且以某些值结尾的标签

$(“标签名[属性名 *= ‘属性值’]”)： 获取包含某属性包含某些值开头的标签

$(“标签名[属性选择][属性选择]”)： 获取包含某属性包含某些值开头的标签

5.4.4 表单过滤器

$(“：input”)： 获取所有表单内的input、select、textarea、button等标签

$(“：text”)： 获取所有表单内的type=text的标签

$(“：password”)： 获取所有表单内的type=password的标签

$(“：hidden”)： 获取所有表单内的type=hidden以及style="display：non"的标签

$(“：enabled”)： 获取所有表单内的可用标签

$(“：disabled”)： 获取所有表单内的不可用标签，内容存在，但不可操作

$(“：checked”)： 获取所有表单内被选中标签(一般值单选框、复选框，不包含下拉框)

$(“：selected”)： 获取所有表单内被选中的下拉框标签

5.5 jQuery属性操作

  1. html()

    可以设置和获取起始标签和结束标签中的内容。与dom属性的innerHTML相同。

<head>
    <meta charset="UTF-8">
    <title>Tutorial1</title>

    <script type="text/javascript" src="src/jquery-3.6.0.min.js"></script>

    <script type="text/javascript">
       $(function (){
           //传参则设置，不传参则获取
           //获取是获取第一个，设置，是设置所有
           console.log($("div").html());//获取div标签中的内容，包含html标签
           console.log($("p").html());//获取p标签中的内容
           //console.log($("div").html("关你屁事！"));//将所有div标签中的内容改为关你屁事
           $("div").html("<span>关你屁事！</span>");//将所有div标签中的内容改为关你屁事，且添加span标签
       });
    </script>

</head>
<body>
    <div name = "Smlie"><span>Hello!</span></div>
    <p>Hello个屁呢！</p>
    <div name = "sry">Hello个屁呢！</div>
    <h1>放大的屁！</h1>
</body>

效果图如下

页面内容：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZfeX16OK-1628852457298)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210813181951637.png)]

控制台内容：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1db2TDji-1628852457299)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210813182519043.png)]

  1. text()

    可以设置和获取起始标签和结束标签中的文本。与dom属性的innerText相同。

  2. val()

    可以设置和获取[表单项](id = “表单项”)的value属性值。跟dom属性的value相同

2.1 HTTP格式

http: // ip:port / 项目路径 / 参数

ip也可以为域名，通过DNS解析。端口默认为80

2.1.1 请求的格式

一个请求包含三个部分，请求头，请求行，请求正文。

Method Request_URI HTTP_Version CRLF

请求方法 统一资源标识符 请求的http版本 回车换行

请求头：host ：域名

​ connection ：连接状态

​ Referer：指明请求的来源，即这个页面的上一个页面 是什么

GET请求：无请求正文，直接将请求的各项参数填入到地址栏中，导致地址栏过长。

POST请求：将参数放进请求体

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ag2RswOE-1628852457300)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210805151142141.png)]

2.1.2 响应的格式

一次响应也包含三个部分，响应行 ，响应头，响应正文

响应行包含：http协议版本，状态码，对状态码的说明。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BkSmH7UV-1628852457301)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210805151232319.png)]

200 即为连接成功

响应头：Location：用于重定向接受者到一个新的位置

​ Refresh：自动跳转，单位：秒，可以实现自动刷新或 跳转页面

2.2 HTTP特点

  1. HTTP规定了浏览器与服务器之间的交互规则。
  2. HTTP在Version1.1之前只支持无连接传输，每次连接只处理一个请求。请求 -> 相应 -> 断开
  3. HTTP是一种无状态协议，不具有记忆功能，若需要对前面的信息进行处理，都需要重新上传。因此，在一些情况下会导致资源的过度使用。

3.Tomcat服务器

3.1 Socket通信

客户端

​ 向服务端发送数据

服务端

​ 打开服务，等待客户端的请求

3.2 Tomcat服务器的特点

轻量级应用服务器，适用于中小型系统和并发访问用户不多的情况下适用。

3.3 Tomcat目录结构

bin：启动与关闭tomcat的bat文件

conf：配置文件server.xml，用于配置server相关信息，如tomcat的端口号，配置主机；web.xml文件，用于配置web应用；tomcat-user.xml配置用户名、密码即用户权限

lib：存放运行tomcat的jar包

logs：存放日志

webapps：放置web应用

work：用于存放jsp被访问后生成的server文件与.calss文件

3.4 Tomcat+IDEA

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CPXPP9Gd-1628852457301)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210805161415515.png)]

选bin目录的上级目录即可

3.5 问题一：无法正常启动Tomcat

Neither the JAVA_HOME nor the JRE_HOME environment variable is defined At least one of these environment variable is needed to run this program

原因：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y2GgY92D-1628852457302)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210805154712797.png)]

JAVA_HOME未找到，但是在环境变量中可以看到JAVA_HOME存在，因此手动设置环境变量。

解决方法：找到bin目录下的setcalsspath.bat，编辑。将目录手动添加到该文件中，如下图所示。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IICgNYOy-1628852457303)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210805155112129.png)]

成功启动Tomcat

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bWygtbMY-1628852457303)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210805155228794.png)]

4. Servlet实现

4.1 IDEA新建web项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GsQ463ZK-1628852457304)(C:\Users\asus\AppData\Roaming\Typora\typora-user-images\image-20210805163855992.png)]

new -> Java Enterprise -> Project template -> Web application

4.2 问题二：无法运行tomcat，8080被占用

解决方法：

  1. 查看被占用端口对应的PID，输入命令：netstat -aon|findstr “端口号”

  2. 根据所得结果，进入任务管理器，

  3. 对应PID码，对服务进行关闭

    image-20210805171445624

4.3 Servlet工作过程

localhost:8080/项目路径/项目资源

  1. 新建类
  2. 继承HttpServlet类
  3. 重写Service方法
  4. 添加注解(@WebServlet(“/项目资源名”))

4.4 Servlet的生命周期

  1. 实例和初始化阶段

    当请求到达容器(Tomcat)时，容器查找该Servlet对象是否存在，如果不存在则会创建实例并进行初始化。

  2. 就绪/调用/服务阶段

    有请求到达容器，容器调用Servlet对象的service()方法，处理请求的方法可以在整个生命周期中被反复调用。HttpServlet的service()方法会依据请求的方式(get/post)调用doget或dopost方法。但是，这两个方法默认的情况下，会抛出异常，此时需要子类去override。

  3. 就绪/调用/服务阶段

    当容器关闭（应用程序停止）会将程序中的Servlet实例进行销毁。

init() ：系统方法，在请求到达servlet容器时，服务器自动调用，创建实例化对象，只会被调用一次
destroy()：系统方法，当服务器关闭或程序停止时自动调用，只会被调用一次。
service()：系统方法，当有请求到达servlet时自动调用，可以多次调用。

4.5 HttpServletRequest对象

作用：接收客户端发送过来的请求信息，如请求的参数，发送的头等。

常用方法：

​ getRequestURL()：获取客户端发出请求时的完整URL

​ getRequestURI()：获取请求行中的资源名称部分

​ getQueryString()：获取请求行中的参数部分

​ getMethod()：获取客户端请求方式

​ getProtocol()：获取HTTP版本号

​ hetContextPath()：获取webapp名称

​

3.5 问题一：无法正常启动Tomcat

Neither the JAVA_HOME nor the JRE_HOME environment variable is defined At least one of these environment variable is needed to run this program

原因：

[外链图片转存中…(img-Y2GgY92D-1628852457302)]

JAVA_HOME未找到，但是在环境变量中可以看到JAVA_HOME存在，因此手动设置环境变量。

解决方法：找到bin目录下的setcalsspath.bat，编辑。将目录手动添加到该文件中，如下图所示。

[外链图片转存中…(img-IICgNYOy-1628852457303)]

成功启动Tomcat

[外链图片转存中…(img-bWygtbMY-1628852457303)]

4. Servlet实现

4.1 IDEA新建web项目

[外链图片转存中…(img-GsQ463ZK-1628852457304)]

new -> Java Enterprise -> Project template -> Web application

4.2 问题二：无法运行tomcat，8080被占用

解决方法：

  1. 查看被占用端口对应的PID，输入命令：netstat -aon|findstr “端口号”

  2. 根据所得结果，进入任务管理器，

  3. 对应PID码，对服务进行关闭

    image-20210805171445624

4.3 Servlet工作过程

localhost:8080/项目路径/项目资源

  1. 新建类
  2. 继承HttpServlet类
  3. 重写Service方法
  4. 添加注解(@WebServlet(“/项目资源名”))

4.4 Servlet的生命周期

  1. 实例和初始化阶段

    当请求到达容器(Tomcat)时，容器查找该Servlet对象是否存在，如果不存在则会创建实例并进行初始化。

  2. 就绪/调用/服务阶段

    有请求到达容器，容器调用Servlet对象的service()方法，处理请求的方法可以在整个生命周期中被反复调用。HttpServlet的service()方法会依据请求的方式(get/post)调用doget或dopost方法。但是，这两个方法默认的情况下，会抛出异常，此时需要子类去override。

  3. 就绪/调用/服务阶段

    当容器关闭（应用程序停止）会将程序中的Servlet实例进行销毁。

init() ：系统方法，在请求到达servlet容器时，服务器自动调用，创建实例化对象，只会被调用一次
destroy()：系统方法，当服务器关闭或程序停止时自动调用，只会被调用一次。
service()：系统方法，当有请求到达servlet时自动调用，可以多次调用。

4.5 HttpServletRequest对象

作用：接收客户端发送过来的请求信息，如请求的参数，发送的头等。

常用方法：

​ getRequestURL()：获取客户端发出请求时的完整URL

​ getRequestURI()：获取请求行中的资源名称部分

​ getQueryString()：获取请求行中的参数部分

​ getMethod()：获取客户端请求方式

​ getProtocol()：获取HTTP版本号

​ hetContextPath()：获取webapp名称

​

Smile Hun
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
java中jsp table标签属性_JSP自定义标签-属性
weixin_30814157的博客
02-27 2003
JSP自定义标签-属性1 带属性的JSP自定义标签对于任何JSP自定义标签，可能都需要定义属性。要定义属性，您需要执行两个任务：使用属性名称在TagHandler类中定义属性并定义setter方法在TLD文件中的tag元素内定义attribute元素让我们通过下面给出的标签来了解属性：上面的m是前缀，show是标签名称，number是属性。2 带属性的JSP自定义标签简单示例在下面的示例中，我们将...
关于标签选择器获取table中的＜td＞标签中的html值,以及＜td＞中＜input type=‘text‘＞中的value值的详解
weixin_40517799的博客
05-10 2686
这是我自己最近做的项目的一段jsp代码， <table id="Mytable" class="table table-hover table-bordered table-striped" style="margin-bottom: 0px;"> <tr> <th>序号</th> <th>设备名称</th> <th>设备编号</th> <th>设备类型编号&l
JSP入门之表格以及常用表单元素(总结自身编程经验以及多本教科书)
GodGump的博客
10-06 3903
表格 开始标志:<table> 结束标志: </table> table常用的属性： cellpadding 规定单元格与其内容之间的空白 cellspacing 规定单元格之间的空白 border-collapse: collapse;去掉这些空白的属性,如果不设置table标签的这些属性值为0 中间是行，每行是一个<tr></tr> 每行之间是列，每一列对应 <td> </td> <td></td> 之间的
全网最详细_jsp01(跟着宝哥学java：jsp)jsp组成、jsp原理、jsp内置对象、el表达式、jstl标签库
最新发布
跟着宝哥学java的博客
03-25 4856
全网最详细_jsp01(跟着宝哥学java：jsp)jsp组成、jsp原理、jsp内置对象、el表达式、jstl标签库
JSP:Table表格属性总结
Narasimha_Karumanchi
04-17 2万+
转载出处：http://blog.sina.com.cn/s/blog_7019362c0100n8yv.html一、表格的常用属性基本属性有：width（宽度）、height（高度）、border（边框值）、cellspacing（表格的内宽，即表格与tr之间的间隔）、 cellpadding（表格内元素的间隔，即tr与tr之间的间隔）、bordercolorlight（表格的亮边框颜色）、 bo
JSP学习笔记
10-27
JSP学习笔记 JSP（Java Server Pages）是一种基于Java技术的Web应用程序开发语言，允许开发者使用HTML、Java和JavaScript等语言来创建动态Web页面。下面是JSP学习笔记中的一些重要知识点： 1. 变量声明：在JSP中，...
jsp标签
m0_60375943的博客
08-20 302
思维导图 一. 标签语言的特点 1，分类 ①空标签：br、hr ②ui标签：input、table ③控制标签：if、foreach ④数据标签：set标签、out标签 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional...
JSP入门教程
心猿问道的博客
11-13 493
【JSP:Java服务端页面技术】 主要内容 JSP使用和原理 JSP常用指令标签 JSP九大内置对象 JavaEE和MyBatis结合 学习目标 知识点 要求 JSP简介 熟悉 JSP的语法结构 掌握 JSP的执行过程 掌握 JSP加载引擎 熟悉 JSP性能问题
JSP中的EL表达式详细介绍
meiyalei的专栏
02-28 6193
一、JSP EL语言定义        E L（Expression Language）  目的：为了使JSP写起来更加简单。       表达式语言的灵感来自于 ECMAScript 和 XPath 表达式语言，它提供了在 JSP 中简化表达式的方法。它是一种简单的语言，基于可用的命名空间（PageContext 属性）、嵌套属性和对集合、操作符（算术型、关系型和逻辑型）的访问符、映射到
JSP Table 单元格合并
07-02
JSP Table 单元格合并 javascript
漂亮的table表格样式
06-16
非常漂亮 实现简单 亮蓝色 鼠标移动变色
html怎么制作table,html 制作复杂table
weixin_33730916的博客
06-18 1223
数据分析，一般都需要显示数据，就需要使用html做复杂的表格。复杂表格一般是对td的rowspan 、colspan属性值。在html中 标签定义 HTML 表格中的标准单元格。(1)rowspan 属性规定单元格可横跨的行数;(2)colspan 属性规定单元格可横跨的列数。复杂表格网站统计情况 奇虎360 http://hao.360.cn/11http://sh.qihoo.co...
jsp 导出table表格为excel
weixin_45956838的博客
03-04 1061
导出excel <script> function base64 (content) { return window.btoa(unescape(encodeURIComponent(content))); } function exportExcel() { var table = $("#所需要导出的元素id"); var excelContent = table[0].innerHT
jquery如何获得td标签中value属性的值
热门推荐
suweierxing的专栏
01-04 2万+
首先来说，td标签中是不存在value属性的 通过查找发现td中存在一个abbr属性： 定义和用法 abbr 属性规定单元格中内容的缩写版本。 abbr 属性不会在普通的 web 浏览器中造成任何视觉效果方面的变化。 屏幕阅读器可以利用该属性。 浏览器支持 由于在普通的 web 浏览器中不会造成任何视觉效果方面的变化，因此很难说是否存在对 abbr 属性的支持
最流行强大的页面标签框架 display:table 使用
记录成长的点点滴滴
07-21 9234
在web.xml下添加一个filter <filter> <filter-name>exportFilter</filter-name> <filter-class>org.displaytag.filter.ResponseOverrideFilter</filter-class> </filter> 在jsp页面做一个引用： <%@ taglib uri=”ht
table标签的属性
qq_32311977的博客
10-28 1902
定义和用法 标签定义 HTML 表格。 简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。 tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。 更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。 HTML 与 XHTML 之间的

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Smile Hun

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值