HTML5 案例学习笔记

2022年05月10日 阅读数:13
这篇文章主要向大家介绍HTML5 案例学习笔记,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

目录css

1 meta标签html

1.1 简介浏览器

1.2 属性及取值​安全

1.3 案例服务器

2 经常使用标签框架

2.1 标题ide

2.2 段落工具

2.3 换行post

2.4 水平分隔线学习

2.5 删除线

2.6 下划线

2.7 加粗

2.8 斜体

2.9 字体

2.10 图片

2.11 超连接

2.12 视频

3 列表

3.1 有序列表

3.1.1 简介

3.1.2 标签

3.1.3 type属性

3.2 无序列表

3.2.1 简介

3.2.2 标签

3.2.3 type属性

3.3 自定义列表

3.3.1 简介

3.3.2 标签

3.4  综合案例:我的介绍

4 内联框架

4.1 iframe简介

4.2 iframe的属性

4.3 iframe的优势

4.4 案例

5 表格

5.1 简介

5.2 标签

5.3 table的属性

5.4 表格的合并

5.5 tr的属性

5.6 案例

5.6.1 水平+垂直表格

5.6.2 还原Excel表格

 5.6.3 电商品牌墙

6 表单

6.1 简介

6.2 form的属性

6.2.1 action属性

6.2.2 method属性

6.2.3 name属性

6.2.4 target属性

6.2.5 表单标签公有的属性(html4标准)

6.3 input标签

6.3.1 input公有属性说明(html4标准)

6.3.2 type属性的取值

6.4 下拉列表

6.4.1 简介

6.4.2 select的属性

6.4.3 option的属性

6.5 fieldset与legend标签

6.6 textarea标签

6.6.1 简介

6.6.2 属性

6.7 label标签

6.7.1 简介

6.7.2 属性

6.8 案例

6.8.1 经常使用表单标签总结

6.8.2 阿里注册页面


1 meta标签

1.1 简介

<meta>标记用来描述一个HTML网页文档的属性,也称为元信息(meta-information),例如做者、日期和时间、网页描述、关键词、页面刷新等。

  • name属性用于描述网页,其值最重要的是description、keywords和robots。
  • http-equiv属性用于提供HTTP协议的响应头报文,它回应给浏览器一些有用的信息,以帮助正确和精确地显示网页内容。

1.2 属性及取值

1.3 案例

<!doctype html>
<html lang="en">
    <head>
        <title>中国教育和科研计算机网CERNET</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
        <meta name="keywords" content="中国教育网,中国教育,科研发展,教育信息化……" />
        <meta name="description" content="中国教育网是中国最权威的教育门户网站" />
        <meta name="copyright" content="www.edu.cn" />
        <meta name="robots" content="all"  />   <!--容许搜索引擎机器人抓取网页全部信息-->
    </head>
    <body>
        <p>这是中国教育和科研计算机网的头部部分标记的应用</p>
    </body>
</html>

2 经常使用标签

2.1 标题

标签:<h1></h1>(h1-h6)

2.2 段落

标签:<p></p>

2.3 换行

标签:<br/>

2.4 水平分隔线

标签:<hr>

2.5 删除线

标签:<del></del>

2.6 下划线

标签:<u></u>

2.7 加粗

标签:<b></b>

2.8 斜体

标签:<i></i>

2.9 字体

标签:<font></font>

2.10 图片

标签:<img />

