请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

断天涯大虾
社区贡献组   /  发表于:2016-8-3 10:18  /   查看:7941  /  回复:0
本帖最后由 断天涯大虾 于 2016-12-14 09:41 编辑

引言
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 页面时会自动生成以下代码:

  1. <!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 非常简单:

  1. <!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
  1. <input type="number" name="MyNuberElement" id="MyNumberElement" />
复制代码



Range
  1. <input type="range" name="MyRangeElement" id="MyRangeElement"/>
复制代码



Color
  1. <input type="color" id="MyColorElement" name="MyColorElement" />
复制代码


Date

  1. <input type="date" id="MyDateElement" name="MyDateElement" />
复制代码



Time
  1. <input type="time" id="MyTimeElement" name="MyTimeElement"/>
复制代码



Datetime-local
  1. <input type="datetime-local" id="MyDateTimeLElement" name="MyDateTimeLElement" />
复制代码


DateTime (Also include time zone)
  1. <input type="datetime" id="MyDateTimeElement" name="MyDateTimeElement"/>
复制代码



Month
  1. <input type="month" id="MyMonthElement" name="MyMonthElement" />
复制代码



Week
  1. <input type="week" id="MyWeekElement" name="MyWeekElement" />
复制代码



下面列举一些有用的属性:
Autofocus 该属性表示在页面加载时,可初始化焦点。
  1. <blockquote>&hellip;
复制代码
上面代码实现了,当页面加载时,鼠标聚焦于“MyMonthElement”控件,“autofocus” 则绑定到多控件。Placeholder 新的输入控件
  1. <blockquote><input type="text" placeholder="Enter Value" id="MyPlaceHolderControl"
复制代码

实验1 -- 了解HTML5 Datalist 控件
DataList是HTML5中的新标签,能够在输入框中,实现自动完成功能。

可通过3个步骤实现:
1. 创建DataList
  1. <blockquote><datalist id="Hobbies">
复制代码
2. 创建输入控件,绑定List
  1. <input type="text" name="TxtHobbies" value="" list="Hobbies" />
复制代码
3. 运行测试

实验2 -- 输出元素
HTML5 中引入标准的语义“Output”元素
  1. <blockquote><div oninput=
复制代码

实验3 -- 学习HTML5 验证功能
验证是开发应用最重要的功能,之前都会使用JQuery 验证等功能,在新版的HTML5中提供了验证支持。
Lab5—使用输入元素的type属性,实现验证功能:
  1. <blockquote><form>
复制代码
2. 运行测试

实验4 -- 使用自定义验证属性实现验证
1. 创建输入控件
  1. <blockquote><form>
复制代码
输出:

实验5 -- 自定义验证
通过处理oninvalid 事件完成自定义HTML5 验证功能。
1. 创建输入控件,并绑定验证属性,添加自定义错误提示。
  1. <blockquote><form>
复制代码
2.  添加style 标签,创建CSS 来隐藏错误信息
  1. <blockquote><style>
复制代码
3. 点击提交按钮,隐藏错误信息
  1. <input type="submit" value="Register" onclick="$('.invalid').hide();" />
复制代码
4. 当输入控件包含非法值时触发
  1. <input type="email" name="TxtEmail" id="TxtEmail" oninvalid="OnInvalidEmail();" required/>
复制代码
5. 创建Event Handler JavaScript函数
  1. <blockquote>function OnInvalidEmail()
复制代码
event.preventDefault();  会组织默认行为的发生,将错误信息置顶event.srcElement;获取包含非法值的控件,如上的Email textbox;element.validity; 包含控件的验证信息,如valueMissing,typeMismatch,badInput等。
6. 运行

前端工具用起来
前端开发渐成热潮,深入学习了HTML5的知识之后,还需要了解开发工具:新一代HTML5 / JavaScript UI控件Wijmo,大而全面的前端开发工具包,为您的企业应用提供更加灵活的操作体验,现已全面支持Angular 2。
   
关于葡萄城:全球最大的控件提供商,世界领先的企业应用定制工具、企业报表和商业智能解决方案提供商,为超过75%的全球财富500强企业提供服务。

0 个回复

您需要登录后才可以回帖 登录 | 立即注册