常用标签与表标签

1.常用标签：超链接<a href="">的属性href，可以连接图片，文件，网址。当是图片或者浏览器可以打开的文件时比如.文档。网页文件时，就不会出现下载。如出现pdf格式等文件时就会出现下载。
2.做锚点：<a name="">做锚点，用<div>涵盖，<a href="#连接name的值">。
3.图片：<img />是一个单标签，插入图片用其src属性，其中属性还有width宽度，height图片高度，alt当图片加载不出来时就会显示其文字，title图片的标题，当鼠标放在上面时就会显示。
4.图片超链接：<a href="http://www.baidu.com">
<img src="../卓最闪的衫扮十分感慨有人拍照要记得插袋/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>
时间： 2024-10-05 23:27:16

常用标签与表标签的相关文章

HTML常用标签及表单标签

HTML初识 HTML(Hpyer Text Markup Language的缩写)译为"超文本标签语言",用来描述网页的一种语言.所谓超文本,因为它可以加入图片.声音.动画.多媒体.一个文件跳转到另外一个文件,与世界各地主机的文件连接. HTML的作用就是用标记标签来描述网页,把网页内容在浏览器中展示出来. HTML骨架格式 HTML标签分类 HTML标签:带有'<>'符号的元素.主要有2种标签:双标签和单标签. HTML标签关系 并列关系.父子关系.孙子关系. 文档类型

前端之head标签，基本标签，div和span，常用标签，表单标签

一.head标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="icon" href="https://www.jd.com/favicon.ico"> <meta name="keyw

Struts2中UI标签之表单标签介绍

1.在Struts2中UI标签的表单标签分为两种:form标签本身和单个表单标签. 2.Struts2表单标签包括:form.textfield.password.radio.checkbox.checkboxlist.select.doubleselect.combobox.optiontransferselect.optgroup.updownselect.textarea.hidden.file.label.submit.token.head.datepicker.reset.richte

表格标签，图片标签，框架标签，表单标签

一)表格标签 <table>标签 表格里面需要设置单元格的行,在行内设置单元格代表该行的列. 通过改变table的属性还有单元格的属性可以设置单元格的跨度,字体,对齐方式等. 示例: <table align="center" border="1px" width="400pt" height="300pt"> <tr> <th colspan="3">学习成

前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型)

前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型) 一丶HTML块级标签 排版标签 p 标签: 段落标签,会自动在段落上下加上空白来分开 p标签是一个文本标签,本身是一个块级标签不能再嵌套块标签 div 标签: 没有样式的标签 ,最常用 列表 ???????1.无序列表 常用 ??????2.有序列表 ??????3.标题列表 # 无序列表 circle:空心圆, disc:默认实心圆,square:实心方片 <ul type='circl

html常用标签（form标签）

一.form标签 form标签是html标签中非常重要的一个标签.常用于注册.登录页面的使用. <form action="提交地址" method="提交方式"> </form> 注:method的值有两个.get(默认值)和post.get数据安全性没有post高.post的速度没有get快. form常用的元素: 1.文本框 <input type="text"/> 2.密码框 <input typ

form标签输出表单

表单标签是Struts2标签库的核心,用于输入数据.提交数据.form标签通常用于生成HTML里的<form>标签. <struts:form>标签不仅生成<form>标记,还会生成<table>标记.<struts:label>.<struts:textfield>.<struts:textarea>等UI标签也会生成<tr><td>标记.因此JSP中不需要书写任何布局代码. 1 <stru

jQuery常用的方法和标签总结01(有代码示例)

//jQuery的优点 :         1 轻量级        2 强大的选择器        3 出色的DOM操作的封装        4 可靠的事件处理机制        5 完善的Ajax        6 不污染顶级变量        7 出色的浏览器兼容性        8 链式操作方式        9 隐式迭代        10 行为曾与结构层的分离        11 丰富的插件支持        12 完善的文档        13 开源 <script src="

HTML &lt;fieldset&gt; 标签将表单内的相关元素分组

<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段. 当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界.3D 效果,或者甚至可创建一个子表单来处理这些元素. <fieldset> 标签没有必需的或唯一的属性. <legend> 标签为 fieldset 元素定义标题. HTML 4.01 与 HTML 5 之间的差异 HTML5 拥有如下属性:disabled.form.name,H