属性:

  • src:图片所在的绝对路径/相对路径(.同级路径   ..上一级路径
  • align:设置图像的对齐方式
  • width
  • height
  • title: 起到注释的做用,当鼠标放在图片上时,会显示文字
  • border:设置图片边框
  • alt:设置图片的替换文本,当浏览器没法载入图像时,将显示替换文本

2.11 超连接

标签:<a></a>

target属性值:

  • _blank    在新窗口中打开被连接文档。
  • _self    默认。在相同的框架中打开被连接文档。
  • _parent    在父框架中打开被连接文档。
  • _top    在整个窗口中打开被连接文档。
  • framename    在指定的框架中打开被连接文档。

2.12 视频

标签:<video></video>

  • controls属性: 规定浏览器应该为视频提供播放控件(播放、暂停、定位、音量、全屏切换)

3 列表

3.1 有序列表

3.1.1 简介

有序列表用来表示一组有序的、内容类似的的数据信息,自带顺序编号。

3.1.2 标签

  • ol标签:有序列表
  • li标签:有序列表项

3.1.3 type属性

规定列表的项目符号的类型。取值范围:A、a、一、i、Ι

3.2 无序列表

3.2.1 简介

无序列表用来表示一组无序的、内容类似的的数据信息,通常导航栏都是用无序列表实现。 

3.2.2 标签

  • ul标签:无序列表
  • li标签:无序列表项

3.2.3 type属性

取值范围: circle(空心圆)、disc(实心圆)、square(正方形)

3.3 自定义列表

3.3.1 简介

自定义列表用来表示一组无序的、内容类似的、具有标题的数据信息。

3.3.2 标签

  • dl标签:自定义列表
  • dt标签:自定义标题
  • dd标签:自定义内容

3.4  综合案例:我的介绍

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的介绍</title>
	</head>
	<body>
		<h1>我的介绍</h1>
		<h3>基本信息</h3>
		<font size="3" color="darkblue">
			<p>姓名&nbsp;&nbsp;&nbsp;&nbsp;百里乘风</p>
			<p>性别&nbsp;&nbsp;&nbsp;&nbsp;男</p>
			<p>生日&nbsp;&nbsp;&nbsp;&nbsp;1999.07.04</p>
		</font>
		<h3>教育背景</h3>
		<img src="./同大.jpg" width="600" height="400" title="大同大学" alt="大同大学"/>
		<p>本科院校&nbsp;&nbsp;&nbsp;&nbsp;山西大同大学</p>
		<p>专业&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;计算机科学与技术</p>
		<h3>兴趣爱好</h3>
		<ol type="1">
			<li>阅读</li>
			<li>写做</li>
			<li>运动</li>
			<li>自媒体</li>
			<li>视频剪辑</li>
			<h3>做品展现:</h3>
			<video src="myVideo.mp4" width="600" height="400" controls="controls"></video>
		</ol>
		<h3>人生梦想</h3>
		<ul type="disc">
			<li>实现财务自由</li>
			<li>成为一个温润如玉的人</li>
			<li>关注并投身于公益事业</li>
			<li>游遍祖国的大好河山</li>
		</ul>
	</body>
</html>



4 内联框架

4.1 iframe简介

iframe标签用于在当前网页上引入其余网页资源(非同源也可)

4.2 iframe的属性

  • align:规定如何根据周围的元素来对齐此框架(取值:Left、Right、Top、Middle、bottom)
  • src:规定在iframe中显示的文档的URL
  • frameBorder:规定了框架是否有边框(1:有边框  0:无边框)
  • scrolling:规定是否在iframe中显示滚动条(yes:有滚动条  no:无滚动条 auto:有须要时显示滚动条)
  • width/height:定义iframe的宽度/高度

4.3 iframe的优势

切换子页面时不须要刷新父页面,提升请求速度。 

4.4 案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内联框架</title>
	</head>
	<body>
		<iframe src="./resume/resume.html" name="left" align="left" width="700" height="1000" frameborder="1" scrolling="auto" ></iframe>
		<iframe src="./resume/resume.html" name="right" align="right" width="700" height="1000" frameborder="1" scrolling="auto"></iframe>
	</body>
</html>


5 表格

5.1 简介

网页中的表格:以多行、多列来显示信息的方式。在网页中使用以下标签显示(因为表格会生成更多额外代码,所以在管理端页面使用较多)。

5.2 标签

  • table:表格标签
  • thead:表头单元格,在此列能够定义表头,表头能够限定表体的宽度。
  • tbody:表格的主体
  • tr:表格中的行
  • td:标准单元格
  • th:表头中的单元格 

5.3 table的属性

  • border(边框):border=“number”
  • background(背景): background =“背景图片”
  • bgcolor(背景颜色):bgcolor = “颜色”
  • width、height:width= “” height=“”
  • align:表格的位置由<table>元素的align属性决定,可选值包括left、center、right。
  • valign:表格内文字的位置是由<td>的align和valign决定的,valign可选值包括top、middle、bottom。
  • cellpadding(填充):设置单元格边框与内容之间的距离
  • cellspacing(间距):设置单元格之间的距离。

5.4 表格的合并

  • colspan属性:跨列合并单元格(colspan = “number”)
  • rowspan属性:跨行合并单元格(rowspan  = “number”)

5.5 tr的属性

  • align:设置行内容的水平对齐方式,属性值有left、center、right
  • valign:设置行内容的垂直对齐方式,属性值有top、middle、bottom

5.6 案例

5.6.1 水平+垂直表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>水平+垂直表格</title>
	</head>
	<body>
		<!-- 水平表头 -->
		<h4 align="center">水平表头</h4>
		<table border="1" cellpadding="5" cellspacing="2" align="center">
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>男</td>
				<td>30</td>
			</tr>
		</table>
		<!-- 垂直表头 -->
		<h4 align="center">垂直表头</h4>
		<table border="1" cellpadding="5" cellspacing="2" align="center">
			<tr>
				<th>姓名</th>
				<td>张三</td>
			</tr>
			<tr>
				<th>性别</th>
				<td>男</td>
			</tr>
			<tr>
				<th>年龄</th>
				<td>30</td>
			</tr>
		</table>
	</body>
</html>

5.6.2 还原Excel表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格练习</title>
		<style type="text/css">
			th,td{height: 0.625rem; width: 3.125rem; text-align: center;}
			#th_title{height: 2rem;}
		</style>
	</head>
	<body>
		<table border="1" cellpadding="5" cellspacing="2" align="center" width="760">
			<tr>
				<th colspan="12" id="th_title">1105班信息表</th>
			</tr>
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th colspan="2">电话</th>
				<th colspan="8" rowspan="2">座位表</th>
			</tr>
			<tr>
				<td>1</td>
				<td>xx</td>
				<td colspan="2">11111</td>
			</tr>
			<tr>
				<td>2</td>
				<td>xxx</td>
				<td>11</td>
				<td>111</td>
				<td colspan="2">程云博</td>
				<td colspan="2">石锐坚</td>
				<td colspan="2">李宏伟</td>
				<td colspan="2">刘涛</td>
			</tr>
			<tr>
				<td>3</td>
				<td>xxx</td>
				<td colspan="2">11111</td>
				<td>杜少雄</td>
				<td colspan="2">张学伟</td>
				<td>侯宇航</td>
				<td>&nbsp;</td>
				<td>梁朝辉</td>
				<td>纪治鹏</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>4</td>
				<td>xxx</td>
				<td>11</td>
				<td>11</td>
				<td colspan="2">申高昂</td>
				<td colspan="2">李超军</td>
				<td>&nbsp;</td>
				<td>高源好</td>
				<td>&nbsp;</td>
				<td>宋英姿</td>
			</tr>
			<tr>
				<td>5</td>
				<td>xx</td>
				<td colspan="2">11111</td>
				<td>王嘉敏</td>
				<td>靳宇升</td>
				<td colspan="2">曹腾渊</td>
				<td colspan="2">药宇</td>
				<td colspan="2">杨凯</td>
			</tr>
		</table>
	</body>
</html>

 

 5.6.3 电商品牌墙

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格-天猫品牌墙</title>
	</head>
	<body>
		<h3 align="center">天猫品牌墙</h3>
		<table align="center">
			<tr>
				<td><a href="https://baidu.com"><img src="image1/icon1.jpg" width="150"></a></td>
				<td><a href="https://baidu.com"><img src="image1/icon2.jpg" width="150"></a></td>
				<td><a href="https://baidu.com"><img src="image1/icon3.jpg" width="150"></a></td>
				<td><a href="https://baidu.com"><img src="image1/icon4.jpg" width="150"></a></td>
				<td><a href="https://baidu.com"><img src="image1/icon5.jpg" width="150"></a></td>
			</tr>
			<tr>
				<td><a href="https://baidu.com"><img src="image1/icon6.jpg" width="150"></a></td>
				<td><a href="https://baidu.com"><img src="image1/icon7.jpg" width="150"></a></td>
				<td><a href="https://baidu.com"><img src="image1/icon8.jpg" width="150"></a></td>
				<td><a href="https://baidu.com"><img src="image1/icon9.jpg" width="150"></a></td>
				<td><a href="https://baidu.com"><img src="image1/icon10.jpg" width="150"></a></td>
			</tr>
			<tr>
				<td><a href="https://baidu.com"><img src="image1/icon11.jpg" width="150"></a></td>
				<td><a href="https://baidu.com"><img src="image1/icon12.jpg" width="150"></a></td>
				<td><a href="https://baidu.com"><img src="image1/icon13.jpg" width="150"></a></td>
				<td><a href="https://baidu.com"><img src="image1/icon14.jpg" width="150"></a></td>
				<td><a href="https://baidu.com"><img src="image1/icon15.jpg" width="150"></a></td>
			</tr>
			<tr>
				<td><a href="https://baidu.com"><img src="image1/icon16.jpg" width="150"></a></td>
				<td><a href="https://baidu.com"><img src="image1/icon17.jpg" width="150"></a></td>
				<td><a href="https://baidu.com"><img src="image1/icon18.jpg" width="150"></a></td>
				<td><a href="https://baidu.com"><img src="image1/icon19.jpg" width="150"></a></td>
				<td><a href="https://baidu.com"><img src="image1/icon10.jpg" width="150"></a></td>
			</tr>
		</table>
	</body>
</html>


6 表单

6.1 简介

表单标签form:浏览器端的输入项容器,提交时会提交form表单内全部用于输入的子标签内容。
表单的做用:在动态网页技术中,主要用于用户与服务器的交互。

6.2 form的属性

6.2.1 action属性

设定处理表单数据提交的服务器url地址。如action=“mailto:liwu001@126.com”

6.2.2 method属性

设定数据传送到服务器的方式,经常使用的取值有get、post

get请求:声明本次请求的目的是从服务器获取数据。

post请求:声明本次请求的目的是向服务器传送数据。

get与post的区别:

一、目的不一样

二、提交方式不一样(一个在请求头,一个在请求体)

三、提交数据长度不一样

  • get:不超过255个字符  
  • post:默认为不受限制

四、安全性:设置get后,信息显示在浏览器地址栏,安全性低

6.2.3 name属性

规定表单的名称。

6.2.4 target属性

规定在何处打开 action URL。

6.2.5 表单标签公有的属性(html4标准)

  • id:表单的惟一性标识
  • name:规定表单标签的名称,在提交数据时,以name属性做为检索值。
  • disabled:规定禁用当前表单元素。
  • readonly:规定表当前表单元素为只读元素。
  • value:设定或获取当前表单元素的输入值。

readonly和disabled的区别:

  • readonly只针对input(text / password)和textarea有效。
  • disabled对于全部的表单元素都有效,包括select, radio, checkbox, button等。

6.3 input标签

6.3.1 input公有属性说明(html4标准)

  • name:设定input 元素的名称。
  • value:设定 input 元素的值。
  • checked:设定此 input 元素首次加载时应当被选中(单选按钮、复选框
  • maxlength:规定输入字段中的字符的最大长度
  • type:设定当前输入标签的类型。

6.3.2 type属性的取值

  • text:定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。 
  • password:定义密码字段。该字段中的字符被掩码。
  • radio:定义单选按钮。
  • checkbox:定义复选框。
  • file:定义输入字段和 "浏览"按钮,供文件上传。
  • button:表单中的普通按钮,按钮内容为文字,点击后没有默认行为。
<input type=“button“ value=“按钮名称” />
  • image:表单中的普通按钮,显示内容为图片,点击后没有默认行为。
<input type=“image“ value=“按钮名称” src="1.png" />
  • submit:表单中的提交按钮,点击自动将表单内容提交给服务器,能够使用js阻止提交。
<input type=“submit“ value=“按钮名称” />
  • reset:重置表单内容,点击后表单内全部输入元素的值将被重置为网页加载前的状态。
<input type=“reset“ value=“重置” />

PS:因为input在定义按钮时没法同时显示文字和图片,建议使用button标签订义按钮

<button type=“submit/reset/button”>
    按钮的文字 <img src = “anniu.png”/>
<button>

6.4 下拉列表

6.4.1 简介

下拉列表使用select、option标签共同完成下拉框的显示。

6.4.2 select的属性

  • multiple:规定可选择多个选项。
  • size:规定可见下拉框选项的数量。

6.4.3 option的属性

  • selected:规定下拉列表中被选项目的索引号

6.5 fieldset与legend标签

<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。

当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可建立一个子表单来处理这些元素。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>鱼C-零基础入门学习Web(Html5+Css3)</title>
</head>
<body>
    <form>
        <fieldset>
            <legend>健康信息</legend>
            身高:<input type="text" />
            体重:<input type="text" />
        </fieldset>
    </form>
    <p>若是表单周围没有边框,请更换浏览器。</p>
</body>
</html>

6.6 textarea标签

6.6.1 简介

textarea是设定多行文本的输入控件(文本域)

6.6.2 属性

  •  cols:规定文本区内的可见宽度。 
  • rows:规定文本区内的可见行数。

6.7 label标签

6.7.1 简介

label是input标签的文字描述标签,能够代替输入标签响应用户的操做。

6.7.2 属性

  • for:输入标签的id属性值。
<Label for="InputBox">姓名</Label>
<input id="InputBox" type="text"> 
  • accesskey:用户的快捷键值。 
<Label for="InputBox" accesskey="N">姓  名</Label><input  id="InputBox" type="text"> 

6.8 案例

6.8.1 经常使用表单标签总结

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>经常使用表单标签总结</title>
	</head>
	<body>
		<form>
			<table border="1" width="90%" align="center">
				<caption><h2 align="center">经常使用表单标签总结</h2></caption>
				<tr height="40">
					<th width="10%">文本框:</th>
					<th width="40%"><input type="text" size="35" maxlength="10"></th>
					<th width="10%">密码框:</th>
					<th width="40%"><input type="password" size="35" maxlength="10"></th>
				</tr>
				<tr height="40">
					<th>单选框:</th>
					<th>
						<input type="radio" name="answer">A&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input type="radio" name="answer" checked="checked">B&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input type="radio" name="answer">C
					</th>							
					<th>复选框:</th>
					<th>
						<input type="checkbox" name="hobby" checked="checked">学习&nbsp;&nbsp;&nbsp;&nbsp;
						<input type="checkbox" name="hobby" checked="checked">运动&nbsp;&nbsp;&nbsp;&nbsp;
						<input type="checkbox" name="hobby">电影&nbsp;&nbsp;&nbsp;&nbsp;
						<input type="checkbox" name="hobby">游戏
					</th>
				</tr>
				<tr height="40">
					<th>文件浏览框:</th>
					<th><input type="file" size="40"></th>
					<th>下拉列表:</th>
					<th>
						<select style="width:100px;">
							<option selected="selected">请选择</option>
							<option>清华大学</option>
							<option>北京大学</option>
							<option>复旦大学</option>
						</select>
					</th>
				</tr>
				<tr height="40">
					<th>颜色拾取器:</th>
					<th><input type="color">&lt;部分浏览器不兼容&gt;</th>
					<th>数量选择器:</th>
					<th><input type="number">&lt;部分浏览器不兼容&gt;</th>
				</tr>
				<tr height="40">
					<th>日期选择器:</th>
					<th><input type="date">&lt;部分浏览器不兼容&gt;</th>
					<th>时间选择器:</th>
					<th><input type="time">&lt;部分浏览器不兼容&gt;</th>
				</tr>
				<tr height="40">
					<th>月份选择器:</th>
					<th><input type="month">&lt;部分浏览器不兼容&gt;</th>
					<th>星期选择器:</th>
					<th><input type="week">&lt;部分浏览器不兼容&gt;</th>
				</tr>
				<tr height="40">
					<th>滑块:</th>
					<th><input type="range" min="0" max="100">&lt;部分浏览器不兼容&gt;</th>
					<th>邮箱输入框:</th>
					<th><input type="email">&lt;部分浏览器不兼容&gt;</th>
				</tr>
				<tr height="40">
					<th>普通按钮:</th>
					<th><input type="button" value="按钮"></th>
					<th>图片按钮:</th>
					<th><input type="image" src="image1/button_1.jpg" style="width: 100px;height: 40px;"></th>
				</tr>
				<tr height="80">
					<th>文本域:</th>
					<td colspan="3" align="center">
						<textarea rows="4" cols="80">随便说点什么……</textarea>
					</td>
				</tr>
				<tr height="40">
					<td colspan="2" align="center"><input type="submit" value="提交表单按钮"></td>
					<td colspan="2" align="center"><input type="reset" value="重置表单按钮"></td>
				</tr>
			</table>
		</form>
	</body>
</html>

6.8.2 阿里注册页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>阿里注册页面</title>
	</head>
	<body>
		<table border="0"  align="center" width="960">
			<tr>
				<td><img src="./images/head.jpg" width="954" height="107"></td>
			</tr>
			<tr>
				<td>
					<form>
						<table width="100%" border="0" cellpadding="4" cellspacing="15">
							<tr>
								<td align="right" width="200">电子邮箱:</td>
								<td><input name="email" type="email" size="35" maxlength="20"></td>
							</tr>
							<tr>
								<td align="right">会员登陆名:</td>
								<td><input name="username" type="text" size="35" maxlength="20"></td>
							</tr>
							<tr>
								<td align="right">密码:</td>
								<td><input name="password" type="password" size="35" maxlength="20"></td>
							</tr>
							<tr>
								<td align="right">再次输入密码:</td>
								<td><input name="password2" type="password" size="35" maxlength="20"></td>
							</tr>
							<tr>
								<td align="right">会员身份:</td>
								<td>
									<input name="usertype" type="radio" value="1" checked="checked"/>买家&nbsp;&nbsp;
									<input name="usertype" type="radio" value="2"/>卖家&nbsp;&nbsp;
									<input name="usertype" type="radio" value="3"/>二者都是
								</td>
							</tr>
							<tr>
								<td align="right">验证码:</td>
								<td>
									<input name="code" type="text" size="15" maxlength="4">
									<img src="./images/verycode.gif" name="code" width="132" height="55" align="absmiddle"/>
									<a href="#">看不清?换一张</a>
								</td>
							</tr>
							<tr>
								<td></td>
								<td><input name="register" type="image"  src="./images/btn_reg.gif"></td>
							</tr>
							<tr>
								<td></td>
								<td>
									<textarea name="read" cols="60" rows="5" >欢迎阅读阿里巴巴公司(阿里巴巴)服务条款协议(下称"本协议"),您应当在使用服务以前认真阅读本协议所有内容,且对本协议中加粗字体显示的内容,阿里巴巴督促您应重点阅读。本协议阐述之条款和条件适用于您使用阿里巴巴中文网站(所涉域名为:Alibaba.com.cn、alibaba.cn、1688.com,下同),所提供的在全球企业间(B-TO-B)电子市场(e-market)中进行贸易和交流的各类工具和服务(下称"服务")。
									</textarea>
								</td>
							</tr>
						</table>
					</form>
				</td>
			</tr>
			<tr>
				<td><img src="./images/foot.jpg" width="954" height="61"></td>
			</tr>
		</table>
	</body>
</html>