jsp第一章web网页设计基础

上传人：a*** IP属地：湖北上传时间：2023-02-01 格式：PPTX 页数：183 大小：12.24MB 积分：28 举报 版权申诉

已阅读5页，还剩178页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

JSP编程教程授课教师：刘红梅掌握HTML语言；掌握Servlet和会话技术掌握基于Servlet的MVC模式掌握在JSP数据库中使用数据库的技术运用JSP技术开发一个应用网站课程目标第一章绪论两种WEB开发模式介绍网站相关概念网站开发相关技术JSP网页HTML语言C/S（Client/Server）：客户/服务器模式。客户端需要安装专用的客户端软件与服务器进行数据交互。B/S（Brower/Server）：浏览器服务器模式。客户端上只需安装一个浏览器（Browser），浏览器通过WebServer同数据库进行数据交互。1、WEB开发模式QQ客户端WEBQQWebQQ为大家提供了聊天记录的全漫游，不论你走到哪里，都替你保存7天的WebQQ聊天消息，方便你随时查阅，局域网特定用户群中资源共享B/S即Browser/Server数据库服务器学生机1学生机2学生机n需要安装客户端软件服务器Internet全球用户群中资源共享美国用户中国用户数据库服务器无需安装客户端软件C/S即Client/Server可维护性响应速度界面设计服务器负载C/S需要对每个客户端升级客户端与数据库直连，响应速度快界面设计满足用户的个性化需求客户端与服务器都能处理任务，对客户机要求高B/S几种在总服务器上进行升级Web应用程序动态刷新，响应速度慢个性化特点低大部分工作由服务器完成，客户端仅使用浏览器。C/S与B/S对比表数据安全性数据一致性数据实时性C/S每个数据点上数据的安全将影响整个应用系统的数据安全同步各客户端的数据后，服务器才能得到最终数据不能实时看到当前业务情况B/S数据直接保存在总的数据库中数据集中存放，不存在数据一致性问题可以实时看到当前业务情况C/S与B/S对比表（续）以校园一卡通数据为例，了解两种模式关于数据的安全性、一致性和实时性的不同。Web服务器：Web服务器，在网络中为实现信息发布、资料查询、数据处理等诸多应用而搭建基本平台的服务器。有时，我们也常常称Web服务器叫Web容器。常用的服务器有：Tomcat、IIS，Apach，GFEGoogle，Zeus等）2、网站相关概念网站指在因特网上根据一定的规则，使用HTML（超文本标记语言）等工具制作的用于展示特定内容相关网页的集合。我们可以利用网站来发布资讯，或者提供相关的网络服务。（百度百科）网站与服务器的关系网站必须放在服务器上才能访问一个服务器上可以放多个网站网站可以通过服务器的地址访问网页网页是构成网站的基本元素，是承载各种网站应用的平台，一般使用HTML/XHTML,php,asp,jsp等语言编写，可以嵌入文本、图形、音视频等信息。主页主页可以认为是一组网页中最主要的网页，是进入其他网页的起始网页，主页通过超链接链接到其他网页。超链接Web上的信息是由彼此关联的文档组成的，而使其连接在一起的是超链接。超链接是HTML语言中的一个标记，标记中显示的内容较之其他内容有明显特征，如颜色不同、带有下画线等。B/S中浏览器端与服务器端采用请求/响应模式进行交互应用服务器数据库服务器IEIE解释执行HTML文件从服务器端检索到的信息返回响应客户端的请求信息发送请求访问数据库返回结果运行服务器端脚本程序1用户输入234网页设计：即网站美工，如图像处理PhotoShop，色彩搭配，网页布局等。页面制作：即web前端架构，由于网页效果越来越丰富，浏览器增多，对页面要求也越来越高，需要精通html/css,了解html/css,熟悉js等脚本语言。程序开发：现在主流的有，php，jsp，根据项目需求实现相应的Web功能。3、网站开发相关技术在传统的HTML页面文件中加入Java程序片和JSP标签，就构成了一个JSP页面。JSP页面可由5种元素组合而成：①普通的HTML标记符；②JSP标记，如指令标记、动作标记；③变量和方法的声明；④Java程序片；⑤Java表达式。4、JSP网页的组成HTML即超文本标记语言，是全球广域网上描述网页内容和外观的标准。HTML包含了一对打开和关闭的标记，其中有属性和值。标记描述了每个网页上的组件，如文本格式、段落、表格、图像等。5、HTML语言一、标记语法1.什么是标记语法HTML是用于描述功能的符号称为“标记”。比如<html>、<head>、<body>等，都是标记，<html>标记表示HTML文档的开始。标记在使用时必须用尖括号“<>”括起来。2.单标记之所以称为“单标记”，是因为它只需单独使用就能完整地表达意思，这类标记语法是：<标记名称>最常用的单标记<br>,它表示换行。5.1HTML基本语法3.双标记“双标记”由“始标记”和“尾标记”两部分构成，必须成对使用。始标记告诉WEB浏览器从此处开始执行该标记所表示的功能，尾标记告诉WEB浏览器在这里结束该功能。始标记前加一个正斜杠（/）即为尾标记。<标记>内容</标记>其中"内容"部分就是要被这对标记施加作用的部分。<html></html><body></body><head></head>这三个标记是html页面最基本的标记，4.注释对代码功能进行说明或注释无效代码<!—注释内容-->二、属性语法1.什么是属性这里的属性指的是标记的属性2.属性语法<标记名字属性1属性2属性3><hrsize=3align=leftwidth="75%">三、HTML文件的命名1.文件的扩展名要以.htm或.html结束2.文件名中只可由英文字母、数字或下划线组成3.文件名中不要包含特殊字符，比如空格、$4.网站首页文件名默认是index.htm或index.html四、编写HTML文件的注意事项1.所有标记都要有尖括号括起来，浏览器就可以知道尖括号内的标记语言是HTML命令2.对于成对出来的标记，最好同时输入起始标记或结束标记，以免忘记3.采用标记嵌套的方式可以为同一个信息应用多个标记，如下<tag1><tag2>同一信息</tag2></tag1>4.在代码中，不区分大小写5.任何空格或回车在代码中都无效6.标记中不要有空格，否则浏览器可能无法识别

