HTML5的八大特性
HTML5具有八大特性, 分别对应八种logo
- 语义特性(Semantic)
- 离线与存储特性(Offline & Storage)
- 设备访问特性(Device Access)
- 多媒体特性(Multimedia)
- 三维、图形与特效特性(3D、Graphics & Effects)
- 性能与集成特性(Performance & Integration)
- 连接特性(Connectivity)
- CSS3特性(CSS3)
HTML5的优势
- 摆脱对平台的依赖
- 实时更新
- 离线使用
- 代码更安全
- 跨平台
- 可以充分利用Native
HTML5新增结构元素及页面元素
新增结构元素
元素 | 说明 |
---|---|
header | 页面或页面中某一个区块的页眉, 通常是一些引导和导航信息 |
nav | 可以作为页面导航的链接组 |
section | 页面中的一个内容区块, 通常由内容及其标题组成 |
article | 代表一个独立的、完整的相关内容块,可独立于页面其他内容使用 |
aside | 非正文的内容,与页面的主要内容是分开的,被删除而不会影响到页面的内容 |
footer | 页面或页面中某一个区块的脚 |
新增页面元素
元素 | 说明 |
---|---|
video | 定义视频 |
audio | 定义音频 |
embed | 用来嵌入各种媒体内容。如Midi、Wav、AIFF、AU、MP3及Flash等 |
mark | 主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字 |
progress | 表示运行中的进程,可以使用progress元素显示JavaScript中消耗时时间函数的进程。等待中、请稍后等 |
time | 表示日期或时间,也可以两者同时 |
ruby | 定义ruby注释(中文注音或字符)。ruby、rt元素一同使用。ruby元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的rt元素组成,还包括可选的rp元素,定义当浏览器不支持“ruby”元素时显示的内容 |
rt | 定义字符(中文注音或字符)的解释或发音 |
rp | 在ruby注释中使用,以定义不支持ruby元素的浏览器所显示的内容 |
wbr | 表示软换行。br元素表示此处必须换行;wbr表示浏览器窗口或父级元素足够宽时(没必要换行时)不换行,而宽度不够时主动在此处换行 |
canvas | 定义图形,例如图表或其他图像。该元素只是图形容器(画布),必须使用脚本来绘制图形 |
command | 表示命令按钮,比如单选按钮、复选框或按钮。只有当command元素位于menu元素内时,该元素才是可见的,否则不会显示这个元素,但是可以用它规定键盘快捷键 |
details | 用来描述文档或文档某个部分的细节。可与summary元素配合使用,summary可以为details定义标题。标题是可见的,用户单击标题时,会显示出details。summary应该是details的第一个子元素 |
datalist | 定义选项列表。与input元素配合使用该元素,来定义input可能的值。datalist及其选项不会被显示出来,它仅仅是合法的输入值列表。使用input元素的list属性来绑定datalist |
output | 定义不同类型的输出,例如脚本的输出 |
source | 为媒介元素(如video和audio)定义媒介资源 |
menu | 定义菜单列表。当希望列出表单控件时使用该元素。注意与nav的区别,menu专门用于表单控件 |
浏览器支持与选择
一些低版本的浏览器并不支持HTML5,如IE6~IE8浏览器。
所有新旧浏览器对无法识别的元素均会视作内联元素处理。
解决方式:
方式一:
<!--[if lt IE9]>
<script>
(function() {
if (!
/*@cc_on!@*/
0) return;
var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
document.createElement(e[i])
}
})()
</script>
<![endif]-->
方式二:(使用Google的html5shiv包(推荐))
<!--[if lt IE9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
或者将https://github.com/aFarkas/html5shiv/下载并保存到本地项目目录
<!--[if lt IE9]>
<script src="下载的文件目录"></script>
<![endif]-->
上面两种方式在最后都要在CSS文件或样式表中添加如下标记样式:
/*html5 将新元素变成块元素*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
知识来源于网上