Web前端开发基础 课件 项目二 HTML5基础知识.pptx

项目二HTML5基础知识

【知识点】1.掌握HTML5页面新增的结构元素、分组元素、页面交互元素、文本层次语义化元素、全局属性等2.掌握HTML5中表单的使用3.掌握HTML5中多媒体元素的使用【技能点】1.能使用HTML5语义化元素构建页面主体结构2.能使用HTML5新增全局属性、页面增强元素、表单等制作静态网页3.能使用HTML5多媒体元素在网页中播放音频和视频4.能使用HTML5新特性制作移动端静态网页课程目标【素质目标】1．培养学生的创造力和实践能力2．培养学生的网络检索能力，学会查找文档和资源，提升问题解决能力。3．培养学生的自学能力，不断扩充和深化专业知识。

目录ContentsHTML5新增页面结构HTML5与新增全局属性HTML5页面增强元素表单0102030405多媒体标签

2.1HTML5新增页面结构 新增结构元素元素1.header元素用来定义网页或文档的头部区域。通常用来放置整个页面或页面内的一个内容区块的标题，也可以包含其他内容，例如logo图片、搜索表单、导航条等等。2.footer元素用来定义网页或文档的脚部区域。通常包含版权信息、文档作者、使用条款链接等等。3.nav元素用来定义页面导航。导航条样式较多，常见的有顶部导航、侧边导航、底部导航4.section元素用来对网页或文档上的内容进行分块，一个section元素通常由内容及其标题组成，但section元素并非一个普通的容器元素，当一个容器需要直接定义样式或通过脚本定义行为的时候，最好使用div而不要使用section。5.article元素用于定义文档内的文章，可以是一篇帖子、一篇博文、一条用户评论，也可以是一篇新闻报道。article元素是可以嵌套使用的，内层的内容在原则上需要与外层的内容相关联。6.aside元素aside元素代表跟文档的主内容区相关，但它又独立于主内容区，并且可以被单独拆分出来，而不会对整体内容产生影响。aside通常表现为侧边栏、说明、提示、引用、附加注释、广告等。

技能训练2-12.1HTML5新增页面结构【方法步骤】1、打开HBuilderX,新建项目chapter2，新建html文件，命名为ex2-1.html2、编写HTML代码!DOCTYPEhtmlhtml head metahttp-equiv=content-typecontent=text/html;charset=utf-8 metaname=descriptioncontent=从榜样的故事中汲取前进的能量/ titleHTML5页面结构元素/title /head body header h1身边的榜样/h1 /header nav ul li首页/li li榜样事迹/li li榜样风采/li /ul /nav

技能训练2-12.1HTML5新增页面结构article header h2可亲可敬可学的好榜样/h2 /header p 李华是一位计算机专业的大学生。在校期间他学业上表现优秀，认真学习，经常向老师请教问题，不断追求知识的深度和广度。他的努力和才华得到了老师的赏识，经常积极参加省市级各项竞赛，取得了不俗的成绩。除了学业上的优秀表现，李华还是一位热心公益的大学生。他组织了一支志愿者团队，定期去孤儿院和敬老院开展志愿服务，为需要帮助的人提供援助和关爱。李华还积极参与社会实践，他利用寒暑假的时间去不同的企事业单位实习，锻炼自己的实践能力和职业素养。他在实习期间，不仅完成了各项任务，还通过自己的努力和创新，给企业带来了新的思路和发展机会。他的表现得到了企业的认可和赞赏，多次获得实习单位的优秀员工奖。李华的行为和品质不仅赢得了同学们的尊敬和喜爱，还受到了校园领导的肯定和表彰。他被评为“优秀学生干部”和“优秀共青团员”，成为了校园里的榜样人物。 /p section h2评论/h2article h3评论者：A/h3 p时代造就英雄，向李华同学致敬！/p /articleh2评论/h2

技能训练2-12.1HTML5新增页面结构 article h3评论者：B/h3 p李华同学是一位全面发展、乐于助人的大学生榜样。/p /article /section /article aside友情链接/aside footer版权所有/footer /body/html3、运行效果如下图