html5 商场列表 html商品列表怎么做

 

文章目录

• 一、列表
•      1.1 无序列表
•      1.2 有序标签
•      1.3 自定义列表
• 二、表格

• 2.1.表格定义
• 2.2表格标签
• 2.3表格合并

• 总结

---

一、列表

1.1 无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 <ul> 标签。每个列表项始于 <li>。

无序列表可定义类型：（1）ype=“disc”项目符号为实体圆心；（2）type=“square”项目符号为实体方心；（3）type=“circle”项目符号为空心圆。

如：

<h1>软件编程语言</h1>
    <ul type="disc">
        <li>Java</li>
        <li>C++</li>
        <li>Python</li>
        <li>JavaScript</li>
    </ul>

结果如下：

1.2 有序列表

有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

有序列表可定义类型：（1）type="1" 使用数字作为项目符合；（2）type=“A/a”使用大小写字母作为项目符号；（3）type=“l/i”使用大小写罗马数字作为项目符号。

如：

<h1>搜索引擎排名</h1>
    <ol type="1">
        <li>Geogle</li>
        <li>Baidu</li>
        <li>Bing</li>
        <li>Sogou</li>
    </ol>

结果如下：

1.3 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

如：

<h1>健康食品</h1>
    <dl>
        <dt>水果</dt>
           <dd>苹果</dd>
           <dd>香蕉</dd>
        <dt>蔬菜</dt>
           <dd>西兰花</dd>
           <dd>菠菜</dd>
    </dl>

结果如下：

二、表格

2.1 表格定义

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。如：

<table border="1" width="100%">
    <caption>用户信息表</caption>        
    <thead>            
        <tr>                
            <th>姓名</th> <th>年龄</th>            
        </tr>        
    </thead>        
    <tbody>            
        <tr>                
            <td>张三</td> <td>20</td>            
        </tr>            
        <tr>                
            <td>李四</td> <td>30</td>            
        </tr>        
    </tbody>        
    <tfoot>            
        <tr>            	
            <td>平均年龄</td> <td>25</td>            
        </tr>        
    </tfoot>    
</table>

结果如下：

2.2 表格标签

表格	描述
<table>	定义表格
<caption>	定义表格标题。
<th>	定义表格的表头。
<tr>	定义表格的行。
<td>	定义表格单元。
<thead>	定义表格的页眉。
<tbody>	定义表格的主体。
<tfoot>	定义表格的页脚。
<col>	定义用于表格列的属性。
<colgroup>	定义表格列的组。

2.3 表格合并

2.3.1 表格合并列属性 colspan 将多列合并成一列。如：

<table border="1">        
    <tr>            
        <td colspan=“3”>用户信息表</td>            
    </tr>        
    <tr>            
        <td>张三</td>            
        <td>23</td>            
        <td>上海</td>        
    </tr>        
    <tr>            
         <td>李四</td>            
        <td>29</td>            
        <td>北京</td>        
    </tr>    
</table>

 结果如下：

2.3.2 表格合并行属性 rowspan 将多行合并成一行 。如：

<table border="1">        
    <tr>            
        <td colspan="3" >用户信息表</td>            
    </tr>        
    <tr>            
        <td>张三</td>            
        <td>23</td>            
        <td rowspan="2">上海</td>        
    </tr>        
    <tr>            
         <td>李四</td>            
        <td>29</td>            
    </tr>    
</table>

结果如下：

总结