367 lines
10 KiB
Markdown
367 lines
10 KiB
Markdown
# table标签的使用
|
||
|
||
## 需求
|
||
|
||
- 在网页中表格是经常见到的数据呈现形式
|
||
- 在网页中获取用户的输入也是经常会使用的
|
||
- 本次的任务就是大家通过自学的方式掌握`table`标签和`input` 标签的使用
|
||
- **最终完成一个信息收集网页的开发**
|
||
|
||
## 参考代码
|
||
|
||
- 效果
|
||
|
||
|
||
|
||
- 代码
|
||
|
||
```html
|
||
<!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>
|
||
```
|
||
|
||
|
||
|
||
><span style="color: red; background: yellow; padding: 2px 5px; font-size: 22px;">作业12.1提交的内容</span>
|
||
>
|
||
>- 学习表格和表单，理解程序的运行逻辑
|
||
>- 程序运行成功的截图，单独发送给组长
|
||
|
||
# 表格
|
||
|
||
## 表格基本结构
|
||
|
||
一个基本的HTML表格由以下元素组成：
|
||
|
||
- `<table>`：定义表格的开始。
|
||
- `<tr>`：定义表格中的行。
|
||
- `<td>`：定义表格中的单元格。
|
||
|
||
```html
|
||
<!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>
|
||
```
|
||
|
||
效果如下
|
||
|
||
|
||
|
||
## 表格的属性
|
||
|
||
- 宽度：width
|
||
- 高度：height
|
||
- 边框：border
|
||
- 边框颜色：bordercolor
|
||
- 背景颜色：bgcolor
|
||
- 水平对齐：align=“left或right或center”
|
||
- cellspacing=“单元格与单元格之间的间距”
|
||
- cellpadding=“单元格与内容之间的空隙”
|
||
|
||
为了显示表格的框线，可以在`table`标签中加入如下属性
|
||
|
||
```html
|
||
<table border="1px">
|
||
```
|
||
|
||
效果如下
|
||
|
||
|
||
|
||
去除表格和单元格之间的空隙
|
||
|
||
```html
|
||
<table border="1px" cellspacing="0">
|
||
```
|
||
|
||
效果如下
|
||
|
||
|
||
|
||
使表格水平居中
|
||
|
||
```html
|
||
<table border="1px" cellspacing="0" align="center">
|
||
```
|
||
|
||
效果如下
|
||
|
||
|
||
|
||
## 行的属性
|
||
|
||
- 高度 height
|
||
|
||
- 背景颜色 bgcolor
|
||
|
||
- 文字水平对齐 align=“left 或 right 或 center”
|
||
|
||
- 文字垂直对齐 valign=“top 或 middle 或 bottom”
|
||
|
||
- 调整表格的行样式，修改第一行的背景色，并且设置文字水平对齐
|
||
|
||
```html
|
||
<tr height="30px" bgcolor="skyblue" align="center">
|
||
```
|
||
|
||
效果如下
|
||
|
||
|
||
|
||
## 列的属性
|
||
|
||
- 宽度 width
|
||
- 高度 height
|
||
- 背景颜色 bgcolor
|
||
- 文字水平对齐 align=“left或right或center”
|
||
- 文字垂直对齐 valign=“top或middle或bottom”
|
||
|
||
- 调整表格的样式，将列的宽度进行适当的调整，注意！列的宽度只需要改动第一列即可。
|
||
|
||
```html
|
||
<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>
|
||
```
|
||
|
||
效果如下
|
||
|
||
|
||
|
||
# 输入标签
|
||
|
||
`<input>`：输入标签用于接收用户输入。
|
||
|
||
```html
|
||
<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 中讲到）。
|
||
|
||
**举例**：
|
||
|
||
```html
|
||
<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>
|
||
```
|
||
|
||
效果：
|
||
|
||
|
||
|
||
注意，多个个单选框的input标签中，name 的属性值可以相同，但是 **id 的属性值必须是唯一的**。我们知道，html的标签中，id的属性值是唯一的。
|
||
|
||
**四种按钮的举例**：
|
||
|
||
```html
|
||
<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>
|
||
```
|
||
|
||
效果如下
|
||
|
||
|
||
|
||
`<datalist>` 数据列表
|
||
|
||
```html
|
||
<input type="text" list="myData">
|
||
<datalist id="myData">
|
||
<option>本科</option>
|
||
<option>研究生</option>
|
||
<option>不明</option>
|
||
</datalist>
|
||
```
|
||
|
||
上方代码中，input里的list属性和 datalist 进行了绑定。
|
||
|
||
效果
|
||
|
||
|
||
|
||
### `<select>`：下拉列表标签
|
||
|
||
`<select>`标签里面的每一项用`<option>`表示。select就是“选择”，option“选项”。
|
||
|
||
select标签和ul、ol、dl一样，都是组标签。
|
||
|
||
**`<select>`标签的属性：**
|
||
|
||
- `multiple`：可以对下拉列表中的选项进行多选。属性值为 multiple，也可以没有属性值。也就是说，既可以写成 `multiple=""`，也可以写成`multiple="multiple"`。
|
||
- `size="3"`：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。
|
||
|
||
**`<option>`标签的属性：**
|
||
|
||
- `selected`：预选中。没有属性值。
|
||
|
||
举例：
|
||
|
||
```html
|
||
<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>
|
||
```
|
||
|
||
效果：
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|