HTML（二）——列表、表格

最新推荐文章于 2023-01-22 20:14:30 发布

非早起选手

最新推荐文章于 2023-01-22 20:14:30 发布

阅读量1.3k

点赞数 2

分类专栏：前端基础文章标签： css html

本文链接：https://blog.csdn.net/zg0601/article/details/120614177

版权

前端基础专栏收录该内容

16 篇文章 5 订阅

订阅专栏

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

一、HTML列表

HTML中有三种列表，分别是无序列表、有序列表和定义列表。

1、无序列表

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

其中<ul>中可以加上type，即确定项目符号的类别以改变无序列表的符号样式。

例：

<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>

浏览器效果如下：