定要善用开发者工具。firefox的firebug和Chrome的F12都是很好的选择，用好了这个必会发现他带给你的帮助比看一本书更多。你把firebug摸透了你还担心对DOM理解不够？考虑到未来，html5和css3是必须学习的。看这篇总结的最全学习资料，助你学好前端

1.前言

2.分类

3.理论知识包括“软知识”和“硬知识”

4.聊一聊web前端开发中的“硬知识”

4.1 http标准

这是一个web前端学习qun：730227513，每天都有大佬直播带大家一起交流学习分享技术经验，建议正在初学web前端（网页开发）和进阶级的小伙伴进去学习，如果没没接触过前端(网页开发)但又想学的小伙伴也可以进去学习，大佬会给你初学的学习资料的

4.2 W3C标准

4.3 ECMAScript

5.框架和类库

6.编码开发

7.运行环境

8.其他

最后再来给程序员提几点建议：

在无人指导的情况下，看书是一种学习途径。比如《JS高级程序设计》《权威指南》是前端开发者必看书籍。但对于入门的同学来说看着费劲很难看懂、而且太枯燥很难坚持下去。我的建议是好的书籍是学习的补充，在有一定积累后可以把书作为查漏补缺的工具，平时偶尔翻一翻，对知识点不是很清楚可以针对性翻一翻。书是买来看的，不是找心理安慰的，一本一本买，一本一本看。对不喜欢看书的同学，也不要盲目跟风强迫自己做不喜欢的事失去了对前端的乐趣

转载自百家号作者：歪脖前端资讯

今天我想谈谈Web前端开发需要学习的东西。前端开发需要什么开发工具？

网络前端工程师在不同的公司有不同的功能。这这里给大家推荐一个web前端学习交流企鹅组606 721 798

1。网站设计与网页界面开发

2。做网站界面开发

三.做网站界面开发，前台数据绑定和前台逻辑

4。设计、开发、数据

web前端开发中需要掌握的技术：

1。学习HTML，这是最简单的，最基本的是掌握p、表格表、UL Li、p、跨度、字体这些标签，这些都是最常用的，尤其是p和表，p，表也可以用于布局布局，但不灵活，基本是表处理数据。

2.学习css,这里说的css不包括css3,一般我们看到web前端开发工程师的要求里面,有一个会使用css+html 或者 css+p 来进行界面布局,所以css是用于辅助html来布局和展示的,我们称之为“css样式”,为什么会说css+p呢?因为我上面说了p就是html主要用于布局的东西,所以p就是核心掌握的东西!那么css肯定必须要配合p来使用才好.css要熟练掌握float、position、width、height，以及对于的最大最小、会使用百分百、overflow、margin、padding等等,这些都是跟布局有关系的样式,一点要掌握.

三.五月前学JS。你觉得还过的去，事实上，JS入门很简单，不需要很多东西，只要根据ID或名称DOM或”风格，或价值，然后以一个ID或名称元素标签分配，或额外的数据，在HTML，这是对数据的操作有关系，那么数据逻辑的影响，无非是一个跳跃，弹框，隐藏什么，这一切都是结合其他应用，代码一点都不难，将JS、百度等良好的期待。然后，用更多，什么不是问题。

4、学习jQuery相当于封装一组JS插件的JS。其目的是操作更方便，编写更少的代码，jQuery条目也非常简单。这些都是切入点，要学会像JS，只是改变了JQ代码。剩下的就跟百度一样。

5。将背景语言的最佳点，如java，php，为什么？因为我们是从前台接口数据到后台，如果有一些后台代码，知道如何与后台数据交互是最好的，它节省了时间，也可以使前端代码更加规范。否则可能是因为你和后端的数据不能合并，所以他们不得不重新编写前端代码，那就太可怕了。

6.学习css3+html5,为什么这个放最后呢?哈哈,因为我自己也不太会,毕竟术业有专攻嘛,虽然这个很流行,但是我是搞后端的,在工作中用不到它,只有在自己网站需要改样式,或者朋友网站样式出问题的时候,我才会去临时去研究下.但是如果你们是准备专门搞前端,那么最好还是学一下的。

