前端基础知识梳理
前言
来啦老铁！
前一段时间，公司有同事提出想了解一下前端知识，科普级别的那种，咱答应分享一下，今天简单学点前端最最最基础的知识吧！
本人的知识体系大部分还是基础知识+结果导向，即我会在平时学点基础知识，然后遇到问题去深入学习、研究、实践，因此没有特别的系统，没有很深入，纯属野路子，还请您多多指正！
主要知识点
- HTML；
- CSS；
- JavaScript；
- Jquery；
- Ajax；
- PHP；
- Web前端框架；
1. HTML;
菜鸟教程：超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
1). 简单理解；
-
简单的说就是，咱们写了一份.html/.htm文件，浏览器帮我们渲染出对应的网页元素；
-
浏览器就像一个翻译官，把.html/.htm文件中的内容，翻译成用户能在网页上直观看到的东西；
-
既然渲染过程就像翻译过程，那么我们就必须按一定的规范书写.html/.htm文件中的内容，否则就无法翻译，比如：
想展示按钮，就应使用：
<button>test button</button>
或
<input type="button" value="test button" />
等。
想展示连接，就应使用：
<a href="https://www.baidu.com" target="_blank">百度一下</a>
等。
其中<button></button>、<input></input>、<a></a>这种叫HTML标签，前一个叫开始标签，后一个叫结束标签，有一些元素的结束标签可省略或本身就没有结束标签，如：<input type="button" value="test button" />、<br />（换行）。
2). HTML 5；
菜鸟教程：HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。
HTML5 是下一代 HTML 标准。
HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
最小的HTML 5文档：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>
HTML 5相比HTML 4有一些新特性和改进、增加了一些新元素、移除一些元、使用CSS 3等。使用HTML 5可以简单的在网页中播放视频、音频、使用绘制图形等。像我们公司的Web播放器就有使用HTML 5的绘制图形特性；
更多知识点可参考：HTML 5教程
2. CSS；
什么是 CSS?
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个
这里指的是CSS 2。
HTML标签解决了浏览器要展示什么元素，标签的style属性等解决了浏览器要展示的元素的样式，而CSS解决了HTML内容与样式的分离，便于重用样式；
更多知识点可参考：CSS教程
CSS 3
最新版CSS，已完全向后兼容，仍在开发。
更多知识点可参考：CSS 3教程
3. JavaScript;
JavaScript 是脚本语言。
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
通俗的说，HTML解决了浏览器要展示的内容，style/css解决了元素的样式，而这些都是静态的，无法完成网页与用户的交互、无法完成网页与服务器间的交互等动态过程，JavaScript就是来解决这一问题的！
例如：
x=document.getElementById("demo"); //查找元素
x.innerHTML="Hello JavaScript"; //改变内容
//当这个内容来自向服务器请求的结果，就演示了网页与服务器间的交互；
//当这个内容来自用户输入，就演示了网页与用户的交互；
4. jQuery;
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
简单的说，jQuery对JavaScript做了一些好用的封装，使JavaScript开发不用造很多轮子；
更多知识点可参考：jQuery 教程
5. Ajax;
最原始的网页，网页内容的更新，是需要重新加载整个网页的，而AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
Ajax的亮点是：局部更新！
AJAX 工作原理 - 来自菜鸟教程
6. PHP;
PHP 是服务器端脚本语言。
PHP 文件可包含文本、HTML、JavaScript代码和 PHP 代码。
PHP 代码在服务器上执行，结果以纯 HTML 形式返回给浏览器。
PHP 文件的默认文件扩展名是 ".php"
PHP 文件通常包含 HTML 标签和一些 PHP 脚本代码。
简单的说，PHP是一种服务器端的脚本语言，俗称后端，PHP也可以进行数据库交互、操作文件系统等。
PHP被誉为是世界上最好用的编程语言？？？
7. Web前端框架;
- Vue.js：https://www.runoob.com/vue2/vue-tutorial.html
- React.js：https://www.runoob.com/react/react-tutorial.html
- Angular.js：https://www.runoob.com/angularjs/angularjs-tutorial.html
- Bootstrap：https://www.runoob.com/bootstrap/bootstrap-tutorial.html
- Vue组件库Element：https://element.eleme.cn/#/zh-CN/component/installation
- Vue.js+Element个人实践：https://www.jianshu.com/p/23476305dc69
Web前端框架带来哪些好处？
- 容易实现的组件化；
- 数据绑定；
- 前后端分离；
- 优化DOM的访问和操作，提升前端性能；
- 前后端交互等方面的封装，少造轮子；
等。
后续再加个从展示简单HTML 元素到展示带了样式的元素，再到与用户交互、前后端交互的示例，甚至在完成前后端交互后，对比前端框架等，整个前端就能够慢慢系统化了！！！
如果本文对您有帮助，麻烦动动手指点点赞？
谢谢！
