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>© Copyright@PanShang 2014-10-29</h1> </center> </body> </head> </html>
效果:
总结:
在写代码时,有大片的代码需要更改时,有很多重复的部分,可以用 replace 来快速更改而不需要一个一个去更改
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。