001-静态页面-html

HTML语言概述•HTML(HyperTextMarkupLanguage)，即超文本标记语言，是制作网页的标准语言•HTML语言的基本组成是元素，通过特定的元素实现功能。•元素的出现形式成对出现的：元素……/元素单个出现的：元素HTML文件结构•有头部和正文部分组成：htmlheadtitle标题名字/title头部内容/headbody正文部分内容/body/htmlHTML页面元素•HTML元素用在文档的开头和结尾•Head元素标识文档头部的开头和结尾•Title元素显示页面的标题•Body元素标识正文部分的开头和结尾bodybackground=“#ffff88”……/body•字号大小用h1~h6来标识HTML页面文本•字体元素font……/font，包括字体大小和颜色的设置•特殊字符字符引用：&#ASCII码例如：是.0实体引用：&实体；例如：<；空格 •分段标志p，结束标志可以省略•换行标识br，没有结束标志•插入水平线hr•字符修饰符：embiuHTML页面列表•列表范围以元素ul或ol成对出现标识•li——单个出现，用于单行内容•一般结构是：ullili……/ul在列表项目前加符号*在列表项目前加序号1，2，HTML页面表格•表格元素的结构tablecaption表格标题信息/captiontrtd……/td……/trtrtd……/td……/tr……/table超链接元素•ahref=“URL”要显示文本或图片/aURL包括被访问的信息资源的类型、地址和文件名例如：ahref=可控人生核聚变.html个人简介/aahref==new我的母校/aahref=mailto:[e-mail]我的信箱/a•协议类型还可以有Ftp、Telnet嵌入图片•img属性，不需要成对使用Src=“图像文件名”align=bottom或middle或topalt=“替代文字”imgsrc=images\konian72.gifwidth=150height=300alt=konian72HTMLHTML表单表单••WebWeb运行原理运行原理••HTMLHTML表单的概念表单的概念••表单元素介绍表单元素介绍••HTMLHTML表单的客户端确认表单的客户端确认••客户端表单确认实例客户端表单确认实例Web运行原理－1•客户端同Web服务器之间的协议为http•HTTP为超文本传输协议•HTPP协议为“请求和响应”协议•客户端请求包括：请求行、头、信息体•客户端请求的方法–GET、POST、HEAD–DELETE、TRACE、PUT•提交表单的方法：GET、POSTWeb运行原理－2•服务器接收到请求后，返回HTTP响应•每个响应：状态行、头、信息体•常见状态–404所请求的文件不存在–500服务器程序出错–200OK成功•信息体用于浏览器显示页面访问失败HTML表单•表单是具有输入域、文本域的页面•用于客户端同服务器端交互•用户在客户端填写表单，然后“提交”•表单中的信息发送到服务器•服务器返回处理情况HTML表单标记•表单主标记–form/form•表单中的标记–input–select/select–option–textarea/textarea•form是表单开始标记，/form结束表单的例子（formtest.html）%--表单例子，formtest.html文件代码--%htmlheadtitle表单/titleheadbodyformmethod=POSTaction=palign=center用户登录palign=center用户名：inputtype=textname=Usersize=20    密码：inputtype=passwordname=pwdsize=20brbr/form/body/html运行结果form标记•描述表单的特性，语法formmethod=POSTaction=“enctype=“”•Method表单传输方法–GET方法将表单信息在URL后传输–POST方法将表单信息作为信息体传输•action为表单处理方式，通常为一个URL•enctype为编码方式input标记•表单中输入信息的区域•属性–type类型–name名称–id标识–maxlength昀大字符数–size输入域宽度–value域的初始值–button按钮用javascript响应input的类型•text文本•passwowrd口令方式•checkbox多选框name相同•radio单选按钮name相同•image图片•hidden隐藏表单发送数据•submit提交按钮向服务器提交表单•reset复位按钮将表单充置为初始状态文本框：TEXTAREA•多行文本域：textarea/textarea•参数–COLS：宽度–ROWS：高度–NAME：名称textareaNAME=“Computer”ROWS=6COLS=64CPUPIV1500Memory512M/textarea下拉框：SELECT•定义列表框：select/select•参数–MULTIPLE可同时选取多行–NAME名称–SIZE可见项目数•每个项目用option标记•属性SELECTED出现在option表示选中select的例子selectname=areastyle=width50size=1optionvalue=北京selected北京/optionoptionvalue=天津天津/optionoptionvalue=上海上海/optionoptionvalue=重庆重庆/option/select表单提交•提交方式：–submit类型按钮提交表单–通过普通按钮的javascript函数•传输方法依据form中的method–推荐使用POST•传输编码依据form中的enctype•处理方式依据form中的actioninputtype=submitvalue=提交表单清除•reset按钮重置表单为初始值inputtype=resetvalue=全部重写/p综合例子%--表单综合例子，formexe.html文件代码--%htmlheadtitle表单/titleheadbodyformmethod=POSTaction=palign=center用户注册palign=center用户名：inputtype=textname=Usersize=20    密码：inputtype=passwordname=pwdsize=20brbrp你喜欢：inputtype=checkboxname=sportsvalue=football足球inputtype=checkboxname=sportsvalue=bastketball篮球    性别：inputtype=radioname=sexyvalue=male男inputtype=radioname=sexyvalue=female女brbrp你的计算机/ptextareaNAME=“Computer”ROWS=6COLS=64CPUPIV1500Memory512M/textareabrbrp你计算机的操作系统inputtype=imagename=ossrc=images\cmputer.jpg    你所在地：selectname=areastyle=width50size=1optionvalue=北京selected北京/optionoptionvalue=天津天津/optionoptionvalue=上海上海/optionoptionvalue=重庆重庆/option/selectbrbrinputtype=submitvalue=提交inputtype=resetvalue=全部重写/p/form/body运行结果表单的确认•客户端确认–减少服务器负载–缩短用户等待时间–兼容性难•服务器端确认–统一确认–兼容性强–服务器负载重客户端确认•采用javascript进行确认•常用函数–isBetween–isDate–isTime–isDigit–isEmail–isEmpty–isInt–isReal客户端确认例子%--客户端确认例子，checkform.html文件代码--%htmlheadtitle客户端确认/titleheadbodyformmethod=POSTname=frm1onsubmit=returncheckform(this)palign=center用户登录palign=center用户名：inputtype=textname=namesize=20    密码：inputtype=passwordname=pwdsize=20brbrinputtype=submitvalue=提交inputtype=resetvalue=全部重写/p/formSCRIPTlanguage=JavaScriptfunctioncheckform(frm){varflag=true;if(frm.name.value==){alert(姓名不能为空，请输入值！);frm.name.focus();flag=false;}returnflag;}/SCRIPT/body/html运行结果