
<body>
 
    <ul type="circle">
 
        <li>地球</li>
 
        <li>太阳</li>
 
        <li>火星</li>
 
        <li>金星</li>
 
        <li>木星</li>
 
    </ul>
 
</body>

在浏览器上效果如下：

其中，该例中选择空心圆项目符号样式（circle），若type为disc则为实心圆（默认）；若type为square则为方块。

2、有序列表

用<ol></ol>和<li></li>搭配使用。

其中<ol>中可以加上type和start值，即确定项目符号的类别以及序号起始值，以改变有序列表的符号样式。

例：


<body>
 
    <h3>怎么把大象装进冰箱？</h3>
 
    <ol type="1" start="1">
 
        <li>打开冰箱门</li>
 
        <li>把大象塞进去</li>
 
        <li>关上冰箱门</li>
 
    </ol>
 
</body>

在浏览器上效果如下：

其中type不仅可以设置为数字，还可以设置成大小写字母和罗马数字。起始值可以根据需要设置。

3、定义列表

在 HTML 中，<dl> 标签用于创建定义列表。它是由定义标题和定义描述两部分组成的，而且至少要包含一条定义标题或定义描述。

使用格式如下：


<dl>
 
      <dt>定义标题<dt>
 
      <dd>定义描述<dd>
 
      <dd>定义描述<dd>
 
      <dd>定义描述<dd>
 
</dl>

例：


<body>
 
    <dl>
 
        <dt>四大名著</dt>
 
        <dd>西游记</dd>
 
        <dd>水浒传</dd>
 
        <dd>红楼梦</dd>
 
        <dd>三国演义</dd>
 
    </dl>
 
</body>

在浏览器上效果如下：

4、列表简单实例（一个简简单单小目录）

代码如下：


<body>
 
    <ol type="1" start="1">
 
        <li>
 
            HTML常用标签
 
            <ul type="disc">
 
                <li>
 
                    文本标签
 
                    <ol type="a" start="a">
 
                        <li>标题标签</li>
 
                        <li>段落标签</li>
 
                        <li>显示文本标签</li>
 
                        <li>水平线标签</li>
 
                        <li>居中标签</li>
 
                    </ol>
 
                </li>
 
                <li>特殊标签</li>
 
                <li>样式和语句标签</li>
 
                <li>图像标签</li>
 
            </ul>
 
        </li>
 
        <li>
 
            路径
 
            <ul type="disc">
 
                <li>绝对路径</li>
 
                <li>相对路径</li>
 
            </ul>
 
        </li>
 
    </ol>
 
</body>

在浏览器上效果如下：

二、HTML表格

1、概念

表格是由行和列组成的结构化数据集(表格数据)，它能够使你简捷迅速地查找某个表示不同类型数据之间的某种关系的值。

2、基本结构


<table>          <!--定义表格-->
 
      <tr>       <!--定义表格的行-->
 
           <th>   <!--定义表格的标题栏，且文字加粗-->
 
           </th>
 
      </tr>
 
       <tr>      
 
           <td>   <!--定义表格的列-->
 
           </th>
 
      </tr>
 
</table>

3、相关标签及属性

①<table border='边框线的宽度' align='表格在页面中的对齐方式' bgcolor='表格的背景色'background='背景图片'></table> :表示一个表格

②<thead></thead>：语义标签,表示表格的头部

③<tr align='行的对齐方式' bgcolor='行的背景色' background='背景图片'> </tr>：表示表格的行,一个tr代表一行

④<th width='列宽'></th>：表示列头,文字会自动加粗、自动居中,特殊的单元格

⑤<tbody></tbody>：语义标签,表示表格的主体部分

⑥<td align='单元格的对齐方式'></td>：表示的表格中的单元格

⑦<caption></caption>：表示表格的标题

⑧表格空间属性：

cellspacing属性-定义表格单元格之间的空间
cellpadding属性-表示单元格边框与单元格内容之间的距离

⑨合并单元格：

如果要将两个或多个列合并为一个列，将使用colspan属性
如果要合并两行或更多行，则将使用rowspan属性

4、表格简单实例（一个普普通通学生成绩表）

代码如下：


<body>
 
    <br>
 
    <table border="2" align="center" cellpadding="0" cellspacing="0" background="./1.jpg">    
 
        <caption><h3>学生成绩表</h3></caption>     
 
        <thead>                  
 
            <tr height="50">        
 
                <th width='50' rowspan="2">学号</th>    
 
                <th width='50' rowspan="2">姓名</th>   
 
                <th width='50' rowspan="2">性别</th>
 
                <th width='100' rowspan="2">学校</th>
 
                <th width='50' rowspan="2">班级</th>
 
                <th width='100' colspan="2">成绩</th>        
 
            </tr>
 
            <tr>             
                <th width='50'>语文</th>
 
                <th width='50'>数学</th>
            </tr>
 
        </thead>
 
        <tbody>               
 
            <tr align="center">
 
                <td>001</td>
 
                <td>小红</td>
 
                <td>女</td>
 
                <td>小太阳幼儿园</td>
 
                <td>小一班</td>
 
                <td>100</td>
 
                <td>98</td>
 
            </tr>
 
 
            <tr align="center">
 
                <td>002</td>
 
                <td>小蓝</td>
 
                <td>女</td>
 
                <td>小太阳幼儿园</td>
 
                <td>小二班</td>
 
                <td>100</td>
 
                <td>98</td>
 
            </tr>
 
 
            <tr align="center">
 
                <td>003</td>
 
                <td>小绿</td>
 
                <td>男</td>
 
                <td>小太阳幼儿园</td>
 
                <td>大一班</td>
 
                <td>100</td>
 
                <td>98</td>
 
            </tr>
 
 
            <tr align="center">
 
                <td>004</td>
 
                <td>小黑</td>
 
                <td>男</td>
 
                <td>小太阳幼儿园</td>
 
                <td>小二班</td>
 
                <td>100</td>
 
                <td>98</td>
 
            </tr>
 
 
            <tr align="center">
 
                <td>005</td>
 
                <td>小白</td>
 
                <td>男</td>
 
                <td>小太阳幼儿园</td>
 
                <td>中二班</td>
 
                <td>100</td>
 
                <td>98</td>
 
            </tr>
 
        </tbody>
 
    </table>
 
</body>

浏览器效果如下：

上面的实例可以练习表格的使用，对单元项的合并也会更加熟练（背景图片自行设定）。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/328978