HTML,JS

VS code

去官网安装即可。

一、快捷键

ctrl+B	隐藏侧边编辑栏
ctrl+\	创建多个编辑器
ctrl+数字	聚焦到不同的编辑器
ctrl+G：数字	跳转到指定行
ctrl+左右键	单词之间的移动
alt+shift+向上箭头	把代码向上复制
alt+鼠标点击任意位置	创建多个光标，实现批量增删单词字母
ctrl+/	注释
ctrl+F	搜索功能

二、插件

1、Chinese（simplified）汉化版插件

2、code runner 运行JS，C++等代码

3、live server实时更新

4、Bracket pair colorizer2:括号成对出现

三、Web标准

• web标准

  • 结构标准（HTML）:用于对网页元素进行整理和分类

  • 行为标准（JS）：用于交互

  • 表现标准（CSS）：用于设置网页元素的版式、颜色大小等外观

• 浏览器组成

  • 渲染引擎（浏览器的内核）：用来解析HTML语言

  • JS解析引擎：用来编译JS代码

HTML

• 超文本标记语言，负责描述文档语义的语言。

• 网页是由网页元素组成的，这些元素是由HTML标签描述出来的，然后通过浏览器渲染引擎解析。

• HTML内容是固定的各种标签。

1、html四个结构部分（html：5）

• html：5回车可以出现一个完整的html框架。

    声明该文件是一个HTML语言
   1、根部
             2、头部
    
    
      3、标题

              4、主体，一般写语言在中写
    

2、head标签内部常见的标签

• title：指定页面标题

• meta:指定页面配置

• base

• link

3、body标签

用来设置页面属性

• bgcolor 改变页面颜色

• text 改变页面字体颜色

• background

4、编码语言

• UTF-8：字多，有各种国家的语言，但是保存尺寸，从而导致文件冗杂

• gb2312：字少，只用中文或者少数外语和符号，但是尺寸小，文件轻巧

• 如何查网页的编码方式？

  • 在页面中右击、查看页面源代码、查找charset属性

5、html中 标签分为两个等级

• 文本级标签：p, span, a, b, i, u, em。文本标签只能在里面放文字，图片，表单元素。（a标签里面不能放a和input）

• 容器级标签：div，h系列，li，dt，dd。容器标签里面可以放任意内容。

• 注意：P标签包裹a标签。

6、排版标签

• 标题标签h

  • h1-h6：其中有一个属性是align

    123<\h1>  在中间显示

• 段落标签p

  • p标签是用来进行换行，在页面中呈现换行效果

• 水平线标签hr

  • ​

    ---

    ​

• 换行标签br

• div和span分块标签

  • div把标签内容单独放在一块，会呈现换行结果

  • span和div功能一样，但是span不会换行

7、字体标签（安全问题）

• 转义字符都以&开头以；结尾

• html实体编码

转义字符(每个后面都有一个分号)	实际含义	转移字符	实际含义
<；	小于号	&apos；	单引号
>；	大于号	©；	商标
；	空格	&trade；	版权
&；	字符&	绐；	字绐（dai）
"；	双引号

• 安全问题：XSS。XSS表示的是攻击者在前端向网页当中插入恶意的js语句并且能够被执行，就会造成XSS漏洞。

8、script标签

• 主要是用来写js代码的，在内部写js代码

9、超链接a标签（安全问题）

• 外部链接

• 邮件链接

• 属性有：href，title（悬停），target（用什么方式打开，是要在开一个网页还是在原网页中打开）。

• 安全问题：钓鱼，暗链

10、暗链--黑帽SEO，做引流

• 暗链的意思是将恶意网站穿插在流量很大的正规网站中，从而带动恶意网站的流量。

• 黑帽SEO是通过非法手段提高网页搜索排名，从而提高网页的访问量，获取流量，也就能非法盈利。

• 解决方法：删除暗链源代码

• 攻击者是如何植入暗链的：查找漏洞从而植入恶意代码

• 怎么防护？

  • 网页目录监控（云平台）（一般情况下的网页目录不变，当发生变化时则要注意查看监控）

  • 漏洞扫描

  • 外围防护：WAF,IPS

