一、WEB安全 01——HTML基础

本文阅读 12 分钟
首页 代码,C/C#/C++ 正文

一、WEB安全 01——HTML基础

1、HTML基础 01——HTML页面结构、HTML标签、文本属性

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

//charset编码的值有:gbk gbk2312 utf-8

​ HTML中的注释符:<! --注释内容–>

<!--这是一段注释。注释不会在浏览器中显示。-->

title是标题标签

<title>暗月全栈渗透测试培训</title>

meta是页面元信息标签,用于定义页面的元信息(meta-information),可重复出现在head头部标签中,在HTML中是一个单标签。meta标签本身不包含任何内容,通过“名称/值”(“name/content”)的形式成对的使用其属性可定义页面的相关参数,例如:为搜索引擎提供页面的关键字、作者姓名、内容描述,以及定义页面的刷新时间、文档类型,以及页面编码。

<!--为搜索引擎提供信息的格式:<meta name="名称" content="值"/>-->
<meta name="keywords" content="暗月培训第一课" />
<meta name="author" content="qwsn" />
<meta name="description" content="这只是一个课程笔记,仅供技术参考" />


<!--定义页面刷新时间和页面编码的格式:<meta http-equiv="名称" content="值" />-->
<!--http-equiv属性的值为refresh时候,content的属性的值为数值和url地址,中间用;隔开,时间默认以秒为单位-->
<meta http-equiv="refresh" content="10;url=http://www.baidu.com"/>


<!--http-equiv属性的值为Content-Type时候,可以设置HTTP响应头中的页面文档类型和页面编码-->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

<!--http-equiv属性的值为X-UA-Compatilbe时候,可以设置客户端用什么样的浏览器-->
<meta http-equiv="X-UA-Compatible content="IE=Edge,chrome=1"/>

....................

link是引用外部文件标签,用于引用外部文件,一个页面往往需要多个外部文件的配合,在head头部标签中可以用来引用外部文件,一个页面允许使用多个link标签引用多个外部文件。

<!--例子略-->

style是内嵌样式标签,用于定义内嵌样式,位于head头部标签中。在HTML中使用style标签的时候,常常定义其属性为type,相应的属性值为text/css,表示使用内嵌样式的CSS样式。

<!--例子略-->

script是脚本标签,用于定义客户端脚本

<!--例子略-->

p是段落标签,用于定义一个段落

<!--p标签有align对齐方式属性,是可选的;p标签会根据浏览器的窗口大小进行自动换行-->
<!--p段落标签的基本语法格式:<p align="对齐方式">段落文本</p>-->
<p align="left">默认就是左对齐</p>
<p align="center">这是居中对齐</p>
<p align="right">这是右对齐</p>

h是标题标签,用来提供6个等级的标题,即h1、h2、h3、h4、h5、h6,从h1到h6重要性递减

<!--h标签有align对齐方式属性,是可选的;h标签会根据浏览器的窗口大小进行自动换行-->
<!--h标题标签的基本语法格式:<hn aligh="对齐方式">标题文本</hn>-->
<!--两个n的取值只能同时是1到6,标题文本默认是加粗左对齐-->
<h1 align="left">这是一级标签,也是最高级标签</h1>
<h2 align="center">这是二级标签</h2>
<h6 aligh="right">这是六级标签,也是最低级标签,虽然属性值为right,但是依旧左对齐</h6>

br是强制换行标签,用来强制换行,是一个单标签。

<p>这是暗月的培训,<br />一个上课的学生qwsn。</p>

hr水平线标签,用来创建一个水平线,是一个单标签。

<!--基础语法格式:<hr 属性="属性值" />-->
<!--水平线默认居中对齐,默认粗细是2像素,颜色自定义,宽度默认是浏览器窗口的100%-->
<hr align="center" size="2px" color="deeppink" width="976px"/>

font是文本样式标签,用来控制页面中文本的字体、字号和颜色

<!--基础语法格式:<font 属性="属性值">文本内容</font>-->
<font face="微软雅黑" size="9px" color="pink">我是9号粉色文本,我的字体是微软雅黑哦。</font>

​ 常用的文本格式化标签如下:

<br />
<strong>加粗</strong>
<b>加粗</b>

<i>斜体</i>
<em>斜体</em>

<u>下划线</u> 
<ins>下划线</ins>

<s>删除线</s>
<del>删除线</del>

<sup>上标</sup>
<sub>下标</sub>

pre是预格式化标签,一个常见应用就是用来表示计算机的源代码。(原样输出代码,可以显示空格)

<!--观察以下区别-->
<p>    不可以显示空格</p>
<pre>    可以原样显示空格</pre>

img

2、HTML基础 02——form表单、input等表单控件、表单示例

form是表单标签,用来为用户的输入创建HTML表单,form表单可以包含很多的表单控件(也就是各种控制表单的标签)。(表单用于向服务器传输数据)

