前言
写了好久的算法和数据结构了，终于要进我的主业了，（数据结构和算法还会继续更新）。在渗透过程中，我们往往会写钓鱼页面，不可能写的页面被别人看到一眼假。包括往往会遇到前端的漏洞，所以学好前端三件套，尤为重要，这也是我接下来要做的事，让你们花更少的时间，学会前端三件套。今天先开一节即html。争取用最少的时间，完成前端的学习。
0、HTML的学习环境
我建议可以下一个Hubilder，这不是重点，看自己的习惯，不要在意编译环境，你甚至可以用记事本。
1、HTML常见标签
1.1 ——> meta标签
我们平时在百度搜索时，搜索的往往就是网站的关键字。meta就可以提供网站的更新频度和关键字。
<meta name ="keywords" content="一个左鞭腿"/>
<meta charset="utf-8" /> 描述网站用的是utf-8格式1.2 ——> 标题标签
这个标签的作用就是将标题分为一级标题、二级标题，数字越大，字体越小
<h1>
鸡你太美
</h1>
<h2>
鸡你太美
</h2>
<h3>
鸡你太美
</h3>
<h4>
鸡你太美
</h4>
<h5>
鸡你太美
</h5>
<br>换行标签
看成功换行。
<hr> 换行线标签
看！多了一个换行线。
1.3 ——> 文本属性
这一小节讨论文本的属性问题，html还是自己玩一遍会更好，自己做个总结啥的是最好。
<strong>一个左鞭腿</strong> 对应加粗crtl+B
<b>一个左鞭腿</b> 效果一样都是加粗
<i>一个左鞭腿</i> 即斜体
<u>一个左鞭腿</u> 即下划线
10<sup>-1</sup> 上标
log<sub>a</sub> 下标
<del>阿里嘎多美羊羊桑</del> 删除线
<font color="gold">凶什么啊</font> 更换字体的颜色
<font size="100">我在佛前求了5000遍</font> 更换字体的大小
2、from表单
from表单 规定当提交表单时向何处发送表单数据，向服务器发送数据的。
method提交的方法有get、post
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<from action="" method="post">
<label>账 号：</label><input type="text" name="username" size="7" maxlength="5" value="不输就滚蛋" readonly /><br />
<label>密 码：</label><input type="password" name="password"/><br />
<label>性 别：</label><label>男</label><input type="radio" name="sex"/><label>女</label><input type="radio" name="sex" /><br />
<label>技 能：</label><label>代码审计</label><input type="checkbox"/><label>渗透测试</label> <input type="checkbox" /><br />
<label>邮箱：</label><input type="email"/><br />
<label>文件上传：</label><input type="file" /><br />
<input type="reset" />
<input type="submit" /><br />
</from>
</body>
</html>
在input标签下往往有这些属性：
name：同样是表示的该文本输入框名称。
size：输入框的长度大小。
maxlength：输入框中允许输入字符的最大数。
value：输入框中的默认值
readonly：表示该框中只能显示，不能添加修改。
input的类型
type=password 密码输入框
type=file 文件上传
type=hidden 隐藏域
button 按钮
checkbox 复选框
radio 单选框
type=submit 提交按钮
type=reset 重置按钮
可以照我这个结果，试着写一下过程，建议自己玩，在radio的标签哪里有一些小心思。
3、a标签
a标签的作用：就是用于控制界面与页面之间的跳转。
默认的就是self
self：用于在当前选项卡中跳转，即不新建页面跳转
blank：用于在新的选项卡跳转，即创建新的页面跳转
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">百度</a>
<a href="https://developer.aliyun.com/" target="_self">阿里云社区</a>
<img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.EiJmNRIwhvnH_HSIj7LuqwHaKo?w=204&h=293&c=7&r=0&o=5&pid=1.7" />
</body>
</html>
alt 规定图像的替代文本。
src 规定显示图像的url
width 规定图片的高度
height 规定图片的宽度
1.1. table 表格
<caption>我的标题</caption>表格带标题border 边框
width 宽度
height 高度
colspan 行
rowspan 竖
<th>表格的头标签</th>
<tr>行</tr>
<td>表格</td>cellpadding 单元边与内容的空白
cellspacing 单元格的空白
4、无序列表和有序列表
无序列表：
项目符号 square circle disc
<ul type=“”>
<li></li>
<li></li>
<li></li>
<li></li>
</ul><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>读孙子兵法，品启强人生</li>
<li>咖啡不用冲，早晚会成功</li>
<li>卖鱼</li>
</ul>
</body>
</html>
有序列表：
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ol>
<li>读孙子兵法，品启强人生</li>
<li>咖啡不用冲，早晚会成功</li>
<li>卖鱼</li>
</ol>
</body>
</html>
这一节的学习可以自己玩一下，换不同的类型进行学习。
5、框架的使用
frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。
frameset 在一个页面中设置一个或多个框架 不能嵌套在body标签里
iframe 是在html页面内嵌入框架 框架内可以连接另一个页面
frameset 不能在body内使用
frame 一般都是在frameset中使用
cols 定义框架集中列的数目和尺寸
rows 定义框架集中行的数目和尺寸
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
frameLabelStart--frameLabelEnd
<body>
</body>
</html>
看到这的滚动条感觉不太像正常的网页，于是加上scrolling=“no” 成功删除。注意要在修改的界面上去添加。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
frameLabelStart--frameLabelEnd
<body>
</body>
</html>scrolling 滚动条
auto 在需要的情况下出现滚动条（默认值）。
yes 始终显示滚动条（即使不需要）。
no 从不显示滚动条（即使需要）
注：这个50%可以修改为*。
