20

如果您一直在学习我们的HTML教程系列,那么您将熟悉如何创建具有标题、标题和段落的基本HTML页面。你也会对列表、链接和图片有一个基本的了解。在我们的第二个教程结束时,你的文档在notepad++应该显示如下:

HTML教程

在下一篇教程中,您将向代码中添加在HTML中设置表和表单的内容。

HTML表

表格是组织网页内容,特别是文本的一种有用的方式。

表是用

标记定义的。
表中的每一行都用

标记定义。
表标题是用

标记定义的。(标题默认是粗体和居中的。)
表中的每个数据单元格都用

标记定义。
基本表:通过在文档的“有序列表”代码下添加以下代码,为页面设置一个包含三个标题的表。这是一个真实的例子,列出了每周的课程安排。

标签将构成该表中的列, 标签将构成行。
当您刷新您的页面时,表将显示如下:

要向表格添加边框并对齐文本,需要使用CSS属性。

为了使我们的示例更加直观,我们在表中添加了CSS border属性:border= ” 1 “。在以后的教程中,您将能够学习更多关于CSS属性以及如何使用它们的知识。

HTML教程教程

标题:您还可以使用

标签向表添加标题,告诉用户内容是关于什么的。(例如,“课程时间表”或“客户详细信息”。)这个标签位于标签和第一个标签之间。
当你刷新页面时,你会看到你的标题出现在表格标题上面:

HTML教程

可以使用HTML代码创建包含跨多列或多行单元格的表。

多列:要使一个单元格跨越多个列,我们必须使用colspan属性。(请记住,我们使用属性来提供关于特定HTML元素的额外信息。)

列的数量必须出现在引号之间。“2”。

例如,假设我们想要调整这个课程时间表,显示同样的上午9点的讲座在周一和周二同时进行。通过向“9AM Lecture”单元格添加colspan属性并删除“Study Break”单元格来编辑表。

HTML教程

刷新时,表的外观将发生变化,“9AM Lecture”单元格跨越周一和周二列。

HTML教程

多行:要使单元格跨越多个行,请使用rowspan属性。同样,行数必须出现在引号之间。这在有两行属于一个标题的情况下非常有用。

要更改“Tuesday”标题,使其跨越两行,可以通过添加rowspan属性来编辑表。

HTML教程

当您刷新时,“Tuesday”单元格将跨越两行。

HTML教程

HTML表单

表单允许站点上的用户输入信息。您将需要使用
标记来定义一个用于收集用户输入的表单。

HTML表单包含表单元素,这些元素是各种类型的输入元素,包括文本字段、复选框、单选按钮和提交按钮。

在表格上面添加开始和结束标签:

现在,在刷新后的页面上,您将为表单留出空间:

HTML教程

元素是所有表单元素中最重要的。根据使用的类型属性,可以以多种方式显示它。

文本字段:在表单中添加如下属性,要求用户输入他们的姓名和电子邮件地址。
标记添加了一个换行符,允许您在新行上显示文本。输入类型和名称必须出现在引号内。

HTML教程

现在输入字段将出现在页面的表单中。

单选按钮:单选按钮是一个图形图标,表示一组选项中的一个。用户一次只能选择一个选项。

您还需要使用value属性,该属性指定元素的值。同样,输入类型和名称必须出现在引号内。

更新后的页面将显示三个可单击的单选按钮。

HTML教程

提交按钮:该按钮允许用户向表单处理程序提交表单数据;处理数据的服务器页面。

表单处理程序通常是带有处理输入数据脚本的服务器页面。

表单处理程序是使用action属性指定的。此属性定义提交表单时将执行的操作。在本例中,为” /action_page。php “将包含一个处理表单数据的服务器端脚本。

添加一个提交按钮和动作属性到你的表单如下:

提交按钮将出现在浏览器中。

HTML教程

现在已经介绍了表格和表单的基础知识,可以尝试使用更复杂的布局了。

相关文章
为您推荐
各种观点

报歉!评论已关闭.