《网页设计与 Web 前端开发》教案 第4周 HTML常用标签（3.5-3.9节）

《网页设计与Web前端开发》电子教案（第4周）一、教学基本信息​​课程名称​​：网页设计与Web前端开发​​教学课时​​：理论2学时+实践1学时​​授课对象​​：计算机相关专业学生/Web前端开发初学者​​教材章节​​：第3章HTML常用标签（3.5-3.9节）二、教学目标（一）知识目标掌握CSS常用属性（背景、字体、文本、鼠标属性）的用法。理解并应用高级选择器（子元素、相邻元素、属性选择器、伪类/伪元素）。掌握CSS样式的继承规则与选择器优先级计算方法。熟练使用CSS3新增属性（圆角、阴影、溢出控制、可见性）。能够综合运用上述知识优化网页样式，解决实际布局问题。（二）思政目标通过规范使用CSS属性和选择器，培养代码编写的标准化意识。结合优先级计算和样式继承，培养逻辑推理能力和严谨的思维习惯。利用CSS3属性实现丰富效果，激发创新意识，同时理解技术迭代的必然性。三、教学重难点（一）教学重点文本属性（text-indent、text-align、letter-spacing）和字体属性（font-family、font-size）的应用。高级选择器（伪类:hover、伪元素::before）的实际场景应用。CSS3属性（border-radius、box-shadow、text-shadow）的用法。选择器优先级规则（id>类>标签）及!important的慎用。（二）教学难点外边距合并现象的识别与解决方案。伪类与伪元素的区别及嵌套使用（如div:hover::after）。CSS3属性的浏览器兼容性处理（如前缀-webkit-、-moz-）。综合案例中样式冲突的调试与优先级调整。四、教学方法案例驱动法：以“环保小站”网页美化为例，贯穿CSS属性和选择器的应用。对比演示法：对比不同属性值的效果（如text-shadow的模糊半径差异），强化理解。小组讨论法：针对优先级计算和外边距合并问题，组织学生讨论解决方案。实践操作法：通过“个人网站样式优化”任务，巩固所学知识。五、教学过程（一）第一学时：CSS常用属性与高级选择器（40分钟）导入（5分钟）展示未美化的“环保小站”页面，提问：“如何通过CSS让文本更易读、布局更美观？”引出本节重点：CSS常用属性（文本、字体、背景）与高级选择器。CSS常用属性（15分钟）文本属性：text-indent:2em：段落首行缩进2字符。letter-spacing:2px：汉字间距调整（适合标题美化）。text-overflow:ellipsis：溢出文本显示省略号（需配合white-space:nowrap和overflow:hidden）。字体属性：font-family:"MicrosoftYaHei",sans-serif：优先使用微软雅黑，兼容无该字体的设备。line-height:1.5：行高为字号的1.5倍，提升可读性。背景属性：background-image:url("bg.png")：设置背景图，结合background-repeat:no-repeat控制重复方式。精灵图技术：通过background-position:-20px-30px定位小图标，减少服务器请求（例3-26）。高级选择器（20分钟）伪类选择器：a:hover：鼠标悬停时改变链接样式。input:focus：输入框获焦时高亮边框。伪元素选择器：p::first-letter：段落首字母放大（例3-29）。div::before：在元素前插入内容（如添加图标）。属性选择器：[type="text"]：选择所有文本输入框。[class^="btn"]：选择class以“btn”开头的元素。（二）第二学时：CSS继承、优先级与CSS3属性（40分钟）复习导入（5分钟）代码辨析：判断以下样式的生效结果，引出优先级规则：结论：!important

>

id

>类>标签。CSS继承与优先级（15分钟）继承规则：文本和字体属性可继承（如color、font-size），边框和边距不可继承（例3-31）。优先级计算：基础规则：id(100)

>类(10)>标签(1)>通配符(0)。复合选择器：叠加计算（如div.nav#link优先级为100+10+1=111）。注意事项：避免滥用!important，优先通过调整选择器精度解决冲突。CSS3新增属性（20分钟）圆角边框：border-radius:10px（圆形需border-radius:50%）。阴影效果：box-shadow:2px2px5px#ccc：盒子阴影（例3-38）。text-shadow:1px1px2px#f00：文本阴影（例3-39）。溢出控制：overflow:hidden隐藏溢出内容，overflow-y:auto垂直滚动（例3-40）。可见性：visibility:hidden（保留位置）与display:none（不保留位置）的区别（例3-41）。（三）实践学时：综合案例实战（40分钟）任务布置（5分钟）目标：优化“个人站点”页面样式，要求：使用外部样式表统一设置文本（font-family:"SimSun"）和背景（background:#f5f5f5）。为文章标题添加伪元素::before（红色方块图标）和text-shadow。用border-radius美化头像（圆形）和按钮（圆角）。实现导航栏hover效果（背景色变化+下划线）。学生实践（30分钟）教师巡回指导，重点解决：伪元素与父元素的垂直对齐（vertical-align: