Html学习之旅——常用标签03

表格标签

表格标签使用方法

示例1

<!Doctype html><html xmlns=http://www.w3.org/1999/xhtml>
<head>                 
    <title>Deken前端学习 </title>
</head>
<body>
    <!--bgcolor="new RGB(235,85,20)"-->
    <table border="1" width="400" height="400"  align="center" cellpadding="20" background="1.jpg">
        <tr>
        <td>小弟女朋友1</td>
        <td>18</td>
        <td>北京</td>
        <td><font color="white">善良</font></td>  
    </tr>
    <tr>
        <td>小弟女朋友2</td>
        <td>20</td>
        <td>上海</td>
        <td><font color="white">漂亮</font></td>  
    </tr>
    <tr>
        <td><font color="white">小弟女朋友3</font></td>
        <td>21</td>
        <td>深圳</td>
        <td><font color="white">贤淑</font></td>  
    </tr>
    <tr>
        <td>小弟女朋友4</td>
        <td>19</td>
        <td>广州</td>
        <td><font color="white">温柔</font></td>  
    </tr>
          <!--表格的标题，可以任意摆放位置，只要在表格内部-->
          caption>大美人</caption>
</table>
</body>
</html>

效果图:

带标题的表格

示例2：

<body>
    <!--bgcolor="new RGB(235,85,20)"  #3366ff-->
    <table   align="center" cellpadding="18" bgcolor = "new RGB(235,85,20)" >
    <tr>
        <td>
            <table border="1" bordercolor="white" cellpadding="8">
                <tr>
                    <td colspan="4" ><input type="text" value="0" dir="rtl" size="20"><intput/></td>
                </tr>
                <tr>
                    <td><input type="button" value="7" size="25"><intput/></td>
                    <td><input type="button" value="8" size="25"><intput/></td>
                    <td><input type="button" value="9" size="25"><intput/></td>
                    <td rowspan="2"><input type="button" value="+" size="25"><intput/></td>
                </tr>
                <tr>
                    <td><input type="button" value="4" size="25"><intput/></td>
                    <td><input type="button" value="5" size="25"><intput/></td>
                    <td><input type="button" value="6" size="25"><intput/></td>
                
                </tr>
                <tr>
                    <td><input type="button" value="1" size="25"><intput/></td>
                    <td><input type="button" value="2" size="25"><intput/></td>
                    <td><input type="button" value="3" size="25"><intput/></td>
                    <td><input type="button" value="-" size="25"><intput/></td>
                </tr>
                <tr>
                    <td><input type="button" value="0" size="25"><intput/></td>
                    <td><input type="button" value="." size="25"><intput/></td>
                    <td><input type="button" value="C" size="25"><intput/></td>
                    <td><input type="button" value="=" size="25"><intput/></td>
                </tr>
            </table>
        </td>
    </tr>
    </table>
</body>

效果图：

一个简单计算器效果图

表单标签

示例

<!Doctype html><html xmlns=http://www.w3.org/1999/xhtml>
<head>                 
    <title>Deken前端学习 </title>
</head>

<body>
    <form action="html_day06.html" method="get">
        <fieldset>
            <legend>用户信息</legend>
            账号：<input type="text" value="请输入账号" size="30"></input>
            密码：<input type="password" value="" size="30"></input><br><br>
            <!-- hidden隐藏的，用户界面无法得知 -->
            <input type="hidden" value="这是隐藏的" size="30"></input>
            用户：<input type="text" value="请输入用户名" size="30"></input>
            昵称：<input type="text" value="请输入昵称" size="30"></input>
        </fieldset><br>

      <fieldset>
        <legend>其他信息</legend>
        <br>性别：<input type="radio" value="男" name="gender" checked="true">男</input>&nbsp<input type="radio" value="女"name="gender">女</input><br><br>
        爱好：<input type="checkbox" value="唱歌" name="intersts" >唱歌</input>&nbsp<input type="checkbox" value="运动" name="intersts" checked="true">运动</input>&nbsp<input type="checkbox" value="阅读" name="intersts" checked="true">阅读</input><br><br>
        学历：<select name="学历"> 
            <option value="研究生">研究生</option>
            <option value="本科">本科</option>
            <option value="高中">高中</option>
            <option value="小学">小学</option>
          </select><br><br>
    
      <!--输入大量文字标签-->
      建议：<textarea rows="10" cols="20"> </textarea><br>
      </fieldset><br>
        <!--各种普通按钮-->
        <input type="button" value="普通按钮"></input>&nbsp <button >普通按钮1</button><br><br>
        <!-- 各种提交按钮-->
        <input type="submit" value="提交按钮"></input>&nbsp <input type="image" src="1.jpg" width="40" height="20"></input><br><br>
        <!--各种重置按钮-->
        <input type="reset" value="重置按钮"></input><br><br>
    </form>
  </body>
</html>

效果图

效果图1

提交表单之后的效果

效果图2

框架标签

示例

<head>
  <title>Deken前端学习 </title>
</head>
<frameset rows="100,*">
    <frame  name="frame1" src="html_day06.html" ></frame>
    <frameset cols="100,*">
        <frame  name="html_day03" src="html_day03.html"></frame>
        <frame  name="html_day09" src="html_day05.html"></frame>
    </frameset>
</frameset>

效果图

三个页面一同加载了

到此，HTML常用标签基本学习完成了，本文基本没有太多文字，但是有很多图片文字以及源代码，相信还是很容易理解的。明天开始css的学习，基本学习完这个就可以回家过年了，呵呵，加油！永远美好的事情即将发生！

Html学习之旅——常用标签03

表格标签

示例1

效果图:

示例2：

效果图：

表单标签

示例

效果图

框架标签

示例

效果图

推荐阅读更多精彩内容