缓存验证 Visual Studio 2013 应用程序 HTML5 初学者 HTML ASP.NET C#

3 天学习 HTML 5 - 第 1 天

Marla Sukesh

4.85/5 (220投票s)

2014年10月9日

CPOL

16分钟阅读

377745

17858

欢迎来到“3 天学习 HTML 5”系列文章的第一天

引言

HTML 5 是近来一个热门话题。因此，我决定写一篇关于它的完整学习教程。这将是一个为期两天的系列文章。我们将从非常基本的功能开始，然后一步一步地深入到高级功能和场景。

注意： 作为一名微软的从业者，每当需要服务器端技术时，我都会使用 C# 和 Asp.Net。

本文不包含哪些内容？

如果您对 HTML 一无所知，那么本文不适合您。我们不会在这里讨论 break (<br>)、Bold (<b>) 标签，而是关注 HTML 5 中的新概念。

您可以在这里学习基础 HTML。

完整列表

HTML 5 简介

让我们开始理解一些基本、有趣但又鲜为人知的术语和概念。

SGML、HTML 和 XML 有什么区别？
什么是文档类型声明（Doc type）？
HTML 5 有何不同？
理解 HTML

SGML、HTML 和 XML 有什么区别？

SGML 代表标准通用标记语言，用于定义标准的标记语言。简而言之，它定义了文档的外观。
HTML 代表超文本标记语言，是一种基于 SGML 的标准标记语言，用于创建网页。定义标记的规则存在于 DTD 中，而 DTD 是使用 SGML 创建的。
XML 代表可扩展标记语言，源自 SGML，其目的是为了满足互联网日益增长的需求。HTML 有一些局限性，XML 克服了这些局限性。XML 仅仅是 SGML 的一个子集，用于表示数据。

什么是文档类型声明（Doc type）？

当您尝试使用 Dreamweaver 或 Visual Studio 等工具创建 HTML 页面时，您会发现在文档顶部始终有以下一行：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

您有没有想过这是什么？

它只是一个向网页浏览器指示页面所用 HTML 版本的指令。通过 doctype，我们引用一个 DTD，该 DTD 定义了 HTML 文档的结构、允许使用的标签、父子关系等。简而言之，DTD 包含规则。

那么，以前的 HTML 在有 Doctype 时是如何工作的？

大多数浏览器表示：“即使您不提供 DTD 也没关系。我可以很好地理解 HTML。我知道它的规则，所以我也知道如何渲染它。”

这就是为什么大多数开发人员对 DTD 和 doctype 不熟悉的原因。

HTML 5 与以前的版本有何不同？

HTML 5 不基于 SGML，因此不需要 DTD。它是一种全新的标记语言，具有自己的解析规则。其规范和语法与前一版本非常相似，但它是一门全新的语言。

对于 HTML 5，doctype 非常简单。

<!DOCTYPE html>

根据 w3.org 的说法，“所有 HTML 文档的顶部都必须有 DOCTYPE，无论它是 HTML4 还是 HTML 5。省略时，浏览器倾向于使用与某些规范不兼容的不同渲染模式。在文档中包含 DOCTYPE 可确保浏览器尽最大努力遵循相关规范。”

HTML 5 新特性

HTML 5 新功能的主要目的是为 Web 开发世界提供标准。

长期以来，我们一直依赖许多第三方库/插件来实现一些常见功能，如日期选择器、动画、验证、音视频播放、离线浏览、客户端多线程等。

现在，我们将能够以标准方式实现许多此类功能。

对初学者注意 – 标准意味着每个人都将遵循相同的方法来实现某个目标。例如 – 您将在（所有未来的应用程序）中看到相同的验证代码。目前没有标准。有人使用 jQuery 验证，而有人使用其他东西。但从现在起将会有标准。

让我们逐一探索它们。

实验1 – 理解新的页面结构语义

当我们想到 Web UI 时，您会想到什么？

页眉（不是 head 标签 – 页面的页眉）、页脚、导航栏、页面内容、图片、图片的说明、侧边栏等。

您可以看到左侧有一个外星人图像，右侧有一个普通男孩图像。

每个人都可以轻松地从右侧图像中找到并识别出身体的每个部分，因为它是一个标准。左侧图像则不是这样。

同样的逻辑也适用于 UI 开发。