本系列教程是写给广大HTML小白的，本教程将从0基础到入门，教会大家HTML，让大家能够写出属于自己的WEB页面，博主自己技术并不是很好，但是教会大家入门还是没问题的。当然，你得肯学。

首先给大家介绍一下HTML是什么东西：

HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言，而是一种标记语言（切记，HTML不是编程语言，不要闹笑话了）标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页HTML 文档包含了HTML 标签及文本内容HTML文档也叫做web 页面（即网页）学会HTML能干嘛：

这里说的学会HTML并不只是单单的会HTML，而是包含CSS和JS（当然都是较简单的），学会了HTML后我们可以自己设计一个漂亮的网页，例如个人主页、导航页、表白网页等等，总之是十分有趣的

近日，阿里支付宝前端团队“前端九部”发布了《入门者手册2019》、《九部知识库-精选集》和《从业者手册2019》，其中《入门者手册2019》原来是供内部培训使用，现在对外公开，惠及大众。大家可以登录阿里语雀查看具体项目详情。

入门者手册2019

非常适合作为前端入门教程，教程内容新颖，知识面覆盖广，而且全部出自前端大牛之手，文章质量绝对经得起推敲！

九部知识库-精选集

精选集中是一些较为高级的文章，需要有一定的前端基础。这个项目的 GitHub 仓库有个非常有意思的步骤：介绍人 & 编号机制。

如果你想加入九部，需要以issue的形式写两篇技术分享的博文，然后找到一个自己认识的九部现有成员，成为自己的介绍人，就可以成为九部成员了，目前已经有78位成员了。小码农看的感觉像是传销的感觉（哈哈，纯属个人观点）！

从业者手册2019

从业者手册目前还没有文章输出，相信后续应该会有非常优质的关于前端工作方面的内容。

结语

此次支付宝前端团队产出的极其优质的文章，无论是对于前端小白，还是前端老手，都是有非常大的提升。有兴趣的朋友可以持续关注这个项目，相信一定会对你的前端技术生涯有很大帮助。

教程简介：

HTML (英文全称：HyperText Markup Language)：即超文本标记语言，标准通用标记语言下的一个应用。那么，HTML 和 Web 前端开发有什么关系呢？HTML 是通向 WEB 技术世界大门的钥匙。在本 HTML 教程中，您将学习如何使用 HTML 来创建站点， HTML 非常容易学习，只要多看本教程，相信你会喜欢它的！

什么是“超文本标记语言”呢？“超文本”就是指页面内包括文本及超过文本以外的其它元素，可以包含图片、链接，甚至音乐、程序等非文字元素。在WWW上的一个超媒体文档称之为一个页面，Web页面也就是通常所说的网页，在这里不作区分。

HTML结构：

HTML 的结构一般包括 标签和标签，和这2个标记符分别表示网页的头部和正文。头部中可包含页面的标题、关键词、描述说明等内容，它本身不作为内容来显示，但影响网页显示的效果。 当中是网页实际显示的内容，正文标记符又被称为实体标记。页面当中通常包含有很多指向其他相关页面或其他节点的指针，通过点击，可以很方便地获取新的网页，这是 HTML 获得广泛推广运用最重要的原因之一，而由这些相互之间存在关联的页面组成的有机集合便是网站。究竟 HTML 为什么会被普及？这就要归功于互联网的高速发展，对于编程语言的需求直线上升。而 HTML5 具有超集方式的简易性、运用广泛的可拓展性、灵活应变的平台适应性以及简单的通用性。凭借着这些特性，HTML 越来越受到人们的喜爱。

以下是最简单的html文档结构：

本文为 HTML 基础教程第一章，下一章：HTML 教程导读【小提示】tips:本文由数据微学院作者原创，转载请注明来源或联系作者。更多优秀参考好文请关注【数据微学院】个人图书馆。

相关搜索

• 前端招聘
• html教程
• web开发招聘
• web开发教程
• web开发入门
• 开发招聘

web前端怎么样才能入门，首先我们要从什么是初级web前端工程师说起：

按照我的想法，我把前端工程师分为了入门、初级、中级、高级这四个级别:

