HTML是一种用于创建网页的标准标记语言,在HTML中,我们可以使用各种标签来展示数据集合,以下是一些常用的方法:
1、无序列表(ul)和列表项(li)标签:
无序列表标签(ul)用于创建一个无序的列表,列表项标签(li)用于表示列表中的每一项,我们有一个水果名称的数据集合,可以使用以下代码将其展示为一个无序列表:
<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>水果列表</title> </head> <body> <h1>水果列表</h1> <ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li> <li>葡萄</li> </ul> </body> </html>
2、有序列表(ol)和列表项(li)标签:
有序列表标签(ol)用于创建一个有序的列表,列表项标签(li)用于表示列表中的每一项,我们有一个步骤顺序的数据集合,可以使用以下代码将其展示为一个有序列表:
<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>烹饪步骤</title> </head> <body> <h1>烹饪步骤</h1> <ol> <li>准备食材</li> <li>切菜</li> <li>炒菜</li> <li>装盘</li> </ol> </body> </html>
3、表格标签(table):
表格标签用于创建一个表格,其中行标签(tr)、表头标签(th)和单元格标签(td)分别用于表示表格的行、列标题和单元格内容,我们有一个学生成绩的数据集合,可以使用以下代码将其展示为一个表格:
<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>学生成绩表</title> </head> <body> <h1>学生成绩表</h1> <table border="1"> <tr> <th>姓名</th> <th>语文</th> <th>数学</th> <th>英语</th> </tr> <tr> <td>张三</td> <td>90</td> <td>85</td> <td>88</td> </tr> <tr> <td>李四</td> <td>85</td> <td>90</td> <td>82</td> </tr> </table> </body> </html>
4、表单标签(form):
表单标签用于创建一个包含输入框、按钮等元素的表单,用户可以在其中输入数据,我们有一个用户信息的数据集合,可以使用以下代码将其展示为一个表单:
<!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>用户信息表单</title> </head> <body> <h1>用户信息表单</h1> <form action="提交地址" method="post"> <label for="name">姓名:</label><br/> <input type="text" id="name" name="name"><br/> <label for="email">邮箱:</label><br/> <input type="email" id="email" name="email"><br/> <label for="password">密码:</label><br/> <input type="password" id="password" name="password"><br/> <input type="submit" value="提交"> <!提交按钮 > <!重置按钮 > <input type="reset" value="重置"> <!隐藏字段,用于存储CSRF令牌 > <input type="hidden" name="_csrf" value="{{ csrf_token }}"> <!验证码 > {% verbatim %} {{ form.captcha }} {% endverbatim %} <!自定义验证 > {% if form.errors %} {% for field in form %} {% for error in field.errors %} {{ field.label }}: {{ error }} <br/> {% endfor %} {% endfor %} {% endif %} <!更多字段... > <!更多字段... > <!更多字段... > <!更多字段... > <!更多字段... > <!更多字段... > <!更多字段... > <!更多字段... > <!更多字段... > <!更多字段... > <!更多字段... > <!更多字段... > <!更多字段... > <!更多字段... > <!更多字段... > <!更多字段... > <!更多字段... > <!更多字段... > <!更多字段... > <!更多字段... > <!更多字段... > <!更多字段... > <!更多字段... > <!更多字段... > <!更多字段... > <!更多字段... > <!更多字段... > <!更多字段... > <!更多字段... > <!更多字段... > <!更多字段... > <!更多字段... > <!更多字段... > <!更多字段... >
原创文章,作者:酷盾叔,如若转载,请注明出处:https://www.kdun.com/ask/371626.html
本网站发布或转载的文章及图片均来自网络,其原创性以及文中表达的观点和判断不代表本网站。如有问题,请联系客服处理。
发表回复