HTML-02 Table&Form&Frame

来源：互联网发布：网络市场监管系统编辑：程序博客网时间：2024/06/07 04:06

1.表格

tr 每一行
td 每一行的单元格
th 表头（默认黑体可以换成td）
valign 垂直方向对齐 top middle bottom
rowspan 行扩展 colspan 列扩展

<table align="center",border="20">    <tr>        <th width="30%"valign="top",height="60">top30%</td>        <td width="10"valign="middle">middle10%</td>        <td valign="buttom">buttom</td>    </tr>    <tr>      <td rowspan="2",colspan="2"></td>      <td> rest</td>    </tr>    <tr>      <td rowspan="2",colspan="2"></td>      <td> rest</td>    </tr>    <tr>      <td> rest</td>   </tr><table>

观察行列扩展的结果
这里写图片描述

2.表单
属性
1）Method
数据提交方式
a.get 跟在URL后提交 256字节暴露

file:///E:/HTML/%E8%A1%A8%E5%8D%95.html?username=1&password1=1234&password2=1234&sex=female&interests=VC&interests=VB
&interests=C%23%23&hobby=hiking&hobby=jogging&address=1&message=

b.post 不会显示在URL 无限制
file:///E:/HTML/%E8%A1%A8%E5%8D%95.html

2）Action
数据提交位置

3）type
text文本框
password密码区
radio单选按钮
checkBox复选框
单选框和复选框用法都是同名不同值，否则出错

以下把名字设成不同值

<td>                    <input type="radio" name="sex" value="male" checked>男                    <input type="radio" name="sex1" value="female" >女                </td>            </tr>            <tr>                <td>对什么感兴趣</td>                <td>                    <input type="checkbox" name="interests" value="VC" checked>VC                    <input type="checkbox1"                 </td>

a.提交后发现出错
file:///E:/HTML/%E8%A1%A8%E5%8D%95.html?sex=male&sex1=female&interests=VC&interests=VB&interests=C
这里写图片描述

b.正确的提交
file:///E:/HTML/%E8%A1%A8%E5%8D%95.html?sex=female&interests=VC&interests=VB
这里写图片描述

<html><body>    <form method="post">        <table width="700",align="center",border="2">            <tr>                <td colspan="2",align="center">用户注册</td>            </tr>            <tr>                <td width="10%">用户名</td>                <td>                    <input type="text" name="username" size="30" maxlength="10">                </td>            </tr>            <tr>                <td>输入密码</td>                <td>                    <input type="password" name="password1" size="30" maxlength="15")>                </td>            </tr>            <tr>                <td>确认密码</td>                <td>                    <input type="password" name="password2" size="30" maxlength="15")>                </td>            </tr>            <tr>                <td>性别</td>                <td>                    <input type="radio" name="sex" value="male" checked>男                    <input type="radio" name="sex" value="female" >女                </td>            </tr>            <tr>                <td>对什么感兴趣</td>                <td>                    <input type="checkbox" name="interests" value="VC" checked>VC                    <input type="checkbox" name="interests" value="VB" >VB                    <input type="checkbox" name="interests" value="C##" >C##                    <input type="checkbox" name="interests" value="java" java                    <input type="checkbox" name="interests" value="php" >php                </td>            </tr>            <tr>                <td>爱好</td>                <td>                    <select name="hobby" size="4" multiple>                        <option value="reading">阅读</option>                        <option value="hiking">远足</option>                        <option value="jogging">竞走</option>                        <option value="travel">旅行</option>                        <option value="homing">宅</option>                        <option value="cooking">烹饪</option>                    </select>                </td>            </tr>            <tr>                <td>地址</td>                <td>                    <select name="address" >                        <option value=0>请选择</option>                        <option value=1>江苏</option>                        <option value=2>上海</option>                        <option value=3>北京</option>                        <option value=4>海南</option>                        <option value=5>广东</option>                        <option value=6>浙江</option>                        <option value=7>安徽</option>                </td>            </tr>            <tr>                <td>留言</td>                <td>                    <textarea rows="12" cols="80" name="message" wrap="hard"></textarea><!--加空格也会被显示，中间不能加任何字符-->                </td>            </tr>            <tr>              <td> </td>                <td>                    <input type="submit" value="提交">                    <input type="reset" value="重置">                    <input type="button" value="OK">                </td>            </tr>        </table>    </form></body></html>

4）target
可以链接到
frame name
_blank 新窗口
_self 本窗口
_parent 上一级窗口
_top 浏览器串口

<html>    <head><tile></tile></head>    <body>        <center>            <font size="4" color="blue">4-3</font>        </center>        <a href="4-1.html" target="_parent">父窗口</a>        <br>        <a href="4-1.html" target="_top">顶层</a>        <br>        <a href="4-1.html" target="_blank">新窗口</a>    </body></html>

3.框架
注意没有body
可以嵌套

<html>    <frameset cols="20%,*>        <frame name="0" >        <frame name="1" >        <frameset rows="40%,*">            <frame name="2" noresize>            <frame name="3">        </frameset>    </frameset></html>

显示结果
这里写图片描述

0 0