入门级别指的是了解什么是前端（前端到底是什么其实很多人还是不清楚的），了解基本的html、css和javascript语法（这些语方面的东西网上随便搜一下就有很多很多，基本的语法是整个技术体系最重要 的东西了，领先的 Web 技术教程 ），可以根据设计师的设计图在不考虑兼容性的情况下把页面做出来，了解过一些框架的使用（例如烂大街但是依然牛逼的jQuery、zepto、 bootstrap等等）。

在经历过入门的阶段，已经了解了前端要做什么，并且把基本的语法学习过了可以独立做一些简单的页面了，那么就要继续学习达到初级前端工程师的水平，对于初级的前端工程师需要了解的就特别多了，需要对整个前端有一个清晰的认识，并且熟练使用各种技术。

初级前端工程师：首先要知道的就是如何处理各种浏览器的兼容处理（比如说在IE浏览器中的createElement有什么不同等等内容），现在基本上每个公司在招聘的时候都会要求熟练html5, css3, javascript，这个熟练的意思就是信手拈来。

在下面会说初级前端工程师应该具体的学习哪些知识，然后就是要了解各种css的预处理器和后处理器， 还有会使用常见前端的MV*框架（angularjs, backbone，reactjs等等）并知道这些框架的原理，另外就是要熟练使用nodejs，要会使用基于node的各种前端构建工具 （grunt，gulp等等），熟练使用github或gitlab，对模块化、组件化、工程化、语义化有一个比较深入的了解，最后要知道如何开发移动端 的页面，如何去优化一个页面的性能。

初级web前端工程师的技术体系

HTML部分

首先是要掌握一些常用标签的使用和他们的各个属性，这些常用的标签我总结了一下有以下这些：

html：页面的根元素。

head：页面的头部标签，是所有头部元素的容器。

body：页面的主体标签，页面展现的内容就放置在这里面。

title：页面的标题。

meta：位于文档的头部，提供页面的元信息，包括关键字、描述等等。

link：定义文档与外部资源的关系，最常用的用途就是引入样式表。

script：脚本标签，可以把js脚本代码放置在这个标签内，也可以使用这个标签的src属性引入一个外部标签。

style：样式标签，可以把css代码写在这个标签中。

a：超链接，href属性代表要链接到的地方，target属性代表打开方式。

img：图像标签，src属性表示图片的位置。

form：表单元素，它内部的input、select、textarea等标签都是比较重要的。

p：定义文档中的分区或节，可以使用p来进行页面的布局等操作。

另外还有ul、li、p、button、iframe、p、table等标签也很常用，nav、section、article、header、aside、footer等语义化标签也需要了解一下。

除了要了解上面这一些标签之外，还需要对一些新的HTML5的API有一定的了解：

audio、video标签。

Canvas：定义图形，比如图表和其他图像。

input标签的accept属性，email、phone、url等类型。

getElementByClassName根据class名来获取一个元素结点。

Multiple file selection多文件选择属性。

html的import、template

process标签，webGL等内容。

还有一些要知道的知识点：

1.doctype的作用。

2.unicode、utf8等编码的原理和区别。

3.如何进行页面性能优化。

4.png、jpg、webp、gif等图片格式的不同的优势。

5.HTML行内元素与块级元素的区别。

6.移动web端开发常用head标签。

7.web语义化。

8.浏览器中的缓存原理。

CSS部分

关于css这一块，我的看法就是网上下载一个chm格式的css的参考手册，然后根据手册里面写的一个个的都敲一下。

css大体分为下面这几块知识点：

① 定位布局

1.position属性的7个值（static | relative | absolute | fixed | center | page | sticky）分别有什么作用和不同？

2.实现品字形布局或者是三栏布局（左右宽度固定，中间适应屏幕）。

3.浮动与清除浮动的方法，flex布局，grid布局。

② 盒子模型

1.margin、padding、border这三个属性。

2.伸缩盒相关内容。

3.Multi-column Layout Module多列布局模型。

③ 文本字体

1.强制换行与不换行，清除空白。

2.文本对齐、大小（如何设置chrome小于12px的字体）、缩进、转换。

3.单位（em、rem、px等），颜色（rgb、rgba，hls）。

④ 变换、过渡和动画

1.transform的各种取值的作用与兼容性。

2.transition过渡的动画类型，贝塞尔曲线的原理。

