Web前端课程

阶段课程内容知识点备注课时&学习目标
Web前端12

认识Windows2


一、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、div1)如果不设置宽页面上默认占一行
2)在页面上单独占一行




2、span1)显示大小由内容来决定
2)一行可以放多个


CSS7


一、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-position1)特殊方位名词
水平方向(left/center/right)
垂直方向(center/bottom/top)
2)具体的数值
先x轴再y轴




5、background-attachment1)固定:fixed
2)滑动:scroll




6、背景相关案例



六、元素的显示模式



1、块级元素




2、行内元素




3、行内块级元素




4、模式切换:display1)block
2)inline
3)inline-block



六、CSS伪类



1、连接样式link




2、访问过visited




3、鼠标经过hover




4、点击时active




5、补充:fouce(在input中使用)



七、综合案例:五彩导航栏


八、字体相关属性



1、text-alignleft、right、center



2、text-decorationnone、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-color1)border-top-color
2)border-right-color
3)border-bottom-color
4)borer-left-color




3、border-width1)border-top-width
2)border-right-width
3)border-bottom-width
4)borer-left-width




4、border-style1)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、typeoftypeof(变量/直接量)
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


京东项目


点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

热门产品

历史上的今天:03月29日

热门专题

自考本科|自考本科有用吗,自考文凭,自考本科文凭,自考文凭有用吗,自考本科文凭有用吗,自考文凭承认吗
自考本科
金诺幼儿园(春城路金诺幼儿园)|昆明官渡区幼儿园,幼儿园报名,官渡区幼儿园,春城路幼儿园,幼儿园招生,学前班,昆明幼儿园,金诺幼儿园,环城南路幼儿园,石井路幼儿园
金诺幼儿园(春城路金诺幼儿园)
云南巨榕教育投资集团有限公司|云南巨榕教育投资集团有限公司,巨榕教育集团,巨榕教育
云南巨榕教育投资集团有限公司
中源管业|中源管业,中源管业公司,中源管业有限公司,中源管业电话,中源管业地址,中源管业电力管,中源管业mpp电力管,中源管业cpvc电力管,中源管业pe穿线管
中源管业
云南开放大学|云南开放大学报名,云南开放大学报考,云南开放大学,什么是云南开放大学,云南开放大学学历,云南开放大学学费,云南开放大学报名条件,云南开放大学报名时间,云南开放大学学历,云南开放大学专业
云南开放大学
一年制中专|中专学历,中专是什么学历,中专是什么,中专有什么专业,中专升大专,一年制中专
一年制中专
APP开发|app开发_app开发公司_app软件开发_专业app开发_云南app开发公司_app定制_原生app开发定制
APP开发
综合高中|云南综合高中,昆明综合高中,综合高中能考本一吗,综合高中和普通高中的区别,综合高中是什么意思,综合高中能参加全国统一高考吗,综合高中可以考哪些大学,综合高中的学籍是什么
综合高中

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部