[2]-web安全前端基础

一、前端开发工具和开发流程

1.开发工具

  1. vs
  2. atom
  3. Sublime text
  4. vim

2.开发流程

  1. 前后端分离
    性能：同时前后端，服务器成本高
    成本：费工程师，术业有专攻
  2. 前后端走向
    前端：页面、速度、兼容、体验
    后端：三高（高并发、高可用、高性能）、安全、存储、业务

二、HTML

1.HTML简介

  1. 文本标记语言
    非常规编程语言
  2. 搭建网页
    标题标签
    段落标签

2.HTML网页结构

  1. 版本申明

    <!DOCTYPE html>

  2. 头部部分

    <head></head>

    标题、字符集、样式、链接等

  3. 主体部分

    <body></body>

    展示的大部分内容

  4. 注意：
    可以嵌套，从而构成复杂页面

3.HTML属性、标签、元素

  1. 标签
    HTML页面一般由标签和内容组成，标签一般成对出现，由开始标签和结束标签组成，例如：

    <p></p>
<img/>

  2. 元素
    包含开始到结束标签所有的代码，如下整个均为元素

    <p>
    hello
</p>

  3. 属性
    开始标签中，附加描述信息，如下的width、height

    <img src="xxxxx/xxx/xxx.png" width=50% height=30%/>

4.练习题-简单登录页面

  1. 要求
    通过简单html标签，做一个简单登录页面

  2. 练习代码
    做的比较拉胯，读者勿怪，后期会修复对齐等问题

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录练习</title>
</head>
<body>
    <form action="" name="login">
        用户名：<input type="text" name="username"> <br>
        密  码：<input type="password" name="password"><br>
        <input type="submit" value="登录">
    </form>
</body>
</html>

  3. 结果展示
    image-20230114125141638

三、CSS

1.概念

  1. 层叠样式表
    样式设计
    样式编辑

2.作用

  1. 控制样式
    浏览器debug窗口，styles就是CSS文件
    修改，则样式会改变
  2. 总结
    不会影响逻辑，但会影响外观

四、JavaScript

1.定义

  1. 可插入html页面
  2. 大多数浏览器都能执行的轻量编程语言
  3. 基于
    原型编程、多范式的动态脚本语言
  4. 支持
    面向对象、命令式、声明式风格

2.与web安全关系

  1. js为脚本语言
  2. 可引申出
    xss、文件上传漏洞，常年占据Top10

3.Node.js--后端

  1. 后端框架，运行在服务端的js
  2. 一种基于Chrome Js运行时建立的一个平台
  3. 速度、性能非常优秀

4.JavaScript具体执行逻辑

  1. 做出反应
    弹alert
  2. 控制HTML内容
  3. 改变HTML样式
  4. 验证输入
  5. 总结：
    能执行很多逻辑，从而暴露很多问题
posted @ 2023-01-18 14:14  缪白（Miubai）  阅读(43)  评论(0)    收藏  举报