渗透测试_网络安全_html，div，css_案例

已于 2023-07-07 17:48:49 修改
阅读量1k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 网络安全 文章标签： web安全
于 2023-07-07 16:49:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/A_8888_A/article/details/131510651

本套课程参考暗月渗透测试学习, 这套渗透测试视频非常详细.

1 web安全HTML基础

1.1 HTML页面架构

一段简单的HTML页面架构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

charset 编码 gbk gbk2312 utf-8

示例
在这里插入图片描述在这里插入图片描述

1.2 HTML常见标签

注:网页主要显示body中的内容. title内容是不显示与网页当中的.

1.2.1 meta标签

meta标签主要是给搜索引擎看的.
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

设置网站关键字
<meta name=“keywords” content=“网络安全，WEB渗透，数据安全，渗透测试，安全培训” />
<link> 标签定义文档与外部资源的关系。
<script> 引入js文件

注释
<!- -这是一段注释。注释不会在浏览器中显示。- ->
<p>这是一段普通的段落。</p>

在这里插入图片描述

1.2.2 标题标签

由大到小
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
</br> 换行标签
<hr>换行线标签

在这里插入图片描述
在这里插入图片描述

1.2.3 文本属性

<strong>加粗</strong>
<b></b>加粗
<i></i>斜体
<u></u> 下划线
<sup></sup>上标
<sub></sub>下标
<del></del> 删除线
<font></font> 规定字体属性

  • size 字体的大小
  • color 字体颜色

代码样式原样输出
<pre></pre>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.2.4 form表单

form表单 就是提供向服务器发送数据用的.

  1. 规定当提交表单时向何处发送表单数据
    method 提交的方法有 get、post. 获取搜索时是get, 登录时是post.

  2. 规定在发送表单数据之前如何对其进行编码。
    enctype 属性可能的值
    application/x-www-form-urlencoded
    multipart/form-data
    text/plain
    注: 前俩个用的多第二个文件上传用到了.

input标签

  • name：同样是表示的该文本输入框名称。
  • size：输入框的长度大小。
  • maxlength：输入框中允许输入字符的最大数。
  • value：输入框中的默认值
  • readonly：表示该框中只能显示，不能添加修改。
    注: 几乎每个input标签都会有这几个属性.
    &nbsp空格标签. 密码类型type不能看到明文.
    for 与id组合使用, 实现了点击标签名自动定位到输入框的功能.

input的类型

  • type=password 密码输入框

  • type=file 文件上传

  • type=hidden 隐藏域(网页上看不到,但实际传送中可以看到)

  • button 按钮

  • checkbox 复选框(能够重复选择的小方框)

  • radio 单选框

  • type=submit 提交按钮

  • type=reset 重置按钮

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="" method="post" >
			<label>用户名：</label><input type="text" name="username" size="30" maxlength="4" value="admin" readonly/></br>
			<label>密&nbsp;码：</label><input type="password" name="password" /></br>
			<label for="email">邮&nbsp;箱：</label><input type="text" name="email" id="email" /></br>
			<label>技&nbsp;能：</label>安全开发<input type="checkbox">渗透测试<input type="checkbox"></br>
			<label>性&nbsp;别：</label>男<input type="radio" value="1" name="sex">女<input type="radio" name="sex" value="2"></br>
			<input type="hidden" value="1"/>
			<input type="submit" vale="提交"/>
			<input type="reset" value="重置" />
			<input type="button" value="button" />
		</form>
		
		<hr>
		
		<form method="post" enctype="multipart/form-data">
			<input type="file" name="file" />
			<input type="submit" />
		</form>
	</body>
</html>

在这里插入图片描述

1.2.5 a标签

a标签的作用：就是用于控制界面与页面之间的跳转

默认就是self
self：用于在当前选项卡中跳转，也就是不新建页面跳转

_blank ：用于在新的选项卡中跳转，也就是新建页面跳转

<a href=“http://www.baidu.com” target=“self”>百度</a>
<a href=“http://www.baidu.com” target=“_blank”>百度</a>

_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。

1.2.6 锚文本

<a href=“#2”>锚点</a>
<a name=“2”>锚点</a>

例如返回顶部功能就是用到了锚点技术.

1.2.7 img 标签

img 元素向网页中嵌入一幅图像。
<img src=“/i/eg_tulip.jpg” alt=“上海鲜花港 - 郁金香” />
alt是图名

alt 规定图像的替代文本。
src 规定显示图像的url, 本地路径或者网上图片.
width 规定图片的高度
height 规定图片的宽度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第三课</title>
	</head>
	<body>
		<p name="top">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
		<a href="http://www.baidu.com">百度</a>
		<a href="http://www.baidu.com" target="_self">百度</a>
		<a href="http://www.baidu.com" target="_blank">百度</a>
		<a href="#top">返回顶部</a></br>
	</hr>
	<img src="img/logo.jpg" width="100" height="100" alt="logo">
	</body>
</html>

在这里插入图片描述

1.2.8.table 表格(重要)

<caption>我的标题</caption>表格带标题
border 边框
width 宽度
height 高度
colspan 行 可以用于合并表格操作
rowspan 竖 可以用于合并表格操作
<th></th> 表头
<tr>行</tr> 代表一行
<td>单元表格</td>
cellpadding 单元边与内容的空白
cellspacing 单元格与边框的空白

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table border="1" cellpadding='10' cellspacing='10' >
			<caption>姓名 图</caption>
			<tr><th>#</th><th>姓名</th><th>年龄</th></tr>
			<tr><td>1</td><td>鲁班</td><td>30</td></tr>
			<tr><td>2</td><td>马超</td><td>15</td></tr>
		</table>
		
		
		<table border="1" cellpadding='10'>
			<tr><th>#</th><th>姓名</th><th>年龄</th></tr>
			<tr><td>1</td><td>刘备</td><td rowspan='2'>30</td></tr>
			<tr><td>2</td><td>鲁班</td></tr>
			<tr><td>3</td><td>马超</td><td>15</td></tr>
			<tr><td>4</td><td>鲁班大师</td><td rowspan='2'>40</td></tr>
			<tr><td>5</td><td>典韦</td></tr>
			<tr><td>总数</td><td colspan="2">6</td></tr>
		</table>
	</body>
</html>

在这里插入图片描述

1.2.9 列表标签

1.2.9.1 无序列表
项目符号 square circle disc

<ul type=“disc”>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

1.2.9.2 有序列表
数字列表 默认 数字
小写字母列表 a
大写字母列表 A
罗马字母列表  I
小写罗马字母列表 i

<ol type=“1”> <!–有序列表–>
<li>暗月实战项目九 不出网的情况下的内网多域控渗透</li>
<li>xp/2003开关3389指令</li>
<li>一条命令修改windows注册表</li>
</ol>

发现只需赋予type不同的数值,即可表达不同的表达.

