青岛网站设计皆挺青岛重庆seo排
表格标签基础
| 元素类型 | 用途说明 | 关键属性 |
|---|---|---|
| <table> | 定义表格容器 | |
| <caption> | 表格标题（提升可访问性） | |
| <thead> | 表头区域 | |
| <tbody> | 表格主体内容 | |
| <tfoot> | 表尾汇总数据 | |
| <tr> | 表格行 | |
| <th> | 表头单元格 | scope="col/row" |
| <td> | 普通数据单元格 | colspan/rowspan |
标签实践：
<table><caption>2023年销售数据</caption> <!-- 表格标题 --><thead> <!-- 表头 --><tr><th scope="col">季度</th><th scope="col">销售额</th><th scope="col">增长率</th></tr></thead><tbody> <!-- 表格主体 --><tr><th scope="row">Q1</th><td>¥1,200,000</td><td>+15%</td></tr><tr><th scope="row">Q2</th><td>¥1,800,000</td><td>+25%</td></tr></tbody><tfoot> <!-- 表尾 --><tr><td colspan="2">年度总计</td><td>¥3,000,000</td></tr></tfoot>
</table>
效果展示：
表单标签
| 元素类型 | 用途说明 | 关键属性 |
| <form> | 表单容器 | action/method |
| <label> | 输入项标签 | for="对应id" |
| <input> | 通用输入控件 | type/name/required |
| <select> | 下拉选择框 | name/multiple |
| <button> | 交互按钮 | type="submit/reset/button" |
| <textarea> | 多行文本输入 | rows/cols |
| <fieldset> | 表单分组 | |
| <legend> | 分组标题 |
标签实践：
<form action="" method="get"><label for="">用户名:</label><input type="text"><br><label for="">密码:</label><input type="text"><br><label for="">性别:</label><input type="radio" name="gender" value="male"><label for="">男</label><input type="radio" name="gender" value="female"><label for="">女</label><br><label for="">兴趣</label><input type="radio"><label for="">唱歌</label><input type="radio"><label for="">跳舞</label><input type="radio"><label for="">游泳</label><br><label for="">上传头像:</label><input type="file" name="" id=""><br><input type="submit" value="提交"><input type="submit" value="重置"><input type="submit" value="普通按钮"><input type="image"></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><!-- <style>tr td:first-child{text-align: right;/* 右边对齐 */}/* tr:last-child{text-align: center;} */</style> --></head><body><h4>使用表单</h4><form action="" method="get"><label for="">用户名:</label><input type="text" /><br /><label for="">密码:</label><input type="text" /><br /><label for="">性别:</label><input type="radio" name="gender" value="male" /><label for="">男</label><input type="radio" name="gender" value="female" /><label for="">女</label><br /><label for="">兴趣</label><input type="radio" /><label for="">唱歌</label><input type="radio" /><label for="">跳舞</label><input type="radio" /><label for="">游泳</label><br /><label for="">上传头像:</label><input type="file" name="" id="" /><br /><input type="submit" value="提交" /><input type="submit" value="重置" /><input type="submit" value="普通按钮" /><input type="image" /></form><h4>样例展示(使用表格)</h4><form action="" method="get"><!-- get为默认,get会全部拼接在网页上 --><!-- action为服务器处理地址 --><table><tr><td>用户名:</td><td><input type="text" placeholder="输入用户名" name="name" /></td></tr><tr><td>密码:</td><td><input type="password" placeholder="输入密码" name="key" /></td></tr><tr><td>性别:</td><td><input type="radio" name="sex" id="male" /><label for="male">男</label><input type="radio" name="sex" id="female" /><label for="female">女</label><!-- 设置id,进行绑定,扩大选择范围 --></td></tr><tr><td>兴趣:</td><td><input type="checkbox" />唱歌 <input type="checkbox" />跳舞<input type="checkbox" />游泳</td></tr><tr><td>上传头像:</td><td><input type="file" /></td></tr><tr><td colspan="2"><!-- 两行合并 --><input type="submit" value="提交" /><input type="reset" value="重置" /><input type="button" value="普通按钮" /><input type="image" /></td><!-- <td></td> --></tr></table></form></body>
</html>
