如果您一直在学习我们的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教程
现在已经介绍了表格和表单的基础知识,可以尝试使用更复杂的布局了。