一个HTML文档包含头文件（head）和文件体（body）两个主要的部分构成，基本的文档结构如下：5.2HTML基本结构<html> <head> <title>标题<title> </head>

<body>

</body></html>一、文件头部内容设置页面标题<title>HTML文件标题在浏览器的标题栏中显示。每个HTML文件都有一个标题，用于说明文档的属性。基本语法：<html><head><title>test</title></head><body></body></html>定义元信息<meta>在HTML文件中，<meta>标记通过一些属性来定义文件的信息，比如文件的关键字、作者信息、网页过期时间等。HTML文件的头部文件可以有多个<meta>标记，<meta>不是成对标记。基本语法<metahttp-equiv=""name=""content="">语法说明<meta>标记中的http-equiv属性用于设置一个http的标题域，但确定值由content属性决定，name属性用于设置元信息出现形式，conent属性用于设置元信息出现的内容实例代码：<html><head>

<title>testkeywords</title><metaname="keywords"content="计算机、英语、经管、财会、职场"></head><body>计算机、英语、经管、财会、职场</body></html>二、主体内容<body>在HTML文件中，主体内容被包含在成对的<body></body>标记之间，同时<body>标记也有很多本身的属性，例如设置页面背景、设置页面边距等。相关属性：设置页面背景颜色：bgcolor=“”设置背景图片：background=“”设置网页边距：topmargin、leftmargin、rightmargin、bottommargin设置正文颜色：text=“”16种标准颜色的名称及其十六进制数值。颜

色名

称十六进制数值颜

色名

