开课啦 Opening

电脑

耐心

阅读

撸码

交流

搜索

框架

思考

教学周	内容
	专题：IDE 环境：Vs Code、Chrome 实操：环境部署和配置关注：利其器善其事拓展：Snipaste
	专题：Web 理论：Project、Html、CSS、JavaScript 结构：<html>、<head>、<body>、<link>、<script>、<style> 选择器：type selector 样式：text-align、color 关注：结构、样式和逻辑三分离实操：Hello world
	专题：Navigation 结构：<a>、<nav>、<p>、<h1>、<div> 选择器：.、#、:target、:hover 样式：text-decoration、margin、padding、scroll-behavior 关注：样式初始化实操：个人网站拓展：<iframe>
	专题：List 结构：<ol> <li>、<ul> <li>、<dl> <dt> <dd>、<footer> 选择器：*、::marker 样式：display、width、line-height 关注：没有规矩，不成方圆实操：友情链接、版权信息拓展：entities
	专题：Table 结构：<table>、<tr>、<th>、<td> 选择器：:nth-child() :first-child() 样式：border-collapse、border、font-weight 关注：与时俱进实操：三线表格、斑马纹表格
	专题：Multimedia 结构：<img>、<figure>、<audio>、<video> 选择器：样式：border-radius、object-fit、text-indent、aspect-ratio 关注：懒加载、安全无小事实操：头像、相册、背景音乐、音乐盒、微课拓展：<picture>、<svg>
	专题：Form 结构：<form>、<input>、<select>、<textarea>、<button> 选择器：::placeholder、:checked、:focus、:valid、~、+、:root 样式：accent-color、appearance、outline 关注：团队合作实操：留言、用户登录、用户注册拓展：<input> - file
	专题：Selectors Type selectors Class selectors ID selectors Universal selector Attribute selectors Pseudo-classes selectors Psepseudo-elements selectors Combinators: descendant combinator、child combinator、next-sibling combinator、 subsequent-sibling combinator 关注：优先级其它：作业讲评实操：定制列表标记（多种实现）、教学评价、标签页、表单综合运用拓展：:root
	专题：Background 样式：background ...、clip-path CSS函数：linear-gradient()、radial-gradient()、conic-gradient() 关注：条条大路通罗马实操：背景图、屏风图、自定义图文目录拓展：border
	专题：Text 结构：<article>、<p>、<h2>、<h3>、<h4> 选择器：::first-line、::first-letter、::selection 样式：@font-face、overflow、white-space、text-overflow 布局：float、columns 关注：文化自信实操：图文混排、古诗欣赏拓展：Iconfont、GoogleFonts、counter
	专题：Layout - Position 定位：relative、absolute、fixed、sticky 层级：z-index 选择器：::before、::after 样式：position、top、right、bottom、left、inset、z-index 关注：父相子绝实操：购物车、返回顶部、吸顶导航、二级导航拓展：float
	专题：Layout - Flex 特点：一维、主轴、交叉轴容器样式：flex、flex-direction、flex-wrap、justify-content、align-items、gap 子项样式：flex-grow、flex-shrink、flex-basis、flex、order 关注：响应式开发实操：带logo主导航、面包屑导航、手风琴、时间轴
	专题：Layout - Grid 特点：二维、多行多列容器样式：grid-template-columns、grid-template-rows、grid-template-areas、grid-area、grid-auto-rows、gap、place-items 子项样式：grid-column、grid-row、grid-area、justify-self、align-self CSS函数：repeat()、minmax() 关注：响应式开发实操：九宫格、万能自适应布局、全站布局、异构布局拓展：Isotope
	专题：Transition 样式：transition-property、 transition-duration、transition-timing-function、 transition-delay 关注：站着巨人的肩膀上实操：导航下划线动画、表单激活拓展：Animate.css、Anime
	专题：Animation 样式：animation-name、animation-duration、animation-timing-function、animation-delay、 animation-iteration-count、animation-direction、animation-fill-mode 关注：站着巨人的肩膀上实操：表单输入、梦幻背景、加载动画拓展：ScrollReveal、GSAP
	专题：Transform 样式：translate、rotate、scale、skew、perspective、transform-style、transform-origin 实操：呼吸灯、3D头像、3D按钮、3D魔方关注：解放思想、创意无限拓展：Vanilla、CSS Variable、CSS Function 其它：作业讲评
	专题：JavaScript JavaScript：var、let、const、data type、operator、statement ... DOM：getElementByXXX()、querySelector()、querySelectorAll() ... BOM：setTimeout()、setInterval()、clearTimeout()、clearInterval() ... API：date、fetch、localStorage ... 实操：模态框、换肤、代办事项、轮播图、数字时钟关注：前后端交互拓展：Swiper、Axios、Json-Server
	专题：Project 总结：课程总结开发：毕业项目开发关注：团队合作
	专题：Project 答辩：小组答辩讲评：项目讲评关注：学无止境其它：完善项目；提交项目和实验报告

教学周

内容

