前端技术简介

最新推荐文章于 2024-05-06 19:33:29 发布

铁靖之

最新推荐文章于 2024-05-06 19:33:29 发布

阅读量1k

点赞数 13

分类专栏：程序员文章标签：前端

本文链接：https://blog.csdn.net/2301_77033813/article/details/138053598

版权

程序员专栏收录该内容

296 篇文章 0 订阅

订阅专栏

我晕，这不是等于没说吗？好吧，我给大家打个比喻。我们把前端开发的过程比喻成“建房子”，做一个网页就像盖一栋房子，先把房子结构建好（HTML）。建好房子之后给房子装修（CSS），例如往窗户安上窗帘、往地板铺上漂亮的瓷砖。最后呢，装修完了之后，当夜幕降临的时候，我们要开灯（JavaScript），这样才能看得见里面。现在大概懂了吧。

我们回到实际例子中去，看一下绿叶学习网的导航条。我们先分析一下“前端技术”这一栏目的具有以下基本特点：

① 导航条文字颜色是白色；

② 大小是14px

③ 背景颜色是绿色；

④ 鼠标移动到上面颜色会变成深绿色；

这些效果是怎么做出来的呢？其实思路就跟上面“建房子一样”。我们先用HTML搭建网页结构，这时候默认情况下，字体、字体颜色、字体大小和背景颜色如下图：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

仅仅使用HTML的文字

然后我们通过CSS修饰一下，改变其字体、字体大小、字体颜色和背景颜色，得到如下的效果图：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在HTML基础上加入CSS的文字

最后，我们通过JavaScript定义鼠标一个行为，就是鼠标移动到上面的时候，背景颜色会变为深绿色，效果如下：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

加入JavaScript特效

现在大家都知道一个缤纷多彩的网页究竟是怎样做出来，也知道为什么“前端技术最核心的是HTML、CSS和JavaScript”了吧？

2、前端开发其他技术

前端技术最核心的是HTML、CSS和JavaScript，但是对于一个真正的前端工程师来说，哪怕你精通这三个，你也不能称为一个真正的“前端工程师”。因为前端技术除了HTML、CSS和JavaScript这三种，还需要学习Ajax、SEO等。

（1）Ajax

Ajax，即“Asynchronous Javascript And XML（异步JavaScript和XML）”，是指一种创建交互式网页应用的网页开发技术。

通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个页面。

Ajax是前后端交互的技术，主要实现在前端。（不懂？！没关系，我们在Ajax教程中会讲解到）

（2）SEO

SEO，即“Search Engine Optimization（搜索引擎优化）”。SEO优化是专门利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式（国内常见的搜索引擎有百度、360、搜狗等）。

简单来说，你建好了网站并不代表你网站就能被搜索引擎搜索到，我们一般使用百度搜索资料时，搜索出来的网页有很多，但是我们一般看了搜索结果的第一、二页就不再往下看了。SEO，就是为了我们的网站能排在搜索结果的前面，这样你的网站才会有流量。你做网站，相信你也是想让你网站有更多人浏览的吧。

三、后端技术

如果我们只学习完前端技术，其实也差不多可以开发属于自己的网站了。不过这个时候开发出来的网站是一个静态的网站，唯一的功能是供用户浏览，缺乏与用户的交互性，用户能做的东西不多。因此，如果我们要开发一个用户体验更好、功能更加强大的网站，就要学习一下后端技术。

那后端技术究竟是怎样的一门技术呢？举个简单的例子，很多大型网站都有注册功能，只有用户注册了之后才具有某种权限，例如你要使用QQ空间，你就要注册一个QQ才能使用。这样的功能就是后端技术所实现的。再有，淘宝网不是有很多商家吗？这些商家有各种各样的商品，这些庞大的数据只能使用后端技术中的数据库技术才能实现。

1、PHP

PHP是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点，易于学习，使用广泛，主要适用于Web开发领域。

2、JSP

JSP技术有点类似ASP技术，它是在传统的网页HTML文件中插入Java程序段（Scriptlet）和JSP标记（tag），从而形成JSP文件。用JSP开发的web应用是跨平台的，既可以Windows系统下运行，也能在其他操作系统（如Linux）上运行。

3、ASP.NET

ASP.NET的前身就是我们常说的ASP技术。绿叶学习网就是使用ASP.NET开发的。ASP.NET是本系列课程推荐使用的一门技术。当然大家可以自己选择。

以上三种都是动态网页技术，大家可以到这里详细了解一下：百度百科动态网页技术

很多人都以为“网站就是很多网页的集合”，其实这个理解是太恰当的。准确来说，应该是“网站是前端与后端的结合”。

四、从前端开发到后端开发的学习路线

1、常见的Web技术

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

常用Web技术

2、学习路线

从上面我们可以看出，Web技术实在太多了，很多同学都不知道怎么入手，上网问别人，回答又五花八门。这是本网站推荐的：

HTML入门→CSS入门→HTML进阶→CSS进阶→JavaScript入门→jQuery入门→ASP.NET入门（或PHP入门）→Ajax→ASP.NET进阶（或PHP进阶）

这一条路线是比较理想的一条从前端开发到后端开发的学习路线，其实你别看这条路线那么长，其实我是截断了来定制的，要掌握的也就几门技术：HTML、CSS、JavaScript、ASP.NET（PHP）、Ajax等。

我们在HTML刚刚入门的时候，你不需要一定要把HTML学到精通才去学CSS入门教程（这也不可能），这是一种最笨又最浪费时间的学习模式。所以对于初学者，千万千万别想着精通了一门技术，再去精通另外一门技术。你要是能做到了，我相信肯定很多大神都拜你为师了。因为技术这种东西是要“通十行”才会把一行给通了。

如果你走别的路线，你可能将会走很多很多的弯路。这条路线是本人从前端技术初学者开始，到开发了绿叶学习网、广州智能工程研究会网站、毕业选题系统、大量在线工具等项目以及阅读大量技术书籍之后的的心血总结。当然，这条路线也是一个建议，并非强硬。

接下来，就是我们踏入前端开发的第一步——HTML入门教程。

疑问

1、什么叫XHTML+CSS+JavaScript？

我们看到市面上很多书名都叫“DIV+CSS”或“HTML+CSS”，其实这两个叫法都是不严谨的，准确来说是“XHTML+CSS”。但是叫的人多了，大家也知道是那个意思，所以约定俗成就干脆称为“DIV+CSS”或“HTML+CSS”。所以以后，我们看到“DIV+CSS”或“HTML+CSS”，心里也应该知道指的是“XHTML+CSS”。然而什么叫XHTML，我们在后面的章节会说到，读者不用手忙脚乱地。

2、常见的JavaScript框架应该学习哪个？

我们知道，HTML、CSS和JavaScript是前端技术中最基本的3个元素。对于HTML和CSS，他们没有别的框架，但是对于“JavaScript”来说，它却有很多框架，例如：

“jQuery、ExtJS、Dojo、YUI……”

那对于初学者来说，应该选择哪个JavaScript框架比较好呢。当然非jQuery莫属了。jQuery是全球最流行的JavaScript框架，是最简单易懂、最适合初学者入门的JavaScript框架，没有之一。
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。