昨日回顾

XHTML编写规范

1)所有的标记、属性都要小写;

2)所有的标记都要关闭,如:<hr /> <br /> <meta /> <img />

3)所有的属性值都要加引号

4)所有的属性都必须要有值,例如:<hr  noshade=“noshade” />

5)DTD文档类型定义(Document Type Definition) ,DTD就是一套标记的验证规则而已。

严格型:结构(HTML标记)和表现(CSS)完全分离

过渡型:可以在结构中,来书写样式、格式。

框架型:主要用来作框架,将一个浏览器窗口划分成不同的小窗口,一个小窗口中可以来显示一个网页。

 

表格:很细表格边线的制作                                            

CSS的写法:style="border-collapse:collapse;"

 

表单

1、表单的主要作用:收集用户信息的。

2、表单的工作原理

       1)填写有表单的网页,点击“提交按钮”进行提交;

       2)表单数据,通过互联网传递到了服务器

       3)服务器上有专门的程序,对提交的表单数据进行验证;

       4)如果验证通过,直接写入数据库;

       5)如果验证失败,将返回一个错误信息;

因此,表单的开发分两个部分,一是前台表单页面的制作和排版,二是后台PHP程序对表单数据的验证和写入数据库。

 

3、实例:用户登录的表单

<form name=“form1”>

       用户名:<input type="text" name="username" size="40" />

       密码:<input type="password" name="password" size="40" />

       <input type="submit" name="submit" value="提交表单" />

</form>

 

4<form>标记常用属性

       Name:表单的名称,用于JS来操作或控制表单时使用;

       Id:表单的名称,用于JS来操作或控制表单时使用;

       Action:指定表单数据的处理程序,一般是PHP,如:action=“login.php”

       Method:表单数据的提交方式,一般取值:get(默认)和post

              GET方式:将表单数据,以“name=value”形式追加到action指定的处理程序的后面,两者间用“?”隔开,每一个表单的“name=value”间用“&”号隔开。

              file:///E:/itcast/20140706/lesson/day4/login.php?username=admin&password=admin1234&submit=提交表单

              特点:只适合提交少量信息,并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。

              POST方式:将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。

              Action指定的处理程序可以获取到表单数据。

              特点:可以提交海量信息,相对来说安全一些,提交的数据格式是多样的(Word、Excel、rar、img)

              Enctype:表单数据的编码方式(加密方式),取值:application/x-www-form-urlencoded、multipart/form-data

              Enctype只能在POST方式下使用。

              Application/x-www-form-urlencoded默认加密方式:除了上传文件之外的数据都可以

              Multipart/form-data:上传附件时,必须使用这种编码方式。

 

5、单行文本框:用户名中、邮箱、QQ号、公司地址等

       <input  type=“text” name=“name” value=“默认值” size=“宽度” maxlength=“最大字符数” />

       Type:指定文本框的类型,取值:text(文本框)、password(密码)、radio(单选)、checkbox(复选框)

       Name:指定文本框的名称

       Value:指文本框中默认显示的文本;

       Size:指文本框的宽度(字符数)

       Maxlength:最大可以输入多少个字符

      

       注意:表单和表格嵌套时,是在<form>标记中赋套<table>标记。

 

6、单行密码框

       <input  type=“password”name=“name”size=“”maxlength=“” />

 

7、单选项

       <input  type=“radio”name=“sex”value=“先生”checked=“checked” />先生

       <input  type=“radio”name=“sex”value=“女士” />女士

       Checked属性:是默认选择其中一项。

       提示:单选是一组相互排斥的选项,每次只能选择一个,不能同时选择多个。

 

8、复选框:同时选择多个,也可以一个都不选

       <input  type=“checkbox” name=“hobby”value=“游戏” checked=“checked” />游戏

       <input  type=“checkbox” name=“hobby”value=“杀人” />杀人

       <input  type=“checkbox” name=“hobby”value=“吹牛” />吹牛

       Checked属性:默认选中哪几个选项

       提示:复选框也是一组选项,名称是一样的,最终用PHP来获取值时,将产生一个数组(一个名称好几个不同的值)的结果。

 