1.2.9.3 案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第四课</title>
	</head>
	<body>
		<ul type="disc"> <!--无序列表-->
                       
			<li>暗月实战项目九 不出网的情况下的内网多域控渗透</li>
			<li>xp/2003开关3389指令</li>
			<li>一条命令修改windows注册表</li>
		</ul>
			<ol type="1"> <!--有序列表-->
				<li>暗月实战项目九 不出网的情况下的内网多域控渗透</li>
				<li>xp/2003开关3389指令</li>
				<li>一条命令修改windows注册表</li>
			</ol>
	</body>
</html>

在这里插入图片描述

1.2.10 框架的使用

frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。必须使用 cols 或 rows 属性。

frameset 在一个页面中设置一个或多个框架 不能嵌套在body标签里
iframe 是在html页面内嵌入框架 框架内可以连接另一个页面

frameset 不能在body内使用
frame 一般都是在frameset中使用
cols 定义框架集中列的数目和尺寸
rows 定义框架集中行的数目和尺寸

scrolling 滚动条
auto 在需要的情况下出现滚动条（默认值）。
yes 始终显示滚动条（即使不需要）。
no 从不显示滚动条（即使需要）

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<frameset cols="30%,*" >
		<frame src="http://www.baidu.com" scrolling="no"/>
		<frame src="http://www.sogou.com" />
	</frameset>
	<body>
		
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<frameset rows="50%,50%" >
		<frame src="http://www.baidu.com" scrolling="no"/>
		<frame src="http://www.sogou.com" />
	</frameset>
	<body>
		
	</body>
</html>

在这里插入图片描述
在这里插入图片描述

1.2.11 案例:框架

设计一个简单的web页面,实现添加文章与显示文章列表的功能

<!--
	作者：offline
	时间：2023-07-04
	描述：top.html
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		top
	</body>
</html>
-------------------------------
<!--
	作者：offline
	时间：2023-07-04
	描述：left.html
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li><a href="add.html" target="add">添加文章</a></li>
			<li><a href="artlist.html" target="add">文章列表</a></li>
			<li><a href="#">系统信息</a></li>
			<li><a href="#">备份</a></li>
		</ul>
	</body>
</html>
----------
<!--
	作者：offline
	时间：2023-07-04
	描述：main.html
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		main
	</body>
</html>
------
<!--
	作者：fcj
	时间：2023-07-04
	描述：这是首页
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<frameset rows="20%,*">
		<frame src="top.html" />
		<frameset cols="20%,*">
			<frame src="left.html" />
			<frame src="main.html" name="add"/>
		</frameset>
		
	</frameset>
	<body>
	</body>
</html>
-----
<!--
	作者：fcj
	时间：2023-07-04
	描述：这是添加文章
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form method="post">
			标题：<input type="text" /><br>
			内容：<textarea cols="40" rows="20"></textarea>
			<input type="submit" />
		</form>
	</body>
</html>
----
<!--
	作者：fcj
	时间：2023-07-04
	描述：这是文章列表
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ol>
			<li><a href="#"> 不出网的情况下的内网多域控渗透</a></li>
			<li><a href="#"> 不出网的情况下的内网多域控渗透</a></li>
			<li><a href="#"> 不出网的情况下的内网多域控渗透</a></li>
			<li><a href="#"> 不出网的情况下的内网多域控渗透</a></li>
			<li><a href="#">不出网的情况下的内网多域控渗透</a></li>
			<li><a href="#">项目九 不出网的情况下的内网多域控渗透</a></li>
			<li><a href="#">实战项目九 不出网的情况下的内网多域控渗透</a></li>
			<li><a href="#">实战项目九 不出网的情况下的内网多域控渗透</a></li>
		</ol>
	</body>
</html>

效果如下:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2 web安全DIV、CSS基础

2.1 DIV、CSS样式

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

DIV是html的一个标签 css是一个样式表

2.2 样式表类型

2.2.1 嵌入样式表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.demo1{
				color: red;
				width: 100px;
				height: 100px;
				background: blue;
			}
			
		</style>
	</head>
	<body>
		<div class="demo1">
			demo1
		</div>
	</body>
</html>

嵌入样式表在head中设置.

2.2.2.外部样式

<link rel=“stylesheet” href=“css/style.css”/>

@import url
@import url("g.css");
.demo1{
				color: red;
				width: 100px;
				height: 100px;
				background: blue;
			}

2.2.3.内联样式

<div style=“color: blue;width: 100px;height: 100px; background: black;”>demo2</div>
内联样式在div中实现

示例:三种样式实现

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.3 注释

/* */ 注释内容

2.4 样式选择器

  • 元素选择器 div{属性:值}

  • ID选择器 #id{属性:值}

  • class选择器 .类名{属性:值}

  • 子选择器 元数 空格 元素{属性:值}

  • 后代选择器 元数 > 元数{属性:值}

  • 属性选择器 元素[属性]{}

  • 通配符选择器 *{属性:值}

  • 群组选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0px;   /*外边距*/
				padding: 0px;  /*内边距*/
			}
			
			/*
			div{
				border: 10px solid blue;
			}
			*/
			
			.demo1{
				color: yellow;
				width: 200px;
				height: 200px;
				background: red;
			}
			#id1{
				color: yellow;
				width: 200px;
				height: 200px;
				background:black;
			}
		</style>
	</head>
	<body>
		<div class="demo1">
			demo1
		</div>
		
		<div id="id1">
			id1
		</div>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{      /*通配符选择器*/
				margin: 0px;
				padding: 0px;
			}
			
			/*
			div{          属性选择器
				border: 10px solid blue;
			}
			*/
			
			.demo1,#id1{             /*群组选择器,把重复的值写在一起*/
				width: 200px;
				height: 200px;
			}
			.demo1{                /*类选择器*/
				color: yellow;
			
				background: red;
			}
			#id1{                /*ID选择器*/
				color: yellow;
			
				background:black;
			}
			/*
			.demo2 p{         子选择器
				color: red;
			}
			*/
			.demo2 > p{      /*子选择器*/
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="demo1">
			demo1
		</div>
		
		<div id="id1">
			id1
		</div>
		
		<div class="demo2">
			<p>这是一个段落</p>
		</div>
		
	</body>
</html>

在这里插入图片描述

2.5 背景

background-color 规定要使用的背景颜色。

background-position 规定背景图像的位置。

background-size 规定背景图片的尺寸。

background-repeat 规定如何重复背景图像。

background-origin 规定背景图片的定位区域。

background-clip 规定背景的绘制区域。

repeat 默认。背景图像将在垂直方向和水平方向重复。

repeat-x 背景图像将在水平方向重复。

repeat-y 背景图像将在垂直方向重复。

no-repeat 背景图像将仅显示一次。

inherit 规定应该从父元素继承 background-repeat 属性的设置。

background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。

background-image 规定要使用的背景图像。

inherit 规定应该从父元素继承 background 属性的设置。

left top

left center

left bottom

right top

right center

right bottom

center top

center center

center bottom

*简写*

background: url(images/bg.gif) no-repeat top right

背景图片的滚动

背景图片是否随着内容的滚动而滚动由background-attachment设置

background-attachment:fixed; 固定，不随内容的滚动而滚动 平常用的比较多

background-attachment:scroll; 滚动，随内容的滚动而滚动

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				/*background-color: #FFFF00;*/
				background-image: url(img/1.jpg);
				background-repeat: no-repeat;
				background-attachment: fixed;
				/*background-repeat:repeat-y;
				background-repeat:repeat-x;*/
			}
		</style>
	</head>
	<body>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
		<p>xxxxxxxxxxxxxxxxx</p>
	</body>
</html>

在这里插入图片描述

简化的写法如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				/*background-color: #FFFF00;
				background-image: url(img/1.jpg);
				background-repeat: no-repeat;
				background-attachment: fixed;
				/*background-repeat:repeat-y;
				background-repeat:repeat-x;*/
				background: url(img/1.jpg) no-repeat fixed;   /*简化的写法更合适*/
			}
		</style>
	</head>
	<body>
	</body>
</html>

2.6 边框

边框颜色 border-color:#000

边框宽度 border-width:1px;

注:px是像素的意思10px就是10个像素.

border-left 设置左边框，一般单独设置左边框样式使用

border-right 设置右边框，一般单独设置右边框样式使用

border-top 设置上边框，一般单独设置上边框样式使用

border-bottom 设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。

边框样式值如下：

  • none : 　无边框。与任何指定的border-width值无关

  • hidden : 　隐藏边框。IE不支持

  • dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线（常用）

  • dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线（常用）

  • solid : 　实线边框（常用

  • double : 　双线边框。两条单线与其间隔的和等于指定的border-width值

groove : 　根据border-color的值画3D凹槽

ridge : 　根据border-color的值画菱形边框

inset : 　根据border-color的值画3D凹边

outset : 　根据border-color的值画3D凸边

简写

border:5px solid red;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.demo6{
				/*width: 400px;
				height: 400px;
				border-width: 10px;
				border-style: solid;
				border-color: red;*/
				
				border: 1px solid red;    /*简写的, 边框大小,实现,颜色*/
				height: 400px;   /*边框高度*/
				width: 400px;
			}
			
			.demo7{    					/*类选择器*/
				margin-top:10px;
				width: 500px;
				height: 500px;
				border-width: 20px;
				border-color: red;
				border-top: solid;
				border-left:double;
				border-right: dotted ;
				border-bottom: groove;
				
			}
		</style>
	</head>
	<body>
		<div class="demo6">  
			
		</div>
		
		<div class="demo7">
			
		</div>
	</body>
</html>

在这里插入图片描述

2.7 文字属性

color:red; 文字颜色 #ffeeees

font-size:12px; 文字大小

font-weight:bold 文字粗细(bold/normal)

font-family:”宋体”文字字体

font-variant:small-caps小写字母以大写字母显示

2.8 文本属性

text-align:center; 文本对齐(right/left/center)

line-height:10px;== 行间距==(可通过它实现文本的垂直居中)

text-indent:20px; 首行缩进

text-decoration:none; 消除文本修饰

文本线(none/underline/overline/line-through) underline/overline/line-through; 定义文本上的下划线/上划线/中划线

letter-spacing: 字间距

练习案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文字 文本的属性</title>
	<style>
		body{
			color:red;
			font-family: "微软雅黑";
			font-size: 14px;
			
			
		}
		.demo7{
			font-variant:small-caps;  
			border: 1px solid red;  /*边框 实线红*/
			text-align: center;    /*居中*/
		}
		.p1{							/*在body中定义可行, 在p1中定义也行*/
			line-height: 30px;
			text-indent:20px;     /*首行缩进*/
		}
		a{
			text-decoration: none;		/*a标签里面让点击了解失去下划线功能, a标签是一个跳转*/
		}
	</style>
	</head>
	<body>
		<div class="demo7">
			demo7
		</div>
<p class="p1">项目九 是一个<span style="font-weight:bold;">多域控</span> 而且不出网的环境，是根据实际的环境改造而来。多
个域控应用在大型内网中，其中域控分有主域控，支部域控。例如一个公司在北
京有个总部办事处，广州有办事处，在上海也有办事处。每一个区域除了处理自
身的事务。而且个各个地方办事处内部信息共享，信息同步等。多个域控也类似，
可以信息同步。
本项目是一个不出网的环境，不出网就是内网不能访问外部。只允许入站，
入网的意思是允许访问。本项目存在多个后端防火墙，可控制出站协议。存在多
个 DMZ （隔离区、非军事化区），也存在多个 VPN 点对点通信。
本项目不出网 所以向 metasploit 和 cobalt strike 这种针对内网渗透的工具
都不能在当前环境使用，进行这种测试要用到许多的小工具和技巧，而且环境复
杂测试起来要非常有耐心，非常考验渗透测试水平。
本项目是模拟红队对外网目标进行打点，经过多种渗透测试方法，找到入口
点，接着通过入口点对内部网络进行渗透测试，并且打穿整个内网，拿到指定渗
透域控，定位运维组人员，拿下运维机子，登录指定目标，获取信息。
本项目能学习 WEB 方面 java 框架的网站渗透，黑盒漏洞挖掘，垂直越权，
文件任意下载，多个逻辑漏洞，中间件 tomcat 利用，goby 扫描器使用，xray 被
动扫描器使用、kali 最版版本的使用，java 应用环境搭建。
本项目能学习内网方面，不出网下渗透高度复杂的内网渗透域渗透、多域渗
透、exchange 破解、，包括代理隧道、端口转发，多层网络横向渗透，跨网段渗
透，突破防火墙、渗透防火墙、ICMP 反弹 shell、DNS 后门，IPC 内网渗透，kali
渗透，端口扫描，mimikatz、nc 反弹 shell、密码记录，token 令牌获取，njrat 远
控，ladon 扫描器 、Behinder 等工具的使用。。<a href="https://edu.moonsec.com">点击了解</a></p>
	</body>
</html>

在这里插入图片描述

2.9 列表

list-style-type 设置列表项标记的类型。参阅：list-style-type 中可能的值。
list-style-position 设置在何处放置列表项标记。参阅：list-style-position 中可能的值。
list-style-image 使用图像来替换列表项的标记。参阅：list-style-image 中可能的值。
inherit 规定应该从父元素继承 list-style 属性的值

取值:disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit

    disc: 点   /*disc圆盘,磁盘*/
    circle: 圆圈
    square: 正方形
    decimal: 数字
    decimal-leading-zero: 十进制数，不足两位的补齐前导0，例如: 01, 02, 03, ..., 98, 99
    lower-roman: 小写罗马文字，例如: i, ii, iii, iv, v, ...
    upper-roman: 大写罗马文字，例如: I, II, III, IV, V, ...
    lower-greek: 小写希腊字母，例如: α(alpha), β(beta), γ(gamma), ...
    lower-latin: 小写拉丁文，例如: a, b, c, ... z
    upper-latin: 大写拉丁文，例如: A, B, C, ... Z
    armenian: 亚美尼亚数字
    georgian: 乔治亚数字，例如: an, ban, gan, ..., he, tan, in, in-an, ...
    lower-alpha: 小写拉丁文，例如: a, b, c, ... z
    upper-alpha: 大写拉丁文，例如: A, B, C, ... Z
    none: 无(取消所有的list样式)
    inherit:继承

