首页 > 代码库 > 常用标签与表标签

常用标签与表标签

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">&nbsp;</td>
                  <td width="10%">&nbsp;</td>
                  <td width="10%">&nbsp;</td>
                  <td width="10%">&nbsp;</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" />
            &nbsp;</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">&nbsp;</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" />
        &nbsp;最新视频</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>

 

常用标签与表标签