@ 前端初学者怎样才能熟练地运用好html?
新的一年新的开始,偶会继续在悟空问答分享自己的学习工作经验。偶不是前端大牛,但是也看过很多技术文章,有自己的看法。偶不会站在一个“土豪”的角度说东西,偶会站在一个普通人的角度,通俗易懂的和你分享。
偶也做了一年的前端,本科学的机械,但是感觉互联网编程是更好的未来,才转行到这里。开始学习的时候也是摸爬滚打,工作之后公司就自己一个前端开发,老大也真敢赌,在这里偶也大大小小做了六七个项目。pc端移动端都有,所以偶跟你分享的东西会很真,不会站在一个很高的角度,但是也会让你容易理解,通俗易懂,入门学习。
这位朋友问的初学者怎么熟练用好html+css。确实今天的前端开发不像很早之前部署完页面就可以了,后台写逻辑。现在都提倡前后端分离。而html,css算是最基础最基础的东西了,还不算是html5和css3的新特性。
很多页面实现都可以使用html和某些css实现,不使用某些特别的标签(说实话偶也没有完全掌握html标签,但基础布局都可以实现)。估计现在很多人不会做下来安静地看书的,但是会使用百度,看点菜鸟教程这些文档还是很好的。不用想太多上来就做一个京东首页布局,淘宝首页布局。这里面其实有很多交互的,可能还涉及js的知识。建议可以找一个静态页面,实现简单的布局,在实践中才能更好学习到东西。像悟空问答的回答区,任务这里怎么布局,头像为什么是圆的?头像右侧怎么才能两行,左右侧有个关注按钮怎么实现长宽色彩这些,一点一点实现,不要好高骛远。
要有个好态度,主动去学习。如果小编想仿照某一个页面,看到好看的效果,可以使用F12,看看人家的dom布局,和样式书写。其中可以最直接在浏览器内修改看效果,保持一颗好奇心。多查资料,现在很多效果都可以百度出来,遇到问题不要先想-这咋整啊,不可能啊。这会让别人很厌烦。最开始做app时候,也没人带偶,偶一想到图片拍照上传,二维码扫描,地图什么的偶也害怕了。所以在项目开始之前偶就查阅资料,问一些前辈。其实很多技术都很成熟了,不用担心,重要的是有一颗学习的心。
既然是熟练的使用,一定要多做,多写。像很多人刚开始的时候连标签都记不住,英文单词都不行,也谈不上熟练。打字的时候还单手指按,也不可能效率高,这些东应该是编写好代码的前提。
现在技术更迭很快,有些人了解了html,css,js,其实可以先上手框架了。偶也不是html,js这些玩得很溜了,才学习的框架。而是在些项目的时候一点一点的深入的。毕竟没有到那个程度,看几个例子就知道了原理,遇到某些效果就可以灵活的运用。偶也是看了很多文档,有自己的思考,有自己的演示,像js同步异步,宏任务微任务,刚开始接触前端的时候根本没有接触过这些概念。
希望看到这里的朋友,偶感觉知识道理是实践出来的,不是看到个东西想就能想明白,看着都很正确,到自己书写的时候未必是那样的。所以就是多练习,多写,多问。只要肯付出,在电脑前减少玩游戏的时间,减少看直播的时间,减少追剧的时间,减少扯淡的时间,能力慢慢就提升了。
偶是测不准,希望在新的一年里通过自己的努力面试进头条公司。只是发表一些自己的愚见,不喜勿喷,如果你现在在学习前端,有问题可以给偶留言,大家一起学习进步!
*百度网盘也有些学习资料,感兴趣的小伙伴可以留言。不需关注。
@ 自学HTML5的条件是什么?
对于许多自学前端的学习者来说,学习兴趣是浓厚的,但是往往求学无方。现在网上的资源良莠不齐,在海量的信息库里挑选适合自己的HTML5学习线路更是难上加难。
今天小编就给大家分享一个HTML5初级开发工程师学习线路。
第一部分是HTML5课程介绍,通过这段课程学习,学生可以对整个HTML5课程有全面的了解,对未来主要的工作和业务应用场景有初步的认识。
1、互联网发展趋势
2、H5语言的优势
3、简单易学人人都能编程
4、H5就业和薪资情况
5、H5常见的项目与产品
6、H5的未来与方向
第二部分是HTML基础,通过这一部分基础学习,学生可以学会HTML,并且了解网页的组成,可写出基本的网页结构。
1、HTML简介与历史版本
2、常用开发软件
3、常见标签与属性
4、表格与表单
5、标签规范与标签语义化
6、实战:网页结构布局
第三部分是CSS基础,通过此阶段的学习,学生可以学会CSS,利用PS工具进行样式开发,结合HTML结构完成整页制作。
1、css简介与基本语法
2、常见的各种样式属性
3、CSS选择器与标签类型
4、理解盒子模型与CSS重置
5、浮动与定位
6、利用photoshop工具测量样式
7、HTML+CSS开发网页
8、实战:高仿电商首页效果
第四部分是CSS3基础,学成之后,学生可以利用CSS3制作出炫酷的网页动态效果。
1、css3常见样式
2、css3选择器
3、变形与动画
4、3D效果与关键帧
5、弹性盒模型
第五部分是移动端布局,通过这一阶段的学习,可以掌握移动端概念与移动端布局方案,理解什么是响应式,利用bootstrap来搭建页面。
1、移动端基本概念
2、viewport窗口设置
3、移动端布局方案
4、rem、vh、vw等单位
5、响应式布局
6、bootstrap框架
第六部分是JavaScript基础,可以基本掌握JS基本语法和简单的逻辑处理,掌握JS核心内容,利用JS开发网页中常见的特效效果。
1、JS简介
2、JS变量
3、数据类型与类型转换
4、运算符与优先级
5、流程控制-if..else
6、流程控制-switch…case
7、流程控制-while、do..while、for循环
8、break、continue语法
9、函数定义与调用
10、全局变量与局部变量
11、函数传参与返回值
12、函数作用域与变量作用域
13、DOM的基本操作
14、定时器使用
15、this指向与修改指向
16、数组、字符串等方法操作
17、时间对象与正则对象
18、掌握常见BOM操作
19、常见事件与事件细节
20、JSON与AJAX
21、JSONP跨域操作
22、前端cookie的使用
23、实战:JS配合HTML与CSS完成电商项目
第七部分是jquery框架,此阶段的学习结束,学生可以学会jquery框架,利用jquery框架快速开发网页效果。
1、jquery核心思想
2、jquery常见方法
3、jquery动画操作
4、jqueryAJAX操作
5、jquery工具方法
6、利用jquery快速开发网页
第八部分是PHP基础,学习之后可以掌握前后端真实开发模式,能够对数据库进行CURD操作,并能显示数据到页面,实现动态网站开发。
1、PHP简介与基本语法
2、mysql数据库及sql语法
3、apache服务器与集成开发工具
4、PHP链接数据库
5、PHP与AJAX交互
6、实战:留言板、登录、注册等
第九部分是H5基础项目,也是此学习路线的尾声部分。学生能够独立完成一整个大型网站的前端开发。具备独立的项目开发能力和思考能力。并且,做到多设备、多浏览器兼容等处理实现。
1、项目简介
2、项目功能演示
3、项目划分及框架
4、编写HTML页面结构
5、设置CSS样式
6、添加JS交互
7、可选框架:bootstrap、jquery、PHP等
8、项目调试及兼容
9、项目验收
@ 值得推荐的HTML5相关书籍有哪些?
《HTML5布局之路》主要内容
● PC端静态网站开发知识与技术(HTML、CSS)
● 移动端网站开发知识与技术(HTML5、CSS3)
● 基础知识自评习题集
● 章节性代码习题集
● 涉及多章节知识的网页案例实战
● 各类软件、工具、辅助学习类文件
● 注:本书不涉及JavaScript。
《HTML5布局之路》是一本什么样的书
《HTML5布局之路》主要知识章节概览
第1~16章为技术知识章节,17~19章分别为配套练习题、案例等,附录为相关软件、工具介绍。