🌝博客主页：泥菩萨
💖专栏：Linux探索之旅 | 网络安全的神秘世界 | 专接本 | 每天学会一个渗透测试工具
web
web（world wide web）即全球广域网，也称万维网
我们常说的就是网页端
网页
是构成网站的基本元素，网页主要由文字、图像和超链接等元素构成
我们在浏览器上输入网址后，打开的任何一个页面，都属于网页
浏览器
是网页运行的平台，常见的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera等
W3C组织
w3c：world wide web consortium，万维网联盟组织，用来制定web标准的组织
w3c万维网联盟是国际最著名的标准化组织
为什么要遵循web标准呢？因为很多浏览器的内核不同，导致页面解析出来的效果可能会有差异，给开发者增加无谓的工作量，因此需要指定统一的标准
web标准
web标准：制作网页要遵循的规范
web标准不是某一个标准，而是由w3c组织和其他标准化组织制定的一系列标准的集合
1、web标准包含三个方面：
- 结构标准（HTML）：用于对网页元素进行整理和分类
- 表现标准（CSS）：用于设置网页元素的版式、颜色、大小等外观样式
- 行为标准（JS）：用于定义网页的交互和行为
根据上面的web标准，可以将web前端分为三层，如下：
2、web前端分三层：
- HTML：超文本标记语言，从语义的角度描述页面的结构。相当于人的身体组织结构
- CSS：层叠样式表，从审美的角度美化页面的样式。相当于人的衣服和打扮
- JS：javascript，从交互的角度描述页面的行为。相当于人的动作，让人有生命力
[!CAUTION]
css不存在安全漏洞，所以我们不关注
浏览器分成两部分：
- 1、渲染引擎（即：浏览器内核）
- 2、JS引擎
1、渲染引擎（浏览器内核）
浏览器所采用的「渲染引擎」也称之为「浏览器内核」，用来解析html和css。渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息
渲染引擎是浏览器兼容性出现问题的根本原因
渲染引擎的英文叫做Rendering Engine。通俗来说，它的作用就是：读取网页内容，计算网页的显示方式并显示在页面上
常见的浏览器内核如下：
备注：360的浏览器，以前使用的IE浏览器的Trident内核，但是现在已经改为使用 chrome 浏览器的 Blink内核
另外，移动端的浏览器内核是什么?大家可以自行查阅资料。
2、JS引擎
也称为JS解释器。用来解析网页中的JavaScript代码，对其处理后再运行
浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎来执行JS代码。JS引擎执行代码时会逐行解释每一句源码（转换为机器语言），然后由计算机去执行。所以JavaScript语言归为脚本语言，会逐行解释执行
常见浏览器的JS引擎如下：
HTML的概念
超文本标记语言
HTML不是一种编程语言，是一种描述性的标记语言
作用： html是负责描述文档语义的语言
概念：超文本
所谓的超文本，有两层含义：
（1）图片、音频、视频、动画、多媒体等内容，称为超文本，因为它们超出了文本的限制
（2）从一个文件跳转到另一个文件，与世界各地主机的文件进行连接。即：超链接文本
概念：标记语言
HTML不是一种编程语言，是一种描述性的标记语言。这主要有两层含义：
（1）标记语言是一套标记标签。比如：标签表示超链接，属于html标签
（2）编程语言有编辑过程，而标记语言没有编译过程，html标签是直接由浏览器解析执行
HTML是负责描述文档语义的语言
HTMI格式的文件是一个纯文本文件（就是用txt文件改名而成），用一些标签来描述语义，这些标签在浏览器页面上是无法直观看到的，所以称之为“超文本标记语言”
- 网页：由各种标记组成的一个页面
- 首页：一个网站的起始页面或导航页面，通常命名为index.html
- 标记：也叫标签，每个标签都规定好了特殊的含义。比如：
- 元素：内容
- 属性：每个标签的辅助信息
- XHTML：符合xml语法标准的html
- DHTML：动态网页， 结合起来的页面
- HTTP：超文本传输协议，规定客户端浏览器和服务端交互时数据的格式
- SMTP：邮件传输协议
- FTP：文件传输协议
vscode执行代码需要放在文件夹下
输入，自动生成html框架，在中书写内容
双标记：标签成对出现
单标记：单标签
属性与标记之间、各属性之间用空格分开，属性值用双引号括起来
html骨架标签分类
1、文档声明头
以开头的语句，简称DTD
DTD可告知浏览器文档使用哪种HTML或XHTML规范
2、页面语言lang
下面这行标签，用于指定页面的语言类型：
最常见的语言类型有两种：
- en：定义页面语言为英语
- zh-CN：定义页面语言为中文
3、头标签head
面试题：
- 问：网页的head标签里面，表示的是页面的配置，有什么配置？
- 字符集、关键词、页面描述、页面标题、IE适配、视口、ipone小图标等
头标签内部的常见标签如下：
- ：指定整个网页的标题，在浏览器最上方显示
- ：为页面上的所有链接规定默认地址或默认目标
- ：提供给有关页面的基本信息
- ：定义文档与外部资源的关系
meta标签
meta表示“元”，“元”配置，就是表示基本的配置项目
常见的几种meta标签如下：
（1）字符集charset
（2）视图窗口viewport
（3）定义“关键词”
（4）定义“页面描述”
base标签
base 标签用于指定基础的路径。指定之后，所有的a链接都是以这个路径为基准
4、body标签
：用于定义HTML文档所要显示的内容，也称为主体标签。我们所写的代码必须放在此标签内。
标签的属性有:
- bgcolor：设置整个网页的背景颜色
- background：设置整个网页的背景图片
- text：设置网页中的文本颜色
- leftmargin：网页的左边距。IE浏览器默认是8个像素
- topmargin：网页的上边距
- rightmargin：网页的右边距
- bottommargin：网页的下边距
黑帽SEO
攻击者在网页插入恶意的标签，浏览器的搜索引擎会解析源代码，用户在访问正常的浏览器站点的同时也会访问暗链，因此来提升恶意网站的搜索排名
——暗链
危害：
对业务本身没有影响，但会被上级监管单位检测到，如果不及时处理这个业务站点必须下架
如何防护：
- 安全产品：网页防篡改
- 漏洞扫描
- WAF：应用防火墙
解决方法：
删除恶意标签
——钓鱼
——钓鱼
计算机只能处理二进制的数据
ASCII码： 美国发布的，1个字节（8位）表示1个字符，共可以表示2^8=256个字符
ANSI编码： ASCII码的扩展，用2个字节（16位）表示一个汉字，共可以表示2^16=65536个汉字
中国的ANSI编码是GB2312
日本的ANSI编码是JIS编码
台湾的ANSI编码是BIG5编码
GBK： 对GB2312的扩展
Unicode编码（统一编码）： 用4个字节表示一个字符，实际上不需要那么多字符，会造成空间的极大浪费
UTF-8： 根据字符的不同，选择其编码的长度
中文能够使用的字符集有两种：
- UTF-8
- GBK
重点1：避免乱码
我们用标签声明的当前这个html文档的字库，一定要和保存的文件编码类型一样
重点2：UTF-8和GB2312的比较
保存大小：UTF-8（更臃肿，加载更慢）> GB23122（更小巧，加载更快）
总结：
- UTF-8：字多，有各种国家的语言，但是保存尺寸大，文件臃肿
- GB2312：字少，只有中文和少数外语和符号，但是尺寸小，文件小巧
标题使用至标签进行定义
为最大标题，为最小标题
HTML注释的格式如下：
可以把html文档分割成若干段落
属性：
- ：对齐方式。属性值包括left、center、right
HTML标签是分等级的，HTML将所有的标签分为两种：
- 文本级标签： p、span、a、b、i、u、em
文本级标签里只能放文字、图片、表单元素（a标签不能放a和input） - 容器级标签：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。
水平分割线，可以在视觉上将文档分割成各个部分
如果希望某段文本强制换行显示，就需要使用换行标签
1、前端页面没有办法显示想要的符号
2、HTML和JS代码出现符号混用，可能会造成安全漏洞
XSS（跨站脚本攻击）
如果网站本身没有进行实体编码，也没有对用户输入的特殊字符进行转义的话，那么用户输入什么代码都会被浏览器渲染，从而达到攻击的效果
攻击可以通过如下代码进行弹窗：
通过实体编码进行转义，过滤安全漏洞后，代码如下：
超链接有外部链接和邮件链接
1、外部链接：链接到外部文件
2、邮件链接
超链接的属性
target属性有以下几个值：
title属性举例：
效果如下：
备注1：分清楚img和a标签的各自的属性
区别如下：
备注2：a是一个文本级的标签
正常情况：此时只有文字部分能够被点击
不正常情况：文字整段空白部分也能被点击，不符合开发效果
介绍
img：英文全称image（图像），代表的是图片
如果要想在网页中显示图像，就可以使用img标签，它是一个单标签，语法如下：
能插入的图片类型
- 能够插入的图片类型是：jpg(jpeg)、gif、png、bmp等
- 不能往网页中插入的图片格式是：psd、ai等
HTML页面不是直接插入图片，而是插入图片的引用地址，所以要先把图片上传到服务器上
src：指图片的路径
再写图片的路径时，有两种写法：相对路径、绝对路径
写法一：相对路径
相对当前页面所在的路径，和分别代表当前目录和上一层目录
写法二：绝对路径
从根目录开始表示文件位置
width、height属性
单位可以是像素（px)，也可以是百分比（%）
重要提示： 只设置windth和height其中一个值，就可以保证图片等比例缩放，
alt属性
当图片不可用的时候，代替图片显示的内容
title属性
提示性文本。鼠标悬停时提示的文本
- 列表标签：、、
- 表格标签：
- 表单标签：
1、无序列表，里面的每一项是
也可以嵌套使用
2、有序列表，里面的每一项是
属性：
- ，属性值可以是：1（默认）、a、A、i、I
- 属性表示从几开始
3、定义列表
没有属性，dl的子元素只能是dt和dd
- dt：列表标题
- dd：列表项
备注：dd是描述dt的
表格标签用表示，一个表格是由每行组成的，每行是由每个单元格组成的。
例如，一行的单元格：``
属性：
- ：边框，单位为px
- ：表格的边框颜色
- ：宽度
- ：高度
表单标签用表示，用于与服务器的交互。表单就是收集用户信息的
属性：
- ：表单的名称，用于JS来操作或控制表单时使用
- ：表单的唯一标识，方便对表单进行操作
- ：指定表单数据的处理程序，一般是PHP，如：action=“login.php”
- ：表单数据的提交方式，一般取值：get(默认)、post
注意：表单和表格嵌套时，是在标记中套标记
get提交和post提交区别
-
get：参数和参数的值会在url中显示，不安全
显示内容如下：
https://127.0.0.1?admin=li&password=123 -
post：不会显示在url中，安全
：输入标签（文本框）
属性：
-
：文本框里的默认内容（已经被填好了的）
-
：文本框只读，不能编辑
-
：文本类型
属性值可以是：
属性值 含义 text（默认） 密码会明文显示 password 密码类型，密文 radio 单选按钮 checkbox 多选按钮
name属性值相同的按钮作为一组进行选择checked 当时
属性值为checked，默认处于选中状态button 普通按钮 submit 提交按钮 reset 重置按钮 file 文件选择框
：多行文本输入框
text就是”文本“，area就是”区域“
属性：
- ：指定文本区域行数
- ：指定文本区域列数
- ：只读
：为input定义标注
我们先来看下面一段代码：
对于上面这样的单选框，我们只能点击那个小圆圈才可以选中，点击”男“、”女“这两个文字选不中，于是，label标签派上了用场
本质上来讲，”男“、”女“这两个文字和input标签是没有关系的，而label就是解决这个问题的。我们可以把input和汉字包裹起来作为整体
解决方法如下：
让label标签的for属性值，和input标签的id属性值相同，那么这个label和input就有绑定关系了
当然了，复选框也有label：（任何表单元素都有label）