以前的 HTML 没有标准的标签或元素来定义文档的不同可见部分，如文档的页眉、页脚、内容等。有些人使用带有某些 CSS 样式的“div”，有些人使用“table…tr…td”。这种方法的缺点是缺乏一致性。

现在，HTML 5 支持标准的标签，如 Header、Footer、nav、FigCaption（图片说明）等，每个标签都代表一个特殊的区域。

这些标签使我们的标记成为语义标记。

注意：- 此标签不提供任何特殊的渲染优势。它们只是使我们的 HTML 结构更有意义。

实验2 – 新输入属性演示

新的类型值

以前，开发人员使用不同的库来获取不同的 UI 元素，如日期选择器、范围选择器、颜色选择器等。

现在，HTML 5 通过为 input 元素的“type”属性引入新属性来带来标准化。

让我们看看其中的一些。

数字

<input type="number" name="MyNuberElement" id="MyNumberElement" />

Range

<input type="range" name="MyRangeElement" id="MyRangeElement"/>

Color

<input type="color" id="MyColorElement" name="MyColorElement" />

日期

<input type="date" id="MyDateElement" name="MyDateElement" />

时间

<input type="time" id="MyTimeElement" name="MyTimeElement"/>

日期时间-本地

<input type="datetime-local" id="MyDateTimeLElement" name="MyDateTimeLElement" />

DateTime（包括时区）

<input type="datetime" id="MyDateTimeElement" name="MyDateTimeElement"/>

<input type="month" id="MyMonthElement" name="MyMonthElement" />

<input type="week" id="MyWeekElement" name="MyWeekElement" />

一些有用的属性

Autofocus

此属性允许我们在页面加载时设置初始焦点。

…

<label for="birthMonth">Birth Month</label>

<input type="month" id="MyMonthElement" name="MyMonthElement" autofocus />

…

此代码使焦点默认设置在“MyMonthElement”控件元素上，当页面首次加载时。

注意： 如果“autofocus”附加到多个控件上，焦点将设置在第一个控件上。

Placeholder

允许我们在输入控件上设置水印。

<input type="text" placeholder="Enter Value" id="MyPlaceHolderControl"

               name="MyPlaceHolderControl" />

实验3 – 理解 HTML 5 Datalist 控件

Datalist 是 HTML 5 中的一个新标签，它允许我们为输入文本框添加自动完成功能。

这是一个简单的 3 步任务。

步骤 1 – 创建 Datalist

<datalist id="Hobbies">

    <option>Reading books</option>

    <option>Watching movies</option>

    <option>Playing games</option>

</datalist>

步骤 2 – 创建输入控件并绑定列表

<input type="text" name="TxtHobbies" value="" list="Hobbies" />

步骤 3 – 执行和测试

如果您有兴趣学习如何使用 Asp.net MVC 动态创建 datalist，请点击此处。

实验4 – Output 元素

计算是每个应用程序的重要组成部分，有时我们经常在 UI 中显示计算出的值。在 HTML 5 之前，没有标准的元素用于显示此类结果。有些人使用“span”，有些人使用“div”，而有些人使用“禁用的输入文本框”。

任何人仅凭外观很难理解标签/元素/控件的用途。

在 HTML 5 中，通过引入一个标准的语义标记“Output”来解决了这个问题。

<div oninput=

        "document.getElementById(MyOutputElement).value =

        (document.getElementById('input1').valueAsNumber) +

        (document.getElementById('input2').valueAsNumber)">

    <input id="input1" name="input1" type="number" value="1"> +

    <input id="input2" name="input2" type="number" value="2"> =

    <output id="MyOutputElement">3</output>

</div>

注意： 就像 lab2 的标记一样，Output 元素除了增加 UI 的语义含义外，不提供任何特殊优势。

实验5、6 和 7 – 理解 HTML 5 验证功能

从应用程序开发的第一天起，验证就是最重要的功能之一。为了实现验证，我们使用过许多库，如 jQuery validation、live validation 等。

但现在，借助新的 HTML 5 验证支持，验证代码将成为标准的代码。

实验5 – 使用 input 元素的“type”属性实现验证

步骤 1 – 创建 Form 标签并按如下方式添加不同的输入元素

