前端基础

一、前端简介

网站一般由2个部分组成,前端负责展示,例如网页的书写和排版,后端负责处理请求,例如对搜索引擎的请求。

前端包括三种语言:HTML、CSS、JS

前端很热门,可以美化网页,有专门的前端开发工程师,其工作就是增强前端页面的体验感。

前端就是网页的展示页面的书写和排版。

1、HTML:前端页面的骨架
HTML叫超文本标记语言,是一种用于创建网页的标准标记语言

2、CSS:前端页面的化妆师
CSS叫层叠样式表,能够对网页中元素位置的排版进行像素级精确控制,拥有对网页对象和模型样式编辑的能力

F12查看网页源码:Ctrl+F搜索CSS:去除CSS:百度网页排版变得混乱
前端基础_第1张图片
前端基础_第2张图片

3、JavaScript:丰富网页功能的脚本
JavaScript简称JS,是一种浏览器能够执行的脚本语言,功能非常强大,可以操控浏览器。

酷炫js特效代码

如果将前端代码全部删除,网页会变成空白页面。
前端基础_第3张图片
可以在浏览器网页源码中任意修改代码,当然,改变的只是自身浏览器上的页面展示,所以不要轻信他人发出来的网页截图,网页是可以修改的。

前端代码是开源的,不法分子可以将网页保存下来,制作钓鱼网站。

渗透测试的特性是接触面广,需要了解基本的一些语法结构,能够看懂别人写的代码。

渗透测试在前端一般和HTML和JS接触较多,CSS较少。

渗透测试的核心是寻找漏洞,越精通开发,越容易寻找漏洞。

二、HTML最简单的架构

#HTML标签是由尖括号包围的关键词,例如<html>
#HTML标签通常成对出现,例如<b>b>

 声明H5(HTML5版本)
<html> HTML代码开始标签
<head> 头部开始标签
	<meta charset="utf-8" /> 规定编码方式
	<title>Hello World!title> 规定title显示
head> 头部结束标签
<body> 内容开始标签
	<h1>一级标题<h1> 一级标题标签
		<h2>二级标题<h2> 二级标题标签
	<p>段落一p> 段落标签,其核心是换行
	<p>段落二p>
	<b>加粗b>
body> 内容结束标签
html> HTML代码结束标签
 
<html>
<head>
	<meta charset="utf-8" />
	<title>Hello World!title>
head>
<body>
	<h1>一级标题<h1>
		<h2>二级标题<h2>
	<p>段落一p>
	<p>段落二p>
	<b>加粗b>
body>
html>

前端基础_第4张图片

HTML标签

#有一类标签叫做自闭合标签
 
<meta charset="utf-8" />
<img /> 加载图片
<br /> 换行
<hr /> 水平线

#标签可以定义一些属性值
<h1 id='zk'> 命名,方便CSS和JS操作

<img src="https://www.baidu.com/img/baidu_jgylogo3.gif" /> 加载图片

HTML具有容错性,有时候写得不规范,浏览器会自动补全,或者不执行,但也不会报错,这是为了用户的体验感。

三、JS

JS可以大大扩展前端页面与用户的交互,JS的核心是操控浏览器,这是一件很危险的事情,浏览器可能执行恶意的JS代码。

JS的作用:
弹框:alert()
读取自动填充的密码:document.getElementByld(‘pwd’).value
截屏
记录键盘
访问内网页面
偷偷发送数据包访问其他页面

自动填充密码是非常危险的,不仅可以通过JS读取自动填充的密码,还可以修改前端页面代码,将type=“password"修改为"text”,就可以将密码显示出来。

<script>alert(1)script>

前端基础_第5张图片

JS非常强大,应用非常广泛,但是实现功能需要较好的代码功底。

学会禁用JS能够发现一些未授权访问,原理是禁用JS之后,弹窗不能够强制跳转,就可以看见后台的信息。
谷歌浏览器:内容:网站设置:JavaScript:禁止

你可能感兴趣的:(前端,html5,css,javascript)