一起来学大数据|确认过眼神,初识JavaWeb,美的不得了
在我们学习大数据的时候,难免要去实现数据的可视化,这时候就需要我们有一定的前端基础了。前端的东西记忆比较多,玩的好的,一张页面的确是美的不得了。
有精力的话,完全可以深入学习,成为一名优秀全栈工程师。
网站访问流程
首先,我们来看看我们是怎样得到我们看到的页面。举个小例子,我们看到的头条网站是我们通过互联网连接到服务器之后,接收到的我们要访问网页的格式,内容等之后呈现出来的。
如果我们在浏览器的地址中输入像下面这样格式的地址,就会有这样的流程:
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女陶。