引言
HTML5 一直是非常热门的话题,因此此系列文章主要从一些基本功能开始讲起,逐步深入了解HTML5的新概念。
首先了解一些基本的术语和概念。
HTML5不是基于SGML 语言的,因此不需要DTD ,它是一种全新的标记语言,有自己的解析规则,HTML5的语法规则与之前版本有很大的差别,可以称的上是一种全新的语言。 HTML5 的Doctype 非常简单: <!DOCTYPE html>
1. 理解新的页面结构语义 HTML 旧版本并没有标准的文档定义规则,比如如何定义文档Header或Footer等,很多人都在使用div来修饰一些CSS ,常常会导致不一致性。
HTML5 定义标准tag如Header,Footer,nav,FlipCaption等。这些标签可使得标记语言更有意义。 注意: 这些标签不提供特殊的渲染功能,仅仅使的HTML 文档结构更具有意义。
Lab2_ 新的输入属性 新类型值 之前为了获得不同的UI 元素,如DatePicker,range Picker,color Picker等,会使用不同的类库。 HTML5 为输入元素引入了新属性“type”,看以下示例:
实验3——了解HTML5 Datalist 控件 DataList是HTML5中的新标签,能够在输入框中,实现自动完成功能。 可通过3个步骤实现: 1. 创建DataList <datalist id="Hobbies"> <option>Reading books</option> <option>Watching movies</option> <option>Playing games</option> </datalist>
实验 4 输出元素 HTML5 中引入标准的语义“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>
<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>
<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>
<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>
<style> .invalid { display: none; } </style>
<input type="submit" value="Register" onclick="$('.invalid').hide();" />
<input type="email" name="TxtEmail" id="TxtEmail" oninvalid="OnInvalidEmail();" required/>
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;获取包含非法值的控件,如上的Email textbox;
element.validity; 包含控件的验证信息,如valueMissing,typeMismatch,badInput等。
如下是简答的缓存Demo 1.创建新的ASP.NET Web 应用 2. 添加Style.css,在Block 中添加以下类: .DivStyle { background-color:silver; }
3. 创建manifest 文本文件: CACHE MANIFEST # ver 1 CACHE: /Styles/Style.c
4. 创建需要缓存的文件
<%@ 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 修改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 再次刷新网页