首页 文章 精选 留言 我的

精选列表

搜索[Web安全]，共10000篇文章
优秀的个人博客,低调大师

Android程序员搞Web之CSS（三）

1、行内样式 <body> <table align="center" > <caption><h4 style="color: red; font-size: 20px">数字整理表格</h4></caption> <tr> <th> 数字整理 </th> </tr> <tr> <td style="color: #669900">小数字</td> <td>123</td> </tr> <tr> <td>中数字</td> <td>456</td> </tr> <tr> <td>大数字</td> <td>789</td> </tr> </table> </body> 在标签内输入 style 并在 style 引号内输入样式 css用“ : ” 样图 2、内部样式表 在 head 标签内通过 style 标签与选择器配合修改样式 <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*选择器{属性值}*/ th{ color: blue } td{ font-size: 14px } tr{ height: 40px } </style> </head> <body> <table align="center" > <caption><h4 >数字整理表格</h4></caption> <tr> <th> 数字整理 </th> </tr> <tr> <td >小数字</td> <td>123</td> </tr> <tr> <td>中数字</td> <td>456</td> </tr> <tr> <td>大数字</td> <td>789</td> </tr> </table> </body> </html> 样图 3、外部样式 1）、创建 css 文件夹用于存 css 文件 2）、css 文件内输入选择器{}进行样式修改 3）、在html文件内使用link标签进行 html 与 css 文件的关联操作 <!-- html文件内代码 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <table align="center" > <caption><h4 >数字整理表格</h4></caption> <tr> <th> 数字整理 </th> </tr> <tr> <td >小数字</td> <td>123</td> </tr> <tr> <td>中数字</td> <td>456</td> </tr> <tr> <td>大数字</td> <td>789</td> </tr> </table> </body> </html> /*css文件内代码*/ th{ color: #889900 } td{ color: #aa3344 } 样图 4、类选择器 上面点声明，下面class调用 在 style 内 .suibian(随便命名) { 属性以及属性值} 在标签内 class=“suibian” class内引入即可 <!-- html文件内代码 --> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .last{ color: blue } </style> </head> <body> <div>我是类选择器</div> <div>我是类选择器</div> <div class="last">我是类选择器</div> </body> </html> 样图 5、练习 <!-- html文件内代码 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> span{ font-size: 100px } .G{ color: #0E8CE8 } .o1{ color: #E21918 } .o2{ color: #FFCD41 } .g{ color: #0188FB } .l{ color: #7FB546 } .e{ color: #B83E1F } </style> </head> <body> <div align="center"> <span class="G">G</span> <span class="o1">o</span> <span class="o2">o</span> <span class="g">g</span> <span class="l">l</span> <span class="e">e</span> </div> </body> </html> 样图 6、多类选择器 1）、可以定义多个样式，在class内同时赋值给我一个标签 2）、当不同的style内，存在相同的属性时，标签的样式为，样式最下面的定义样式。 7、id选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> span{ font-size: 100px } #G{ color: #0E8CE8 } #o1{ color: #E21918 } #o2{ color: #FFCD41 } #g{ color: #0188FB } #l{ color: #7FB546 } #e{ color: #B83E1F } </style> </head> <body> <div align="center"> <span id="G">G</span> <span id="o1">o</span> <span id="o2">o</span> <span id="g">g</span> <span id="l">l</span> <span id="e">e</span> </div> </body> </html> 样图 1）、相当于将style内部的 “.类名” 改成“#id名称” 2）、将标签内的 class 改为 id。 注意：class 内的值可以多次使用；id 内的值只能使用一次，全局一次。 8、通配符选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ color: red } </style> </head> <body> <div>我是小狗</div> <p>我是小猫</p> <span>我爱汪汪汪</span> <h1>我爱喵喵</h1> </body> </html> 将下面所有标签全选 样图 9、css属性 1）、font-size：字号大小 单位：px：像素 2）、font-family ：字体 3）、font-weight: 字体加粗 参数为：bold 或者700 normal 或者 400： 去掉加粗 4）、font-style 字体风格 参数：normal 正常字体 ；italic 倾斜的 5）、字体连写 font后面设置各种参数，但是有序的。 font： font-style（风格）、font-weight（是否加粗）、font-size（字体大小）\line-height（行高）、font-family（字体） 6）、行间距 line-height ： 设置行与行之间的距离 7）、文本水平对齐方式 text-align: center（居中）、left（左对齐）、right（右对齐） 8）、设置缩进 text-indent： 单位为：em 9）、文本修饰 text-decoration ：none 默认的，可以取消删除线 underline 下划线 overline：文本上面的先 line-through：穿过文本的线 10、符合选择器 1）、后代选择器 <!-- html文件内代码 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div p{ color: #669900 } </style> </head> <body> <div>王者荣耀</div> <div>王者荣耀</div> <div>王者荣耀</div> <div>王者荣耀</div> <div>王者荣耀</div> <div>王者荣耀</div> <div> <p>小米枪战</p> </div> <div> <p>小米枪战</p> </div> <div > <p>小米枪战</p> </div> <div>王者荣耀</div> <div>王者荣耀</div> </body> </html> 样图 先写外层的，中间用空格分割，再写内层的。 外层标签class，内层class名称 标签 <!-- html文件内代码 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div p{ color: #669900 } .xiaomi p{ color: #AE81FF } </style> </head> <body> <div>王者荣耀</div> <div>王者荣耀</div> <div>王者荣耀</div> <div>王者荣耀</div> <div>王者荣耀</div> <div>王者荣耀</div> <div> <p>小米枪战</p> </div> <div class="xiaomi"> <p>小米枪战</p> </div #AE81FF> <div> <p>小米枪战</p> </div> <div>王者荣耀</div> <div>王者荣耀</div> </body> </html> 样图 div p > a 表示子代选择器，直系、不包含孙子。 2）、交集选择器 <!-- html文件内代码 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div.green{ color: green; } </style> </head> <body> <div>小米超神</div> <div class="green">小米超神</div> <div>小米超神</div> <p>王者荣耀</p> <p>王者荣耀</p> <p class="green">王者荣耀</p> </body> </html> 样图 相同的类选择器，名称前面加标签即可，选谁谁有变化。 4）、并集选择器 <!-- html文件内代码 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div,p,span,a{ color: #998877 } </style> </head> <body> <div>小米超神</div> <p>王者荣耀</p> <span>小米枪战</span> <a href="#">麻花藤</a> </body> </html> 样图 多个标签具有相同样式时，可以用“，”进行分割，实现多个选择器一起更改属性。 5）、伪类选择器 链接伪类选择器： :link 表示未访问的链接 :visited 表示已经访问的链接 :hover 表示鼠标移动的链接 :active 表示选定的链接 连用时 顺序不可颠倒 11、显示模式 1）、块级元素——块级显示模式 一种元素占一行，并且可以设置宽度、高度、对齐等属性； 例子：<h1>~<h6>、<p>、<div>、<ol>、<ul>、<li>等 2）、行内元素——行显示模式 和邻近元素在一行； 宽高无效，但是水平方向的padding和margin可以设置，垂直方向无效； 默认宽度就是本身宽度； 行内元素只能容纳文本或者是其他的行内元素。 3）、行内块元素——行内块显示模式 例子：<img/>、<input/>、<td/> 既可以设置宽高又可以在同一行内放置多个元素； 4）、三种显示模式相互转换 在相应的style内设置display属性。当块级标签转换为行标签时值为inline；行级元素转换为块级元素是参数值为block；块、行级元素转换为行内块参数为inline-block; 综合练习： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .nav{ /*行内元素 行内块元素 可以当做文本*/ text-align: center; } .nav a{ width: 120px; height: 50px; background-image: url(images/bg.png); display: inline-block; text-align: center; text-decoration: none; color: #ffffff; /*行高等于盒子的高度可以使一行文本居中*/ line-height:50px; } .nav a：hover{ background-image: url(images/bgc.png); } </style> </head> <body> <div class="nav"> <a href="#">网络导航</a> <a href="#">网络导航</a> <a href="#">网络导航</a> <a href="#">网络导航</a> <a href="#">网络导航</a> </div> </body> </html> 样图
2018-07-09
优秀的个人博客,低调大师

Android程序员搞Web之HTNL（一）

1、html主要包括：结构（重要，html）、样式（css）、行为（js）三部分。 2、html的基本结构（固定不变的结构） <html>//根节点 <head>//页面的头部 <title>标题</title> </head> <body>//页面的内容 </body> </html> 3、html标签分为单标签和双标签，当标签内带有“/”表示标签结束。 4、标题标签(共六种) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html Test one</title> </head> <body> <h1>一级标题</h1> <h2>二级标题</h2> <h3>...</h3> <h6>六级标题</h6> </body> </html> 样图 5、段落标签 <p>我是一个段落标签</p> 样图 6、横线标签与换行标签 <hr/>//横线 <br/>//换行 样图 7、div 与span <div>我是div</div> <div>我是div</div> <span>我是span</span> <span>我是span</span> div与span分别表示盒子一行只能有一个div，但是span可以一行有多个 样图 8、文本格式化标签 <strong>加粗字体</strong> <b>我也是加粗字体</b> <br/> <hr/> <i>我是文本倾斜</i> <em>我也是文本倾斜</em> <br/> <hr/> <s>我是删除线</s> <del>我也是删除线</del> <br> <hr> <u>我是下划线</u> <ins>我也是下划线</ins> 样图 10、图片标签 <img src="ic_launcher_round.png" /> 常用属性： src：目的图片的路径 alt：图片不能显示的错误图片 title：鼠标悬停与图片上方显示的文字 width和 hight ：宽度和高度（给一个就行了，会自动等比例缩放） border：为图片添加边框（参数为边框宽度） 11、链接标签 <a href="https://www.jianshu.com/u/2e5d001fdc4c"> <img src="ic_launcher_round.png" alt="error.png" /> </a> <a>可以是文字或者图像</a> href:目的网站的链接 当未确定跳转链接的时候可以将href内添加一个“#”，使得点击超链接无法跳转。 target：默认参数为_self ，效果点击之后原页面被替换。_blank参数，效果为点击之后建立新窗口进行显示新页面。写法如下： <a href="htmlTest1.html" target="_blank"></a> 12、锚点定位（类似于目录效果） <a href="#test" >目标内容</a> <h1 id="test">就是这里你猜对了</h1> 1)、<a href="#+目标id" >目标内容</a> 2)、<h1 id="目标id">就是这里你猜对了</h1> 13、base标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html Test one</title> <base target="_blank" /> </head> <body> <a href="https://www.jianshu.com/u/2e5d001fdc4c" >简书</a> </body> </html> 若页面内所有的链接都用新窗口打开，则使用base标签，如果页面内某一个不需要新窗口打开则在该链接标签内添加target="_self "属性 14、特殊字符标签 &nbsp; 表示： 空格 &lt; 表示： 小于号< &gt; 表示： 大于号> &amp 表示： & 15、相对路径 1）、网页与图片位于同级的时候可以直接src="";图片 2）、图片位于网页的下一级路径的时候src="文件夹名称/图片名称"; 3）、图片位于网页的上级路径src="../图片名称" 16、绝对路径 写法src="网络连接" 17、列表标签 1）、无序列表 <body> <ul> <li>第一个</li> <li>第二个</li> </ul> </body> 样图 a）、ul标签内只能放li标签，如果放置其他的是不科学的 b）、li内可以放置其他标签 2）、有序列表 <body> <ol> <li>第一个</li> <li>第二个</li> <li>第一个</li> <li>第二个</li> <li>第一个</li> <li>第二个</li> </ol> 样图 总结：可以搭建一个很丑的网页了。
2018-07-04
优秀的个人博客,低调大师

前端jsp与后端servlet传值（java web）

jsp中js使用jQuery封装好的 $.ajax(）方法与服务器进行交互 var jsonStick = this.strtoJson(); $.ajax({ type : 'post',//不起作用 要用jsonP url : 'controllerServlet',//要传输数据对象的地址 contentType : "application/x-www-form-urlencoded",//转化为form表单传值 data : { "js" : jsonStick }, //前面的js是服务端获取的ID 后面的jsonStick是处理后的json对象 cache : false, dataType : 'text',//这个关系到你能不能正确接收到servlet 响应的数据 async : false, //因为ajax默认是异步调用的，所以得到的返回值是空值，要得到值必须改成同步：async: false success : function(data) { //console.log(data); flag = data; //采用全局变量flag接收数据（data未作处理） }, error : function(msg) { //ajax请求失败后触发的方法 //弹出错误信息 console.log(msg); } }); //数据处理函数 function() { //'':this.note.name, var arr = []; var json = {}; json.note_id = this.id json.note = this.text; json.left = this.left; json.top = this.top; json.zindex = this.zIndex; if (this.sqlId == null) { this.sqlId = 0; } json.sqlId = this.sqlId; arr.push(json); var jsonStick = JSON.stringify(arr);//格式化json数据 return jsonStick; } servlet接收 处理 响应 protected void doGet（.........）{ String js = request.getParameter("js");//接收jsp传过来的数据 JSONArray json = JSONArray.fromObject(js);//对数据进行数组转化 JSONObject jsonOne = json.getJSONObject(0);//获取确定的json对象 boolean flag = true; PrintWriter out = response.getWriter(); out.print(flag);//将flag传给jsp out.close(); } jsp接收响应 并对数据进行处理 $.ajax({ type : 'post', url : 'sendServlet', cache : false, dataType : 'json', async : false, //因为ajax默认是异步调用的，所以得到的返回值是空值，要得到值必须改成同步：async: false success : function(data) { //console.log(data.result.note) for (var i in data) { console.log(data[i]) note = new Note(); note.id = data[i].note_id; note.text = data[i].note; note.timestamp = new Date().getTime(); note.left = data[i].left; note.top = data[i].top; note.zIndex = data[i].zindex; } }, error : function(msg) { //ajax请求失败后触发的方法 //弹出错误信息 console.log(msg); } }); 中间用到的jar包以及js https://pan.baidu.com/s/1XEOkM1as_10I92WAzooBuA 密码：gix8
2018-05-25
优秀的个人博客,低调大师

JSP web应用程序开发教程实验二

版权声明：转载请注明出处:http://blog.csdn.net/dajitui2024 https://blog.csdn.net/dajitui2024/article/details/79396229 编码统一utf-8 文件名：e2alert.html <!DOCTYPE html> <html> <head> <meta http-equiv="Conten-Type" content="text/html; charset=UTF-8"> <title>登录失败</title> </head> <body> <h1 align="center"> 用户名或密码不正确！<br> 没有登录！无权访问本网站！ </h1> <h1 align="center"><a href="e2login.html">请登录！</a></h1> </body> </html> 文件名：e2check_login.jsp <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> </head> <body> <% String name=request.getParameter("username"); String password=request.getParameter("passwd"); if(name.equals("admin") && password.equals("123")) { session.setAttribute("username",name); response.sendRedirect("e2login_success.jsp"); } else { %> <jsp:forward page="e2alert.html"/> <% } %> </body> </html> 文件名：e2login.html <html> <body> <form method=post action="e2check_login.jsp"> <table align="center"> <tr> <td> 用户名： </td> <td> <input type=text name="username"> </td> </tr> <tr> <td> 密码： </td> <td> <input type=text name="passwd"> </td> </tr> <tr> <td colspan=2 align="center"> <input type=submit value="登录"> &nbsp;&nbsp;&nbsp;&nbsp; <input type=reset value="重设"> </td> </tr> </table> </body> </html> 文件名：e2login_success.jsp <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@include file="e2session_check.jsp" %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>登录成功</title> </head> <body> <br> <hr width=380> <center> <h1> <% out.print(sename); %> 登录成功 </h1> <h2> 欢迎您！<%=sename %> </h2> </center> </body> </html> 文件名:e2session_check.jsp <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> </head> <body> <% String sename=(String)session.getAttribute("username"); if(sename==null || !sename.equals("admin")) { response.sendRedirect("e2alert.html"); } %> </body> </html>
2018-02-27
优秀的个人博客,低调大师

JSP web应用程序开发教程实验一

版权声明：转载请注明出处:http://blog.csdn.net/dajitui2024 https://blog.csdn.net/dajitui2024/article/details/79396232 编码统一utf-8 文件名：a.jsp <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <html> <head> </head> <body> <% int num = Integer.parseInt(request.getParameter("num")); out.println(num+"的平方是："+num*num); %> </body> </html> 文件名：b.jsp <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <html> <head> </head> <body> <jsp:include page="a.jsp"> <jsp:param value="19" name="num"/> </jsp:include> </body> </html> 文件名：ex201.jsp <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <html> <head> </head> <body> <% Date date = new Date(); int hour = date.getHours(); int minute = date.getMinutes(); int second = date.getSeconds(); if (hour >= 0 && hour < 12) { out.println("早上好！"); } else if (hour >= 12 && hour < 19) { out.println("下午好！"); } else { out.println("晚上好！"); } %> </body> </html> 文件名：test1.jsp <%@ page contentType="text/html;charset=utf-8" %> <% request.setCharacterEncoding("utf-8"); String strUserName = ""; strUserName = (String)request.getParameter("UserID"); if(strUserName.equals("张三")){ out.println("你好" + strUserName); }else{ out.println("名称错误"); } %> <br>姓名：<%=strUserName%><br> 文件名：test2.jsp <%@ page contentType="text/html;charset=utf-8" %> <html><body> <form action= " test1.jsp" method="post"> <p>姓名：<input type="text" size="20" name= "UserID"></p> <p><input type="submit" value="提 交"> </p> </form> </body></html>
2018-02-27

资源下载

更多资源
Mario

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

时间: 2026-04-11 大小: 211.28KB 下载: 56次
腾讯云软件源

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

时间: 2026-04-11 大小: 1MB 下载: 9次
Nacos

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

时间: 2026-04-15 大小: 189MB 下载: 5次
Rocky Linux

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

时间: 2026-04-12 大小: 1.42GB 下载: 4次
热门标签
DeepSeek Jdk25 OpenAi HarmonyOS6 Nacos3 SpringBoot4 SpringCloud Docker Kubernetes Service Mesh Redis Gemini3 Rocky

欢迎您来访！

登录后，您将获得更多功能！
热门文章
联系我们

有任何问题或合作意向欢迎联系我们

Email: 99873273@qq.com

QQ: 99873273

用户登录
用户注册