11、img图片标签（安全问题）

• 相对路径：相对于当前文件夹的上级或者上上级目录

• 绝对路径：在电脑中存在的真实位置

• • 属性src指的是图片的资源，可以是图片的名称，也可以是图片的位置

  • 属性alt是当图片不能正常显示的时候的提示语

  • 属性title当鼠标停留在图片的时候悬停文字

• a标签可以和img标签混合使用，达到点击一个图片从而跳转到另外一个网站，这样会产生钓鱼危险。

  这里这个1.png是和html在同一个文件夹中的，才可以运行。

12、列表标签

• 无序列表

  
          
  1
          
  2
          
  3
  

• 有序列表

  
          
  a
          
  b
          
  c
   

• 定义列表

  • dt是列表标题，必须有

  • dd是列表选项，可选

  
          
  color
          
  red
          
  blue
          
          
  fruit
          
  banana
          
  apple
   

13、表格标签

• 表格是由行tr组成，每行是由单元格td组成的

• 属性：

  • border表示表格外面的线条，border=“3”

  • style=“border-collapse:collapse;”表示两边框合并为一体

  • width

  • height

  • border color

  • align：表示表格的水平对齐方式

                                                                                                                             

姓名	姓别	年龄
李林博	男	24
姬丽娜	女	24

14、表单标签

• 用于服务器的交互

• 用于收集用户信息的

• 属性：

  • name：表单名称

  • id：表单唯一标识，（使用性别的时候就需要用id这个属性）

  • action：指定表单数处理程序php

  • method：表单的提交方式get和post两种方式：

    • get：以name=“value”形式追加到处理程序后面且显示在URL中，以&隔开（把账号密码user=admin&passwd=123提交给index.php）

      • 特点是只适合提交少量的表单，且提交材料相对不安全

    • post：以隐藏的形式进行发送，发送的数据是不可见的

      • 特点是可以提交大量的数据，并且可以提交多种类型（word，excel，rar，img）

• 输入标签input

  • 属性：

    • text默认

    • password：密码类型

    • radio：单选按钮

    • checkbox多选按钮

    • button普通按钮

    • submit提交按钮

    • maxlength表示文本框内最大可以输入的字符数量

       
              姓名：马哥
      
              昵称：
      
              名字：
      
              密码：
      
              性别：男
              女
      
              爱好：渗透
              开发
              代码审计
          

• 多行文本输入框textarea

• label

  • 效果为点击前面的圆圈和后面的男字都能选中

  
      男
      
      女

作业

• 使用html写一个网页，要求满足以下条件：

  • 网页标题：网络安全C10期课程

  • 网页背景颜色：蓝色

  • 网页中含有一个超链接，点击即可跳转至百度

  • 如果在网页中不做任何操作，5秒后跳转到马哥教育网页

    解答：
    
    
    
        
        
        
        
    
    
        点我
    
    

JavaScript--弱变量类型

1、书写第一个JS代码

（1）行内式

• 将JS代码直接写在标签内部

    
  显示在最上端，以on开头的为事件属性
  缺点为只能写少量的js代码，可读性差，HTML用双引号，JS用单引号

（2）内嵌式

• 将JS代码写在script内部

  
   可以写多行代码

（3）引入外部的JS文件

• 重新写一个JS代码，在HTML中将其进行引用

• 现在该文件夹中重现创建一个js代码如3.js在里面写相关代码，然后在html中进行引用

• 当使用引入外部的js文件时不能在script中写任何js代码了，只能写引用的js代码文件名称

• 总结：在实战开发中总是习惯使用方式3，因为方式3可以将html和js代码分割开来，能够提供功能模块化，且提供可便携的可读性。

2、JavaScript语法书写规则

（1）、每一句js语句后面都有一个分号

（2）、JS对换行和缩进不敏感

（3）、对大小写很敏感

（4）、Alt+shift+A多行注释

3、输出语句alert(XSS安全问题)

• 调出弹窗

• 经常在检查漏洞的时候使用alert(1)

