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你能够发现一些为授权访问


总结



相关文章
|
8天前
|
前端开发 JavaScript API
现代前端开发中的Web组件化设计与实践
在现代前端开发中,Web组件化已经成为了一个关键的设计思想和实践方法。本文探讨了Web组件化的概念、优势以及如何在实际项目中进行设计和应用。通过分析实例和最佳实践,展示了如何利用组件化开发提升前端开发效率和代码可维护性,同时也解决了在大型项目中常见的代码重用和团队协作问题。
|
13天前
|
监控 JavaScript 前端开发
前端 JS 经典:Web 性能指标
前端 JS 经典:Web 性能指标
12 1
|
19天前
|
JSON 前端开发 Java
一文读Web开发 之接口后端接口、类与前端请求、拦截器编写
一文读Web开发 之接口后端接口、类与前端请求、拦截器编写
34 6
|
21天前
|
缓存 前端开发 安全
探索现代Web开发中的前端架构模式
【6月更文挑战第23天】随着互联网技术的飞速发展,前端架构在Web开发中扮演着越来越重要的角色。本文将深入探讨现代Web开发中使用的几种主流前端架构模式,包括单页面应用(SPA)、微前端架构和JAMStack等,并分析它们的优势与应用场景。通过实例演示,我们将看到如何根据项目需求选择合适的前端架构,以及如何利用这些架构模式提升开发效率和应用性能。
|
14天前
|
XML 前端开发 JavaScript
前端概论 web
前端概论 web
14 0
|
15天前
|
前端开发 JavaScript 开发者
现代前端开发中的Web组件化设计
随着Web应用程序复杂性的增加,现代前端开发越来越倾向于采用组件化设计。本文将探讨Web组件化的定义、优势以及实际应用中的最佳实践,帮助开发者更好地理解和应用这一技术。
|
17天前
|
前端开发 计算机视觉
视觉智能开放平台操作报错合集之人脸对比1:1,采用web前端直接调用,使用了base64处理图片,提示http错误码414,该如何处理
在使用视觉智能开放平台时,可能会遇到各种错误和问题。虽然具体的错误代码和消息会因平台而异,但以下是一些常见错误类型及其可能的原因和解决策略的概述,包括但不限于:1. 认证错误、2. 请求参数错误、3. 资源超限、4. 图像质量问题、5. 服务不可用、6. 模型不支持的场景、7. 网络连接问题,这有助于快速定位和解决问题。
|
18天前
|
前端开发 程序员 API
视觉智能开放平台产品使用合集之web前端拉起人脸识别该如何操作
视觉智能开放平台是指提供一系列基于视觉识别技术的API和服务的平台,这些服务通常包括图像识别、人脸识别、物体检测、文字识别、场景理解等。企业或开发者可以通过调用这些API,快速将视觉智能功能集成到自己的应用或服务中,而无需从零开始研发相关算法和技术。以下是一些常见的视觉智能开放平台产品及其应用场景的概览。
|
19天前
|
移动开发 前端开发 JavaScript
快速上手web前端开发(超详细教程)
快速上手web前端开发(超详细教程)
|
21天前
|
前端开发 JavaScript
web开发前端适配
web开发前端适配
15 0