HTML5

标准的制定。

2006年10月W3C决定与WHATWG合作共同研制HTML5

HTML5

1.语义特性Semantic。

HTML5赋予网页更好的意义和结构。

2.离线与存储特性Offline

Storage。

HTML5开发的网页APP启动时间更短联网速度更快。

由于有HTML5

APP

Access)。

HTML5提供了前所未有的数据与应用接入开放接口。

使外部应用可以直接与浏览器内部的数据直接相连例如视频影音可直接与麦克风及摄像头相联。

支持网页端的Audio、Video等多媒体功能与网站自带的APPS、摄像头、影音功能相得益彰。

Effects。

基于SVG、Canvas、WebGL及CSS3的3D功能用户会惊叹于在浏览器中所呈现的惊人视觉效果。

性能与集成特性Performance

Workers和XMLHttpRequest2等技术帮助您的Web应用和网站在多样化的环境中更快速的工作。

连接特性Connectivity。

HTML5拥有更有效的服务器推送技术(Server-Sent

Event和WebSockets)能够帮助我们实现服务器将数据“推送”到客户端的功能。

CSS3特性(CSS3)。

CSS3中提供了更多的风格和更强的效果。

HTML5

4.代码更安全。

HTML5可以将Web代码全部加密本地应用解密后再运行大大的提供了代码的安全性。

5.跨平台。

JavaScript的代码可以在许多地方使用包括移动应用、移动网站、PC网站、各种浏览器插件甚至可以用WebKit封装作为跨平台的应用程序。

6.可以充分利用Native。

HTML5可以通过浏览器作为中介充分利用Native的好处(使用GPS、照相机、本地相册、读取本地联系人等。

某些Web无法实现的功能可以利用Native来实现。

HTML5

例如Header页眉、nav导航、section节、article文章、aside侧栏、footer页脚。

HTML5

例如video、audio、embed、progress、time、mark、ruby、rt

、rp

HTML4.01之前有些标记被不赞成使用HTML5已经淘汰了建议使用CSS来替代。

还有些标记HTML5已经不再支持所以也需要淘汰。

(1)

纯表现的元素。

如font、basefont、center、big、s、u、strike、tt。

(2)

对可用性产生负面影响的元素。

如frameset、frame、noframes等元素。

HTML5只支持浮动框架内联框架iframe元素。

(3)

易产生混淆的元素。

如acronym、applet、isindex、dir等元素。

(4)

废除只有部分浏览器支持的元素。

如blink、bgsound、marquee等元素。

(5)

其它被废除的元素。

如废除rb使用ruby替代废除listing使用pre替代废除xmp使用code替代废除nextid使用guids替代废除plaintex使用“text/plian”MIME类型替代。

浏览器支持与选择

一些低版本的浏览器并不支持HTML5如IE6IE8浏览器。

所有新、旧浏览器对无法识别的元素均会视作内联(inline)元素来自动处理。

可以通过其它方法让这些浏览器能够处理“未知”的HTML元素。

使用http://html5test.com来测试浏览器的支持。

html5shiv是针对IE浏览器比较好的解决方案。

html5shiv主要解决HTML5提出的不被IE6IE8识别新的元素不能作为父节点包裹子元素不能应用CSS样式。

从指定网站上直接下载并保存到本地项目目录中https://github.com/aFarkas/html5shiv/。

head!--[if

srchttp://html5shiv.googlecode.com/svn/trunk/html5.js/script![endif]--/head

课后练习

网页标题html5页面布局设计网页的框架结构如下图所示body中的html代码可参照如下所示代码结构

header/header

figcaptionHTML5结构元素侧边aside/figcaption

/figure

在CSS文件夹中新建样式表文件style1.css使用外部样式表实现如下图所示的网页效果要求

整体框架样式

全局样式内外边距清0header的样式背景颜色#4B5B6B背景图片logo.png背景图片不重复显示在左上角,宽100%高60pxnav的样式宽100%高80pxmain的样式宽100%高500px背景颜色#fefefefooter的样式清空两侧浮动宽100%高80px背景颜色#eaeada上下内边距为20px左右内边距为自动文本居中对齐。

设置导航条nav下的具体样式

ul的样式不显示项目符号宽100%高80px背景颜色#d0c0b0文本居中对齐相对于父元素居中显示。

li的样式字体大小28px上下内边距20px左右内边距10px显示为inline-block类型宽160px高40px。

鼠标单击超链接之前之后及正在单击时的样式无下划线鼠标悬停在超链接上时的样式背景颜色#cf9高80px宽160px上下内边距为20px左右内边距为10px。

设置主体部分main下的具体样式

article的样式宽75%高500px背景颜色#dbdaca向左浮动section的样式宽30%高420px向左浮动边框线为1px

middle;)上下外边距为35px左右外边距为10pximg的样式宽95%高400px外边距10pxaside的样式宽25%高500px背景颜色#9F9F9A向右浮动文本居中对齐垂直方向居中对齐(vertical-align:

middle;)。

figure的样式上下外边距20px左右外边距自动。

设置脚部footer下的具体样式

设置footer下的p的样式字体大小20px上内边距25px高26px网页的效果图参照下图所示

!doctype

srcimages/html5_logo.png/sectionsectionimg

srcimages/css3_logo.png/sectionsectionimg

srcimages/javascript_logo.png//section/articleasidefigureimg

srcimages/html5.pngfigcaptionHTML5结构元素侧边aside/figcaption/figure/aside/divfooterpCopyright

copy;

{background:url(../images/logo.png)

#4B5B6B

10px;display:inline-block;width:160px;height:40px;}a:link,a:visited{text-decoration:

none;}

500px;background:#fefefe;}article

{width:75%;height:500px;background:

#DBDACA;float: