【前端基础】摩天之建的艺术：html（下）

澪贰

发布于 2025-06-22 08:13:25

2550

文章被收录于专栏：学习学习

接上一篇，继续学习剩下的 html 知识点

1.表格标签

1.1 基本使用

✏️举个例子：

<!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>
    <table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500">
        <thead>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </thead>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>20</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>19</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>女</td>
            <td>23</td>
        </tr>
    </table>
</body>
</html>

table 标签：表示整个表格
tr：表示表格的一行
td：表示一个单元格
th：表示表头单元格. 会居中加粗
thead：表格的头部区域(注意和 th 区分，范围是比 th 要大的)
tbody：表格得到主体区域

table 包含 tr，tr 包含 td 或者 th

表格标签有一些属性，可以用于设置大小边框等，但是一般使用 css 方式来设置这些属性都要放到 table 标签中

align 是表格相对于周围元素的对齐方式，align="center" (不是内部元素的对齐方式)
border 表示边框，1 表示有边框(数字越大，边框越粗)，" " 表示没边框
cellpadding：内容距离边框的距离，默认 1 像素
cellspacing：单元格之间的距离，默认为 2 像素
width / height：设置尺寸

注意，这几个属性，vscode 都提示不出来

🔥值得注意的是：

SHIFT + ALT + ↓ 可以快速复制某一行

✏️展示效果：

1.2 合并单元格

✏️举个例子：

<!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>
    <table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500">
        <thead>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </thead>
        <tr>
            <td>张三</td>
            <td rowspan="2">男</td>
            <td>20</td>
        </tr>
        <tr>
            <td>李四</td>
            <!-- <td>男</td> -->
            <td>19</td>
        </tr>
        <tr>
            <td colspan="2">王五 / 女</td>
            <!-- <td>女</td> -->
            <td>23</td>
        </tr>
    </table>
</body>
</html>

跨行合并： rowspan="n"
跨列合并： colspan="n"

跨行是向下合并，跨列是向左合并，注意注释掉别的单元格，避免排版错误

✏️展示效果：

2.列表标签

2.1 无序列表

<!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>
    <ul>
        <li type="disc">小猫</li>
        <li type="square">小兔</li>
        <li type="circle">小狗</li>
    </ul>
</body>
</html>

ul 表示无序列表（unorder_list），li 表示每一行列表

每行列表前的样式可以自行选择：

disc 表示实心圆（默认）
square 表示实心正方形
circle 表示空心圆

🔥值得注意的是：

对于所有列表都可以使用比如：ul>li*3 的方式快速生成列表

✏️展示效果：

2.2 有序列表

✏️举个例子：

<!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>
    <ol type="1">
        <li>小猫</li>
        <li>小兔</li>
        <li>小狗</li>
    </ol>

    <ol type="A">
        <li>小猫</li>
        <li>小兔</li>
        <li>小狗</li>
    </ol>

    <ol type="a">
        <li>小猫</li>
        <li>小兔</li>
        <li>小狗</li>
    </ol>

    <ol type="i">
        <li>小猫</li>
        <li>小兔</li>
        <li>小狗</li>
    </ol>

    <ol type="I">
        <li>小猫</li>
        <li>小兔</li>
        <li>小狗</li>
    </ol>
</body>
</html>

ol 表示有序列表（order_list），li 表示每一行列表

每行列表前的样式可以自行选择：

1 表示数字编号（默认）
A 表示大写英文字母编号
a 表示小写英文字母编号
i 表示小写罗马数字编号
I 表示大写罗马数字编号

✏️展示效果：

2.3 自定义列表

✏️举个例子：

<!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>
    <dl>
        <dt> 这是标题
            <dd>内容1</dd>
            <dd>内容2</dd>
            <dd>内容3</dd>
        </dt>
    </dl>
</body>
</html>

dl 表示自定义列表，dt 表示列表的标题，dd 表示列表内容

🔥值得注意的是：

元素之间是并列关系
ul/ol 中只能放 li 不能放其他标签，dl 中只能放 dt 和 dd
li 中可以放其他标签
列表带有自己的样式，可以使用 css 来修改(例如前面的小圆点都会去掉)

✏️展示效果：

3.表单标签

比如在输入账号密码的框框部分，就是一种表单标签，会与后端进行数据交互

分成两个部分:

表单域：包含表单元素的区域，重点是 form 标签
表单控件：输入框，提交按钮等，重点是 input 标签

3.1 form标签

<form action="test.html">
   ... [form 的内容]
</form>

描述了要把数据按照什么方式，提交到哪个页面中，一系列实现都是在这个标签域里，action 后面接的是后端服务器的接收地址

3.2 input标签

文本框

<input type="text">

密码框

<input type="password">

单选框

性别: 
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女

单选框之间必须具备相同的 name 属性，才能实现多选一效果，checked 表示默认选择

复选框

爱好:
<input type="checkbox">吃饭 
<input type="checkbox">睡觉 
<input type="checkbox">打游戏

普通按钮

<input type="button" value="我是个按钮" onclick="alert('hello')">

onclick="alert('hello')" 属于 js 的范畴，后面会学习的

提交按钮

<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>

提交按钮必须放到 form 标签内，点击后就会尝试给服务器发送

清空按钮

<form action="test.html">
    <input type="text" name="username">
    <input type="submit" value="提交">
    <input type="reset" value="清空">
</form>

选择文件

<input type="file">

点击选择文件，会弹出对话框，选择文件

3.3 label标签

✏️举个例子：

<!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>
    <input type="radio" name="sex" id="male">
    <label for="male">男</label>
    <input type="radio" name="sex" id="female" checked="checked">
    <label for="female">女</label>
</body>
</html>

搭配 input 使用，点击文字也能选中对应的单选/复选框，能够提升用户体验

for 属性指定当前 label 和哪个相同 id 的 input 标签对应(此时点击才是有用的)

✏️展示效果：

3.4 select标签

✏️举个例子：

<!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>
<select>
    <option>北京</option>
    <option>广州</option>
    <option>深圳</option>
    <option selected="selected">上海</option>
</select>
</body>
</html>

select 表示下拉菜单，option 表示选项

option 中定义 selected="selected" 表示默认选中

✏️展示效果：

3.5 textarea标签

✏️举个例子：

<!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>
    <textarea rows="10" cols="50">
</textarea>
</body>
</html>

textarea 标签表示一个文本域

rows="10"：设置文本区域的可见行数为 10 行
cols="50"：设置文本区域的可见字符宽度为 50 个字符

🔥值得注意的是：

rows 和 cols 一般不会直接使用，都是用 css 来改的

✏️展示效果：

4.无语义标签

✏️举个例子：

<!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>
    <div>
        <span>咬人猫</span>
        <span>咬人猫</span>
        <span>咬人猫</span>
    </div>
    <div>
        <span>兔总裁</span>
    <span>兔总裁</span>
    <span>兔总裁</span>
    </div>
    <div>
        <span>阿叶君</span>
        <span>阿叶君</span>
        <span>阿叶君</span>
    </div>
</textarea>
</body>
</html>

就是两个盒子，方便用于网页布局