Jsp中HTML标签汇总与编码事例
一、HTML简介
HTML（超文本置标语言）是网络的通用语言,一种简单、通用的全置标
记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些
页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或
浏览器，你看到的就是这种语言写的页面.
建立HTML页面，你所需要的只是一个文字处理器（如McrosoftWord/记
事本/写字板等等）以及HTML的工作常识。
HTML只不过是组合成一个文本文件的一系列标签
HTML标签（放在单书名号里）：
（1）英文词汇的全称（如块引用:blockquote）
（2）缩略语（如“p”代表Paragragh）
HTML标签功用有
（1）说明页面如何被格式化（例如<p>开始一个新段落）
（2）说明这些词如何显示(<b>使文字变粗)
（3）提供在页面上不显示的信息－－例如标题。
二、HTML网页框架--网站框架结构
html文件都是由<html>和</html>标记包含的.然后分为<head>标题和
<body>正文两大部分.页面的标识一般都是在<body>标识中定义
的.html文件不区分大小写.html文件的扩展名可是.htm或者是.html,
现在已经没有区别了，不过命名为“**.html"时记住要用英文
<html> //文件类型 放在档案的开头与结尾
<head> //头元素/头标题/头标题容器
标题词，夹在其间,在打开页面时出现在屏幕底部最小化的窗
口
<title></title> //文件主题/文档标题 必须放在「文头」区块内，
不可删，其余均可删
</head>
<body> //主文档 正文夹在其间－－即所有页面的内容所在。页
面上显示的任何东西都包含在这两个标签之中
</body>
</html>
例1-1
<html>
<head>
<meta name="description" content="小熊的网页">
<meta name="keywords" content="心酷">
<meta name="author" content="Ivy">
<meta http-equiv="content-type' content="text/html"
charset="gb2312"> //http-equiv— 网页动态定义格式 gb—国标
<meta http-equiv="refresh" content="5;url=http://www.baidu.com"> //5秒后自动链接到百度上
<title>我的第一个页面</title> //在打开页面时出现在屏幕底
部最小化的窗口
</head>
<body>这家伙很懒，什么也没留下 </body>
</html>
Head中
a:标题 <H?></H?> (从1到6，有六级标题)
①标题的对齐 <H? ALIGN=LEFT|CENTER|RIGHT></H?>
②区分 <DIV></DIV>
③区分的对齐 <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>
HTML有许多的标记,这些标记都放在<body></body>之间.
1.字本标记
字体标记常用<FONT FACE="隶书" SIZE="5" COLOR="Blue">文字
</FONT>
其中FACE="隶书" 是设置文字的样式,SIZE="5"是设置文字的大小(从1
到7), COLOR="Blue"是设置文字的颜色. 引号可省略
换行<br></br>
加粗 <B></B> 特别强调 <STRONG></STRONG> （通常会以加粗显示）
斜体 <I></I> 强调 <EM></EM> （通常会以斜体显示）<cite></cite>
底线 <U></U> （尚有些浏览器不提供）
删除线 <S></S> （尚有些浏览器不提供）
下标 <SUB></SUB>
上标 <SUP></SUP>
打字机体 <TT></TT> （用单空格字型显示）
预定格式 <PRE></PRE> （保留文件中空格的大小）
闪耀 <BLINK></BLINK> （有史以来最被嘲弄的标签）
地址 <ADDRESS></ADDRESS>
大字 <BIG></BIG>
小字 <SMALL></SMALL>
例1-2
<html>
<body>
<font face="方正剪纸简体" size=5 color=blue>
<u>白日依山尽</u><br>
<font face="方正彩云繁体" size=7 color=yellow>
<em><sup>黄河</sup>入海流</em><br>
</body>
</html>
2.图片标记 source
图片标记常用<IMG SRC="http://www.yhwl123.cn/123/image.jpg"
ALIGN=TOP|BOTTOM|MIDDLE WIDTH="200" HEIGHT="100" BORDER="10">
其中SRC(source来源）="http://www.yhwl123.cn/123/image.jpg" 是
设置图片来源<IMG SRC="URL(统一资源定位符|网
址）">,ALIGN=TOP|LOW（常用）或BOTTOM|MIDDLE设置图形纵向看齐方
式，WIDTH="200" 设置图片显示宽度,HEIGHT="100"设置图片显示高度
,BORDER="10设置图片边框.
图片不能显示原因：（1）网速太慢（2）网站有问题，图片存放路径
有问题
3.背景backgroud
背景颜色
<body bgcolor="red">
背景图片
<body backgroud＝"back-ground.gif">
背景音乐
<bgsound src="background_sound.mid" loop="-1"> //单引号内不能
加上body
loop循环是bgsound 的一个属性,那么loop="-1"是无限循环loop="1"
说明循环一次，等于0就是不循环了.
例1-3插入图片及设置背景
<html>
<body>
<img src="a.gif" width=200 height=300 broder=10>
<img src="D:/jsproot/b.jpg" width=200 height=300
broder=10>
<img src="(D:/jsproot/ROOT/)WEB-INF/c.jpg" width=200
height=300 broder=10><html>
<body backgroud="背景.jpg">
<body bgcolor="green">
<body bgsound src="imissyou.mp3" loop="-1">
</body>
</html>
//不是bgcolour
//引号均可省略
//图片a.gif存在当前网页同一文件夹下(即D:/jsproot/ROOT)可省去
前面的路径
图片b.jpg存在当前网页上一文件夹下D:/jsproot/b.jpg
src="http://localhost:8090/ROOT/b.jpg" 错误写法
图片c.jpg存在当前网页下一文件夹下(D:/jsproot/ROOT/)WEB-
INF/c.jpg <img src="http://localhost:8090/ROOT/WEB-INF/c.jpg"
错误写法
4.超级链接
超级链接常用<A HREF=http://www.XXXXXXX..com>链接文字</A>
Href超链接|水平基准信号
例1-4
<html>
<head>
<title>href测试</title>
</head>
<body>
<a href=http://www.youku.com> 优酷</a>
<ol>
<li>热爱祖国</li>
<li>热爱人民</li>
</ol>
<ul>
<li>好好学习</li>
<li>天天向上</li>
</ul>
</body>
</html>
5.电子邮件链接
电子邮件链接常用<A HREF="mailto:XXXXX@126.com">链接文字</A>
6.列表标记
有序列表ordered list
<ol> <li>1</li> <li>2</li>
</ol>
无序列表unordered list
<ul>
<li></li> <li></li>
</ul>
7.表格标记
表格标记常用
<TABLE BORDER="1" width=33" height="44" bdcolor=pink
cellspacing="1" cellpadding="2">
<TR> <TD>第一行第一列</TD><TD>第一行第二列</TD> </TR>
<TR> <TD>第二行第一列</TD><TD>第二行第二列</TD> </TR>
<TR> <TD>第三行第一列</TD><TD>第三行第二列</TD> </TR>
</TABLE>
其中BORDER="1"是设置表格边框宽度, width=33" 是设置表格宽
度,height="44" 是设置表格高度,bdcolor=pink设置表格内填充颜色
，cellspacing="1"是表格的单元格之间的间距cellpadding="2",是设
置表格文字与表格边框之间的间距
<TR>代表一行的开始,<TD>代表一列的开始.
例1-5
<html>
<body>
<table broder=2 bordercolor=black cellspacing=20
cellpadding=5 align=center>
<tr bgcolor=pink ><td>第一行第一列</td><td>第一行第二列
</td></tr>
</table>
</body>
</html>
例1-6
<html>
<body>
<table broder=5 bordercolor=red>
<tr bgcolor=green><td rowspan=2>1</td><td colspan=2>2</td>
</tr>
<tr bgcolor=purple><td>3</td><td>4</td>
</tr>
<tr bgcolor=yellow align=center><td colspan=3>5</td>
</tr>
</body>
</html>
//bgcolor背景颜色,表格内填充颜色,不是bgcolour rowspan行跨度
|栏高
colspan列跨度|栏宽
8表单form及下列选框
表单格式<form method=post|get action=2-02.jsp>
内容<input
type=text|password|radio|checkbox|submit|reset|hidden name=**
value=** value=** checked></form>
//text文本框 password密码框 radio单选框 checkbox复选框
submit提交按钮 reset重置按钮 hidden隐藏框 checked 已被选中
的
post打包邮寄（不限定大小）,get地址栏传递（默认，不大于2kb）
action是数据传递目的地，非html静态页面，因其不能处通数据
value 默认初始值或传递的数据
下列选框格式<select name=**>
<option value=**1>***1
<option value=**1>***1……</select>
例1-7<html>
<html>
<body>
<form method=post actiom=2-02.jsp>
姓名：<input type=text name=username size=10 maxlength=4
value=欧阳杰> 年龄：<input type=text name=age size=3><br>
密码：<input type=password name=userpwd size=10><br>
性别：<input type=radio name=gender checked>男 <input
type=radio name=gender>女<br>
兴趣：篮球<input type=checkbox name=favor1 checked><br>
足球<input type=checkbox name=favor2 checked><br>
入学年份：<select name=year>
<option value=4>2006
<option value=3>2007
<option value=2>2008
<option value=1>2009
</select><br>
<input type=submit value=请提交><input type=reset vale=重置>
</form>
</body>
</html>
864
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
