三天学会HTML5 之第一天

引言

HTML5 一直是非常热门的话题，因此此系列文章主要从一些基本功能开始讲起，逐步深入了解HTML5的新概念。

首先了解一些基本的术语和概念。

SGML, HTML,XML三者之间的区别
Doc类型是什么
HTML5 有什么新特点新优势。
学习HTML5
在开始之前首先来区分SGMC，HTML,XML 三者的概念。

SGML 即 Standard Globalized Markup Language 是用来定义标准的标记语言，简单的说，就是定义文档的元语言。

HTML 是基于SGML 的超链接语言，可以用于创建Web页面。在DTD 内部定义了标签的规则，DTD就是使用SGML 语言创建的。

XML 是从SGML 衍生而来的，它主要处理互联网方面的需求，HTML 有很多限制，XML 是SGML 的子集，可用于表示数据。

Doc 类型

创建HTML 页面时会自动生成以下代码：
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
```

这句代码简单的介绍了HTML 版本号，有了Doctype，就引入了对应的DTD（定义了HTML文档的组织结构），在页面中添加的所有标签才会是合法的，简单的说DTD 就是定义HTML的语法规则。

即使在没有引入DTD的情况下，很多浏览器也可以识别HTML元素，因为它们自身包含对HTML 元素的定义，这就是为什么很多开发人员没有感受到DTD 的存在。

HTML5 与之前的版本区别

HTML5不是基于SGML 语言的，因此不需要DTD ，它是一种全新的标记语言，有自己的解析规则，HTML5的语法规则与之前版本有很大的差别，可以称的上是一种全新的语言。

HTML5 的Doctype 非常简单：
```
<!DOCTYPE html>
```

HTML5 新特性

1. 理解新的页面结构语义

HTML 旧版本并没有标准的文档定义规则，比如如何定义文档Header或Footer等，很多人都在使用div来修饰一些CSS ，常常会导致不一致性。

HTML5 定义标准tag如Header,Footer,nav,FlipCaption等。这些标签可使得标记语言更有意义。

注意：这些标签不提供特殊的渲染功能，仅仅使的HTML 文档结构更具有意义。

Lab2_ 新的输入属性

新类型值

之前为了获得不同的UI 元素，如DatePicker,range Picker,color Picker等，会使用不同的类库。

HTML5 为输入元素引入了新属性“type”，看以下示例：

Number

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

Range

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

Color

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

Date

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

Time

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

Datetime-local

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

DateTime (Also include time zone)

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

Month

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

Week

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

下面列举一些有用的属性：

Autofocus 该属性表示在页面加载时，可初始化焦点。

&hellip;

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

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

&hellip;

上面代码实现了，当页面加载时，鼠标聚焦于“MyMonthElement”控件，“autofocus” 则绑定到多控件。

Placeholder 新的输入控件
```
 
