简单了解前端代码_IT分享知识网

大家好，欢迎来到IT知识分享网。

一、HTML

Hyper Text Markup Language（超文本标记语言）

超文本包括：文字、图片、音频、视频、动画等

HTML 5作为最新版本，提供了一些新的元素和一些有趣的新特性，同时也建立了一些新 的规则。 这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态 渲染图形、图表、 图像和动画，以及不需要安装任何插件直接使用网页播放视频等。

1. 区别

前端代码和后端代码的区别：

前端代码（html，JS）可以被看见，后端代码无法看见源代码
后端代码（PHP，JAVA，ASP）可以操作服务器，使用服务器的命令解释器，

黑盒（前端），白盒（后端）

白盒中有代码审计出0day漏洞

前端代码审计的作用：可能会含有敏感信息，查看网站的目录结构

搜索登录框：inurl:‘login’

搜索标签中包含了标题：intitle:‘标题’

显示页面代码：view-source:页面url

2. HTML基本结构

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

head信息就是浏览器的头部，head中的title就是头部显示的内容

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S6BvCkxp-81)(%E5%89%8D%E7%AB%AF%E4%BB%A3%E7%A0%81.assets/image-043557.png)]

body信息就是浏览器显示的内容

2.1 <!DOCTYPE html>

表示声明，声明位于文档中的最前面的位置，处于标签之前。声明不是⼀个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。

2.2 <meta>

设置网页编码，SEO（搜索优化）

<meta charset="UTF-8"> <!--页面编码--> <meta name="keywords" content="是兄弟就来kan我"><!--SEO为是兄弟就来kan我，只要搜索“为是兄弟就来kan我”就会推荐本网页链接-->

2.3 网页的基本标签

2.3.1标题标签

<h1>修</h1><!--一级标题--> <h2>修</h2> <h3>修</h3> <h4>修</h4> <h5>修</h5> <h6>修</h6>

2.3.2 段落标签

<p></p>

<h1>修</h1> <p>yyds</p> <h2>修</h2> <p>yyds</p> <h3>修</h3> <h4>修</h4> <h5>修</h5> <h6>修</h6>

2.3.3 换行标签

<br /><!--跟在内容后，在html中不认识回车符，但是想要换行就需要使用<br />-->

2.3.4 水平线标签

<hr />

2.4 图形标签

<img src="图片的位置：本地位置或网络位置" alt="图片异常后替代的文字" title="鼠标悬停显示的文字">

2.5 链接标签

<a href="要跳转到的页面链接" target="_self">文本或者图像</a><!--在当前页面跳转到指定的页面--> <a href="要跳转到的页面链接" target="_blank">文本或者图像</a><!--在新的页面跳转到指定的页面-->

二、表格与表单

1. 表格

<table border="1px"> <tr> <td>第1个单元格的内容</td> <td>第2个单元格的内容</td> </tr> <tr> <td>第1个单元格的内容</td> <td>第2个单元格的内容</td> </tr> </table>

1.1 跨行、跨列

<table border="1px"> <tr> <td colspan="3">学生成绩</td><!--colspan行合并单元格--> </tr> <tr> <td rowspan="2">张三</td><!--rowspan列合并单元格--> <td>语文</td> <td>98</td> </tr> <tr> <td>数学</td> <td>95</td> </tr> <tr> <td rowspan="2">李四</td> <td>语文</td> <td>88</td> </tr> <tr> <td>数学</td> <td>91</td> </tr> </table>

2. 表单（form）

<form method="post" action="1.php"><!--method：方法--> <p> 名字：<input name="user" type="text" ><!--input输入标签中的数据传递到后端，后端判断是什么值是通过name字段中的参数值进行判断的--> </p> <p> 密码：<input name="pass" type="password" > </p> <p> <input type="submit" name="button" value="提交"/> <input type="reset" name="reset" value="重填"/> </p> </form>

2.1 method:

规定如何发送表单数据常用值：==get,post==在实际网页开发中通常采用post方式提交表单数据

2.2 action:

表示向何处发送表单数据

name，type两字段最重要，在渗透过程中在from表单中发现这俩字段就可以知道后端的参数和类型

2.3 联动

