HTML5结构-初识HTML5课件PPT.ppt

讲解： 1、介绍每个标签的作用； 2、aside：非正文的内容,包含的内容与页面的主要内容是分开的,可以被删除,而不会影响到网页的内容。例如：广告，侧边栏等。 * 演示（01 当当图书分类页面）： 1、演示提供的页面，查看代码，讲解header、nav、section、footer的作用； 2、演示代码编写，仅演示页面结构的编写，内容实现不需要演示； * 【讲解思路】简单介绍前三个标签，后面会详细讲解，主要讲解后4个标签； 讲解： 1、讲解标签的作用和实现的效果； 演示（02 HTML5新增网页元素）： 1、边讲解边演示，仅演示后面4个标签； 2、介绍每个标签的的使用场景，例如datalist在文本框索搜时非常常用，例如当当、京东等搜索框实现的效果； 3、演示在代码中的编写规范以及在不同浏览器中实现的效果； * 【讲解思路】选学内容； 讲解： 简单介绍，学员知道即可； * 【讲解思路】简单介绍，学员知道会用即可； 讲解： 1、具体参见素材中《HTML5全局属性.doc》； 2、contentEditable和designMode对比讲解； 3、讲解几个属性的作用和实现效果； 演示（03 HTML5全局属性）： 1、边讲解边演示，讲解各个属性的代码编写规范，实现效果； * 【讲解思路】选学内容； 讲解： 1、学员了解即可，在开发中知道不使用即可； * 【讲解思路】选学内容； 讲解： 介绍每个选择器的作用和实现的功能； * 【讲解思路】选学内容； 演示（04 QQ会员页面）： 1、演示页面实现效果； 2、使用HTML5结构元素布局页面； 3、使用高级选择器设置顶部登录（first-of-type）和开通超级会员（last-of-type）两个按钮的样式； 4、底部内容使用nth-child(n)实现； 5、其他样式简单介绍，快速实现即可； * * HTML5结构 ——初识HTML5 技能目标 目录结构 掌握HTML5的网页结构和新增元素 会使用高级选择器美化网页 为什么要学习HTML5 酷炫网站制作 游戏开发 移动开发 应用开发 HTML5为什么会这么受欢迎 HTML5的优势 HTML5结构 之一 跨平台 兼容性 世界知名浏览器厂商的支持 微软 Google 苹果 OPera Mozilla HTML5是什么 HTML5的优势 HTML5结构 之一 HTML CSS JavaScript HTML5 CSS3 API 分析当当图书分类页面结构 网页结构 上左右下结构 网页内容 顶部、主体内容、底部 左边栏、主体内容、右边栏 结构元素 HTML5结构 之二 顶部 主体内容 底部 DIV布局网页结构 结构元素 HTML5结构 之二 header footer main left side right side div id=headerheader/div div id=“container divleft side/div divmain/div divright side/div /div div id=“footerfooter/div HTML5新增结构元素 结构元素 HTML5结构 之二 标签 说明 header 页面或页面中某一个区块的页眉，通常是一些引导和导航信息。 nav 可以作为页面导航的链接组 section 页面中的一个内容区块，通常由内容及其标题组成 article 代表一个独立的、完整的相关内容块，可独立于页面其它内容使用 aside 非正文的内容，与页面的主要内容是分开的，被删除而不会影响到网页的内容 footer 页面或页面中某一个区块的脚注 布局图书分类页面 使用结构元素布局当当图书分类页面 仅实现页面整体布局 使用header、nav、section、footer布局 结构元素 HTML5结构 之二 HTML5新增网页元素 网页元素 HTML5结构 之三 标签 说明 video 定义视频，如电影片段或其他视频流 audio 定义音频，如音乐或其他音频流 canvas 定义图形 datalist 定义可选数据的列表 time 标签定义日期或时间 mark 在视觉上向用户呈现那些需要突出的文字 progress 运行中的进度（进程） HTML5废除的元素 能用css替代的元素：big center font s u strike等 不再使用frame框架 只有部分浏览器支持的元素：applet blink bgsound marquee等 其他被废除的元素：rb dir isindex listing nextid等 网页元素 HTML5结构 之三 HTML5新增全局属性 全局属性 HTML5结构 之四 属性 说明 contentEditable