9、上传文件

       <input  type=“file”name=“uploadFile” />

       提示:如果要限制上传文件的类型,需要配合JS来实现验证。对上传文件的安全检查:一是扩展名的检查,二是文件数据内容的检查。

      

10、文本区域

       <textarea  name=“name” cols=“宽度” rows=“高度”>默认的显示文本</textarea>

 

11、下拉列表

       <select  name=“city”>

              <option  value=“北京市”selected=“selected”>北京市</option>

              <option  value=“天津市”>天津市</option>

</select>

       Selected属性:是默认选中一个下拉列表项;

      

12、提交按钮、重置按钮、普通按钮、图片按钮

       提交按钮:<input  type=“submit” name=“submit” value=“提交表单” />

       注意:如果按钮上的文本,不想发送到服务,可以不用加name属性。

       重置按钮:<input  type=“reset” name=“reset”  value=“重新填写” />

       普通按钮:<input  type=“button” name=“button” value=“普通按钮”/>

<input type="button" value="提交表单" onclick="javascript:this.form.submit()" />

              普通按钮没有任何功能,既不会提交表单,也不会重置表单;如果想实现“提交”“重置”功能,将需要配合JS来实现。

       图片按钮:<input  type=“image” src=“图片的URL”/>

              图片按钮的默认动作,就是提交表单。

 

 

框架

学习手册的制作:它其实就是网页框架的制作,生成电子书的一具。“电子书制作工具”关键字。

框架主要应用于:电子书、帮助手册、企业网站的后台管理等。

框架技术,对于低版本的浏览器一般不支持,IE浏览器支持最好,Firefox浏览支持不太好。

网站前后一般不用框架实现,网站后台一般用框架实现。

 

框架技术:它就是将一个浏览器窗口划分成不同的小窗口,每个小窗口都显示不同的HTML网页。

框架就像一个窗户一样。一个窗户由:窗格和玻璃构成。

一个框架由:框架集(<frameset>)和框架页(<frame>)构成。

 

实例:一个上下型的框架

<frameset  rows=“180,*,180”>

       <frame src=“topFrame.html” />

       <frame src=“mainFrame.html” />

       <frame src=“rightFrame.html” />

</frameset>

 

注意事项:<frameset>和<body>只能二选一。

 

<frameset>的常用属性

       Cols:划分列的框架,如:cols=“180,10,*”左180px,中间10px,右边为自动

                                                 Cols=“20%,10%,*”可以使用百分比表示

       Rows:划分行的框架,如:rows=“180,*”

       Frameborder:是否显示框架边线,取值:yes或no

       Border:设置框线的粗细,border=“20”

       Bordercolor:设置框线的颜色

 

<frame>的常用属性

       Src:引入一个HTML文件进来,在指定的一个小窗口中显示;

       Scrolling:设置滚动条如何显示,取值:auto、yes、no

       Noresize:不能调整框架的尺寸;

       Name:设置当前窗口(框架)的名称;

 

       注意:框架中需要注意的是:一是左框架的链接内容,如何在主框架显示?

              如果返回框架首页,取决于<a>标记的 target属性的设置!

 

 

 

浮动框架(行内框架、内嵌框架)

浮动框架,就是在一个网页中开一个“小窗口”,在小窗口中来显示一个网页的内容。

<iframe>是<body>的子标记。

<iframe>如果浏览器不支持时,显示的提示信息</iframe>

 

<iframe>的常用属性

       Src:引入哪一个网页文件进来;

       Width:指浮动框架的宽度

       Height:指浮动框架的高度

       Frameborder:是否显示框架边框,取值:yes、no、1、0

       Scrolling:网页内容该如何显示,取值:auto、yes、no

       Align:实现框架和文本混排

       Hspace:左右间距

Vspace:上下间距