<form>

 <table>

  <tr>

    <td>

        <label>E-mail:</label>

        <input type="email" id="email" name="email" />


        <label>URL:</label>

        <input type="url" id="url" name="url" />


        <label>Telephone</label>

        <input type="tel" id="phone" name="phone" />


        <label>Number Demo:</label>

        <input type="number" name="MyNumberElement" id="MyNumberElement" />


        <label>Range Demo:</label>

        <input type="range" name="MyRangeElement" id="MyRangeElement" />


        <label>Color Demo</label>

        <input type="color" id="MyColorElement" name="MyColorElement" />

    </td>

    <td>

        <label>Date Demo</label>

        <input type="date" id="MyDateElement" name="MyDateElement" />


        <label>Time Demo</label>

        <input type="time" id="MyTimeElement" name="MyTimeElement" />


        <label>DateTime Local Demo</label>

        <input type="datetime-local" id="datetime" name=" datetime" />


        <label>Month Demo</label>

        <input type="month" id="month" name="month" />


        <label>Week Demo</label>

        <input type="week" id="MyWeekElement" name="MyWeekElement" />


        <div style="text-align:right">

          <input type="submit" value="validate" />

        </div>

    </td>

  </tr>

 </table>

</form>

注意： 在代码中，您可以看到我们引入了一些新的输入类型，如 email、url、tel 等。这些类型仅用于验证。就渲染而言，它们只会生成文本框。

步骤 2 – 执行并测试应用程序

如您所见，输入控件中的值会被验证，并且在验证失败时会自动显示预定义的错误消息（在弹出窗口中）。

注意： 在图像中，我只展示了三个输入控件的演示。您可以下载附件中的源代码进行其他检查。

实验6 – 使用自定义验证属性实现验证

在 HTML 5 中，向输入控件添加了新属性以支持验证。让我们演示其中的一些。

步骤 1 – 按如下方式创建输入控件

<form>

    <label>Email</label>

    <input type="email" name="TxtEmail"

          id="TxtEmail" required />


    <label>User Name</label>

    <input type="text" name="username"

          id="username" pattern="[a-zA-Z]{5,}" />


    <label>Age</label>

    <input type="number" name="TxtAge"

          id="TxtAge" min="10" max="50" />


    <br /><input type="submit" value="Register" />

</form>

解释

Required 属性使文本框成为必填字段
Pattern 属性设置为正则表达式，表示它应该包含最少 5 个字符，最多 10 个字符
Min 和 Max 属性与数字输入控件配合使用，并强制控件包含该范围内的值。

输出

实验7 – 自定义验证

我们可以通过处理“oninvalid”事件来完全自定义 HTML 5 验证。

步骤 1 – 创建输入控件，附加验证属性并按如下方式添加自定义错误消息。

<form>

    <label>Email</label>

    <input type="email" name="TxtEmail"

            id="TxtEmail"  required/>

    <span class="MissingEmailSpan invalid">Email Missing</span>

    <span class="InvalidEmailSpan invalid">Invalid email</span>



    <label>User Name</label>

    <input type="text" name="username"

            id="username" pattern="[a-zA-Z]{5,10}"  />

    <span class="InvalidUserNameSpan invalid">Username not matching with pattern</span>


    <label>Age</label>

    <input type="number" name="TxtAge"

            id="TxtAge" min="10" max="50" />

    <span class="AgeIsNotInRangeSpan invalid">Age must be be between 10 and 50</span>

    <span class="InvalidAgeSpan invalid">Invalid Age</span>


    <br /><input type="submit" value="Register" />

</form>

步骤 2 – 添加 style 标签并创建 CSS 来隐藏错误消息

<style>

        .invalid {

            display: none;

        }

</style>

步骤 3 – 在提交按钮点击时隐藏错误消息。

<input type="submit" value="Register" onclick="$('.invalid').hide();" />

步骤 4 – 当输入控件包含无效值时调用函数。

<input type="email" name="TxtEmail" id="TxtEmail" oninvalid="OnInvalidEmail();" required/>

（对所有输入控件重复上述步骤）

步骤 5 – 按如下方式创建事件处理 JavaScript 函数。

function OnInvalidEmail()

{

    event.preventDefault();

    var element = event.srcElement;

    var validity = element.validity;

    if (validity.valueMissing) {

        $('.MissingEmailSpan').show();

    }

    else if (validity.typeMismatch) {

        $('.InvalidEmailSpan').show();

    }

}

