标签：javaweb
a.html是什么 ：
hypertext markup language 超文本标记语言
超文本：音频，视频，图片称为超文本。
标记 ：<英文单词或者字母>称为标记. 一个HTML页面都是由各种标记组成。
b.作用：编写HTML页面。
c.HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程).HTML页面直接由浏览器解析执行。
Web标准：
不是某一个标准，而是一系列标准的集合。网页主要有三部分组成：结构（Structure）、表现（Presentation）和行为（behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由万维网联盟（外语缩写：W3C）起草和发布，也有一些是其他标准组织制定的标准，比如ECMA的ECMAScript标准。
标记:
<p>称为开始标记 </p>称为结束标记. 也叫标签.每个标签都规定好了特殊的含义。
元素：
<p>内容</p> 称为元素.
editplus : 语法高亮显示
技巧： 根据颜色判断单词是否出错。 （不是100%）
html 的结构
1)声明部分。主要作用是用来告诉浏览器这个页面使用的是那个标准。<!doctype html>是HTML5标准。
2)head部分： 不会显示在页面上。作用是告诉浏览器一些页面的额外信息。
3)body部分：我们缩写的代码必须放在此标签內。
明确：每个标签都有私有属性。也都有公有属性。html中表示长度的单位都是像素。HTML只有一种单位就是像素。
<body>:
bgcolor: 背景颜色
background:背景图片
text: 文本颜色
<!doctype html> <!--声明部分:主要作用是用来告诉浏览器这个页面使用的是那个标准-->
<html lang="en">
<head><!--head部分:不会显示在页面上。作用是告诉浏览器一些页面的额外信息。-->
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Demo01</title>
</head>
<body bgcolor = "red" background = "F:\\图片\\90f58663jw1dzgv2fhwrnj.jpg" text = "blue"><!--body部分:我们缩写的代码必须放在此标签內-->
你好
</body>
</html>
1、排版标签
所有的浏览器默认情况下都会忽略空格和空行
<p>：p代表一个段落
属性： align:对齐方式. 取值：left,right,center
<br>代表是换行。
<hr>:
color: 线的颜色
size : 线的粗细
width: 线的长短
两种写法：
1) 绝对值eg:500
2) 相对值： 50%
noshade: 不要阴影
align: 对齐方式 取值：left,right,center
<center>: 内容居中
<pre>: 预定义格式标签 .告诉浏览器不要忽略空格和空行
<div>: 块级标签 必须单独占据一行
属性： align :
<span>: 块级标签 不换行字体标记
Demo
<html>
<head>
<title>排版标签</title>
</head>
<body>
<!--<p>：p代表一个段落
属性： align:对齐方式. 取值：
left,right,center-->
<p align = "left">你好0</p>你好1
<p align = "right">你好2</p>
<p align = "center">你好3</p>
你好4<br>你好5
<!--<hr>:
color: 线的颜色
size : 线的粗细
width: 线的长短
两种写法：
1) 绝对值eg:500
2) 相对值： 50%
noshade: 不要阴影
align: 对齐方式 取值：
left,right,center
-->
<hr color = "red" size ="20" width = "75%" noshade >
<hr width = "50%" align = "left">
<hr width = "50%" align = "right">
<hr width = "50%" align = "center">
<!--<center>: 内容居中-->
<center>
HELLO WORLD
</center>
清平乐
年年雪里，常插梅花醉，挼尽梅花无好意，赢得满衣清泪！
今年海角天涯，萧萧两鬓生华。
看取晚来风势，故应难看梅花。
<hr>
<!--<pre>: 预定义格式标签 .告诉浏览器不要忽略
空格和空行-->
<pre>
清平乐
年年雪里，常插梅花醉，挼尽梅花无好意，赢得满衣清泪！
今年海角天涯，萧萧两鬓生华。
看取晚来风势，故应难看梅花。
</pre>
<!--<div>: 块级标签 必须单独占据一行
属性： align :-->
<div align = "center">
<p>哈哈</p>
你好
</div>
<!--<span>: 块级标签 不换行字体标记 -->
<span>
你好
</span >
<span>
你好
</span >
</body>
</html>
2、字体标签
<h1>:h1...h6:定义字体大小
属性： align :居中
<font>:
color:字体颜色
颜色的写法有3种：
1)英文单词: red
2)十六进制：#00ffcc
3)RGB(三原色) : new RGB(124,156,23)
size:字体大小
face：字体类型
特殊字符： <小于 >大于 & &符号 " 双引号'单引号 © 版权 ™商标 空格
扩展：绐
<b>: 加粗
<strong>: 加粗
<i>:斜体
<em>: 斜体
<u>: 下划线
<s>: 中划线(删除线)
<sup>: 上标
<sub>: 下标.
Demo
<html lang="en">
<head>
<title>字体标签</title>
</head>
<body>
<h1>你好
<h2>你好
<h3>你好
<h4>你好<br>
<font color = "red" face = "幼圆" size = "30">你好</font><br>
<font color = "#ooffcc" >HELLO WORLD</font><br>
<font color = "new RGB(124,23,122)" size = "20">HELLO HTML!</font><br>
<font size = "30" color = "blue " >< > & " '©™ 组 </font></br>
<b>加粗b</b><br>
<strong >加粗strong</strong ><br>
<i>斜体i</i><br>
<em>斜体em</em><br>
<u>下划线u</u><br>
<s>中划线s</s><br>
<sup>上标sup</sup><br>
<sub>下标sub</sub><br>
</body>
</html>
3、图像标记
<img>: 代表是一副图片
属性： src : 图片的路径
两种写法：
a) : 相对路径 路径是相对页面所在的路径 两个标记.和.. ,分表代表当前目录和父路径
b) ：绝对路径
1) : 以盘符开始的路径eg: C:\Documents and Settings\Administrator\桌面\day01_html\上课示例/images/1.jpg
2) : 网络路径eg: http://www.baidu.com/images
width: 宽度
height：高度
Alt：当图片显示不出来的时候代替图片显示的内容
title： 提示性文本
border: 边框
热点： 就是特定的位置添加超链。
<img src = "F:\\图片\\156_249375_3168d2272b8b390.jpg" width = "200" height = "200" title = "凯尔特人" border = 5 usemap = "#Map">
<map name="Map" id="Map">
<area shape="circle" coords="122,81,38" href="F:\\itheima\\day01\\博客素材\\我的文档\\demo_6.1.html" />
</map>
</img><br>
Demo
<html>
<head>
<title>图像标记</title>
</head>
<body>
<img src = "F:\\图片\\156_249375_3168d2272b8b390.jpg" width = "200" height = "200" title = "凯尔特人" border = 5></img><br>
<img src = "http://img0.bdstatic.com/img/image/9yaoxiaohua.jpg"></img><br>
<!--图片显示不出来的时候代替图片显示的内容-->
<img src="http://blog.163.com/faith_yee/blog/wdadasda.jpg" alt = "这是一个无效链接"></img><br>
<!--热点-->
<img src = "F:\\图片\\156_249375_3168d2272b8b390.jpg" width = "200" height = "200" title = "凯尔特人" border = 5 usemap = "#Map">
<map name="Map" id="Map">
<area shape="circle" coords="122,81,38" href="F:\\itheima\\day01\\博客素材\\我的文档\\demo_6.1.html" />
</map>
</img><br>
</body>
</html>
4、清单标记
列表标签：3种
a.无序列表<ul>
属性：type : 值： disc(默认，实心原点),square(实心方点),circle(空心圆)
b.有序列表<OL>
属性: type:取值：1(阿拉伯数字，默认),a,A,i,I
start: 从几开始
c.定义列表<dl>
<dt>: 列表项的标题
<dd>: 列表项
Demo
<html lang="en">
<head>
<title>清单标记</title>
</head>
<body>
<UL type = "disc">
<li>心情：差
<li>心情：好
<li>心情：良好
</UL><hr>
<UL type = "square">
<li>心情：差
<li>心情：好
<li>心情：良好
</UL><hr>
<UL type = "circle">
<li>心情：差
<li>心情：好
<li>心情：良好
</UL><hr>
<ol type = "i">
<li>心情：差
<li>心情：好
<li>心情：良好
</ol><hr>
<ol type = "I">
<li>心情：差
<li>心情：好
<li>心情：良好
</ol><hr>
<ol type = "1">
<li>心情：差
<li>心情：好
<li>心情：良好
</ol><hr>
<dl>
<dt>How to use Definition List
<dd>First, you should not place paragraph tag right after or before a list structure or between the items of a list. In cerntain contexts, use of extra paragraph tags should always be avoided, when you realize this concept, it is quit easy to write a HTML.
<dt>Other things to know
<dd>We usually put only ONE Definition tag following the Definition Term tag, more than one DD tag is not recommanded. Besides, unlike Definition List is a nonempty tag, both Definition Term and Definition Description are empty tags.
</dl>
</body>
</html>
3种超链接:
1. 连接到其他页面 <a href="http://www.baidu.com/">www.baidu.com</a>
2. 锚: 指给超链接起一个名字，作用是连接到本页面或者其他页面的特定位置。使用name属性给超链起名字<a name = "A">锚标记</a> <a href="http://blog.163.com/faith_yee/blog/#A">回到锚</a>
3. 连接到邮件: <a href = "mailto:xugang@itcast.cn">进入我的邮箱</a>
属性：target: 告诉浏览器怎么显示目标页面,HTML中已定义4个值:
_self :在同一个浏览器中显示
_blank: 打开新的浏览器显示
_parent: 在父窗口中显示
_top: 在顶级窗口中显示
<a href = "thunder= asdasdasdasda">唐山大地震枪版</a>：该例子是弹出迅雷的下载链接板块，因为安装了迅雷之后，迅雷软件自动会在计算机上注册以上属性值。
4、图片超链接：
<a href=‘http://blog.163.com/faith_yee/blog/XXXX.com"><img src="http://blog.163.com/faith_yee/blog/xXXXXX"></a> 这样可以把图片添加超链接
Demo
<html lang="en">
<head>
<title>超链接</title>
</head>
<body>
<!--3. 连接到邮件-->
<a href = "mailto:11196649@qq.com">进入我的邮箱</a><br>
<!--2. 锚: 指给超链接起一个名字，作用是连接到本页面或者其他页面的特定位置。使用name属性给超链起名字-->
<a name = "A">回到最顶的标记</a><br>
<img src = "F:\\图片\\9eaf69ad205690f0d719d4e2dbb3426e.jpg"></img><br>
<a href="http://blog.163.com/faith_yee/blog/#A">回到最顶</a><br>
<!--1. 连接到其他页面-->
<a href = "http:\\www.baidu.com"target = "_self">goto baidu target = "_self"</a><br>
<a href = "http:\\www.baidu.com" target = "_blank">goto baidu target = "_blank"</a><br>
<a href = "http:\\www.baidu.com" target = "_parent">goto baidu target = "_parent"</a><br>
<a href = "http:\\www.baidu.com" target = "_top">goto baidu target = "_top"</a><br>
</body>
</html>
6、表格标记
<table>: 表格
属性：
border:边框
width:宽度
height：高度
align:表格的对齐方式
cellpadding:单元格内容到边的距离
cellspacing:单元格和单元格之间的距离
bgcolor:背景颜色
background:背景图片
bordercolorlight:表格的上，左边框，以及单元格的右，下边框的颜色
bordercolordark: 表格的右，下边框，以及单元格上，左的边框的颜色
dir:单元格内容的排列方式 取值：ltr 从左到右， rtl:从右到左
<tr>: 行
属性：dir:
bgcolor:
<td>: 单元格
属性： align: 内容的横向对齐方式
valign: 内容的纵向对齐方式 top,middle,bottom
width: 绝对值或者相对值(%)
height:单元格的高度
单元格的合并：单元格的属性
colspan: 横向合并
rowspan: 纵向合并
<th>: 相当于<td align = "center"> + <b>, 居中加粗
属性同<td>
<caption>: 表格的标题
属性：align: 取值：left,center,right,top,bottom
<thead>、<tbody>、<tfoot>，写与不写的区别：
1. 当表格非常大的时候，如果不写，则必须等表格的内容全部下载完成才能显示。但是用tbody标签的话，那么边下载边显示。
2. 如果不写thead,tbody,tfoot那么浏览器解析表格内容的时候是从上到下解析。如果写了，那么顺序任意，浏览器解析的时候还是按照thead,tbody,tfoot的顺序显示内容
Demo
<html lang="en">
<head>
<title>表格标记</title>
</head>
<body>
<!--table1-->
<tfoot>
<table border = "1" width = "60%" height = "30%" align = "right" cellpadding = "10" cellspacing = "10" bgcolor = "red" dir = "rtl">
<tr bgcolor = "yellow" dir = "ltr" >
<td bgcolor = "pink">嗯呢</td>
<td align = "right">嗯呢2</td>
<td >嗯呢3</td>
</tr>
<tr>
<td>嗯啊</td>
<td valign = "top">嗯啊2</td>
<td>嗯啊3</td>
</tr>
<tr>
<td bgcolor = "green">嗯恩</td>
<td>嗯恩2</td>
<td height = "20">嗯恩3</td>
</tr>
</table>
</tfoot>
<!--table2-->
<thead>
<table border = "6" width = "200" height = "200" align = "left" background = "F:\\图片\\1.jpeg">
<tr bgcolor = "pink">
<td>嗯呢</td>
<td valign = "top">嗯呢2</td>
<td>嗯呢3</td>
</tr>
<tr bgcolor = "yellow">
<td>嗯啊</td>
<td valign = "middle">嗯啊2</td>
<td>嗯啊3</td>
</tr>
<tr bgcolor = "blue">
<td>嗯恩</td>
<td valign = "down">嗯恩2</td>
<td>嗯恩3</td>
</tr>
</table>
</thead>
<!--table3-->
<!--单元格的合并-->
<tbody>
<table border = "6" width = "200" height = "200" bordercolorlight = "red" bordercolordark = "blue" cellspacing = "20" >
<caption align = "bottom">这是一个表格的实例</caption>
<tr>
<td colspan = "2">a</td>
<td rowspan = "2">c</td>
</tr>
<tr>
<td>d</td>
<th>e</th><!--相当于相当于<td> + <b>-->
</tr>
</table>
</tbody>
</body>
</html>
框架页面上不允许有body标签
<frameset>: 框架的集合
rows: 纵向分部框架.
cols: 横向分部框架.
写法有两种: 1) 绝对值 "200,*" ,*代表剩余的
2) 相对值 "30%,*"
<frame>: 框架. 一个框架显示一个页面
scrolling: 是否需要滚动条。默认是true
noresize : 固定框架大小
bordercolor: 给框架边框起一个颜色
name : 给框架起一个名字
<iframe>:内嵌框架： 嵌入在一个页面上的框架.(仅仅IE支持)
属性： width: 宽度
height： 高度
scrolling : 是否需要滚动条
Demo
<html lang="en">
<head>
<title>框架标记</title>
</head>
<frameset rows = "200,*" bordercolor = "red">
<frame src = "F:\itheima\day01\共享\day01_htm\上课示例\demo01_排版标签.html" noresize name = "up" bordercolor = "blue">
</frame>
<frame src = "F:\itheima\day01\共享\day01_htm\上课示例\demo02_字体标签.html" name = "down" scrolling ="false">
</frame>
</frameset>
</html>
Demo
<html lang="en">
<head>
<title>内嵌标签</title>
</head>
<body>
<a href ="F:\itheima\day01\博客素材\我的文档\demo_6.1.html" target = "frame">demo_6.1</a><br>
<a href ="F:\itheima\day01\博客素材\我的文档\demo_6.2.html" target = "frame">demo_6.2</a><br>
<a href ="F:\itheima\day01\博客素材\我的文档\demo_6.3.html" target = "frame">demo_6.3</a><br>
<iframe src = "F:\itheima\day01\博客素材\我的文档\demo_6.4.html" width = "500" height ="300" scrolling = "true" name ="frame"></iframe>
</body>
</html>
8、表单标签
<FORM>：
称为表单标记，用以宣告此为表单模式，属于一个容器标记，表示其它表单标记需要在它的包围中才有效，<INPUT>便是其中的一个
属性：
action：便是用以指明该 CGI 程式的位置，这样此表单所填的资料才能正确传给 CGI 作处理。若馈下没有 CGI 以进行测试，可设定此参数为ACTION="mailto:your@email.com" 那样该表单所填的资料将会寄至 此电邮地址（红色部分）。
method：传送资料给 CGI 的的方式，可选值为 POST, GET。你只需记住POST容许传送大量资料，但 GET则只接受低于 1K 的资 料，所以你若看过别人的表单原始码的话，你会发现申请表单用的是POST 而搜找器用的是 GET。
<input>:
由于其第一个参数 type 己有很多的选择，而不同的选择表示出不同的输入方式，且其它参数亦因此而异，故以下将独立介绍不同输入方式及其它参数设定。
type：可选值为Text,Radio,Checkbox,Password, Submit/Reset, Image, File, Hidden, Button。
*输入方式1：Text（单行文字盒）
name:此一单行文字盒名称，这是最重要的一个，方便 CGI 辨认由表单传来的资料
value:此一单行文字盒内定值。
align:可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle. 没太大有处。
size:此一单行文字盒显示的长度
maxlength:此一单行文字盒可输入字元的上限，为方便编排资料或避免错输入等，宜设定上 限，例如输入电话或 ICQ UIN 的可设为 8，年龄为 2 等。
*输入方式2：Radio（单一选择）
type ="Radio"
name：
value：内定值
align：
checked：设该 Radio 为内定被选。同 name 的各个 Radio 中只能有一个使用，或全不使用这 参数。
*输入方式3：Checkbox(确认盒)
type = "Checkbox"
name:
Value：
align：
checked：设该 Checkbox 为内定被选。每个 Checkbox 都是独立的，所以每一个都可使用这 参数，不像 Radio。
*输入方式4：password （密码输方盒）
例如：<input type="Password" name="pw" value="999" align="MIDDLE" size="5" maxlength="9">
*输入方式5：submit（传送键）及Reset（清除键）这是表单上重要的两个按键，两者所附带的参数相同，但用处不大。
例如：<input type="Submit" name="other_funtion" value="确定" align="MIDDLE">
<input type="Reset" value="清除" align="MIDDLE">
submit传送键的关键用法，当点击submit时，页面上的例如text单行文字盒里的name和value属性的对应值会被提交到另一个网站里，即在text中按name = value 的方式传送。而如何设定目的地呢？就是在<form action = "http://www.XXXXX.com">设置
在<form>中的属性有一项为method ,其可以取值post或get，当网页信息通过submit传送键传送到form所指定的地址时，如果指定了method是get，则在浏览器的地址栏里会显示出form里所提交的信息，而post则不会。（重要）
*输入方式6：Image（图片按键）
这通常用以取代 Submit 及 Reset 两个按键，因为由程式产生的按键并不漂亮，这 Image 参 数便容许你采用自已制造的按键。
例如：<input type="Image" name="submit" align="BOTTOM" src="http://blog.163.com/faith_yee/blog/ex_icon.gif">
*输入方式7：File 通常用以传输文件。
例如：<input type="File" name="upload" align="BOTTOM" size="20" maxlength="100" accept="text/html">
*输入方式8：Hidden
例如：<input type="Hidden" name="ID" value="6618">
*输入方式9：Button
例如：<input type="Button" name="useless" value="Back">
Value = "Back" ：按键显示名称
<select>:
是卷动选单标记，每一选项皆由 <OPTION> 所标示，把它当作围堵标记或空标 记使用都可以。
属性：
name:
size:这卷动选单的列数，即其高度，请自行修改。
multiple:令这卷动选单容许多重选择。
<option>:
value:
selected:设该选项为内定被选。一个单选卷动选单只能有一项或零可内定被选。
<textarea>:
表单文字区块标记
name:
cols:这文字区块的宽度，请自行修改。
rows:这文字区块的列数，即其高度，请自行修改。
wrap:设定其折行问题，可选值为： off, physical, virtual。off 表示不使用此属性，physical 时则会强迫浏览器在送资料到 CGI（Web 伺服器端）必须将实№文字中的换行一 并送出，设为 virtual 时则送出连续成串的字（除非使用者按了键盘的 RETURN / ENTER）。
Demo
<html lang="en">
<head>
<title>表单标签</title>
</head>
<body>
<fieldset>
<legend>部分1</legend>
<form action = "mailto:11196649@qq.com" method = "post">
<!--*输入方式1：Text（单行文字盒）-->
Text单行文字盒：<input type = "text" name ="text" value = "内定值" align = "left" size ="20" maxlength ="10"><br>
<!--*输入方式2：Radio（单一选择）-->
Radio单一选择： 值1<input type = "Radio" name = "Radio" value = "1" align ="left " >
值2<input type = "Radio" name = "Radio" value = "2" align ="left " checked><br>
<!--*输入方式3：Checkbox(确认盒)-->
Checked确认盒：篮球<input type ="Checkbox" name = "checkbox" value = "1" align = "left" >足球<input type ="Checkbox" name = "checkbox" value = "2" align = "left" >羽毛球<input type ="Checkbox" name = "checkbox" value = "3" align = "left" checked><br>
</fieldset>
<fieldset>
<legend>部分2</legend>
<!--*输入方式4：password （密码输方盒）-->
password密码输方盒：<input type = "password" name = "pw" value = "999" align ="left" size "20" maxlength ="15"><br>
<!--*输入方式5：submit（传送键）及Reset（清除键）-->
submit传送键：<input type = "submit" name = "yes" value = "确定" align = "left"><br>
reset清除键：<input type = "reset" name = "reset" value ="更新" align = "left"><br>
</fieldset>
<fieldset>
<legend>部分3</legend>
<!--*输入方式6：Image（图片按键）-->
Image图片按键：<input type = "image" name = "image submit" align = "left " src = "F:\day01\共享\day01_htm\资料\当当网上书城\images\shopping_balance.gif"><br>
<!--*输入方式7：File-->
File：<input type ="File" name = "upload" align = "left " size ="10" maxlength = "100" accept = "F:\day01\博客素材\我的文档"><br>
<!--*输入方式8：Hidden-->
Hidden：<input type ="hidden" name = "秘密" value = "11196649"><br>
<!--*输入方式9：Button-->
Button：<input type = "button" name = "button" value = "按钮" align = "left" >
<hr>
选项：<select name = "选项" >
<option>a
<option>b
<option selected>c
<option>d
</select><br>
表单文件区块标记：<textarea name = "表单文件区块标记" cols = "5" rows = "5"></textarea>
</fieldset>
</form>
</body>
</html>
9、多媒体标记
<bgsound>: 背景音乐 必须写在<head>标签中
属性：
src:路径
autostart:true/false
loop:infinite重复多次或输入次数
<embed>: 播放多媒体文件.
属性：
src:
artostart:
loop:
hidden:
Width、High、Volume、align
<marquee>: 移动
属性：direction 移动目标方向 left,right ,up,down ,up，down移动距离是固定的200px
behavior: 行为方式 取值：slide,alternate,scroll
scrollamount : 移动速度
loop: 循环多少圈。负值表示无限循环
scrolldelay: 移动一次休息多长时间。单位是毫秒
Demo
<html lang="en">
<head>
<bgsound src = "F:\day01\博客素材\Beyond - 喜欢你.mp3"></bgsound>
<title>多媒体标记</title>
</head>
<body>
播放多媒体文件：<embed src = "F:\篮球\本赛季至今10大助攻.avi" height ="300" width ="300"></embed>
<marquee behavior = "slide" loop = "1">测试成功</marquee>
<marquee behavior = "alternate" scrollamount = "20">测试成功</marquee>
<marquee behavior = "scroll" scrolldelay = "100">测试成功</marquee>
</body>
</html>
10、头标记
<!--页面刷新标签-->
<meta http-equiv = "refresh" content = "2;url=F:\黑马\day01\博客素材\我的文档\demo_6.1.html">
页面会自动更新，更新细节会根据content里的来操作
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<!--页面刷新标签-->
<meta http-equiv = "refresh" content = "2;url=F:\heima\day01\博客素材\我的文档\demo_6.1.html">
<title>头标记</title>
</head>
<body bgcolor = "" background = "" text = "" link = "red" alink = "green" vlink = "yellow" leftmargin = "0" topmargin = "0">
大家好啊<br>
<a href="http://blog.163.com/faith_yee/blog/">大家好啊</a>
</body>
</html>
2秒后
1、
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的易趣网</title>
</head>
<body>
<p><img src = "F:\heima\day01\共享\day01_htm\演示事例\4-3易趣商品列表\images\header.jpg" align = "middle"></p>
<p>首页 > 中国馆 > 女装/女士精品 > 所有商品 </p>
<p><img src = "F:\heima\day01\共享\day01_htm\演示事例\4-3易趣商品列表\images\list_header.jpg"></p>
<hr>
<p><font size ="10" face = "幼圆"><b>热点推荐</b></font></p>
<dl>
<dt><p><img src = "F:\heima\day01\共享\day01_htm\演示事例\4-3易趣商品列表\images\photo_01.jpg"></p>
</dt>
<dd>一口价：35.00<br>全国包邮！韩版修身长袖T恤 打底衫 纯棉圆领T恤
</dd>
</dl><hr>
<dl>
<dt><p><img src = "F:\heima\day01\共享\day01_htm\演示事例\4-3易趣商品列表\images\photo_02.jpg"></p>
</dt>
<dd>一口价：35.00<br>全国包邮！韩版修身长袖T恤 打底衫 纯棉圆领T恤
</dd>
</dl><hr>
<dl>
<dt><p><img src = "F:\heima\day01\共享\day01_htm\演示事例\4-3易趣商品列表\images\photo_03.jpg"></p>
</dt>
<dd>一口价：35.00<br>全国包邮！韩版修身长袖T恤 打底衫 纯棉圆领T恤
</dd>
</dl><hr>
<dl>
<dt><p><img src = "F:\heima\day01\共享\day01_htm\演示事例\4-3易趣商品列表\images\photo_04.jpg"></p>
</dt>
<dd>一口价：35.00<br>全国包邮！韩版修身长袖T恤 打底衫 纯棉圆领T恤
</dd>
</dl><hr>
<dl>
<dt><p><img src = "F:\heima\day01\共享\day01_htm\演示事例\4-3易趣商品列表\images\photo_05.jpg"></p>
</dt>
<dd>一口价：35.00<br>全国包邮！韩版修身长袖T恤 打底衫 纯棉圆领T恤
</dd>
</dl><hr>
<dl>
<dt><p><img src = "F:\heima\day01\共享\day01_htm\演示事例\4-3易趣商品列表\images\photo_06.jpg"></p>
</dt>
<dd>一口价：35.00<br>全国包邮！韩版修身长袖T恤 打底衫 纯棉圆领T恤
</dd>
</dl><hr>
<p>Copyright © 2010 易趣版权所有</p>
</body>
</html>
2、
<html lang="en">
<head>
<title>购物简易计算器</title>
</head>
<body width = "200" height = "200">
<center>
<div>
<p><h2 ><font color = "red" ><img src = "F:\heima\day01\共享\day01_htm\练习题\上机练习题目\images02\shop.gif" align = "middle"> 购物简易计算器</img></font></h2></P>
<form>
<p>第一个数 <input type = "text" size= "25"></p>
<p>第二个数 <input type = "text" size= "25"></p>
<p>
<input type ="button" name = "+" value = " + ">
<input type ="button" name = "-" value = " - ">
<input type ="button" name = "*" value = " * ">
<input type ="button" name = "/" value = " / ">
</p>
<p>计算结果 <input type = "text" size= "25"></p>
</form>
</div>
</center>
</body>
</html>
3、
<html lang="en">
<head>
<title>计算器框架</title>
</head>
<body bgcolor = "#00ccff">
<center>
<h2><font face = "幼圆" color = "#66ff99"><b>计算器框架</font></h2><hr>
<div>
<table bordercolor = "#ffffff" bordercolorlight = "#ffffff" bordercolordark ="#ffffff" border = "1" width = "250" height = "200" cellpadding = "0" cellspacing = "5">
<form>
<tr >
<td colspan = "4" align = "middle"><input type = "text" size = "33" value = "0" dir = "rtl" ></td>
</tr>
<tr>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " 7 "></td>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " 8 "></td>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " 9 "></td>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " + "></td>
</tr>
<tr>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " 4 "></td>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " 5 "></td>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " 6 "></td>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " - "></td>
</tr>
<tr>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " 1 "></td>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " 2 "></td>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " 3 "></td>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " * "></td>
</tr>
<tr>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " 0 "></td>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " C "></td>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " / "></td>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " = "></td>
</tr>
</form>
</table>
</div >
<center>
</body>
</html>
标签：javaweb
原文地址：http://blog.csdn.net/faith_yee/article/details/44774421