<?php $user=@$_POST['user'];//使用POST方式得到数据，数据叫user；想使用GET方式的到数据将@$_POST改为@$_GET即可；@消除报错 echo $user; if(!$user){ 
    echo "please insert ?user="; } ?>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> </head> <body> <form method="post" action="1.php"><!--method：方法--> <p> 名字：<input name="user" type="text" > </p><!--input输入标签，name：标签的名称，type：标签的类型；输入标签中的数据传递到后端，后端判断是什么值是通过name字段中的参数值进行判断的--> <p> 密码：<input name="pass" type="password" > </p> <p> <input type="submit" name="button" value="提交"/><!--submit：提交--> <input type="reset" name="reset" value="重填"/> </p> </form> </body> </html>

访问html时提交数据没有指定发送的路径，数据会在当前路径下查找指定提交的文件。

一旦在url的位置发现?说明浏览器正在使用get方式传递数据。

2.3 表单元素

2.3.1 文本框

type="text" name：文本框名称(必填) value：文本框初始值 size：文本框长度 maxlength：文本框可输入最多字符 <input type="text" name="user" value="用户名" size="30" maxlength="20"/>

2.3.2 密码框

type="password" name：密码框名称(必填) size：密码框长度 <input type="password" name="pass" size="20"/>

2.3.3 单选按钮

type="radio" name：单选框名称(必填)，一组的名称需要相同 checked：单选按钮选中状态 value：单选框的值 <input name="g" type="radio" value="男" checked />男 <input name="g" type="radio" value="女" />女

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> </head> <body> <form method="post" action="1.php"><!--method：方法--> <p> 名字：<input name="user" type="text" > </p><!--input输入标签，name：标签的名称，type：标签的类型；输入标签中的数据传递到后端，后端判断是什么值是通过name字段中的参数值进行判断的--> <p> 密码：<input name="pass" type="password" > </p> <p> <input name="g" type="radio" value="男" checked />男 <input name="g" type="radio" value="女" />女 <input type="submit" name="button" value="提交"/><!--submit：提交--> <input type="reset" name="reset" value="重填"/> </p> </form> </body> </html>

2.3.4 复选框

type="checkbox" name：复选框名称(必填)，一组的名称需要相同 checked：复选按钮选中状态 value：复选框的值 <input type="checkbox" name="interest" value="sports"/>运动 <input type="checkbox" name="interest" value="talk" checked />聊天 <input type="checkbox" name="interest" value="play"/>玩游戏

2.3.5 下拉列表框

select:下拉列表框 option:选项 <select name="列表名称" size="行数"> <option value="选项的值" selected="selected">值</option > <option value="选项的值">…</option > </select>

2.3.6 按钮

<input type="reset" name="butReset" value="reset按钮"><!--重置按钮--> <input type="submit" name="butSubmit" value="submit按钮"><!--提交按钮--> <input type="button" name="butButton" value="button按钮"/><!--普通按钮-->

三、bp证书

打开代理输入http://burp
点击CA，下载证书

打开下载，将证书拖至桌面，
关闭代理，打开设置搜索证书，查看证书，证书颁发机构，点击导入

总结

<!DOCTYPE html> <html leng="en"> <head> <meta charset="UTF-8"> <title>标题</title> </head> <body> <from method="post/get" action="传向的后端代码"> <p> <input name="命名" type="类型" value="说明"> </p><!--段落--> </from> <p> <a href="要跳转到的页面链接" target="_self">文本或者图像</a><!--在当前页面跳转到指定的页面--> <a href="要跳转到的页面链接" target="_blank">文本或者图像</a><!--在新的页面跳转到指定的页面--> </p> <p> <img src="图片的位置：本地位置或网络位置" alt="图片异常后替代的文字" title="鼠标悬停显示的文字"> </p> </body> </html> input 的type：text,password,submit,reset,radio,checkbox,file

 </from> <p> <a href="要跳转到的页面链接" target="_self">文本或者图像</a><!--在当前页面跳转到指定的页面--> <a href="要跳转到的页面链接" target="_blank">文本或者图像</a><!--在新的页面跳转到指定的页面--> </p> <p> <img src="图片的位置：本地位置或网络位置" alt="图片异常后替代的文字" title="鼠标悬停显示的文字"> </p> </body>

input 的type：text,password,submit,reset,radio,checkbox,file “`

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/112484.html

简单了解前端代码