称十六进制数值淡蓝aqua(cyan)#00FFFF海蓝navy#000080黑black#000000橄榄色olive#808000蓝blue#0000FF紫purple#800080紫红fuchsia(magenta)#FF00FF红red#FF0000灰gray#808080银色silver#C0绿green#008000淡青teal#008080浅绿lime#00FF00白white#FFFFFF褐红maroon#800000黄yellow#FFFF00文字编辑段落编辑列表标记图像标记5.3HTML语言的基本元素字幕标记表格制作表单制作框架设计文字编辑一、编辑内容1.添加文字基本语法<body>请在此处添加文字</body>语法说明在网页中添加文字等其他内容，都要在<body></body>之间，需要插入文字的地方输入文字就可以实现。文字编辑2.添加空格在HTML文件中，添加空格的方式与其他文档添加空格的方式不同，网页中添加空格是通过代码控制，在Word、记事本、写字板中输入空格可以直接通过键盘空格键输入。基本语法<body>

</body>语法说明在HTML文件中，添加空格需要使用代码" "控制，需要多少个空格就需要添加多少个" "。文字编辑3.添加删除线在HTML文件中，给需要添加删除线的文字使用成对的<strike></strike>标记，就可以添加删除线。基本语法<body><strike>请在此输入需要添加删除线的文字</strike></body>语法说明在成对的<strike></strike>标记之间输入文字，在网页中显示改标记之间的文字就是被添加了删除线后的显示效果。文字编辑二、文字效果1.标题文字标签<hn><hn>标签一共为6级基本语法：<hnalign=参数值>标题文字</hn>align属性值为right，left（默认），center文字编辑2.编辑网页文字样式基本语法<body><fontface=""size=""color=""></font><body>语法说明在HTML文件中，利用成对标记就可以将网页中的文字根据需要，对其进行样式的编辑。文字编辑实例代码：<html><head><title>编辑网页文字样式</title></head><body>

没有使用效果后的文字!<br><fontface="楷体"size="6"color="#00ffff">

