Web前端开发技术基础（HTML）2

最新推荐文章于 2024-07-23 12:36:06 发布

Amekawa

最新推荐文章于 2024-07-23 12:36:06 发布

阅读量36

点赞数

文章标签：前端 html

本文链接：https://blog.csdn.net/weixin_65152588/article/details/133986032

版权

HTML表格

HTML 表格由 <table> 标签来定义。

HTML 表格是一种用于展示结构化数据的标记语言元素。

每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题。

表格标签

table: 定义表格，生成的表格在一对<table></table>中；
capation：定义表格标题，当表格需要标题时，使用<capation>表格标题</capation>
thead : 定义表格的头部
tbody ：定义表格的主体
tfoot ：定义表格的底部
tr：tr 是 table row 的缩写，表示表格的一行。
td：td 是 table data 的缩写，表示表格的数据单元格。
th：th 是 table header的缩写，表示表格的表头单元格。

以下为一个实例：

<!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 >
        <thead>
          <tr>
            <th>列标题1</th>
            <th>列标题2</th>
            <th>列标题3</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>行1，列1</td>
            <td>行1，列2</td>
            <td>行1，列3</td>
          </tr>
          <tr>
            <td>行2，列1</td>
            <td>行2，列2</td>
            <td>行2，列3</td>
          </tr>
        </tbody>
      </table>
</body>
</html>

运行效果如上，可以看到表格的结构表示不是很清楚，所以我们可以给表格添加border属性来让表格显示一个边框

可以使用<table border="1"></table>的方式来定义，其中数字表示边框的宽度，像素为px

<!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 border="1">
        <thead>
          <tr>
            <th>列标题1</th>
            <th>列标题2</th>
            <th>列标题3</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>行1，列1</td>
            <td>行1，列2</td>
            <td>行1，列3</td>
          </tr>
          <tr>
            <td>行2，列1</td>
            <td>行2，列2</td>
            <td>行2，列3</td>
          </tr>
        </tbody>
      </table>
</body>
</html>

在表格中，我们还可以使用colspan和rowspan来合并单元格

colspan：合并列单元格

rowspan：合并行单元格

定义方式为colspan="2"，其中数字为合并的单元格数

HTML表单

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

在html中，使用<form>标签来定义表单，其中

action="url地址" 数据要传送到的地方
method="提交方式" 有get和post可以选择
name="表单域名称" 定义一个名字

在表单中，每一个表单选项都用<input>表示，类型由type控制

text表示明文文本框，
password表示暗文文本框，
radio表示单选，
checkbox表示复选框，
check = "chcked"表示默认选择，应用于单选和复选
button表示按钮，value表示按钮的名字
reset表示重置按钮
image表示图片
submit表示提交，value表示提交键的名字
date表示日期
email表示邮箱
number表示数字

以下为一个简单实例

<!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 action="/login" method="post">
    <label for="username">Username:</label><br>
    <input type="text" id="username" name="username"><br>
    <label for="password">Password:</label><br>
    <input type="password" id="password" name="password"><br>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

在实例中，创建了一个以post方式提交数据到"/login"地址的表单，在表单中有一些标签和文本框，其中<lable>标签的for属性的作用是在点击lable标签的文字时会自动选中到对应的文本框进行输入。

表单还有更多效果，详见菜鸟教程HTML 表单 | 菜鸟教程 (runoob.com)

Amekawa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Web前端开发技术基础（HTML）2

在实例中，创建了一个以post方式提交数据到"/login"地址的表单，在表单中有一些标签和文本框，其中<lable>标签的for属性的作用是在点击lable标签的文字时会自动选中到对应的文本框进行输入。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题。可以使用<table border="1"></table>的方式来定义，其中数字表示边框的宽度，像素为px。在html中，使用<form>标签来定义表单，其中。
复制链接

扫一扫