筱筱学前端Day3

最新推荐文章于 2024-07-24 10:40:52 发布

慕筱筱

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量186

点赞数 1

分类专栏：前端入门学习文章标签：前端 html javascript

本文链接：https://blog.csdn.net/weixin_62772655/article/details/122827810

版权

前端入门学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

干货1——table表格的基本结构

<table>

<tr>（表示行）

<td>...</td>（表示单元格）

<td>...</td>

</tr>

</table>

注：此时的表格是没有边框线包裹的。

干货2——table表格的相关属性

表格属性

1.边框线 border="..."（控制表格外边框宽度）

2.宽度 width="..."（...可以是多少px（px可不写），也可以是百分比，百分比是相对于父元素的，不是单纯相对于屏幕的）

3.高度 height="..."（同上）

4.边框颜色 bordercolor="..."

5.背景颜色 bgcolor="..."

6.水平对齐 align="left/right/center"（指整个表格）

7.cellspacing="单元格与单元格之间的间距"（若为0则是没有边距的一条实线，若不为0则是有边距的两条线）

8.cellpadding="单元格与内容之间的空隙"

举例如下：

<body>
    <table border="1" width="50%" height="500" bordercolor="red" bgcolor="blue" align="center" cellspacing="0" cellpadding="3">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
</body>

网页结果如下：

行tr属性

1.高度 height="..."

注：单独让某一行的宽度改变网页是不会做出变化的，所以tr属性里不包含width喔。

2.背景颜色 bgcolor="..."

3.文字水平对齐 align="left/right/center"

4.文字垂直对齐 valign="top/middle/bottom"

举例如下：

<body>
    <table border="1" width="300" height="300" bgcolor="yellow" align="center">
        <tr bgcolor="orange" height="100" align="center" valign="top">
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
</body>

网页结果如下：

单元格td属性

1.宽度 width="..."

2.高度 height="..."

3.背景颜色 bgcolor="..."

4.文字水平对齐 align="left/right/center"

5.文字垂直对齐 valign="top/middle/bottom"

注：如果一个单元格设置宽度，影响的是这一整列的宽度；如果一个单元格设置高度，影响的是这一整行的高度。

举例如下：

<body>
    <table border="1" width="300" height="300" bgcolor="yellow" align="center">
        <tr>
            <td width="200">1</td>
            <td height="200">2</td>
        </tr>
        <tr>
            <td bgcolor="red">3</td>
            <td align="right" valign="top">4</td>
        </tr>
    </table>
</body>

网页结果如下：

干货3——表格合并

这是一个原始的表格：

colspan="所要合并的单元格的列数"必须给td。

举例如下:

<body>
    <table border="1" width="300" height="300">
        <tr>
            <td>荒原</td>
            <td colspan="2">魏国</td>
            <td>辽国</td>
        </tr>
        <tr>
            <td>蜀国</td>
            <td>西凉</td>
            <td>幽州</td>
        </tr>
        <tr>
            <td>南中</td>
            <td>吴国</td>
            <td>荆州</td>
        </tr>
    </table>
</body>

此时的效果是有点奇怪的，如下：

要想让表格变正常，只需将辽国那行删掉或者注释掉喔，最后效果如下：

西凉和幽州那里的处理方法同上。

rowspan="所要合并单元格的行数"必须给td。

举例如下：

<body>
    <table border="1" width="300" height="300">
        <tr>
            <td>荒原</td>
            <td colspan="2" rowspan="2">魏国</td>
            <!-- <td>辽国</td> -->
        </tr>
        <tr>
            <td>蜀国</td>
            <td colspan="2">西凉</td>
            <!-- <td>幽州</td> -->
        </tr>
        <tr>
            <td>南中</td>
            <td>吴国</td>
            <td>荆州</td>
        </tr>
    </table>
</body>

此时的效果也是有点奇怪的：

同理，只需把西凉删掉或是注释掉。最后效果如下：

最后我们这样写：

<body>
    <table border="1" width="300" height="300">
        <tr>
            <td>荒原</td>
            <td colspan="2" rowspan="2">魏国</td>
            <!-- <td>辽国</td> -->
        </tr>
        <tr>
            <td rowspan="2">蜀国</td>
            <!-- <td colspan="2">西凉</td> -->
            <!-- <td>幽州</td> -->
        </tr>
        <tr>
            <!-- <td>南中</td> -->
            <td colspan="2">吴国</td>
            <!-- <td>荆州</td> -->
        </tr>
    </table>
</body>

得到的网页如下：

