Web前端基础

简介: Web前端基础

一、前端是什么?


    我们所看到的网站一般由两个部分组成,前端负责展示,后端负责处理请求,比如你打开一个百度页面。

       

        这个页面就是由前端代码组成,为什么网页会有排版,为什么你可以看到图片和文字,这个就是由前端代码构成


   前端代码是什么?


  前端代码指的是三种语言:HTML+CSS+JS


               在程序员的世界中有一种工作叫做前端开发工程师,就是专门写前端页面来加强用户体验感的。


HTML:是前端页面的骨架


CSS:是前端页面的化妆师


JS:丰富网页功能的脚本


HTML 叫做 超文本标记语言 是一种用于创建网页的标准标记语言


CSS   叫做 层叠样式表 能够对网页种元素位置的排版进行下像素级精确控制,拥有对网页对象和模板样式编辑的能力。


Javascipt(简称:js)


       他是一种浏览器可以执行的脚本语言,功能非常强大。


渗透测试的特性是接触面广,但是请记住我们不是开发,我们要有了解基本的一些语法架构,并且能够看得懂别让人写的代码。


       渗透测试在前端一般和HTML 还有JS接触比较多,CSS用到的较少。

二、HTML最简单的构架



HTML 标签是由尖括号包围的关键词,比如<html>


HTML 标签通常是成对出现的,比如 <b> 和 </b>


<!DOCTYPE html>  声明h5(声明版本)


<html>                     html代码开始标签


<head>                    头部开始标签


<meta charset="utf-8">  规定编码方式


<title>你好,HTML</title>        规定title显示什么


</head>        头部结束标签


<body>        内容开始标签


    <h1>我的第一个标题</h1?  标题标签


    <p>我的第一个段落。</p>   段落标签


</body>        内容结束标签


</html>         html代码结束标签


HTML是一门语言,标签超级多,我觉得看到不懂的标签去查询就可以了


有一类的标签叫做自闭合标签(看到标签最后又一个/就是)


       例如:加载图片的<img/>


                  换行 <br />


                  水平线 <hr />


标签可以定义一些属性值,比如给他一个名字


<h1 id='zk'>        方便JS和CSS操作


还有例如:


<img src="https://www.baidu.com/img/baidu_jgylog03.gif" />


我们加载个图片让页面更加丰富


三、JS的妙用


Js可是大大的扩展前端页面与用户交互的功能,Js其实核心就是操作你的浏览器去做他规定的事情,很明显Js可以操纵你的浏览器,这个是一个很危险的事情,所以说如果你执行了恶意的Js代码会影响你电脑的安全性。


       例如:


               弹框:alert()


               读取自动填充的密码:document.getElementByld('pwd').value


               截屏


               记录键盘


               访问内网页面


               偷偷发送数据包出去去访问其他页面


                       Js非常的强大,应用的也非常广泛,但是实现功能可能需要很好的代码功底


                       不要害怕,前辈以及开发了一些专门攻击的脚本,初期我们只要能套着用就行了


学会禁用Js你能够发现一些为授权访问


总结



相关文章
|
2天前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
|
5天前
|
前端开发 JavaScript 开发者
新一代前端框架:革命性的Web开发利器
传统的前端框架在满足日益复杂的Web开发需求上逐渐显露出局限性,而新一代前端框架的出现,以其革命性的设计和功能,重新定义了Web开发的标准。本文将介绍这些新一代前端框架的特点和优势,并探讨它们在实际项目中的应用。
|
9天前
|
JavaScript 前端开发 UED
【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
【5月更文挑战第2天】【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
|
9天前
|
JavaScript 前端开发 索引
【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
【5月更文挑战第2天】【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
|
9天前
|
存储 前端开发 JavaScript
【Web 前端】如何找到所有 HTML select 标签的选中项?
【5月更文挑战第2天】【Web 前端】如何找到所有 HTML select 标签的选中项?
|
9天前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
9天前
|
前端开发 JavaScript
【Web 前端】$(document).ready() 是个什么函数?为什么要用它?
【5月更文挑战第2天】【Web 前端】$(document).ready() 是个什么函数?为什么要用它?
|
9天前
|
JavaScript 前端开发
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
|
10天前
|
JavaScript 前端开发
【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同?
【5月更文挑战第1天】【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同?
|
10天前
|
JavaScript 前端开发
【Web 前端】网页上有 5 个div元素,如何使用JQ来选择它们?
【5月更文挑战第1天】【Web 前端】网页上有 5 个div元素,如何使用JQ来选择它们?