3.animation动画的各种设置，@keyframes规则。

4.浏览器的重绘与重排。

⑤ 选择器

1.选择器的分类，权值和优先级。

2.有哪些属性可以被继承，哪些属性没法继承。

3.伪类和伪元素分别是什么，有什么作用。

上面这些都是基础的东西，除了这些基础的内容之外需要了解Less、Sass、stylus等css预处理器，这将会大幅度提升你的css开发效率，也需要了解一下Autoprefixer、PostCSS等css后处理器。

3.JavaScript部分

在这里就不说js的基础知识了，我把js按照语法的层次和使用的层次分为了两大块。

按照语法的层次来说：

首先是javascript的面向对象方面的内容：在javascript中实现封装、继承和多态。

① 封装：在js中可以通过闭包、作用域和作用域链来实现封装，ES6的const、let的作用。

② 继承：基于原型链的继承、基于构造函数的继承、组合式继承、寄生式继承等，外加ES6的class关键字，prototype和proto。

③ 多态：在javascript中多态是使用arguments来实现的，关于

arguments会引申出来很多内容：

1.arguments的caller、callee等方法的作用。

2.方法的apply和call的作用和不同。

3.使用Array.prototype.slice.call来把一个数组对象转化为数组。4.array的各种方法，如shift、splice、push、filter、map、reduce、forEach等等。

然后是Js的设计模式，比如说那三种工厂模式啊，建造者模式啊等等。

最后是在不同情况下的this分别都代表什么。

按照使用的层次来说：

首先最主要的就是ajax，ajax的原理，ajax跨域的方法：jsonp、使用iframe的location.hash、postMessageAPI、websocket、服务器代理等等。

然后是tcp协议、udt协议以及http协议的协议头、状态码等内容。浏览器的缓存，客户端存储方面的内容：localstorage、sessionstorage、indexDB、cookie等等。

是一些新的js的API，例如文件读取（fileReader）、fetch、Promise、Web Sockets等等内容，可以去caniuse上面看一下有哪些新的东西。

上面我所说的这些只是一些比较笼统的概念，把前端html、css和javascript所需要掌握的部分内容列举了一下，在前端领域还有很多需要我们知道的知识，这需要大家在学习工作的过程中去自己总结。

我有一个前端学习交流QQ群：328058344 如果你在学习前端的过程中遇到什么问题，欢迎来我的QQ群提问，群里每天还会更新一些学习资源。禁止闲聊，非喜勿进。

近日，有不少的程序员问w3cschool这边，前端开发应该怎么学?

有个小白程序员表示，自己走了很多弯路，学java开发没学透不能就业，现在学前端又不知道如何下手，前后算起来浪费了不少的时间。

针对此问题，下面w3cschool就给程序员小伙伴们答疑解惑，并分享一些干货。

前端有三架马车你一定要学会“驾驭”，HTML+CSS+Javascript。

照目前看来，网上各种前端学习资料又多又杂，确实让不少入门前端的小伙伴不知所措。要选什么学习资料?如何入门前端开发?

0、Come on，来点国外的土特产视频!

关于视频的选择，直接网上搜“30 Days to Learn HTML & CSS”这个视频来看。

这个视频是国外的前端开发特产，大小有1G多吧!

前端开发可以照前端开发的视频进行实战训练，建议可以一边开着NotePad++，一边看视频，一边敲代码。

另外，可以用有道云，或者是印象笔记稍微做点记录，这会加快你对html、css的学习。

1、从经典的w3cschool前端html教程学习

当你咨询了很多的前端工程师，他们都会推荐你从经典的w3cschool基础教程开始，把上面的课程刷一遍。

2、html微课

通过前面两步的学习，你基本上算是入门html啦。

但相信也会有些程序员觉得很枯燥，那不妨可以尝试w3cschool新开发的html微课。

比如之前的《刀塔传奇》，很多人每天刷副本都可以乐此不疲，因为游戏升级通关是比较有趣的。

w3cschool微课同样采用了闯关刷副本的模式，你通过每天有趣的刷副本闯关，就可以掌握html重点的概念和编程技能。

3、前端开发神书推荐

