`

HTML5学习碎片

HTML5IE浏览器JavaScript脚本 
阅读更多

http://www.cnblogs.com/xiaoshatian/archive/2011/02/14/1954032.html

春节在家读了两本介绍HTML5的书：《HTML5 Up and Running》和《Pro HTML5 Programming》，得益于Kindle的便捷，一边读一边标注了一些内容，随感觉而标记，不成体系，所以称之为“碎片”，记录于此作为存档。

  1. 浏览器支持情况检测
    • Modernizr是一个开源的JavaScript脚本库，可以用它来检查浏览器对HTML5和CSS3的支持情况。
    • IE是个很有意思的浏览器，它只识别它的DOM字典里存在的标签。如果你的HTML中包含它不认识的标签，只需要用JavaScript创建一下，IE就会把该标签加到它的DOM字典中，那么也就可以识别该标签并为它应用样式了。例如，让IE支持article标签的方法是：
      document.createElement(“article”)

      根据这个原理，有人写了一段脚本来让老版本的IE支持HTML5标签：

      <!--[if lt IE 9]>
      <script>
      var e = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(',');
      for (var i = 0; i < e.length; i++)
      {
      document.createElement(e[i]);
      }
      </script>
      <![endif]—>

      或者直接在线引用这段脚本：

      <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
  2. ORIGIN（源）
    • HTML5通过引入origin这个概念来明确和细化了域安全性，origin是由scheme（协议）、host（域名）和port（端口）组成的。譬如http://windstyle.cn和https://windstyle.cn是不同的origin，但http://windstyle.cn和http://windstyle.cn/example.html是同一origin。
  3. DOCTYPE
    • Web页面有几种不同的渲染模式：
      • Standards mode
      • Almost Standards mode
      • Quirk mode
    • DOCTYPE就是用来告诉浏览器应该用哪种模式来渲染页面，符合HTML5标准（Standards mode）的DOCTYPE很简单：
      <!DOCTYPE HTML>
    • 没有DOCTYPE或者声明了不同的DOCTYPE会导致浏览器以Almost Standards mode或Quirks mode来渲染页面。《HTML5 Up and Running》的作者说，目前至少有5种DOCTYPE ，它们会触发浏览器的almost standards mode和至少73种quirks mode，光IE8就支持4种呈现模式（见下图），于是作者在书中要大喊：“Kill it. Kill it with fire!”。
      ie8-mode
  4. 文档大纲
    • 在HTML4中，创建文档大纲的唯一方法是使用<h1>到<h6>这几个标签，为了确保大纲只有一个根节点，页面中就不能多次使用<h1>。而在HTML5中，每个section都可以包含自己的<h1>，这并不会影响大纲结构。
  5. <time>标签
    • 用法示例：
      <time datetimeborder-top-left-radius: 0px 0px !important; border-top-right-radius: 0px 0px !important; border-bottom-right-radius: 0px 0px !important; border-bottom-left-
      分享到：
      | 百度开放平台中的万年历被提取出来了
      评论
      发表评论

      您还没有登录,请您登录后再发表评论

      相关推荐

        拼图将碎片拼凑成一个完整画面HTML5源码

        通过学习和理解这个源码，开发者可以深入了解HTML5 Canvas的绘图功能，以及如何用JavaScript实现动态交互的前端应用。这对于提升前端开发技能，尤其是游戏或交互式应用的开发能力，具有很高的价值。

        html5 canvas彩色碎片组合球形旋转动画特效

        通过学习和掌握以上知识点，开发者可以创建出更多富有创意和互动性的HTML5 Canvas动画效果。这个“html5 canvas彩色碎片组合球形旋转动画特效”是一个很好的实践案例，帮助我们理解和运用Canvas API，提升Web开发...

        html5 canvas碎片3D环绕地球天体运动动画特效

        在这个特定的案例中，“html5 canvas碎片3D环绕地球天体运动动画特效”是一个利用Canvas API实现的3D视觉效果，模拟了天体（如行星）在三维空间中围绕地球的运动轨迹。 首先，我们要理解Canvas的基本概念。HTML5 ...

        HTML5彩色碎片组合球形动画特效.zip

        在本资源"HTML5彩色碎片组合球形动画特效.zip"中，我们关注的是HTML5与JavaScript结合实现的视觉效果。这个特效是通过在canvas元素上进行动态绘图来创建一个球体，球体表面由众多彩色的三角形碎片组成，并且这些碎片...

        六角碎片HTML5游戏源码

        为了深入学习和理解这个游戏，开发者需要掌握基本的HTML5语法、CSS3布局和JavaScript编程，同时了解如何调试和优化Web性能。此外，熟悉游戏开发流程、游戏设计理论以及用户体验原则也是必不可少的。通过分析和修改这...

        “碎片转化”——基于Android平台开发的碎片时间学习APP.pdf

        "碎片转化"是一款基于Android平台开发的移动应用，旨在帮助用户高效利用日常生活中的碎片时间进行学习。这款APP针对大学生群体，他们通常拥有大量的课余时间，可以被有效地利用起来。APP的主要功能包括： 1. **推送...

        HTML5鼠标跟随立方体碎片特效.zip

        本资源“HTML5鼠标跟随立方体碎片特效.zip”提供了一个利用HTML5、CSS3以及可能的jQuery技术实现的独特视觉效果，即鼠标跟随的立方体碎片特效。这个特效能够为网页增加趣味性和互动性，吸引用户的注意力。 首先，...

        html5 canvas彩色碎片组合球形旋转动画特效.zip

        在这个“html5 canvas彩色碎片组合球形旋转动画特效”中，我们可以看到Canvas技术与JavaScript的jQuery库结合，实现了引人注目的交互式动画。 首先，让我们了解一下HTML5 Canvas的基本概念。Canvas是一个基于矢量...

        html5 canvas碎片3D环绕地球天体运动动画特效.zip

        在这个“html5 canvas碎片3D环绕地球天体运动动画特效”项目中，我们主要会探讨以下几个核心知识点： 1. **HTML5 Canvas API**：Canvas是一个基于矢量图形的HTML元素，通过JavaScript来控制其绘图行为。开发者可以...

        html5基于canvas实现的打碎图片玻璃碎片特效源码.zip

        总的来说，通过HTML5的Canvas API，我们可以实现各种创意十足的视觉特效，这个“html5基于canvas实现的打碎图片玻璃碎片特效源码”项目就是一个很好的实例，它展示了HTML5在现代Web开发中的强大能力。通过学习和实践...

        基于HTML5 Canvas绘制的鼠标跟随三角形碎片光标动画特效源码.zip

        HTML5 Canvas是一个强大的Web图形接口，它允许开发者在网页上直接进行二维绘图，无需借助任何插件。...通过学习和理解这个源码，开发者可以进一步提升自己的HTML5 Canvas技能，并将其应用到自己的项目中。

        html5+three.js酷炫立方体碎片鼠标跟随动画特效.zip

        在本项目中，"html5+three.js酷炫立方体碎片鼠标跟随动画特效.zip"是一个利用HTML5技术结合JavaScript库three.js创建的互动视觉特效。Three.js是基于WebGL的3D库，它使得在浏览器中创建复杂的3D图形变得相对简单。 ...

        H5小游戏源码 六角碎片.zip

        《H5小游戏源码 六角碎片》是一个包含游戏开发源代码的压缩包，主要针对的是HTML5（H5）平台。H5小游戏是近年来在移动互联网领域非常流行的一种轻量级游戏形式，它们通常无需下载安装，通过浏览器即可直接游玩，具有...

        jQuery 碎片滑动效果

        5. **CSS3与硬件加速**：为了提高性能，可以利用CSS3的硬件加速特性，如transform和transition属性。这将使动画更加平滑，特别是在移动设备上。 6. **优化与性能**：考虑到碎片滑动效果可能会对页面性能产生影响，...

        基于HTML5+Canvas实现炫彩纸屑爆炸碎片特效.zip

        本项目“基于HTML5+Canvas实现炫彩纸屑爆炸碎片特效”就是利用这两者来实现一种吸引眼球的动画效果，常用于网站背景、游戏、互动设计等场景。 HTML5是超文本标记语言（HyperText Markup Language）的第五代版本，它...

        碎片轮播完整版代码。

        作者声明该代码已经过自己测试，可以在谷歌浏览器（Chrome）上正常运行，这表明它可能依赖于某些特定的Web API或者浏览器特性，例如CSS3动画或HTML5的新特性。同时，作者也开放了问题反馈渠道，鼓励遇到问题的用户...

        基于threejs的3D爆炸碎片轮播图特效

        【基于threejs的3D爆炸碎片轮播图特效】是一个运用了HTML5库技术，特别是Three.js库，来实现一种创新且引人注目的视觉效果。Three.js是JavaScript的一个库，专为在Web浏览器中创建和展示三维图形而设计。这个特效...

        google.rar_google HTML5_html5

        HTML5是下一代超文本标记语言，它为网页开发者提供了更强大和灵活的工具，使得创建交互性和富媒体内容变得...对于学习HTML5开发的人员来说，这是一个很好的实践案例，可以帮助他们了解如何将理论知识应用于实际项目中。

      Magicbox
      Global site tag (gtag.js) - Google Analytics