任务3-运用HTML5的新标签课件.pptx
- 【下载声明】
1. 本站全部试题类文档,若标题没写含答案,则无答案;标题注明含答案的文档,主观题也可能无答案。请谨慎下单,一旦售出,不予退换。
2. 本站全部PPT文档均不含视频和音频,PPT中出现的音频或视频标识(或文字)仅表示流程,实际无音频或视频文件。请谨慎下单,一旦售出,不予退换。
3. 本页资料《任务3-运用HTML5的新标签课件.pptx》由用户(晟晟文业)主动上传,其收益全归该用户。163文库仅提供信息存储空间,仅对该用户上传内容的表现方式做保护处理,对上传内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(点击联系客服),我们立即给予删除!
4. 请根据预览情况,自愿下载本文。本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
5. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007及以上版本和PDF阅读器,压缩文件请下载最新的WinRAR软件解压。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 任务 运用 HTML5 标签 课件
- 资源描述:
-
1、任务3:运用HTML5的新标签网页设计与制作(HTML+CSS+Javascript)网页设计与制作课程组目标TARGET知识目标 了解HTML5新标签;掌握结构性标签;掌握级块标签;掌握页面交互标签;掌握行内语义性标签;掌握HTML5的全局属性。1 任务描述 2 结构性标签 3 分组标签 4 页面交互标签 5 行内语义性标签 7 综合实例 8 任务实施 9 任务拓展 6 HTML5的全局属性1任务描述Part使用HTML5新标签优化网页 依据草图实现基本的HTML只是实现前端页面的一小步,HTML5 中所有的标签都是有结构性的。本任务就是使用HTML5新标签来优化门户网站主页的页面文档。任务
2、描述:使用HTML5新标签优化网页2HTML5结构性标签PartHTML5结构性标签section标签nav标签article标签aside标签header标签footer标签1 认知结构性标签传统DIV+CSS布局HTML5结构标签 结构性标签其实就是语义化的html网页框架。结构性标签,标签本质上和div没有任何区别。借助id与class,通过CSS样式来实现页面布局,没有标准的规范,搜索引擎只能去猜测某部分的功能,文档结构和内容不够清晰。http:/ section标签定义和用法标签用于对网页的内容进行分区、分块,定义文档中的节。比如章节、页眉、页脚或文档中的其它部分。一般情况下,sec
3、tion标签通常由内容和标题组成。section是什么?用于对网页的内容进行分区、分块,定义文档中的节 文档中的区段,解释了“section的具体介绍”注 意 标签表示一段专题性的内容,一般会带有标题,没有标题的内容区块不要使用section标签定义。根据实际情况,如果article标签、aside标签或nav标签更符合使用条件,那么不要使用section标签。当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div标签而非section。3 article标签定义和用法是一个特殊的section标签,它比section具有更明确的语义,它代表一个独立的、完整的相关内容块,可独立于页面
4、其它内容使用。这是一篇介绍HTML 5结构标签的文章例如:新闻提供者的一篇新的文章、一篇博客、一个用户评价等。注 意举例:这是一篇介绍HTML 5结构标签的文章HTML 5的历史2017.02.20 文章内容详情 Article标签会有标题部分,通常包含在header内,有时也会包含footer。article可以嵌套,内层的article对外层的article标签有隶属关系。例如,一篇博客的文章,可以用article显示,然后一些评论也可以以article的形式嵌入其中。4 nav标签 首页 学校新闻 院系设置 师资队伍 定义和用法nav标签代表页面的一个部分,是一个可以作为页面导航的链接组
5、,是navigator的缩写。举例:首页 学校新闻 院系设置 师资队伍 nav标签可以应用于传统导航条、侧边栏导航、页内导航、翻页操作等场合。5 aside标签 首页 学校新闻 院系设置 师资队伍 定义和用法aside标签用来装载非正文的内容,被视为页面里面一个单独的部分。举例:aside标签可以被包含在article标签内作为主要内容的附属信息。文章标题文章内容附属信息部分 也可以在article标签之外使用,作为页面或站点全局的附属信息部分。例如广告、友情链接、侧边栏、导航条等等。6 header标签 院系设置 师资队伍 定义和用法header标签定义文档的页眉,通常是一些引导和导航信息。
6、举例:标签不局限于写在网页头部,也可以写在网页内容里面。网站标题网站副标题 通常标签至少包含(但不局限于)一个标题标记(-),还可以包括标签,还可以包括表格内容、标识Logo、搜索表单、导航等。7 footer标签 院系设置 师资队伍 定义和用法footer标签定义section或document的页脚,包含了与页面、文章或是部分内容有关的信息,比如说文章的作者或者日期。举例:作为页面的页脚时,一般包含了版权、相关文件和链接。Copyright淮信科技有限公司 footer标签和标签使用基本一样,可以在一个页面中多次使用,也可以在article标签或者section标签中添加footer标签,
7、那么它就相当于该区段的页脚了。3分组标签Partfigure 标签和figcaption标签hgroup标签dialog标签分组标签主要完成web页面区域的划分,确保内容的有效分隔。主要包括figure标签、hgroup标签、figcaption标签、dialog标签等。分组标签1 figure 标签和figcaption标签 figure标签用于定义独立的流内容,例如图像、图表、照片、代码等,一般指一个单独的单元。figcaption标签用于为figure标签组添加标题,一个figure标签内最多允许使用一个figcaption标签,该标签应该放在figure标签的第一个或者最后一个子标签的
8、位置。举例演示【实例3-2】figure 标签和figcaption标签的使用。2 hgroup标签 hgroup标签可以将标题或者子标题进行分组,通常它与h1h6标签组合使用,一个内容块中的标题可以通过hgroup标签组成一组。举例演示【实例3-3】hgroup标签。3 dialog标签 dialog标签主要用于人与人之间的对话。该标签还包括dt和dd两个组合标签,他们常常同时使用。dt表示说话者,dd表示说话者说的内容。兼容性ChromeSafari目前只有 Chrome 和 Safari 6 支持 标签。注意举例演示 老师 dialog标签所有的浏览器都支持吗?学生 目前只有 Chrom
9、e 和 Safari 6 支持 老师 答对了!4页面交互标签Partdetails标签和summary标签menu标签与command标签交互性标签主要用于功能性的内容表达,会有一定的内容和数据的关联,是各种事件的基础,主要包括details标签、menu标签、commond标签等。页面交互标签1 details标签和summary标签 details标签用于描述文档或文档某个部分的细节。summary标签经常与details标签配合使用,作为details标签的第一个子标签,用于为details定义标题。标题是可见的,当用户单击标题时,会显示或隐藏details中的其他内容。举例演示【实例3
展开阅读全文