Web安全01—HTML基础
首先关于HTML学习的网站推荐
W3school，注意不是W3cschool！！https://www.w3school.com.cn/html/index.asp
菜鸟教程：https://www.runoob.com/html/html-tutorial.html
0x00 简单的HTML页面架构
<!DOCTYPE html>
<html> <!-->标签成对出现，/表式闭合标签<-->
<head>
<meta charset='utf-8'> <!-->charset 网页编码 gbk gbk2312 utf-8等，现在大多都是utf-8，gbk属于古老的网页了<-->
<title></title> <!-->网页标题<-->
</head>
<body> <!-->网页正文<-->
This is a simple html page
</body>
</html>
0x01 HTML标签与文本属性
1、HBuiler工具
hbuilder是DCloud推出的一款支持HTML5的Web开发IDE。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。同时，它还包括最全面的语法库和浏览器兼容性数据。
工具的方便之处-1
当新建一个项目的时候，会自动帮我们整理好文件夹内容，以及一些固定标签。
工具的方便之处-2
保存在img文件夹的照片可以自动帮我们识别出来
2、meta标签
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的关键词、描述、作者信息等，完全可以自定义，如果不写，搜索引擎对你的网页不太友好。所搜引擎所搜出来的结果无非两点最重要：第一是归类，第二是排名。这里的meta标签，起到的就是一个归类作用。
<meta name="keywords" content="网络安全，渗透测试，WEB安全，技术分享">
<meta name="description" content="这是一个专注网络安全的博客。本博客专注于渗透测试技术，分享高质量优质文章">
<meta name="author" content="sukusec">
当然还有其他的属性与值，不仅仅是name，需要查看HTML手册进行分析，这里不一一列出。
<link>标签定义文档与外部资源的关系。其实就是引用等等
<script>标签:JS脚本
<!-- -->标签：注释，<!--这里用来编写注释内容-->
<p>段落标签：<p>这里来编写一句话</p>
3、标题标签
由大到小
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>6</h6>
</br> 换行标签
<hr>换行线标签
4、文本属性
<strong>加粗</strong>
<b></b>加粗
<i></i>斜体
<u></u> 下划线
<sup></sup>上标
<sub></sub>下标
<del></del> 删除线，特别是在价格打折的时候用到
<font></font> 规定字体属性
<font size="13px" color="red">字体大小属性size，color颜色</font>
<font color="red">字体颜色属性color</font>
<pre></pre>代码原样输出，在编辑器里面什么样，在页面就是什么样子。
5、文本域标签
<textarea cols="50" rows="30">这里就是文字内容</textarea>
cols表示左右宽度，rows表示上下宽度
0x02 form表单
HTML 表单用于搜集不同类型的用户输入。
action规定当提交表单时向何处发送表单数据，如果值为空，默认提交到当前网页
method 说明本表单向服务器发送输入信息时的使用方式。提交的方法有 get、post。get基本上用于搜索框，post即登录框
- 使用GET时，HTTP的客户端将表单上用户的输入信息作为字符串附加在ACTION所设定的URL后面
- 用
?和&隔开，然后把整个字符串传送到服务器端 - 但由于系统内置变量的长度限制了输入字符串的长度，因此，用
GET方式所能传送的数据长度受到限制 - GET方法不具有保密性，不适合处理要求保密内容，而且不能传送非ASCII码的字符
enctype规定在发送表单数据之前如何对其进行编码。
enctype 属性可能的值
application/x-www-form-urlencoded 如果不写enctype，默认就是这个，即单纯POST提交数据
multipart/form-data 文件上传
text/plain 很少见，可以当作不存在
1、input标签，是form表单中最重要的元素标签
1-1、input属性
name：同样是表示的该文本输入框名称。
size：输入框的长度大小。
maxlength：输入框中允许输入字符的最大数。
value：输入框中的默认值
readonly/readonly="true"：表示该框中只能显示，不能添加修改。
placeholder: 提示信息
1-2、input的类型
type=password 密码输入框
type=file 文件上传
type=hidden 隐藏域
type=button 按钮
type=checkbox 复选框
type=radio 单选框
type=submit 提交按钮
type=reset 重置按钮
<label>标签：表示名称
2、综合练习与分析
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content="网络安全，WEB安全，渗透测试，安全开发，招聘入职">
<meta name="description" content="XXX招聘网站求职信息填写">
<title>入职信息</title>
</head>
<body>
<form action="" method="post" enctype="application/x-www-form-urlencoded">
<label><font color="red"><b>姓 名：</b></font></label><input type="text" name="username" value="asdas" readonly="true" size="10" maxlength="20"></br>
<label><font color="blue">性 别：</font></label>男<input type="radio" name="sex" value="1">女<input type="radio" name="sex" value="2"></br>
<label>密 码：</label><input type="password" name="passwd" value="" maxlength="20"></br>
<label for="email">邮 箱：</label><input type="email" name="e" id="email" maxlength="20"></br>
<!--邮箱的label标签中的for，表示当鼠标点击邮箱二字时，自动将光标移动到后面的input标签的id上，即到输入框中-->
<label>技 能：</label>安全开发<input type="checkbox">渗透测试<input type="checkbox"></br>
<!--checkbox表示复选框，可以多选，radio表示单选框，只能单选-->
<!--因为是性别，只能选一个，所以要在radio那个input框中加入name="sex"-->
<input type="hidden" value="10000000">
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="点我试试">
</form>
<form action="" method="post" enctype="multipart/form-data"> <!--文件上传必须要用到enctype="multipart/form-data"-->
<input type="file" name="file_upload" value="上传"/>
<input type="submit"/>
</form>
</body>
</html>
0x03 a标签、img标签、table标签
1、a超链接标签
a标签的作用：就是用于控制界面与页面之间的跳转
href属性规定指向链接的URL
1-1、5种跳转方式
target="_self" 用于在当前选项卡中跳转，也就是不新建页面跳转，默认就是self
target="_blank" 用于在新的选项卡中跳转，也就是新建页面跳转
target="_parent" 在父框架集中打开被链接文档，不常用。
target="_top" 在整个窗口中打开被链接文档，不常用。
target="add" 在链接那里引用name为add的内容
<a href="http://www.baidu.com" target="_self">百度</a>
<a href="http://www.baidu.com" target="_blank">百度</a>
1-2、a标签锚文本的使用
<a href="#2">锚点</a>
<a name="2">锚点</a>
<p name=""> <!--name值任意，不写也是可以的-->
<a href="#">返回顶部</a>
2、img图像标签
img标签即向网页中嵌入一幅图像。
2-1、属性
src 规定显示图像的url，此url既可以是公网上的图片链接，也可以为本地
width 规定图片的高度，直接输入数字即可，无需px
height 规定图片的宽度，直接输入数字即可，无需px
size图片等比缩放大小，如size="150%"
alt规定图像的替代文本。说白了就是表示展示给访问者的图片名称，当图片加载错误或者某些高级浏览器鼠标放上图片不动时，可以看到名字。如下图
<img src="img/wsukcjlt." alt="美女高清" width="100" height="100"></img>
<img src="https://scpic.chinaz.net/files/pic/pic9/202201/apic37850.jpg" alt="帅哥高清"width="100" height="100"></img>
3、table表格标签
3-1、基本表格制作
<caption>我的标题</caption>表格带标题
<th>表头</th>默认是加粗的
<tr>行</tr>
<td>表格</td>
border属性表示边框大小
width宽度
height高度
cellpadding 单元边与内容的空白距离
cellspacing 内外边框的空白距离
<table border="2" weight="10" height="200" cellpadding="5" cellspacing="5">
<caption>宴桃园三兄弟结义</caption>
<tr><th>#</th><th>信息</th><th>大名</th><th>地位</th></tr>
<tr><td>1</td><td>姓名</td><td>刘备</td><td>大哥</td></tr>
<tr><td>2</td><td>姓名</td><td>张飞</td><td>二弟</td></tr>
<tr><td>3</td><td>姓名</td><td>刘备</td><td>三弟</td></tr>
</table>
3-2、合并单元格（了解即可）
用到的时候查一下
colspan 行
rowspan 竖
0x04 列表标签、无序列表、有序列表
1、功能的位置
2、列表标签
2-1、无序列表
所谓无序列表，就是无序号数字的列表，可以看到下图每行都有一个标识小黑圈。这是ul标签的type属性来控制的项目符号。
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
type的四种基本项目符号：
circle 空心圆
disc 实心圆（默认类型）
square 实心方形
none 去除标识
2-2、有序列表
所谓有序列表，就是有数字123来标识行号的列表。
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
有序列表的type的类型
默认 阿拉伯数字
小写字母列表
大写字母列表 A
罗马字母列表 I
小写罗马字母列表 i
none 去除
0x05 frameset frame框架的使用
frameset 定义一个框架集，即在一个页面中设置、组织一个或多个窗口框架 不能嵌套在body标签里。必须使用cols 或 rows 属性才能出效果。说白了frameset的作用就是将不同网页分屏显示罢了。一般是在做点击劫持漏洞的时候用到的。
frameset 不能在body内使用
frame 一般都是在frameset中使用
cols 定义框架集中列的数目和尺寸
rows 定义框架集中行的数目和尺寸
scrolling 滚动条
auto 在需要的情况下出现滚动条（默认值）
yes 始终显示滚动条（即使不需要）
no 从不显示滚动条（即使需要）
* 表示剩下所有的空间
这里有一个错误示范，<frameset>前面多了一个"，就会导致页面无法加载，可要细心啊！！
更改了代码后，发现这样子的界面就算成功了。不过可能有些网站不允许嵌入frame，例如现在的百度，cnblog等。
<frameset rows="50%,50%"> <!--rows表示横着分屏，frameset不能写在body里面-->
<frame src="https://www.sogou.com"/ scrolling="yes"> <!--滚动条默认就是打开的-->
<frame src="https://www.bilibili.com/"/>
</frameset>
<body>
</body>
竖着分屏，sogou占20%，剩下的都给B站。
<frameset cols="20%,*">
<frame src="https://www.sogou.com"/>
<frame src="https://www.bilibili.com/"/>
</frameset>
frameset框架利用
1、一般的后天架构都是如此的分步，其实就是利用了frameset框架技术。
就比如说我在博客园创建的博客后台，就是个典型例子。
left表示左边的列表，main表示主要操作信息；top即上方固定部分；footer为下方的固定部分。
2、具体操作：新建一个web项目，里面新建5个文件，分别是，index.html、main.html、top.html、left.html、footer.html，在body标签中写上对应的内容用于标识。
3、先写一个上下，一般来说顶部是30%，不过看自己的需求吧。
4、再将main左右分屏，其实也就是将<frame src="main.html">替换成这几行内容：
<frameset cols="20%,*">
<frame src="left.html">
<frame src="main.html">
</frameset>
5、之后来填写内容，left一般都是列表内容，所以我们在left.html里面添加一些无序列表。
<body>
<ul>
<li><a href="#">12345</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>
</ul>
</body>
6、之后我们想要做的效果是，点击12345，就会在main的部分出现内容。什么内容呢？新建一个add.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form method="post" action="" >
标题：<input type="text"></br>
内容：<textarea cols="40" rows="20"></textarea><br/>
<input type="submit" name="submit" value="点击提交"><br/>
</form>
</body>
</html>
7、首先要将left.html这个链接对应起来，然后后面紧接着一个target="add"
再到index.html中，main.html的frame添加一个name="add"，这样当我们点击12345时，就会将add.html的内容，替换掉main.html的内容了。
效果如下，其他的同理，frameset配合a标签
浙公网安备 33010602011771号