Web前端开发——HTML之HTML标签（Ⅳ）div、ol、li、table

最新推荐文章于 2024-09-10 11:07:06 发布

OSurer

最新推荐文章于 2024-09-10 11:07:06 发布

阅读量3.4k

点赞数

分类专栏： Web前端开发文章标签： HTML div ol ul table

本文链接：https://blog.csdn.net/wq_ocean_/article/details/104132795

版权

Web前端开发专栏收录该内容

26 篇文章 4 订阅

订阅专栏

1. 区域div标签

作用：将一些文本段落等组织在在一起，成为一个整体的区域，方便结合css样式整体排版布局

1.1 测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div align="center">
        <h1>web 前端开发</h1>
        <p>HMTL</p>
        <p>CSS</p>
        <p>JaveScript</p>
    </div>
</body>
</html>

1.2 效果图

2. 无序列表ul、li

无序列表用ul标签表示，成对出现，ul表列表，li表列表项

2.1 测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
  <h1>web 前端开发</h1>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ul>
</body>
</html>

2.2 效果图

注：webstorm可以ul>li*数字快速生成标签

3. 有序列表ol、li

用法同无序列表，显示效果ol前有标号，标号可通过css设置

3.1 测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
  <h1>web 前端开发</h1>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ol>
</body>
</html>

3.2 效果图

4. 表格

4.1 表格的两种应用

第一种：基本不应用了。早期web技术所有页面的排版和布局，使用表格来完成，一个表格一般嵌套在另一个单元格的内部，逐层嵌套生成整个页面的一个结构。web技术发展后，现在主要采用div标签，结合css排版布局

第二种：仍然保留。有些数据信息依旧以表格呈现，需要用到table标签

4.2 table基本标签用法

table表整张表，tr表行，td表单元格，table有几个tr就表示有几行，有几个td就表该行有几个单元格；

webstorm可以用 table>tr*数字>td*数字 快速生成标签。

4.2.1 测试代码及效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table align="center">
        <tr>
            <td>red</td>
            <td>yellow</td>
        </tr>
        <tr>
            <td>blue</td>
            <td>green</td>
        </tr>
    </table>
</body>
</html>

由结果可以看到，表格没有边框，表格边框的样式要在css代码中设置，这里简单的用table的border属性设置，在t上述代码的table的头标签更改为：

<table border="1" align="center">

结果可以看到出现了两层边框嵌套的效果，这是因为每一个td单元格也有边框

4.3 表头单元格th

有时第一行要设置表头，冰洁加粗显示，这是可以用th标签

4.3.1 代码及其效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table border="1" align="center">
        <tr>   <th>班级</th>     <th>学生数</th>     <th>平均成绩</th>   </tr>
        <tr>   <td>一班</td>     <td>30</td>         <td>89</td>        </tr>
        <tr>   <td>二班</td>     <td>32</td>         <td>80</td>        </tr>
        <tr>   <td>三班</td>     <td>35</td>         <td>90</td>        </tr>
    </table>
</body>
</html>

如何要设计这种形式的表格：

第一行不能设置为只有两个单元格，应设计为三个单元格，第一个单元格为空，同时每个tr的第一个单元格用th标签，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table border="1" align="center">
        <tr>   <th></th>         <th>学生数</th>     <th>平均成绩</th>   </tr>
        <tr>   <th>一班</th>     <td>30</td>         <td>89</td>        </tr>
        <tr>   <th>二班</th>     <td>32</td>         <td>80</td>        </tr>
        <tr>   <th>三班</th>     <td>35</td>         <td>90</td>        </tr>
    </table>
</body>
</html>

5. 综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div>
        <table border="1" align="center">
            <tr>
                <td><h1>star top5</h1></td>
            </tr>
            <tr>
                <td>
                    <ol>
                        <li><a href="#">idol1</a></li>
                        <li><a href="#">idol2</a></li>
                        <li><a href="#">idol3</a></li>
                        <li><a href="#">idol4</a></li>
                        <li><a href="#">idol5</a></li>
                    </ol>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>