金沙国际官网_金沙国际平台登录

因为这个金沙国际官网_金沙国际平台登录网站与很多的大型澳门赌场都有合作,金沙国际官网_金沙国际平台登录尽职尽责,高效执行,保持好奇心,不断学习,追求卓越,点击进入金沙国际官网_金沙国际平台登录马上体验吧,所以现在也正式地开始了营业。

您的位置:金沙国际官网 > web前端 > 浏览器缓存知识小结及应用,HTML5和Unity开发网页

浏览器缓存知识小结及应用,HTML5和Unity开发网页

发布时间:2019-11-04 05:22编辑:web前端浏览(117)

    浏览器缓存知识小结及应用

    2016/01/18 · HTML5 · 2 评论 · 浏览器, 缓存

    原文出处: 流云诸葛   

    浏览器缓存,也就是客户端缓存,既是网页性能优化里面静态资源相关优化的一大利器,也是无数web开发人员在工作过程不可避免的一大问题,所以在产品开发的时候我们总是想办法避免缓存产生,而在产品发布之时又在想策略管理缓存提升网页的访问速度。了解浏览器的缓存命中原理,是开发web应用的基础,本文着眼于此,学习浏览器缓存的相关知识,总结缓存避免和缓存管理的方法,结合具体的场景说明缓存的相关问题。希望能对有需要的人有所帮助。

    HTML5 基础知识 – 第 1 部分

    2012/06/23 · HTML5 · HTML5

    来源:IBM developerworks

    HTML5 是一种专门用于组织 Web 内容的语言。它通过创建一种标准化的、直观的 UI 标记语言简化 Web 设计和开发。HTML5 提供了解析和划分页面的方法,它允许创建各种独立的组件来按照逻辑组织站点,同时还为站点提供联合功能。HTML5 可以称作 “面向站点设计的信息映射方法”,因为它融入了信息映射、信息划分和消息标签等基本内容,使信息变得易于使用和理解,这构成了 HTML5 的生动语义和审美工具的基础。HTML5 使具备不同能力的设计师和开发人员能够发布从简单文本到丰富的交互式多媒体等各种内容。

    HTML5 提供了有效的数据管理、绘图、视频和音频工具。它简化了面向 Web 和便携式设备的跨浏览器应用程序的开发。HTML5 是推动移动云计算服务的技术之一,因为它可以实现更高程度的灵活性,可以开发出激动人心的交互式网站。它还引入了新的标记和增强,包括一个优雅的结构、表单控件、API、多媒体、数据库支持,并极大地加快了处理速度。

    HTML5 中的新标记更能让人产生共鸣,封装了它们的角色和用法。以前的 HTML 版本使用的标记不容易进行区分。然而,HTML5 提供了高度描述的、直观的标签。它提供了丰富的内容便签,可以立即识别出内容。例如,< div>标记现在补充了 < section>和 < article>标记。此外,还增加了 < video>、< audio>、< canvas>和 < figure>标记,可以更准确地描述内容的具体类型。

    HTML5 实现了以下功能:

    ●提供了可以准确描述所包含的内容的标记

    ●增强的网络通信

    ●显著改善了一般存储

    ●用于运行后台流程的 Web Worker

    ●在应用程序和服务器之间建立持久连接的 WebSocket 接口

    ●更好地检索存储的数据

    ●改善了网页保存和载入速度

    ●支持 CSS3 管理 GUI,意味着 HTML5 具备面向内容的特性

    ●改善了浏览器的表单处理

    ●一个基于 SQL 的数据库 API,允许客户端本地存储

    ●画布和视频,无需安装第三方插件即可添加图形和视频

    ●Geolocation API 规范,使用智能手机位置功能来合并移动云服务和应用程序

    ●智能表单减少了下载 JavaScript 代码的需求,在移动设备和云服务器之间实现了更有效的通信

    HTML5 创建了更加吸引人的用户体验:使用 HTML5 设计的页面可以提供与桌面应用程序类似的体验。HTML5 还将 API 功能和浏览器结合在一起,提供了增强的多平台开发。通过使用 HTML5,开发人员可以提供在不同平台之间切换的现代应用程序体验。

    HTML5 实际上是一系列创新的代表。HTML5 提供了新的标记、新的方法,并通过与 CSS3 和 JavaScript 的相互作用形成了一个通用的开发框架。这是以客户端为中心的应用程序处理的核心。除了将 HTML5 技术的技巧和方法部署到桌面外,还可以在特性丰富的 Web 移动手机浏览器中实现

    HTML5 —随着 Apple iPhone、Google Android 和运行 Palm webOS 的手机的流行和普及,这注定是一个不断增长的市场。

    HTML5 的一个关键功能就是信息映射 —或内容阻塞(如果您喜欢的话)—可以生成更加容易理解的流程。随着 HTML5 在 Web 处理方面的地位越来越重要,您将看到它在设计和开发方面是多么地高效。

    HTML5 标志着更有效的文本级别的语义流程,以及对表单构建和使用的更高级别的控制。所有这些特性和 HTML5 创新的许多其他优点是使它成为主要范式的根本原因。许多商业的或其他代理组织(即使这些组织其中很多的主要代理行为并不是信息处理和通信)都或多或少地反映到了这种日益增长的模式开发中。

    HTML5 的成功并不是出于偶然。相反,它的技术和方法才是它取得成功的后盾。

    页面规划

    您将创建一个简单的 Web 页面。在这个过程中,我将讨论 HTML5 中引入的几个新标记。要创建一个有效的、高效的 Web 页面,必须对页面进行规划,考虑到需要创建的所有的组件。

    创建的页面将采用如图 1 所示的高级设计。页面设计包含一个 Header 区、一个 Navigation 区、一个 Article 区(包含三个部分)、一个 Aside 区和一个 Footer 区。该页面将用于 Google Chrome 浏览器,消除了一些会引起感官混乱的内容,这些内容会引起浏览器兼容性问题,并且不利于理解页面基本结构。这种结构的目的是清楚地展示新的 HTML5 标记的用法,展示如何使用它们创建构造良好的代码和优雅的页面设计。

    图 1. Acme United Web 页面规划

    图片 1

    在创建页面的过程中,我使用了 CSS3,需要用 CSS3 正确地呈现 HTML5 页面。CSS3 是实现 HTML5 页面样式、导航和整体感官的重要工具。它的属性组可以在 W3Schools CSS3 参考站点(见 参考资料)找到,包括一些有用的元素,如背景、字体、选框和动画效果。

    然而,在开始构建页面前,您需要了解一些有关新的 HTML5 标记的知识。

    Header 区

    示例中的 Header 区包含页面标题和副标题。您将使用 < header>标记创建页面的 Header区的内容。< header>标记可以包含有关 < section>和 < article>的信息以及 Web 页面本身。这里的 Web 页面包含页面的 Header区以及 Article 和 Section 区的 Header区,如图 1 所示。清单 1 提供了一个 < header> 标记示例。

    清单 1. < header>; 标记示例

    XHTML

    <header> <h1>Heading Text</h1> <p> Text or images can be included here</p> <p> Logos are frequently placed here too</p> </header>

    1
    2
    3
    4
    5
    <header>
        <h1>Heading Text</h1>
        <p> Text or images can be included here</p>
        <p> Logos are frequently placed here too</p>
    </header>

    < header>标记还可以包含 < hgroup>标记,如清单 2 所示。< hgroup>标记使用从 <h1>到 <h6>的标题级别对标题进行了分组,其中包含主标题和子标题。

    清单 2. < hgroup> 标记示例

    XHTML

    <header> <hgroup> <h1>Main Heading</h1> <h2>Sub-heading </h2> </hgroup> <p> Text or images can be included here</p> </header>

    1
    2
    3
    4
    5
    6
    7
    <header>
        <hgroup>
              <h1>Main Heading</h1>
              <h2>Sub-heading </h2>
        </hgroup>
        <p> Text or images can be included here</p>
    </header>

    Navigation 区

    可以使用 <nav>标记创建页面的 Navigation 区。<nav>元素专门为导航功能定义了一个区域。 <nav>标记应当用于主站点的导航,而不是用于包含页面其他区域的链接。Navigation 区可以包含如清单 3 所示的代码。

    清单 3. <nav> 标记示例

    XHTML

    <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Our Products</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav>

    1
    2
    3
    4
    5
    6
    7
    8
    <nav>
         <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About Us</a></li>
              <li><a href="#">Our Products</a></li>
              <li><a href="#">Contact Us</a></li>
         </ul>
    </nav>

    Article 和 Section 区

    您设计的页面还包含 Article 区,其中包含页面的实际内容。将使用 < article>标记来创建这个区域,该标记定义可独立于其他页面内容使用的内容。例如,如果想要创建一个 RSS 提要,可以使用 < article>来唯一地识别内容。
    < article>标记识别可以移除并放到另一个上下文的内容,并且非常易于理解。

    Acme United 页面规划中的 Article 区包含了三个 Section 区。将使用 < section>标记创建这些区。< section>包含 Web 内容的相关的组件区。< section> 标记 —以及 < article>标记 —可以包含标题、页脚或任何其他必要的组件。< section>标记用于对内容分组。< section>标记和 < article>标记的内容通常以 < header>开头,以 < footer>结尾,中间为标记的内容。

    < section>标记还可以包含 < article>标记,正如 < article>标记可以包含 < section>标记一样。< section>应用于将类似的信息划分成组,而 < article>标记应用于文章或博客等可以删除并放到新上下文且不影响内容含义的信息。顾名思义,< article>提供了完整的信息判断,而 < section>标记包含了相关的信息,但是这些信息不能放到不同的上下文中,否则信息的含义就会丢失。

    清单 4 显示了 < article> 和 < section>标记的用法示例。

    图像元素

    < section>和 < article>标记以及 < header>和 < footer>标记可以包含 < figure>标记。您可以使用该标记包含图像、图表和照片。
    < figure>标记可以包含 < figcaption>,后者包含 < figure>标记中的图形的说明文字,允许您输入一段描述来将图形与内容更紧密地联系在一起。清单 5 提供了 < figure>和 < figcaption>标记结构的示例。

    清单 5. < figure>< strong> 标记和 < figcaption> 标记示例

    XHTML

    < figure> < img src="/figure.jpg" width="304" height="228" alt="Picture"> < figcaption>Caption for the figure< /figcaption> < /figure>

    1
    2
    3
    4
    < figure>
    < img src="/figure.jpg" width="304" height="228" alt="Picture">
    < figcaption>Caption for the figure< /figcaption>
    < /figure>

    媒体元素

    < section>和 < article>标记还可以包含各种媒体元素。HTML5 提供了可以快速传达内容含义的方式。媒体元素,例如以前嵌入到页面中的音乐和视频,现在可以更加准确地识别出来。

    < audio>标记识别声音内容,例如音乐或任何其他的音频流。< audio>标记的属性控制播放音频的时间、方式以及内容。这些属性是 src、preload、control、loop和 autoplay。在清单 6 的示例中,将在页面加载完毕后立即播放音频,并将为用户提供控件来停止或重新播放音频。

    清单 6. < audio> 标记示例

    XHTML

    < audio src="MyFirstMusic.ogg" controls autoplay loop"> Your browser does not support the audio tag. < /audio>

    1
    2
    3
    < audio src="MyFirstMusic.ogg" controls autoplay loop">
    Your browser does not support the audio tag.
    < /audio>

    < video>标记允许您广播视频片段或可视流媒体。它除了具备 < audio>标记的所有属性外,还包含另外三个属性:poster、width和 height。poster属性使您能够在加载视频时或根本不能加载视频时识别要使用的图像。

    清单 7 提供了

    清单 7.

    XHTML

    < video src="MyFirstMovie.ogg" controls="controls"> Your browser does not support the video tag < /video>

    1
    2
    3
    < video src="MyFirstMovie.ogg" controls="controls">
    Your browser does not support the video tag
    < /video>

    < video>和 < audio>标记可以包含 < Source>标记,后者为 < video>和 < audio> 标记定义了多媒体资源。您可以使用该元素指定其他的视频和音频文件,浏览器就可以根据它的媒体类型或编码支持进行选择。在清单 8 中,提供了两种选择。如果文件的 WMA 版本无法在当前使用的浏览器中播放,那么就可以尝试使用 MP3 版本。否者,显示一条消息,通知客户音频不可用的原因。

    清单 8. < source> 标记示例

    XHTML

    < audio> < source src="/music/good_enough.wma" type="audio/x-ms-wma"> < source src="/music/good_enough.mp3" type="audio/mpeg"> < p>Your browser does not support the HTML 'audio' element. < /audio>

    1
    2
    3
    4
    5
    < audio>
    < source src="/music/good_enough.wma" type="audio/x-ms-wma">
    < source src="/music/good_enough.mp3" type="audio/mpeg">
    < p>Your browser does not support the HTML 'audio' element.
    < /audio>

     

    < embed>标记定义了可以嵌入到页面中的内容 —例如,Adobe Flash SWF 文件的插件。清单 9 包含 type属性,该属性将嵌入的源识别为 Flash 文件。

    清单 9. < embed> 标记示例

    XHTML

    < embed src="MyFirstVideo.swf" type="application/x-shockwave-flash" />

    1
    < embed src="MyFirstVideo.swf" type="application/x-shockwave-flash" />

    除了 src和 type属性外,标记还包含 height 和 width属性。

    Aside 区

    在 Acme United 页面规划中,使用 < aside>标记创建 Aside 区。该标记的作用是容纳一些补充性内容,这些内容不属于文章的一部分。在杂志中,Aside 通常用于介绍有关文章本身的一些信息。< aside>标记包含的内容可以被移除而不会影响文章或文章所在的区段或页面所传达的信息。

    清单 10 提供了 < aside>标记的使用示例。

    清单 10.标记示例

    XHTML

    < p>My family and I visited Euro Disney last year.< /p> < aside> < h4>Disney in France< /h4> < p>Besides Euro Disney, there is a Disneyland in California.< /p> < /aside>

    1
    2
    3
    4
    5
    < p>My family and I visited Euro Disney last year.< /p>
    < aside>
    < h4>Disney in France< /h4>
    < p>Besides Euro Disney, there is a Disneyland in California.< /p>
    < /aside>

    Footer 区

    < footer>元素包含有关页面、文章或区段的信息,比如文章的作者或发表日期。文章的页脚可能包含版权或其他重要的法律消息,如清单 11 所示。

    清单 11. < footer> 标记示例

    XHTML

    < footer> < p>Copyright 2011 Acme United. All rights reserved.< /p> < /footer>

    1
    2
    3
    < footer>
    < p>Copyright 2011 Acme United. All rights reserved.< /p>
    < /footer>

    构造页面

    现在,您已经了解了创建一个 HTML5 页面所需的基本标记,接下来让我们开始正式构造页面。我们将要为 Acme United 构造一个 Web 页面。图 2 显示了构建后的页面,您可以下载并使用该页面(参见 下载)。

    图 2. Acme United Web 页面

    图片 2

    现在,让我们开始构造页面吧。首先,让我们先关注一下 < !doctype>。在 HTML5 中,对 进行了简化:您只需要记住 html即可。这不仅简化了标记的输入,而且该标记在以后也不需要进行修改。注意,它不是 html5,而是 html。不管 HTML 以后会有多少个版本,< !doctype>只能是 html。
    < html>标记包含除 < !doctype>以外的所有其他 HTML 元素。所有这些元素都应当被嵌套到 < html>和 < /html>标记之间。参见清单 12。

    清单 12. < !doctype> 标记示例

    XHTML

    < !doctype html> < html lang="en">

    1
    2
    < !doctype html>
    < html lang="en">

    表明文档类型为 html和使用语言为英语后,将要使用 < head>元素。该元素将包含脚本、浏览器支持信息、样式表链接、元信息和其他初始化功能。可以在 head部分中使用以下标记:

    ●< base>

    ●< link>

    ●< meta>

    ●< script>

    ●< style>

    ●< title>

    标记用于包含文档的实际标题,是中必须包含的元素。您将在浏览页面时在浏览器的顶部看到该标记包含的标题。清单 13 中的标记识别将用于呈现 HTML5 页面的 CSS3 样式表。调用的样式表为 main-stylesheet.css。

    清单 13. 标记示例

    XHTML

    < head> < title>HTML5 Fundamentals Example< /title> < link rel="stylesheet" href="main-stylesheet.css" /> < /head>

    1
    2
    3
    4
    < head>
    < title>HTML5 Fundamentals Example< /title>
    < link rel="stylesheet" href="main-stylesheet.css" />
    < /head>

    接下来将使用 < body>标记,之后是 < header>和 < hgroup> 标记,这些标记已经在前面进行了介绍。本例中的 < h1>区包含公司的名字(虚构的),即 Acme United,而< h2>区包含的信息表明副标题为 “一个简单的 HTML5 示例”。清单 14 显示了标记。< /h2>

    清单 14. < body> 标记和 < header> 标记示例

    XHTML

    < body > < header> < hgroup> < h1>Acme United< /h1> < h2>A Simple HTML5 Example< /h2> < /hgroup> < /header>

    1
    2
    3
    4
    5
    6
    7
    < body >
    < header>
    < hgroup>
    < h1>Acme United< /h1>
    < h2>A Simple HTML5 Example< /h2>
    < /hgroup>
    < /header>

    清单 15 显示了目前为止构建页面所使用的 CSS3。首先,为页面定义字体,然后定义正文的细节。在定义正文的大小后,为一级和二级标题标记设计标题段落结构。这些都是将在页面中使用的标题。

    清单 15. CSS3 示例 #1

    CSS

    * { font-family: Lucida Sans, Arial, Helvetica, sans-serif; } body { width: 800px; margin: 0em auto; } header h1 { font-size: 50px; margin: 0px; color: #006; } header h2 { font-size: 15px; margin: 0px; color: #99f; font-style: italic; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    * {
    font-family: Lucida Sans, Arial, Helvetica, sans-serif;
    }
    body {
    width: 800px;
    margin: 0em auto;
    }
    header h1 {
    font-size: 50px;
    margin: 0px;
    color: #006;
    }
    header h2 {
    font-size: 15px;
    margin: 0px;
    color: #99f;
    font-style: italic;
    }

     

    清单 16 展示了 < nav>标记,该标记将用于处理主站点的导航。

    清单 16. < nav> 示例

    XHTML

    < nav> < ul> < li>< a href="#">Home< /a>< /li> < li>< a href="#">About Us< /a>< /li> < li>< a href="#">Contact Us< /a>< /li> < /ul> < /nav>

    1
    2
    3
    4
    5
    6
    7
    < nav>
    < ul>
    < li>< a href="#">Home< /a>< /li>
    < li>< a href="#">About Us< /a>< /li>
    < li>< a href="#">Contact Us< /a>< /li>
    < /ul>
    < /nav>

    HTML5 还包含一个 < menu>标记 —该标记一度令一些设计师和开发人员感到困惑。这是因为导航功能常常被称为 “导航菜单”。HTML 版本 4.01 不赞成使用 < menu>标记,但是 HTML5 重新启用了该标记并使用它增强交互性。它不应当用于实现主导航。唯一用于实现主导航的标记应当为 < nav>标记。您将在本示例后面的部分使用 < menu>标记。

    导航的格式由 CSS3 实现。清单 17 中显示的每个 < nav>标记的定义都表示 < nav>标记内部的 < ul>和 < li>元素的特定状态。

    清单 17. CSS3 示例 #2

    CSS

    nav ul { list-style: none; padding: 0px; display: block; clear: right; background-color: #99f; padding-left: 4px; height: 24px; } nav ul li { display: inline; padding: 0px 20px 5px 10px; height: 24px; border-right: 1px solid #ccc; } nav ul li a { color: #006; text-decoration: none; font-size: 13px; font-weight: bold; } nav ul li a:hover { color: #fff; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    nav ul {
    list-style: none;
    padding: 0px;
    display: block;
    clear: right;
    background-color: #99f;
    padding-left: 4px;
    height: 24px;
    }
    nav ul li {
    display: inline;
    padding: 0px 20px 5px 10px;
    height: 24px;
    border-right: 1px solid #ccc;
    }
    nav ul li a {
    color: #006;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    }
    nav ul li a:hover {
    color: #fff;
    }

     

    接下来是 Article 区。这个区由 <article>标记定义,包含其自己的 < header>信息。< article>中的 < section>也包含它自己的 < header>标记。参见清单 18。

    清单 18. < article> 和 < section> 示例

    XHTML

    < article> < header> < h1> < a href="#" title="Link to this post" rel="bookmark">Article Heading< /a> < /h1> < /header> < p> Primum non nocere ad vitam Paramus . . . < /p> < section> < header> < h1>This is the first section heading< /h1> < /header> < p>Scientia potentia est qua nocent docentp . . .> < /section>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    < article>
    < header>
    < h1>
    < a href="#" title="Link to this post" rel="bookmark">Article Heading< /a>
    < /h1>
    < /header>
    < p> Primum non nocere ad vitam Paramus . . . < /p>
    < section>
    < header>
    < h1>This is the first section heading< /h1>
    < /header>
    < p>Scientia potentia est qua nocent docentp . . .>
    < /section>

    清单 19 显示了呈现页面格式的 CSS3 标记。注意,paragraph、header和 section区的定义都是针对它们所在的 < article>标记定义的。这里定义的 < h1>标记使用了与为页面级 < h1>标记定义的 < h1>标记不同的格式。

    清单 19. CSS3 示例 #3

    XHTML

    article > header h1 { font-size: 40px; float: left; margin-left: 14px; } article > header h1 a { color: #000090; text-decoration: none; } article > section header h1 { font-size: 20px; margin-left: 25px; } article p { clear: both; margin-top: 0px; margin-left: 50px; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    article > header h1 {
    font-size: 40px;
    float: left;
    margin-left: 14px;
    }
    article > header h1 a {
    color: #000090;
    text-decoration: none;
    }
    article > section header h1 {
    font-size: 20px;
    margin-left: 25px;
    }
    article p {
    clear: both;
    margin-top: 0px;
    margin-left: 50px;
    }

    中包含的第二个 < section>标记包含与第一个 < section>相同的基本信息,但是这一次将使用 < aside>、< figure>、< menu>以及 < mark>标记。参见清单 20。< aside>标记在这里用于显示不属于文本流部分的信息。< figure> 标记包含一个 Stonehenge 图形。这个 < section> 还包含 < menu>标记,您可以用来创建带有四个 Muse 名字的按钮。当单击其中一个按钮时,它将提供有关特定 Muse 的信息。< mark>标记在< /mark>标记的内部使用,用于突出显示 veni、vidi、vici。清单 20. < article> 和 < section> 示例< section>

    XHTML

    < header> < h1>Second section with mark, aside, menu & figure< /h1> < /header> < p class="next-to-aside"> . . . < mark>veni, vidi, vici< /mark>. Mater . . .< /p> < aside> < p>This is an aside that has multiple lines. . . .< /p> < /aside> < menu label="File"> < button type="button" onClick="JavaScript:alert('Clio . . .')">Clio< /button> < button type="button" onClick="JavaScript:alert('Thalia . . .')">Thalia< /button> |-------10--------20--------30--------40--------50--------60--------70--------80--------9| |-------- XML error: The previous line is longer than the max of 90 characters ---------| < button type="button" onClick="JavaScript:alert ('Urania . . .')">Urania < button type="button" onClick="JavaScript:alert ('Calliope . . .')">Calliope < /menu> < figure>< img src="stonehenge.jpg" alt="Stonehenge" width="200" height="131"/> < figcaption>Figure

    1. Stonehenge< /figcaption> < /figure> < /section>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    < header>
    < h1>Second section with mark, aside, menu & figure< /h1>
    < /header>
    < p class="next-to-aside"> . . . < mark>veni, vidi, vici< /mark>. Mater . . .< /p>
    < aside>
    < p>This is an aside that has multiple lines. . . .< /p>
    < /aside>
    < menu label="File">
    < button type="button" onClick="JavaScript:alert('Clio . . .')">Clio< /button>
    < button type="button" onClick="JavaScript:alert('Thalia . . .')">Thalia< /button>
    |-------10--------20--------30--------40--------50--------60--------70--------80--------9|
    |-------- XML error: The previous line is longer than the max of 90 characters ---------|
    < button type="button" onClick="JavaScript:alert ('Urania . . .')">Urania
    < button type="button" onClick="JavaScript:alert ('Calliope . . .')">Calliope
    < /menu>
    < figure>< img src="stonehenge.jpg" alt="Stonehenge" width="200" height="131"/>
    < figcaption>Figure 1. Stonehenge< /figcaption>
    < /figure>
    < /section>

     

    本部分的 CSS3 包含了 < p>标记的新定义,该标记的宽度要比页面的宽度小一些。这种改变允许将旁白显示在右侧,而不会与文本相互重叠。清单 21 显示了标记。

    清单 21. CSS3 示例 #4

     

    CSS

    article p.next-to-aside { width: 500px; } article > section figure { margin-left: 180px; margin-bottom: 30px; } article > section > menu { margin-left: 120px; } aside p { position:relative; left:0px; top: -100px; z-index: 1; width: 200px; float: right; font-style: italic; color: #99f; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    article p.next-to-aside {
    width: 500px;
    }
    article > section figure {
    margin-left: 180px;
    margin-bottom: 30px;
    }
    article > section > menu {
    margin-left: 120px;
    }
    aside p {
    position:relative;
    left:0px;
    top: -100px;
    z-index: 1;
    width: 200px;
    float: right;
    font-style: italic;
    color: #99f;
    }

     

    视频部分元素

    < article>的最后一部分是 video。示例视频是 ogg 格式,将在页面加载的同时自动地连续循环播放,同时为用户提供了暂停和播放控件。在许多新的实例中,ogg 视频采用扩展名 ogv(v表示视频),如清单 22 所示。< audio>标记的工作原理与此相同。

    清单 22. < article> 和 < section> 示例

    XHTML

    < section> < header> < h1>This is a video section< /h1> < /header> < p>< video src="" controls autoplay loop> < div class="no-html5-video">< p>This video will work in Mozilla Firefox or Google Chrome only. < /p> < /div> < /video>< /p> < /section> < /article>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    < section>
    < header>
    < h1>This is a video section< /h1>
    < /header>
    < p>< video src="http://people.xiph.org/~maikmerten/demos/BigBuckBunny.ogv" controls autoplay loop>
    < div class="no-html5-video">< p>This video will work in
    Mozilla Firefox or Google Chrome only. < /p>
    < /div>
    < /video>< /p>
    < /section>
    < /article>

    清单 23 显示了 video部分的 CSS3 定义。

    清单 23. CSS3 示例 #5

     

    CSS

    article > section video { height: 200px; margin-left: 180px; } article > section div.no-html5-video{ height: 20px; text-align: center; color: #000090; font-size: 13px; font-style: italic; font-weight: bold ; background-color: #99f; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    article > section video {
    height: 200px;
    margin-left: 180px;
    }
    article > section div.no-html5-video{
    height: 20px;
    text-align: center;
    color: #000090;
    font-size: 13px;
    font-style: italic;
    font-weight: bold ;
    background-color: #99f;
    }

     

    页面的页脚和结束部分如清单 24 所示。

    清单 24. < footer> 标记示例

    XHTML

    < footer> < p>Copyright: 2011 Acme United. All rights reserved.< /p> < /footer> < /body> < /html>

    1
    2
    3
    4
    5
    < footer>
    < p>Copyright: 2011 Acme United. All rights reserved.< /p>
    < /footer>
    < /body>
    < /html>

    页脚的 CSS3 如清单 25 所示。

    清单 25. CSS3 示例 #5

    CSS

    footer p { text-align: center; font-size: 12px; color: #888; margin-top: 24px; }

    1
    2
    3
    4
    5
    6
    footer p {
    text-align: center;
    font-size: 12px;
    color: #888;
    margin-top: 24px;
    }

     

    结束语

    随着 Web 页面的完成,本系列的第 1 部分也就此结束。本文的目标是介绍新的 HTML5 时代。HTML5 不仅仅是对 HTML4 的版本升级:它代表一种全新的数字化通信方式。通过结合使用 CSS3 和 JavaScript,HTML5 为开发人员提供了他们所需的全部内容。如果您愿意了解庞大的 HTML5 可以为您提供哪些帮助,您将加入日益增长的 HTML5 多媒体 Web 设计师和开发人员的队伍中。本系列的下一期文章将介绍如何对 HTML5 表单进行编码和格式化。

     

    赞 3 收藏 评论

    图片 3

    用Flash、HTML5和Unity开发网页游戏的现实

    2011/11/11 · HTML5 · 来源: 9RIA     · HTML5

    今天对于全球的Flash开发者来说是黑暗的一天,因为Adobe宣布将不再对移动设备上的浏览器进行Flash技术支持。在这之前,Adobe刚刚宣布了公司范围内的大幅度裁员。尽管这似乎并不是什么严重的问题,但是这却又使“Flash hate wagon”开始转动。

    首先,我只关心基于网页的游戏开发。因此,这篇文章只关注这个主题。这并不是一篇关于Flash和HTML5的争论文章, 也不是教你如何在移动设备上搭建应用程序。所以,这篇文章纯粹的是关注当今开发web game的现实。

    我比较了Flash,HTML5,Unity,因为他们是当今唯一可行的web game开发平台。我列了10个主题来比较他们:

    • 开发流程 – 用它来开发一个游戏有多容易?
    • 平台稳定性 – 当你开始和结束开发游戏这段时间内,它会发生改变吗?
    • 向后兼容性 – 用它开发的游戏10年后还能运行吗?
    • 移动性 – 移动设备的支持
    • 打包与分发 – 如何流通
    • 安全性 – 代码和知识产权保护
    • 货币化 – 如何运营赚钱
    • Facebook – 社交游戏的角度
    • 多少人会玩你的游戏
    • 3D支持 – Stage3D vs. WebGL vs. Unity

     

    上述的方面我认为是所有游戏开发者在评估一个新的开发平台时都应该注意的。我希望这些建议对新老Flash开发者来说都会有所帮助。

    1.开发流程

    Flash:用Flash来开发游戏非常简单。因为关于它有无数的书籍,网站,教程,框架,视频和源代码。对于开发工具来说,Flex route是免费的,Flash IDE需要付费。Flash拥有通用且强大的矢量渲染功能,这意味这你创建的动画的文件格式会非常小。它全面支持音频和大多数的Adobe应用程序,例如在Flash IDE中嵌入Illustrator 和 Photoshop。而且Flash还有大量的内置功能。

    HTML5:编辑器例如JetBrains 的Astella会使编程变的不那么痛苦。有一些优秀的调试工具使浏览器调试也非常简单。有许多关于HTML5游戏开发的书籍,网站,在线资源和示例程序。开发HTML5游戏的工具是免费,但是也有商业的工具,例如GameMaker HTML5 和Game Salad。如果你想让程序效率更高,并且你不怎么关注底层运行机制,你可以使用特定的的库类似ImpactJS。

    Unity:有一个优秀的可视化编辑器,并且可以嵌入主流的3D应用程序中。基础版本是免费供家庭使用的。也可以在公司里使用,每年需要交纳不到100K $ 的费用。专业版本带有各种插件,价格在1500$上下。一旦你有了Unity,大量的教程和资源也随之提供,所以学习并不是问题。

     

    2.平台稳定性

    Flash:Flash是跨平台的,它不在乎你用的操作系统和浏览器是什么,不管你是破旧的IE或是最新的Chrome。只要你使用的平台上有Flash Player,对于体验来说都是一样的。Adobe每年都会发布一个新版本和许多现有版本的更新。

    HTML5:HTML5一直处于变动中。基于此有2个副作用:第一,即便你什么都没有做,你的游戏仍然有潜在的崩溃可能。这是因为之前你已经升级或使用其他浏览器了。第二,你必须考虑多平台。在Chrome上可以运行只是第一步,你还必须处理IE,Firefox,Safari和各种操作系统。由此带来的维护成本也不能低估。另外,最大的技术挑战包括音频支持以及不一致的画布渲染速度等。

    Unity: Unity的web player拥有和Flash一样的优势。Unity的插件也是跨平台的。Unity本身也会定期的发布新功能。

     

    3.向后兼容性

    Flash:10年前,用AS1制作的游戏仍旧可以在现在的Flash Player11上运行。向后兼容性十分出色。

    HTML5:对于HTML5来说,比较向后兼容性有点不公平,因为它还在发展中。这意味着,如果它不符合W3C标准,就会被废弃。

    Unity:Unity并不支持以前的插件,最开始我开期待它会像Flash一样,但似乎并不是这样。

     

    4.移动性

    Flash:直到今天前,我可以说,除了iOS平台,Flash插件对于移动平台的支持是伟大的。 但是Adobe官方宣布已经不再对移动设备上的Flash Player插件继续支持了,你可以认为它已经完全死了。当然你可以通过AIR来创建移动应用程序,但是这些不属于web game的范畴,所以我们不在此进行深入讨论。Stage3D对于移动的支持并不成熟,随着许多硬件厂商的合并,以及逐渐老化的AVM,对于Adobe的开发者来说是一场艰难的战争。种种迹象表明,在重建过程中,Adobe已经把Oliver Goldman从AIR团队中调到云项目。Oliver在AIR中是核心人物,至于结果怎样,只能仁者见仁了。

    HTML5:HTML5对于移动的支持力度越来越强,iOS5上已经看到了性能的明显提升。当移动浏览器开始介入这些新特性,例如触摸事件和加速度的支持,我对于HTML5的前景逐渐看好。当然,你必须处理不同的屏幕分辨率和画面比例,但是这个问题不是只有HTML5有。

    Unity:Unity并不支持移动浏览器上的插件。考虑到Unity的强项在于原生移动应用程序的编译,我能理解原因。

     

    5.打包与分发

    Flash:Flash的游戏最终都压缩成一个SWF文件。SWF文件可以简单地通过带有HTTP服务的网站进行传输。或者,它可以锁定到一个具体的URL上。Flash游戏的门户网站完全基于SWF文件的流动方式。SWF文件传播地越广,你挣的钱就越多。

    HTML5:对于HTML5的游戏来说,没有跨平台或者统一的打包方式。那些最大的游戏门户网站都不允许开发者上传游戏。我认为是因为涉及到安全问题,它们不允许在站点上运行外来的JS程序。这就意味着传播HTML5游戏的唯一方式就是通过URL共享到一个目的站点,或者通过iFrame来嵌入。最终,是由开发者或赞助商来为给他们的游戏提供上传站点的主机费用买单。Flash传播游戏的方式是从站点来取出SWF文件,然后hosting这些SWF文件。这听起来不那么臭名招住,因为这的确是Flash挣钱的方式。门户网站可以使用带有沙箱参数设置的iFrame,但是这样做会阻止HTML5游戏需要使用的特性,例如本地存储和表单。

    Unity:Unity和Flash类似,因为它也会最终创建出一个单一文件,然后上传到游戏门户网站,例如Kongregate。

     

    6.安全性

    Flash:SWF并不完美,但至少它能打包你所有的资源和代码到一个单一的文件,这就需要对它本身的技术很了解或者第三方的软件才能破解它。市场上有很多SWF保护服务和代码混淆软件,基本上可以防止随意的黑客和盗贼。

    HTML5: JS代码可以混淆,但是不能被未加密的客户端加密。在内存中运行时,代码很容易被修改。图形和音频内容极容易被盗,可以通过Chrome或者Firefox的对象检查器,甚至通过浏览器的缓存文件夹。有人认为有一些保护HTML5资产的方式,并且认为Flash的资产一样容易被盗用。我不打算进入文件保护的辩论,我只想说,可以用来保护HTML5资产的方法都可以应用到Flash中。

    Unity:和Flash类似。如果什么人有足够的决心来盗取它的资产,他会需要相当多的技术知识。

     

    7.货币化

    Flash:有许多很好的方式来挣钱,包括:游戏赞助,在游戏中的广告,与游戏门户网站的收入分成,广告分成,游戏中的交易,雇佣式游戏打工等等。我知道很多开发者完全不需要赞助商,只需要游戏和广告收入分成。网络中有大量为广告服务的API,只需要简单的上传你的游戏,就可以等到长期收入分成。

    HTML5: 存在一些游戏中的广告服务,也可以把Google广告放在游戏中。我还没看到任何HTML5的游戏赞助市场或者收入分成交易。在游戏中的交易服务,比如Fortumo,已经存在和完善。

    Unity:这里我不太懂,也许读者可以补充。

     

    8.Facebook

    Flash:Facebook上最流行的游戏都是用的Flash。The Sims Social每个月3600万的玩家使用的都是Flash。新的水果忍者同样使用Flash,并且会用到Flash 11的新特性。绝大部分的Zynga游戏也都使用Flash。之所以会这样,是因为Flash的受众,现有的技能(Flash开发者众多)和简单的开发流程。同时在Facebook上可以有很多方式来挣钱,因为它有大量的第三方服务和API接口。
    HTML5: 我努力在Facebook上寻找最流行的纯HTML5游戏。当然肯定会有一些,因此,如果你找到了请帖链接。Zynga在2010年就收购了Dextrose,但是我还没看到什么结果。一些公司已经发布HTML5游戏到Facebook上,比如OMGPOP的Gem Rush,每日用户10人。但是Gem Rush只是用了HTML5的API,游戏本身还是Flash的!因此我的结论,目前为止,Facebook上最大的玩家群体还是使用Flash。

    Unity:看上去Unity游戏在Facebook上也有一些赢利点。如UberStrike (每个月83万玩家) 和King’s Bounty(每个月2万玩家)。只要游戏内容足够吸引人,Facebook的用户也不方队安装Unity插件。

     

    9.多少人会玩你的游戏

    Flash:因为事实上,很多桌面用户都连接到互联网玩游戏,所以Flash的用户数量是巨大的。一个标准的Flash游戏在第一年通常有2-3百万次的访问量。好的Flash游戏当然次数更多。我们的游戏Home Sheep Home一上线就有每天1百万的访问量,在18个月内已经有1亿的访问量。这是一个惊人的数字。加上Facebook巨大的用户群,一定会有成百上千的用户在玩Flash游戏,玩家完全不是你的问题。

    HTML5: 老实说,我无法找到任何相关数据,可能这个技术太新了,也没有用它做出来的好游戏。从技术上讲,可以说,潜在的用户可以有10亿,但是究竟事实上能有多少,开发者可以试试。

    Unity:虽然Unity官方声明了玩家的数量,但是并没有第三方的统计。Kongregate上只有总共577000的访问量。而最好的Flash的游戏已经有2500万的访问量。事实上,排名前一百的Flash游戏没有低于250万的访问量。

     

    10.3D支持

    Flash:Flash Play 11引入了Stage3D,它本质上是OpenGL ES 2.0。Adobe已经做了一个标准化的工作来实现它,但是也有一大堆注意事项。首先,游戏需要用wmode=direct来嵌入。而大多数的游戏门户网站还不支持,所以如果你的游戏放到一个不支持它的门户上,它根本不会运行3D硬件。其次,不支持GPU的黑名单很令人丧气。任何2009年前的驱动程序无法工作;最常见的英特尔GMAS(板载图形芯片)也无法工作。而在2007年,90%的个人电脑都用了因特尔GMAS,这是个真正的大问题。当然Adobe必须要划一条线,但是Flash的吸引力在于它无所谓运行在什么样的硬件上。如果你用了Stage3D,实际上你已经把巨大的潜在玩家抛弃了。所以必须非常小心的选择这条路,确保你能尽快的回收资本。

    HTML5: 在这里我们谈WebGL。它和Stage3D在技术层面上有很多相似点,但是在很多关键领域有缺陷:不能全屏,没有鼠标捕获(Flash Player11.2支持),没有多重渲染目标,没有instanced drawing等等。在Autodesk的博客上有一片很好的文章说了这些问题。当然这些只是短期内的技术难点,并且最终将可以被克服。WebGL最大的问题在于Microsoft目前的立场是不支持它。Microsoft不是WebGL工作组的成员,而且不支持WebGL的任何格式。由于IE浏览器仍然有很大的占有率,所以这个不容忽视。

    Unity:Unity当然支持3D。在有限的测试中,Unity结果完美。当然你需要安装Unity的浏览器插件。但是如果你知道你的游戏玩家足够,那么Unity仍然是目前最好的3D游戏解决方案。Unity宣称将支持导出Unity游戏成Flash格式,而且不会有Stage3D带来的GPU黑名单问题。我真想把钱给Unity,让他们能够在不远的将来能够把Unity游戏导出成WebGL格式。

    图片 4

    1. 浏览器缓存基本认识

    它分为强缓存和协商缓存:
    1)浏览器在加载资源时,先根据这个资源的一些http header判断它是否命中强缓存,强缓存如果命中,浏览器直接从自己的缓存中读取资源,不会发请求到服务器。比如某个css文件,如果浏览器在加载它所在的网页时,这个css文件的缓存配置命中了强缓存,浏览器就直接从缓存中加载这个css,连请求都不会发送到网页所在服务器;

    2)当强缓存没有命中的时候,浏览器一定会发送一个请求到服务器,通过服务器端依据资源的另外一些http header验证这个资源是否命中协商缓存,如果协商缓存命中,服务器会将这个请求返回,但是不会返回这个资源的数据,而是告诉客户端可以直接从缓存中加载这个资源,于是浏览器就又会从自己的缓存中去加载这个资源;

    3)强缓存与协商缓存的共同点是:如果命中,都是从客户端缓存中加载资源,而不是从服务器加载资源数据;区别是:强缓存不发请求到服务器,协商缓存会发请求到服务器。

    4)当协商缓存也没有命中的时候,浏览器直接从服务器加载资源数据。

    2. 强缓存的原理

    当浏览器对某个资源的请求命中了强缓存时,返回的http状态为200,在chrome的开发者工具的network里面size会显示为from cache,比如京东的首页里就有很多静态资源配置了强缓存,用chrome打开几次,再用f12查看network,可以看到有不少请求就是从缓存中加载的:

    图片 5

    强缓存是利用Expires或者Cache-Control这两个http response header实现的,它们都用来表示资源在客户端缓存的有效期。

    Expires是http1.0提出的一个表示资源过期时间的header,它描述的是一个绝对时间,由服务器返回,用GMT格式的字符串表示,如:Expires:Thu, 31 Dec 2037 23:55:55 GMT,它的缓存原理是:

    1)浏览器第一次跟服务器请求一个资源,服务器在返回这个资源的同时,在respone的header加上Expires的header,如:

    图片 6

    2)浏览器在接收到这个资源后,会把这个资源连同所有response header一起缓存下来(所以缓存命中的请求返回的header并不是来自服务器,而是来自之前缓存的header);

    3)浏览器再请求这个资源时,先从缓存中寻找,找到这个资源后,拿出它的Expires跟当前的请求时间比较,如果请求时间在Expires指定的时间之前,就能命中缓存,否则就不行。

    4)如果缓存没有命中,浏览器直接从服务器加载资源时,Expires Header在重新加载的时候会被更新。

    Expires是较老的强缓存管理header,由于它是服务器返回的一个绝对时间,在服务器时间与客户端时间相差较大时,缓存管理容易出现问题,比如随意修改下客户端时间,就能影响缓存命中的结果。所以在http1.1的时候,提出了一个新的header,就是Cache-Control,这是一个相对时间,在配置缓存的时候,以秒为单位,用数值表示,如:Cache-Control:max-age=315360000,它的缓存原理是:

    1)浏览器第一次跟服务器请求一个资源,服务器在返回这个资源的同时,在respone的header加上Cache-Control的header,如:

    图片 7

    2)浏览器在接收到这个资源后,会把这个资源连同所有response header一起缓存下来;

    3)浏览器再请求这个资源时,先从缓存中寻找,找到这个资源后,根据它第一次的请求时间和Cache-Control设定的有效期,计算出一个资源过期时间,再拿这个过期时间跟当前的请求时间比较,如果请求时间在过期时间之前,就能命中缓存,否则就不行。

    4)如果缓存没有命中,浏览器直接从服务器加载资源时,Cache-Control Header在重新加载的时候会被更新。

    Cache-Control描述的是一个相对时间,在进行缓存命中的时候,都是利用客户端时间进行判断,所以相比较Expires,Cache-Control的缓存管理更有效,安全一些。

    这两个header可以只启用一个,也可以同时启用,当response header中,Expires和Cache-Control同时存在时,Cache-Control优先级高于Expires:

    图片 8

    提示:这篇译文翻译了大部分原文,英文原文后面还有有关“Adobe将会多久支持Flash播放器”和“Flash游戏开发人员该如何应对”的内容讨论。

     

    赞 收藏 评论

    图片 9

    本文由金沙国际官网发布于web前端,转载请注明出处:浏览器缓存知识小结及应用,HTML5和Unity开发网页

    关键词: