1.HTML5概述

HTML5的八大特性

HTML5具有八大特性, 分别对应八种logo
在这里插入图片描述在这里插入图片描述

  1. 语义特性(Semantic)
  2. 离线与存储特性(Offline & Storage)
  3. 设备访问特性(Device Access)
  4. 多媒体特性(Multimedia)
  5. 三维、图形与特效特性(3D、Graphics & Effects)
  6. 性能与集成特性(Performance & Integration)
  7. 连接特性(Connectivity)
  8. CSS3特性(CSS3)

HTML5的优势

  1. 摆脱对平台的依赖
  2. 实时更新
  3. 离线使用
  4. 代码更安全
  5. 跨平台
  6. 可以充分利用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}

知识来源于网上

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值