list-style-position

  • inside
    列表项目标记放置在文本以内，且环绕文本根据标记对齐。

  • outside
    默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

简写
list-style:square inside url('/i/arrow.gif');

2.10 超链接

  • a{text-decoration: none;}
  • a:link {color:#FF0000;} /* 未访问的链接 */
  • a:visited {color:#00FF00;} /* 已访问的链接 */
  • a:hover {color:#FF00FF;} /* 鼠标划过链接,鼠标放上去的颜色 */
  • a:active {color:#0000FF;} /* 已选中的链接 */

练习案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.demo8{
				/*list-style: decimal;   有序列表
				list-style-position:outside;
				list-style-image:url(img/e.gif);
				*/
				list-style: url(img/e.gif) outside;    /*这个GIF图是一个小箭头  小箭头在一行的外面*/
			}
			.demo8 a{
				text-decoration: none;   /*去掉文本修饰_下划线*/
				
			}
			.demo8 a:hover{     	/* 鼠标划过链接 */
				color: red;
			}
			.demo8 a:visited {		/*鼠标访问过的颜色*/
				color: yellow;
			}
			.demo8 a:link{			/* 未访问的链接 */
				color: brown;
			}
			.demo8 a:active{		/* 已选中的链接 */
				color: blue;
			}
		</style>
	</head>
	<body>
		<ul class="demo8">
			<li><a href="https://www.moonsec.com/archives/3072">实战项目九 不出网的情况下的内网多域控渗透</a></li>
			<li><a href="https://www.moonsec.com/archives/3072">实战项目九 不出网的情况下的内网多域控渗透</a></li>
			<li><a href="https://www.moonsec.com/archives/3072">实战项目九 不出网的情况下的内网多域控渗透</a></li>
			<li><a href="https://www.moonsec.com/archives/3072">实战项目九 不出网的情况下的内网多域控渗透</a></li>
			<li><a href="https://www.moonsec.com/archives/3072">实战项目九 不出网的情况下的内网多域控渗透</a></li>
			<li><a href="https://www.google.com">实战项目九 不出网的情况下的内网多域控渗透</a></li>
		</ul>
	</body>
</html>

outside
在这里插入图片描述
在这里插入图片描述

2.11 盒子模型

IE盒子模型
在这里插入图片描述

盒子模型的组成部分

外边距（margin）、边框（border）、内边距（padding）、内容（content）四个属性

  • 自身的身高 width height

  • 内边距 padding

  • 盒子边框 border

  • 与其他盒子的距离 margin 外边距

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.demo9{
				margin: 10px;
				border: 1px solid red;
				padding: 20px;
			}
		</style>
	</head>
	<body>
		<div class="demo9">
			demo9
		</div>
	</body>
</html>

在这里插入图片描述
图片显示了各元素所占用的像素
在这里插入图片描述

2.12 Border边框

常见的写法 border:1px solid #foo;

单独属性:

  • border-width:

  • border-style:

  • dotted 点状虚线

  • dashed（虚线）

  • solid（实线）

  • double（双实线)

  • border-color(颜色)

(1) padding:内边距

值：像素(ps)/厘米等长度单位、百分比

  • padding:10px; 上下左右
  • padding:10px 10px; 上下 左右
  • padding:10px 10px 10px; 上 左右 下
  • padding:10px 10px 10px 10px; 上 右 下 左（设置4个点–>顺时针方向）

单独属性

  • padding-top:
  • padding-right:
  • padding-bottom:
  • padding-left:

当设置内边距的时候会把盒子撑大，为了保持盒子原来的大小，应该高度和宽度进行减小，根据width和height减小

(2) margin 外边距

值：与padding相同

单独属性：与padding相同

外边距合并：两个盒子同时设置了外边距，会进行一个外边距合并

margin

margin:10px 上下左右都会腾出10px出来

margin:0px auto; 居中

<!DOCTYPE html>
<html>
   <head>
   	<meta charset="UTF-8">
   	<title></title>
   	<style>
   		.demo10{
   			width: 400px;
   			height: 400px;
   			border-width: 10px;
   			/*border-style: dotted ;*/
   			border-top: solid;
   			border-bottom: dashed;
   			border-left: dotted ;
   			border-right: double;
   			border-color: red;
   		}
   	</style>
   </head>
   <body>
   	<div class="demo10">
   		demo10
   	</div>
   </body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.demo12{
				width: 400px;
				height: 400px;
				border: 1px solid red;
				/*margin: 20px 30px 10px 40px;   上右下左*/  
				padding-top: 10px;
				padding-bottom: 20px;
				margin-top:20px;     /*外边距顶部*/
				
			}
		</style>
	</head>
	<body>
		<div class="demo12">    
			demo12
		</div>
		
		<div class="demo12">    
			demo12
		</div>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.demo13{
				width: 400px;
				height: 400px;
				border: 1px solid red;
				/*margin: 20px 30px 10px 40px;*/
				margin: 0px auto;  		/*上下为0,左右边距自动*/
				text-align: center;		/*内容居中*/
				
			}
		</style>
	</head>
	<body>
	
		
		<div class="demo13">
			demo12
		</div>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.13 float 脱离文档流浮动

left 元素向左浮动。
right 元素向右浮动

清除浮动,也可以清除部分
clear: both;
left
right

浮动实现了由竖向排列到横向排列.

<!DOCTYPE html>
<html>
   <head>
   	<meta charset="UTF-8">
   	<title></title>
   	<style>
   		div{
   			width: 200px;
   			height: 200px;
   			border: 1px solid red;
   		
   		}
   		.div1,.div2{
   				float: left;		/*左浮动*/
   		}
   		.div3 {
   			float: right;			/*右浮动*/
   		}
   		.div4{
   			width: 400px;
   			height: 400px;
   			border: 1px solid blue;  /*高度与宽度是与左上角顶点为基础的*/
   			clear: both;			/*清除浮动*/
   		}
   	</style>
   </head>
   <body>
   	<div class="div1">
   		div1
   	</div>
   	<div class="div2">
   		div2
   	</div>
   	<div class="div3">
   		div3
   	</div>
   	
   	<div class="div4">
   		div4
   	</div>
   </body>
</html>

在这里插入图片描述

2.14 块级元素、行内元素

  1. 块级元素

他会独占一行，在默认情况下，其宽度自动填满其父元素的宽度；

块级元素可以设置width、height属性；

块级元素即使设置了宽度也是独占一行，块级元素可以设置margin、padding属性；

块级元素(block element)

  • address 地址
  • center 举中对齐块
  • div- 常用块级容易
  • dl 定义列表
  • form 交互表单 （只能用来容纳其它块元素）
  • h标签
  • hr 水平分隔线
  • ol 无序列表
  • ul有序列表
  • p 段落
  • pre 格式化文本
  1. 行内元素：

行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到行排不下，就自动换行，其宽度随内容而变化；

行内元素的width、height属性则无效；,即无法设置长宽值.

行内元素的margin、padding属性很奇怪，水平方向的padding-left、padding-rigtht、margin-left、padding-right都会产生边距效果，但是竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不产生边距效果。

行内元素：

  • a - 锚点

  • b - 粗体(不推荐)

  • br- 换行

  • code - 计算机代码(在引用源码的时候需要)

  • em - 强调

  • i - 斜体

  • img - 图片（特殊的内联元素，同时是内联替换元素，替换元素可以设置宽高）

  • 当图片和DIV在一起时，图片周围会出现margin现象，即元素不重合贴在一起，为了解决这个问题，设置img的css为{margin：0；display：block；border：0px}

  • input - 输入框

  • label - 表格标签

  • select - 项目选择

  • strong - 粗体强调

  • textarea - 多行文本输入框

  • u - 下划线

  • var - 定义变量

替换元素有如下：（和img一样的设置方法）

<img>、<input>、<textarea>、<select>, <object>都是替换元素，这些元素都没有实际的内容

  1. 行内元素转换

display:none; 不显示

display:block;变成块级元素

display:inline; 变成行内元素

display:inline-block;以块级元素样式排列(可以设置长宽值)，以行级元素样式展示(俩个元素在同行)

练习案例

<!DOCTYPE html>
<html>
   <head>
   	<meta charset="UTF-8">
   	<title></title>
   	<style>
   		.demo15,h1,form{
   			border: 1px solid red;
   			height: 100px;
   			width: 400px;
   		}
   	</style>
   </head>
   <body>
   	<div class="demo15">demo15</div>
   	<h1>h1</h1>			
   	<form>表单</form>		
   		
   	<!--行内元素,不会独占一行-->
   	
    <a href="https://www.baidu.com">baidu</a><label>标签</label><input type="text" value="输入的内容">
   </body>
</html>


<!DOCTYPE html>
<html>
   <head>
   	<meta charset="UTF-8">
   	<title></title>
   	<style>
   		.demo16,.demo17{
   			border: 1px solid red;
   			height: 100px;
   			width: 400px;
   			display: block;  /*转换为块级元素*/
   		}
   		.s1,.s2{
   			border: 1px solid red;
   			display:inline-block;
   			height: 100px;
   			width: 100px;
   		}
   	</style>
   </head>
   <body>
   	<div class="demo16">demo16</div>
   	<div class="demo17">demo17</div>
   	<span class="s1">sss</span><span class="s2">sss</span>
   </body>
</html>

在这里插入图片描述
在这里插入图片描述

2.15 溢出

overflow 属性规定当内容溢出元素框时发生的事情。

visible 默认值。内容不会被修剪，会呈现在元素框之外。

hidden 内容会被修剪，并且其余内容是不可见的。

scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit 规定应该从父元素继承 overflow 属性的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.demo17{
				width: 200px;
				height: 200px;
				border: 1px solid red;
				overflow:hidden;    	/*超过部分隐藏*/
				/*overflow:scroll; */
			}
		</style>
	</head>
	<body>
		<div class="demo17">ssssssssssssssssssssssssssssssssssssssssssssss</div>
	</body>
</html>

在这里插入图片描述

2.16 定位

position

  • static静态定位（不对它的位置进行改变，在哪里就在那里）

默认值。没有定位，元素出现在正常的流中（忽略 top,bottom, left, right 或者z-index 声明）。

  • fixed固定定位（参照物–*浏览器窗口*）—做 弹窗广告用到

生成固定定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 “left”, “top”, "right"以及 "bottom"属性进行规定。

  • relative（相对定位 ）（*参照物以他本身*）

生成相对定位的元素，相对于其正常位置进行定位。

  • absolute（绝对定位）(除了static都可以，找到参照物–>与它最近的已经有定位的父元素进行定位

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定

  • z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

定位的基本思想: 它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 300px;
				height: 300px;
			}
			.div1{
				background: red;
			}
			.div2{
				width: 500px;
				height: 500px;
				background: blue;
				position: relative;		/*div2以自己的原有位置为参照物*/
				left: 40px;			/*PS像素*/
				top:50px;
			}
			.div3{
				background: green;
			}
			.div4{
				width: 150px;
				height: 150px;
				background: yellow;
				position: absolute;		/*绝对定位,以div2为参照物*/
				top: 100px;				/*以div2(第一个父类)为参照*/
				left: 100px;
				z-index: -1;  /*在div2下层*/
			}
			
			.div5{
				width: 150px;
				height: 150px;
				background: black;
				position: absolute;		/*绝对定位,以div2为参照物*/
				top: 120px;
				left: 120px;
				z-index: 1;  /*在div2上层*/
			}
		</style>
	</head>
	<body>
		<div class="div1"></div>
		<div class="div2"><div class="div4"></div><div class="div5"></div></div>	<!--div2是div4与div5的父类-->
		<div class="div3"></div>
	</body>
</html>

在这里插入图片描述

3 web安全HTML、div、css博客项目

对前面所学知识的综合练习

3.1 博客网站布局与导航栏编写

网站的布局在这里插入图片描述
在这里插入图片描述

3.2 博客网站主体左边的制作

在这里插入图片描述

3.3 博客网站主体右边的制作

在这里插入图片描述

3.4 博客网站主体底部的制作

在这里插入图片描述

3.5 源码

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
<link rel="stylesheet" href="css/style.css" />  <!--链接文件-->
	</head>
	<body>
		<div id="header">      <!--定义头部主体,ID选择器-->
			<div class="head">    <!--头部类包含了logo与导航-->
			<div class="logo">	<!--定义log类,创建元素-->
				<img src="img/log.png" />  <!--插入图片元素-->
			</div>
			<ul class="nav">	<!--定义导航类,创建元素-->
				<li><a href="#">首页</a></li>	<!--a标签,链接跳转-->
				<li><a href="#">代码审计</a></li>
				<li><a href="#">安全防御</a></li>
				<li><a href="#">下载</a></li>
				<li><a href="#">渗透测试</a></li>
				<li><a href="#">渗透编程</a></li>
				<li><a href="#">靶机练习</a></li>
				<li><a href="#">WEB安全培训</a></li>
				<li><a href="#">公开课</a></li>
			</ul>
			<form class="f1" method="get">    <!--搜索框是一个form表单,,方法,input. 空格的表示-->
				<input type="text" placeholder="请输入搜索的内容" />&nbsp;
				<input  class="i1" type="submit" value="搜索">
			</form>
			</div>
		</div>
		<div id="main">			<!--定义主体-->
			<div id="main-left">  <!--定义主体左部-->
				<div class="a1">
					<a href="#">最新文章</a>  <!--跳转链接-->
				</div>
				<div class="artitle">   <!--这篇文章里面有5个div,item项目,一则-->
					<div class="item-img"> <!--图片-->
						<a href="#"><img src="img/10.jpg"></a>
						<a href="#" class="a2">红队技术</a>
					</div>
					
					<div class="item-list">  <!--文章列表-->
					<div class="item-title"> <!--文章标题-->
						<a href="#">不出网的情况下的内网多域控渗透 </a><!--a标签-->
					</div>
					<div class="item-contnet"><!--文章内容p标签-->
						<p>项目九 是一个多域控 而且不出网的环境，是根据实际的环境改造而来。多 个域控应用在大型内网中，其中域控分有主域控，支部域控。例如一个公司在北 京有个总部办事处，广州</p>
					</div>
					<div class="item-data"> <!--文章日期-->
						2023年7月6日
					</div>
					</div>
				</div>
				<div class="artitle">
					<div class="item-img">
						<a href="#"><img src="img/12.jpg"></a>
						<a href="#" class="a2">红队技术</a>
					</div>
					
					<div class="item-list">
					<div class="item-title">
						<a href="#">暗月实战项目九 不出网的情况下的内网多域控渗透 </a>
					</div>
					<div class="item-contnet">
						<p>项目九 是一个多域控 而且不出网的环境，是根据实际的环境改造而来。多 个域控应用在大型内网中，其中域控分有主域控，支部域控。例如一个公司在北 京有个总部办事处，广州</p>
					</div>
					<div class="item-data"> 
						2023年7月6日
					</div>
					</div>
				</div>
				<div class="artitle">
					<div class="item-img">
						<a href="#"><img src="img/13.jpg"></a>
						<a href="#" class="a2">红队技术</a>
					</div>
					
					<div class="item-list">
					<div class="item-title">
						<a href="#">暗月实战项目九 不出网的情况下的内网多域控渗透 </a>
					</div>
					<div class="item-contnet">
						<p>项目九 是一个多域控 而且不出网的环境，是根据实际的环境改造而来。多 个域控应用在大型内网中，其中域控分有主域控，支部域控。例如一个公司在北 京有个总部办事处，广州</p>
					</div>
					<div class="item-data"> 
						2023年7月6日
					</div>
					</div>
				</div>
				<div class="artitle">  <!--第四篇文章-->
					<div class="item-img">
						<a href="#"><img src="img/14.jpg"></a>
						<a href="#" class="a2">红队技术</a>
					</div>
					
					<div class="item-list">
					<div class="item-title">
						<a href="#">暗月实战项目九 不出网的情况下的内网多域控渗透 </a>
					</div>
					<div class="item-contnet">
						<p>项目九 是一个多域控 而且不出网的环境，是根据实际的环境改造而来。多 个域控应用在大型内网中，其中域控分有主域控，支部域控。例如一个公司在北 京有个总部办事处，广州</p>
					</div>
					<div class="item-data"> 
						2023年7月6日
					</div>
					</div>
				</div>
				
				<div class="a3">   <!--位于左主体-->
					<a href="#">点击查看更多</a>
				</div>
			</div>
			<div id="main-right"> <!--定义主体右部-->				
				<div class="news">   <!--主体右边的第一个框-->
					<div class="newlist">近期文章</div>
					<ul class="news-li">   <!--无序列表-->
						<li><a href="#">实战项目九 不出网的情况下的内网多域控渗透</a></li>
						<li><a href="#">ICMP隧道反弹shell</a></li>
						<li><a href="#">一条命令修改windows注册表</a></li>
						<li><a href="#">xp/2003开关3389指令</a></li>
						<li><a href="#">实战项目九 不出网的情况下的内网多域控渗透</a></li>
						<li><a href="#">xp/2003开关3389指令</a></li>
						<li><a href="#">xp/2003开关3389指令</a></li>
						<li><a href="#">xp/2003开关3389指令</a></li>
						<li><a href="#">xp/2003开关3389指令</a></li>
					</ul>
				</div>
				<div class="news">  <!--主体右边的第二个框-->
					<div class="newlist">文章归档</div>
					<ul class="news-li">   <!--无序列表-->
						<li><a href="#">2023年7月</a></li>
						<li><a href="#">2023年7月</a></li>
						<li><a href="#">2023年7月</a></li>
						<li><a href="#">2023年7月</a></li>
						<li><a href="#">2023年7月</a></li>
						<li><a href="#">2023年7月</a></li>
						<li><a href="#">2023年7月</a></li>

					</ul>
				</div>
			</div>
		</div>
		<div class="cls"></div>  <!--定义清除浮动标签-->
		<div id="footer">		<!--定义底部-->				
			<div class="footer-b">
				<div class="link">
					<li><a href="#">安全博客</a></li>
					<li><a href="#">WEB安全培训</a></li>
					<li><a href="#">安全团队</a></li>
					<li><a href="#">兔兔团队</a></li>
					<li><a href="#">M9KJ博客</a></li>
				</div>
				<div class="Copyright">
					<p>Copyright © 2018 WPCOM 版权所有 <a href="#"> 粤ICP备000000000号</a> Powered by WordPress</p>
				</div>
			</div>
		</div>
	</body>
</html>


		*{
				padding: 0px;   /*内边距*/
				margin: 0px;	/*外边距*/
			}
			body{
				font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Source Han Sans CN,sans-serif;
				background: #f5f5f5;  /*body属性字体,背景,行高,字体大小,颜色.*/
				line-height: 1.8;
				font-size:14px;
				color: #333;
			}
			
			#header{			/*定义header属性*/
				background: #ffffff;
				height: 70px;
				box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%);
			}
			.head{			/*定义头部类*/
				font-size: 16px;   /*字体大小*/
				width: 1024px;
				margin: 0px auto;  /*居中*/
			}
			.nav{		/*将导航去掉格式*/
				list-style: none;
			}
			.nav li{ 	/*导航标签li进行一下左浮动*/
				padding-top: 20px;  /*让导航标签离顶部一定距离*/
				margin-left: 15px;  /*让多个导航左右分开距离*/
				float:left; 	/*左浮动*/
			}
			a{
				text-decoration: none;  /*a标签去掉下划线等*/
				color: #333333;		/*加上颜色*/
			}
			.nav a:hover{   /*导航a标签鼠标滑过的颜色*/
				color:#337ab7;
			}
			.logo{
				padding-top: 20px;
				float:left; 		/*logo也需要左浮动一下*/
			}
			.logo img{			/*图片属性进行设置*/
				width: 110px;
				height: 25px;
			}
			.f1{
				padding-top:20px;
				float:right;/*右浮动*/
			}
			.f1 input{
				height: 25px;  /*搜索框高度大些*/
				border-radius: 3px; /*让搜索框更自然,棱角更圆*/
			}
			.i1{
				width: 50px;/*搜索框属性设置*/
				height: 30px;
			}
			#main{
				
				width: 1024px;
				margin: 0px auto; /*主体居中,定义主体属性*/
				margin-top:15px;  /*外边距顶部*/
				
			}
			#main-left{
				float: left;   /*只有左右部分都浮动才能呈左右型*/
				width: 750px;
				background: #fff;
			}
			.a1{
				font-size: 16px;
				padding:10px 0px 10px 0px;  /*上右下左*/
				margin-left: 10px;  /*外边距左*/
				border-bottom: 2px solid #337ab7;  /*下边框, 实线,颜色*/
				width: 70px;  /*定义a1的空间大小*/
			}
			.artitle{
				height: 180px;  /*给了高度最后一篇文章背景显白*/
				padding-top:15px; /*内边距*/
				border-top:1px solid #efefef ; /*边框*/
			}
			.a1 a{
				color: #337ab7;  /*定义a标签颜色*/
			}
			.item-img img{ /*调整图片大小*/
				width: 200px;
				height: 128px;
			}
			.item-list{
				
				width: 450px;
			}
			.item-img,.item-list{   /*图片与文章列表都左浮动*/
				float:left;
			}
			.item-title{
				font-size: 18px;
			}
			.item-title a:hover{  /*a标签鼠标滑过的颜色*/
				color: #3ca5f6;
			}
			.item-contnet{
				margin-top: 10px; /*外边距*/
				font-size: 14px;
				color: #666;
			}
			.item-data{
				margin-top: 30px;  /*外边距*/
				font-size: 13px;
				color: #999;
			}
			.a2{     /*红队技术设置*/
				font-size: 12px;
				color: #ffffff;   /*字体颜色*/
				background: #000;
				background: rgba(0,0,0,.6);  /*透明效果*/
				padding: 5px 6px;  /*上下左右*/
				position: relative;   /*相对于自己设置位置*/
				left: -190px;
				top:-110px;
			}
			.a2:hover{
				background: #337ab7;/*鼠标滑过的颜色*/
			}
			#main-right{
				float: left;/*右部主体左边浮动*/
				
			}
			.news{
				width: 250px;  /*右主体边框的宽*/
				background: #FFFFFF;  /*背景为白色*/
			}
			.newlist{
				height: 25px;
				font-size: 16px;
				border-left: 3px solid #08c;   /*左边框*/
				padding-left: 10px;  /*左内距,内容与左边框就形成一个分隔*/
				
			}
			#main-right{
				margin-left: 10px;   /*右主体的左边框,可以与左主体分离*/
				
			}
			.news{  /*整个边框*/
				padding: 10px 0px 15px 10px; /*上右下左,内容与边框的距离像素*/
				margin-bottom: 20px;/*俩个news,俩个div,所以定义下边距,就会使俩个边框分离*/
			}
			.news-li{
				
				list-style:square inside url(../img/a.png);  /*列表引入图片作为导航*/
				overflow: hidden;/*超出部分进行隐藏*/
				
			}
			
			.news-li a{     /*文章列表*/
				color: #666;
			}
			.news-li a:hover{  /*鼠标滑过的颜色,a标签颜色转换*/
				color:#3ca5f6;
			}
			.news-li li{
				margin-top: 10px;  /*上边距*/
			}
			.a3 a{
				display: block;  /*转换成块级元素展示*/
				padding: 10px 0px; /*上下,左右    居中   边框实线*/
				text-align: center; 
				border: 1px solid #e5e5e5;
				color: #999;
				border-radius: 3px;/*边框棱角更圆*/
			}
			.a3 a:hover{
				border: 1px solid #3ca5f6;/*鼠标放上去颜色变化,边框与字体颜色都要变化*/
				color: #3ca5f6;
				
			}
			#footer{  /*设置低部属性*/
				margin-top: 20px;  /*与主体框分离*/
				padding: 35px;
				padding-left:0px;
				background:#2d3237;
				color: #5f676f;
			}
			.cls{
				clear: both;/*因为之前有浮动,导致底部被覆,所以应该清除浮动*/
			}
			.footer-b{
				width: 1024px;  /*定义宽度*/
				margin: 0px auto;/*居中*/
			}
			.link{
				list-style: none;  /*去除样式*/
			}
			.link li{
				margin-left: 15px;
				float: left;  /*浮动实现横向排列*/
			}
			.link a,.Copyright a{
				color: #76818c;
			}
			.link a:hover,.Copyright a:hover{  /*鼠标划过颜色*/
				color: #b3c0ce;
			}
			.Copyright{
				padding-top:10px;
				margin-left: 12px;
				font-size: 12px; /*字体大小*/
				clear: left;  /*清除浮动*/
			}

