Web前端开发之HTML

Web前端开发之HTML_3

news2025/4/7 14:35:35

标签之表格
Form表单
块元素与行内元素（内联元素）
HTML5新增标签

1. 标签之表格 <table></table>

1.1 表格（快速生成：table>tr2>td3{单元格}）

表格由行、列、单元格组成。单元格有同行等高、同列等宽的特点。

表格标签：

表格：<table>
行：<tr>
单元格(列)：<td>

<table>

<tr>

<td>单元格</td>

<td>单元格</td>

<td>单元格</td>

</tr>

<tr>

<td>单元格</td>

<td>单元格</td>

<td>单元格</td>

</tr>

</table>

1.2 表格属性

border：设置表格的边框
width：设置表格的宽度
height：设置表格的高度

1.3 表格单元格合并

水平合并：colspan
垂直合并：rowspan

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <p>合并单元格6和7：colspan</p>
    <p>合并单元格15和20：rowspan</p>
    <p>水平合并：保留左，删除右</p>
    <p>垂直合并：保留上，删除下</p>

    <table border="1" width="600px" height="400px">
        <tr>
            <td>单元格1</td>
            <td>单元格2</td>
            <td>单元格3</td>
            <td>单元格4</td>
            <td>单元格5</td>
        </tr>
        <tr>
            <td colspan="2">单元格6单元格7</td>

            <td>单元格8</td>
            <td>单元格9</td>
            <td>单元格10</td>
        </tr>
        <tr>
            <td>单元格11</td>
            <td>单元格12</td>
            <td>单元格13</td>
            <td>单元格14</td>
            <td rowspan="2">单元格15，20</td>
        </tr>
        <tr>
            <td colspan="2" rowspan="2">单元格16,17,21,22</td>
            
            <td>单元格18</td>
            <td>单元格19</td>
            
        </tr>
        <tr>
            
            
            <td>单元格23</td>
            <td>单元格24</td>
            <td>单元格25</td>
        </tr>
    </table>

</body>
</html>

2. Form表单

2.1 表单介绍

表单在Web网页中用来给用户填写信息，从而采集用户信息，使网页具有交互功能。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。

表单是由容器和控件组成的，一个表单一般应包含用户填写信息的输入框，按钮等，这些输入框、按钮叫做控件，表单就是容器，它能够容纳各种各样的控件。

<form action="url" method="get | post" name="myform"></form>

action 服务器地址
name 表单名称
method中 Get 和 Post 的区别：

数据提交方式，get 提交的数据 url 可以看到，post 看不到；
get 一般用于提交少量数据，post 用来提交大量数据

2.2 表单元素

一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮

<form>

<input type="text">

<input type="submit">

</form>

2.2.1 文本框、密码框

文本域通过<input type="text">标签来设定，当用户要在表单中输入内容时，就会用到文本域

密码字段通过标签<input type="password">来定义，密码字段字符不会明文显示，以星号或圆点代替。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <form>
        用户名：<input type="text" name="name">
        <br>
        密  码：<input type="password" name="pwd">
    </form>

</body>
</html>

2.2.2 提交按钮

<form>

用户名：<input type="text" name="name">

<br>

密码：<input type="password" name="pwd">

<input type="submit" value="登录">

</form>

3. 块元素与行内元素（内联元素）

内联元素和块级元素的区别：

块级元素	内联元素
块元素会在页面中独占一行（自上而下垂直排列）	行内元素不会独占页面中的一行，只占自身大小
可以设置width、height属性	行内元素设置width，height属性无效
一般块元素可以包含行内元素和其他块级元素	一般内联元素包含内联元素不包含块级元素