html基础,写代码时的总结等---ShinePans

index.html:

<html>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>  
<head>
	<body> 
		<center>
		<!--空格  -->
		<!--img src="与html文件位置相同或者本地url或者网络url" width="xxpx为边框宽度" style="boder:1px为css布局 solide red 边框颜色"-->
		<table background="flowers.jpg" width="90%" border="0px" height="80px" cellspacing="0px">
			<tr>
				<td><h1><font color="white">ShinePans的测试网站</font></h1><td>
					<td align="right">
						<a href="myclass.html">查看我的课表</a> 	
					</td>
			</tr>
		</table>
		<!--tr标示一行--> <!--td代表一列--> <!--bgcolor背景颜色-->
		<!--Table 1测试-->
		<table background="flowers3.jpg" border="1px" width="90%" height="500px">
		 <!--页面占比-->
			<tr ><td><font color="white">第一行</font></td><td><font color="white">第二列</font></td><td>第三列</font></td><td>第四列</font></td></tr> 
			<tr><td>第二行</font></td><td align="left">居左</font></td><td align="center">居中</font></td><td align="right">居右</font></td></tr> 
			<tr><td>第三行</font></td><td>a11</font></td><td align="center">a12</font></td><td align="right">a13</td></tr> 
			<tr><td>第四行</font></td><td>a21</font></td><td align="center">a22</font></td><td align="right">a23</font></td></tr> 
			<tr><td>第五行</font></td><td>a31<</font>/td><td align="center">a32</font></td><td align="right">a33</font></td></tr> 
		</table>
		<!--table 2 测试-->
		<table cellspacing="0px" bordercolor="#FFD2D2" bgcolor="#BBFFFF" border="2px" width="90%" height="300px">
			<!--五行-->
			<!--solspan="3"横跨三行-->
			<tr>
				<td align="center" colspan="3">栏目</td> 
			</tr>
			<tr>
				<td align="center">花</td>
					<td align="center">风景</td>
						<td align="center">人物</td>
			</tr>
			<tr>
				<td align="center" rowspan="3"><img src="flower4.jpg" width="300px"></td>
					<td align="center" rowspan="3"><img src="view.jpg" width="300px"></td>
						<td align="center" rowspan="3"><img src="girl.jpg" width="300px"></td>
			</tr>
			<tr>			
			</tr>
			<tr>			
			</tr>
			<table/>
		<br/>
		<br/>
		<br/>_________________________________________________________<br/>
		<br/><img src="flowers.jpg" width="400px" style="border: 0px solide red" alt="Flowers"/>
		<br/><a href="http://www.baidu.com">打开百度</a>
		  <a href="mailto:[email protected]">[email protected] <a/>
		</center>
	</body>
</head>
</html>

效果:




myclass.html:

<html>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>  
<head>
	<body>
		<center>
			<h1><font color="#3C3C3C">潘尚的课表:</font></h1>
			<table background="girl.jpg" cellspacing="0px" border="2px" width="90%" height="400px">
			<tr align="center"><th><font color="white"><b>星期一</font></th><th><font color="white">星期二</font></th><th><font color="white">星期三</font></th><th><font color="white">星期四</font></th><th><font color="black">星期五</font></th></tr>

			<tr align="center"><th><font color="white">None</font></th><th><font color="white">操作系统(2103)</font></th><th><font color="white">算法分析(2307)</font></th><th><font color="white">计算机网络(2307)</font></th><th><font color="black">编译原理(2103)</font></th></tr>

			<tr align="center"><th><font color="white">计算机网络(2103)</font></th><th><font color="white">编译原理(2103)</font></th><th><font color="white">None</font></th><th><font color="white">计算机组成原理(2307)</font></th><th><font color="black">操作系统2103</font></th></tr>

			<tr align="center"><th><font color="white">算法分析(2307)</font></th><th><font color="white">计算机组成原理(2307)</font></th><th><font color="white">面向对象C++(A605)</font></th><th><font color="white">None</font></th><th><font color="black">计算机网络(A603)</font></th></tr>

			<tr align="center"><th><font color="white">面向对象C++(3203)</font></th><th><font color="white">None</font></th><th><font color="white">面向对象C++(A605)</font></th><th><font color="white">None</font></th><th><font color="black">计算机网络(A603)</font></th></tr>
			</table>
			<br/><br/>
			<h1>&copy Copyright@PanShang 2014-10-29</h1>
		</center>
	</body>
</head>
</html>

效果:




总结:


在写代码时,有大片的代码需要更改时,有很多重复的部分,可以用 replace 来快速更改而不需要一个一个去更改


郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。