1网页的基本结构（HTML、CSS）
HTML是一种标记语言，而不是编程语言，最基本是标签是和，CSS是用来定义如何显示HTML元素的。对HTML+CSS很容易入门，但很多人不够深入，
2浏览器是怎么展现网页的
不同内核的浏览器对网页的渲染是不一样的，目前浏览器都有客户端调试工具，
3网页的什么周期
不同的web框架下，页面的生命周期会有所不同，大体还是一样：客户端发送GET请求，服务器返回相应页面，客户端完成操作及数据，然后POST给服务器。一定要对数据的传递(前台与后台,页面之间)的细节了然于心。
4DHTML DOM BOM JavaScript AJAX
这是Web前端开发的重中之中，大多数时候大家都在和他们打交道。说几个注意点：javascript是单线程编程，所谓的javascript异步编程只不过是计划在未来的某个时间上执行相应事件而已;
javascript很强大很灵活，不要幻想短时间内熟练(更别说精通)它，并写些框架、类库，初始阶段还是先用熟练已成熟的框架(比如jquery)当入门;一定要熟练使用客户端调试工具。
5服务器端语言开发经验，PS切图技术
Web前端开发介于设计与开发中间，所以两端的东西都得懂点。编辑语言是相通的，之前编写过服务器语言，对学习javascript是十分有益的，从图片转成静态HTML页面，少不了PS切图技术。
6浏览器的兼容性
由于历史原因，浏览器的兼容性一直都折磨web前端工程师的地方，虽然有W3组织，并制定了一些规范，虽然浏览器产商都正在努力改进并接近其规范，但现实网络环境中各种内核、各种版本的浏览器都有一席之地。
7快速学习能力和主动学习意愿
web前端的发展很快，从事这一行业一定要有快速学习能力和主动学习意愿，这样才能适应Web产品的要求。在Web前端领域没有绝对的是与非,解决一个问题的方法有很多，但大家要找到一个更合适的方法，找到一个更合适的方法需要经验作积累，总之Web前端入门容易，想熟练很难，需要更多的主动学习意愿。
@ 前端初学者怎样才能熟练地运用好html？
新的一年新的开始，偶会继续在悟空问答分享自己的学习工作经验。偶不是前端大牛，但是也看过很多技术文章，有自己的看法。偶不会站在一个“土豪”的角度说东西，偶会站在一个普通人的角度，通俗易懂的和你分享。
偶也做了一年的前端，本科学的机械，但是感觉互联网编程是更好的未来，才转行到这里。开始学习的时候也是摸爬滚打，工作之后公司就自己一个前端开发，老大也真敢赌，在这里偶也大大小小做了六七个项目。pc端移动端都有，所以偶跟你分享的东西会很真，不会站在一个很高的角度，但是也会让你容易理解，通俗易懂，入门学习。
这位朋友问的初学者怎么熟练用好html+css。确实今天的前端开发不像很早之前部署完页面就可以了，后台写逻辑。现在都提倡前后端分离。而html，css算是最基础最基础的东西了，还不算是html5和css3的新特性。
很多页面实现都可以使用html和某些css实现，不使用某些特别的标签（说实话偶也没有完全掌握html标签，但基础布局都可以实现）。估计现在很多人不会做下来安静地看书的，但是会使用百度，看点菜鸟教程这些文档还是很好的。不用想太多上来就做一个京东首页布局，淘宝首页布局。这里面其实有很多交互的，可能还涉及js的知识。建议可以找一个静态页面，实现简单的布局，在实践中才能更好学习到东西。像悟空问答的回答区，任务这里怎么布局，头像为什么是圆的？头像右侧怎么才能两行，左右侧有个关注按钮怎么实现长宽色彩这些，一点一点实现，不要好高骛远。
要有个好态度，主动去学习。如果小编想仿照某一个页面，看到好看的效果，可以使用F12，看看人家的dom布局，和样式书写。其中可以最直接在浏览器内修改看效果，保持一颗好奇心。多查资料，现在很多效果都可以百度出来，遇到问题不要先想-这咋整啊，不可能啊。这会让别人很厌烦。最开始做app时候，也没人带偶，偶一想到图片拍照上传，二维码扫描，地图什么的偶也害怕了。所以在项目开始之前偶就查阅资料，问一些前辈。其实很多技术都很成熟了，不用担心，重要的是有一颗学习的心。
既然是熟练的使用，一定要多做，多写。像很多人刚开始的时候连标签都记不住，英文单词都不行，也谈不上熟练。打字的时候还单手指按，也不可能效率高，这些东应该是编写好代码的前提。
现在技术更迭很快，有些人了解了html，css，js，其实可以先上手框架了。偶也不是html，js这些玩得很溜了，才学习的框架。而是在些项目的时候一点一点的深入的。毕竟没有到那个程度，看几个例子就知道了原理，遇到某些效果就可以灵活的运用。偶也是看了很多文档，有自己的思考，有自己的演示，像js同步异步，宏任务微任务，刚开始接触前端的时候根本没有接触过这些概念。
希望看到这里的朋友，偶感觉知识道理是实践出来的，不是看到个东西想就能想明白，看着都很正确，到自己书写的时候未必是那样的。所以就是多练习，多写，多问。只要肯付出，在电脑前减少玩游戏的时间，减少看直播的时间，减少追剧的时间，减少扯淡的时间，能力慢慢就提升了。
偶是测不准，希望在新的一年里通过自己的努力面试进头条公司。只是发表一些自己的愚见，不喜勿喷，如果你现在在学习前端，有问题可以给偶留言，大家一起学习进步！
*百度网盘也有些学习资料，感兴趣的小伙伴可以留言。不需关注。
@ 如何帮助前端web新人入门和提高？
学习前端就好比如盖房子~
html就充当了房子结构这部分，也是房子的基础。
css呢，就好比咱们房子的装修，墙面什么颜色，什么风格，什么地板…这些给房子改变风格，样式的就是css
javascript呢，就好比这个房子的功能，房子需要制冷吧，需要暖气吧，也需要上下水吧。这些功能性的就相当于是javascript
例子可能不是很恰当，只是帮助大家有个初步的认识~
方法步骤、工具以及开发的案例展现
1、前端工具箱（dreamwear/sublime/Photoshop/SVN等）
2、零基础入门（html，CSS）
前端开发概况、代码入门
页面基本结构、文档声明、编码声明、css语法、style属性、link和style标签、id属性、基本样式、Border 、Background、 Font、盒模型、文本设置…
常用标签集合
header、article、aside、section、footer、nav、h1-h6、p、ul、ol、li、img、dl、dt、dd…绝对路径、相对路径、标签语义化、标签嵌套规范、SEO…
常用选择器&标签类型划分
d、class、类型选择、包含选择、群组选择、通配符、选择器优先级、标签样式初始化订制方案、超链接及伪类划分、标签类型划分及特性、inline、inline-block、block..
浮动进阶
浮动的作用、浮动的特性、文档流、浮动的各种问题、clear、BFC(块级格式化上下文)、触发BFC的条件、Haslayout、Haslayout的触发条件…
定位
relative相对定位、Absolute绝对定位、Absolute绝对定位、Fixed 固定定位、inherit 继承、static静态定位、默认值、zIndex层级问题、margin负值、透明度…
表格和表单
表格标签、表格样式重置、单元格合并、表单元素、表单相关的属性操作、表单默认样式初始…
兼容性问题处理
兼容性问题总结、浮动在IE6，7下的各种问题、表单在低版本IE的问题、处理低版本IE对新增标签的支持、CssHack、条件注释语句、PNG问题、透明度的问题、固定定位在IE低版本的处理方式…
整站进阶
样式规划、favicon、Css Sprite、Data URI、隐藏元素、测试工具使用、滑动门、等高布局、三列布局、未知宽高图片在容器内水平垂直居中、文本水平垂直居中、多行文本水平垂直居中…
css3入门
transition、属性选择器、nth-of- type、nth-child、backgroundSize、box-sizing、圆角，盒模型阴影、文字阴影、rgba、表单高级、H5表单新增属 性、E:not(s)、E:target、E::selection、background-clip…
移动端布局
测试环境Emulation、viewport、 window.devicePixelRatio、物理分辨率、Media Queries、rem、window.screen、移动端布局相关问题、 window.deviceorientationevent、横竖屏判断…
Animation和Transform
浏览器前缀、keyFrames、Animation调 用、播放次数设置、动画偶数次调用顺序、Animation的问题、无缝滚动、动画播放|暂停、rotate旋转、deg、skew斜切、scale缩 放、translate位移、transform-origin、transform的执行顺序问题…
Bootstrap前端开发框架
Html语法规范、CSS语法规范、Less 和 Sass 中的嵌套、class 命名、选择器、Normalize.css、栅格系统、排版、代码、响应式工具…
3.项目实战
PC端的企业网站布局（例：sony官网）
PC端的电商类网站布局（例：京东商城）
移动端常见页面布局（例：微信活动页/商城）
推荐图书：
学习前端书籍自然不可少，这里给大家推荐《html 5与 css 3权威指南》，虽然主要是讲解html5+css3，但倒也是一本好的入门书籍。该书比较系统，覆盖面也比较广。技术新颖，所有知识点都紧跟 html 5与css 3的最新发展动态（html 5和css 3仍在不断完善之中）；也有比较强的实战性（包含246个示例页面），不仅每个知识点都 配有精心设计的小案例（便于动手实践），配合案例，也比较生动有趣。该书不仅能满足你全面而系统地学习理论知识的需求，还能满足你需要充分实践的需求。
本次整理了一些web前端视频资料，注册账号就能免费下载，初级、中级、高级的任君选
下载链接： web前端开发工程师_web前端开发视频教程
个人认为学习前端可能又分为下面几个阶段；
第一阶段——HTML标签的学习
超文本标记语言(HyperText Mark-up Language 简称HTML)，“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
html是一个网页的骨架，就好比是盖房子的结构~这也是前端页面的基础。试着想一下，如果一个房子连砖头和水泥都没有，后面的步骤又有什么意义呢？所以大家必须完全掌握HTML的基本结构和常见的标签，属性。有了一个好的开始，距离成功已经一小半啦~
关于HTML怎么记忆、学习？可能一上来死记硬背，也不会有太好的预期。而且还有可能被吓到？
“偶去！这么多标签！怎么记得玩？”
个人感觉有两点可以尝试：
1，语义化的去记忆。比如ul li这个就是列表，button就是按钮，table就是表格。其实这也是html5所倡导的，语义化标签。
2，试着写一个一个小的demo，也许就只是一个列表，一个表格，或者一个按钮。也许写着写着你就懂了呢？
学习HTML就是要自己不断的去写，去尝试。看着自己的代码能跑起来，有了心目中的效果，这种心情还是很开心的！给大家推荐一个网站，w3cSchool，这里面有在线的代码编辑器。可以边写边看到效果~
ok~学习完成html后，大家来到第二阶段——css
去给大家的房子装修一番吧~
第二阶段——CSS的学习
CSS，层叠样式表—— （Cascading Style Sheets），是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对 网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文 本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。
CSS看似比较繁杂，其实只要掌握了CSS中的盒子模型、定位、以及页面布局，就基本上掌握了大半啦~这时大家就以及能够对网页中各个元素进行精准的排版，做出符合大家意愿的网页啦！
关于CSS的各种属 性，大家还是可以参考学习HTML那样。可以说CSS的属性几乎完全是语义化的。大家需要改变边框，那就是“border”，那大家需要右侧边框做一些改 变，那就是“border-right”。很明显，接下来按照大家的需求还有“右边框的宽度——border-right-with”，”右边框颜色—— border-right-color”等等等，诸如此类~
完全就是大家需要什么，只要凭着需求去寻找。
说完装修，大家终于要给房子打造一些功能啦~follow me~
第三阶段——JavaScript
JavaScript一种直译式脚本语言，是一种动态 类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
简单来 说，javascript是一个可以运行在浏览器上面的语言（当然现在基于一些库/框架已经远不只是在浏览器上了），它可以操控浏览器，让浏览器听从大家 的命令。这有点像一个电视剧和遥控器，而javascript就是大家的遥控器。浏览器根据javascript的指令，做出相应的反馈。比如操作 DOM（也可以理解成为操作HTML），可以操作CSS。有了javascript就可以让偶更加灵活&动态的操控HTML,CSS.
严格来说、HTML和CSS还算不上真正的“语言”，而javascript却是如假包换的脚本型语言，既然是语言，那就会有字符串，数组，对象等等。而大家的javascript可以处理这些与数据有关的工作，比如给数组排个序，去个重等等。
而大家依靠javascript可以做些什么呢？网页上常见的轮播图，网站的注册功能，提交大家的留言，刷新获取新闻等等。当然，大家强大的javascript远不止此啦~以后再为大家深入介绍~
然而因为历史原因，比如大家灰常“尊敬”的 IE 浏览器~出了一套自己的javascript标准，没有和主流javascript标准兼容啊！！作为一个前端er是不是应该把更多精力用在有意义的地方呢，而不是解决兼容。。。
所以，似乎大家还需要一个利器，来让大家更快速的开发~没有错，这就是大家的——jQuery！
第四个阶段——jQuery
jQuery是一个兼容多浏览器的 javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery在1月由美国人 John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开 发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
如果继续用盖房子做例子，jQuery更像是一个装修队。大家只需要关注大家的房子设计本身，把偶的想法，理念告知这个装修队，让它来给大家处理那些杂七杂八的事情。比如会不会吵到邻居？怎么协调物业？干活总得有人手的，对吧…
jQuery的优点偶就不挨个说啦，一句话，jQuery是你更上一层楼的利器，也是大家前端er一大利器！
Web前端学习小建议
这里跟大家扯一扯学习前端的小方法，是偶自己的学习方法，大家凑合看看，倒也不一定对~
在写css前，其实html的结构要是比较合理的，这样写css也会比较顺手。在写一个网页之前，建议先琢磨几分钟，不要上来就写。多去看看别人是怎么写的，然后结合自己的项目，心中有一个大致规划。可以先把最外层轮廓写好，先不着急去写某一个具体的部分。
这里给大家分享一些小技巧：
1、使用reset.css
火狐和IE这两种不同的浏览器，在绘制CSS样式方法上截然不同。这种情况下，使用reset.css重置所有的基本样式会让你得到一个全新的空样式表。（可以去网上找一下，很多的）
2、CSS缩写
CSS缩写简化了你的CSS代码，更重要的是，它让你的代码更加整洁易懂。
不是像这样创建CSS
.header {
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
}
而是像这样创建CSS
.header {
background: #fff url(image.gif) no-repeat top left
}
3、理解class和id
这两个选择器总是让初学者感到迷惑。在CSS中，Class和ID分别用点“.”和井号“#”来标识。简单来说id就是用来标识那些单独不重复的样式，而class是可以重复使用的。
4、实用的<li>
<li>也叫链接列表，在与<ol>或<ul>正确搭配的时候非常好用，尤其是用在导航菜单样式上。
5、少用<table>多用<div>
CSS最大的优势之 一是使用<div>达到样式上的灵活多变。不同于<table>，<div>里的内容不会 被锁在单元 格<td>中。可以说几乎所有的表格布局都可以在<div>和样式的正确使用下完成。当然，有大量表格内容时，还是 用 <table>吧。
6、CSS调试工具
在设计CSS时，能够得到页面布局的预览对于优化CSS样式和纠错是很有帮助的。这里有一些免费的CSS调试工具推荐给你，你可以把它装在浏览器上：比如FireFox Web Developer、DOM Inspector、Firebug等
7、!Important
所有被!important 标记的样式，即使它后来被重写，浏览器也只会采用被标记的那条。
.page {
background-color:blue !important;
background-color:red;
}
比如上面的例子，因为background-color:blue 被标记为!important ，即使后来有把背景改成红色的语句，也只采用被标记的那条。!important 用来强制使一个样式避免在之后的编码中被修改，遗憾的是IE不支持。
牢记以上小技巧，也许你的css技能突然就起飞了呢？
关于javascript的一些小技巧，下次偶再整理给大家~一次性看太多，大家是不是也有点晕？
学习前端需要方法，更需要一颗平常心，不要把前端想的多难，需要吃什么苦。。。既然学习这么痛苦，为什么不快乐一点学呢？
@ 专业的学习路径是怎么样的？
程序员也有鄙视链，后端开发程序员普遍看不上前端，原因是前端入门真的太简单了。就html、css、简单的JavaScript，认真学一天也能做个简单的网页来。
但是想要做好却并不简单，前端的学习路线有点陡峭，到后期要对各种细节问题进行探究、优化，所以如果想要做好，那也不简单，关键还在于得多下功夫。
学习路线：
1、HTML、CSS、JavaScript语法基础。学完基础后，可以仿照电商网站（例如京东、小米）做首页的布局。
2、JavaScript语法进阶。作用域和闭包、this和对象原型等。前端的有很大一部分都在JavaScript与DOM上面了。JS目前来说在开发岗位算是最“万能”的语言，前后端通吃。偶曾经有个项目中就是用JS技术栈开发一个完整的系统，整个项目不管是运行在服务器端的程序还是运行在PC端的程序，基本上都是JS写的。JS很重要、JS很重要、JS很重要（重要的事情说三遍）。
3、Xpath、Ajax、jQuery等。
4、移动Web开发、Bootstrap等。要注意移动开发中的适配和兼容性问题。
5、前端框架：
Node.js，nodejs不一定得学会，但是npm包管理一定要清楚，因为一些大型的前端项目会有一堆包。
Vue.js和React，这两个框架必须要熟练一个。建议先学Vue.js，上手相对容易。同时掌握 Vue 和 React 才是合格的前端同学。
6、自动化工具：构建工具 Webpack、构建工具 gulp、CSS 预处理器 Sass 等。
7、网络通讯：HTTP协议、跨域通信、安全问题（CSRF、XSS）、浏览器渲染机制、异步和单线程、页面性能优化、防抖动（Debouncing）和节流阀（Throtting）、lazyload、前端错误监控、虚拟DOM等。
8、底层原理：V8、垃圾回收、内存生命周期、线程。
9、图像处理：canvas、WebGL。
10、面向对象设计、架构设计、算法等。
PS：前面5条建议按照顺序学习，这是基础内存，作为一名前端必须掌握的。后面5条可按照需求修改先后顺序。
以上是作为一名纯技术前端来讲的，如果是偏向UI前端，那么比较需要多一点了解业务知识，并且尽可能自己的审美观变得接近大多数人。
附上一个偶用前端实现的表情包，图二（欢迎吐槽偶的审美[偶想静静]）