• print(1);调出打印机也能体现出有漏洞或者有问题

4、控制台输出语句console.log

• console.log(内容)；将里面的内容输出给控制台

5、弹出输入框prompt

var a = prompt("请打印出自己的名字:");
console.log(a);
​

6、JS变量

• 常量（字面量）

  • 数字

  • 字符串

  • 布尔字面常量

• 变量

  • 先声明后赋值

  • 在声明的时候就已经赋值称为变量的初始化

  • 使用var来定义变量

  • 变量的名称定义规范：只能由数字，字母，下划线，美元$组成；

  • 不能由数字开头，不允许出现空格；

  • 使用英文命名，采用驼峰法进行命名（多个英文字母的时候）；

7、关键字，标识符，保留字

• 标识符

  var name = ZhangSan
  此时这个name就是一个标识符，即标识符为自主命名的

• 关键字

  • 关键字的意思就是JS中已经将其使用了，比如var就表示定义变量，这就为一个关键字

• 保留字

  • 现在还不是关键字，但是以后可能会成为关键字。

8、变量的数据类型

（1）基本数据类型

• 基本数据类型指的是参数赋值的时候传的是数值，包括以下五种：

  • 数值

  • 字符串

  • 布尔

  • 空值

  • 未定义值

（2）引用数据类型

• 引用数据类型指的是参数赋值的时候传递的是地址，包括一种：

  • 对象（Object）

  eg:
  基本数据类型
  var a = 23;
  var b = a;     //此时把数值23传递给b
  a++; #a=a+1=24
  console.log(a);  //结果为a=24
  console.log(b);  //结果为b=23
  ​
  引用数据类型
  var obj = new Object(); //定义一个引用数据类型
  obj.name = "张三";     //name类似与obj这个对象的一个属性
  var obj2 = obj;         //将obj赋值给obj2;
  obj.name = "李四";     //此时将Obj的属性name更改
  console.log(obj.name);  //结果为张三
  console.log(obj2.name); //结果为张三
  由于引用数据类型传递的是地址，假设obj指向的地址为a，则将obj赋值给obj2，此时obj2地址也是指向的是a，将地址a的值由李四修改为张三，这个时候，由于obj和obj2指向的都是同一个地址，所以两个最终的结果都为修改后的张三，因为地址没有变。

• 栈内存和堆内存

  • 所有的变量都是存储在栈内存的。

  • 基本数据类型的值直接保存在栈内存中，值与值之间是独立的，修改一个不会影响其他的变量。

  • 引用数据类型也就是对象是保存在堆内存中，在堆内存中，是开辟一个又一个新的空间，用来存放内容。变量保存的是对象的内存地址，将这些内存地址存放在栈内存中，所以如果两个变量保存了同一个对象的引用，当一个变量修改属性的时候，另外一个变量也会受到影响。

9、string类型

• 引号之间不能混合使用；

• 同类引号之间不能进行嵌套；

  var name = "magedu";
  console.log(typeof name);

10、转义字符

• 使用\来进行转义，可以显示出字符原来的语义；

• \r回车

• \t缩进

• \n换行

• \b空格

• 获取字符串长度：console.log(a,length);

11、字符串的拼接

• 使用+来进行字符串之间的拼接

  var number = 10;
  var str = "magedu";
  sum = number + str;
  console.log(typeof sum); //string

• 字符串+任何数据类型=字符串类型；可以将其他数据类型进行同化；

• 模板字符串

  var name = magedu;
  var age = 23;
  这里使用的是反引号
  console.log(`我是${name},age:${age}`);

12、Boolean布尔值类型

• true（1）

• false（0）

  console.log(typeof true);
  //boolean

13、数值型Number

• NaN指的是Not a number;可是使用typeof来查看一个变量的类型；

• Infinity是数值

  console.log(typeof Infinity); //number

• 隐式转换，采用+则为字符串的拼接（其他数据类型会被同化）；采用-则会转换为数值型。

  var c = 23;
  var d = '1';
  var e = c + d;
  var f = c - d;
  console.log(e,typeof e);  //231，string
  console.log(f,typeof f);  //22 number

14、Null空对象

• 空对象的类型是Object；

  console.log(typeof null);  //object

15、Undefined未定义

• 变量已经被声明，但是未赋值

• 变量未被声明

• 函数无返回值

• 调用函数时，未传参（本来应该传递一个参数给一个函数的）

• Null和Undefined的区别：

  • 10+Null=10

  • 10+Undefined=NaN

  • NaN == Undefined True

  • NaN === Undefined False

• 等号的区别：

  • =赋值

  • == 判断是否相等，仅仅只判断数值，不判断类型等其他因素

  • === 判断是否相等，这里判断的比较多，要完全一模一样，类型，数值都得相等

    console.log('1' == 1);   //true
    console.log('1' === 1);  //false

16、运算符

（1）算数运算符（整数溢出）

• +，-，*，/，%

• parseInt(345/100);表示取整

• a++,++a之间的区别：

  • a++表示的是先赋值后自加

  • ++a表示的是先自加后赋值

• int的数值范围是-2^32~2^32-1(这里会存在整数溢出的情况)

（2）一元运算符

• 只需要一个操作数

• +在其他的数据类型前面加一个加号会使其转换为数值类型

• typeof

• -表示取反

（3）逻辑运算符（SQL注入漏洞）

• &&与 一假则假

• ||或 一真则真

• !非 取反

• 与或运算最终的结果的类型取决于谁决定最终的结果。

• 能参与逻辑运算的都是布尔。

  console.log( typeof (1 && '1'));  //string
  console.log( typeof ('1' && 1));  //number
  因为决定最终结果的均在后者，所以后者是什么类型最终得到的结果就为什么类型。

（4）赋值运算

• =

• +=

• *=

• /=

• %=

• &&的优先级高于||

• 通常不知道优先级的情况下，采用加括号的方式来显示自己运算的优先级。

17、Unicode编码（SQL注入漏洞）

• \u四位编码

18、事件句柄

• 以on开头的称为事件属性；

• 标签和事件属性之间具有对应关系的；

作业：

1、使用html写一个网页，要求满足以下条件：

（1）网页中含有任意一张图片，图片路径使用绝对路径，鼠标悬停在图片时出现“马哥教育” 文本，且点击图片可跳转至马哥教育官方页面

（2）网页中包含账号、密码登录，且账号提前定义好是admin且不可更改，输入密码时显 示加密形式

    
    
    


    
        
    
    
    

        账号:

        密码:

    

注意：这里的图片要和html在同一个文件夹中，因为我使用的是相对路径。

2、判断题 （1）Java是编译型语言。

 错误（解释性语言）

（2）Javascript中，不区分大小写字母，也就是说A和a是同一个变量。

错误（大小写敏感）

（3）Javascript中的常量包括String、Number、Boolean、Null、Undefined。

错误（常量有三种，题目中显示的这个是基本数据类型，常量有数字，字符串和布尔值）

（4）String字符串的语法中既可以使用单引号，也可以使用双引号。

 正确

（5）typeof是用来判断变量类型，不可以当作运算符使用。

错误，typeof就是一个一元运算符

（6）任何值和 undefined 运算，undefined 可看做0运算。

错误，任何值与undefined运算，最终的结果均为NaN.

3、请分别描述下列代码中“+”的作用。 （1）console.log("年龄：" + 20);

字符串拼接

（2）console.log(11+22+33);

运算符

（3）console.log("网络+安全");

字符串

（4）var a = 1; var b = 2; console.log("a" + b);

结果为a2，字符串拼接

（5）var a = 1; var b = 2; console.log("a + b");

字符串，运算结果为a+b

4、计算下述代码的打印值 var a = 10; var b = 10; console.log(a++); console.log(++a); console.log(--b); console.log(b--);

10
12
9
9
a++是先赋值后自加，++a是先自加后赋值。

5、分别使用行内式、内嵌式、引入外部文件的方法造成网页弹窗，要求触发弹窗的JS命令 不止一种。

​
21.js内部：
alert("这是一个恶意代码");

​

6、请自行准备一个Centos操作系统，要求版本7及以上。