HTML 5

2017-04-01 本文已影响0人 IT男的成长记录

HTML5是什么?有哪些新特性?新增哪些标签?如何让低版本的IE支持HTML5新标签

HTML5是超文本标记语言的第五次重大修改
目的:将网页语义化,以便更好地被用户和机器阅读,并且更好地支持各种媒体的嵌入
新特性:
- 语义特性:HTML5赋予网页更好的意义和结构.更加丰富的标签将随着对RDFa 微数据微格式等方面的支持,构建对程序,对用户都更有价值的数据驱动的WEB
- 本地存储特性:基于HTML5开发的网页app拥有更短的启动时间,更快的联网速度,这些全得益于HTML5 app cache,以及本地存储功能
- 设备兼容特性:HTML5提供了广泛的数据与应用接入开放接口
- 连接特性:HTML5具有更有效的连接工作效率,使得基于页面的实时聊天,更快的网页游戏体验,更优化的在线交流得到了实现.HTML拥有更有效的服务器推送技术(Server-Sent和WebSockets)
- 网页多媒体特性:支持网页端的Audio Video等多媒体功能
- 三维图形及特效特性:SVG Canvas WebGL CSS3的3D功能
- 性能与集成特性:HTML5通过XMLHttpRequest等技术,解决以前的跨域等问题
- CSS3特性:在不牺牲语义结构和性能的前提下,CSS3中提供了更多的风格和更强的效果.。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。
新增标签:
- 页眉页脚导航文章内容等跟结构相关的结构元素标签:
  - header标签:定义文档的页眉，通常是一些引导和导航信息
  - nav标签:用来作为页面导航的链接组
  - article标签:它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等等。
  - section标签:定义文档中的节。
  - aside标签: 用来装载非正文的内容，被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的，可以被删除，而不会影响到网页的内容、章节或是页面所要传达的信息。例如广告，成组的链接，侧边栏等等。
  - footer标签:定义section或document的页脚，包含了与页面、文章或是部分内容有关的信息，比如说文章的作者或者日期。
  - figure标签:多用于图片与图片描述的组合
- 多媒体相关标签:
  - audio标签:定义声音内容
  - vedio标签:定义视频内容
  - canvas标签:定义图形,通过javascript在上面进行绘制
移除标签:
- 纯表现的元素:big,center,font,strike
- 对可用性产生负面影响的元素:frame,frameset,noframes
兼容问题的解决
- IE6/IE7/IE8支持通过document.createElement方法产生标签,利用这一特性让浏览器支持部分HTML5新标签.支持新标签后,还需要添加标签对应的样式

<!--[if lt IE 9]>
<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]-->

* html5shiv.js:使用JavaScript来使不支持HTML5的浏览器支持HTML标签

<head>
<!--[if IE]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]-->
</head>

2.input有哪些新增类型?

 <input type="text">:定义用于文本输入的单行输入字段（默认宽度为20个字符）
 <input type="password">:定义密码字段
 <input type="radio">:定义单选按钮，允许用户在有限数量的选项中选择一个
 <input type="checkbox">:定义复选框
 <input type="submit">:定义用于向表单处理程序提交表单的按钮。
 <input type="button">:定义按钮
 <input type="number">:用于应该包含数字值的输入字段
 <input type="date">:用于应该包含日期的输入字段
 <input type="color">:用于应该包含颜色的输入字段，根据浏览器支持，颜色选择器会出现输入字段中。
 <input type="range">:用于应该包含一定范围内的值的输入字段，根据浏览器支持，输入字段能够显示为滑动控件
 <input type="month">:允许用户选择月份和年份，根据浏览器的支持，日期选择器会出现在输入字段中
 <input type="week">:允许用户选择周和年,根据浏览器支持，日期选择器会出现输入字段中。
 <input type="time">:允许用户选择时间（无时区）,根据浏览器支持，时间选择器会出现输入字段中。
 <input type="datetime">:允许用户选择日期和时间（有时区）,根据浏览器支持，日期选择器会出现输入字段中。
 <input type="datetime-local">:允许用户选择日期和时间（无时区）,根据浏览器支持，日期选择器会出现输入字段中。
 <input type="email">:用于应该包含电子邮件地址的输入字段，根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。
 <input type="search">:用于搜索字段（搜索字段的表现类似常规文本字段）。
 <input type="tel">:用于应该包含电话号码的输入字段，目前只有Safari 8支持该类型
 <input type="url">:用于应该包含URL地址的输入字段，根据浏览器的支持，在提交时能够自动验证url字段。

3.浏览器本地存储中 cookie 和 localStorage 有什么区别？ localStorage 如何存储删除数据。

相同:都是保存在浏览器端,只有同源页面才能使用
区别:
- cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而localStorage不会自动把数据发给服务器，仅在本地保存
- 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M左右。
- 数据有效期不同:localStorage：始终有效，窗口或浏览器关闭也一直保存(直到用JavaScript删除或者用户清除浏览器缓存)，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

localStorage存储和删除数据:

存储数据:

localStorage.setItem("name", "xin");
或者
localStorage.name = "xin";

读取数据:

localStorage.getItem("name");
或者
localStorage.name;

删除数据

localStorage.removeItem("name");
或者
delete localStorage.name;

HTML 5

HTML5是什么?有哪些新特性?新增哪些标签?如何让低版本的IE支持HTML5新标签

2.input有哪些新增类型?

3.浏览器本地存储中 cookie 和 localStorage 有什么区别？ localStorage 如何存储删除数据。

猜你喜欢

热点阅读