在这里插入图片描述

[网络安全自学篇] 七十八.XSS跨站脚本攻击案例分享及总结（二）
杨秀璋的专栏
05-18 1万+
这是作者网络安全自学教程系列，主要是关于安全工具和实践操作的在线笔记，特分享出来与博友们学习，希望您喜欢，一起进步。前文分享了肖老师（Seak）的分享，介绍恶意代码与APT攻击中的武器，包括A2PT的攻击武器、普通APT组织的自研恶意代码、商用恶意代码、无恶意代码作业、开源和免费工具等。这些天分享了很多系统安全和软件安全的知识，接下来让我们回归网络安全，做做XSS跨站脚本攻击案例。这些题目来自Fox好友，在此感谢他。主要内容包括XSS原理、不同类型的XSS、XSS靶场9道题目、如何防御XSS。希望您喜欢~
[网络安全自学篇] 八十三.WHUCTF之CSS注入、越权、csrf-token窃取及XSS总结
热门推荐
杨秀璋的专栏
06-09 1万+
这是作者网络安全自学教程系列，主要是关于安全工具和实践操作的在线笔记，特分享出来与博友们学习，希望您喜欢，一起进步。前文分享了WHUCTF隐写和逆向题目，包括文字解密、图片解密、佛语解码、冰蝎流量分析、逆向分析。这篇文章将详细讲解一道CSS注入题目，包括CSS注入、越权、csrf-token窃取及CSP绕过，同时总结XSS绕过知识，希望对您有所帮助。第一次参加CTF，还是学到了很多东西。人生路上，要珍惜好每一天与家人陪伴的日子。感谢武汉大学，感谢这些大佬和师傅们（尤其出题和解题的老师们）~
谁来教我渗透测试——黑客必须掌握的HTML基础（一）
菜鸟小白的学习分享
08-07 819
小伙伴们，好几天不见了，这一周菜鸟小白工作很忙，所以没有每天更新学习内容，但是菜鸟小白的学习是没有停下来的，只是没有时间来整理学习笔记了。现在就将菜鸟小白这两天学习的HTML基础和大家分享，其中还会拿一些标签进行举例，显示效果。 HTML概述 HTML语言是一种标签语言，它不需要编译，可以直接由浏览器执行。在标准网页设计中HTML负责填充网页的内容，HTML编写的超文本文档（文件）称之为HTML文档（网页），它包含了一些html元素，使用html或者htm为文件名后缀，能独立于各种操作系统平台，如Unix、
渗透html站点,渗透打好基本功-HTML/CSS/JAVASCRIPT
weixin_35937871的博客
05-31 294
0x0没有使用CSS javascript未使用css javascript这是一个未使用css javascript上面这段就是简单的html代码演示，保存html后缀名就可以使用浏览器打开。HTML的编辑环境：任何的文本编辑器，word、wps,保存格式为html或者htm格式。HTML工具：记事本工具(vim\notepad++等)，需要用户掌握HTML语言Dreamweaver \fron...
谁来教我渗透测试——黑客必须掌握的HTML基础（二）
菜鸟小白的学习分享
08-09 366
今天我们继续看看html的学习笔记。 文本标签 标题标签<hn> 将文本设置为标题显示的标签对。设定标题字体大小，n=1（大）~6（小），标题大小一共有6种，也就是从<h1>……</h1>到<h6>……</h6> <html lang="zh-cn"> <head> <meta content="text/html;charset=utf-8"> <title>菜鸟小白的学习分享</title&
web渗透之HTML基础
qq_40480474的博客
04-03 3790
大家好啊！我是小菜鸟，一个想学渗透的小白。有志同道合的小伙伴就快加入我吧！欢迎大家指正错误的地方。记得三连鼓励哦！ HTML概述 HTML语言是一种标签语言，它不需要编译，可以直接由浏览器执行。在标准网页设计中HTML负责填充网页的内容，HTML编写的超文本文档（文件）称之为HTML文档（网页），它包含了一些html元素，使用html或者htm为文件名后缀，能独立于各种操作系统平台，如Unix、Windows等 HTML标签 标签都是封装在一对尖括号“<……>”之中。标签只改...
渗透学习 HTML基础
weixin_46601374的博客
03-30 1216
如果你不出去走走， 你就会以为这就是世界。 渗透小白入坑学废集５HTML概述HTML文档结构HTML标签头部标签`...`标题标签`...`主体标签`...`特殊字符HTML格式标签段落标签``换行标签``预格式化标签``列表标签标题标签``字体修饰标签字体标签``HTML超链接标签属性href属性target属性title属性name链接到E-mail地址HTML图像标签属性src属性alt属性height和width属性align属性borderHTML表格标签表格标签`...`行标签`...`单元格
渗透测试CISP-PTE：XSS
未知2066的博客
02-27 1371
XSS (Cross-Site Scripting) 攻击是一种利用 Web 应用程序的漏洞，通过在用户输入的数据中注入恶意脚本来实施攻击的方法。
渗透测试学习目录
liupc的学习笔记
05-04 3608
1. 行业术语扫盲 2. 3.
学web渗透必须得学html，css和JavaScript吗
最新发布
03-02
学习Web渗透是否需要掌握HTML、CSS和JavaScript，取决于渗透测试的深度和方向。以下是具体分析： --- ### **一、基础必备程度** | 技术 | 必要性 | 核心作用场景 | 最低要求 | |------------|--------|-----------...
css穿透（带案例详解）
浮游的博客
08-19 4014
问题背景 在使用vue构建项目的时候，引用了第三方组件库，只需要在当前页面修改第三方组件库的样式，以做到不污染全局样式。通过在样式标签上使用scoped，达到样式只作用到本页面的目的，但是此时再修改组件样式就不起作用了。 <div class="text-box" v-html="emotion(item.content)"></div> <style lang="stylus" scoped> .text-box{ color: #2e3135;
html（超文本标记语言）
weixin_65861348的博客
11-12 1100
html 是用来描述网页的一种语言。html指的是超文本标记语言：HyperText Markup LAnguagehtml不是一种编程语言，而是一种标记语言，标记语言是一套标记标签（markup tag）html使用标记标签来描述网页html文档包含了html标签及文本内容html文档也叫做web页面HTML(超文本标记语言）网页有一个标准的结构，主要由以下几个关键部分组成：文档类型声明，HTML根元素，头部（head）和主体（body）部分。这种结构为浏览器解析和显示网页内容提供了清晰的框架。
渗透测试学习 四、 HTML基础
weixin_30481087的博客
04-19 280
HTML是一种解释型语言，解释给浏览器解析执行显示给用户浏览，是一种静态，无交互的 超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分...
挖洞经验 | 可以被XSS利用的HTML标签和一些手段技巧，靠挖SRC漏洞每月多赚15k
jennycisp的博客
10-26 1039
*”。**网上关于XSS的教程数不胜数，转载来转载去的，就是那么些Payload，可能看的人晕晕的不知所以然。而且还有很多Payload就算把其中的HTML代码闭合后写在自己的前端中，都不一定触发，因为很多老的标签和事件都已经被W3C给废弃了。本文首先给大家总结一下目前通用可以拿来构造XSS的HTML标签和一些标签事件，然后再给大家讲述一些绕过的技巧，教你在么构造出属于你自己渗透时真正需要的Exp。
渗透必学html基础
朝阳似锦 晖映山河
06-05 586
title: HTML 文章目录title: HTML一、基础1、简单的HTML页面架构2、HTML常见标签metalinkscript注释P标题标签brhr文本属性pre3、form表单和input标签form表单inputa标签、img标签、table标签aimg与areatable基础单选框、复选框，下拉选框、文本域下拉选框文本域 textarea本章综合示例列表无序列表有序列表补充frameset属性scrolling 一、基础 1、简单的HTML页面架构 <!DOCTYPE html&gt.
渗透html站点,web渗透怎么入门？先了解web网站组成
weixin_35806032的博客
05-31 1942
一个web网站一般是由以下几个部份组成的：操作系统、服务、脚本编程语言、数据库。1、操作系统：Windows、Linux服务器一般都是以这两种系统类型为主了吧！个人电脑系统的话，就还有Mac等。2、搭建平台服务：IIS、Apache、Tomcat、Nginx3、脚本语言：ASP、PHP、JSP不仅仅是这些，像node.js、pyhton、ruby等语言也都是可以做网站的。4、数据库：Mysql、M...
css防注入,CSS注入
weixin_39569894的博客
08-03 562
css就已被安全研究人员运用于渗透测试当中。使用属性选择器和iFrame，并通过css注入来窃取敏感数据的方法。但由于该方法需要iFrame，而大多数主流站点都不允许该操作，因此这种攻击方法并不实用。这里为大家详细介绍一种不需要iframe且只需10秒，就能为获得CSRF token的方法。什么是css注入大家对XSS攻击都非常熟悉了，可能很少关注到css注入攻击，以下行为有可能受到css注入攻击...
CSS样式穿透的几种方法
风清扬的专栏
02-13 1万+
通常在引入第三方 UI 组件库（如 element-ui或者easyUI等等），需要自定义组件样式时，但由于样式使用了 scoped 属性（为避免组件之间的样式相互影响），导致无法直接覆盖原组件的样式，这时就需要用到样式穿透。该方法对所有样式语法通用，即适用于 css、stylus、sass、scss 和 less。该方法适用的样式语法：sass、scss、less。该方法适用的样式语法：css、stylus。
Vue3 中css渗透:deep()无效解析
油墨香^-^的博客
08-03 4300
由上可知，:deep() 要生效必须在当前组件某节点下挂载情况下才生效。初步断定，:deep() 的作用是当前组件向下渗透，只要你在这个组件节点下面衍生，那么就会生效;当你垮出了对应的节点，自然就会失效(样式写在父组件:deep，子组件写弹框，只要挂载在父组件衍生到子组件的所有节点皆可生效)。其实可以通过来辨别，相信大家都知道这个是什么意思：这是在标记 vue 文件中 css 时使用scoped标记产生的，因为要保证各文件中的 css 不相互影响，给每个component。
实现DIV文字淡入淡出效果的HTML5与CSS3教程
### HTML5与CSS3实现DIV文字淡入淡出效果知识点总结 #### HTML5与CSS3基础概念 HTML5是第五代超文本标记语言（HyperText Markup Language，简称HTML）的标准，用于构建和呈现网页内容。HTML5为网页带来了更多的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值