​ 表单能够包含input元素,比如文本字段、复选框、单选框和提交按钮等等。

​ 表单还可以包含menus、textarea、fieldset、legend和label等元素。

​ form元素是块级元素,其前后会产生折行。

<!--form表单的基本格式:-->
<form action="url地址" method="提交方式" name="表单名称" enctype="text/plain">
    各种表单控件
</form>
action属性的作用:用于指定接收并处理表单数据的服务器程序的url地址。(值可为空)
method属性的作用:用于设置表单数据的提交方式,其取值为get或post,get为默认值。
name属性的作用:用于指定表单的名称,以区分同一个页面中的多个表单。
enctype属性的作用:用于规定在发送表单数据之前如何对其进行编码,其取值为application/x-www-form-urlencoded(默认值)或multipart/form-data(文件上传时使用该属性值)或text/plain。
get提交表单方式:提交的数据显示在浏览器的地址栏中,保密性差,且数据量有限。
post提交表单方式:提价哦的数据不显示在浏览器的地址栏中,保密性好,且无数据量的限制。

​ 表单控件有:input标签、textarea标签、select标签、menus标签、fieldset标签、legend标签

​ input标签是form表单的众多控件中的一个,这里着重讲解。input为单标签,其中type属性为最基本的属性,根据其type属性的取值不同,可以达到客户端与服务器之间真正的交互。

​ input标签的基础属性type

type="text"        单行文本输入框
type="password"    密码输入框
type="radio"    单选按钮
type="checkbox" 复选框
type="button"    普通按钮
type="submit"    提交按钮
type="reset"    重置按钮
type="image"    图像形式的提交按钮
type="hidden"     隐藏域
type="file"     文件域(文件上传)

​ input标签的其他属性

name="用户自定义"                 输入框名称
value="用户自定义"                 输入框中的默认值
size="正整数"                      输入框的长度大小
maxlength="正整数"                  输入框中允许输入字符的最大数。
readonly="readonly"                表示该框中只能显示,不能添加修改(值可为空)
disabled="disabled"                第一次加载页面时,输入框为灰色
checked="checked"                定义选择框的默认值
<form action="" method="post" enctype="">
    <lable>用户名:</lable><input type="text" name=username value="qwsn" size="23" maxlength="4" readonly=""><br />
    <lable>密&nbsp;码:</lable><input type="text" 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">渗透测试<input type="checkbox"/><br />
    <label>性&nbsp;别:</label>男<input type="radio" name="sex" value=1/>女<input type="radio" name="sex" value=2/><br />
    <input type="hidden" value="flag{我藏起来了!!!!}" />
    <input type="submit" value="提交"/>
    <input type="reset" value="重置"/>
    <input type="button" value="按钮测试"/>
</form>
<hr />
<form action="" enctype="multipart/form-data">
    <input type="file" name="file" />
    <input type="submit" value="提交" />
</form>

img

3、HTML基础 03——a标签和链接文本、img标签、table标签

a是超链接标签,用于控制页面与页面之间的跳转。

a标签的的基本语法格式:
<a href="跳转目标的url地址" target="目标窗口的弹出方式">    文本或图像</a>
taget属性的值为:
target="_self"        默认,在原窗口中打开
target="_blank"        在新窗口中打开
target="_parent"    在父框架集中打开被链接文档
target="top"        在整个窗口中打开被链接文档

a标签示例:
<a href="https://blog.csdn.net/qq_45555226">qwsn的博客</a>
<a href="https://blog.csdn.net/qq_45555226" target="_self">qwsn的博客</a>
<a href="https://blog.csdn.net/qq_45555226" target="_blank">qwsn的博客</a>
创建锚文本分为两步:
1.建立锚点:<a href="#name属性的值">锚点</a>
2.使用相应的name属性的值标注跳转目标的位置,如:<p name="name的值"></p>
//href="name属性值"        实现本页面内跳转
//href="#name属性值"        实现新窗口的跳转
//href="id属性值"            实现新窗口跳转
//href="#id属性值"            实现新窗口跳转
<p name="top">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<a href="#top">返回顶部</a>

img是图像标签,用来向网页中嵌入一幅图像,是一个单标签。

img标签的基础语法格式:
<img src="图像URL"/>
img标签的属性:
alt     规定图像的替代文本。
src      规定显示图像的url。
width     规定图片的高度。
height     规定图片的宽度。

img标签示例:
<br /><img src="img/logo.jpg" width="500px" height="313px" alt="logo"/>
<br /><img src="img/xxx.jpg" width="500px" height="313px" alt="logo"/>

img

table是表格标签

table标签的属性:
border        表格边框,默认border="0",无边框
width         表格宽度
height         表格高度
cellspacing    单元格间的空白间距,默认2px
cellpadding    单元格内容与单元格边框之间的空白间距,默认1px
align        表格的对齐方式
bgcolor        表格背景颜色
background    表格背景图像

