简单了解前端代码

网安咸鱼1517

已于 2023-08-27 15:42:35 修改

阅读量1.2k

点赞数 4

分类专栏： php简单学习文章标签：前端 html5

于 2023-08-23 08:55:43 首次发布

本文链接：https://blog.csdn.net/weixin_58954236/article/details/132443954

版权

php简单学习专栏收录该内容

3 篇文章 1 订阅

订阅专栏

一、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-1692752086281)(%E5%89%8D%E7%AB%AF%E4%BB%A3%E7%A0%81.assets/image-20230815115043557.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 ```

网安咸鱼1517

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
简单了解前端代码

DOCTYPE html > < html leng = " en " > < head > < meta charset = " UTF-8 " > < title > 标题 < body > < from method = " post/get " action = " 传向的后端代码 " > < p > < input name = " 命名 " type = " 类型 " value = " 说明 " >
复制链接

扫一扫