本文共 2258 字，大约阅读时间需要 7 分钟。

一、列表标签

1.有序列表

（1）标签：<ol></ol> ordered lists 的缩写

                    <li></li> list item的缩写

（2）列表类型划分：1：使用数字作为项目符号

                                   A/a：使用大写/小写字母作为项目符号                                    I/i：使用大写/小写罗马数字作为项目符号

（3） 代码 示例：

    <h2>搜索引擎排名</h2>

    <ol type="1">

        <li>Google</li>

        <li>Baidu</li>

        <li>Bing</li>

        <li>Sougou</li>

    </ol>

效果：

2.无序列表

（1）标签：<ul></ul> unordered lists的缩写

                    <li></li> list item的缩写

（2）列表类型划分：disc：项目符号显示为实体圆心

                                  square：项目符号显示为实体方心                                   circle：项目符号显示为空心圆

（3）代码示例：

    <h2>软件编程语言</h2>

    <ul type="disc">

        <li>Java</li>

        <li>C++</li>

        <li>Python</li>

        <li>JavaScript</li>

    </ul>

效果：

3.无序列表

（1）标签：<dl></dl>: definition lists的缩写

                    <dt></dt>: definition term的缩写                     <dd></dd>: definition description的缩写

（2）代码示例：

    <h2>健康食品</h2>

    <dl>

        <dt>水果</dt>

        <dd>苹果</dd>

        <dd>香蕉</dd>

        <dt>蔬菜</dt>

        <dd>西兰花</dd>

        <dd>菠菜</dd>

    </dl>

效果：

二、表格标签

1.标签：<table></table>: 定义表格

              <tr></tr>:定义表格的行               <td></td>:定义表格的列               <caption></caption>:表格标题               <thead></thead>:表格头               <tbody></tbody>:表格主体               <tfoot></tfoot>:表格尾

2.表格的定义：  向表格中添加<caption><thead><tbody><tfoot>

   代码示例及效果：

3.表格的合并：colspan和rowspan分别用来合并行和列

代码示例及效果：

示例表格代码：

    <table align="center" border="1" width="30%">

        <caption>

            <h4>小说排行榜</h4>

        </caption>

        <thead font-weight:bold;>

            <tr>

                <th>排名</th>

                <th>关键词</th>

                <th>趋势</th>

                <th>今日搜索</th>

                <th>最近七日 </th>

                <th>相关链接</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>1</td>

                <td>鬼吹灯</td>

                <td><img src="up.jpg" alt=""></td>

                <td>356</td>

                <td>3560</td>

                <td><a href="">贴吧 </a> <a href="">图片 </a> <a href="">百科 </a></td>

            </tr>

            <tr>

                <td>1</td>

                <td>鬼吹灯</td>

                <td><img src="down.jpg" alt=""></td>

                <td>356</td>

                <td>3560</td>

                <td><a href="">贴吧 </a> <a href="">图片 </a> <a href="">百科 </a></td>

            </tr>

            <tr>

                <td>1</td>

                <td>鬼吹灯</td>

                <td><img src="up.jpg" alt=""></td>

                <td>356</td>

                <td>3560</td>

                <td><a href="">贴吧 </a> <a href="">图片 </a> <a href="">百科 </a></td>

            </tr>

            <tr>

                <td>1</td>

                <td>鬼吹灯</td>

                <td>1</td>

                <td>356</td>

                <td>3560</td>

                <td><a href="">贴吧 </a> <a href="">图片 </a> <a href="">百科 </a></td>

            </tr>

            <tr>

                <td>1</td>

                <td>鬼吹灯</td>

                <td>1</td>

                <td>356</td>

                <td>3560</td>

                <td><a href="">贴吧 </a> <a href="">图片 </a> <a href="">百科 </a></td>

            </tr>

            <tr>

                <td>1</td>

                <td>鬼吹灯</td>

                <td>1</td>

                <td>356</td>

                <td>3560</td>

                <td><a href="">贴吧 </a> <a href="">图片 </a> <a href="">百科 </a></td>

            </tr>

            <tr>

                <td>1</td>

                <td>鬼吹灯</td>

                <td>1</td>

                <td>356</td>

                <td>3560</td>

                <td><a href="">贴吧 </a> <a href="">图片 </a> <a href="">百科 </a></td>

            </tr>

        </tbody>

    </table>

效果图：

转载地址：https://blog.csdn.net/zy12344321/article/details/117449775 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！