（对所有输入控件重复上述步骤）

解释

event.preventDefault(); - 它将阻止默认行为。显示错误消息作为弹出窗口。
event.srcElement - 包含无效值的控件。在本例中是电子邮件文本框。
element.validity – 包含控件的验证信息。重要属性是：
- valueMissing – 当控件附加了“required”属性且当前值为空时为 true。
- typeMismatch – 当类型与控件的当前值不匹配时为 true。
- badInput – 当控件中的值无效时为 true。例如 – 这是一个数字文本框，但输入了字母字符。
- rangeOverflow 和 rangeUnderflow – 当控件是数字文本框且值不在范围内时为 true。

步骤 5 – 执行并测试应用程序

您可以下载附件中的源代码以进行完整演示。

实验8、9、10 和 11 - HTML 5 中的应用程序缓存

当有人说“Web 应用程序”时，您首先想到的是什么？互联网，对吧？

您有互联网 ==> 您在线 ==> 您可以使用该应用程序

您的互联网中断 = > 您离线 ==> 您无法使用该应用程序

想象一下 Outlook。即使您离线，它也为您提供了查看过去邮件的选项。试想一下，如果 Facebook、Gmail 具有这样的功能。如果我们的互联网应用程序也能在离线模式下工作，那将使我们的生活更轻松。

现在，借助 HTML 5 应用程序缓存，这成为可能。让我们通过示例演示来理解它。

实验8 – 简单的应用程序缓存演示

步骤 1 – 创建一个新的 Asp.net Web Forms 应用程序

打开 Visual Studio 并创建一个新的空 asp.net Web Forms 应用程序

步骤 2 – 添加 Style.css

右键单击项目。添加新文件夹并命名为 Styles
右键单击 styles 文件夹 >> 添加 >> 新建项。选择样式表并命名为 style.css
在 style.css 中添加以下 CSS 块

.DivStyle {

    background-color:silver;

}

步骤 3 – 创建 manifest 文本文件

右键单击项目。添加 >> 新建项。选择文本文件并命名为 MyCache.txt
在其中添加以下内容

CACHE MANIFEST

# ver 1


CACHE:

/Styles/Style.css

步骤 4 – 创建需要缓存的文件

右键单击您的项目。添加 >> 新建项。选择 Web Form 并命名为 MyPage.aspx
在文件中添加以下内容

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MyPage.aspx.cs" Inherits="MyPage" %>


<!DOCTYPE html>


<html  manifest="MyCache.txt">

<head runat="server">

    <title></title>

    <link href="Styles/Style.css" rel="stylesheet" />

</head>

<body>

    <form id="form1" runat="server">      

    <div class="DivStyle" id="MyDiv">

        Hi, Execution count is 1

    </div>

    </form>

</body>

</html>

步骤 5 – 执行应用程序

步骤 6 – 离线

步骤 7 – 刷新页面

您会注意到您仍然可以浏览该应用程序。

步骤 8 – 更改 Web Form

打开 MyPage.aspx。并更改“MyDiv”中的内容。

<div class="DivStyle" id="MyDiv">

    Hi, Execution count is 2

</div>

步骤 9 – 执行应用程序

这不是新的输出。它没有刷新。

步骤 10 – 更改 manifest 文件

CACHE MANIFEST

# ver 3


CACHE:

/Styles/Style.css

步骤 11 – 刷新页面两次

现在您将看到更新的输出。

说明：逐步理解

Manifest 文件中的第一行“CACHE MANIFEST”表示这是一个 manifest 文件。
在 html 标签的“manifest”属性中，表示“MyPage.aspx”需要被缓存。
在 manifest 文件中有一个“CACHE”部分。它将包含运行 MyPage.aspx 所需的文件列表。所有这些文件都将与 MyPage.aspx 一起被缓存。
最终用户在第一次请求时会获得最新内容，然后获得缓存。所有后续请求都将获得缓存版本。
当 manifest 文件中的内容发生变化时，缓存会更新，因此在 manifest 文件中，“CACHE MANIFEST”关键字之后添加了一个注释行。在本例中，我们将其称为“ver 2”，但它可以是任何内容。
当最终用户发出请求时，如果请求的内容已被缓存，浏览器将返回缓存版本的内容，但同时，浏览器会在后台请求 manifest，并检查 manifest 是否已在服务器上更改。如果已更改，缓存将更新。但正如我所说，这将在后台完成，因此当前请求将获得旧内容。因此，我们需要双重刷新。

