HTML列表标签与表格标签

一、列表标签

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>

效果图：