HTML5+CSS3网页设计基础教程教学课件3.pptx

HTML5+CSS3网页设计基础教程;;单元导读 HTML的标签众多，本章介绍HTML更复杂、使用频率又非常高的几种标签，表格标签、表单标签以及它们的子元素标签。;学习目标 掌握表格标签及其子元素的使用； 掌握表单标签及其子元素的使用；;思政目标 使学生在掌握了表格、表单元素的使用后，利用本章的任务实例使学生对自己的职业生涯有一个美好的畅想和规划，引导学生提升学习兴趣、树立自信、培养学生吃苦耐劳、艰苦奋斗的精神。;第3章 HTML进阶;任务1. 利用table标签制作积分查询表。;!DOCTYPE html html lang=zh-CN head meta charset=UTF-8 title表格/title /head body table width=400 border=1 caption积分查询/caption tr th排名/th th姓名/th th分数/th /tr ;效果如图3-1：;任务分析 1. caption标签表示表格的标题。 2. th标签中的内容会加粗居中显示，表示页眉。 3. width=400表示表格的宽度，border=1表示表格的边框粗细。;任务2. 制作个人简历表格，效果如图3-2：;效果如图3-2：;!DOCTYPE html html lang=zh-CN head meta charset=UTF-8 title跨行跨列表格/title /head body table width=400 border=1 bordercolor=blue align=center caption个人简历/caption tr td width=120 bgcolor=#eeffff姓名/td td width=170赵亮/td td align=center bgcolor=#eeffff照片/td /tr tr td bgcolor=#eeffff出生年月/td td1990-5-5/td td rowspan=2img src=images/boy.png alt=男孩/td /tr ; tr td bgcolor=#eeffff姓别/td td男/td /tr tr td bgcolor=#eeffff专业/td td colspan=2计算机科学与技术/td /tr tr td bgcolor=#eeffff期待行业/td td colspan=2软件编程/td /tr /table /body /html;任务分析 1. 关于表格及其子元素共同具有的属性很多，bordercolor=blue是指边框颜色为蓝色，bgcolor=#eeffff是指背景色为一种淡青色。 2. table标签后的align=center表示整个表格在页面内水平居中显示，td标签后的align=center是指单元格中的内容水居中显示。 3. rowspan=2是指设置了单元格的垂直跨度，在垂直方向上向下跨跃了两行，这样就有了合并单元格的效果，如果上面的一行合并了单元格，相应的下一行，要减少一对td，也就是减少一个单元格。;4. colspan=2，是指设置了单元格的水平跨度，在水平方向上向后跨跃了两列，这样也实现了在水平方向上合并单元格的效果，如果前面合并了单元格，后面也要相应减少一对td，减少一个单元格。;3.2表单元素form（块级元素） 表单在网页当中是一个非常重要的组成部分，它用来收集用户填入的信息并提交给服务器，实现用户与网页的交互，交互的功能需要数据库技术与服务器的支持，本章只介绍表单元素的插入方法和其子元素的属性等，并不能实现交互，交互功能的实现属于动态网页开发技术范围。表单的子元素非常多，如图3-3是一个注册表单的应用实例。;图3-3 注册表单;任务3. 制作用户登录表单，效果如图3-4。;效果如图3-4：;!DOCTYPE html html lang=zh-CN head meta charset=UTF-8 title请登录/title /head body form action= method= h3用户登录/h3 div pimg src=images/notice.gif享优惠！请先登录！！/p p用户名：input type=texta href=# 没有账号？申请/a/p p密码：input type=passworda href=# 忘记密码？找回/a/p