实验9 – 解决双重刷新问题

为此，只需在您的页面中添加以下代码。

<script>

    window.applicationCache.onupdateready = function (e) {

        applicationCache.swapCache();

        location.reload();

    }

</script>

onupdateready 事件将在缓存更新后立即触发。

注意 – 在练习时，请确保在每次实验前手动清除应用程序缓存。如果您是 Chrome 用户，可以通过以下方式操作：

点击齿轮图标，然后进入设置。
展开高级设置。
点击内容设置
点击所有 Cookie 和网站数据

在搜索框中输入 localhost 并点击删除图标。

实验10 – 了解更多关于 manifest

“CACHE”不是 manifest 文件中唯一的节。还有其他。

NETWORK – 如果您正在缓存一个页面，您必须指定其中的所有资源。意味着页面使用的所有 CSS 文件、JS 文件、图片等。
在某些情况下，我们希望某些资源仅在线可用。离线时不应提供。

NETWORK 部分允许我们列出我们不想缓存的那些。

FALLBACK – 在某些情况下，我们希望某些资源在离线时被其他资源替换。例如，在线时一切都应该是“红色”，但离线时一切都应该是“绿色”。

Fallback 允许我们定义这些设置。

让我们做一个演示来理解它。

步骤 1 – 创建一个新的 Asp.net Web Forms 应用程序

打开 Visual Studio 并创建一个新的空 asp.net Web Forms 应用程序

步骤 2 – 创建样式表文件

右键单击项目。添加新文件夹并命名为 Styles
右键单击 styles 文件夹 >> 添加 >> 新建项。选择样式表并命名为 style.css
在 style.css 中添加以下 CSS 块

.Div1 {

    background-color:silver;

}

右键单击 styles 文件夹 >> 添加 >> 新建项。选择样式表并命名为 style2.css
在 style2.css 中添加以下 CSS 块

.Div3 {

    background-color:silver;

}

右键单击项目。添加新文件夹并命名为 OnlineStyles
右键单击 OnlineStyles 文件夹 >> 添加 >> 新建项。选择样式表并命名为 Style3.css
在 style.css 中添加以下 CSS 块

.Div3 {

    background-color:silver;

}

右键单击项目。添加新文件夹并命名为 OfflineStyles
右键单击 OfflineStyles 文件夹 >> 添加 >> 新建项。选择样式表并命名为 Style4.css
在 style.css 中添加以下 CSS 块

.Div3 {

    background-color:lightbue;

}

步骤 3 – 创建 manifest 文本文件

右键单击项目。添加 >> 新建项。选择文本文件并命名为 MyCache.txt
在其中添加以下内容

CACHE MANIFEST

# ver 1


CACHE:

/Styles/Style.css

# Comment – Style.css will be cached with page


NETWORK:

/Styles/Style2.css

# Comment – Style2.css will be available only online


FALLBACK:

OnlineStyles\Style3.css OfflineStyles\Style4.css

# Comment – Style3.css will be used when online and style4.css will be cached and used when application is offline

步骤 4 – 创建需要缓存的文件

右键单击您的项目。添加 >> 新建项。选择 Web Form 并命名为 MyPage.aspx
在文件中添加以下内容

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MyPage.aspx.cs" Inherits="MyPage" %>

<!DOCTYPE html>


<html  manifest="MyCache.txt">

<head runat="server">

    <title></title>

    <link href="Styles/Style.css" rel="stylesheet" />

    <link href="Styles/Style2.css" rel="stylesheet" />

    <link href="OnlineStyles/Style3.css" rel="stylesheet" />

    <script>

        window.applicationCache.onupdateready = function (e) {

            applicationCache.swapCache();

            location.reload();

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">      

    <div class="Div1" id="MyDiv1">

        Hi, Execution count is 1

    </div>  

    <div class="Div2" id="MyDiv2">

        Hi, Execution count is 1

    </div>  

    <div class="Div3" id="MyDiv3">

        Hi, Execution count is 1

    </div>

    </form>

</body>

</html>

步骤 5 – 执行应用程序