本文目录一览：
web前端需要掌握的哪些知识
一个合格的web前端需要掌握哪些技术？
最基础的自然是JavaScript，HTML和css这三种语言。
首先了解下它们到底是什么。
HTML是用户看到的网页的骨架，比如你会发现当前页面分为左中右三个部分，其中还填充了不同的文字和图片；每个子部分还会继续细分，比如当前页面的中间部分下方有输入框等等。
CSS是网页展示的细节控制，比如你会发现有的文字是红底白色，有的子部分占了页面的二分之一宽，有的只占六分之一，有些部分需要用户进行某些操作（如点击，滑动）才会出现等等，这些就是有CSS来控制。
JavaScript是负责捕捉用户在浏览器上的操作，并与后端服务器进行数据交换的脚本语言。当用户在前端进行点击，输入等操作的时候，会触动绑定了该动作的JavaScript脚本，然后JavaScript收集数据，调用后端的api接口，再将后端返回的数据交给HTML和CSS渲染出来。
一个网页的HTML代码和CSS代码是可以直接在浏览器中查看的，你可以直接按F12，就能看到下图右侧的模块，左右侧红框就是代码与实际页面的对应关系。因此如果你看到某个网站的布局很不错，不妨点击F12，进行学习。
前端框架
然而，实际应用中，已经很少有正规的项目组直接用上述三种语言进行web 前端开发了，而是使用很多封装了这三种语言的框架，比如
Vue.js
，angular，react native等等。它们是来自谷歌和Facebook的大神项目组，基于自己的经验，封装了原生前端语言，实现了更多更复杂更酷炫的功能。因此，可以说，学会使用这些框架，能达到事半功倍的效果。
比如用了vue，它是自底向上增量开发的设计，其核心只关心图层，而且还可以与其他库或已存项目融合，学习门槛极其友好；另一方面，vue可以驱动单文件组件和vue生态系统支持的库开发的复杂单页应用。有了这个生态系统，可以说，vue是处在一个不断壮大，不断完善的欣欣向荣的状态。
网络通信协议
由于前后端分离的趋势，前端还需要了解很多网络通信协议的知识，这里不局限于http协议，因为据我的经验，有时候我们还会用到websocket等协议。因此，前端需要简单了解不同协议的特点以及使用方式，但是好消息是不用像学习计算机网络课程一样对每种协议的原理都了解的特别透彻，只要学会如何用前端语言发送这种协议的请求就够了。
前端开发工具有哪些
前端开发工具是开发必不可少的，现在的开发工具功能很强大，但是还是有一些不同，下面详细介绍一下，看看哪款适合你
HBuilder
HBuilder工具是支持一些html和js等开发，主要编写一些c和web等语言，最大的优势就是速度比较快，强大的代码提示和代码输入，大大增加了开发者的开发效率。
Sublime Text
编辑器里边支持emmet比较好的的唯一一款。多功能插件，还可以自定义键绑定，功能有很多，包括多选择和多窗口和python api等功能，为开发者提供了开发方便。
webstorm
js开发工具，web前端开发神器，功能十分强大，界面清晰，人性化设计，使用方便。
所有编辑器里边唯一内置emmet的一款，并且将emmet的精神往前推动的一款。
phpstorm
测试后端 API 接口时非常好用。GET、POST、DELETE、OPTIONS、PUT 这些方法都支持。
idea
phpstorm、idea包括所有webstorm的功能。只是phpstorm是针对phper的，idea是针对javaer，webstorm针对前端er。
Prettier Playground
代码格式化工具，支持格式化 JavaScript 代码，包括 [ES2017]、[JSX]、[Angular]、[Vue]、[Flow]、[TypeScript] 等。
IDE 大多支持 Prettier 工具， 也有在线版本，可以在浏览器里格式化代码。
Dreamweaver
Dreamweaver是一款网页代码编辑器，利用一些前端代码对网页进行快速的开发，可以通过智能搜索引擎对网页进行访问，开发者可以直观的开发减少出现的错误。
为什么要同源策略
一个重要原因就是保护cookie，cookie中存着用户的登陆凭证，就相当于用户的账号密码。
想象以下场景，你正吃着火锅唱着歌，突然收到一封邮件说你的银行账号存在安全隐患，点击修复。虽然银行的官方网站是，但是想到你的全部家当24块3毛都在卡里，慌乱的你没有注意这么多点击链接输入帐号密码进行登陆。这个网站其实是
iframe src=""
在你输入帐号密码的时候，如果没有同源策略，外部已经有脚本获取你的输入或者直接通过document.cookie窃取了你的信息并且发送给攻击者了。
那有了同源策略，是不是我们的网站就万无一失了呢。并不是，还有很多其他手段威胁到网站安全，比如xss，csrf，clickJacking，本篇文章就简单阐述一下他们的攻击手段和基础攻防(后续添加)。
xss
Cross Site Script，译为是跨站脚本攻击；其原本缩写是 CSS，但为了和层叠样式表(Cascading Style Sheet)有所区分，因而被迫改名为 XSS。主要分为反射型和储存型。
反射型
反射型的特点是不持久，它的特点是xss的代码出现在访问的链接里，作为一部分输入提交到服务器，然后服务器响应后返回浏览器，然后浏览器执行xss的代码。
一般攻击者通过邮件或者其他途径发送链接，用户点击之后达到攻击目的。
储存型
存储型和反射型的差别仅在于他的攻击代码会存储到服务器。这种攻击的最典型例子就是博客论坛的留言功能，访问包含这条留言的页面时，就会触发攻击代码。
比如某个论坛的个人中心里的个人简介，我们就可以在里面尝试注入代码进行练习，先来测试可用的标签
scriptapimgbodybuttonvardiviframemetaobjectmarqueeisindex inputselectkeygenframesetembedsvgmathvideoaudiotextarea
发现只有a标签存活下来，再来测试属性
a href onmouseover onclick
xss存在的主要原因在于没有对于用户的提交内容和接口的返回内容没有进行严格的过滤。
而防止xss的主要手段也是对输入和url参数进行过滤，对输出进行编码，还有就是cookie设置http-only。像常用的vue就有
const decodingMap = {
'': '',
'': '',
'"': '"',
'': '',
'
': '\n',
' ': '\t',
''': "'"
}
来对输入进行进行过滤，还有百度中输入scriptalert(1)/script也会被转译成scriptalert(1)%2Fscript。
至于http-only，严格来说没有阻止攻击，只是阻止了攻击后的cookie劫持。
Python主要要学那些课程啊？
链接:
提取码: s74j
贺圣军Python轻松入门到项目实战（经典完整版）（超清视频）百度网盘
急急急 tp5.1输出原html标签？
使用vue中的v-html指令，否则会因防止xss攻击不渲染html标签
解决方法如下：
1、双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：
pUsing mustaches: {{ rawHtml }}/ppUsing v-html directive: span v-html="rawHtml"/span/p
2、建议去查看vue的相关的文档，这些东西需要前端做，和tp没有关系的
