接下来，我们来认识一些新增type属性：1.email输入类型说明：此类型要求键入格式正确的Email地址，否则浏览器是不允许提交的，并会有一个错误信息提示。格式：效果展示如图3-12所示：图3-127.tel输入类型说明：此类型要求输入一个电话号码，换行符会从输入值中去掉。因为不同国家不同地区的电话号码差别明显，所以想要添加更多限制可以使用下一节会讲到的pattern等属性。......
2023-10-28
HTML5实战宝典：客户端存储概述，存储方法和属性详解
【摘要】：Cookies从JavaScript出现之初就一直存在，所以在Web上存储数据并不是个新概念。localStorage对象负责存储长期的数据。这两种存储对象具有相同的方法和属性。为了获得一致性，本书在所有的示例中使用的都是localStorage对象。HTML5 Web存储的浏览器支持十分实用，但是，较旧的浏览器需要在使用之前检查Web存储支持的浏览器。这种检查非常简单，可以使用一个简单的条件语句来查看HTML5存储对象是否已经定义。
Cookies从JavaScript出现之初就一直存在，所以在Web上存储数据并不是个新概念。不过Web存储是数据存储的一种更强大的版本，它可提供更多的安全性、易用性和更快的速度。在Web上还可以存储相当大的数据，具体的大小取决于Web浏览器，但通常都在5MB到10MB之间。这对于一个HTML应用程序而言已经足够大了。另一个好处是此数据并不会在每次出现服务器请求时都被加载。唯一的限制是不能在浏览器之间分享这些Web存储，即如果在Safari中存储了数据，那么该数据在Firefox中是无法访问的。内置到HTML5中的Web存储对象有两种类型：
sessionStorage对象负责存储一个会话的数据。如果用户关闭了页面或浏览器，则会销毁数据。localStorage对象负责存储长期的数据。当Web页面或浏览器关闭时，仍会保持数据的存储，当然这还取决于浏览器设置的存储量。这两种存储对象具有相同的方法和属性。为了获得一致性，本书在所有的示例中使用的都是localStorage对象。下面，将了解Web存储的强大功能，以及它成为优于Cookies的一种存储方式的原因。我们还将探索基本的Web存储概念、HTML5 Web存储方法和浏览器支持。
几乎所有主流浏览器均支持Web存储特性，这些浏览器包括Firefox、Chrome、Safari、Opera和Microsoft IE 8.0以上版本。但是IE 7和更早版本不支持Web存储。(www.chuimin.cn)
HTML5 Web存储的浏览器支持十分实用，但是，较旧的浏览器需要在使用之前检查Web存储支持的浏览器。这种检查非常简单，可以使用一个简单的条件语句来查看HTML5存储对象是否已经定义。如果已经定义，就可以放心进行Web存储脚本编写。如果未定义，而数据存储又是必需的，则需要采用一种备选方法，比如JavaScript Cookie。
以下代码显示了一种简单的为Storage对象进行浏览器检查的方式。
有关HTML5实战宝典的文章
- 详细阅读
-
HTML5实战宝典：表单控件新增验证属性详细阅读
格式：CSS3中也有关于表单验证的伪类，比如说能够验证成功的添加伪类:valid。效果展示如图3-23所示：图3-233.min和max属性说明：min和max用于数值类型的表单验证，限制用户输入的最大值和最小值，属性值为数字。格式：效果展示如图3-25所示：图3-25将这些验证规则对应的放置到上一节写好的表单控件中，一个表单验证提交的页面就完成了。最终界面如图3-26和图3-27所示：图3-26图3-27表单新增的验证属性可以帮助我们更快地完成表单验证工作。......
2023-10-28
-
HTML5实战宝典：文件处理和拖拽实战详细阅读
本章重点知识4.1 File API4.2 HTML5拖拽事件4.3 dataTransfer对象4.4 利用拖拽效果完成上传功能对文件的处理和上传等操作一直是Web开发中的一项重要环节,比如在填写个人信息时的头像上传，或者是邮件的上传等。拖拽的文件也可以由File对象接收到，也就是说，我们现在可以直接通过HTML5实现拖拽文件上传功能了！......
2023-10-28
-
HTML5实战宝典：探索历程详细阅读
1995年11月，IETF发布了HTML 2.0，它是HTML最早的规范。1996年的1月，W3C 推出 HTML3.2。在之后三年的时间内，W3C 对HTML做了很多改进，并相继发布了几个版本。与此同时，W3C还在继续研究XHTML。2006年，W3C选择开发HTML5，自己成立了HTML5的工作组，它在WHATWG研发的HTML5 的基础上研究。2008年，W3C发布了 HTML5的草案，这是HTML5的最初版本。2013年，大部分的手机都开始支持HTML5的应用。终于，经过8年的艰辛研究后，在2014年10月29日，W3C宣布HTML5的标准规范制定完成。......
2023-10-28
-
HTML5实战宝典：WebSocket详细阅读
基于Flash，Adobe Flash通过自己的Socket完成数据交换，再利用Flash暴露出相应的接口为JavaScript调用，从而达到实时传输目的。在此背景下，基于HTML5规范的，有Web TCP之称的WebSocket应运而生。直到2014年，HTML5正式从草案落实为实际标准规范，各个应用服务器及浏览器厂商逐步开始统一，在JavaEE 7中也实现了WebSocket协议，从而无论是客户端还是服务端的WebSocket都已完备，读者可以查阅HTML5规范，熟悉新的HTML协议规范及WebSocket支持。......
2023-10-28
-
HTML5实战宝典：Canvas绘制文本详细阅读
Canvas给我们提供了绘制文字的方法。该属性的用法与CSSfont属性使用方式相同，例如：font属性的默认值如表7-9所示。通常，文本会从指定位置开始，不过，如果您设置为textAlign="right"并将文本放置到位置150，那么会在位置150结束。表7-10表7-11图7-24演示了textAlign属性值对齐方式。图7-24textBaseline属性设置或返回在绘制文本时的当前文本基线。表7-13strokeText()方法在画布上绘制文本。文本的默认颜色是黑色。表7-14代码清单：绘制文本效果如图7-26所示。......
2023-10-28
-
HTML5实战宝典：CanvasAPI揭开神详细阅读
Canvas在HTML5中是一个非常强大的元素，接下来，我们开始去学习它。要使用Canvas来绘制图形必须在页面中添加Canvas的标签。而在样式表中修改Canvas标签宽高属性则是对它的内容进行缩放,如果比例与Canvas本身比例不一致会导致图像的扭曲。如果出现扭曲可以通过调整Canvas标签属性width、height来确保比例一致。使用Canvas画布请使用一个代码编辑器，新建一个HTML5的基本文档。我们需要在
标签中放置一个Canvas元素。代码清单：HTML中添加Canvas标签如果浏览器支持，效果如图7-1所示。......2023-10-28
-
HTML5实战宝典：新增表单控件功能详细阅读
值为Boolean类型，一个文档中只能有一个表单控件具有此属性。格式：3.novalidate属性说明：此属性定义form或者某个input标签被提交时不用经过表单验证。格式：4.autocomplete属性用于指示input元素是否能够拥有一个默认值，这个默认值是由浏览器自动补全的。这个设定可以被属于这个form的子元素的autocomplete属性覆盖。......
2023-10-28
相关推荐