表格标签
表格的基础语法
<table>
<tr>
<th>姓名</t>
<th>性别</t>
<th>年龄</t>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>20</td>
</tr>
</table>
实际效果:
姓名 | 性别 | 年龄 |
---|---|---|
张三 | 男 | 18 |
李四 | 女 | 20 |
<table></table>
是用于定义表格的标签。<tr></tr>
标签用于定义表格中的行,必须嵌套在<table></table>
标签中。<td></td>
用于定义表格中的单元格,必须嵌套在<tr></tr>
标签中。- 字母td指表格数据(tabledata),即数据单元格的内容。
<th>
标签表示HTML表格的表头部分(tablehead的缩写),其中的内容会加粗居中显示.
表格的额外属性
了解即可,后期使用CSS操控表格属性较多.
属性名 | 属性值 | 描述 |
---|---|---|
align | left、center、right | 规定表格相对周围元素的对齐方式。 |
border | 1或 "" | 规定表格单元是否拥有边框,默认为"",表示没有边框 |
cellpadding | 像素值 | 规定单元边沿与其内容之间的空白,默认1像素。 |
cellspacing | 像素值 | 规定单元格之间的空白,默认2像素。 |
width | 像素值或百分比 | 规定表格的宽度。 |
表格结构标签
分别用:<thead>
标签表格的头部区域、<tbody>
标签表格的主体区域.这样可以更好的分清表
格结构。没有实际意义,和div类似,只是起到一个方便阅读的作用.
合并单元格
合并单元格方式:
- 跨行合并:rowspan="合并单元格的个数"
- 跨列合并:colspan="合并单元格的个数”
- 先确定是跨行还是跨列合并。
- 找到目标单元格.写上合并方式=合并的单元格数量。比如:
<td colspan=“2”></td>
删除多余的单元格。
<table> <tr> <th>111</th> <th colspan="2">222</th> </tr> <td rowspan="2">444</td> <td>555</td> <td>666</td> </tr> <tr> <td> 888 </td> <td> 999 </td> </tr> </table>
实际效果:
111 222 444 555 666 888 999
列表标签
列表最大的特点就是整齐、整洁、有序,它作为布局会更加自由和方便。
无序列表
<!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>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</body>
</html>
实际效果:
- 列表1
- 列表2
- 列表3
- 无序列表的各个列表项之间没有顺序级别之分,是并列的。
<ul></ul>
中只能嵌套<li></li>
,直接在<ul></ul>
标签中输入其他标签或者文字的做法是不被允许的。<li>
与</li>
之间相当于一个容器,可以容纳所有元素。- 无序列表会带有自己的样式属性,但在实际使用时我们会使用CSS来设置。
有序列表
<!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>
<li>第一点</li>
<li>第二点</li>
<li>第三点</li>
</ol>
</body>
</html>
实际效果:
- 第一点
- 第二点
- 第三点
1.<ol></ol>
中只能嵌套
,直接在
2.
<li>
与</li>
之间相当于一个容器,可以容纳所有元素。3.有序列表会带有自己样式属性,但在实际使用时,我们会使用CSS来设置。
自定义列表
<!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>关注我们</dt>
<dd>QQ</dd>
<dd>WeChat</dd>
<dd>Email</dd>
</dl>
</body>
</html>
实际效果:
- 关注我们
1.<dl></dl>
里面只能包含<dt>
和<dd>
。
2.<dt>
和<dd>
个数没有限制,经常是一个<dt>
对应多个<dd>
。
表单标签
表单目的是为了收集用户信息。一个完整的表单通常由表单域、表单控件(也称为表单元素)和提示信息3个部分构成。
表单域
在HTML标签中,<form>
标签用于定义表单域,以实现用户信息的收集和传递。<form>
会把它范围内的表单元素信息提交给服务器
<!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="demo.php" method="POST" name="nmame1"></form>
</body>
</html>
常用属性:
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 |
method | get/post | 用于设置表单数据的提交方式,其取值为get或post。 |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单域。 |
表单元素
input表单元素
表单元素中<input>
标签用于收集用户信息<input type="属性值">
属性值 | 描述 |
---|---|
button | 定义可点击按钮(多数情况下,用于通过JavaScript启动脚本) |
checkbox | 定义复选框。 |
file | 定义输入字段和“浏览"按钮,供文件上传。 |
hidden | 定义隐藏的输入字段。 |
image | 定义图像形式的提交按钮。 |
password | 定义密码字段。该字段中的字符被掩码。 |
radio | 定义单选按钮。 |
reset | 定义重置按钮。重置按钮会清除表单中的所有数据。 |
submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。 |
text | 定义单行的输入字段,用户可在其中输入文本。默认宽度为20个字符。 |
input除了type还有一些其他字段:
属性 | 属性值 | 描述 |
---|---|---|
name | 由用户自定义 | 定义input元素的名称。 |
value | 由用户自定义 | 规定input元素的值。 |
checked | checked | 规定此input元素首次加载时应当被选中。 |
maxlength | 正整数 | 规定输入字段中的字符的最大长度。 |
- name和value是每个表单元素都有的属性值主要给后台人员使用
- name表单元素的名字,要求单选按钮和复选框要有相同的name值
- checked属性主要针对于单选按钮和复选框,主要作用一打开页面,就要可以默认选中某个表单元素.
- maxlength是用户可以在表单元素输入的最大字符数,一般较少使用
<!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>
<!-- radio 单选按钮 可以实现多选一 -->
<!-- name是表单元素的名字,单选按钮必须有相同的名字 -->
性别:男 <input type="radio" name="sex" />女<input
type="radio"
name="sex"
/>
<br />
<!-- checkbox 复选框 可以实现多选 -->
爱好:吃饭<input type="checkbox" />睡觉<input
type="checkbox"
/>打游戏<input type="checkbox" />
</form>
</body>
</html>
label标签
<label>
标签为input元素定义标注(标签)。<label>
标签用于绑定一个表单元素,当点击<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>
<form>
性别: <label for="man">男</label>
<input type="radio" name="sex" id="man" />
<label for="woman">女</label>
<input type="radio" name="sex" id="woman" />
</form>
</body>
</html>
核心:
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>
<form>
籍贯:
<select>
<option>山东</option>
<option>河南</option>
<option selected="selected">上海</option>
<option >广东</option>
</select>
</form>
</body>
</html>
<select>
中至少包含一对<option>
。- 在
<option>
中定义selected=”selected”时,当前项即为默认选中项。
textarea标签
使用场景:当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用<textarea>
标签。
在表单元素中,<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>
<form>
今日反馈:
<textarea cols="50" ,rows="5">
今天是个好天气
</textarea
>
</form>
</body>
</html>
- 通过
<textarea>
标签可以轻松地创建多行文本输入框。 - cols=“每行中的字符数”,rows=“显示的行数”,我们在实际开发中不会使用,都是用CSS来改变大小。