运用HTML5实现表单验证详解.docx
- 文档编号:9457475
- 上传时间:2023-05-19
- 格式:DOCX
- 页数:18
- 大小:55.88KB
运用HTML5实现表单验证详解.docx
《运用HTML5实现表单验证详解.docx》由会员分享,可在线阅读,更多相关《运用HTML5实现表单验证详解.docx(18页珍藏版)》请在冰点文库上搜索。
运用HTML5实现表单验证详解
JAVAEE编程技术
(一)
结课论文
题目:
运用HTML5制作网页
设计者:
专业班级:
学号:
2016年05月20日
河南理工大学计算机学院
目录
一.HTML基本概念2
1、定义:
2
2、超文本标记2
3、HTML语言的单元(元素)2
二.技术要点3
1.HTML5语法3
2.HTML5技术要点4
三.环境搭建9
四.应用实例10
1.实验代码10
2.实验结果11
五.总结13
六.参考文献14
一.
HTML基本概念
1、定义:
HTML语言是一种超文本的标记语言,简单来讲就是构建一套标记符号和语法规则,将所要显示出来的文字、图象、声音等要素按照一定的标准要求排放,形成一定的标题、段落、列表等单元。
2、超文本标记
(1)超文本标记用带尖括号“<”和“>”表示。
(2)超文本标记一般是成对出现,用带斜杠的元素表示结束。
如:
<html>和</html>。
但有些标记只有起始标记而没有结束标记,如:
<BR>,它在网页中表示引入一个换行动作,还有些标记可以省略,如:
段落的结束标记</P>就可以省略。
(3)超文本标记忽略大小写,如:
<HTML>和<html>是等效的,但其中实体内容的名称是要区分大小写,如"&NAME"和"&name"是表示不同的实体。
(4)一个标记元素可写在多行,参数位置不受限制。
3、HTML语言的单元(元素)
整个网页页面的内容由特定内容形成的许多单元构成的,而每个单元又由三部分组
成----起始标记、单元内容、结束标记。
起始标记:
起始标记由“<”和“>”来界定,单元名称和属性由起始标记给出;
单元内容:
中间的部分是单元的内容部分;
结束标记:
结束标记由“</”和“>”来界定,比起始标志多一斜杠;
例如:
标题栏单元的标记形式
<TITLE>高考状元访谈--记一位农家孩子的成长经历</TITLE>
其中<TITLE>和</TITLE>是起始标记和结束标记,“高考状元访谈--记一位农家孩子的成长经历”是单元的基本内容。
总之,整个HTML文档都是由标记构成的,HTML文档的标记为编写该文档建立了固定的框架,我们只需要在这个框架中填充内容就行了。
二.
技术要点
1.HTML5语法
HTML5中规定的语法,在设计上兼顾了与现有HTML之间最大程度的兼容性。
例如,在Web上充斥着“
没有结束标签”等HTML现象。
HTML5不将这些视为错误,反而采取了“允许这些现象存在,并明确记录在规范中”的方法。
因此,尽管与XHTML相比标记比较简洁,而在遵循HTML5的Web浏览器中也能保证生成相同的DOM。
那么下面就来看看具体的HTML5语法。
(1)可以省略标签的元素
在HTML5中,有些元素可以省略标签。
具体来讲有3种情况,不允许写结束标记的元素有area、base、br、col、ommand、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
不允许写结束标记的元素是指,不允许使用开始标记与结束标记将元素括起来的的形式,只允许使用““<元素/>”的形式进行书写。
例如:
“
…”的写法是错误的。
应该写成“
”。
当然,沿袭下来的“
”这种写法也是允许的。
(2)可以省略结束标签
li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th可以省略整个标签(即连开始标签都不用写明)html、head、body、colgroup、tbody需要注意的是,虽然这些元素可以省略,但实际上却是隐式存在的。
例如“
”标签可以省略,但在DOM树上它是存在的,可以永恒访问“document.body”。上述元素中也包括了HTML5的新元素。
有关这些新元素的用法,将在后面的章节中详细讲解。
取得布尔值(Boolean)的属性,例如disabled和readonly等,通过省略属性的值来表达“值为true”。
如果要表达“值为false”,则直接省略属性本身即可。
此外,在写明属性值来表达“值为true”时,可以将属性值设为属性名称本身,也可以将值设为空字符串。
如下列所示:
--以下的checked属性值皆为true-->
(3)省略属性的引用符
设置属性值时,可以使用双引号或单引号来引用。
HTML5语法则更进一步,只要属性值不包含空格、“<”、“>”、“'”、“"”、“`”、“=”等字符,都可以省略属性的引用符。
如下例所示。
—请注意type属性的引用符-->
2.HTML5技术要点
(1)viewport:
也就是可视区域。
对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域,
这是真正有效的区域。
由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport;
实际上我们可以操作的属性有4个:
width-//viewport的宽度(范围从200到10,000,默认为980像素)
height-//viewport的高度(范围从223到10,000)
initial-scale-//初始的缩放比例(范围从>0到10)
minimum-scale-//允许用户缩放到的最小比例
maximum-scale-//允许用户缩放到的最大比例
user-scalable-//用户是否可以手动缩(no,yes)
那么到底这些设置如何让Safari知道?
其实很简单,就一个meta,形如:
在设置了initial-scale=1之后,我们终于可以以1:
1的比例进行页面设计了。
关于viewport,还有一个很重要的概念是:
iphone的safari浏览器完全没有滚动条,而且不是简单的“隐藏滚动条”,是根本没有这个功能。
iphone的safari浏览器实际上从一开始就完整显示了这个网页,然后用viewport查看其中的一部分。
当你用手指拖动时,其实拖的不是页面,而是viewport。
浏览器行为的改变不止是滚动条,交互事件也跟普通桌面不一样。
(请参考:
指尖的下JS系列文章)
(2)link:
portrait)"href="portrait.css">//肖像模式样式 landscape)"href="landscape.css"//风景模式样式 //竖屏时使用的样式 portrait)"type="text/css"> #landscape{display: none;} //横屏时使用的样式 landscape)"type="text/css"> #portrait{display: none;} (3)事件: (请参考: 指尖的下JS系列文章) //手势事件 touchstart//当手指接触屏幕时触发 touchmove//当已经接触屏幕的手指开始移动后触发 touchend//当手指离开屏幕时触发 touchcancel //触摸事件 gesturestart//当两个手指接触屏幕时触发 gesturechange//当两个手指接触屏幕后开始移动时触发 gestureend //屏幕旋转事件 onorientationchange //检测触摸屏幕的手指何时改变方向 orientationchange //touch事件支持的相关属性 touches targetTouches changedTouches clientX //Xcoordinateoftouchrelativetotheviewport(excludesscrolloffset) clientY //Ycoordinateoftouchrelativetotheviewport(excludesscrolloffset) screenX //Relativetothescreen screenY //Relativetothescreen pageX //Relativetothefullpage(includesscrolling) pageY //Relativetothefullpage(includesscrolling) target //Nodethetoucheventoriginatedfrom identifier //Anidentifyingnumber,uniquetoeachtouchevent (4)屏幕旋转事件: onorientationchange 添加屏幕旋转事件侦听,可随时发现屏幕旋转状态(左旋、右旋还是没旋)。 例子: //判断屏幕是否旋转 functionorientationChange(){ switch(window.orientation){ case0: alert("肖像模式0,screen-width: "+screen.width+";screen-height: "+screen.height); break; case-90: alert("左旋-90,screen-width: "+screen.width+";screen-height: "+screen.height); break; case90: alert("右旋90,screen-width: "+screen.width+";screen-height: "+screen.height); break; case180: alert("风景模式180,screen-width: "+screen.width+";screen-height: "+screen.height); break; }; //添加事件监听 addEventListener('load',function(){ orientationChange(); window.onorientationchange=orientationChange; }); (5)隐藏地址栏&处理事件的时候,防止滚动条出现: //隐藏地址栏&处理事件的时候,防止滚动条出现 addEventListener('load',function(){ setTimeout(function(){window.scrollTo(0,1);},100); }); (6)双手指滑动事件: //双手指滑动事件 addEventListener('load', function(){window.onmousewheel=twoFingerScroll;}, false//兼容各浏览器,表示在冒泡阶段调用事件处理程序(true捕获阶段) ); functiontwoFingerScroll(ev) vardelta=ev.wheelDelta/120;//对delta值进行判断(比如正负),而后执行相应操作 returntrue; }; (7)判断是否为iPhone: //判断是否为iPhone: functionisAppleMobile(){ return(navigator.platform.indexOf('iPad')! =-1); }; (8)localStorage: 例子: (注意数据名称n要用引号引起来) varv=localStorage.getItem('n')? localStorage.getItem('n'): "";//如果名称是n的数据存在,则将其读出,赋予变量v。 localStorage.setItem('n',v);//写入名称为n、值为v的数据 localStorage.removeItem('n');//删除名称为n的数据 (9)使用特殊链接: 如果你关闭自动识别后,又希望某些电话号码能够链接到iPhone的拨号功能,那么可以通过这样来声明电话链接, 12345654321">打电话给我 12345654321">发短信 或用于单元格: 122'"> (10)自动大写与自动修正 要关闭这两项功能,可以通过autocapitalize与autocorrect这两个选项: (11)WebKitCSS: ①“盒模型”的具体描述性质的包围盒块内容,包括边界,填充等等。 -webkit-border-bottom-left-radius: radius; -webkit-border-top-left-radius: horizontal_radiusvertical_radius; -webkit-border-radius: radius;//容器圆角 -webkit-box-sizing: sizing_model;边框常量值: border-box/content-box -webkit-box-shadow: hoffvoffblurcolor;//容器阴影(参数分别为: 水平X方向偏移量;垂直Y方向偏移量;高斯模糊半径值;阴影颜色值) -webkit-margin-bottom-collapse: collapse_behavior;常量值: collapse/discard/separate -webkit-margin-start: width; -webkit-padding-start: width; -webkit-border-image: url(borderimg.gif)25252525round/stretchround/stretch; -webkit-appearance: push-button;//内置的CSS表现,暂时只支持push-button ②“视觉格式化模型”描述性质,确定了位置和大小的块元素。 direction: rtl unicode-bidi: bidi-override;常量: bidi-override/embed/normal ③“视觉效果”描述属性,调整的视觉效果块内容,包括溢出行为,调整行为,能见度,动画,变换,和过渡。 clip: rect(10px,5px,10px,5px) resize: auto;常量: auto/both/horizontal/none/vertical visibility: visible;常量: collapse/hidden/visible -webkit-transition: opacity1slinear;动画效果ease/linear/ease-in/ease-out/ease-in-out -webkit-backface-visibility: visibler;常量: visible(默认值)/hidden -webkit-box-reflect: right1px;镜向反转 -webkit-box-reflect: below4px-webkit-gradient(linear,lefttop,leftbottom, from(transparent),color-stop(0.5,transparent),to(white)); -webkit-mask-image: -webkit-gradient(linear,lefttop,leftbottom,from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));;//CSS遮罩/蒙板效果 三.环境搭建 HTML5环境搭建过程 1、卸载电脑中所有的Dreamweaver旧版 2、将C: \ProgramFiles\CommonFiles下的Adobe文件夹和C: \ProgramFiles下的Adobe文件夹全部删除。 针对C: \ProgramFiles\CommonFiles\Adobe文件夹中的AcroIEHelper.dll文件若无法一次性删除的,需要安装Unlocker助手来强制删除 3、删除完毕后开始安装DreamweaverCS5版本,序列号: 1192-1813-4815-6070-6116-3676 4、安装Adobe.Extension.Manager.CS5_PortableSoft。 完成后再进行初始化: 请确保关闭所有Adobe程序后,运行 ! )ExtensionManagerPorable.exe完成必要初始化。 5、接下来在Adobe.Extension.Manager.CS5中安装HTML5PACK: (1)首先解压html5pack_p1_051910.zxp文件,会发现解压出来DWHTML5Pack.mxi的文件中包含有一个的文件 (2)打开Adobe.Extension.Manager.CS5,选择“文件”à 打包ZXP扩展(z)à选择DWHTML5Pack.mxi文件,将其打包成.zxp后缀的文件 (3)再选择“文件”“安装扩展”,选择上一步打包好的.zxp文件进行安装 以上步骤完成后,即可开始使用在Dreamweaver中使用HTML5 四.应用实例 通过表单用户可以在浏览器上向服务器端提交各种信息,例如: 常用的用户注册,在线联系,在线调查表等都是表单的具体应用形式。 这些交流的方式让网页变的生动起来,灵活的运用表单可以让网站变的更有活力,发挥更大的作用。 接下来是运用HTML5设计的一个表单 1.实验代码 DOCTYPEhtml> 姓名: 性别: 外语水平: 低 身高(100cm_300cm): 出生年月: 颜色偏好: 个人空间: 电子邮件: 2.实验结果 接下来用图片来演示实验结果 注: 此图为表单界面 注: 此图为提交后的界
};
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 运用 HTML5 实现 表单 验证 详解