```

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

               name="MyPlaceHolderControl" />

实验3——了解HTML5 Datalist 控件

DataList是HTML5中的新标签，能够在输入框中，实现自动完成功能。

可通过3个步骤实现：

1. 创建DataList

<datalist id="Hobbies">

    <option>Reading books</option>

    <option>Watching movies</option>

    <option>Playing games</option>

</datalist>

2. 创建输入控件，绑定List

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

3. 运行测试

实验 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>

实验 5,6,7-学习HTML5 验证功能

验证是开发应用最重要的功能，之前都会使用JQuery 验证等功能，在新版的HTML5中提供了验证支持。

Lab5—使用输入元素的type属性，实现验证功能：

<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>

2. 运行测试

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

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>

输出：

实验7——自定义验证

通过处理oninvalid 事件完成自定义HTML5 验证功能。

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. 创建Event Handler 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；获取包含非法值的控件，如上的Email textbox;

element.validity; 包含控件的验证信息，如valueMissing，typeMismatch，badInput等。

6. 运行

实验8——HTML5的缓存技术

如下是简答的缓存Demo

1.创建新的ASP.NET Web 应用

2. 添加Style.css,在Block 中添加以下类：
```
.DivStyle {

    background-color:silver;

}
```

3. 创建manifest 文本文件：

CACHE MANIFEST

# ver 1

CACHE:

/Styles/Style.css

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 再次刷新网页

三天学会HTML5 之第一天的更多相关文章

三天学会HTML5——SVG和Canvas的使用
在第一天学习了HTML5的一些非常重要的基本知识,今天将进行更深层学习首先来回顾第一天学习的内容,第一天学习了新标签,新控件,验证功能,应用缓存等内容. 第2天将学习如何使用Canvas 和使用SV ...
三天学会HTML5 ——多媒体元素的使用
目录 1. HTML5 Media-Video 2. HTML5 Media-Audio 3. 拖拽操作 4. 获取位置信息 5. 使用Google 地图获取位置信息多媒体是互联网中的最重要的一部分 ...
Java基础：三步学会Java Socket编程
Java基础:三步学会Java Socket编程 http://tech.163.com 2006-04-10 09:17:18 来源: java-cn 网友评论11 条论坛第一步 ...
九天学会Java，第一天，变量和数据类型，赋值和输出
用9天入门三门编程语言,有可能嘛,尤其是对没有基础的同学来说?对于想学好的编程的人来说,无论从哪一门语言开始入手,语言的本身其实并不是我们最应该的关心的,至少不是作为一个初学者首先关心的. 网络上,网 ...
三小时学会Kubernetes：容器编排详细指南
三小时学会Kubernetes:容器编排详细指南如果谁都可以在三个小时内学会Kubernetes,银行为何要为这么简单的东西付一大笔钱? 如果你心存疑虑,我建议你不妨跟着我试一试!在完成本文的学习后 ...
关于『HTML5』第一弹
关于『HTML5』:第一弹建议缩放90%食用祝各位国庆节快乐!!1 经过了「过时的 HTML」.「正当时的 Markdown」的双重洗礼后,我下定决心,好好学习HTML5 这回不过时了吧(其实和 ...
html5+css3第一屏滚屏动画效果
详细内容请点击在线预览立即下载 html5+css3第一屏滚屏动画效果. 转载自:http://tympanus.net/codrops/2014/05/22/inspiration-for-art ...
【C语言探索之旅】第三课：你的第一个程序
内容简介 1.课程大纲 2.第一部分第三课:你的第一个程序 3.第一部分第四课预告:变量的世界课程大纲我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用C语言编写三个 ...
剑指Offer（三十四）：第一个只出现一次的字符
剑指Offer(三十四):第一个只出现一次的字符搜索微信公众号:'AI-ming3526'或者'计算机视觉这件小事' 获取更多算法.机器学习干货 csdn:https://blog.csdn.net ...

随机推荐

.Net 对App.config和Web.config的访问操作（增、删、读、改）
一.首先引用Configuration 1)App.config如下: using System.Configuration;//若果还没有Configuration,右键引用文件夹添加引用,在.NE ...
C语言题库的上机题
1.编写函数,实现从键盘上输入一个小写字母,将其转化为大写字母. #include<stdio.h> int zhuanhua(char s); void main(){ char s; ...
虚拟机安装LINUX网络配置注意的问题
1.如果你配置本地IP,不上网,网卡选项可以选择仅主机模式,如果要上网,就直接选择桥接模式,复制物理网络这个选项 2.将NET1网卡(仅主机模式)选中,然后进入下面这个配置选项上面方框内的IP段 ...
viojs1908无线网路发射器选址
描述随着智能手机的日益普及,人们对无线网的需求日益增大.某城市决定对城市内的公共场所覆盖无线网. 假设该城市的布局为由严格平行的 129 条东西向街道和 129 条南北向街道所形成的网格状,并且 ...
.net framework 版本汇总
Version Release Date 1.0.3705.0 1RTM 2002/2/13 1.0.3705.209 1SP1 2002/3/19 1.0.3705.288 1SP2 2002/8/ ...
[Leetcode][JAVA] Binary Tree Level Order Traversal
Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...
绿色ip扫描工具
ip扫描,可以扫描一下自己的局域网有多少设备在线,有没有在蹭网.优点在于:短小精悍,快速,不用安装. 其实,我自己也写过一个但是没有这个精致,感兴趣的可以一起讨论. 下载地址:32位 64位我的淘宝 ...
Reactnative 随笔一
---恢复内容开始--- 1.ReactDOM.render() React的最基本方法,用于将模板转为HTML语言,并插入指定的DOM节点将h标签插入example节点 2.HTML语言直接 ...
ORACLE中的DECODE函数
今天遇到一个问题,数据库中需要排序的字段是中文,但是有不能按照中文拼音来排序,在网上查到一些资料,完美的解决了问题. DECODE(DS.RANGE_NAME,'高',3,'中',2,'低',1,'潜 ...
使用 {$INCLUDE} 或 {$I} 指令管理和调用自定义函数
这是一个简单.方便而又实用的小技巧. 譬如这段代码中有四个定义函数: MyAdd.MyDec.MyMul.MyDiv unit Unit1; interface uses Windows, Mes ...

三天学会HTML5 之第一天

Doc 类型

HTML5 与之前的版本区别

HTML5 新特性

1. 理解新的页面结构语义

Lab2_ 新的输入属性