会有些前辈会给你推荐《DOM编程艺术》、《Javascript权威指南》、《Javascript高级程序设计》、《锋利的JQuery》等，但对于新手来说似乎略难。

不妨去看Head first html， xhtml & CSS这两本简直是神书，真心经典!

最近收到不少的粉丝的提问，问能不能推荐一些实战综合性强点前端学习网站。

下面w3cschool精选了5个前端学习网站，相信这些网站将对前端学习者大有帮助。

0、廖雪峰官方网站

有不少的新手程序员会在廖雪峰官方网站学习前端，比如JavaScript教程就有200多万阅读量。

上面的教程讲解比较生动，形象，没有学究式那种死板的讲解，新手比较容易理解，所以强推。

1、Codecademy

在codecademy上，包含不少的在线编程习题和课程视频。

在这上面学习HTML和CSS，是一个相当不错的选择。

2、w3cschool

w3cschool网站上HTML、CSS、JS在线学习教程比较系统，从入门到进阶。

一般读大学计算机专业的同学，他们的大学老师都会推荐用w3cschool这个网站学习编程。

在手机端w3cschool app前端教程和PC上同步，在坐地铁或者公交的时候，同样可以用手机复习前端的知识。

3、HTML5Rock

HTML5Rock是一个很不错的前端教程网站,实际上HTML5 Rocks是一个Google项目。

在HTML5Rocks网站上，涵盖了HTML5的九个教程。

4、Freecodecamp

Freecodecamp全球非常火的Web开发学习平台，网站源码在github有5万多星星。

这个网站学前端的感觉用四个字形容的话，那就是：欲罢不能。

Freecodecamp会让你有打游戏的冲动，编程闯关，一步步升级，从玩中学编程。

你将学习到前端、后端、数据可视化等几乎涵盖所有的Web开发知识。

最后，你用哪一个网站学习前端呢?

学习完本阶段的课程，你将获得：1. 行业背景、职业前景的认知2. 对Web大前端工程师的认知3. 认识自己学习Web大前端的优势4. 掌握Web大前端学习方法5. 了解Web大前端职业规划

Web大前端工程师的职业背景、行业前景、Web大前端工程师在团队项目中的定位及所与具备的技能，并从各个职业的角度，设身处地得帮大家分析从事Web大前端开发的优势和劣势，同时为了帮助大家快速地掌握Web大前端的学习技能，本阶段的课程给大家介绍了Web大前端的学习方法和路径，以及将来的职业规划。

详情联系我们https://huaianmh/product/web给予支持

首先要从基本的HTML语言开始学起。网页的所有内容都是建立在HTML的基础之上，要想学好HTML，不要去使用任何集成工具，而是使用文本编辑器，直接从最简单的HTML可以写起。首先上网下载notepad++文本编辑器，一个好的文本编辑工具能达到事半功倍的效果。

w3shcool 网站提供各种前端开发教程，其教程很适合初学者学习。所以打开 w3school 根据教程的每一步，一边学习一边编写html，来学习基本的html语言语法

学习了基本的html之后，没有JavaScript，网页永远都只是一张静态的纸。下一步要结合JavaScript来深入前端开发。原生的JavaScript是非常难用的，对初学者门坎比较高，但是如果从Jquery学习开始的话，你会发现js是那样的灵活和美妙，这会让你彻底喜欢上前端开发。再次利用w3shcool的jquery教程来学习jquery

下面是小编整理的一整套web前端学习教程进扣qun：730227513免费领取

学习jquery的时候，你会发现jquery可以做动画，可以修改页面的显示效果，这样你就自然需要了解css，w3school在此又要有用了，这时可以根据 w3school 教程学习基本的css语法，你会发现它的选择器与jquery十分相似，其实这也是jquery强大的原因。学习了css，你就会发现自己终于可以做出漂亮的页面，而不是那些古板的条条框框了。

学习了以下这些前端开发的基础之后，可以再来下载nginx服务器，安装使用都非常简单，这样就可以了解一个网站在服务器上是如何运转，如何通过一个http的地址来访问你的网页，如何将自己的网页共享给别人。这样你的入门就毕业了，就可以向高级迈入！这时候可以选择学习原生JavaScript，来知道jquery的原理，再学习html5，使用一些开源css框架！