javaEE (一）javaweb_HTML

Day1 : 2018/11/10 HTML

创建页面：

一些基础的标签：

标题：<h1 />
水平线: <hr />
段落: <p></p> 或者<br />
加粗：<b></b>
斜体：<i></i>
下划线：<u></u>
换行：<br />
空格： &nbsp

注：h从1到6逐渐变小，而字体标签的size从1到7逐渐变大

显示图片： <img / >

<img  alt="图片无法显示" src="太长了，见源代码"  width="225"  heigh=225 /> 
（其中alt是当图片不能正常显示的时候页面的显示，另外，图片的source就用绝对路径吧）

显示列表:
无序列表：<ul></ul>

需要写入的内容
需要写入的内容
需要写入的内容

<ul  type="disk/circle/square">(分别对应实心圆空心圆和方块）
	<li>需要写入的内容</li>
	<li>需要写入的内容</li>
	<li>需要写入的内容</li>
</ul>

有序列表：<ol></ol>

需要写入的内容
需要写入的内容
需要写入的内容

<ol  start=“4”   reversed="reversed"  type=(分别对应从4开始，是否倒转和格式）
	<li>需要写入的内容</li>
	<li>需要写入的内容</li>
	<li>需要写入的内容</li>
</ol>

超链接: <a></a>
注意：超链接一般放在<font>外面,使不覆盖颜色。
点这里进入百度
 点这里进入图片

<a  href="www.baidu.com" >  点这里进入百度 </a>
<a  href="D:\JVA_PRJ\HTML_test\img\footer.jpg" > 点这里进入图片 </a>

网站表格： <table><tr><td></tr></td></table>

<table>
	<tr>（行）
		<td></td>（列）
		<td></td>（列）
		<td></td>（列）
	</tr>
	
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>

	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	
</table>

table 和tr的参数	含义
border	边框像素（px）
width/height	宽/高
align	位置（如居中center）
cellspacing	边框与边框的距离（px）
cellpadding	边框与内容的距离（px）

合并边框的单元格：

注：
1. 要想使单元格里面的图片或者超链接居中，可以在单元格<tr>里面设置align = “center“
2. 在设置单元格的时候最好设置清楚格子的宽高像素，不然填充的时候容易框子大小改变

11	12	13	14
11	22		24
31	22		34
41	42	43	44

<table>
	<tr>
		<td rowspan="2" align="center">11</td> // 行删除两个
		<td>12</td>
		<td>13</td>
		<td>14</td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2" align="center">22</td>  //列和行删除两个，然后删除相应的单元格
		<td>24</td>
	</tr>
	<tr>
		<td>31</td>
		<td>34</td>
	</tr>
		<tr>
		<td>41</td>
		<td>42</td>
		<td>43</td>
		<td>44</td>
	</tr>
	</table>

最后，综合以上，做个小页面，然后用frameset包装一下，点击左边的按钮，就会在右边出现我们写好的页面

效果图：
首先是我们写的页面: 在这里插入图片描述

然后frameset包装一下：
在这里插入图片描述
源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商城的实现</title>
	</head>
	<body>
		<table border="2px" width="100%" height="100%">
			<!-- 第一行 -->

			<tr>
				<td colspan="2" width="33.33%"><img src="../img/logo2.png" width="50%"/></td> 
				<td colspan="2"  width="33.33%"><img src="../img/header.png" ></td>
				<td colspan="3"  width="33.33%"> <a href="#">登陆</a>  <a href="#">注册</a> <a href="#">购物车</a>  </td>
			</tr>
			<!-- 第二行 -->
			<tr bgcolor="black">
				<td colspan="7"> 
				 <a href="#" ><font size="5" color="red">首页</font></a>  &nbsp; &nbsp; &nbsp;
				 <a href="#"><font color="red">手机数码</font></a> 
				 <a href="#">电脑办公</a> <a href="#">鞋靴箱包</a> 
				 <a href="#">家用电器</a></td>
			</tr>
			<!-- 第三行 -->
			<tr>
				<td colspan="7" ><img src="../img/1.jpg"  width="100%" /></td>
			</tr>
			<!-- 第四行 -->
			<tr>
				<td colspan="7"><font size="5" color="red">最新商品 </font>
				<img src="../img/title2.jpg"</td>
			</tr>
			<!-- 第五六行 -->
			<tr>
				<td rowspan="2"><img src="../img/big01.jpg" width="100%"></td>
				<td colspan="3"><img src="../img/middle01.jpg" width="100%" height="100%"  /></td>
				
				<td align="center">
				<img src="../img/small03.jpg" align="center"/> <br />
				<a href="#" ><font color="grey">炖锅</font></a> <br />
				<font color="red" >$499</font>
		      </td>
				<td><img src="../img/small03.jpg"</td>
				<td><img src="../img/small03.jpg"</td>
			</tr>



			<tr>
				
				<td><img src="../img/small03.jpg"</td>
				<td><img src="../img/small03.jpg"</td>
				<td><img src="../img/small03.jpg"</td>
				<td><img src="../img/small03.jpg"</td>
				<td><img src="../img/small03.jpg"</td>
				<td><img src="../img/small03.jpg"</td>
			</tr>
			<!-- 第七行 -->
			<tr>
				<td colspan="7"><img src="../img/ad.jpg" width="100%" /></td>
			</tr>
			<!-- 第八行 -->
			<tr>
				<td colspan="7"><font size="5" color="red">热门商品 </font>
				<img src="../img/title2.jpg"</td>
			</tr>

			<!-- 第九、十行 -->
			<tr>
							<td rowspan="2"><img src="../img/big01.jpg" width="100%"></td>
							<td colspan="3"><img src="../img/middle01.jpg" width="100%" height="100%"  /></td>
							
							<td align="center">
							<img src="../img/small03.jpg" align="center"/> <br />
							<a href="#" ><font color="grey">炖锅</font></a> <br />
							<font color="red" >$499</font>
					      </td>
							<td><img src="../img/small03.jpg"</td>
							<td><img src="../img/small03.jpg"</td>
						</tr>
			
			
			
						<tr>
							
							<td><img src="../img/small03.jpg"</td>
							<td><img src="../img/small03.jpg"</td>
							<td><img src="../img/small03.jpg"</td>
							<td><img src="../img/small03.jpg"</td>
							<td><img src="../img/small03.jpg"</td>
							<td><img src="../img/small03.jpg"</td>
						</tr>
			<!-- 第十一行 -->
			<tr>
				<td colspan="7"><img src="../img/footer.jpg"  width="100%"/></td>
			</tr>
			<!-- 第十二行 -->
			<tr>
				<td colspan="7" align="center">
				 <a href="#" >关于我们</a> <a href="#">联系我们</a> <a href="#">招贤纳士</a> <a href="#">法律声明</a> <a href="#">友情链接</a> <a href="#">支付方式</a> <a href="#" >配送方式</a> <a href="#" >服务声明</a> <a href="#" >广告声明</a> 
				 <p> 南京邮电大学 版权所有</p>
				</td>
			</tr>


		</table>


	</body>
</html>

frameset.html

注：frameset 取代了<body></body>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>FrameSet.html</title>
	</head>
	<frameset rows="25%,*">
		<frame src="top.html"/>
		<frameset cols="20%,*">
			<frame src="left.html" />
			<frame name="right" />              //将右边取名为name
			
		</frameset>
		
	</frameset>
	
</html>

top.html

扫描二维码关注公众号，回复： 4047260 查看本文章

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>top.html</title>
	</head>
	<body>
		<font size="7"> This is top!!</font>
	</body>
</html>

left.html


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>left.html</title>
	</head>
	<body>     //用target 将左边的超链接指向右边的框子里
		<a href="../WebContent/sessionfour.html" target="right" ><font color="greenyellow" size="5">通往右边 </font></a><br /><br />
		<a href="#" ><font color="red" size="5">二号 </font></a><br /><br />
		<a href="#" ><font color="red" size="5">三号 </font></a><br /><br />
		<a href="#" ><font color="red" size="5">四号 </font></a><br /><br />
		
	</body>
</html>

right.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>right.html</title>
	</head>
	<body>
		
	</body>
</html>

javaEE (一）javaweb_HTML

猜你喜欢