首先得根据你目前掌握的基础来判断。假如你有了其他语言基础，那么学习js会很快，因为各种数据类型，约束，都差不多相似的。js比较灵活，是属于弱类型声明的语言，这一点跟其他语言又不大一样，但是只要有其他语言基础的，学起来都会比较快的。你只要看一遍基础知识，练习一下就会使用，可能在操作dom上需要多下功夫，其他逻辑什么的，都跟其他语言差不多。
其次就是没有基础的。没有基础的话，前端方面需要学习三大件:js，html，css，学习方式可以通过书本，视频还有API文档。开发过程API文档都是伴随左右的，方便随时查看不懂的知识点。js要学习语法，数据类型，闭包，事件模型，获取dom等基础的知识；html需要学习常用标签，标签常用属性，表单的使用等基础知识；css需要学习选择器的使用方式，盒子模型的布局实现，常用的样式设计等知识。
最后，就是把上面所说的三大件融会贯通的使用，现在开发就是分离型开发，js，html,css文件都是相互独立出来的。后续需要找项目进行练习设计前端界面，并完成一些小功能，提高编码能力，差不多了，就学习vue等框架。除此以外因为开发项目前后端分离，还要学会熟练的与后端数据交互，学完这些就算入门了。
任何语言都是由易到难，就像修炼一样，一个境界一个境界往上走，需要耐心，坚持，才能学好技术，加油吧！
css后代选择器和子选择器的区别介绍：
1 css后代选择器语法：h1 em {color:red;} 表示的是从h1开始里面包含的所有的em元素变成红色，h1为祖先，其他的em都是后代，即选中后代，不管是儿子还是孙子，只要是都会被选中，为后代选择器。2、css子元素选择器语法：h1>em{color:red;} 表示的是从h1开始里面的第一层em元素变成红色，h1为祖先，em为儿子，就像世袭制一样，只能传给儿子，孙子和其他堂亲都不行
1、元素选择器 标签名{ }
2、id选择器 #id属性值{ }
3、类选择器 .class属性值{ }
4、选择器分组(并集选择器)
作用：通过它可以同时选中多个选择器对应的元素(通常用于集体声明)
语法：选择器1，选择器2，选择器n{ }
5、复合选择器(交集选择器)
作用：选择更准确更精细的目标元素并为其设置属性
语法：选择器1选择器2选择器n{ }
!注意选择器之间不能有空格，要紧挨在一起
6、通配选择器
作用：用来选中页面中所有的元素
语法：*{ }
7、后代元素选择器
作用：选中指定元素的指定后代元素
语法：祖先元素 后代元素{ }
8、子元素选择器
作用：选中指定父元素的子元素
语法：父元素>子元素
9、伪类选择器
伪类表示元素的一种特殊状态
:hover 移入时元素的状态
:visited 已被访问过后的元素的状态
:active 被点击时元素的状态
10、 属性选择器
作用：根据元素中的属性或属性值来选取指定元素
语法：[属性名]选取含有指定属性的元素
? [属性名=“属性值”]选取含指定属性值的元素
? [属性名^="属性值"] 选取属性值以指定内容开头的元素
? [属性名$="属性值"] 选取属性值以指定内容结尾的元素
? [属性名*="属性值"] 选取属性值包含指定内容的元素
11、兄弟元素选择器
+选择器
作用：选中一个元素后紧挨着的指定的兄弟元素
语法：前一个+后一个(作用在后一个)
~选择器
作用：选中后边所有的制定兄弟元素
语法：前一个~后边所有
想学好HTML5开发，好的学习资料当然必不可少，今天就给大家推荐几本热度比较高的书籍，相信好的学习资料能让你的学习效果事半功倍。
1、HTML5 + CSS3 从入门到精通推荐指数：★★★☆
简介：本书通过基础知识+中小实例+综合案例的方式，讲述了用HTML5+ CSS3设计构建网站的必备知识，相对于专业指南、高级程序设计、开发指南同类图书，本书是一本适合快速入手的自学教程。
2、响应式web设计：HTML5和CSS3实战推荐指数：★★★★
简介：全书主要是带领读者做一个小网页来写的，其实响应式的东西讲得比较少，大半内容是介绍H5和css3的基础知识。如果同时想了解H5和css3和响应式设计入门，这本书不错。
3、HTML5移动web开发实战详解推荐指数：★★★★☆
简介：本书由浅入深，全面、系统、详尽地介绍了HTML5相关技术和其在移动开发领域的应用。书中提供了大量的代码示例，读者可以通过这些例子理解知识点，也可以直接在开发实战中稍加修改应用这些代码。《HTML5移动Web开发实战详解》涉及面广，从基本原理到实战，再到项目工作流，几乎涉及一个合格的前端开发工程师需要具备的所有重要知识。
4、疯狂HTML5/CSS3/Java讲义推荐指数：★★★★
简介：这是一本全面介绍HTML 5、CSS 3和Java前端开发技术的图书，系统地介绍了HTML5常用的元素和属性、HTML5的表单元素和属性、HTML 5的绘图支持、HTML5的多媒体支持、CSS 3的功能和用法、最前沿的变形与动画功能等。除此之外，《疯狂HTML 5/CSS 3/Java讲义》还系统地介绍了Java编程知识，包括Java基本语法、DOM编程，以及HTML 5新增的本地存储、离线应用、Java多线程、客户端通信支持、WebSocket编程等。
5、HTML5触摸界面设计与开发推荐指数：★★★★☆
简介：《HTML5触摸界面设计与开发》专注于触摸界面的开发，内容的结构和优化网站的思路大概一致。上半部分涵盖了能使各类网站，特别是移动网站变快的基本概念。书的后半部分是专门讲触摸界面的，特别是尽可能地让它们更平稳和快速。本书适合具有一定经验的Web开发者阅读参考。
6、HTML5与CSS3权威指南（上下册）（第3版）推荐指数：★★★★☆
简介：本书分为上下两册。上册全面系统地讲解了HTML5相关的技术，以HTML5对现有Web应用产生的变革开篇;下册全面系统地讲解了CSS3相关的技术，以CSS3的功能和模块结构开篇，顺序讲解了各种选择器及其使用、文字与字体的相关样式、盒相关样式、背景与边框相关样式、布局相关样式、变形处理、动画、颜色相关样式等内容。
7、HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站推荐指数：★★★★☆
简介：全书以HTML与CSS为主，配合jQuery制作网页，并搭配jQuery Mobile制作移动网页，通过具体的范例从基础到高级循序渐进地讲解。首先介绍了HTML5网页开发和CSS网页美化，还介绍了目前热门的移动设备网页技术，读者无须学习复杂的程序，就能够轻松创建移动设备的网页;最后通过两个移动设备网页制作实例让读者进行实战练习，以加深理解。理论部分介绍比较扎实，美中不足的是实战案例相对较少。
8、HTML5程序设计（第2版）推荐指数：★★★★★
简介：《HTML5程序设计(第2版)》首先介绍了HTML5的历史背景、新的语义标签及与以往HTML版本相比的根本变化，同时揭示了HTML5背后的设计原理。本书在上一版的基础上新增了SVG和拖放API相关内容，并对部分内容进行了更新。从第2章起，分别围绕构建令人神往的富Web 应用，逐一讨论了HTML5的Canvas、Geolocation、Communication、WebSocket、Forms、WebWorkers、Storage等API的使用，辅以直观明了的客户端和服务器端示例代码，让开发人员能够迅速理解和掌握新一代Web标准所涵盖的核心技术。
本书面向有一定经验的Web应用开发人员，对HTML5及未来Web应用技术发展有浓厚兴趣的读者也可以学习参考。
9、Java语言精粹（修订版）推荐指数：★★★★★
简介：JS是门混乱的语言，这本书能够帮助你区分哪些是语言的精华，哪些是糟粕。作者从语法、对象、函数、继承、数组、正则表达式、方法、样式和优美的特性这9个方面来呈现这门语言真正的精华部分，通过它们完全可以构建出优雅高效的代码。作者还通过附录列出了这门语言的毒瘤和糟粕部分，且告诉你如何避免它们。最后还介绍了JSLint，通过它的检验，能有效地保障大家的代码品质。
10、HTML5 APP商业开发实战教程推荐指数：★★★★★
简介：这是目前唯一一本真正的HTML5 App开发教材，目前已在复旦、北大、西安交大、北京理工等五十多所高校投入教学使用。它的特点是由浅入深、由易到难，将开发技巧、和开发工具结合在一起阐述，同时选取了多个商业项目APP的实战案例进行要点讲解，通俗易懂。
和下面推荐的几本书不同之处在于，本书是面向应用型本科和高等职业院校设计的标准化教材，并经过认证，且该教材能与国家及国际认证考试无缝对接。
尤为难得的是，本书配套录制了非常详实的课程视频，在腾讯课堂和百度传课都能免费收看。线下阅读和线上授课相结合，对于消化、理解相关知识点有较好的辅助作用。
以上推荐的10本书籍，侧重点各有不同，但其中肯定有一两本是你所需要的。当然了，这些只是凤毛麟角，想尽快学好HTML5的话还是要去培训机构学习。千锋武汉HTML5培训课程采用全程面授高品质、高成本培养模式，教学大纲紧跟企业需求，且拥有全国一体化就业保障服务。
希望偶的回答能帮到大家！