使用效果后的文字</font></body></html>文字编辑文字编辑3.设置文字标注标记<ruby>在HTML文件中，有时需要对某个字、词或者某个段进行说明，可以通过添加文字的标注标记来完成对网页中文字的说明。基本语法：<ruby>被说明的文字<rt>文字的标注</rt></ruby>语法说明：利用成对的<ruby><rt>标记，可以对网页中的文字进行标注。(html5支持的标记，IE8.0以上版本的浏览器才支持。文字编辑<html><head><title>设置文字标注标记</title></head><body><ruby>

当代最可爱的人

<rt>

志愿军

</rt></ruby></body></html>文字编辑文字编辑三、文字修饰1.简单修饰文字基本语法<body>普通文字的显示<br><b>加粗的文字</b><br><i>斜体的文字</i><br><u>添加下划线的文字</u><br><big>放大</big><br><small>缩小</small><br></body>文字编辑实例代码：<html><head><title>简单修饰文字</title></head><body>普通文字的显示<br><b>加粗的文字</b><br><i>斜体文字</i><br><u>添加下划线文字</u><br><big>放大</big><br><small>缩小</small><br></body></html>文字编辑文字编辑2.确定文字上下标基本语法：<body><sup>上标内容</sup><br><sub>下标内容</sub><br></body>语法说明：在HTML文件中，成对的<sup></sup>标记可以表示上标，利用成对的标记<sub></sub>表示下标。文字编辑实例代码：<html><head><title>确定文字上下标</title></head><body>

解下面方程：<br>x<sup>2</sup>-3x+2=0<br>

解：x<sub>1</sub>=1;x<sub>2</sub>=2<br></body></html>文字编辑文字编辑3.设置地址文字在网页中添加地址文字，是为了更方便地突出显示联系方式，将联系人的地址信息突出显示。基本语法：<body><address>请在此添加地址信息</address></body>语法说明：在HTML文件中，利用成对<address></address>标记就可以将网页需要显示的地址文件突出显示，其中的文本通常呈现为斜体。大多数浏览器会在该元素的前后添加换行。文字编辑实例代码：<html><head><title>设置地址文字</title></head><body>

书中有不恰当的地方，请您及时与我们联系：<br><address>清华大学出版社</address><br><address>mailto:market@1.</address><br></body></html>文字编辑段落编辑一、段落1.回车<br>2.分段控制标签<P>基本语法<palign="参数值">段落文字</p>,</p>可以省略参数值：right，left(默认)，center段落编辑3.居中显示文字<center>基本语法：<center>文字内容</center>4.预格式<pre>被包围在pre元素中的文本通常会保留空格和换行符基本语法：<pre>文字内容</pre>5.插入并设置水平线<hr>基本语法：<hralign="参数值"size="参数值"width="参数值"color="参数值"noshade>align:水平摆放位置，可选right,left,center（默认）size:水平线的粗细，或线的宽度，以像素为单位width:水平线的长度，以像素或百分比为单位color:水平线的颜色noshade：设定水平线是否显示3D阴影段落编辑实例代码：<html><head><title>预格式化</title></head><body><pre>

登鹳鹊楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

</pre></body></html>段落编辑段落编辑实例代码：<html><head><title>设置水平线</title></head><body>

<center>添加水平线后的效果</center>

<hrwidth=“70%"size="1"color="#00ffee">财政部有关负责人说，所谓"首购"，是指对于国内企业或科研机构生产或开发的，暂不具有市场竞争力，但符合国民经济发展要求、代表先进技术发展方向的首次投向市场的产品，通过政府采购方式由采购人或政府首先采购的行为。<hrwidth="400"size="3"noshade=""color="#00ee99"align="left">版权©:清华大学出版社</body></html>段落编辑段落编辑6.插入特殊符号基本语法&&©©™&trade®®¥¥§§段落编辑实例代码<html> <head> <title>插入特殊符号</title> </head> <body>

下面这段文字是插入版权符号后显示的效果：<br>

<metacharset=utf-8><title>插入定义列表</title></head><body><dl><dt>联系人<dd>XXX<dt>联系地址<dd>北京市丰台区

<dt>邮政编码<dd>100036</dl></body></html>列表和使用列表列表和使用列表三、插入无序列表<ul>基本语法:<ul><li>项目名称</li></ul>列表和使用列表<html><head><metacharset=utf-8>

<title>无序列表</title></head><body><ul><li>联系人：</li>xxx<li>联系地址：</li>北京市丰台区

<li>邮政编码：</li>100036</ul></body></html>列表和使用列表列表和使用列表四、插入有序列表<ol>基本语法<oltype=""start=""><li>项目名称</li></ol>Type:设定符号类型，属性值有1,A,a,i,IStart:设定列表的符号从第几项开始列表和使用列表<html><head><metacharset=utf-8><title>有序列表</title></head><body><olType=“a"start=“1"><li>联系人：xxx</li><li>联系地址：北京市丰台区</li><li>邮政编码：100036</li></ol></body></html>列表和使用列表插入图像一、插入图片<img>基本语法<imgsrc="图片地址">插入图像实例代码<html><head><title>插入图片</title></head><body><center><h2>网页中插入图片</h2><hr><imgsrc=02.jpg></center></body></html>插入图像插入图像二、添加图片提示文字<alt>基本语法<imgsrc="图片地址"alt="提示文字">Alt提示文字可以是中文也可以是英文插入图像实例代码：<html><head><title>添加图片提示文字</title></head><body><center><h2>添加图片提示文字</h2><hr><imgsrc=njnu.jpgalt=南京师范大学></center></body></html>

插入图像插入图像三、设置图片的宽度和高度基本语法：<imgsrc="图片地址"width="value"height="value">图片高度和宽度的单位可以是像素也可以是百分比插入图像实例代码：<html><head><title>设置图片宽度和高度</title></head><body><center><h2>设置图片宽度和高度</h2></center><br>原图</br><imgsrc="njnu.jpg"><br>宽150像素高80像素</br><imgsrc="njnu.jpg">width=150pxheight=80px>

<br>图像大小是原图的30%</br><imgsrc="njnu.jpg">width=30%height=30%></body></html>插入图像插入图像四、设置图片对齐方式基本语法<imgsrc="图片地址"align="关键字">关键字：Top，middle，bottom，left，right插入图像<html><head><title>设置图片对齐方式</title></head><body><center><h2>设置图片对齐方式</h2></center><hr><p><imgsrc="njnu.jpg"align=top>

图片顶部与同行的文字顶部对齐

</p><p><imgsrc="njnu.jpg"align=middle>

图片中部与同行的文字中部对齐

</p><imgsrc="njnu.jpg"align=bottom>

图片底部与同行的文字底部对齐</body></html>插入图像超链接的使用一、超链接的概念

超链接就是从一个网页跳转到另一个网页的途径。二、路径概念绝对路径：主页上的文件或目录在硬盘上的真正路径。相对路径：以引用文件的网页所在的位置为参考基础而建立的目录路径。同一目录下的文件：直接输入链接文件的名称上一级目录的文件：在目录名和文件名之间加“..\”；如果是上两级目录，则在目录名和文件名之间加“..\..\”下一级目录：直接输入目录名和文件名，之间以“\”分割超链接的使用例：相对目录的引用,index.htm如何引用photo.jpg文件c:\website\web\index.htm

c:\website\img\photo.jpg..\img\photo.jpg三、超链接的建立基本语法：<ahref=资源地址target=窗口名称>链接文字</a>资源地址可以是文件名或者URL（网址）Target:用于指定打开链接的目标窗口，默认属性为原窗口，打开一个新窗口，target=_blank在上一级窗口打开，target=_parent在浏览器的整个窗口打开,target=_top在同一个窗口打开，target=_self（默认）超链接的使用<html><head><title>插入外部链接</title></head><body><ahref="">新浪网</a><ahref=“test.html”>测试页面</a></body></html>超链接的使用超链接的使用插入内部链接基本语法<ahref=#目标名称

target=窗口名称>目录文字</a>在链接的目标处使用<aname=目标名称>超链接目标</a>超链接的使用<html><head><title>考倒你</title></head><body><h3>考倒你</h3><ahref="#t.1">世界上哪里的海不产鱼？</a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><h3><aname="t.1">第一题答案</a></h3>辞海不产鱼</body></html>超链接的使用超链接的使用超链接的使用三、图像链接基本语法<ahref=图片要链接的目标地址target=窗口名称><imgsrc=参数值alt=参数值border=参数值align＝参数值height=参数值width=参数值vspace=参数值hspace=参数值></a>超链接的使用<html><head><title>图像链接</title></head><body><center><ahref=><imgsrc=njnu.jpg></a></center></body></html>超链接的使用超链接的使用四、邮箱链接基本语法：<ahref=mailto:E-mail地址&cc=抄送人E-mail地址&bcc=密件抄送地址&subject=邮件主题&body=邮件正文>描述文字</a>超链接的使用<html><head>

<title>发送邮件</title></head><body><ahref=mailto:123@163.com&cc=1@&bcc=2@&subject=祝福&body=节日快乐>给你写信</a></body></html>超链接的使用表格的使用一、插入表格并定义表格结构<table>、<tr>、<td>基本语法：<table><tr><td></td></tr></table>语法说明：<table>:定义表结构<tr>:定义行结构<td>:定义列结构表格的使用<html><head><title>设置基本表格结构</title></head><body><tablewidth="470"border="1"align="center"><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr></table></body></html>表格的使用表格的使用二、设置表格标题<caption><table><captionalign=""valign="">插入表格标题</caption><tr><td></td></tr></table>表格的使用<html><head><title>插入表格标题</title></head><body><tablewidth="470"border="1"align="center"><captionalign="center">计算机语言<caption><tr><td>Dreamweaver</td><td>Access</td><td>C++</td></tr><tr><td>FrontPage</td><td>SQLSERVER2000</td><td>C#</td></tr></table></body></html>表格的使用表格的使用三、设置表格表头或标题行<th>基本语法：<table><tr><th>…</th><td></td></tr></table>表格的使用<html><head><title>设置表格表头</title></head><body><tablewidth="470"border="1"align="center"><tr><th>网页设计</th><th>数据库开发</th><th>程序设计</th></tr><tr><td>Dreamweaver</td><td>Access</td><td>C++</td></tr><tr><td>FrontPage</td><td>SQLSERVER</td><td>C#</td></tr></table></body></html>表格的使用表格的使用四、设置表格的宽度和高度基本语法：<tablewidth=""height=""><tr><td></td></tr></table>表格的使用<html><head><title>设置表格的宽度和高度</title></head><body><tablewidth="470"height="40"border="1"><tr><td> </td><td> </td><td> </td></tr></table>

<tablewidth="200"height="80"border="1"><tr><td> </td><td> </td><td> </td></tr></table></body></html>表格的使用表格的使用五、设置表格的边框属性基本语法：<tableborder=""bordercolor=""bordercolorlight=""bordercolordark=""><tr><td></td></tr></table>Border:边框粗细 Bordercolor:边框颜色Bordercolorlight:亮边框颜色Bordercolordark:暗边框颜色表格的使用<html><head><title>设置表格的边框属性</title></head><body><tablewidth="470"border="1"bordercolor="#0000FF"><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr></table></body></html>表格的使用表格的使用六、设置单元格边距与间距1.单元格之间的间距：<tablecellspacing=数值>2.文字与边框之间的间距：<tablecellpadding=数值>表格的使用<html><head><title>设置单元格间距</title></head><body><tablewidth="380"border="1"cellspacing="0"><tr><td> </td><td> </td><td> </td></tr></table><tablewidth="380"border="1"cellspacing="5"><tr><td> </td><td> </td><td> </td></tr></table></body></html>表格的使用表格的使用<html><head><title>设置单元格边距</title></head><body><tablewidth="380"border="1"cellpadding="0">

</tr></table><tablewidth="380"border="1"cellpadding="5"><tr><td>脚本语言</td><td> </td><td> </td></tr></table></body></html>表格的使用表格的使用七、设置表格背景基本语法：<tablebgcolor=""background=""align=""><tr><td></td></tr></table>表格的使用<html><head><title>设置表格的背景</title></head><body><tablewidth="470"border="1"bgcolor="red"align="center"><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr></table></body></html>表格的使用表格的使用八、设置行内容水平对齐和垂直对齐<table><tralign=“”valign=“”bordercolor=“”bgcolor=“”height=“”></tr><tr><td></td></tr></table>表格的使用<html><head><title>调整行内容水平和垂直对齐</title></head><body><tableborder="1"><tralign="center"height=50valign="bottom"><th>网页设计</th><th>数据库开发</th><th>程序设计</th></tr>

<tralign="center"bordercolor=redbgcolor=yellow><td>Dreamweaver</td><td>Access</td><td>C++</td></tr><tr><tdnowrap>FrontPage</td><td>SQLSERVER</td><td>C#</td></tr></table></body></html>表格的使用表格的使用九、设置跨行跨列<tdcolspan=数值><thcolspan=数值><tdrowspan=数值><throwspan=数值>Colspan：跨列Rowspan：跨行表格的使用<html><head><title>设置跨行</title></head><body><tablewidth="380"border="1"><tr><tdrowspan="2"> </td><td> </td><td> </td></tr>

<tr><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr></table></body></html>表格的使用表格的使用<html><head><title>设置跨列</title></head><body><tablewidth="380"border="1"><tr><tdcolspan="2"> </td><td> </td></tr>

<tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td></tr></table></body></html>表格的使用表单的设计一、表单标记基本语法：<formname=""method=""action=""enctype=""target=""></form>Name:设置表单名称Method：设置表单发送的方法，可以是"post"或者"get"Action：设置表单处理方式，可指定发送的页面Enctype：设置表单的编码方式target：设置表单的显示目标表单的设计form.html<html> <head>

<metacharset=utf-8>

<title>插入文本框</title> <head> <body>

<formmethod="post"action="sent.html">

请输入你的姓名：<br>

<inputname="text"type="text"maxlength="8"size="5"value="1">

<inputname="submit"type="submit"value="提交">

</form> </body></html>Sent.html<html> <head> <metacharset=utf-8> <title>插入文本框</title> <head> <body>

提交完成 </body></html>表单的设计二、插入文本框<text>基本语法<form><inputname="text"type="text"maxlength=""size=""value=""></form>表单的设计<html> <head> <metacharset=utf-8> <title>插入文本框</title> <head> <body> <form>

请输入你的姓名：<br> <inputname="text"type="text"maxlength="8"size="10"value="1"> </form> </body></html>表单的设计表单的设计三、插入密码框<password>基本语法<form><inputname="password"type="password"maxlength=""size=""></form>表单的设计<html> <head>

<metacharset=utf-8>

<title>插入密码框</title> <head> <body>

<form>

用户登录<br>

用户名：<inputname="text"type="text"maxlength="8"size="10"><br>

密

码：<inputname="password"type="password"maxlength="8"size="10"><br>

</form> </body></html>表单的设计四、插入文件域<file>基本语法<form>

<inputname="file"type="file"></form>表单的设计<html><head><title>插入文件域</title><head><body><form>

请上传你的照片<inputname="file"type="file"></form>

</body></html>表单的设计表单的设计五、插入标准按钮<button>基本语法<form><inputname="b1"type="button"value="标准按钮"></form>表单的设计<html><head><title>插入标准按钮</title><head><body><form>

<inputname="c1"type="button"value="标准按钮"></form>

</body></html>表单的设计表单的设计六、插入提交按钮<submit>

基本语法：<form><inputname="submit"type="submit"value="提交"></form>表单的设计<html><head><title>插入提交按钮</title><head><body><form><inputname="submit"type="submit"value="提交"></form></body></html>表单的设计七、插入重置按钮<reset>基本语法：<form><inputname="reset"type="reset"value="重置"></form>表单的设计<html><head><title>插入重置按钮</title><head><body><form><inputname="reset"type="reset"value="重置"></form></body></html>表单的设计表单的设计八、插入单选框<radio>基本语法：<form><inputname="r1"type="radio"checkedvalue=""></form>表单的设计<html><head><title>插入单选按钮</title><head><body><form>对讲机设置<br><inputname="c1"type="radio"checked>自动接听呼叫<br><inputname="c2"type="radio">拒绝接听呼叫<br>

</form></body></html>表单的设计表单的设计九、插入复选框<checkbox>基本语法：<form><inputname="r1"type="checkbox"checkedvalue=""></form>表单的设计<html><head><title>插入复选框</title><head><body><form>

QQ系统设置综合设置<br><inputname="c1"type="checkbox"checked>拒绝陌生人消息<br><inputname="c2"type="checkbox"checked>自动播放魔法表情<br><inputname="c3"type="checkbox">禁止所有用户上线提示<br></form></body></html>表单的设计表单的设计十、插入文字域<textarea>基本语法：<form><textareaname="text"rows=""cols=""></textarea></form>Rows:行数Cols:列数表单的设计<html><head><title>插入文字域</title><head><body><form>QQ系统设置留言设置<br><inputtype=checkboxchecked>离开时自动回复(50字以内)<br><textareaname="text"rows="10"cols="30"></textarea></form></body></html>表单的设计表单的设计十一、插入下拉列表<select>和列表项<option>基本语法：<form><selectname=""size=""multiple><optionvalue="">选择项<optionvalue="">选择项</form>Size：显示的选项数目Multiple：列表中的项目多选表单的设计<html><head><title>插入下拉菜单和列表</title><head><body><form>请选择你喜欢的特长<br><selectname="特长"size=10multiple><optionvalue="1">唱歌<optionvalue="2">画画<optionvalue="3">长跑<optionvalue="4">游泳<optionvalue="5">体操<optionvalue="6">足球<optionvalue="7">篮球<optionvalue="8">羽毛球<optionvalue="9">棒球</select></form></body></html>

表单的设计框架的应用一、框架分割方式1.左右分割方式<framesetcols="value,value,value"><framesrc="url"><framesrc="url"><framesrc="url"

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

jsp第一章web网页设计基础

文档简介

温馨提示

最新文档

评论

jsp第一章web网页设计基础

文档简介

温馨提示

最新文档

评论

相关文档