HTML中的列表，表格及表单

一、列表

在html中，列表分为有序列表和无序列表两种。

1、有序列表（<ol>)

有序列表就是让信息在网页中能有顺序地显示。

<ol>
    <li>我是第一个</li>
    <li>我是第二个</li>
    <li>我是第三个</li>
</ol>

除了使用默认的阿拉伯数字排序，我们也可以通过 添加type属性用字母等对文本排序。

​
<ol type="A">
    <li>我是第一个</li>
    <li>我是第二个</li>
    <li>我是第三个</li>
</ol>

​

 2、无序列表<ul>

无序列表则是让文本无顺序排列。

​
<ul>
    <li>我是第一个</li>
    <li>我是第二个</li>
    <li>我是第三个</li>
</ul>

​

 

无序列表同样也可以通过type属性修改排序符号，常用的有空心圆（ circle），实心圆（disc），无符号（none）。

<ul type="disc">
    <li>我是第一个</li>
    <li>我是第二个</li>
    <li>我是第三个</li>
</ul>
<ul type="circle">
     <li>我是第一个</li>
     <li>我是第二个</li>
     <li>我是第三个</li>
</ul>
<ul type="none">
     <li>我是第一个</li>
     <li>我是第二个</li>
     <li>我是第三个</li>
</ul>

3、列表嵌套 

 无论是有序列表还是无序列表都可进行列表嵌套。

 <h2>商城支付向导</h1>
    <ul type="circle">
        <li>支付方式</li>
        <ul type="disc">
            <li>货到付款</li>
            <li>财付通</li>
            <li>支付宝</li>
            <li>网银在线</li>
        </ul>
        <hr>
        <li>网银在线支付步骤</li>
            <ol type="A">
                <li>选择您要使用的网上银行</li>
                <li>显示您的应付总价，点击“确认无误，付款”</li>
                <li>确认您在银行的预留信息，点击确认</li>
                <li>输入您的网银账号、登陆密码、验证码</li>
                <li>支付成功，提示“已完成付款”</li>
            </ol>
            <hr>
    </ul>

二、表格 

1、表格常见元素

在html中，我们可以通过<table>标签插入一个表格。简单的 HTML 表格由 table 元素以及一个或多个 <tr>、<th> 或 <td> 元素组成表格结构；其中： <tr> 元素定义表格行，<th> 元素定义表头，<td> 元素定义表格单元。

 

在上面的代码中，除了<tr>、<th>、<td> 三个表格元素外，还有其它几个元素用来使表格美观，和帮助搜索引擎实现更好的索引。

border	定义表格边框大小
width	定义表格宽度
height	定义表格高度
scope	定义表格的行标题<row>和列标题<col>
align	定义表格内容对齐方式

 

 

 

2、合并单元格 

在html中，我们同样可以合并单元格，使表格达到自己想要的效果。

colspan="2"	跨列合并单元格
rowspan="2"	跨行合并单元格
colspan="2"       rowspan="2"	先跨列合并，再跨行合并

 

三、表单 

在HTML中，表单<form>是一种允许用户与网页交互的界面元素，常用于收集用户输入、提交数据到服务器等。以下是表单的常用元素。

input标签	用于在表单中输入	radio属性	表单中的单选框
text属性	表单中的文本框	button属性	表单中的标准按钮
password属性	表单中的密码框	submit属性	表单中的提交按钮
file属性	表单中的文件域	reset属性	表单中的重置按钮
check属性	表单中的复选框	image属性	表单中的图像域

通过这些元素，我们便可以制作出一个较为常见的表单，以下是相关代码和运行结果。