结合以上内容我们来一起做一个小表格，代码如下：

<body>
    <table border="1" width="600" height="300">
        <tr>
            <td width="100" align="center">会员姓名</td>
            <td></td>
            <td width="100" align="center">出生日期</td>
            <td></td>
        </tr>
        <tr>
            <td align="center">身份证号</td>
            <td colspan="3"></td>
            <!-- <td></td>
            <td></td> -->
        </tr>
        <tr>
            <td align="center">通信地址</td>
            <td colspan="3"></td>
            <!-- <td></td>
            <td></td> -->
        </tr>
        <tr>
            <td align="center">联系电话</td>
            <td colspan="3"></td>
            <!-- <td></td>
            <td></td> -->
        </tr>
        <tr>
            <td align="center">会员卡号</td>
            <td colspan="3"></td>
            <!-- <td></td>
            <td></td> -->
        </tr>
    </table>
</body>

表格如下：

干货4——表单标签

<from method="get/post" action="向何处发送表单数据">

<input/>

A. 属性 type定义输入框的类型

a)文本框 type="text" 密码框 type="password"

b)提交框 type="submit" 和 <button>提交按钮</button>一样

c)按钮框 type="button"单纯的按钮

d)重置框 type="reset"清空的效果

B.属性 placeholder描述输入字段预期值的简短的提示信息。兼容到IE8以上

C.属性 name必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给服务器

D.属性 value

</form>

文本框举例：

<body>
    <form action="">
        用户信息:<input type="text">
    </form>
</body>

结果如下：（是可以输入东西的喔）

接下来来看placeholder的作用吧，如下：

<body>
    <form action="">
        用户信息:<input type="text" placeholder="请输入你的用户名，注意大小写">
    </form>
</body>

结果如下：

密码是加密的喔，代码如下：

<body>
    <form action="">
        用户信息:<input type="text" placeholder="请输入你的用户名，注意大小写">
        <br>
        密码:<input type="password" placeholder="请输入你的密码">
    </form>
</body>

结果如下：

我们继续丰富这个表单，加上提交：

<body>
    <form action="">
        用户信息:<input type="text" placeholder="请输入你的用户名，注意大小写">
        <br>
        密码:<input type="password" placeholder="请输入你的密码">
        <input type="submit">
    </form>
</body>

或者写<button type="submit">登录</button>

这时会出现一个可点击的按钮：

这时我们在submit那一行加上value：

<body>
    <form action="">
        用户信息:<input type="text" placeholder="请输入你的用户名，注意大小写">
        <br>
        密码:<input type="password" placeholder="请输入你的密码">
        <input type="submit" value="登录">
    </form>
</body>

可以看到提交按钮变成了登录按钮，结果如下：

然后我们需要提交信息到action指定的地址，举例如下：

<body>
    <form action="https://www.baidu.com/">
        用户信息:<input type="text" placeholder="请输入你的用户名，注意大小写">
        <br>
        密码:<input type="password" placeholder="请输入你的密码">
        <br>
        <input type="submit" value="登录">
    </form>
</body>

点击登录按钮前：

点击后：

可以看见百度地址后有一个？，这时我们的账号和密码后端人员是无法接收到的喔。

那要怎么能把信息传递给后端人员呢？这时就需要派出我们的name了。代码如下：

<body>
    <form action="https://www.baidu.com/">
        用户信息:<input type="text" placeholder="请输入你的用户名，注意大小写" name="username">
        <br>
        密码:<input type="password" placeholder="请输入你的密码" name="mima">
        <br>
        <input type="submit" value="登录">
    </form>
</body>

这时我们再登录再点击结果如下：

但是这又有一个问题，用户的密码就暴露了。这时需要派出method。

Form当中method的post和get的区别?

1. get是从服务器上获取数据，post是向服务器传送数据。

2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTP post机制，将表单内各个字段与其内容放置在HTMLHEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。

3.对于get方式，服务器端用Request QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4 (InternetInformation Service互联网信息服务）中最大量为80KB，IIS5中为100KB。

5. get安全性非常低,post安全性较高。但是执行效率却比Post方法好。

最后，我们加上重新输入键：

<body>
    <form action="https://www.baidu.com/" method="POST">
        用户信息:<input type="text" placeholder="请输入你的用户名，注意大小写" name="username">
        <br>
        密码:<input type="password" placeholder="请输入你的密码" name="mima">
        <br>
        <input type="submit" value="登录">
        <input type="reset" value="重新输入">
    </form>
</body>