专题：IDE
环境：Vs Code、Chrome
实操：环境部署和配置
关注：利其器善其事
拓展：Snipaste

专题：Web
理论：Project、Html、CSS、JavaScript
结构：<html>、<head>、<body>、<link>、<script>、<style>
选择器：type selector
样式：text-align、color
关注：结构、样式和逻辑三分离
实操：Hello world

专题：Navigation
结构：<a>、<nav>、<p>、<h1>、<div>
选择器：.、#、:target、:hover
样式：text-decoration、margin、padding、scroll-behavior
关注：样式初始化
实操：个人网站
拓展：<iframe>

专题：List
结构：<ol> <li>、<ul> <li>、<dl> <dt> <dd>、<footer>
选择器：*、::marker
样式：display、width、line-height
关注：没有规矩，不成方圆
实操：友情链接、版权信息
拓展：entities

专题：Table
结构：<table>、<tr>、<th>、<td>
选择器：:nth-child() :first-child()
样式：border-collapse、border、font-weight
关注：与时俱进
实操：三线表格、斑马纹表格

专题：Multimedia
结构：<img>、<figure>、<audio>、<video>
选择器：
样式：border-radius、object-fit、text-indent、aspect-ratio
关注：懒加载、安全无小事
实操：头像、相册、背景音乐、音乐盒、微课
拓展：<picture>、<svg>

专题：Form
结构：<form>、<input>、<select>、<textarea>、<button>
选择器：::placeholder、:checked、:focus、:valid、~、+、:root
样式：accent-color、appearance、outline
关注：团队合作
实操：留言、用户登录、用户注册
拓展：<input> - file

专题：Selectors
Type selectors
Class selectors
ID selectors
Universal selector
Attribute selectors
Pseudo-classes selectors
Psepseudo-elements selectors
Combinators: descendant combinator、child combinator、next-sibling combinator、 subsequent-sibling combinator
关注：优先级
其它：作业讲评
实操：定制列表标记（多种实现）、教学评价、标签页、表单综合运用
拓展：:root

专题：Background
样式：background ...、clip-path
CSS函数：linear-gradient()、radial-gradient()、conic-gradient()
关注：条条大路通罗马
实操：背景图、屏风图、自定义图文目录
拓展：border

专题：Text
结构：<article>、<p>、<h2>、<h3>、<h4>
选择器：::first-line、::first-letter、::selection
样式：@font-face、overflow、white-space、text-overflow
布局：float、columns
关注：文化自信
实操：图文混排、古诗欣赏
拓展：Iconfont、GoogleFonts、counter

专题：Layout - Position
定位：relative、absolute、fixed、sticky
层级：z-index
选择器：::before、::after
样式：position、top、right、bottom、left、inset、z-index
关注：父相子绝
实操：购物车、返回顶部、吸顶导航、二级导航
拓展：float

专题：Layout - Flex
特点：一维、主轴、交叉轴
容器样式：flex、flex-direction、flex-wrap、justify-content、align-items、gap
子项样式：flex-grow、flex-shrink、flex-basis、flex、order
关注：响应式开发
实操：带logo主导航、面包屑导航、手风琴、时间轴

专题：Layout - Grid
特点：二维、多行多列
容器样式：grid-template-columns、grid-template-rows、grid-template-areas、grid-area、grid-auto-rows、gap、place-items
子项样式：grid-column、grid-row、grid-area、justify-self、align-self
CSS函数：repeat()、minmax()
关注：响应式开发
实操：九宫格、万能自适应布局、全站布局、异构布局
拓展：Isotope

专题：Transition
样式：transition-property、 transition-duration、transition-timing-function、 transition-delay
关注：站着巨人的肩膀上
实操：导航下划线动画、表单激活
拓展：Animate.css、Anime

专题：Animation
样式：animation-name、animation-duration、animation-timing-function、animation-delay、 animation-iteration-count、animation-direction、animation-fill-mode
关注：站着巨人的肩膀上
实操：表单输入、梦幻背景、加载动画
拓展：ScrollReveal、GSAP

专题：Transform
样式：translate、rotate、scale、skew、perspective、transform-style、transform-origin
实操：呼吸灯、3D头像、3D按钮、3D魔方
关注：解放思想、创意无限
拓展：Vanilla、CSS Variable、CSS Function
其它：作业讲评

专题：JavaScript
JavaScript：var、let、const、data type、operator、statement ...
DOM：getElementByXXX()、querySelector()、querySelectorAll() ...
BOM：setTimeout()、setInterval()、clearTimeout()、clearInterval() ...
API：date、fetch、localStorage ...
实操：模态框、换肤、代办事项、轮播图、数字时钟
关注：前后端交互
拓展：Swiper、Axios、Json-Server

专题：Project
总结：课程总结
开发：毕业项目开发
关注：团队合作

专题：Project
答辩：小组答辩
讲评：项目讲评
关注：学无止境
其它：完善项目；提交项目和实验报告

评分表

组号

成员

综合10

结构20

样式40

逻辑10

模块20

选做10

得分