table标签可内嵌标签:
<caption>qwsn的标题</caption>
<tr>控制某一行</tr>
<td>控制某一表格</td>
<th>控制表格头,默认加粗显示</th>

td标签的属性:
colspan     列合并
rowspan     行合并

table标签示例:
<table border="1px" cellspacing="10px" cellpadding="10px">
    <caption>qwsn的姓名图</caption>
    <tr><th>#</th><th>姓名</th><th>年龄</th></tr>
    <tr><td>1</td><td>qwsn1</td><td>23</td></tr>
    <tr><td>2</td><td>qwsn2</td><td>24</td></tr>
    <tr><td>3</td><td>qwsn3</td><td>25</td></tr>
</table>
<br />
<table border="1px" cellpadding="10px">
    <tr><th>#</th><th>姓名</th><th>年龄</th></tr>
    <tr><td>1</td><td>qwsn4</td><td rowspan="2">26</td></tr>
    <tr><td>2</td><td>qwsn5</td></tr>
    <tr><td>3</td><td>qwsn6</td><td>27</td></tr>
    <tr><td>4</td><td>qwsn9</td><td rowspan="2">28</td></tr>
    <tr><td>5</td><td>qwsn9</td></tr>
    <tr><td>总数</td><td colspan="2">5</td></tr>
</table>

img

4、HTML基础 04——无序列表ul、有序列表ol

ul是无序列表标签

li是行标签

<ul type="none">
    <li>无序列表的第一行</li>
    <li>无序列表的第二行</li>
    <li>无序列表的第三行</li>
</ul>

type属性的值:
none    无符号
square    实体正方体
circle    空心圆圈
disc    实体圆圈,默认是实体圆圈

ol是有序列表标签

<ol type="disc">
    <li>有序列表的第一行</li>
    <li>有序列表的第二行</li>
    <li>有序列表的第三行</li>
</ol>

type属性的值:
a        小写字母排序
A        大写字母排序
disc    数字排序,默认数字排序
1        数字排序
i        小写罗马字母排序
I        罗马字母排序

img

5、HTML基础 05——frameset框架集、frame框架的使用和示例

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

​ frameset 在一个页面中设置一个或多个框架(窗口), 不能嵌套在body标签里,但是frame 一般都是在frameset中使用。

​ iframe 是在html页面内嵌入框架,框架内可以连接另一个页面

框架集(窗口集)示例:
<frameset rows="50%,*">
    <frame src="https://www.baidu.com" />
    <frame src="https://blog.csdn.net/qq_45555226" scrolling="no" />
</frameset>

frameset双标签的属性:
rows="30%,70%"    分行显示
cols="70%,*"    分列显示

frame单标签的属性:
scrolling="auto"    在需要的情况下出现滚动条(默认值)。
scrolling="yes"        始终显示滚动条(即使不需要)。
scrolling="no"        从不显示滚动条(即使需要)

img

img

top.html内容:
<body>
    top
</body>
left.html内容:
<ul>
    <li><a href="add.html" target="#add||list||blog">添加文章</a></li>
    <li><a href="artlists.html" target="#add||list||blog">文章列表</a></li>
    <li><a href="#">系统信息</a></li>
    <li><a href="#">备份</a></li>
    <li><a href="https://blog.csdn.net/qq_45555226" target="#add||list||blog">qwsn的博客</a></li>
</ul>
main.html内容:
<body>
    main
</body>
index.html内容:注意框架集标签在head和body之外
<frameset rows="30%,*">
    <frame src="top.html" />
    <frameset cols="20%,*">
        <frame src="left.html"/>
        <frame src="main.html" id="add" name="add||list||blog"/>
    </frameset>
    <frame src="main.html" />
</frameset>
add.html内容:
<form method="post">
    标题:<input type="text" /><br />
    内容:<textarea cols="40px" rows="20px"></textarea>
    <input type="submit" />
</form>
artlists.html内容:
<ol>
    <li><a href="#">xxxxxxxxxx</a></li>
    <li><a href="#">xxxxxxxxxx</a></li>
    <li><a href="#">xxxxxxxxxx</a></li>
    <li><a href="#">xxxxxxxxxx</a></li>
    <li><a href="#">xxxxxxxxxx</a></li>
    <li><a href="#">xxxxxxxxxx</a></li>
</ol>

img

img img img

2021年06月30日

2021年07月05日

本文为互联网自动采集或经作者授权后发布,本文观点不代表立场,若侵权下架请联系我们删帖处理!文章出自:https://blog.csdn.net/qq_45555226/article/details/118487783
-- 展开阅读全文 --
KillDefender 的 Beacon 对象文件 PoC 实现
« 上一篇 02-09
Web安全—逻辑越权漏洞(BAC)
下一篇 » 03-13

发表评论

成为第一个评论的人

热门文章

标签TAG

最近回复