前端基础应用培训.pdfVIP

目 录 一、概述 二、前端规范 三、前端优化 四、前端兼容 五、前端调试 六、选择器 七、前端布局 元素分类 （dispaly ） 浮动 （float ） 定位 （position ） 盒模型 （box model ） 居中对齐 自适应布局 八、前端工具 本文档使用 看云 构建 - 2 - 一、概述 一、概述 适用于前端基础应用入门培训 ，有前端基础的童鞋可直接忽略。 前端大全 http///content/15/0923/23501136375.shtml 本文档使用 看云 构建 - 3 - 二、前端规范 二、前端规范 编码规范 http///doc/codeguide/ 一、语义化 语义化优点 ：提升可读性便于后期阅读维护 ，提升有哪些信誉好的足球投注网站引擎SEO优化。 1、标签语义化 标题 （H1~H6 ）、列表 （li ）、段落 （p ）、文字 （span ）、表头 （thead ）、表体 （tbody ）等等 2、css类名语义化 头部 （header ）、主体 （container ）、底部 （footer ）、侧边栏 （sidebar ）、广告条 （banner ）等等 div class module-header/div div class module-container/div div class module-footer/div 二、命名规范 1、css的class命名 多单词时通常用 “-”隔开 ，如 ：.note-container、.note-panel、.note-panel-title等 2、css的id命名 多单词时通常驼峰形式 ，如#userName、#consNo等 3、单词命名 在命名class、id、js变量名等尽量要与当前含义一致的英文单词 ，如果英语不好的话可通过在线翻译网站 查询那就的英文。 推荐 ： 快来查查大神们是怎么命名自己的变量的https//unbug.github.io/codelf 可筛选不同语言的变量名称、可安装成浏览器或IDE的插件实现快速变量翻译 https///unbug/codelf/wiki 三、html声明规范 1. 以 !DOCTYPE html 开始 ，不区分大小写 ，前面不要有任何内容。否则IE将以杂项的文档模式解 析html. 本文档使用 看云 构建 - 4 - 二、前端规范 2. meta charset utf-8 声明文档使用的字符编码。如果是jsp则每个jsp文件顶部都是引用 %@ page language java import java.util.* pageEncoding utf-8% 3、优先使用 IE 必威体育精装版版本或 IE里的Google Chrome Frame插件 meta http-equiv X-UA-Compatible content IE edge,chrome 1 / 4、双核浏览器(如360)使用优先使用Chrome meta name renderer content webkit 四、数据绑定规范 1、不规范用法一 a href javascript:query(userName,1234);查询/a 或 a href javascript:void(0); onclick query(userName,1234)查询/a script window .query(userName,userNo) function(){ alert(userName+userNo); } /script 说明 由于在加载慢等情况下 ，html已加载完成 ，而js里的query函数还没执行到 ，此时点击查询按钮则出 现query函数未定义的错误。 2、不规范用法二 a href javascrip