网页设计与制作（HTML5 CSS3 JavaScript）（第5版）（微课版） 教案 全套1--9 第1章 HTML基础--第9章 JavaScript提高（6学时）.docx
PAGE
PAGE1
第1课HTML基础（3学时）
本章内容：
师生互相认识
学习要求
课程简介
开发环境
创建网页（HTML标记符和网页的基本结构）
综合实例与作业（个人简历）
1、师生互相认识
通过作业（简历）自我介绍
2、学习要求
不允许缺勤。（如有特殊原因缺勤，必须自行课后找老师和同学补上当次课的内容，并按要求完成作业。）严禁干扰他人学习。
上课携带电脑、电源线和插座。携带教材和参考书。
严格按照教师要求完成所有教学活动，包括：听课、现场操作、课堂讨论与问答、课后作业、自学等。
3、课程简介
一句话简介：针对初学者的前端开发课，主要学习如何使用前端开发技术进行网页设计，最主要的内容是：HTML、CSS和JavaScript。
学习方法：动手开发，动手开发，动手开发。具体而言，跟上教师进度，完成课上练习和课后作业。学有余力的同学，做personalproject或groupproject。
学习资源：乐学，教材，参考书，教学视频（Youtube/B站），DeepSeek/ChatGPT
4、前端开发环境的安装和使用
安装VSCode和相关插件
使用DeepSeek搜索：1）如何使用VSCode进行前端开发；2）需要哪些插件
编写第一个网页：HelloWorld
V1.0：不用任何标记符，直接存成.html文件，在浏览器中预览
5、创建网页（HelloWorld）
V2.0：用p标记符
V3.0：用h1标记符
V4.0：结构完整的HelloWorld，讲解网页的结构，讲解标记符、属性的概念和用法
V5.0：加入CSS，提出响应式的概念。
!DOCTYPEhtml
html
head
title炫酷HelloWorld/title
style
body{
margin:0;
padding:0;
height:100vh;
background:linear-gradient(135deg,#ff9a9e,#fad0c4);
text-align:center;/*文字水平居中*/
font-family:Arial,sans-serif;
}
h1{
position:relative;/*相对定位*/
top:50%;/*从上到下50%的位置*/
transform:translateY(-50%);/*向上偏移自身高度的50%*/
font-size:48px;
color:white;
text-shadow:2px2px4pxrgba(0,0,0,0.3);
animation:float3sease-in-outinfinite;
}
@keyframesfloat{
0%,100%{
transform:translateY(-50%);/*保持居中*/
}
50%{
transform:translateY(-60%);/*向上浮动*/
}
}
/style
/head
body
h1HelloWorld!/h1
/body
/html
V6.0：加入JS，提出Web标准的概念（教材p5）
!DOCTYPEhtml
html
head
title炫酷HelloWorld/title
style
body{
margin:0;
padding:0;
height:100vh;
background:linear-gradient(135deg,#ff9a9e,#fad0c4);
text-align:center;/*文字水平居中*/
font-family:Arial,sans-serif;
cursor:pointer;/*鼠标指针变为手型*/