1.JavaWeb项目基本html知识梳理：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
</head>
<body>
<!-- < 表示左尖括号
> 表示右尖括号
  表示空格
-->
我是<br/>标签
<!--超链接-->
<h1 align=""></h1>
<a href="http://www.baidu.com">百度</a><br/>
<a href="http://www.baidu.com"target="_self">百度</a><br/>
<a href="http://www.baidu.com"target="_blank">百度</a>
<!--无序列表-->
<ul>
<li>坂井泉水</li>
<li>滨崎步</li>
<li>大黑摩季</li>
<li>黄家驹</li>
</ul>
<br/>
<!--有序列表-->
<ol>
<li>坂井泉水</li>
<li>滨崎步</li>
<li>大黑摩季</li>
<li>黄家驹</li>
</ol>
<br/>
<!--图像资源
src加文件路径
width图像宽度
height图像高度
alt 如果图像无法加载则显示的文字
-->
<img src=""width=""height=""border=""alt=""/>
<!--table 是表格标签
border 是设置表格边框
width 是设置表格宽度
height 是设置表格高度
align 设置表格对齐
cellspacing 设置单元格间距
tr 是行标签
th 是表头标签 th表头默认对td的加粗和剧中显示
td 是单元格标签
align 设置表格内容对齐
-->
<table border="1" height="300"width="300" cellspacing="0">
<tr>
<td align="center" ><b>1.1</b></td>
<th>1.2</th>
<th>1.3</th>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
<!--需求：新建一个五行五列的表格，
第一行第一列的单元格要跨两列，
第二行第一列的单元格跨两行，
第四行第四列的单元格跨两行两列
rowspan = "" 跨几列
colspan = "" 跨几行
-->
<table border="1" width="300" height = "300">
<tr>
<td colspan="2">1.1</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
<td>3.5</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td colspan="2" rowspan="2">4.4</td>
</tr>
<tr>
<td>5.1</td>
<td>5.2</td>
<td>5.3</td>
</tr>
</table>
<!--ifarme标签可以在页面上开辟一个小区域显示一个单独的页面
ifarme和a标签组合使用的步骤：
1.在iframe标签中使用name属性定义一个名称
2.在a标签的target属性上设置iframe的name属性值
-->
<!--ifarme标签让页内跳转,而不是本页跳转-->
<iframe src="index.html" width="500" height="400" name="ab"></iframe>
<br/>
<ul>
<li><a href="test.html" target="ab">跳转到test</a> </li>
</ul>
<!--div span p 标签的演示
div标签 默认独占一行
span标签 它的长度是封装数据的长度
p段落标签 默认会在堕落的上方和下方各空一行(如果原先有空行就不会再去空行)
-->
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
<p>p标签1</p>
<p>p标签2</p>
</body>
</html>2.form表单提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--form表单
一般可以把form表单放到一个table里
一条信息放到一个td中如下：
input type="text" 输入文本
value="" 默认值
type="password"输入密码
type="radio" 单选: name 用来分组;checked="checked"默认选择这一项
type="checkbox" 复选框
select 标签是下拉列表框
option是下拉列表框中的选项
textarea 表时多行文本输入框
rows属性设置可以显示几行的高度
cols属性每行显示多少个字符
type="reset"重置按钮
value=""用来修改按钮名字
type="submit"提交按钮
value=""用来修改按钮名字
type="button"按钮
value=""用来修改按钮名字
type="file" 用来上传文件
type="hidden"隐藏域，不需要用户看到的消息
-->
<!--
表单提交没有发送给服务器的三中情况：
1.表单项没有name属性值
2.单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
3.表单项不在提交的form标签中
提交方式：
GET请求的特点是：
1.浏览器地址栏中的地址是：action属性(+?+请求参数)
请求参数格式是： name=value&name=value
2.不安全
3.他有数据长度的限制。
POST请求的特点是：
1.浏览器地址栏中只有action属性值
2.相对于GET请求安全
3.没有数据长度的限制
-->
<form action="http://localhost:8080" method="post">
<input type="hidden" name="action" value="login"/>
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<td>User:</td>
<td><input type="text" name="username" value="默认值"/></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password"/></td>
</tr>
<tr>
<td>Confirm Password:</td>
<td><input type="password" name="confirmpassword"/></td>
</tr>
<tr>
<td>sex</td>
<td><input type="radio" name="sex" value="man" checked="checked"/>male
<input type="radio" name="sex" value="women"/>female
</td>
</tr>
<tr>
<td>Hobby:</td>
<td><input type="checkbox" value="java"/>Java<input type="checkbox" value="python"/>Python</td>
</tr>
<tr>
<td>Nationality</td>
<td>
<select>
<option value="NONE">----countries----</option>
<option selected="selected" value="china">China</option>
<option value="japan">Japan</option>
<option value="america">America</option>
</select>
<tr>
<td>Self-assessment</td>
<td><textarea name="self" rows="10" cols="20">标签内的值才是默认值</textarea></td>
</tr>
<tr>
<td><input type="reset" value="reset"/></td>
<td><input type="submit" value="submit"/></td>
</tr>
<tr>
<td><input type="button" value="button"/></td>
<td><input type="file"/></td>
</tr>
</table>
</form>
</body>
</html>
扫一扫
271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
