你不知道的web前端（上）

web前端系列课开讲啦，接下来将用三篇文章来讲解

1、上篇--讲解web前端基础语言知识
2、中篇--讲解app和h5相关
3、下篇--讲解前端和后台的架构

一个web网页一般是由html、css、javascript、ajax四门技术实现出来的。html构成了网页的结构，css描述网页的样式，javascript完成事件逻辑比如点击、悬浮事件，ajax完成了前端和后台的通信。

下面听我娓娓道来吧～

一、简单的html ●●

html是一门标记语言，它是由一堆嵌套的尖括号标签组成的。 我们来举例子看看：

首页这个导航，它的html标签是：

<a href="/">首页</a>

它表达的意思是：这是链接。

再看下提问这个按钮，它的html标签是：

<button>提问</button>

它表达的意思是：这是按钮。

html原生提供了很多标签用来表示各种控件，有按钮、链接、表格、段落、块、表单、下拉框、视频播放器等等。大部分标签还可以相互嵌套。比如一个表单标签里面嵌套着输入框和按钮：

<form>
<input type="text"></input>
  <button>提交</button>
</form>

如果想系统学习的话，可以到w3c网站学习，上面还有线上编辑器，直接编辑就能看到效果啦，是不是超简单！

二、好玩的css ●●

css是指层叠样式表，用来定义如何显示html。

如果没有css样式，html原始的控件是相当丑陋的，我们来看下没有任何样式修饰的按钮长这样：

使用了样式修饰的按钮长这样：

这里面加入了背景色、圆角、字体颜色、边框样式。

css提供的样式也是相当丰富的，可以描述html标签的布局定位、背景颜色、字体颜色、字体大小、边框、渐变、动画等等，它可以做出很多酷炫、好玩的效果。

三、牛逼的js ●●

javascript是一门脚本语言，它对网页行为进行编程。javascript可以通过接口操作html元素（DOM），改变网页的内容。

重头戏来了，js可以说是web网页的灵魂～。没有js，一个网页就基本没有了交互。我们常用的点击、双击、右键、悬浮事件，复杂的动画，改变网页内容，还有前端发起请求，这一系列动作是由js完成的。但是js只是调用了一个叫ajax的接口来和后台通信，真正通信的其实是ajax，下面会讲到。

js以前只是用来写web前端，但是随着时代的发展，js现在不仅仅能写web前端，还能写客户端（react native，flutter），还有后台（nodejs）。简称为 “大前端”。目前出现的很多全栈工程师，其实大多数是前端，既写前端又写后台，相当吃香。

四、颠覆的ajax ●● ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

在古老年代，没有ajax的情况下，要想拉取一个接口数据，必须要刷新整个网页，但是ajax只需要通过一个对象来发起http请求，不用刷新整个网页，就可以获取到后台返回的数据。ajax的出现可谓大大提高了前后端的通信效率和网页性能。

同源策略：浏览器为了保证用户信息的安全，防止恶意的网站窃取数据，规定不能向不同域名的站点发网络请求，比如a.com域名不能向b.com域名的站点发起请求，会被浏览器拒绝。

五、UI组件库 ●● 想必大家都听说过这几个专业名词：vue、react、element、antdesign等。vue和react都是javascript框架，而element是基于vue构建出来的一套UI组件库，antdesign是基于react构建出的UI组件库。UI组件库封装了很多html原生的控件，并赋予简洁通用的样式，使用UI组件库可以快速的开发一个网站，降低了很多开发成本。目前的互联网公司大多数使用的这两套组件库，如果你们公司使用了这2套组件库，建议产品经理提需求时，可以直接到UI组件库官网查看已有的组件，降低沟通成本，提高写需求效率。