前端开发体系.docx

前端开发体系一、语言1、html/html51）熟悉个标签的作用、使html结构语义化，常用标签如下：块级元素：h1~h6、p、div、ol、ul、li、dl、dt、dd、iframe、form、blockquote、hr、br、table、pre等;行内块级：input、select、button、img、textarea等；行内元素：a、em、i、small、strong、sub、sup、label、del、val等。2）html5新增标签( 多用于移动端 )header、footer、nav、aside、section、article、canvas、command、datalist、details、canvas、embed、hgroup、meter、source、time、video、audio、progress、mark、figure等等。3）书写规范及相关语义规范参考文档：html书写规范.docx；更多资料参考：/html/html-tutorial.html2、css/css3（进阶--less/sass）1）掌握css各类型选择器 ( 优先级：行内样式 id选择器 类class选择器 标签选择器 )Id选择器：#tab { font-size: 16px };class选择器：.tab { color: #fff };标签选择器：p { background-color: #fff }属性选择器：input[ type=text ] { width: 100px; } 选择所有type类型为text的input标签后代选择器：div p { line-height: 36px }选择div下的所有p标签子代选择器:div p { height: 36px }选择div子代中的所有p标签兄弟选择器: div+h2 { color: #fff }选择跟div同级的下一个标签h2伪类选择器：a:link、a:visited、a:hover、a:active等通配符：*选择所有标签2）熟悉常用css属性和值位置属性(position,top , left, bottom, right, z-index, display, float等)大小(width, height, padding, margin)文字系列(font, line-height, letter-spacing, color, text-align等)背景(background, border, box-shadow, border-radius等)动画(animation, transition等)3）熟练div+css布局深入了解盒模型的使用( 内容高度（height）+内边距( padding )+外边距( margin ) );掌握浮动元素的特点、熟练使用浮动( float )以及清除浮动的方法熟悉absolute（绝对定位）、relative(相对定位)、fixed( 固定定位 )之间的特点4）常用css3属性定义圆角：border-radius: 50%; 定义阴影：box-shadow: 0 0 3px #000;定义动画：animation: myAnimate(动画名) 2s(时间);定义过渡动画：transition: width .8s;定义转换：transform: rotateX( 45deg );沿X轴旋转45度5）书写规范规范参考文档：css书写规范.docx更多资料参考：/css/css-tutorial.htmlLess预编译：/p/lesscss/3、javascript(语法es5/es6)1）熟悉js的几种数据类型,类型转换、类型判断的方法数字类型(Number)：12、12.5;字符串类型(String): “Bill bay”;布尔类型(Boolean): true/false （只有两个值）;数组类型(Array): var arr = [1,2,”bill”]；数组可以存放任意类型的值对象类型(Object)：var p = { name: “bill” } 由键值对的形式存在如JSON 用于数据交互undefined和null: undefined表示缺少值，null表示没有值2）熟悉函数、回调函数、作用域、this指向以及js系统内置对象( Number、String、Date、Array、Boolean、Math、RegExp等 )3) 熟悉文档对象模型（DOM），熟悉操作DOM的方法;4)熟悉事件冒泡、事件捕获、事件代理;5)了解闭包、原型、面向对象编程;6) 熟悉jQuery的使用、链式操作,了解js钩子机制;7）书写规范规范参考文档：javascript书写