jsp之基本标签
1、基本的html 标签使用
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>The first html</title><!--标题 -->
</head>
<body bgcolor="88ada6">
<!-- 这是一个超链接锚点 为起始锚点 -->
<a name="start"></a>
<a href="#middle">我是起点超链接点我可到中间部分</a><br /><br />
<!-- 需求1：在网页上显示 我是字体标签 ，并修改字体为 宋体，颜色为红色。 -->
<font face="宋体" color="#ff0000">我是字体标签</font>
<br />
<!-- 需求1：把 <br> 换行标签 变成文本 转换成字符显示在页面上 -->
我是换行标签<br>
<p>我是段落标签<p>我的上边和下边会自己空一行</p>
<!-- 需求1：演示标题1到 标题6的 -->
<h6>我是六级标题 为最小标题了 我默认为左对齐</h6>
<h5 align="center">我是五级标题 我用align设置中对齐</h5>
<h4 align="center">我是四级标题 我用align设置中对齐</h4>
<h3 align="center">我是三级标题 我用align设置中对齐</h3>
<h2 align="right">我是二级标题 我用align设置右对齐</h2>
<h1>我是一级标题 为最大标题了</h1>
<font size="3" color="blue">我用 宋体 蓝色 大小为 8 告诉你下面为img标签</font>
<br/>
<!-- img标签链接图片如下 -->
<table border="1" cellspacing="3" cellpadding="2" >
<tr>
<td>
<img alt="sorry 尽力加载还是无缘 " src="imgs/1.jpg" width="150px" height="180px" border="1"/>
<br />
</td>
<td>
<img alt="sorry 尽力加载还是无缘 " src="imgs/2.jpg" width="150px" height="180px" border="1"/>
<br />
</td>
<td>
<img alt="sorry 尽力加载还是无缘 " src="imgs/10.jpg" width="150px" height="180px" border="1"/>
<br />
</td>
<td>
<img alt="sorry 尽力加载还是无缘 " src="imgs/4.jpg" width="150px" height="180px" border="1"/>
<br />
</td>
<td>
<img alt="sorry 尽力加载还是无缘 " src="imgs/5.jpg" width="150px" height="180px" border="1"/>
<br />
</td>
</tr>
<tr>
<td>
<img alt="sorry 尽力加载还是无缘 " src="imgs/6.jpg" width="150px" height="180px" border="1"/>
<br />
</td>
<td>
<img alt="sorry 尽力加载还是无缘 " src="imgs/7.jpg" width="150px" height="180px" border="1"/>
<br />
</td>
<td>
<img alt="sorry 尽力加载还是无缘 " src="imgs/8.jpg" width="150px" height="180px" border="1"/>
<br />
</td>
</tr>
</table>
<a name="middle"></a>
<a href="#start">我是位于中部的（锚点）点我返回顶部</a><br />
如果图片存在效果如下：
- 刘德华
- 张学友
- 黎明
- 郭富城
- 刘德华
- 张学友
- 黎明
- 郭富城
<!-- 需求1：普通的 超连接。 -->
<!-- 在新窗口中打开链接 邮件发送 -->
<a href="mailto:1243281068@qq.com" target="_blank">联系我(邮箱)</a>
<br />
<br />
<center>
<hr />
<font size="5" face="宋体"
color="#028300">我用了<center>设置了表格居中 如下</font>
<table height="210px" width="210px" border="1" cellspacing="0" cellpadding="">
<tr bgcolor="red">
<td colspan="2"></td>
<td rowspan="2" bgcolor="yellow"></td>
</tr>
<tr bgcolor="824720">
<td rowspan="2" bgcolor="green"></td>
<td height="70px" width="70px" align="center">炸</td>
</tr>
<tr bgcolor="blue">
<td colspan="2"></td>
</tr>
</table>
</center>
<br />
表格的跨行跨列效果如下：
<font size="4" face="宋体" color="#0e890f">我用了<center>设置了居中的表单 如下</font>
<br />
<form action="" method="post">
<center>
<table border="0" cellpadding="0" cellspacing="5" bgcolor="808080">
<tr>
<th>注册form表单</th>
</tr>
<tr>
<td>
用户名：<input type="text" value="请改写"/>
</td>
</tr>
<tr>
<td>
密码：<input type="password" value="*****"/>
</td>
</tr>
<tr>
<td>
性别：<input type="radio" name="sex" value="boy" checked="checked"/>男
<input type="radio" name="sex" value="girl"/>女
</td>
</tr>
<tr>
<td>
兴趣爱好： <input type="checkbox" name=like value="足球" checked="checked"/>足球
<input type="checkbox" name=like value="篮球"/>篮球
<input type="checkbox" name=like value="乒乓球"/>乒乓球
<input type="checkbox" name=like value="台球"/>台球
</td>
</tr>
<tr>
<td>
请选择所属地：<select name="city">
<option value="北京" selected="selected">北京</option>
<option value="北京">上海</option>
<option value="北京">广州</option>
<option value="北京">深证</option>
</select>
</td>
</tr>
<tr>
<td>
请上传头像：<input type="file"/>
</td>
</tr>
<tr>
<td> 自我介绍：</td>
</tr>
<tr>
<td>
<textarea rows="15" cols="20">请简单的自我介绍</textarea>
</td>
</tr>
<tr>
<td><input type="hidden" value="我是隐藏域" name="hiddenValues"/></td>
</tr>
<tr>
<td>
<input type="submit" value="确认提交"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</center>
</form>
<a href="#middle">我是一个超链接 可以点我回到中间！</a> <br />
表单效果如下：
<br />
<br />
<br />
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
