欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

HTML 5

程序员文章站 2022-05-11 10:10:35
...

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(!/*@[email protected]*/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 9_16

推荐阅读