TP02(HTML基本标签)

1HTML基本标签（二）第二章2回顾与作业点评•W3C中XHTML1.0的基本规范是什么？•创建符合W3C规范的文档需要注意什么问题？•常用的块标签分为几类？各包括哪些标签？•常用的行级标签包括哪些？3预习检查•超链接的基本语法是什么？•表单中一般包括哪些常用的表单元素？•按钮和复选框的应用场合？4本章任务•制作页面间导航•制作“注册”表单页面5本章目标•使用超链接实现页面间导航•使用各种表单元素实现注册页面6超链接•超链接---实现页面间的导航链接文本或图像链接地址（目标）7……ahref=span.htmltarget=_blank灿坤蒸气电熨斗/a……基本语法链接在新窗口中打开操作演示1：超链接ahref=链接地址target=目标窗口位置链接热点文本或图像/a8……ahref=../web1.htm上级目录/aahref=../../web2.htm上上级目录/a……链接路径•相对地址：相对于当前目录的地址，常用•绝对地址：指向目标地址的完整描述，少用上级目录：../上上级目录：../../ahref=/memAdmin/login/login.htm登录/aahref=搜狐/aahref=login/login.htm登录/a操作演示2：链接路径9……ahref=register/register.html[免费注册]/aahref=login/login.htm[登录]/a……超链接的三类应用场合4-1•页面间链接•锚链接•功能性链接常用于网站导航相对路径操作演示3：页面链接10•实现锚链接1、定义标记（锚）：aname=标记名目标位置/a2、设置链接到标记位置：ahref=#标记名当前位置/a……ahref=#star[明星专区]/a……aname=“star”明显专区内容/a……超链接的三类应用场合4-2定义标记设置链接到标记位置A.页面内的锚链接适用于页面内容较多，超过一屏的场合操作演示4：锚链接（同页）11超链接的三类应用场合4-3•实现锚链接……标记所在页….ahref=#star[明星专区]/a……B.页面间的锚链接……链接页….明星体验：ahref=anchor.html#star明星专区/a……操作演示5：锚链接（不同页间）12•功能性链接–邮箱、QQ链接等……ahref=mailto:[e-mail]站长信箱/a……超链接的三类应用场合4-4操作演示6：电子邮件链接13•注释……!--li被注释掉的行将不显示/li--li正常显示行1/lili正常显示行2/li……注释操作演示7：注释标签!--注释内容--用于增加代码的可读性，不显示14特殊符号•特殊符号–空格： –大于()：>–小于(）:<–引号（”）："–版权号()：©……COPYRIGHT©&npbs; 2003-2010  ahref=“index.htm”北京市贵美商城有限公司……1、因为、等符号在HTML中已使用，所以必须用其他符号来代替2、都以分号结束（；）操作演示8：版权信息15练习——超链接与特殊符号•需求说明：–实现页面超链接的效果完成时间：25分钟跳转到login.html页面，该内页放一”返回“链接，点击返回到主页邮箱链接锚链接：跳转到其他页面的某位置特殊符号：版权和空格16共性问题集中讲解常见调试问题及解决办法代码规范问题共性问题集中讲解17•表单的典型应用为什么使用表单用户登录/注册收集用户反馈信息提供搜索工具18单行文本框(text)单选按钮(radio)复选框(checkbox)下拉列表(select)重置按钮(reset)提交按钮(submit)密码框(password)常见的表单元素文本域(textarea)19formaction=表单提交地址method=提交方法…文本框、按钮等表单元素…/form表单的基本语法2-1指定提交后，由服务器上哪个处理程序处理指定向服务器提交的方法：一般为post或get方法,post方法比较安全20表单的基本语法2-2……formaction=login.jspmethod=postp用户名：inputname=usernametype=textsize=20maxlength=10//pp密  码：inputname=pwdtype=passwordsize=20//ppinputtype=submitname=btnvalue=提交/  inputname=resettype=resetvalue=重填//p/form……表单输入元素：input表单提交地址和方法的设置操作演示9：表单应用21•表单的典型应用：假定登录126邮箱表单的执行原理Internet12客户端：请求登录，通过表单填写账户信息服务器端：验证发来的账号信息，然后给出反馈客户端和服务器类似两人沟通一样，从而建立交互活动22inputname=表单元素名称type=类型value=值size=显示宽度maxlength=对大长度checked=是否选中/指定元素的类型，可为text、radio、submit等控件的名称控件的初始值控件的初始宽度控件中输入的最多字符个数控件是否被选中checked表单元素的基本格式23•文本框formmethod=postaction=p用户名：inputname=userNametype=textsize=21//p……/form表单元素的逐一介绍8-1单行文本输入框，字符宽度为21name用于服务器端获取数据，例如：request.getParameter(userName)操作演示10：文本框应用inputname=名称type=textvalue=初值size=数字24•密码框formmethod=postaction=p密  码：inputname=passtype=passwordsize=22//p……/form表单元素的逐一介绍8-2隐藏输入的信息操作演示10：密码框应用inputname=名称type=passwordvalue=初值size=数字25•按钮......inputtype=resetname=resetvalue=重填/inputtype=submitname=buttonvalue=同意……/inputtype=buttonname=confirmvalue=点播音乐/inputtype=buttonname=cancelvalue=取消/inputtype=imagesrc=images/login.gif/……表单元素的逐一介绍8-3操作演示10：命名按钮应用inputname=名称type=按钮类型value=按钮文字src=图片按钮的图片url普通按钮：button提交按钮：submit重置（清空）按钮：reset图片按钮：image26•单选按钮......br/性别：inputname=gentype=radiovalue=男checked=checkedinputname=gentype=radiovalue=女……表单元素的逐一介绍8-4特点：单选名字name相同表明属于同一组操作演示11：单选按钮应用inputname=“组名type=radiovalue=…checked=…27•复选框……爱好：inputtype=checkboxname=hobby1value=sports/运动  inputtype=checkboxname=hobby2value=talkchecked=checked/聊天  inputtype=checkboxname=hobby3value=play/玩游戏……表单元素的逐一介绍8-5特点：多选操作演示12：复选框应用inputtype=checkboxname=…value=…checked=…28练习——贵美登录页•需求说明：–完成网站登录页面完成时间：20分钟1、提交地址：login.jsp2、提交方法：post29•文件域......pinputtype=filename=files/br/inputtype=submitname=uploadvalue=上传//p……表单元素的逐一介绍8-6显示上传文件的地址操作演示13：文件域应用inputtype=filename=…30小结•前面所学的各类表单元素，语法分别是什么？type功能例子text单行文本输入inputtype=textname=username/password密码inputtype=passwordname=password/radio单选inputtype=radioname=sexvalue=男/男inputtype=radioname=sexvalue=女/女checkbox多选inputtype=checkboxname=hobbyvalue=书/书inputtype=checkboxname=hobbyvalue=画/画reset重置表单数据inputtype=resetvalue=重置/file文件上传inputtype=filename=files/submit提交表单数据inputtype=submitvalue=提交/image图形提交按钮inputtype=imagesrc=images/button.gif/button普通按钮inputtype=buttonvalue=播放音乐/31•列表框......selectname=bmonoptionvalue=selected=selected[选择月份]/optionoptionvalue=0一月/optionoptionvalue=1二月/optionoptionvalue=2三月/optionoptionvalue=3四月/option/select……表单元素的逐一介绍8-7提供固定选项，避免用户输入错误操作演示14：列表框应用selectname=指定列表名称size=行数optionvalue=选项值selected=selected…/option……/select32•多行文本框......h2imgsrc=images/read.gifalt=阅读协议title=阅读协议/阅读贵美网服务协议/h2ptextareaname=textareacols=40rows=6欢迎阅读服务条款协议.../textarea/p……表单元素的逐一介绍8-8操作演示15：多行文本框应用textareaname=...cols=列宽rows=行宽文本内容/textarea33•隐藏域方便服务器端“记住”客户端的信息、但又不希望客户看到的数据......inputtype=hiddenname=useridvalue=666/……表单的高级用法2-1隐藏的客户代号信息：666，但客户端页面不显示隐藏域：既方便服务器端“记住”客户端的数据，又避免因显示浏览者不关心的数据导致用户反感操作演示16：隐藏域应用inputtype=hiddenname=….value=…/34•只读和禁用属性–readonly：希望某个框内的内容只允许用户看，不能修改–disabled：因没达到使用的条件