凌阳教育专注嵌入式教育14年,良心教育,有担当,有诚信,值得信赖的教育品牌,欢迎访问官网http://www.sunplusedu.com

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

上一篇 / 下一篇  2016-08-20 15:45:32 / 个人分类:web前端开发

  目前在网上有很多关于技术体系的文章,但是几乎都是在一个很笼统的方面来介绍,这里凌阳教育的老师就给把那些笼统的概念给分解开,详细的来说一下初级前端工程师需要掌握的知识内容。

  html部分

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

  html:页面的根元素,head:页面的头部标签,是所有头部元素的容器,body:页面的主体标签,页面展现的内容就放置在这里面,title:页面的标题,meta:位于文档的头部,提供页面的元信息,包括关键字、描述等等,link:定义文档与外部资源的关系,最常用的用途就是引入样式表,script:脚本标签,可以把js脚本代码放置在这个标签内,也可以使用这个标签的src属性引入一个外部标签,style:样式标签,可以把css代码写在这个标签中,a:超链接,href属性代表要链接到的地方,target属性代表打开方式,img:图像标签,src属性表示图片的位置,form:表单元素,它内部的inputselecttextarea等标签都是比较重要的,div:定义文档中的分区或节,可以使用div来进行页面的布局等操作。

  另外还有ullipbuttoniframeptable等标签也很常用,navsectionarticleheaderasidefooter等语义化标签也需要了解一下,除了要了解上面这一些标签之外,还需要对一些新的HTML5API有一定的了解:audiovideo标签,Canvas:定义图形,比如图表和其他图像,input标签的accept属性,emailphoneurl等类型,getElementByClassName根据class名来获取一个元素结点,Multiple file selection多文件选择属性,htmlimporttemplate,还有process标签,webGL等内容。

  还有一些要知道的知识点:1.doctype的作用2.unicodeutf8等编码的原理和区别3.如何进行页面性能优化4.pngjpgwebpgif等图片格式的不同的优势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.marginpaddingborder这三个属性2.伸缩盒相关内容3.Multi-column Layout Module多列布局模型。

  文本字体

  1.强制换行与不换行,清除空白2.文本对齐、大小(如何设置chrome小于12px的字体)、缩进、转换3.单位(emrempx),颜色(rgbrgbahls)

  变换、过渡和动画

  1.transform的各种取值的作用与兼容性2.transition过渡的动画类型,贝塞尔曲线的原理3.animation动画的各种设置,@keyframes规则。

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

  选择器

  1.选择器的分类,权值和优先级2.有哪些属性可以被继承,哪些属性没法继承3.伪类和伪元素分别是什么,有什么作用。

  上面这些都是基础的东西,除了这些基础的内容之外需要了解LessSassstyluscss预处理器,这将会大幅度提升你的css开发效率,也需要了解一下AutoprefixerPostCSScss后处理器。

 


TAG: 标签 工程师 技术 网上 文章

 

评分:0

我来说两句

显示全部

:loveliness: :handshake :victory: :funk: :time: :kiss: :call: :hug: :lol :'( :Q :L ;P :$ :P :o :@ :D :( :)

Open Toolbar
博评网