三天学会HTML5 之第一天
2016-01-29 18:30
531 查看
引言
HTML5一直是非常热门的话题,因此此系列文章主要从一些基本功能开始讲起,逐步深入了解HTML5的新概念。
首先了解一些基本的术语和概念。
SGML,HTML,XML三者之间的区别
Doc类型是什么
HTML5有什么新特点新优势。
学习HTML5
在开始之前首先来区分SGMC,HTML,XML三者的概念。
SGML即StandardGlobalizedMarkupLanguage是用来定义标准的标记语言,简单的说,就是定义文档的元语言。
HTML是基于SGML的超链接语言,可以用于创建Web页面。在DTD内部定义了标签的规则,DTD就是使用SGML语言创建的。
XML是从SGML衍生而来的,它主要处理互联网方面的需求,HTML有很多限制,XML是SGML的子集,可用于表示数据。
这句代码简单的介绍了HTML版本号,有了Doctype,就引入了对应的DTD(定义了HTML文档的组织结构),在页面中添加的所有标签才会是合法的,简单的说DTD就是定义HTML的语法规则。
即使在没有引入DTD的情况下,很多浏览器也可以识别HTML元素,因为它们自身包含对HTML元素的定义,这就是为什么很多开发人员没有感受到DTD的存在。
HTML5的Doctype非常简单:
HTML5定义标准tag如Header,Footer,nav,FlipCaption等。这些标签可使得标记语言更有意义。
注意:这些标签不提供特殊的渲染功能,仅仅使的HTML文档结构更具有意义。
之前为了获得不同的UI元素,如DatePicker,rangePicker,colorPicker等,会使用不同的类库。
HTML5为输入元素引入了新属性“type”,看以下示例:
Range
Color
Date
Time
Datetime-local
DateTime(Alsoincludetimezone)
Month
Week
下面列举一些有用的属性:
Autofocus该属性表示在页面加载时,可初始化焦点。
Placeholder新的输入控件
2.创建输入控件,绑定List
3.运行测试
Lab5—使用输入元素的type属性,实现验证功能:
2.运行测试
2.添加style标签,创建CSS来隐藏错误信息
3.点击提交按钮,隐藏错误信息
4.当输入控件包含非法值时触发
5.创建EventHandlerJavaScript函数
6.运行
1.创建新的ASP.NETWeb应用
2.添加Style.css,在Block中添加以下类:
3.创建manifest文本文件:
4.创建需要缓存的文件
5.运行
6.设置离线,查看结果
7.刷新页面
8修改MyPage.aspx文件,修改Mydiv
9.运行程序
10.修改manifest文件
11再次刷新网页
HTML5一直是非常热门的话题,因此此系列文章主要从一些基本功能开始讲起,逐步深入了解HTML5的新概念。
首先了解一些基本的术语和概念。
SGML,HTML,XML三者之间的区别
Doc类型是什么
HTML5有什么新特点新优势。
学习HTML5
在开始之前首先来区分SGMC,HTML,XML三者的概念。
SGML即StandardGlobalizedMarkupLanguage是用来定义标准的标记语言,简单的说,就是定义文档的元语言。
HTML是基于SGML的超链接语言,可以用于创建Web页面。在DTD内部定义了标签的规则,DTD就是使用SGML语言创建的。
XML是从SGML衍生而来的,它主要处理互联网方面的需求,HTML有很多限制,XML是SGML的子集,可用于表示数据。
Doc类型
创建HTML页面时会自动生成以下代码:<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.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非常简单:
<!DOCTYPEhtml>
HTML5新特性
1.理解新的页面结构语义
HTML旧版本并没有标准的文档定义规则,比如如何定义文档Header或Footer等,很多人都在使用div来修饰一些CSS,常常会导致不一致性。HTML5定义标准tag如Header,Footer,nav,FlipCaption等。这些标签可使得标记语言更有意义。
注意:这些标签不提供特殊的渲染功能,仅仅使的HTML文档结构更具有意义。
Lab2_新的输入属性
新类型值之前为了获得不同的UI元素,如DatePicker,rangePicker,colorPicker等,会使用不同的类库。
HTML5为输入元素引入了新属性“type”,看以下示例:
Number
<inputtype="number"name="MyNuberElement"id="MyNumberElement"/>
Range
<inputtype="range"name="MyRangeElement"id="MyRangeElement"/>
Color
<inputtype="color"id="MyColorElement"name="MyColorElement"/>
Date
<inputtype="date"id="MyDateElement"name="MyDateElement"/>
Time
<inputtype="time"id="MyTimeElement"name="MyTimeElement"/>
Datetime-local
<inputtype="datetime-local"id="MyDateTimeLElement"name="MyDateTimeLElement"/>
DateTime(Alsoincludetimezone)
<inputtype="datetime"id="MyDateTimeElement"name="MyDateTimeElement"/>
Month
<inputtype="month"id="MyMonthElement"name="MyMonthElement"/>
Week
<inputtype="week"id="MyWeekElement"name="MyWeekElement"/>
下面列举一些有用的属性:
Autofocus该属性表示在页面加载时,可初始化焦点。
… <labelfor="birthMonth">BirthMonth</label> <inputtype="month"id="MyMonthElement"name="MyMonthElement"autofocus/> …
上面代码实现了,当页面加载时,鼠标聚焦于“MyMonthElement”控件,“autofocus”则绑定到多控件。
Placeholder新的输入控件
<inputtype="text"placeholder="EnterValue"id="MyPlaceHolderControl"
name="MyPlaceHolderControl"/>
实验3——了解HTML5Datalist控件
DataList是HTML5中的新标签,能够在输入框中,实现自动完成功能。
可通过3个步骤实现:
1.创建DataList
<datalistid="Hobbies">
<option>Readingbooks</option>
<option>Watchingmovies</option>
<option>Playinggames</option>
</datalist>
2.创建输入控件,绑定List
<inputtype="text"name="TxtHobbies"value=""list="Hobbies"/>
3.运行测试
实验4输出元素
HTML5中引入标准的语义“Output”元素<divoninput=
"document.getElementById(MyOutputElement).value=
(document.getElementById('input1').valueAsNumber)+
(document.getElementById('input2').valueAsNumber)">
<inputid="input1"name="input1"type="number"value="1">+
<inputid="input2"name="input2"type="number"value="2">=
<outputid="MyOutputElement">3</output>
</div>
实验5,6,7-学习HTML5验证功能
验证是开发应用最重要的功能,之前都会使用JQuery验证等功能,在新版的HTML5中提供了验证支持。Lab5—使用输入元素的type属性,实现验证功能:
<form>
<table>
<tr>
<td>
<label>E-mail:</label>
<inputtype="email"id="email"name="email"/>
<label>URL:</label>
<inputtype="url"id="url"name="url"/>
<label>Telephone</label>
<inputtype="tel"id="phone"name="phone"/>
<label>NumberDemo:</label>
<inputtype="number"name="MyNumberElement"id="MyNumberElement"/>
<label>RangeDemo:</label>
<inputtype="range"name="MyRangeElement"id="MyRangeElement"/>
<label>ColorDemo</label>
<inputtype="color"id="MyColorElement"name="MyColorElement"/>
</td>
<td>
<label>DateDemo</label>
<inputtype="date"id="MyDateElement"name="MyDateElement"/>
<label>TimeDemo</label>
<inputtype="time"id="MyTimeElement"name="MyTimeElement"/>
<label>DateTimeLocalDemo</label>
<inputtype="datetime-local"id="datetime"name="datetime"/>
<label>MonthDemo</label>
<inputtype="month"id="month"name="month"/>
<label>WeekDemo</label>
<inputtype="week"id="MyWeekElement"name="MyWeekElement"/>
<divstyle="text-align:right">
<inputtype="submit"value="validate"/>
</div>
</td>
</tr>
</table>
</form>
2.运行测试
实验6-使用自定义验证属性实现验证
1.创建输入控件
<form>
<label>Email</label>
<inputtype="email"name="TxtEmail"
id="TxtEmail"required/>
<label>UserName</label>
<inputtype="text"name="username"
id="username"pattern="[a-zA-Z]{5,}"/>
<label>Age</label>
<inputtype="number"name="TxtAge"
id="TxtAge"min="10"max="50"/>
<br/><inputtype="submit"value="Register"/>
</form>
输出:
实验7——自定义验证
通过处理oninvalid事件完成自定义HTML5验证功能。
1.创建输入控件,并绑定验证属性,添加自定义错误提示。
<form>
<label>Email</label>
<inputtype="email"name="TxtEmail"
id="TxtEmail"required/>
<spanclass="MissingEmailSpaninvalid">EmailMissing</span>
<spanclass="InvalidEmailSpaninvalid">Invalidemail</span>
<label>UserName</label>
<inputtype="text"name="username"
id="username"pattern="[a-zA-Z]{5,10}"/>
<spanclass="InvalidUserNameSpaninvalid">Usernamenotmatchingwithpattern</span>
<label>Age</label>
<inputtype="number"name="TxtAge"
id="TxtAge"min="10"max="50"/>
<spanclass="AgeIsNotInRangeSpaninvalid">Agemustbebebetween10and50</span>
<spanclass="InvalidAgeSpaninvalid">InvalidAge</span>
<br/><inputtype="submit"value="Register"/>
</form>
2.添加style标签,创建CSS来隐藏错误信息
<style>
.invalid{
display:none;
}
</style>
3.点击提交按钮,隐藏错误信息
<inputtype="submit"value="Register"onclick="$('.invalid').hide();"/>
4.当输入控件包含非法值时触发
<inputtype="email"name="TxtEmail"id="TxtEmail"oninvalid="OnInvalidEmail();"required/>
5.创建EventHandlerJavaScript函数
functionOnInvalidEmail()
{
event.preventDefault();
varelement=event.srcElement;
varvalidity=element.validity;
if(validity.valueMissing){
$('.MissingEmailSpan').show();
}
elseif(validity.typeMismatch){
$('.InvalidEmailSpan').show();
}
}
event.preventDefault();会组织默认行为的发生,将错误信息置顶
event.srcElement;获取包含非法值的控件,如上的Emailtextbox;
element.validity;包含控件的验证信息,如valueMissing,typeMismatch,badInput等。
6.运行
实验8——HTML5的缓存技术
如下是简答的缓存Demo1.创建新的ASP.NETWeb应用
2.添加Style.css,在Block中添加以下类:
.DivStyle{
background-color:silver;
}
3.创建manifest文本文件:
CACHEMANIFEST
#ver1
CACHE:
/Styles/Style.css
4.创建需要缓存的文件
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="MyPage.aspx.cs"Inherits="MyPage"%>
<!DOCTYPEhtml>
<htmlmanifest="MyCache.txt">
<headrunat="server">
<title></title>
<linkhref="Styles/Style.css"rel="stylesheet"/>
</head>
<body>
<formid="form1"runat="server">
<divclass="DivStyle"id="MyDiv">
Hi,Executioncountis1
</div>
</form>
</body>
</html>
5.运行
6.设置离线,查看结果
7.刷新页面
8修改MyPage.aspx文件,修改Mydiv
<divclass="DivStyle"id="MyDiv">
Hi,Executioncountis2
</div>
9.运行程序
10.修改manifest文件
CACHEMANIFEST
#ver3
CACHE:
/Styles/Style.css
11再次刷新网页
相关文章推荐
- H5中的touch事件
- h5页面调用支付宝支付
- HTML5 Web存储
- HTML5服务器消息推送(java版)
- h5离线存储
- HTML5 代码实例
- HTML5 LocalStorage 本地存储
- 去除canvas 画圆的毛边
- html5 canvas 详细使用教程
- 如何在移动设备上调试html5开发的网页
- HTML5 LocalStorage 本地存储
- 详解HTML5中的Communication API基本使用方法
- HTML5中的音频和视频媒体播放元素小结
- 整理HTML5的一些新特性与Canvas的常用属性
- 百度地图-html5定位功能
- html5桌面通知
- h5 动画页面
- H5小内容(四)
- HTML5 表单验证
- CDH5.5.1版HBase安装使用LZO压缩