潭州教育前端html5第一章追梦老师.pptx

潭州教育-前端开发 HTML5 主讲人：追梦 01 HTML5的介绍 01 HTML5+CSS3 HTML5简介 HTML5新标签 HTML5 01 HTML5+CSS3 一、学前准备 1.学习要求： a)熟练掌握HTML、DIV、CSS b)熟练掌握JavaScript 2.准备工具： a)编辑器：Editplus / Dreamweaver / HBuilder / submitText 等都可以 b)浏览器：IE8、IE9、IE10、IE11、Chrome、Safari、Firefox和Opera HTML5 01 HTML5+CSS3 二、HTML5简介 1.HTML5的与众不同 为什么单独列出HTML5，而不单独列出HTML4 / HTML3呢？ 重大版本更新、颠覆性的技术、更便捷的开发、更好的体验…… 2.HTML5的发展史 HTML4.01在1999年12月就发布了，之后HTML5的发展非常的缓慢，2013年5月才正式草案公布HTML5.1，2014年10月HTML5由万维网联盟（W3C）完成标准制定并正式公布，之后的发展非常迅速。移动设备的普及对HTML5的发展起了推动性作用。 HTML5 01 HTML5+CSS3 三、文档声明简化 1.DOCTYPE HTML4.01需要DTD，例如： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.1//EN HTML5不需要DTD，只需要写：!DOCTYPE html 2.meta标签规定编码 以前： meta http-equiv=Content-Type content=text/html;charset=utf-8 现在： meta charset=UTF-8 / meta标签还有很多很棒的关于移动端的更新，后面再详细讨论。 HTML5 01 HTML5+CSS3 四、新增标签 1.结构标签 a)header 定义文档的头部区域，一般用在顶部 b)article 定义页面独立的文章内容，帖子、博客文章、评论、新闻等可以使用 c)nav 定义导航，替代ul和li定义的导航 d)section 定义一块区域，一般用来写主体内容部分 e)aside 定义侧边栏，侧边信息可以使用 f)figure 定义一块独立的内容，通常用来展示图片及其描述 g)figcaption 定义figure的标题 h)iframe 框架，frameset已经被淘汰 i)footer 定义文档的底部，一般以它结尾 HTML5 01 HTML5+CSS3 2.特殊样式标签 a)mark 突出显示文字 b)meter 刻度百分比 c)progress 进度条 d)ruby 内容+注释 rt注释内容 rp不支持时显示 e)wbr 长单词换行的位置 HTML5 01 HTML5+CSS3 3.兼容性不是很好的标签（不要求掌握） a)dialog 定义一个对话框 b)bdi 单独设置文字摆放方式 open属性 c)details / summary描述某部分的详情，summary为details的标题 HTML5 01 HTML5+CSS3 4.其他标签 canvas 、svg 、video audio等更高级的功能标签，后面的课程单独介绍。 HTML5 01 HTML5+CSS3 5.删除掉的标签 acronym、applet、basefont、bgsound、big、blink、center、dir、font、frame、frameset、hgroup、isindex、listing、marquee、multicol、nextid、nobr、noembed、noframes、plaintext、spacer、strike、tt、xmp HTML5 01 HTML5+CSS3 6.思考 a)1：为什么要新增这些标签 结构标签让语义化的特点更突出，特殊样式标签让内容展示更方便，便于搜索引擎 b)2：低版本不兼容怎么办 在低版本浏览器会出现不兼容情况，一般使用JavaScript来兼容。 当浏览器不认识HTML5新标签时，会将其解析为一个自定义标签，这样的标签是没办法加样式的（可以使用IE8进行测试），要解决这些新标签样式问题，也就是要解决自定义标签样式问题，代码如下： 当然，在IE9+以及主流浏览器， H5标签和自定义标签是可以直接