Web前端课程
阶段 | 课程 | 内容 | 知识点 | 备注 | 课时&学习目标 |
Web前端 | 12 | ||||
认识Windows | 2 | ||||
一、windows概述 | |||||
1、桌面(图标和文字) | |||||
2、任务栏 | |||||
3、快捷键 | |||||
4、练习打字 | 1)使用金山打字软件 2)养成正确的指法 3)每分钟要达到100个英文字母的水平 | ||||
二、浏览器概述 | |||||
1、什么是浏览器 | |||||
2、什么是服务器(弱化) | |||||
3、什么是前端工程师,什么是后台工程师以及什么是全栈工程师 | |||||
4、浏览器种类和浏览器内核 | |||||
HTML | |||||
一、HTML概述 | |||||
1、html名词解释 | 熟悉标签的语义化 会看w3c文档 会使用常用的html标签 打字速度练到每分钟100个英文字母 | ||||
2、html作用:语义化 | 1)SEO 2)什么是语义化 | ||||
3、w3c文档 | 1)作用 2)用法 | ||||
4、html注释 | 1)使用注意点 2)作用 3)写法 | ||||
二、HTML标签 | |||||
1、h系列 | h1~h6 | ||||
2、p标签 | |||||
3、文本标签 | 1)b 2)u 3)i 4)s 5)em 6)ins 7)del 8)strong | ||||
4、hr标签 | |||||
5、br标签 | |||||
6、img标签 | 1)属性 alt、src、title 2)相对路径与绝对路径 | ||||
7、a标签 | 1)属性 targte、title、src 2)base标签 | ||||
8、结构标签的含义 | 1) DOCTYPE 2)head 3)title 4)meta 5)body | ||||
9、table标签 | table,tr,td,th | ||||
10、列表标签 | 1)有序 ol,li 2)无序 ul,li 3)自定义 dl,dt,dd | ||||
11、框架标签 | frameset,frame,iframe | ||||
10、表单表单 | form,input,select,option,textarea,button | ||||
三、前端开发工具概述 | |||||
1、记事本 | 1)创建文件 2)修改后缀 3)使用记事本编辑 4)使用浏览器打开 | ||||
2、使用sublime text3开发工具 | 1)安装 2)创建文本 3)生成结构代码 4)书写html代码 5)在浏览器中查看效果 | ||||
3、前端开发神器Emmet插件详解 | |||||
四、HTML空格合并现象 | |||||
五、特殊字符 | |||||
六、SEO | |||||
1、花钱买排名 | |||||
2、广发外链 | |||||
3、页面的静态化 | |||||
4、标签的语义化 | 1)语义化是指用合理HTML标记以及其特有的属性去格式化文档内容 2)判断页面语义化程度,让页面“裸奔”(去掉css) 3)在合适的地方用合适的标签 4)标签语义化的意义 | ||||
七、没有语义的标签 | |||||
1、div | 1)如果不设置宽页面上默认占一行 2)在页面上单独占一行 | ||||
2、span | 1)显示大小由内容来决定 2)一行可以放多个 | ||||
CSS | 7 | ||||
一、CSS概述 | |||||
1、css名词解释 | |||||
2、css总结:美化页面 | |||||
3、css结构 | |||||
4、w3c文档 | |||||
5、css注释 | 1)写法 2)作用 3)使用注意点 | ||||
二、CSS属性 | |||||
1、color文本颜色 | 1)英文 2)十六进制表示法 3)RGB(0,0,0) | ||||
2、font-style文本样式 | 1)nomal 2)italic 3)oblique | ||||
3、font-weight文本数细 | 1)100-900 2)normal:正常的 3)bold:加粗 4)bolder:超粗 5)lighter:超细 | ||||
4、font-family字体 | 1)宋体 2)微软雅黑 | ||||
5、font-size字体大小 | |||||
6、连写形式 | font: font-style , font-weight , font-szie/line-height , font-family | ||||
7、宽高属性 | 1)width 2)height | ||||
8、背景属性 | background | ||||
三、CSS样式的类型 | |||||
1、内联样式(行内样式) | |||||
2、内部样式(嵌套样式) | |||||
3、外联样式 | 外联的请求过程(单独开一个线程去请求) | ||||
四、CSS选择器 | |||||
1、基本选择器 | 1)标签 2)类选择器 3)id选择器 4)通配符(由于在使用的时候浏览器会将所有的元素都进行渲染,影响效率) 5)注意 01类选择器和id选择都应该有类名或者id名 02类名可以有多个并且可以给多个不同标签设置 03id名只能有一个,并且只能给一个标签设置 04命名规则:只能是英文,数字,下划线,连字符,数字以及连字符加数字不能作为放在名称开头,并且字母区分大小写 | ||||
2、组合选择器 | 1)后代选择器 2)子元素选择 3)交集选择器 4)并集选择器 | ||||
3、其它选择器 | http://www.eruiyi.cn/webblog/archive/2009/07/07/1518274.html | ||||
五、CSS背景 | |||||
1、background-repeat | |||||
2、background-image | |||||
3、background-color | |||||
4、background-position | 1)特殊方位名词 水平方向(left/center/right) 垂直方向(center/bottom/top) 2)具体的数值 先x轴再y轴 | ||||
5、background-attachment | 1)固定:fixed 2)滑动:scroll | ||||
6、背景相关案例 | |||||
六、元素的显示模式 | |||||
1、块级元素 | |||||
2、行内元素 | |||||
3、行内块级元素 | |||||
4、模式切换:display | 1)block 2)inline 3)inline-block | ||||
六、CSS伪类 | |||||
1、连接样式link | |||||
2、访问过visited | |||||
3、鼠标经过hover | |||||
4、点击时active | |||||
5、补充:fouce(在input中使用) | |||||
七、综合案例:五彩导航栏 | |||||
八、字体相关属性 | |||||
1、text-align | left、right、center | ||||
2、text-decoration | none、underline、overline、line-through | ||||
3、text-indent | |||||
4、案例 | |||||
九、三种居中方式 | |||||
1、水平居中 | text-aline:center | ||||
2、垂直居中 | line-height:height | ||||
3、div的居中 | margin: 0 auto | ||||
十、行高 | |||||
1、了解浏览器的默认值 | 字体大小、行高 | ||||
2、行高的组成 | |||||
3、文本默认的几条线 | |||||
4、行高是可以继承的 | |||||
5、应用 | 行高等于容器的高度,文字可以居中 | ||||
6、单位 | 像数、百分号、em、不带单位 | ||||
十一、三大特性 | |||||
1、继承性 | 1)a标签的颜色 2)h系列的标签字体大小 | ||||
2、层叠性 | 1)一个标签具有多个类名,它们也会发生层叠 2)相同选择器设置不同样式,后面层叠前面 | ||||
3、优先级 | 1)!important>id>类>标签>通配符>继承>默认 2)权重 01当id,类,标签混合在一起比较优先级的时候,就要考虑到权重了 02计算公式:(0,0,0,0) 第4个0:标签 第3个0:类 第2个0:id 第1个0:内联样式 | ||||
十二、盒子模型 | |||||
1、了解盒子模型 | |||||
2、border-color | 1)border-top-color 2)border-right-color 3)border-bottom-color 4)borer-left-color | ||||
3、border-width | 1)border-top-width 2)border-right-width 3)border-bottom-width 4)borer-left-width | ||||
4、border-style | 1)border-top-style 2)border-right-style 3)border-bottom-style 4)borer-left-style | ||||
5、连写 | |||||
6、应用 | 1)给盒子设置边框 2)给表格设置边框 3)四彩边框盒子 | ||||
十二、padding | |||||
1、padding四种设置方式 | 1)padding:10px 20px 30px 40px 2)padding:10px 20px 30px 3)padding:10px 20px 4)padding:10px | ||||
2、padding单个设置 | 1)padding-top 2)padding-right 3)padding-bottom 4)padding-left | ||||
3、应用 | 计算盒子的宽高 大盒子中的小盒子居中 | ||||
4、padding对盒子的大小影响 | padding会改变盒子的大小 padding不会改变盒子的大小 | ||||
十三、margin | |||||
1、margin四种设置方式 | 1)margin:10px 20px 30px 40px 2)margin:10px 20px 30px 3)margin:10px 20px 4)margin:10px | ||||
2、margin单个设置 | 1)margin-top 2)margin-right 3)margin-bottom 4)margin-left | ||||
3、应用 | 让div居中 margin:0 auto 大盒子中的小盒子居中 | ||||
4、注意点 | 边框合并现象: 1)上margin与下margin合并 2)margin的塌陷现象 | ||||
十四、PS | |||||
1、ps工具作用 | |||||
2、ps常用工具的使用 | |||||
3、ps制作小图标 | |||||
4、ps切图测量 | |||||
5、使用ps加盒子模型完成案例 | |||||
十五、外边距合并 | |||||
1、同级的外边距合并 | |||||
2、父子极关系的外边距合并 | |||||
十六、浮动 | |||||
1、问题:如何在一行中显示两个div一个靠左,一个靠右 | |||||
2、浮动的初体验 | |||||
3、文档流(标准流) | 浮动是脱离标准流的 | ||||
4、浮动的代码 | |||||
5、浮动的特点 | 1)浮动找浮动 2)浮动会默认对齐 3)浮动会当前元素所在的位置浮动 4)left和right的关系 5)浮动会自动转换元素类型inline-block 6)文字会给浮动让位-文字围绕图片 | ||||
6、浮动的应用 | 1)布局 2)文字导航 3)小应用:网站的头部 | ||||
7、清除浮动 | 1)加上一个div使用clear:both 2)在父容器中使用overflow:hidden属性 3)使用现在最流行的方式 4)使用双伪元素清除 5)***直接设置高度 | ||||
十七、定位 | |||||
1、静态static | 标准文档流 | ||||
2、绝对定位absolute(看脸型) | 1)没有父元素,以body的左上角 2)有父元素 01但是父元素没有定位,还是以body的左上角 02并且父元素有定位,以父元素的左上角 | ||||
3、相对定位relative(想当年型) | 相对于它原来文档流的位置 | ||||
4、定位的应用 | 一般用来定位(子绝父相) | ||||
5、固定定位fixed(死心眼型) | |||||
6、老淘宝三解的制作 | |||||
十八、overflow | |||||
1、scroll | |||||
2、visible | |||||
3、auto | |||||
4、hidden | |||||
十九、内容的隐藏方式 | |||||
1、overflow | |||||
2、display | |||||
3、visibility | |||||
二十、规避脱标流 | |||||
1、盒子居中 | margin: 0 auto | ||||
2、图片居中 | vertical-aline:middle | ||||
二十一、CSS相关案例 | |||||
1、滑动门 | |||||
2、精灵图(雪碧图) | |||||
3、CSS初始化 | |||||
4、透明度 | opcity:0.5 filter:Alpha(opacity=50);/* 只支持IE6、7、8、9 */ | ||||
二十二、CSS项目 | |||||
Javascript | |||||
一、Javascript概述 | |||||
1、名词解释 | |||||
2、js发展历史 | |||||
二、Javascript注意点 | |||||
1、代码的执行过程 | |||||
2、书写位置 | |||||
3、语法规则 | 1)javascript与html,css一样,对空换行,以及缩进是不敏感的 2)如果代码末尾不加分号,必须换行 3)每条语句在结束的时候最好使用“;”,并且换行 | ||||
4、注释 | 1)单行注释 2)多行注释 | ||||
三、三句话 | |||||
1、alert("我是alert"); | 在弹出这个选项的时候页面不能拖动 | ||||
2、console.log("我是console.log"); | |||||
3、prompt("请输入你此时你心中的想法"); | |||||
四、直接量 | |||||
五、数据类型 | |||||
1、string类型 | 1)就是由字符组成的串 2)字符的串都是用双引号或者单引号 3)字符转义 \n:换行 \t:缩进 \b:空格 \r:回车 \\:斜杠 \':单引号 \":双引号 4)特殊 ""/" | ||||
2、number类型 | 用来表示数值 整数 正数 负数 小数 NaN(not a number)(运算出错出现的数据格式) 判断NaN:isNaN | ||||
3、加号 | 两个数值之间是相加 只要有一个字符就是相连 | ||||
4、typeof | typeof(变量/直接量) typeof 变量/直接量 | ||||
5、变量 | 作用、声明、赋值、赋值运算符、连写、命名规则、类型、变量之间可以相互赋值、变量与字符串一起输出 | ||||
6、数据类型详解 | string、nubmer、boolean、undefined | ||||
六、运算符 | |||||
1、算术运算符 | |||||
2、逻辑运算符 | |||||
3、比较运算符 | |||||
4、赋值运算符 | |||||
5、逗号运算符 | |||||
6、自增与自减运算符 | |||||
7、三元运算符 | |||||
七、使用开发人员工具查看Javascript错误 | |||||
八、数据的类型转换 | |||||
1、显示转换 | 1)转数字 Number()/parseInt()/parse 2)转字符串 String()/.toString() 3)转Boolean类型 false、”"(空字符串)、0、NaN、null、undefined,其余任何值都会被转换为true | ||||
2、隐式转换 | var b = +a;//相当于b=Number(a); var b = !!a;//相当于b=Boolean(a); var b = a + "";//String(a) | ||||
九、流程控制 | |||||
1、顺序结构 | |||||
2、选择结构 | 1)if结构 2)switch...case...结构 | ||||
3、循环结构 | 1) for循环 2)while循环 3)do...while循环 4)continue与break | ||||
京东项目 |
发表评论 取消回复