首页 文章 精选 留言 我的

精选列表

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

Python全栈 Web(Django框架、模板继承、模型)

模板的继承: 语法: 在父模板中 必须要标识出那些内容在子模板中允许为修改 {% block 名称 %} {% endblock %} 在子模板中 指定继承自那个父模板 {% extends '父模板名称' %} 增加block标签 改写属于自的内容 {% block 名称 %} {% endblock %} block的作用: 在父模板中正常显示 在子模板中 如果不修改的话 则按父模板的内容显示 要是修改的话则按照子模板的内容显示 <!doctype html> &

优秀的个人博客,低调大师

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> 样图

优秀的个人博客,低调大师

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> 样图 总结:可以搭建一个很丑的网页了。

优秀的个人博客,低调大师

前端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

资源下载

更多资源
Nacos

Nacos

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

Spring

Spring

Spring框架(Spring Framework)是由Rod Johnson于2002年提出的开源Java企业级应用框架,旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念,提供核心容器、应用上下文、数据访问集成等模块,支持整合Hibernate、Struts等第三方框架,其适用范围不仅限于服务器端开发,绝大多数Java应用均可从中受益。

Sublime Text

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。

WebStorm

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。

用户登录
用户注册