aaronxu/python-flask
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f1c53c39c9f25d48b7897a112f829b1c4c984fd0
python-flask/project12/02.[任务书]table标签的使用.md
Aaron 91603b6d22 first commit
2025-09-11 16:13:52 +08:00

10 KiB
Raw Blame History

table标签的使用

需求

  • 在网页中表格是经常见到的数据呈现形式
  • 在网页中获取用户的输入也是经常会使用的
  • 本次的任务就是大家通过自学的方式掌握table标签和input 标签的使用
  • 最终完成一个信息收集网页的开发

参考代码

  • 效果

image-20241217165806798

  • 代码
<!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>
    <center>
        <h1>大学生信息收集</h1>
    </center>
    <table border="1px" cellspacing="0" cellpadding="0" align="center">
        <tr height="50px" align="center">
            <td width="100px">姓名</td>
            <td width="150px"><input type="text"></td>
            <td width="100px">性别</td>
            <td width="150px"><input type="text"></td>
            <td width="100px" rowspan="2">照片</td>
        </tr>
        <tr height="50px" align="center">
            <td width="100px">年级</td>
            <td width="150px"><input type="text"></td>
            <td width="100px">专业</td>
            <td width="150px"><input type="text"></td>
        </tr>
        <tr height="50px" align="center">
            <td>手机号码</td>
            <td colspan="4"><input type="text"></td>
        </tr>
        <tr height="50px" align="center">
            <td>联系地址</td>
            <td colspan="4"><input type="text"></td>
        </tr>
        <tr align="center">
            <td colspan="5"><input type="submit"></td>
        </tr>
    </table>
</body>

</html>

作业12.1提交的内容

  • 学习表格和表单，理解程序的运行逻辑
  • 程序运行成功的截图，单独发送给组长

表格

表格基本结构

一个基本的HTML表格由以下元素组成：

  • <table>：定义表格的开始。
  • <tr>：定义表格中的行。
  • <td>：定义表格中的单元格。
<!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>
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>爱好</td>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>男</td>
            <td>看书</td>
        </tr>
    </table>
</body>
</html>

效果如下

image-20241217154445212

表格的属性

  • 宽度：width
  • 高度：height
  • 边框：border
  • 边框颜色：bordercolor
  • 背景颜色：bgcolor
  • 水平对齐：align=“left或right或center”
  • cellspacing=“单元格与单元格之间的间距”
  • cellpadding=“单元格与内容之间的空隙”

为了显示表格的框线，可以在table标签中加入如下属性

<table border="1px">

效果如下

image-20241217155117054

去除表格和单元格之间的空隙

<table border="1px" cellspacing="0">

效果如下

image-20241217155423128

使表格水平居中

<table border="1px" cellspacing="0" align="center">

效果如下

image-20241217155606535

行的属性

  • 高度 height

  • 背景颜色 bgcolor

  • 文字水平对齐 align=“left 或 right 或 center”

  • 文字垂直对齐 valign=“top 或 middle 或 bottom”

  • 调整表格的行样式，修改第一行的背景色，并且设置文字水平对齐

<tr height="30px" bgcolor="skyblue" align="center">

效果如下

image-20241217160036271

列的属性

  • 宽度 width

  • 高度 height

  • 背景颜色 bgcolor

  • 文字水平对齐 align=“left或right或center”

  • 文字垂直对齐 valign=“top或middle或bottom”

  • 调整表格的样式，将列的宽度进行适当的调整，注意！列的宽度只需要改动第一列即可。

<table border="1px" cellspacing="0" align="center">
    <tr height="30px" bgcolor="skyblue" align="center">
        <td width="50px">序号</td>
        <td width="100px">姓名</td>
        <td width="100px">性别</td>
        <td width="100px">爱好</td>
    </tr>
    <tr align="center">
        <td>1</td>
        <td>张三</td>
        <td>男</td>
        <td>看书</td>
    </tr>
</table>

效果如下

image-20241217160630428

输入标签

<input>：输入标签用于接收用户输入。

<input type="text" value="内容" >

属性：

  • type="属性值"：文本类型。属性值可以是：

    • text（默认）
    • password：密码类型
    • radio：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。 ）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。
    • checkbox：多选按钮，name 属性值相同的按钮作为一组进行选择。
    • checked：将单选按钮或多选按钮默认处于选中状态。当<input>标签设置为type="radio"或者type=checkbox时，可以用这个属性。属性值也是checked，可以省略。
    • hidden：隐藏框，在表单中包含不希望用户看见的信息
    • button：普通按钮，结合js代码进行使用。
    • submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。
    • reset：重置按钮，清空当前表单的内容，并设置为最初的默认值
    • image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。
    • file：文件选择框。 提示：如果要限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。

  • value="内容"：文本框里的默认内容（已经被填好了的）

  • size="50"：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。 注意size属性值的单位不是像素哦。

  • readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。 用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。

  • disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写。

备注：HTML5中，input的类型又增加了很多（比如date、color，我们会在 html5 中讲到）。

举例：

<form>
    姓名：<input value="张三"><br>
    昵称：<input value="三三" readonly=""><br>
    名字：<input type="text" value="name" disabled=""><br>
    密码：<input type="password" value="pwd" size="50"><br>
    性别：
    <input type="radio" name="gender" id="radio1" value="male" checked="">男
    <input type="radio" name="gender" id="radio2" value="female">女<br>
    爱好：
    <input type="checkbox" name="love" value="eat">吃饭
    <input type="checkbox" name="love" value="sleep">睡觉
    <input type="checkbox" name="love" value="bat">看书
</form>

效果：

image-20241217161358523

注意，多个个单选框的input标签中，name 的属性值可以相同，但是 id 的属性值必须是唯一的。我们知道，html的标签中，id的属性值是唯一的。

四种按钮的举例：

<form>
    <input type="button" value="普通按钮"><br>
    <input type="submit" value="提交按钮"><br>
    <input type="reset" value="重置按钮"><br>
    <input type="image" value="图片按钮1"><br>
    <input type="image" src="images/1.jpeg" width="300" value="图片按钮2"><br>
    <input type="file" value="文件选择框">
</form>

效果如下

image-20241217161534542

<datalist> 数据列表

<input type="text" list="myData">
<datalist id="myData">
    <option>本科</option>
    <option>研究生</option>
    <option>不明</option>
</datalist>

上方代码中，input里的list属性和 datalist 进行了绑定。

效果

image-20241217165115882

<select>：下拉列表标签

<select>标签里面的每一项用<option>表示。select就是“选择”，option“选项”。

select标签和ul、ol、dl一样，都是组标签。

<select>标签的属性：

  • multiple：可以对下拉列表中的选项进行多选。属性值为 multiple，也可以没有属性值。也就是说，既可以写成 multiple=""，也可以写成multiple="multiple"。
  • size="3"：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。

<option>标签的属性：

  • selected：预选中。没有属性值。

举例：

<form>
  <select>
    <option>小学</option>
    <option>初中</option>
    <option>高中</option>
    <option>大学</option>
    <option selected="">研究生</option>
  </select>
  <br><br><br>

  <select size="3">
    <option>小学</option>
    <option>初中</option>
    <option>高中</option>
    <option>大学</option>
    <option>研究生</option>
  </select>
  <br><br><br>

  <select multiple="">
    <option>小学</option>
    <option>初中</option>
    <option selected="">高中</option>
    <option selected="">大学</option>
    <option>研究生</option>
  </select>
  <br><br><br>

</form>

效果：

image-20241217164803505