HTML+CSS基础——基础标签(表格标签(table、tr、td、th等等))

<html>
  <head>
	<title>Tables</title>
  </head>
  <body>
	<table>
		<thead>
		  <tr>
			<th></th>
			<th scop="col">Home starter hosting</th>
			<th scop="col">Premium business hosting</th>
		  </tr>
		</thead>
		<tbody>
		  <tr>
			<th scope="row">Disk space</th>
			<td>250mb</td>
			<td>1gb</td>
		  </tr>
		  <tr>
			<th scope="row">BandWidth</th>
			<td>5gb per month</td>
			<td>50gb per month</td>
		  </tr>
		<!-- more rows like the two above here  -->
		</tbody>
		<tfoot>
		  <tr>
			<td></td>
			<td colspan="2">Sign up now and save 10%!</td>
		  </tr>
		</tfoot>
	</table>
  </body>
</html>

这是一个包含表格的简单网页。该表格列出了两种不同的主机方案(Home starter hosting和Premium business hosting)以及它们的一些特点。

表格的第一行是表头,包括三列,分别是空白列、Home starter hosting和Premium business hosting。

接下来的行是表格的主体部分,每一行代表一种特点。第一行表示磁盘空间(Disk space),Home starter hosting拥有250MB的磁盘空间,而Premium business hosting拥有1GB的磁盘空间。第二行表示带宽(BandWidth),Home starter hosting每月有5GB的带宽限制,而Premium business hosting每月有50GB的带宽限制。

最后,表格的页脚部分包含一行,其中包含一个单元格(跨越两列)显示"Sign up now and save 10%!"。

 

第一段代码:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
  </head>
  <body>
    <h1>Welcome to my website!</h1>
    <p>Here are some of my favorite things:</p>

这一段代码包含了一个HTML的基本结构模板,即包含了一对<html>标签,并在其中包含了<head><body>标签。在<head>标签中,使用了<meta>标签设置了网页窗口的视口大小,并设置了一个网页标题。在<body>标签中,使用了<h1>标签和<p>标签来显示欢迎语和一些描述性文本。

第二段代码:

    <ul>
      <li>Cats</li>
      <li>Pizza</li>
      <li>Beaches</li>
    </ul>

这一段代码包含了一个无序列表(unordered list),使用<ul><li>标签来列举一些喜爱的事物。

第三段代码:

    <h2>My Education</h2>
    <ol>
      <li>Bachelor's degree in Computer Science</li>
      <li>Master's degree in Information Technology</li>
    </ol>

这一段代码使用了<h2>标签来声明一个标题,随后又使用了一个有序列表(ordered list),使用<ol><li>标签来列举作者的学历信息。

第四段代码:

    <h2>Contact Me</h2>
    <form>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name"><br><br>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email"><br><br>
      <label for="message">Message:</label>
      <textarea id="message" name="message"></textarea><br><br>
      <input type="submit" value="Send">
    </form>

这一段代码使用了<h2>标签来声明另一个标题,并构建了一个包含表单(form)的段落。这个表单包含了输入框(input)、多行输入框(textarea)和一个发送按钮,用户可以通过填写和提交表单与作者联系。

 

 

在接下来的部分,我们有两行数据行:

最后,在表格的页脚部分,我们有一个包含一个单元格的行:

  1. <html>:HTML文档的根元素,用于表示整个网页。
  2. <head>:文档头部的容器标签,用于包含与文档相关的元数据,如标题和样式表。
  3. <title>:定义网页的标题,在浏览器的标题栏中显示。
  4. <body>:文档的主体部分,包含实际显示在浏览器中的内容。
  5. <table>:用于创建表格的标签。
  6. <thead>:表格的头部部分,包含表格的标题行。
  7. <tr>:表格的行。
  8. <th>:表格的表头单元格。
  9. <td>:表格的数据单元格。
  10. <tbody>:表格的主体部分,包含表格的数据行。
  11. <tfoot>:表格的页脚部分,包含在表格底部显示的内容。
  12. colspan:在表格的单元格中使用,用于指定单元格横跨的列数。
  13. <th scop="col">Home starter hosting</th>:这是一个表头单元格,它的scope属性设置为"col",表示它是列的标题。它显示了"Home starter hosting"文本。
  14. <th scop="col">Premium business hosting</th>:这也是一个表头单元格,与前一个单元格类似,也是列的标题。它显示了"Premium business hosting"文本。
  15. <th scope="row">Disk space</th>:这是一个数据单元格,它的scope属性设置为"row",表示它是行的标题。它显示了"Disk space"文本。

  16. <td>250mb</td>:这是一个数据单元格,包含了"250mb"文本,表示Home starter hosting的磁盘空间。

  17. <td>1gb</td>:这也是一个数据单元格,包含了"1gb"文本,表示Premium business hosting的磁盘空间。

  18. <th scope="row">BandWidth</th>:这是另一个数据单元格,它显示了"BandWidth"文本。

  19. <td>5gb per month</td>:这是一个数据单元格,包含了"5gb per month"文本,表示Home starter hosting的带宽。

  20. <td>50gb per month</td>:这也是一个数据单元格,包含了"50gb per month"文本,表示Premium business hosting的带宽。

  21. <td colspan="2">Sign up now and save 10%!</td>:这个单元格横跨了两列,它显示了"Sign up now and save 10%!"文本。

 

 

  • 26
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,您可以按照以下步骤来实现: 1. 安装 Flask 库 使用以下命令安装 Flask 库: ``` pip install flask ``` 2. 创建 Flask 应用程序 在您的项目文件夹中创建一个名为 `app.py` 的文件,并添加以下代码: ```python from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') if __name__ == '__main__': app.run(debug=True) ``` 这将创建一个基本的 Flask 应用程序,并在根目录下创建一个名为 `templates` 的文件夹来存储 HTML 模板。 3. 创建 HTML 模板 在 `templates` 文件夹中创建一个名为 `index.html` 的文件,并添加以下代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格</title> <link rel="stylesheet" href="{{ url_for('static',filename='style.css') }}"> </head> <body> <h1>表格</h1> <table> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> <tr> <td>张三</td> <td>20</td> <td>男</td> </tr> <tr> <td>李四</td> <td>21</td> <td>女</td> </tr> <tr> <td>王五</td> <td>22</td> <td>男</td> </tr> </table> </body> </html> ``` 这将创建一个基本的 HTML 模板,并渲染一个表格。 4. 创建 CSS 文件 在您的项目文件夹中创建一个名为 `static` 的文件夹,并创建一个名为 `style.css` 的文件,并添加以下代码: ```css table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; text-align: center; } ``` 这将为表格添加样式。 5. 运行应用程序 在终端中运行以下命令: ``` python app.py ``` 然后在浏览器中访问 `http://localhost:5000/`,您将看到渲染的表格。 希望这可以帮助您实现您的需求,如果您有任何问题或疑问,请随时联系我。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

张謹礧

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值