Java Web 程序设计----基于SSM框架

提示：主要用于个人学习、复习、查阅等。

文章目录

Java Web 程序设计----基于SSM框架
- 一、网页前端开发基础
- - HTML文档结构

提示：以下是本篇文章正文内容，下面案例可供参考

一、网页前端开发基础

HTML文档结构

信息：
1.<html>标记，HTML文件中所有标记都放置在<html></html>中
2. <head></head>标记，头标记，放置HTML文件信息（包含CSS样式）
3. <title></title>标记，标题标记，定义网页的标题
4. <body></body>标记，页面主体
5. <br>换行标记，单独出现，不成对
6. <p></p>段落标记，段前段后各添加一个空行
7. <h1></h1>到<h6></h6>为标题标记，级数越高，文字的字体也越大
8. <center></center>居中标记
9. <b></b>加粗
10. <ul></ul>创建一组无序列表，每个列表项项前使用<li>表示
11. <ol></ol>创建一组有序列表项前使用<li>表示
例：

<html><head><title>网页标题</title></head><body><center><b>黄鹤楼送孟浩然之广陵</b><br>故人西辞黄鹤楼，烟花三月下扬州.<br>孤芳远影碧空尽，唯见长江天际流.<br></body></center>
</html>

<html><head><title>设置标题标记</title></head><body><h1>java开发的三个方向</h1><h2>java SE</h2><p>主要用于桌面程序的开发。它是学习java EE和java ME的基础。</p><h2>java EE</h2><p>主要用于网页程序的开发。随着互联网的发展，越来越多的企业使用java语言来开发自己的网站，其中不乏世界500强企业。</p><h2>java ME</h2><p>主要用于嵌入式系统的开发。</p></body>
</html>

<html><head><title>列表标记</title></head><body>编程词典有下面几个品种<p><ul><li>java<li>VB<li>VC<li>.net<li>C#</ul></p><p><ol><li>java<li>VB<li>VC<li>.net<li>C#</ol></p></body>
</html>

<table></table>表格标记，width设置设置表格宽度，border设置表格边框，align设置对齐方式，bgcolor设置背景颜色；<caption></caption>表格标题；<th></th>表头；<tr></tr>表格行标记；<td></td>单元格标记

<body><table width="318" height="167" border="1" align="center"><caption>学生考试成绩单</caption><tr><td align="center" valign="middle">姓名</td><td align="center" valign="middle">语文</td><td align="center" valign="middle">数学</td><td align="center" valign="middle">英语</td></tr><tr><td align="center" valign="middle">张三</td><td align="center" valign="middle">89</td><td align="center" valign="middle">99</td><td align="center" valign="middle">86</td></tr><tr><td align="center" valign="middle">李四</td><td align="center" valign="middle">99</td><td align="center" valign="middle">97</td><td align="center" valign="middle">97</td></tr><tr><td align="center" valign="middle">王五</td><td align="center" valign="middle">80</td><td align="center" valign="middle">87</td><td align="center" valign="middle">86</td></tr></table>
</body>

<form></form>表单标记。action用来指定处理表单数据程序的URL地址；method用于指定数据传送到服务器的方式，分别为get和post,get表示输入的数据追加到action后面，并传送到服务器，post会将输入的数据按照HTTP中的post传输方式传送到服务器；name指定表单的名称，onSubmit指定当用户点击提交按钮时触发的事件；target指定输入数据显示在哪个窗口
<input>表单输入标记，格式如下：

<input type="image" disabled="disabled" checked="checked" width="digit" height="digit" maxlength="digit" readonly="" size="digit" src="uri" usemap="uri" alt="" name="checkbox">
type属性的属性值：

可选值	描述
text	文本框
password	密码域
file	文件域
radio	单选按钮
checkbox	复选按钮
submit	提交按钮
reset	重置按钮
button	普通按钮
hidden	隐藏域
image	图像域

<input>标记的属性:

属性	描述
type	输入类型
disabled	字段不可用，也可指定空值
checked	用于type属性为radio和checkbox的情况，字段是否被选中。属性为空值可也指定为checked
width	输入字段的宽度，用于type属性为image的情况下
height	输入字段的宽度，用于type属性为image的情况下
maxlength	可输入文字的个数，用于type属性为text和password情况下，默认没有字数限制
readonly	输入字段是否只读，其属性可以为空值，也可以指定为readonly
size	用于指定输入字段的宽度，当type值为text何password时，以文字个数为单位，当type为其他值时，以像素为单位
src	用于指定图片来源，只有type为image时有效
usemap	为图片设置热点地图，只有type属性为image时有效。属性值为URI,URI的格式为“#”+“标记的name属性值”，例如name标记的name属性值为Map，该URI为#Map
alt	用于指定图片无法显示时显示的文字，只有当type属性为iamge时有效
name	由于指定输入字段的名称
value	由于指定输入字段默认数据值，当type属性为checkbox和radio时，不可省略此属性，其他值时可以省略，当type属性为button、reset和submit时，指定的是按钮显示的文字；当type属性为checkbok和radio时，指定的是数据项选定的值

<select></select>下拉菜单标记，name为名称属性；size指定列表框中显示的选项数量，超出改数量的选项可以通过拖动滚动条查看；disabled用于指定当前列表框不可使用；multiple用于让列表框支持多选。使用<option>向列表框中添加内容
<textarea>多行文本标记，name名称属性，cols列数（宽度），rows行数（高度），disabled不可使用，readonly只读，wrap设置文字是否自动换行。
例：

<body><form action="" method="post" name="myform">用户名：<input name="username" type="text" maxlength="20">密码：<input name="pwd1" type="password" size="20" maxlength="20">性别：<input name="sex" type="radio" value="男" checked>男   <input name="sex" type="radio" value="女">女爱好：<input name="like" type="checkbox"value="体育">体育<input name="like" type="checkbox" value="旅游">旅游<input name="like" type="checkbox" value="看书">看书<input name="like" type="checkbox" value="听音乐">听音乐E-mail:<input name="email" type="text" size="50"><input name="Submit" type="submit" value="   确定保存"><input name="Reset" type="reset" value="重新填写"><input name="image" type="imageField" src="data:images/btn_bg.ipg">
</body>