现在互联网发展迅速，前端也成了很重要的岗位之一，许多人都往前端靠拢，可又无能为力，不知所措，首先我们说为什么在编程里，大家都倾向于往前端靠呢？原因很简单，那就是，在程序员的世界里，前端开发是最最简单的编程，甚至都不能叫做编程，因为它真的很简单很简单，下面呢，我们就开始一点一点的教大家如何开始前端知识的学习（小学生都能学会的语言）！

在这里相信有许多想要学习前端的同学，关注小编文章最后面文字，可免费领取一整套系统的web前端学习教程！

首先我们学习前端，要知道前端的三个大内容，HTML、CSS、JS，其中HTML和CSS是相互结合着学习，掌握了这两个了以后我们就算真正入门了，然后再深入学习JS等等。

HTML，CSS，JS

一、首先我们要理解HTML，CSS，JS分别是什么？

HTML就相当于一个人，CSS相当于一个人穿着的衣服，JS相当于让这个人做什么动作，这样一形容呢，我们就很好理解了，这个人就是网站，需要有header头，body身体，footer脚……而网站所呈现给我们各种各样的样子就是我们写的CSS样式，网站里的动态效果就都是我们的JS去实现的。

二、零基础就能学会前端。

说到这里，可能大家看这么多的文字有点看不下去了，那我们废话不多说，只要你决定了要学习前端，那就跟我们的课程一点一点学习去设计制作属于你自己的网页吧！

我们用到的软件呢，对于入门级来说我们一般推荐大家用Dreamweaver，简称DW，新建一个HTML后，出现的界面是这样的，

看到这么多代码不要慌，对我们敲代码没啥影响，下面我们开始敲代码，我们可以看到这里有这样的代码<body></body>，这个就是我们网页的身体，我们接下来要敲的内容都是在这中间输入的，这个括号表示的标签，标签都是一前一后的，成对儿出现的，除了一些特殊的标签，随后我们再一一给大家讲解。现在我们输入点内容，看看效果。

我们输入一个标签<div></div>，点击右上角的地球浏览一下，会发现弹出了一个空网页，什么也没有，那是因为我们现在只书写了HTML，还没有写CSS，简单来说就是，我们创建了一个东西在页面里，但是还没有设置这个东西长什么样子，现在我们在设置它的样子，

1、我们为了给这个div设置样式，所有先给它起个名字不然，电脑不知道我们要给谁加样式，class="aaa" 的意思是起名为aaa

2、在<head></head>里写入这样一组标签<style></style>这个style的意思就是CSS，我们整个网站要加的所有样式都是写在这个中间的。

3、我们在style里写样式，电脑首先要知道我们给谁加样式，所有我们写个.aaa 这个.（点）的意思是我要给aaa加样式，电脑会自动把.（点）后面的名字，跟下面body里的名字做一个匹配，这样电脑就知道，哦~原来你是要给这个div加样式呀，

4、然后我们把要给这个div加的样式写在大括号里，width:100px; 意思是这个div的宽是100像素，height:100px; 意思是高是100像素， 意思是背景颜色是#FF0000这个颜色，

注意：（1）这里我要给大家解释一下，大家别看这么多代码，这么多单词，其实软件有提示，像下面这样，直接输入第一个字母后面的单词就出现了，直接选中就行了，连单词都不用背，前端真的很简单，

输入w和输入h，会自动弹出单词框

（2）每一个单词都有提示，说到这里，不会英语的同学就不要给自己找借口说英语不好，学不会编程了，当然，这么简单是不是说大家都容易学会，那大家都会了，我们还有什么优势呢，其实不然，虽然说很简单，但是要想真真的把前端学好是需要下功夫的，主要就是要坚持，虽然很简单，但是能坚持下来的人很少，这也就是为什么我们给学生一直提倡要坚持，做任何事既然决定了，就要坚持，

下面我们继续，设置好了以后，我们就可以点右上角的“小地球”来浏览了，

如果你做出来了，跟我的效果一样，那么你就成功了，那我就可以恭喜你，你已经入门了，真的很简单！

到这里大家可能还会有疑虑：

1、可能会有同学觉的，前端好难，写了那么一大堆，才出了个这个。2、另外就是觉的这一下子蹦出来了这么多代码，这么多单词，记不住。3、对未来恐惧，感觉还不知道要有多少单词，多少代码要涉及。

在这里呢，我要给大家解释一下，前端呢，其实我们真正常用的单词也就20个左右，今天我们就已经用3个了，width、height、background，当然这3个也是最最常用的，是每次都要书写的。

另外就是像格式之类的，同学可能也会有疑问，这次的是div要起名字，style写在head里，div写在body，那还会有多少这样的写法，

这一点呢，我可以告诉大家，大家不用担心，因为这是每次我们写前端都要首先写的东西，可以说是固定格式，就类似于做数学应用题，我们首先要写个“解”字，一个道理。

最后呢，我想跟同学们说，不管我们以后选择做什么，一定都要坚持去做，世上没有难的事，只有放弃的事。

我是一名前端开发程序员，现在在网上授课教前端，每晚都会在群内免费直播，自己整理了一份2018最全面前端学习资料，从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理，送给每一位前端小伙伴，这里是小白聚集地，欢迎初学和进阶中的小伙伴。"

web前端资料学习群：685362217

为了感谢大家的支持，今天我在这里统一说下吧，关注公众号：‘web前端学习圈'，就可以领取上全套视频学习资料！[关注可加前端微信群]

