首页 > 代码库 > 常用标签与表标签
常用标签与表标签
1.常用标签:超链接<a href="">的属性href,可以连接图片,文件,网址。当是图片或者浏览器可以打开的文件时比如.文档。网页文件时,就不会出现下载。如出现pdf格式等文件时就会出现下载。
2.做锚点:<a name="">做锚点,用<div>涵盖,<a href="http://www.mamicode.com/#连接name的值">。
3.图片:<img />是一个单标签,插入图片用其src属性,其中属性还有width宽度,height图片高度,alt当图片加载不出来时就会显示其文字,title图片的标题,当鼠标放在上面时就会显示。
4.图片超链接:<a href="http://www.baidu.com">
<img src="http://www.mamicode.com/卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/57-1511061J428-50.jpg" height="120" width="192" alt="网速慢,加载失败" title="百度www.baidu.com" />
</a>
自我练习常用标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>末日人机</title> </head> <body text="#0000FF"> <a href="http://www.hao123.com">www.hao123.com</a><br /> <a href="../卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/4-14101G41128.jpg" >图片链接</a><br /> <a href="../1028.txt">文件链接,其中一般浏览器可以打开.txt,图片,网页文件不下载,其余的会显示下载</a><br /><br /> <div> <a href="#A">#代表当前页面,当前页面寻找A,所以跳转模块1</a><br /><br /> <a href="#B">#代表当前页面,当前页面寻找B,所以跳转模块2</a><br /><br /> <a href="#C">#代表当前页面,当前页面寻找C,所以跳转模块3</a><br /><br /> <a href="#D">#代表当前页面,当前页面寻找A,所以跳转模块4</a><br /><br /> <a href="#E">#代表当前页面,当前页面寻找B,所以跳转模块5</a><br /><br /> <a href="#F">#代表当前页面,当前页面寻找C,所以跳转模块6</a><br /><br /> </div> <center><img src="../卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/4-150115151924.jpg" width="192" height="108" alt="在图片加载不出来或者网速很慢加载不出来时,就会显示其文字" title="图片的标题" /></center><br /> <center><a href="../卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/Z3Vlc3Q=_679525.JPG"> <img src="../卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/446.jpg" width="136" alt="在页面加载不出来或者网速很慢加载不出来时就会显示其文字" title="亚索VS瑞文,图片" /> </a></center><br /> <center><a href="../卓最闪的衫扮十分感慨有人拍照要记得插袋/山海经(原文+注解).pdf"> <img src="../卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/3279936_181843038207_2.jpg" width="474" height="1024" alt="加载不出来时会显示其文字" title="山海经pdf" /> </a></center><br /> <center><a href="http://www.baidu.com"> <img src="../卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/57-1511061J428-50.jpg" height="120" width="192" alt="网速慢,加载失败" title="百度www.baidu.com" /> </a></center><br /> 做锚点 <ul type="circle"> <a name="A"><h2><center>模块1</center></h2></a> <li><p><b>我在二环路的里面想着你,你在远方的山上春风十里,今天的风有吹向你,下了雨,我说所有的酒都不如你</b></p></li> <a name="B"><center><h2>模块2</h2></center></a> <li><p>我在鼓楼的夜色中为你唱花香自来,在别处沉默相遇和期待,飞机飞过车水马龙的城市,千里之外不离开</p></li> <a name="C"><h3><center>模块3</center></h3></a> <li><p>把所有的春天都融进了一个清晨,把所有停不下的言语变成秘密关上了门,莫名的情愫啊请问谁来将他带走呢,只好把岁月化成歌留在山河。</p></li> </ul> <ol type="1"> <a name="D"><center><h2>模块4</h2></center></a> <li><p>我在二环路的里面想着你,你在远方的山上春风十里,今天的风有吹向你,下了雨,我说所有的酒都不如你</p><p>我在二环路的里面想着你,你在远方的山上春风十里,今天的风有吹向你,下了雨,我说所有的酒都不如你</p><p>我在二环路的里面想着你,你在远方的山上春风十里,今天的风有吹向你,下了雨,我说所有的酒都不如你</p><p>我在二环路的里面想着你,你在远方的山上春风十里,今天的风有吹向你,下了雨,我说所有的酒都不如你</p></li> <a name="E"><center><h2>模块5</h2></center></a> <li>我在二环路的里面想着你,你在远方的山上春风十里,今天的风有吹向你,下了雨,我说所有的酒都不如你我在二环路的里面想着你,你在远方的山上春风十里,今天的风有吹向你,下了雨,我说所有的酒都不如你我在二环路的里面想着你,你在远方的山上春风十里,今天的风有吹向你,下了雨,我说所有的酒都不如你我在二环路的里面想着你,你在远方的山上春风十里,今天的风有吹向你,下了雨,我说所有的酒都不如你</li> <a name="F"><center><h2>模块6</h2></center></a> <li>我在二环路的里面想着你,你在远方的山上春风十里,今天的风有吹向你,下了雨,我说所有的酒都不如你我在二环路的里面想着你,你在远方的山上春风十里,今天的风有吹向你,下了雨,我说所有的酒都不如你我在二环路的里面想着你,你在远方的山上春风十里,今天的风有吹向你,下了雨,我说所有的酒都不如你我在二环路的里面想着你,你在远方的山上春风十里,今天的风有吹向你,下了雨,我说所有的酒都不如你</li> </ol> <center><a href="#">当前页面,相当于刷新页面</a></center> </body> </html>
1.<table>表格,其中属性有width(表格宽度,固定像素,百分比),border边框粗细,cellspacing单元格的边距,cellpadding单元格的间距,bodercolor边框颜色。
2.<tr></tr>代表行
3.<td></td>代表列,其中属性有weidth单元格的宽度,height单元格的高度,align水平对齐方式中属性有(left左边对齐,right右边对齐,center居中对齐),valign垂直对齐方式中属性有(top向上对齐,bottom靠下对齐,middle中间对齐),bgcolor背景颜色,rowspan合并单元格(行),colspan合并单元格(列)。
5.<th>做表头的(第一行)。
表格标签,以下是我自己用表格标签做的两个网页
1.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>理工大学</title> </head> <body bgcolor="#CCCCCC"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="100"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="10%" height="100"> </td> <td width="10%"> </td> <td width="10%"> </td> <td width="10%"> </td> <td width="10%" nowrap="nowrap">首页</td> <td width="10%" nowrap="nowrap">公司简介</td> <td width="10%" nowrap="nowrap">产品介绍</td> <td width="10%" nowrap="nowrap">公司新闻</td> <td width="10%" nowrap="nowrap">产品图片</td> <td width="10%" nowrap="nowrap">联系我们</td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> </tr> </table></td> </tr> <tr> <td height="300"> <img src="../卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/vhkhv.jpg" width="100%" height="300" alt="加载不出来哟" title="llalal" /> </td> </tr> <tr> <td height="400"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="33%" height="66">媒体报道</td> <td width="33%" height="66">学校新闻</td> <td width="33%" height="66">通知公告</td> </tr> <tr> <td width="33%" height="66"><a href="http://lgwindow.sdut.edu.cn/2016/0831/c1070a63969/page.htm" target="_blank" title="山东理工大学扎实推进校城融合发展" alt="山东理工大学扎实推进校城融合发展">山东理工大学扎实推进校城融合发展</a></td> <td width="33%" height="66"><a href="http://lgwindow.sdut.edu.cn/2016/0905/c1058a64120/page.htm" target="_blank" title="学校隆重举行典礼欢迎新同学" alt="学校隆重举行典礼欢迎新同学">学校隆重举行典礼欢迎新同学</a></td> <td width="33%" height="66"><a href="http://rshch.sdut.edu.cn/81/86/c204a33158/page.htm" target="_blank" title="山东理工大学诚聘海内外高层次人才" alt="山东理工大学诚聘海内外高层次人才">山东理工大学诚聘海内外高层次人才</a></td> </tr> <tr> <td width="33%" height="66"><a href="http://lgwindow.sdut.edu.cn/2016/0831/c1070a63969/page.htm" target="_blank" title="山东理工大学扎实推进校城融合发展" alt="山东理工大学扎实推进校城融合发展">山东理工大学扎实推进校城融合发展</a></td> <td width="33%" height="66"><a href="http://lgwindow.sdut.edu.cn/2016/0905/c1058a64120/page.htm" target="_blank" title="学校隆重举行典礼欢迎新同学" alt="学校隆重举行典礼欢迎新同学">学校隆重举行典礼欢迎新同学</a></td> <td width="33%" height="66"><a href="http://rshch.sdut.edu.cn/81/86/c204a33158/page.htm" target="_blank" title="山东理工大学诚聘海内外高层次人才" alt="山东理工大学诚聘海内外高层次人才">山东理工大学诚聘海内外高层次人才</a></td> </tr> <tr> <td width="33%" height="66"><a href="http://lgwindow.sdut.edu.cn/2016/0831/c1070a63969/page.htm" target="_blank" title="山东理工大学扎实推进校城融合发展" alt="山东理工大学扎实推进校城融合发展">山东理工大学扎实推进校城融合发展</a></td> <td width="33%" height="66"><a href="http://lgwindow.sdut.edu.cn/2016/0905/c1058a64120/page.htm" target="_blank" title="学校隆重举行典礼欢迎新同学" alt="学校隆重举行典礼欢迎新同学">学校隆重举行典礼欢迎新同学</a></td> <td width="33%" height="66"><a href="http://rshch.sdut.edu.cn/81/86/c204a33158/page.htm" target="_blank" title="山东理工大学诚聘海内外高层次人才" alt="山东理工大学诚聘海内外高层次人才">山东理工大学诚聘海内外高层次人才</a></td> </tr> <tr> <td width="33%" height="66"><a href="http://lgwindow.sdut.edu.cn/2016/0831/c1070a63969/page.htm" target="_blank" title="山东理工大学扎实推进校城融合发展" alt="山东理工大学扎实推进校城融合发展">山东理工大学扎实推进校城融合发展</a></td> <td width="33%" height="66"><a href="http://lgwindow.sdut.edu.cn/2016/0905/c1058a64120/page.htm" target="_blank" title="学校隆重举行典礼欢迎新同学" alt="学校隆重举行典礼欢迎新同学">学校隆重举行典礼欢迎新同学</a></td> <td width="33%" height="66"><a href="http://rshch.sdut.edu.cn/81/86/c204a33158/page.htm" target="_blank" title="山东理工大学诚聘海内外高层次人才" alt="山东理工大学诚聘海内外高层次人才">山东理工大学诚聘海内外高层次人才</a></td> </tr> <tr> <td width="33%" height="66"><a href="http://lgwindow.sdut.edu.cn/2016/0831/c1070a63969/page.htm" target="_blank" title="山东理工大学扎实推进校城融合发展" alt="山东理工大学扎实推进校城融合发展">山东理工大学扎实推进校城融合发展</a></td> <td width="33%" height="66"><a href="http://lgwindow.sdut.edu.cn/2016/0905/c1058a64120/page.htm" target="_blank" title="学校隆重举行典礼欢迎新同学" alt="学校隆重举行典礼欢迎新同学">学校隆重举行典礼欢迎新同学</a></td> <td width="33%" height="66"><a href="http://rshch.sdut.edu.cn/81/86/c204a33158/page.htm" target="_blank" title="山东理工大学诚聘海内外高层次人才" alt="山东理工大学诚聘海内外高层次人才">山东理工大学诚聘海内外高层次人才</a></td> </tr> </table> </td> </tr> <tr> <td height="100" bgcolor="#00FFFF"> </td> </tr> </table> </body> </html>
2.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>艾佛森中文网</title> </head> <body text="#0000FF" bgcolor="#333333"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="40" align="center">AllenIverson中文网</td> </tr> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><a href="http://www.nba.com">NBA</a></td> <td><a href="../卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/。,ll.jpg">CBA</a></td> <td><a href="http://www.baidu.com">MMA</a></td> <td><a href="../卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/4a925477gw1ezyxupdmejj217k1j0gwk.jpg">UFC</a></td> <td><a href="../卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/955.jpg">WWE</a></td> </tr> </table></td> </tr> </table></td> </tr> <tr> <td> <img src="../卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/885.jpg" width="100%" height="360" /> 最新视频</td> </tr> <tr> <td height="160"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="40" bgcolor="#FFFFFF"><a href="../卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/4a925477gw1ezm6s4c6k7j20sa0iudhy.jpg">1999-2000</a></td> <td height="40" bgcolor="#FFFFFF">2000-2001</td> <td height="40" bgcolor="#FFFFFF">2001-2002</td> </tr> <tr> <td height="40" bgcolor="#FFFFFF">76人vs公牛</td> <td height="40" bgcolor="#FFFFFF">76人vs马刺</td> <td height="40" bgcolor="#FFFFFF">76人vs开拓者</td> </tr> <tr> <td height="40" bgcolor="#FFFFFF">76人vs火箭</td> <td height="40" bgcolor="#FFFFFF">76人vs湖人</td> <td height="40" bgcolor="#FFFFFF">76人vs小牛</td> </tr> <tr> <td height="40" bgcolor="#FFFFFF">76人vs湖人</td> <td height="40" bgcolor="#FFFFFF">76人vs黄蜂</td> <td height="40" bgcolor="#FFFFFF">76人vs快船</td> </tr> </table></td> </tr> </table> </body> </html>
常用标签与表标签