web培训课课程计划

第一周:

第一次课:

1、各种介绍:

自我介绍
课程介绍
合作伙伴介绍

2、学web能干什么:

工程师

前端工程师
后端工程师
UI设计师

微信

小程序
小游戏
公共号

web

Web应用
Web游戏
安卓
IOS
物联网

人工智能AI
Node-JS后端

3、IT世界的常识

web

什么是前端/后端
什么是服务器
什么是接口

4、网络工程与信息安全

HTTP与网络传输

通信原理
通信过程

网络信息安全

信息泄露
欺骗
分布式攻击

5、什么是开源软件

Git Hub
框架与库
996.ICU

第二次课:

1、网页结构

网页的格式HTML
HTML概念
Hello World

使用text创建一个HTML
Hello World

真实的网页
标签

网页标签<h1>

网页标签规范html,head,body

2、编译器

为什么要用编辑器
展示几款编辑器

HBuilder-X
安装教程

使用方法

3、基础标签

html
head
title
body
h1-h5
p
em
br
b
<!—->

4、表格与列表

标签嵌套
列表

ul
li
ol

表格

table
th
tr
td

5、标签属性

a

href

img

src
height
width

video

input

第二周:

第一次课:

1、style属性与css

元素的style属性
css
样式表
style标签
基础语法

2、css选择器

标签选择
class选择
id选择
属性选择

3、css样式

css单位

PX
%
em

css尺寸

width
height

css色彩格式

rgb
rgba
16进制

背景

background-color

文字

text-align
color
font-size
font-family
text-indent
word-spacing

4、外部样式

link标签

只能放在head里
href属性
type属性
rel属性

css文件
路径

相对路径
绝对路径

浏览器缓存机制

5、css高级语法

auto
高级选择器

组选择器
通配符
组合选择器
更复杂的选择器

有趣的属性

opacity
border-radius
box-shadow

第二次课:

1、框模型div

css框模型
div标签
padding
border

style
color

margin

2、css定位

position属性

static
relative
absolute
fixed

相对定位relative

top
bottom
left
right

绝对定位absolute

top
bottom
left
right

3、css浮动

float属性

排列布局

4、css布局

display属性

none
block

flex布局

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

5、高级部分

块级标签与行内标签

span标签
inline
inline-block

外边距合并特性
box-sizing
更高级的gird布局

太难了讲不了

第三周:

第一次课:

1、css3

svg
css3

概念
历史

css3新特性

选择器
框模型
背景和边框
文本效果
2D/3D 转换
动画

2、动画

@keyframes
animation
from
to
0%-100%

3、伪类伪元素

元素的状态

鼠标悬浮状态
点击状态

伪类

:hover

伪元素

:before
:after
content属性

伪元素选择器

:first-child
:last-child
:nth-child()
:nth-last-child()

4、网页自适应

meta标签

viewport

不用绝对宽度

流体布局

不用绝对字体大小

em
rem

选择加载CSS

link的media属性

@media screen

手动自适应矫正

5、javascript

编程语言
动态修改网页

document.getElementById

第二次课:

项目实战
网页制作
域名解析
网站部署
框架与库