还有疑惑的同学可以给我们留言评论，关注我，我们会定时发布教学视频和文章，从基础开始，解决前端问题，让每位学生学会前端知识。

web前端零基础入门学习！前端真不难！的更多相关文章

  1. 函数:我的地盘听我的 - 零基础入门学习Python019

    函数:我的地盘听我的 让编程改变世界 Change the world by program 函数与过程 在小甲鱼另一个实践性超强的编程视频教学<零基础入门学习Delphi>中,我们谈到了 ...

  2. 【Python教程】《零基础入门学习Python》（小甲鱼）

    [Python教程]<零基础入门学习Python>(小甲鱼) 讲解通俗易懂,诙谐. 哈哈哈. https://www.bilibili.com/video/av27789609

  3. 《零基础入门学习Python》【第一版】视频课后答案第001讲

    测试题答案: 0. Python 是什么类型的语言? Python是脚本语言 脚本语言(Scripting language)是电脑编程语言,因此也能让开发者藉以编写出让电脑听命行事的程序.以简单的方 ...

  4. 零基础入门学习Python（1）--我和Python的第一次亲密接触

    前言 最近在学习Python编程语言,于是乎就在网上找资源.其中小甲鱼<零基础入门学习Python>试听了几节课,感觉还挺不错,里面的视频都是免费下载,小甲鱼讲话也挺幽默风趣的,所以呢,就 ...

  5. 学习参考《零基础入门学习Python》电子书PDF+笔记+课后题及答案

    国内编写的关于python入门的书,初学者可以看看. 参考: <零基础入门学习Python>电子书PDF+笔记+课后题及答案 Python3入门必备; 小甲鱼手把手教授Python; 包含 ...

  6. 学习《零基础入门学习Python》电子书PDF+笔记+课后题及答案

    初学python入门建议学习<零基础入门学习Python>.适合新手入门,很简单很易懂.前一半将语法,后一半讲了实际的应用. Python3入门必备,小甲鱼手把手教授Python,包含电子 ...

  7. 大牛整理最全Python零基础入门学习资料

    大牛整理最全Python零基础入门学习资料 发布时间:『 2017-11-12 11:56 』     帖子类别:『人工智能』  阅读次数:3504 (本文『大牛整理最全Python零基础入门学习资料 ...

  8. 小甲鱼零基础入门学习python--课后作业

    [小甲鱼零基础入门学习python--课后作业] 小甲鱼零基础入门学习python--课后作业 本章内容: 1.基础部分的作业 2.函数部分的作业 3.字典.集合.文件部分作业 4.异常 5.Easy ...

  9. Python3零基础入门学习视频+源码+课件+习题-小甲鱼

    目录 1. 介绍 2. 目录 3. 下载地址 1. 介绍 适用人群 完全零基础入门,不需要任何前置知识. 课程概述 本系列教程面向零基础的同学,是一个深入浅出,通俗易懂的Python3视频教程. 前半 ...

随机推荐

  1. ZOJ 2532 Internship 求隔边

    Internship Time Limit: 5 Seconds      Memory Limit: 32768 KB CIA headquarter collects data from acro ...

  2. ASP.NET基础学习（暴力破解密码）

    首先写出一段登陆程序: //ashx端 <%@ WebHandler Language="C#" Class="AddCalation" %> us ...

  3. JQuery学习三(隐式迭代和节点遍历)

    在JQuery中根据id获取控件,如果输入id错误是不报错的. 必要时可以通过写判断语句进行判断是否id写错 <!DOCTYPE html> <html xmlns="ht ...

  4. centOS升级部分功能后，不能进入桌面（桌面）

    在Linux中安装nginx,安装过程中需要安装c++等一部分环境,装完后,莫名奇妙的centos就不能进入桌面了,命令窗口可以进去. 网上查了查资料,说是升级了一部分功能,和内核有冲突.需要更新下系 ...

  5. Spring structs2 hibernate 整合（ssh）

    ssh项目jar包 项目内容: 1. 加入 Spring 1). 加入 jar 包2). 配置 web.xml 文件3). 加入 Spring 的配置文件.(application.xml) 2. 加 ...

  6. tortoise svn冲突解决

    Tortoiese svn 冲突解决 当文件被别人修改并提交到SVN服务器后,如果自己本地的文件没有被更新为最新的版本,而且已经做了修改,这时候提交将会被成功,系统会提示你的版本已经过期,并要求你先进 ...

  7. PowerDesigner16 活动图

    活动是某件事情正在进行的状态.活动在状态机中表现为一个由一系列动作组成 的非原子的执行过程. 活动图是一种描述系统行为的图,它用于展现 参与行为的实体所进行的各种活动的顺序关系.活动图(Activit ...

  8. jquery字符串序列化方法总结

    在jquery中字符串序列化方法包括有param() .serialize() .serializeArray(),在这里对其常用做法进行总结. $.param()方法这是serialize()方法的 ...

  9. go通过名称来调用对应的方法

    仅仅是为了学习go语言中的反射. package main import ( "errors" "fmt" "reflect" ) func ...

  10. 【BZOJ】2054: 疯狂的馒头

    [题意]给定n个元素,m次给一段区间染色为i,求最终颜色. [算法]并查集 [题解]因为一个点只受最后一次染色影响,所以倒过来每次将染色区间用并查集合并,父亲指向最右边的点. 细节: 1.fa[n+1 ...