在我们学习大数据的时候，难免要去实现数据的可视化，这时候就需要我们有一定的前端基础了。前端的东西记忆比较多，玩的好的，一张页面的确是美的不得了。
有精力的话，完全可以深入学习，成为一名优秀全栈工程师。
网站访问流程
首先，我们来看看我们是怎样得到我们看到的页面。举个小例子，我们看到的头条网站是我们通过互联网连接到服务器之后，接收到的我们要访问网页的格式，内容等之后呈现出来的。
如果我们在浏览器的地址中输入像下面这样格式的地址，就会有这样的流程：
https://www.头条.com/question/22689579
HTML 与 CSS
我们在访问网页时，电脑会得到一页 html的页面 ，在此之后，我们会对这个网页进行解析。
HTML 本质上是一种超文本标记语言。给大家举一些实例看看：
[img] 图片 [/img] 用来显示图片[url] 超链接 [/url] 用来打开地址<table> </table>用来创建一个表格
我们浏览器中按F12，我们可以查看服务器返回给我们的html文件，其实就是一些代码，我们看到大概是这样的：
我们用浏览器得到这些代码后，浏览器会将分析渲染好页面显示出来。如果我们不使用css，效果就像下图，按照浏览器默认的样式显示出表格，超链接等。
大家是不是觉得默认样式有点555555~~
这时候我们就需要自定义一些样式，现在通用的样式就是拿CSS制作的，我们用CSS写自定义的样式代码，我们会在HTML 文件里用一个<link>标签把我们规定样式的CSS与表达内容语义的HTML代码链接起来。
于是我们就能看到我们所说的正常页面啦，是不是很神奇呢~~
CSS 代码的基本格式
属性:值
比如头条的分布框架排版，它的 CSS 样式截图是这个样子的。
我们把第一个属性对应的代码解释一下，背景图像的位置偏移量(background - position)在我们页面内左上角水平1px垂直2px处的那个位置，浏览器就会很听话的实现我们设定代码的效果。
所以当大家在页面上下滚动时，顶上那个导航条都会牢牢地黏在窗口顶部固定的位置，不发生偏移。大家可以试一试~
再讲讲其他几个属性解释一下：
- left 为240px 说明这个模块需紧贴着窗口的左240px处
- width 和 height 指定模块的宽和高
- border 指明这个模块的边界范围
直白一点的说，浏览器就会根据我们给的CSS代码，自动描绘出对应的样式。
在这里其实很多的样式需要学习，建议大家可以去菜鸟教程这个网站上查看学习。做出美丽的页面，还需要很长的路要走。
HTML 5 与 XHTML
在网页里面，我们也会发现有些HTML代码也不一定是标准的，就好比我们说话一样，有时候我们的发音并不是很标准，别人就会去猜测你在说什么。
大家想想，有时候我们不小心写错了一个 HTML代码，浏览器也会试图猜测我们原来想表达到底什么，之后再根据判断做出相应的处理，而这里的猜测是需要有一个常识作为我们的依据，再加上有些浏览器的功能不一，有的可以支持大多标签，有的又不支持，当然还有一些混乱的东东。
这里我们为了防止代码的混乱，我们建立了一个合适的标准，HTML5 就是其中一个比较新的标准。它其中新加了许多的可用的标签和属性，然后各大浏览器根据这个标准，实现了很多新标签和属性。
本来前端程序员要写一堆代码去实现的效果，现在浏览器都给实现了，只需程序猿写两三行，调用一下浏览器就给搞定了，十分简单。
至于 XHTML，其实就是 HTML 的表亲，是XML 和 HTML 自己的杂交的产物，它对语法的要求特别的严格，其中为了兼容 XML，在语法上与 HTML 又有一些的不同。
JavaScript 与浏览器脚本
有了表示内容和语义的 HTML，规定样式的 CSS，我们可以得到一张静态的页面，就是没什么动画，尽管使用CSS可以有一些动画，但是需要刷新数据才可以，比较的呆呆，这样的网页怎么能展现我们大智人种族的创造性！于是我们创造了这样的方式： Javascript（JS） 用来给页面添加动态的效果，就像是头条的上面信息的标签，鼠标移上去就会弹出下面的小窗口，这就是 JS 实现的效果图啦。
我们的浏览器会帮大家实现Javascript可以用的工具，比如函数，对象等，我们只要写一些 JS 的代码，保存在 .js文件里面，之后我们可以在html 文件中用 <script> 关联进来就可以用了，像上图这个效果应该就包括了
- 鼠标悬停到标签上的时后就会创建一个新的 <div> 窗口
- JS就会向头条服务器发送一个请求，得到这个小窗口应该显示的数据，放在这个小窗口里（这也是所谓的AJAX，不用刷新就能与服务器进行交互，更新页面的一小部分）
当我们的浏览器拿到这样的代码，就会解析并实现出相应的效果。其实用来写浏览器脚本的，也不是非得JavaScript 不可，不过是各大浏览器都默认：请用 JS 来解析我写的动态效果的代码！
以上就是一些前端部分的内容，个人原创，大家多多指正~
前端是一个精细的活，今天我们只讲了一些前端的名称解释，带大家理清了前端的术语，更多的小知识点还需要大家去学习。
有帮助大家的话，关注支持一下哟~明天还有更精彩的内容与你分享，不要错过~
感谢坚持关注的朋友~
世界很大，幸好有你~
欢迎在评论区留下你的问题或困惑，我将每天与你分享我的观点和心得。
聚焦最新科技咨讯，探寻未来智能领域，我是Mario女陶。