Bootstrap

HTML进阶:表格、表单与布局基础

在掌握了HTML的基础知识之后,接下来我们将探索一些进阶内容,包括如何使用HTML创建表格、表单以及进行基本的网页布局。

1. 表格(Tables)

表格是HTML中用于展示数据的一种结构。它非常适合展示行列数据,如员工信息、产品列表等。

 

html复制代码

<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
<tr>
<td>张三</td>
<td>30</td>
<td>软件工程师</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>UI设计师</td>
</tr>
</table>
  • <table>标签定义表格。
  • <tr>(table row)定义表格行。
  • <th>(table header)定义表头单元格,通常包含标题。
  • <td>(table data)定义表格标准单元格,用于显示数据。
2. 表单(Forms)

表单是网页上用于收集用户输入(如文本、密码、选择项等)的部分。表单数据可以提交到服务器进行处理。

 

html复制代码

<form action="/submit-form" method="post">
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<input type="submit" value="提交">
</form>
;